CSS   7

swipebox.css

Guest on 12th August 2021 06:46:21 PM

  1. /*!Swipebox v1.3.0 | Constantin Saguin csag.co | MIT License | github.com/brutaldesign/swipebox*/
  2. html.swipebox-html.swipebox-touch{
  3.         overflow:hidden!important
  4. }
  5. #swipebox-overlay img{
  6.         border:none!important
  7. }
  8. #swipebox-overlay{
  9.         width:100%;
  10.         height:100%;
  11.         position:fixed;
  12.         top:0;
  13.         left:0;
  14.         z-index:99999!important;
  15.         overflow:hidden;
  16.         -webkit-user-select:none;
  17.         -moz-user-select:none;
  18.         -ms-user-select:none;
  19.         user-select:none
  20. }
  21. #swipebox-container{
  22.         position:relative;
  23.         width:100%;
  24.         height:100%
  25. }
  26. #swipebox-slider{
  27.         -webkit-transition:-webkit-transform .4s ease;
  28.         transition:transform .4s ease;
  29.         height:100%;
  30.         left:0;
  31.         top:0;
  32.         width:100%;
  33.         white-space:nowrap;
  34.         position:absolute;
  35.         display:none;
  36.         cursor:pointer
  37. }
  38. #swipebox-slider .slide{
  39.         height:100%;
  40.         width:100%;
  41.         line-height:1px;
  42.         text-align:center;
  43.         display:inline-block
  44. }
  45. #swipebox-slider .slide:before{
  46.         content:"";
  47.         display:inline-block;
  48.         height:50%;
  49.         width:1px;
  50.         margin-right:-1px
  51. }
  52. #swipebox-slider .slide img,#swipebox-slider .slide .swipebox-video-container,#swipebox-slider .slide .swipebox-inline-container{
  53.         display:inline-block;
  54.         max-height:100%;
  55.         max-width:100%;
  56.         margin:0;
  57.         padding:0;
  58.         width:auto;
  59.         height:auto;
  60.         vertical-align:middle
  61. }
  62. #swipebox-slider .slide .swipebox-video-container{
  63.         background:0 0;
  64.         max-width:1140px;
  65.         max-height:100%;
  66.         width:100%;
  67.         padding:5%;
  68.         -webkit-box-sizing:border-box;
  69.         box-sizing:border-box
  70. }
  71. #swipebox-slider .slide .swipebox-video-container .swipebox-video{
  72.         width:100%;
  73.         height:0;
  74.         padding-bottom:56.25%;
  75.         overflow:hidden;
  76.         position:relative
  77. }
  78. #swipebox-slider .slide .swipebox-video-container .swipebox-video iframe{
  79.         width:100%!important;
  80.         height:100%!important;
  81.         position:absolute;
  82.         top:0;
  83.         left:0
  84. }
  85. #swipebox-slider .slide-loading{
  86.         background:url(swipebox-img/loader.gif) no-repeat center center
  87. }
  88. #swipebox-bottom-bar,#swipebox-top-bar{
  89.         -webkit-transition:.5s;
  90.         transition:.5s;
  91.         position:absolute;
  92.         left:0;
  93.         z-index:999;
  94.         height:50px;
  95.         width:100%
  96. }
  97. #swipebox-bottom-bar{
  98.         bottom:-50px
  99. }
  100. #swipebox-bottom-bar.visible-bars{
  101.         -webkit-transform:translate3d(0,-50px,0);
  102.         transform:translate3d(0,-50px,0)
  103. }
  104. #swipebox-top-bar{
  105.         top:-50px
  106. }
  107. #swipebox-top-bar.visible-bars{
  108.         -webkit-transform:translate3d(0,50px,0);
  109.         transform:translate3d(0,50px,0)
  110. }
  111. #swipebox-title{
  112.         display:block;
  113.         width:100%;
  114.         text-align:center
  115. }
  116. #swipebox-prev,#swipebox-next,#swipebox-close{
  117.         background-image:url(swipebox-img/icons.png);
  118.         background-repeat:no-repeat;
  119.         border:none!important;
  120.         text-decoration:none!important;
  121.         cursor:pointer;
  122.         width:50px;
  123.         height:50px;
  124.         top:0
  125. }
  126. #swipebox-arrows{
  127.         display:block;
  128.         margin:0 auto;
  129.         width:100%;
  130.         height:50px
  131. }
  132. #swipebox-prev{
  133.         background-position:-32px 13px;
  134.         float:left
  135. }
  136. #swipebox-next{
  137.         background-position:-78px 13px;
  138.         float:right
  139. }
  140. #swipebox-close{
  141.         top:0;
  142.         right:0;
  143.         position:absolute;
  144.         z-index:9999;
  145.         background-position:15px 12px
  146. }
  147. .swipebox-no-close-button #swipebox-close{
  148.         display:none
  149. }
  150. #swipebox-prev.disabled,#swipebox-next.disabled{
  151.         opacity:.3
  152. }
  153. .swipebox-no-touch #swipebox-overlay.rightSpring #swipebox-slider{
  154.         -webkit-animation:rightSpring .3s;
  155.         animation:rightSpring .3s
  156. }
  157. .swipebox-no-touch #swipebox-overlay.leftSpring #swipebox-slider{
  158.         -webkit-animation:leftSpring .3s;
  159.         animation:leftSpring .3s
  160. }
  161. .swipebox-touch #swipebox-container:before,.swipebox-touch #swipebox-container:after{
  162.         -webkit-backface-visibility:hidden;
  163.         backface-visibility:hidden;
  164.         -webkit-transition:all .3s ease;
  165.         transition:all .3s ease;
  166.         content:' ';
  167.         position:absolute;
  168.         z-index:999;
  169.         top:0;
  170.         height:100%;
  171.         width:20px;
  172.         opacity:0
  173. }
  174. .swipebox-touch #swipebox-container:before{
  175.         left:0;
  176.         -webkit-box-shadow:inset 10px 0 10px -8px #656565;
  177.         box-shadow:inset 10px 0 10px -8px #656565
  178. }
  179. .swipebox-touch #swipebox-container:after{
  180.         right:0;
  181.         -webkit-box-shadow:inset -10px 0 10px -8px #656565;
  182.         box-shadow:inset -10px 0 10px -8px #656565
  183. }
  184. .swipebox-touch #swipebox-overlay.leftSpringTouch #swipebox-container:before{
  185.         opacity:1
  186. }
  187. .swipebox-touch #swipebox-overlay.rightSpringTouch #swipebox-container:after{
  188.         opacity:1
  189. }
  190. @-webkit-keyframes rightSpring{
  191.         0%{
  192.                 left:0
  193. }
  194.         50%{
  195.                 left:-30px
  196. }
  197.         100%{
  198.                 left:0
  199. }
  200. }
  201. @keyframes rightSpring{
  202.         0%{
  203.                 left:0
  204. }
  205.         50%{
  206.                 left:-30px
  207. }
  208.         100%{
  209.                 left:0
  210. }
  211. }
  212. @-webkit-keyframes leftSpring{
  213.         0%{
  214.                 left:0
  215. }
  216.         50%{
  217.                 left:30px
  218. }
  219.         100%{
  220.                 left:0
  221. }
  222. }
  223. @keyframes leftSpring{
  224.         0%{
  225.                 left:0
  226. }
  227.         50%{
  228.                 left:30px
  229. }
  230.         100%{
  231.                 left:0
  232. }
  233. }
  234. @media screen and (min-width:800px){
  235.         #swipebox-close{
  236.                 right:10px
  237. }
  238.         #swipebox-arrows{
  239.                 width:92%;
  240.                 max-width:800px
  241. }
  242. }
  243. #swipebox-overlay{
  244.         background:#0d0d0d
  245. }
  246. #swipebox-bottom-bar,#swipebox-top-bar{
  247.         text-shadow:1px 1px 1px #000;
  248.         background:#000;
  249.         opacity:.95
  250. }
  251. #swipebox-top-bar{
  252.         color:#fff!important;
  253.         font-size:15px;
  254.         line-height:43px;
  255.         font-family:Helvetica,Arial,sans-serif
  256. }

Raw Paste


Login or Register to edit or fork this paste. It's free.