CSS   14

strip.css

Guest on 12th August 2021 06:47:15 PM

  1. /*!
  2.  * Strip - An Unobtrusive Responsive Lightbox - v1.7.0
  3.  * (c) 2014-2019 Nick Stakenburg
  4.  *
  5.  * http://www.stripjs.com
  6.  *
  7.  * Licensing:
  8.  * - Commercial: http://www.stripjs.com/license
  9.  * - Non-commercial: http://creativecommons.org/licenses/by-nc-nd/3.0
  10.  */
  11.  
  12. .strp-window {
  13.         position: fixed;
  14.         width: 0;
  15.         height: 100%;
  16.         overflow: hidden;
  17.         background: #292929;
  18.         font: 13px/20px "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, sans-serif;
  19. }
  20.  
  21. .strp-window.strp-vertical {
  22.         height: 0;
  23.         width: 100%;
  24. }
  25.  
  26. /* margin is added around the window to keep a visual reference
  27.  * to the underlying page at all times.
  28.  */
  29. .strp-window { margin-left: 40px; }
  30. .strp-window.strp-vertical { margin-left: 0; margin-bottom: 40px; }
  31.  
  32. /* fullscreen on smaller screens (iPhone 6+ and smaller)
  33.  * since min-width is used to make this work it won't show on IE8, but
  34.  * we're not expecting that browser to have a mobile sized screen anyway
  35.  */
  36. @media all and (max-width: 414px) and (orientation: portrait),
  37. all and (max-width: 736px) and (max-height: 414px) {
  38.         .strp-window.strp-horizontal { min-width: 100%; }
  39. }
  40. @media all and (max-height: 414px) and (orientation: landscape),
  41. all and (max-height: 736px) and (max-width: 414px){
  42.         .strp-window.strp-vertical { min-height: 100%; }
  43. }
  44.  
  45.  
  46. /* z-index */
  47. .strp-window,
  48. .strp-spinner-move {
  49.         z-index: 99999;
  50. }
  51.  
  52. /* reset box-sizing */
  53. .strp-window,
  54. .strp-window [class^='strp-'],
  55. .strp-spinner-move,
  56. .strp-spinner-move [class^='strp-'] {
  57.         box-sizing: border-box;
  58. }
  59.  
  60. /* Chrome hack, this fixes a visual glitch when quickly toggling a video */
  61. .strp-window { transform: translateZ(0px); }
  62.  
  63. /* some properties on the window are used to toggle things
  64.  * like margin and the fullscreen mode,
  65.  * we reset those properties after measuring them
  66.  */
  67. .strp-measured {
  68.         margin: 0 !important;
  69.         min-width: 0 !important;
  70.         min-height: 0 !important;
  71. }
  72.  
  73. .strp-pages {
  74.         position: absolute;
  75.         width: 100%;
  76.         height: 100%;
  77.         overflow: hidden;
  78. }
  79.  
  80. /* sides */
  81. .strp-side-right { top: 0; right: 0; }
  82. .strp-side-right .strp-pages { top: 0; right: 0; }
  83. .strp-side-right .strp-page { top: 0; right: 0; }
  84. .strp-side-right .strp-close { top: 0; right: 0; }
  85.  
  86. .strp-side-left { top: 0; left: 0; }
  87. .strp-side-left .strp-pages { top: 0; left: 0; }
  88. .strp-side-left .strp-page { top: 0; left: 0; }
  89. .strp-side-left .strp-close { top: 0; right: 0; }
  90.  
  91. .strp-side-top { top: 0; left: 0; }
  92. .strp-side-top .strp-pages { top: 0; left: 0; }
  93. .strp-side-top .strp-page { top: 0; left: 0; }
  94. .strp-side-top .strp-close { top: 0; right: 0; }
  95.  
  96. .strp-side-bottom { bottom: 0; left: 0; }
  97. .strp-side-bottom .strp-pages { bottom: 0; left: 0; }
  98. .strp-side-bottom .strp-page { bottom: 0; left: 0; }
  99. .strp-side-bottom .strp-close { top: 0; right: 0; }
  100.  
  101. .strp-page {
  102.         position: absolute;
  103.         width: 100%;
  104.         height: 100%;
  105. }
  106.  
  107. .strp-container {
  108.         position: absolute;
  109.         top: 0;
  110.         left: 0;
  111.         right: 0;
  112.         bottom: 0;
  113.         margin: 0;
  114.         padding: 0;
  115.         text-align: center;
  116.         background: #292929;
  117.         -webkit-user-select: none;
  118.         -moz-user-select: none;
  119.         user-select: none;
  120. }
  121.  
  122. /* youtube & vimeo use overlap:false, this adds padding
  123.    to make sure buttons don't overlap the content.
  124.    navbutton = 72 = 54 + (2 * 9 margin)
  125.    closebutton = 48
  126. */
  127. .strp-no-overlap .strp-container { padding: 48px 72px; }
  128. .strp-no-overlap.strp-no-sides .strp-container { padding: 48px 0; }
  129.  
  130. .strp-vertical .strp-no-overlap .strp-container { padding: 0 72px; }
  131. .strp-vertical .strp-no-overlap.strp-no-sides .strp-container { padding: 0 48px; }
  132.  
  133. .strp-hovering-clickable .strp-container { cursor: pointer; }
  134.  
  135.  
  136. .strp-content-element {
  137.         position: absolute;
  138.         top: 50%;
  139.         left: 50%;
  140. }
  141.  
  142. .strp-content-element iframe {
  143.         float: left;
  144.         width: 100%;
  145.         height: 100%;
  146. }
  147.  
  148. .strp-container img {
  149.         display: inline-block;
  150.         vertical-align: middle;
  151. }
  152.  
  153. .strp-info {
  154.         position: absolute;
  155.         bottom: 0;
  156.         left: 0;
  157.         width: 100%;
  158.         color: #efefef;
  159.         font-size: 13px;
  160.         line-height: 20px;
  161.         background: #000;
  162.         -webkit-text-size-adjust: none;
  163.         text-size-adjust: none;
  164. }
  165.  
  166. .strp-info-padder {
  167.         display: block;
  168.         overflow: hidden;
  169.         padding: 12px;
  170.         position: relative;
  171.         width: auto;
  172. }
  173.  
  174. .strp-caption {
  175.         width: auto;
  176.         display: inline;
  177.         white-space: wrap;
  178. }
  179.  
  180. .strp-position {
  181.         color: #b3b3b3;
  182.         float: right;
  183.         line-height: 21px;
  184.         opacity: 0.99;
  185.         position: relative;
  186.         text-align: right;
  187.         margin-left: 15px;
  188.         white-space: nowrap;
  189. }
  190.  
  191. /* links */
  192. .strp-info a,
  193. .strp-info a:hover {
  194.         color: #ccc;
  195.         border: 0;
  196.         background: none;
  197.         text-decoration: underline;
  198. }
  199. .strp-info a:hover { color: #eee; }
  200.  
  201.  
  202.  
  203. /* < > */
  204. .strp-nav {
  205.         position: absolute;
  206.         top: 50%;
  207.         width: 54px;
  208.         height: 72px;
  209.         margin: 0 9px;
  210.         margin-top: -36px;
  211.         cursor: pointer;
  212.         -webkit-user-select: none;
  213.         -moz-user-select: none;
  214.         user-select: none;
  215. }
  216. .strp-nav-previous { left: 0; }
  217. .strp-nav-next { right: 0; left: auto; }
  218.  
  219. .strp-nav-disabled { cursor: default; }
  220.  
  221. .strp-nav-button {
  222.         float: left;
  223.         width: 100%;
  224.         height: 100%;
  225.         margin: 0;
  226.         padding: 0;
  227. }
  228. .strp-nav-button-background {
  229.         position: absolute;
  230.         top: 0;
  231.         left: 0;
  232.         width: 100%;
  233.         height: 100%;
  234.         background-color: #101010;
  235. }
  236. .strp-nav-button-icon {
  237.         float: left;
  238.         position: relative;
  239.         height: 100%;
  240.         width: 100%;
  241.         zoom: 1;
  242.         background-position: 50% 50%;
  243.         background-repeat: no-repeat;
  244. }
  245.  
  246.  
  247. /* X */
  248. .strp-close {
  249.         position: absolute;
  250.         width: 48px;
  251.         height: 48px;
  252.         cursor: pointer;
  253.         -webkit-user-select: none;
  254.         -moz-user-select: none;
  255.         user-select: none;
  256. }
  257.  
  258. .strp-close-background,
  259. .strp-close-icon {
  260.         position: absolute;
  261.         top: 12px;
  262.         left: 12px;
  263.         height: 26px;
  264.         width: 26px;
  265.         background-position: 50% 50%;
  266.         background-repeat: no-repeat;
  267. }
  268.  
  269. .strp-close-background {
  270.         filter: alpha(opacity=80);
  271.         opacity: .8;
  272.         background-color: #101010;
  273. }
  274. .strp-close:hover .strp-close-background { background-color: #161616; }
  275.  
  276.  
  277. .strp-has-error .strp-container { background-color: #ca3434; }
  278. .strp-error {
  279.         position: absolute;
  280.         top: 50%;
  281.         left: 50%;
  282.         width: 240px;
  283.         height: 240px;
  284.         margin-left: -120px;
  285.         margin-top: -120px;
  286.         background-position: 50% 50%;
  287.         background-repeat: no-repeat;
  288.         background-image: url('strip-img/strip/error.svg');
  289. }
  290. .strp-no-svg .strp-error { background-image: url('strip-img/strip/error.png'); }
  291.  
  292. /* Spinner - loading icon, wrapped by a div that moves it */
  293. .strp-spinner-move {
  294.         position: fixed;
  295.         top: 0px;
  296.         right: 0px;
  297.         height: 48px;
  298.         width: 0;
  299.         /* ensure overflow during a jQuery animation */
  300.         overflow: visible !important;
  301. }
  302. .strp-spinner-move.strp-vertical { width: 48px; height: 0; }
  303.  
  304. .strp-spinner {
  305.         width: 48px;
  306.         height: 48px;
  307.         float: left;
  308.         position: relative;
  309. }
  310.  
  311. /* different sides */
  312. .strp-spinner-move.strp-side-top { top: 0; right: 0; bottom: auto; left: auto; }
  313. .strp-spinner-move.strp-side-bottom { top: auto; right: 0; bottom: 0; left: auto; }
  314.  
  315. .strp-spinner-move.strp-side-right .strp-spinner { margin-left: -48px; }
  316. .strp-spinner-move.strp-side-left .strp-spinner { margin-right: -48px; float: right; }
  317. .strp-spinner-move.strp-side-bottom .strp-spinner { margin-top: -48px; }
  318. .strp-spinner-move.strp-side-top .strp-spinner { position: absolute; bottom: 0; right: 0; margin-bottom: -48px; }
  319.  
  320.  
  321. @-moz-keyframes strp-spinner-spin { 100% { -moz-transform: rotate(360deg); } }
  322. @-webkit-keyframes strp-spinner-spin { 100% { -webkit-transform: rotate(360deg); } }
  323. @keyframes strp-spinner-spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
  324.  
  325. .strp-spinner-rotate,
  326. .strp-spinner-frame {
  327.         position: absolute;
  328.         top: 0;
  329.         left: 0;
  330.         width: 100%;
  331.         height: 100%;
  332. }
  333.  
  334. .strp-spinner-line {
  335.         position: absolute;
  336.         left: 50%;
  337.         top: 15px;
  338.         width: 2px;
  339.         margin-left: -1px;
  340.         height: 3px;
  341.         border-radius: 1px;
  342.         z-index: 80; /* amount of lines, removed later on */
  343.         color: inherit; /* color of the dots, inherited from text on the page */
  344. }
  345.  
  346.  
  347.  
  348. /*
  349.  * ===== Skin: strip =====
  350.  */
  351. /* < > */
  352. .strp-window-skin-strip .strp-nav-button-background { background-color: transparent; }
  353. .strp-window-skin-strip .strp-nav-previous .strp-nav-button-icon { background-image: url('strip-img/strip/previous.svg');  }
  354. .strp-window-skin-strip .strp-nav-next .strp-nav-button-icon { background-image: url('strip-img/strip/next.svg'); }
  355. /* IE7-8/no-svg (using a faded png) */
  356. .strp-window-skin-strip.strp-no-svg .strp-nav-previous .strp-nav-button-icon { background-image: url('strip-img/strip/previous-faded.png'); opacity: 1; }
  357. .strp-window-skin-strip.strp-no-svg .strp-nav-next .strp-nav-button-icon { background-image: url('strip-img/strip/next-faded.png'); opacity: 1; }
  358.  
  359. .strp-window-skin-strip .strp-nav .strp-nav-button-icon { opacity: .6; } /* normal state */
  360. .strp-window-skin-strip.strp-mobile-touch .strp-nav .strp-nav-button-icon { opacity: 1; } /* mobile-touch always has normal states at full opacity */
  361.  
  362. /* < > : hover */
  363. .strp-window-skin-strip .strp-nav:hover .strp-nav-button-icon,
  364. .strp-window-skin-strip .strp-nav-hover .strp-nav-button-icon { opacity: 1; }
  365. /* IE7-8/no-svg (unfaded png) */
  366. .strp-window-skin-strip.strp-no-svg .strp-nav.strp-nav-previous:hover .strp-nav-button-icon,
  367. .strp-window-skin-strip.strp-no-svg .strp-nav-hover.strp-nav-previous .strp-nav-button-icon { background-image: url('strip-img/strip/previous.png'); }
  368. .strp-window-skin-strip.strp-no-svg .strp-nav.strp-nav-next:hover .strp-nav-button-icon,
  369. .strp-window-skin-strip.strp-no-svg .strp-nav-hover.strp-nav-next .strp-nav-button-icon { background-image: url('strip-img/strip/next.png'); }
  370.  
  371. /* Reduce < > button size on narrow screens (iPhone 6 and smaller) */
  372. @media all and (max-width: 375px) and (orientation: portrait),
  373. all and (max-height: 375px) and (max-width: 667px) {
  374.         .strp-window-skin-strip .strp-nav {
  375.                 width: 48px;
  376.                 height: 60px;
  377.                 margin: 0 5px;
  378.                 margin-top: -30px;
  379.         }
  380.  
  381.         /* < > */
  382.         .strp-window-skin-strip .strp-nav-previous .strp-nav-button-icon { background-image: url('strip-img/strip/previous-small.svg');  }
  383.         .strp-window-skin-strip .strp-nav-next .strp-nav-button-icon { background-image: url('strip-img/strip/next-small.svg'); }
  384.         /* IE7-8/no-svg (using a faded png) */
  385.         .strp-window-skin-strip.strp-no-svg .strp-nav-previous .strp-nav-button-icon { background-image: url('strip-img/strip/previous-small-faded.png'); }
  386.         .strp-window-skin-strip.strp-no-svg .strp-nav-next .strp-nav-button-icon { background-image: url('strip-img/strip/next-small-faded.png'); }
  387.  
  388.         /* IE7-8/no-svg (unfaded png) */
  389.         .strp-window-skin-strip.strp-no-svg .strp-nav.strp-nav-previous:hover .strp-nav-button-icon,
  390.         .strp-window-skin-strip.strp-no-svg .strp-nav-hover.strp-nav-previous .strp-nav-button-icon { background-image: url('strip-img/strip/previous-small.png'); }
  391.         .strp-window-skin-strip.strp-no-svg .strp-nav.strp-nav-next:hover .strp-nav-button-icon,
  392.         .strp-window-skin-strip.strp-no-svg .strp-nav-hover.strp-nav-next .strp-nav-button-icon { background-image: url('strip-img/strip/next-small.png'); }
  393.  
  394.         /* also reduce padding
  395.            navbutton = 58 = 48 + (2 * 5 margin)
  396.            closebutton = 48
  397.          */
  398.         .strp-no-overlap .strp-container { padding: 48px 58px; }
  399.         .strp-no-overlap.strp-no-sides .strp-container { padding: 48px 0; }
  400.  
  401.         .strp-vertical .strp-no-overlap .strp-container { padding: 0 58px; }
  402.         .strp-vertical .strp-no-overlap.strp-no-sides .strp-container { padding: 0 48px; }
  403. }
  404.  
  405. /* X */
  406. .strp-window-skin-strip .strp-close .strp-close-icon { background-image: url('strip-img/strip/close.svg'); opacity: .8; }
  407. .strp-window-skin-strip .strp-close:hover .strp-close-icon { opacity: 1; }
  408. /* iOS 8.4.1 bug: when opacity changes it'll require 2 taps
  409.    force a single opacity to fix this
  410. */
  411. .strp-window-skin-strip.strp-mobile-touch .strp-close .strp-close-icon,
  412. .strp-window-skin-strip.strp-mobile-touch .strp-close:hover .strp-close-icon { opacity: 1; }
  413.  
  414. /* IE7-8/no-svg */
  415. .strp-window-skin-strip.strp-no-svg .strp-close .strp-close-icon { background-image: url('strip-img/strip/close.png'); opacity: 1; }
  416.  
  417.  
  418. /* here's how to have content slide in with the window when opening and closing  */
  419. /*
  420. .strp-window-skin-strip.strp-side-left.strp-opening  .strp-page,
  421. .strp-window-skin-strip.strp-side-left.strp-closing  .strp-page { left: auto; right: 0; }
  422. .strp-window-skin-strip.strp-side-right.strp-opening  .strp-page,
  423. .strp-window-skin-strip.strp-side-right.strp-closing  .strp-page { left: 0; right: auto; }
  424. .strp-window-skin-strip.strp-side-top.strp-opening  .strp-page,
  425. .strp-window-skin-strip.strp-side-top.strp-closing  .strp-page { bottom: 0; top: auto; }
  426. .strp-window-skin-strip.strp-side-bottom.strp-opening  .strp-page,
  427. .strp-window-skin-strip.strp-side-bottom.strp-closing  .strp-page { bottom: auto; top: 0; }
  428. */

Raw Paste


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