CSS   85

jqfancy css

Guest on 11th June 2022 01:56:38 AM

  1. body.compensate-for-scrollbar {
  2.   overflow: hidden; }
  3.  
  4. .fancybox-active {
  5.   height: auto; }
  6.  
  7. .fancybox-is-hidden {
  8.   left: -9999px;
  9.   margin: 0;
  10.   position: absolute !important;
  11.   top: -9999px;
  12.   visibility: hidden; }
  13.  
  14. .fancybox-container {
  15.   -webkit-backface-visibility: hidden;
  16.   height: 100%;
  17.   left: 0;
  18.   outline: none;
  19.   position: fixed;
  20.   -webkit-tap-highlight-color: transparent;
  21.   top: 0;
  22.   -ms-touch-action: manipulation;
  23.   touch-action: manipulation;
  24.   -webkit-transform: translateZ(0);
  25.   transform: translateZ(0);
  26.   width: 100%;
  27.   z-index: 99992; }
  28.  
  29. .fancybox-container * {
  30.   box-sizing: border-box; }
  31.  
  32. .fancybox-outer,
  33. .fancybox-inner,
  34. .fancybox-bg,
  35. .fancybox-stage {
  36.   bottom: 0;
  37.   left: 0;
  38.   position: absolute;
  39.   right: 0;
  40.   top: 0; }
  41.  
  42. .fancybox-outer {
  43.   -webkit-overflow-scrolling: touch;
  44.   overflow-y: auto; }
  45.  
  46. .fancybox-bg {
  47.   background: #1e1e1e;
  48.   opacity: 0;
  49.   transition-duration: inherit;
  50.   transition-property: opacity;
  51.   transition-timing-function: cubic-bezier(0.47, 0, 0.74, 0.71); }
  52.  
  53. .fancybox-is-open .fancybox-bg {
  54.   opacity: .9;
  55.   transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); }
  56.  
  57. .fancybox-infobar,
  58. .fancybox-toolbar,
  59. .fancybox-caption,
  60. .fancybox-navigation .fancybox-button {
  61.   direction: ltr;
  62.   opacity: 0;
  63.   position: absolute;
  64.   transition: opacity .25s ease, visibility 0s ease .25s;
  65.   visibility: hidden;
  66.   z-index: 99997; }
  67.  
  68. .fancybox-show-infobar .fancybox-infobar,
  69. .fancybox-show-toolbar .fancybox-toolbar,
  70. .fancybox-show-caption .fancybox-caption,
  71. .fancybox-show-nav .fancybox-navigation .fancybox-button {
  72.   opacity: 1;
  73.   transition: opacity .25s ease 0s, visibility 0s ease 0s;
  74.   visibility: visible; }
  75.  
  76. .fancybox-infobar {
  77.   color: #ccc;
  78.   font-size: 13px;
  79.   -webkit-font-smoothing: subpixel-antialiased;
  80.   height: 44px;
  81.   left: 0;
  82.   line-height: 44px;
  83.   min-width: 44px;
  84.   mix-blend-mode: difference;
  85.   padding: 0 10px;
  86.   pointer-events: none;
  87.   top: 0;
  88.   -webkit-touch-callout: none;
  89.   -webkit-user-select: none;
  90.   -moz-user-select: none;
  91.   -ms-user-select: none;
  92.   user-select: none; }
  93.  
  94. .fancybox-toolbar {
  95.   right: 0;
  96.   top: 0; }
  97.  
  98. .fancybox-stage {
  99.   direction: ltr;
  100.   overflow: visible;
  101.   -webkit-transform: translateZ(0);
  102.   transform: translateZ(0);
  103.   z-index: 99994; }
  104.  
  105. .fancybox-is-open .fancybox-stage {
  106.   overflow: hidden; }
  107.  
  108. .fancybox-slide {
  109.   -webkit-backface-visibility: hidden;
  110.   /* Using without prefix would break IE11 */
  111.   display: none;
  112.   height: 100%;
  113.   left: 0;
  114.   outline: none;
  115.   overflow: auto;
  116.   -webkit-overflow-scrolling: touch;
  117.   padding: 44px;
  118.   position: absolute;
  119.   text-align: center;
  120.   top: 0;
  121.   transition-property: opacity, -webkit-transform;
  122.   transition-property: transform, opacity;
  123.   transition-property: transform, opacity, -webkit-transform;
  124.   white-space: normal;
  125.   width: 100%;
  126.   z-index: 99994; }
  127.  
  128. .fancybox-slide::before {
  129.   content: '';
  130.   display: inline-block;
  131.   font-size: 0;
  132.   height: 100%;
  133.   vertical-align: middle;
  134.   width: 0; }
  135.  
  136. .fancybox-is-sliding .fancybox-slide,
  137. .fancybox-slide--previous,
  138. .fancybox-slide--current,
  139. .fancybox-slide--next {
  140.   display: block; }
  141.  
  142. .fancybox-slide--image {
  143.   overflow: hidden;
  144.   padding: 44px 0; }
  145.  
  146. .fancybox-slide--image::before {
  147.   display: none; }
  148.  
  149. .fancybox-slide--html {
  150.   padding: 6px; }
  151.  
  152. .fancybox-content {
  153.   background: #fff;
  154.   display: inline-block;
  155.   margin: 0;
  156.   max-width: 100%;
  157.   overflow: auto;
  158.   -webkit-overflow-scrolling: touch;
  159.   padding: 44px;
  160.   position: relative;
  161.   text-align: left;
  162.   vertical-align: middle; }
  163.  
  164. .fancybox-slide--image .fancybox-content {
  165.   -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.14, 1);
  166.   animation-timing-function: cubic-bezier(0.5, 0, 0.14, 1);
  167.   -webkit-backface-visibility: hidden;
  168.   background: transparent;
  169.   background-repeat: no-repeat;
  170.   background-size: 100% 100%;
  171.   left: 0;
  172.   max-width: none;
  173.   overflow: visible;
  174.   padding: 0;
  175.   position: absolute;
  176.   top: 0;
  177.   -webkit-transform-origin: top left;
  178.   -ms-transform-origin: top left;
  179.   transform-origin: top left;
  180.   transition-property: opacity, -webkit-transform;
  181.   transition-property: transform, opacity;
  182.   transition-property: transform, opacity, -webkit-transform;
  183.   -webkit-user-select: none;
  184.   -moz-user-select: none;
  185.   -ms-user-select: none;
  186.   user-select: none;
  187.   z-index: 99995; }
  188.  
  189. .fancybox-can-zoomOut .fancybox-content {
  190.   cursor: -webkit-zoom-out;
  191.   cursor: zoom-out; }
  192.  
  193. .fancybox-can-zoomIn .fancybox-content {
  194.   cursor: -webkit-zoom-in;
  195.   cursor: zoom-in; }
  196.  
  197. .fancybox-can-swipe .fancybox-content,
  198. .fancybox-can-pan .fancybox-content {
  199.   cursor: -webkit-grab;
  200.   cursor: grab; }
  201.  
  202. .fancybox-is-grabbing .fancybox-content {
  203.   cursor: -webkit-grabbing;
  204.   cursor: grabbing; }
  205.  
  206. .fancybox-container [data-selectable='true'] {
  207.   cursor: text; }
  208.  
  209. .fancybox-image,
  210. .fancybox-spaceball {
  211.   background: transparent;
  212.   border: 0;
  213.   height: 100%;
  214.   left: 0;
  215.   margin: 0;
  216.   max-height: none;
  217.   max-width: none;
  218.   padding: 0;
  219.   position: absolute;
  220.   top: 0;
  221.   -webkit-user-select: none;
  222.   -moz-user-select: none;
  223.   -ms-user-select: none;
  224.   user-select: none;
  225.   width: 100%; }
  226.  
  227. .fancybox-spaceball {
  228.   z-index: 1; }
  229.  
  230. .fancybox-slide--video .fancybox-content,
  231. .fancybox-slide--map .fancybox-content,
  232. .fancybox-slide--pdf .fancybox-content,
  233. .fancybox-slide--iframe .fancybox-content {
  234.   height: 100%;
  235.   overflow: visible;
  236.   padding: 0;
  237.   width: 100%; }
  238.  
  239. .fancybox-slide--video .fancybox-content {
  240.   background: #000; }
  241.  
  242. .fancybox-slide--map .fancybox-content {
  243.   background: #e5e3df; }
  244.  
  245. .fancybox-slide--iframe .fancybox-content {
  246.   background: #fff; }
  247.  
  248. .fancybox-video,
  249. .fancybox-iframe {
  250.   background: transparent;
  251.   border: 0;
  252.   display: block;
  253.   height: 100%;
  254.   margin: 0;
  255.   overflow: hidden;
  256.   padding: 0;
  257.   width: 100%; }
  258.  
  259. /* Fix iOS */
  260. .fancybox-iframe {
  261.   left: 0;
  262.   position: absolute;
  263.   top: 0; }
  264.  
  265. .fancybox-error {
  266.   background: #fff;
  267.   cursor: default;
  268.   max-width: 400px;
  269.   padding: 40px;
  270.   width: 100%; }
  271.  
  272. .fancybox-error p {
  273.   color: #444;
  274.   font-size: 16px;
  275.   line-height: 20px;
  276.   margin: 0;
  277.   padding: 0; }
  278.  
  279. /* Buttons */
  280. .fancybox-button {
  281.   background: rgba(30, 30, 30, 0.6);
  282.   border: 0;
  283.   border-radius: 0;
  284.   box-shadow: none;
  285.   cursor: pointer;
  286.   display: inline-block;
  287.   height: 44px;
  288.   margin: 0;
  289.   padding: 10px;
  290.   position: relative;
  291.   transition: color .2s;
  292.   vertical-align: top;
  293.   visibility: inherit;
  294.   width: 44px; }
  295.  
  296. .fancybox-button,
  297. .fancybox-button:visited,
  298. .fancybox-button:link {
  299.   color: #ccc; }
  300.  
  301. .fancybox-button:hover {
  302.   color: #fff; }
  303.  
  304. .fancybox-button:focus {
  305.   outline: none; }
  306.  
  307. .fancybox-button.fancybox-focus {
  308.   outline: 1px dotted; }
  309.  
  310. .fancybox-button[disabled],
  311. .fancybox-button[disabled]:hover {
  312.   color: #888;
  313.   cursor: default;
  314.   outline: none; }
  315.  
  316. /* Fix IE11 */
  317. .fancybox-button div {
  318.   height: 100%; }
  319.  
  320. .fancybox-button svg {
  321.   display: block;
  322.   height: 100%;
  323.   overflow: visible;
  324.   position: relative;
  325.   width: 100%; }
  326.  
  327. .fancybox-button svg path {
  328.   fill: currentColor;
  329.   stroke-width: 0; }
  330.  
  331. .fancybox-button--play svg:nth-child(2),
  332. .fancybox-button--fsenter svg:nth-child(2) {
  333.   display: none; }
  334.  
  335. .fancybox-button--pause svg:nth-child(1),
  336. .fancybox-button--fsexit svg:nth-child(1) {
  337.   display: none; }
  338.  
  339. .fancybox-progress {
  340.   background: #ff5268;
  341.   height: 2px;
  342.   left: 0;
  343.   position: absolute;
  344.   right: 0;
  345.   top: 0;
  346.   -webkit-transform: scaleX(0);
  347.   -ms-transform: scaleX(0);
  348.   transform: scaleX(0);
  349.   -webkit-transform-origin: 0;
  350.   -ms-transform-origin: 0;
  351.   transform-origin: 0;
  352.   transition-property: -webkit-transform;
  353.   transition-property: transform;
  354.   transition-property: transform, -webkit-transform;
  355.   transition-timing-function: linear;
  356.   z-index: 99998; }
  357.  
  358. /* Close button on the top right corner of html content */
  359. .fancybox-close-small {
  360.   background: transparent;
  361.   border: 0;
  362.   border-radius: 0;
  363.   color: #ccc;
  364.   cursor: pointer;
  365.   opacity: .8;
  366.   padding: 8px;
  367.   position: absolute;
  368.   right: -12px;
  369.   top: -44px;
  370.   z-index: 401; }
  371.  
  372. .fancybox-close-small:hover {
  373.   color: #fff;
  374.   opacity: 1; }
  375.  
  376. .fancybox-slide--html .fancybox-close-small {
  377.   color: currentColor;
  378.   padding: 10px;
  379.   right: 0;
  380.   top: 0; }
  381.  
  382. .fancybox-slide--image.fancybox-is-scaling .fancybox-content {
  383.   overflow: hidden; }
  384.  
  385. .fancybox-is-scaling .fancybox-close-small,
  386. .fancybox-is-zoomable.fancybox-can-pan .fancybox-close-small {
  387.   display: none; }
  388.  
  389. /* Navigation arrows */
  390. .fancybox-navigation .fancybox-button {
  391.   background-clip: content-box;
  392.   height: 100px;
  393.   opacity: 0;
  394.   position: absolute;
  395.   top: calc(50% - 50px);
  396.   width: 70px; }
  397.  
  398. .fancybox-navigation .fancybox-button div {
  399.   padding: 7px; }
  400.  
  401. .fancybox-navigation .fancybox-button--arrow_left {
  402.   left: 0;
  403.   padding: 31px 26px 31px 6px; }
  404.  
  405. .fancybox-navigation .fancybox-button--arrow_right {
  406.   padding: 31px 6px 31px 26px;
  407.   right: 0; }
  408.  
  409. /* Caption */
  410. .fancybox-caption {
  411.   bottom: 0;
  412.   color: #eee;
  413.   font-size: 14px;
  414.   font-weight: 400;
  415.   left: 0;
  416.   line-height: 1.5;
  417.   padding: 25px 44px 25px 44px;
  418.   right: 0;
  419.   text-align: center;
  420.   z-index: 99996; }
  421.  
  422. .fancybox-caption::before {
  423.   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAD6CAQAAADKSeXYAAAAYklEQVQoz42RwQ3AMAgDjfcfup8WoRykfBAK5mQHKSz5rbXJPis1hjiV3CIqgG0hLZPkVkA4p4x5oR1bVeDrdCLrW2Q0D5bcwY3TGMHbdw3mPRuOtaspYP1w//G1OIcW148H0DMCqI/3mMMAAAAASUVORK5CYII=);
  424.   background-repeat: repeat-x;
  425.   background-size: contain;
  426.   bottom: 0;
  427.   content: '';
  428.   display: block;
  429.   left: 0;
  430.   pointer-events: none;
  431.   position: absolute;
  432.   right: 0;
  433.   top: -44px;
  434.   z-index: -1; }
  435.  
  436. .fancybox-caption a,
  437. .fancybox-caption a:link,
  438. .fancybox-caption a:visited {
  439.   color: #ccc;
  440.   text-decoration: none; }
  441.  
  442. .fancybox-caption a:hover {
  443.   color: #fff;
  444.   text-decoration: underline; }
  445.  
  446. /* Loading indicator */
  447. .fancybox-loading {
  448.   -webkit-animation: fancybox-rotate 1s linear infinite;
  449.   animation: fancybox-rotate 1s linear infinite;
  450.   background: transparent;
  451.   border: 4px solid #888;
  452.   border-bottom-color: #fff;
  453.   border-radius: 50%;
  454.   height: 50px;
  455.   left: 50%;
  456.   margin: -25px 0 0 -25px;
  457.   opacity: .7;
  458.   padding: 0;
  459.   position: absolute;
  460.   top: 50%;
  461.   width: 50px;
  462.   z-index: 99999; }
  463.  
  464. @-webkit-keyframes fancybox-rotate {
  465.   100% {
  466.     -webkit-transform: rotate(360deg);
  467.     transform: rotate(360deg); } }
  468.  
  469. @keyframes fancybox-rotate {
  470.   100% {
  471.     -webkit-transform: rotate(360deg);
  472.     transform: rotate(360deg); } }
  473.  
  474. /* Transition effects */
  475. .fancybox-animated {
  476.   transition-timing-function: cubic-bezier(0, 0, 0.25, 1); }
  477.  
  478. /* transitionEffect: slide */
  479. .fancybox-fx-slide.fancybox-slide--previous {
  480.   opacity: 0;
  481.   -webkit-transform: translate3d(-100%, 0, 0);
  482.   transform: translate3d(-100%, 0, 0); }
  483.  
  484. .fancybox-fx-slide.fancybox-slide--next {
  485.   opacity: 0;
  486.   -webkit-transform: translate3d(100%, 0, 0);
  487.   transform: translate3d(100%, 0, 0); }
  488.  
  489. .fancybox-fx-slide.fancybox-slide--current {
  490.   opacity: 1;
  491.   -webkit-transform: translate3d(0, 0, 0);
  492.   transform: translate3d(0, 0, 0); }
  493.  
  494. /* transitionEffect: fade */
  495. .fancybox-fx-fade.fancybox-slide--previous,
  496. .fancybox-fx-fade.fancybox-slide--next {
  497.   opacity: 0;
  498.   transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
  499.  
  500. .fancybox-fx-fade.fancybox-slide--current {
  501.   opacity: 1; }
  502.  
  503. /* transitionEffect: zoom-in-out */
  504. .fancybox-fx-zoom-in-out.fancybox-slide--previous {
  505.   opacity: 0;
  506.   -webkit-transform: scale3d(1.5, 1.5, 1.5);
  507.   transform: scale3d(1.5, 1.5, 1.5); }
  508.  
  509. .fancybox-fx-zoom-in-out.fancybox-slide--next {
  510.   opacity: 0;
  511.   -webkit-transform: scale3d(0.5, 0.5, 0.5);
  512.   transform: scale3d(0.5, 0.5, 0.5); }
  513.  
  514. .fancybox-fx-zoom-in-out.fancybox-slide--current {
  515.   opacity: 1;
  516.   -webkit-transform: scale3d(1, 1, 1);
  517.   transform: scale3d(1, 1, 1); }
  518.  
  519. /* transitionEffect: rotate */
  520. .fancybox-fx-rotate.fancybox-slide--previous {
  521.   opacity: 0;
  522.   -webkit-transform: rotate(-360deg);
  523.   -ms-transform: rotate(-360deg);
  524.   transform: rotate(-360deg); }
  525.  
  526. .fancybox-fx-rotate.fancybox-slide--next {
  527.   opacity: 0;
  528.   -webkit-transform: rotate(360deg);
  529.   -ms-transform: rotate(360deg);
  530.   transform: rotate(360deg); }
  531.  
  532. .fancybox-fx-rotate.fancybox-slide--current {
  533.   opacity: 1;
  534.   -webkit-transform: rotate(0deg);
  535.   -ms-transform: rotate(0deg);
  536.   transform: rotate(0deg); }
  537.  
  538. /* transitionEffect: circular */
  539. .fancybox-fx-circular.fancybox-slide--previous {
  540.   opacity: 0;
  541.   -webkit-transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0);
  542.   transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0); }
  543.  
  544. .fancybox-fx-circular.fancybox-slide--next {
  545.   opacity: 0;
  546.   -webkit-transform: scale3d(0, 0, 0) translate3d(100%, 0, 0);
  547.   transform: scale3d(0, 0, 0) translate3d(100%, 0, 0); }
  548.  
  549. .fancybox-fx-circular.fancybox-slide--current {
  550.   opacity: 1;
  551.   -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  552.   transform: scale3d(1, 1, 1) translate3d(0, 0, 0); }
  553.  
  554. /* transitionEffect: tube */
  555. .fancybox-fx-tube.fancybox-slide--previous {
  556.   -webkit-transform: translate3d(-100%, 0, 0) scale(0.1) skew(-10deg);
  557.   transform: translate3d(-100%, 0, 0) scale(0.1) skew(-10deg); }
  558.  
  559. .fancybox-fx-tube.fancybox-slide--next {
  560.   -webkit-transform: translate3d(100%, 0, 0) scale(0.1) skew(10deg);
  561.   transform: translate3d(100%, 0, 0) scale(0.1) skew(10deg); }
  562.  
  563. .fancybox-fx-tube.fancybox-slide--current {
  564.   -webkit-transform: translate3d(0, 0, 0) scale(1);
  565.   transform: translate3d(0, 0, 0) scale(1); }
  566.  
  567. /* Styling for Small-Screen Devices */
  568. @media all and (max-height: 576px) {
  569.   .fancybox-caption {
  570.     padding: 12px; }
  571.   .fancybox-slide {
  572.     padding-left: 6px;
  573.     padding-right: 6px; }
  574.   .fancybox-slide--image {
  575.     padding: 6px 0; }
  576.   .fancybox-close-small {
  577.     right: -6px; }
  578.   .fancybox-slide--image .fancybox-close-small {
  579.     background: #4e4e4e;
  580.     color: #f2f4f6;
  581.     height: 36px;
  582.     opacity: 1;
  583.     padding: 6px;
  584.     right: 0;
  585.     top: 0;
  586.     width: 36px; } }
  587.  
  588. /* Share */
  589. .fancybox-share {
  590.   background: #f4f4f4;
  591.   border-radius: 3px;
  592.   max-width: 90%;
  593.   padding: 30px;
  594.   text-align: center; }
  595.  
  596. .fancybox-share h1 {
  597.   color: #222;
  598.   font-size: 35px;
  599.   font-weight: 700;
  600.   margin: 0 0 20px 0; }
  601.  
  602. .fancybox-share p {
  603.   margin: 0;
  604.   padding: 0; }
  605.  
  606. .fancybox-share__button {
  607.   border: 0;
  608.   border-radius: 3px;
  609.   display: inline-block;
  610.   font-size: 14px;
  611.   font-weight: 700;
  612.   line-height: 40px;
  613.   margin: 0 5px 10px 5px;
  614.   min-width: 130px;
  615.   padding: 0 15px;
  616.   text-decoration: none;
  617.   transition: all .2s;
  618.   -webkit-user-select: none;
  619.   -moz-user-select: none;
  620.   -ms-user-select: none;
  621.   user-select: none;
  622.   white-space: nowrap; }
  623.  
  624. .fancybox-share__button:visited,
  625. .fancybox-share__button:link {
  626.   color: #fff; }
  627.  
  628. .fancybox-share__button:hover {
  629.   text-decoration: none; }
  630.  
  631. .fancybox-share__button--fb {
  632.   background: #3b5998; }
  633.  
  634. .fancybox-share__button--fb:hover {
  635.   background: #344e86; }
  636.  
  637. .fancybox-share__button--pt {
  638.   background: #bd081d; }
  639.  
  640. .fancybox-share__button--pt:hover {
  641.   background: #aa0719; }
  642.  
  643. .fancybox-share__button--tw {
  644.   background: #1da1f2; }
  645.  
  646. .fancybox-share__button--tw:hover {
  647.   background: #0d95e8; }
  648.  
  649. .fancybox-share__button svg {
  650.   height: 25px;
  651.   margin-right: 7px;
  652.   position: relative;
  653.   top: -1px;
  654.   vertical-align: middle;
  655.   width: 25px; }
  656.  
  657. .fancybox-share__button svg path {
  658.   fill: #fff; }
  659.  
  660. .fancybox-share__input {
  661.   background: transparent;
  662.   border: 0;
  663.   border-bottom: 1px solid #d7d7d7;
  664.   border-radius: 0;
  665.   color: #5d5b5b;
  666.   font-size: 14px;
  667.   margin: 10px 0 0 0;
  668.   outline: none;
  669.   padding: 10px 15px;
  670.   width: 100%; }
  671.  
  672. /* Thumbs */
  673. .fancybox-thumbs {
  674.   background: #ddd;
  675.   bottom: 0;
  676.   display: none;
  677.   margin: 0;
  678.   -webkit-overflow-scrolling: touch;
  679.   -ms-overflow-style: -ms-autohiding-scrollbar;
  680.   padding: 2px 2px 4px 2px;
  681.   position: absolute;
  682.   right: 0;
  683.   -webkit-tap-highlight-color: transparent;
  684.   top: 0;
  685.   width: 212px;
  686.   z-index: 99995; }
  687.  
  688. .fancybox-thumbs-x {
  689.   overflow-x: auto;
  690.   overflow-y: hidden; }
  691.  
  692. .fancybox-show-thumbs .fancybox-thumbs {
  693.   display: block; }
  694.  
  695. .fancybox-show-thumbs .fancybox-inner {
  696.   right: 212px; }
  697.  
  698. .fancybox-thumbs__list {
  699.   font-size: 0;
  700.   height: 100%;
  701.   list-style: none;
  702.   margin: 0;
  703.   overflow-x: hidden;
  704.   overflow-y: auto;
  705.   padding: 0;
  706.   position: absolute;
  707.   position: relative;
  708.   white-space: nowrap;
  709.   width: 100%; }
  710.  
  711. .fancybox-thumbs-x .fancybox-thumbs__list {
  712.   overflow: hidden; }
  713.  
  714. .fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar {
  715.   width: 7px; }
  716.  
  717. .fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-track {
  718.   background: #fff;
  719.   border-radius: 10px;
  720.   box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); }
  721.  
  722. .fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-thumb {
  723.   background: #2a2a2a;
  724.   border-radius: 10px; }
  725.  
  726. .fancybox-thumbs__list a {
  727.   -webkit-backface-visibility: hidden;
  728.   backface-visibility: hidden;
  729.   background-color: rgba(0, 0, 0, 0.1);
  730.   background-position: center center;
  731.   background-repeat: no-repeat;
  732.   background-size: cover;
  733.   cursor: pointer;
  734.   float: left;
  735.   height: 75px;
  736.   margin: 2px;
  737.   max-height: calc(100% - 8px);
  738.   max-width: calc(50% - 4px);
  739.   outline: none;
  740.   overflow: hidden;
  741.   padding: 0;
  742.   position: relative;
  743.   -webkit-tap-highlight-color: transparent;
  744.   width: 100px; }
  745.  
  746. .fancybox-thumbs__list a::before {
  747.   border: 6px solid #ff5268;
  748.   bottom: 0;
  749.   content: '';
  750.   left: 0;
  751.   opacity: 0;
  752.   position: absolute;
  753.   right: 0;
  754.   top: 0;
  755.   transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  756.   z-index: 99991; }
  757.  
  758. .fancybox-thumbs__list a:focus::before {
  759.   opacity: .5; }
  760.  
  761. .fancybox-thumbs__list a.fancybox-thumbs-active::before {
  762.   opacity: 1; }
  763.  
  764. /* Styling for Small-Screen Devices */
  765. @media all and (max-width: 576px) {
  766.   .fancybox-thumbs {
  767.     width: 110px; }
  768.   .fancybox-show-thumbs .fancybox-inner {
  769.     right: 110px; }
  770.   .fancybox-thumbs__list a {
  771.     max-width: calc(100% - 10px); } }

Raw Paste

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