CSS   37

swipebox

Guest on 5th May 2022 01:52:54 AM

  1. .swipebox-overflow-hidden {
  2.   overflow: hidden!important;
  3. }
  4.  
  5. #swipebox-overlay img {
  6.   border: none!important;
  7. }
  8.  
  9. #swipebox-overlay {
  10.   width: 100%;
  11.   height: 100%;
  12.   position: fixed;
  13.   top: 0;
  14.   left: 0;
  15.   opacity: 0;
  16.   z-index: 9999;
  17.   overflow: hidden;
  18.   display: none;
  19.   -webkit-user-select: none;
  20.   -moz-user-select: none;
  21.   user-select: none;
  22. }
  23.  
  24. #swipebox-slider {
  25.   height: 100%;
  26.   left: 0;
  27.   top: 0;
  28.   width: 100%;
  29.   white-space: nowrap;
  30.   position: absolute;
  31. }
  32.  
  33. #swipebox-slider .slide {
  34.   background: url(../images/loader.gif) no-repeat center center;
  35.   height: 100%;
  36.   line-height: 1px;
  37.   text-align: center;
  38.   width: 100%;
  39.   display: inline-block;
  40. }
  41.  
  42. #swipebox-slider .slide:before {
  43.   content: "";
  44.   display: inline-block;
  45.   height: 50%;
  46.   width: 1px;
  47.   margin-right: -1px;
  48. }
  49.  
  50. #swipebox-slider .slide img {
  51.   display: inline-block;
  52.   max-height: 100%;
  53.   max-width: 100%;
  54.   width: auto;
  55.   height: auto;
  56.   vertical-align: middle;
  57. }
  58.  
  59. #swipebox-action, #swipebox-caption {
  60.   position: absolute;
  61.   left: 0;
  62.   z-index: 999;
  63.   height: 50px;
  64.   width: 100%;
  65. }
  66.  
  67. #swipebox-action {
  68.   bottom: -50px;
  69. }
  70. #swipebox-action.visible-bars {
  71.   bottom: 0;
  72. }
  73.  
  74. #swipebox-action.force-visible-bars {
  75.   bottom: 0!important;
  76. }
  77.  
  78. #swipebox-caption {
  79.   top: -50px;
  80.   text-align: center;
  81. }
  82. #swipebox-caption.visible-bars {
  83.   top: 0;
  84. }
  85.  
  86. #swipebox-caption.force-visible-bars {
  87.   top: 0!important;
  88. }
  89.  
  90. #swipebox-action #swipebox-prev, #swipebox-action #swipebox-next,
  91. #swipebox-action #swipebox-close {
  92.   background-image: url(../images/icons.png);
  93.   background-repeat: no-repeat;
  94.   border: none!important;
  95.   text-decoration: none!important;
  96.   cursor: pointer;
  97.   position: absolute;
  98.   width: 50px;
  99.   height: 50px;
  100.   top: 0;
  101. }
  102.  
  103. #swipebox-action #swipebox-close {
  104.   background-position: 15px 12px;
  105.   left: 40px;
  106. }
  107.  
  108. #swipebox-action #swipebox-prev {
  109.   background-position: -32px 13px;
  110.   right: 100px;
  111. }
  112.  
  113. #swipebox-action #swipebox-next {
  114.   background-position: -78px 13px;
  115.   right: 40px;
  116. }
  117.  
  118. #swipebox-action #swipebox-prev.disabled,
  119. #swipebox-action #swipebox-next.disabled {
  120.   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
  121.   opacity: 0.3;
  122. }
  123.  
  124. #swipebox-slider.rightSpring {
  125.   -moz-animation: rightSpring 0.3s;
  126.   -webkit-animation: rightSpring 0.3s;
  127. }
  128.  
  129. #swipebox-slider.leftSpring {
  130.   -moz-animation: leftSpring 0.3s;
  131.   -webkit-animation: leftSpring 0.3s;
  132. }
  133.  
  134. @-moz-keyframes rightSpring {
  135.   0% {
  136.     margin-left: 0px;
  137.   }
  138.  
  139.   50% {
  140.     margin-left: -30px;
  141.   }
  142.  
  143.   100% {
  144.     margin-left: 0px;
  145.   }
  146. }
  147.  
  148. @-moz-keyframes leftSpring {
  149.   0% {
  150.     margin-left: 0px;
  151.   }
  152.  
  153.   50% {
  154.     margin-left: 30px;
  155.   }
  156.  
  157.   100% {
  158.     margin-left: 0px;
  159.   }
  160. }
  161.  
  162. @-webkit-keyframes rightSpring {
  163.   0% {
  164.     margin-left: 0px;
  165.   }
  166.  
  167.   50% {
  168.     margin-left: -30px;
  169.   }
  170.  
  171.   100% {
  172.     margin-left: 0px;
  173.   }
  174. }
  175.  
  176. @-webkit-keyframes leftSpring {
  177.   0% {
  178.     margin-left: 0px;
  179.   }
  180.  
  181.   50% {
  182.     margin-left: 30px;
  183.   }
  184.  
  185.   100% {
  186.     margin-left: 0px;
  187.   }
  188. }
  189.  
  190. /* Skin
  191. --------------------------*/
  192. #swipebox-overlay {
  193.   background: #0d0d0d;
  194. }
  195.  
  196. #swipebox-action, #swipebox-caption {
  197.   text-shadow: 1px 1px 1px black;
  198.   background-color: #0d0d0d;
  199.   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0d0d0d), color-stop(100%, #000000));
  200.   background-image: -webkit-linear-gradient(#0d0d0d, #000000);
  201.   background-image: -moz-linear-gradient(#0d0d0d, #000000);
  202.   background-image: -o-linear-gradient(#0d0d0d, #000000);
  203.   background-image: linear-gradient(#0d0d0d, #000000);
  204.   -webkit-box-shadow: 0 1px 1px 1px #212121, inset 0 1px 1px 1px black;
  205.   -moz-box-shadow: 0 1px 1px 1px #212121, inset 0 1px 1px 1px black;
  206.   box-shadow: 0 1px 1px 1px #212121, inset 0 1px 1px 1px black;
  207.   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=95);
  208.   opacity: 0.95;
  209. }
  210.  
  211. #swipebox-action {
  212.   -webkit-box-shadow: 0 -1px -1px 1px #212121, inset 0 -1px -1px 1px black;
  213.   -moz-box-shadow: 0 -1px -1px 1px #212121, inset 0 -1px -1px 1px black;
  214.   box-shadow: 0 -1px -1px 1px #212121, inset 0 -1px -1px 1px black;
  215. }
  216.  
  217. #swipebox-caption {
  218.   color: white!important;
  219.   font-size: 15px;
  220.   line-height: 43px;
  221.   font-family: Helvetica, Arial, sans-serif;
  222. }

Raw Paste


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