Advertisement
s-sols

Untitled

Apr 12th, 2024
666
0
2 days
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 9.86 KB | None | 0 0
  1. /* Product thumbnails */
  2. body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .entry-content-wrap .woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__wrapper {
  3.     display: inline-flex;
  4.     flex-wrap: wrap;
  5.     justify-content: center;
  6. }
  7.  
  8. body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .entry-content-wrap .woocommerce-product-gallery .woocommerce-product-gallery__image:first-of-type {
  9.     margin-bottom: -31px !important;
  10. }
  11.  
  12. body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .entry-content-wrap .woocommerce-product-gallery .woocommerce-product-gallery__image:nth-of-type(1n + 2) {
  13.     width: 60px !important;
  14.     margin-top: 0 !important;
  15.     background-color: #fff;
  16. }
  17.  
  18. body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .entry-content-wrap .woocommerce-product-gallery .woocommerce-product-gallery__image img {
  19.     margin: 0 !important;
  20. }
  21.  
  22. body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .entry-content-wrap .woocommerce-product-gallery .woocommerce-product-gallery__image:nth-of-type(1n + 2) img {
  23.     border-style: solid;
  24.     border-color: #fff;
  25.     border-top-width: 5px;
  26.     border-right-width: 5px;
  27.     opacity: .5;
  28. }
  29.  
  30. body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .entry-content-wrap .woocommerce-product-gallery .woocommerce-product-gallery__image:nth-of-type(2) img {
  31.     border-left-width: 5px;
  32.     opacity: 1;
  33. }
  34.  
  35. body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .entry-content-wrap .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image:nth-of-type(1n + 2) {
  36.     opacity: 0 !important;
  37. }
  38.  
  39. body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .entry-content-wrap .woocommerce-product-gallery .flex-viewport {
  40.     height: auto;
  41.     aspect-ratio: 1;
  42.     overflow: visible;
  43. }
  44.  
  45. body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__wrapper {
  46.     height: 100%;
  47. }
  48.  
  49.     body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image.flex-active-slide {
  50.         height: 100%;
  51.     }
  52.  
  53.         body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image.flex-active-slide .wp-post-image {
  54.             height: 100%;
  55.         }
  56.  
  57. @media screen and (max-width: 1200px) {
  58.     body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .entry-content-wrap .woocommerce-product-gallery {
  59.         --wrapper-side-margin: 15px;
  60.         --image-side-margin: -15px;
  61.     }
  62.  
  63.         body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .entry-content-wrap .woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__wrapper {
  64.             margin: 0 var(--wrapper-side-margin);
  65.         }
  66.  
  67.         body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .entry-content-wrap .woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__image:first-of-type {
  68.             margin-left: var(--image-side-margin);
  69.             margin-right: var(--image-side-margin);
  70.         }
  71. }
  72.  
  73. @media screen and (max-width: 969px) {
  74.     body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .entry-content-wrap .woocommerce-product-gallery {
  75.         --wrapper-side-margin: 20px;
  76.         --image-side-margin: -20px;
  77.     }
  78. }
  79.  
  80. @media screen and (max-width: 740px) {
  81.     body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .entry-content-wrap .woocommerce-product-gallery {
  82.         --wrapper-side-margin: 15px;
  83.         --image-side-margin: -15px;
  84.     }
  85. }
  86.  
  87. @media screen and (max-width: 719px) {
  88.     body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .entry-content-wrap .woocommerce-product-gallery {
  89.         --wrapper-side-margin: 0px;
  90.         --image-side-margin: 0px;
  91.     }
  92.  
  93.     body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .entry-content-wrap .woocommerce-product-gallery {
  94.         margin: 0 auto;
  95.         width: 600px !important;
  96.     }
  97.  
  98.     body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .flex-control-nav.flex-control-thumbs {
  99.         max-width: 610px !important;
  100.         width: 610px !important;
  101.         margin-top: -32px;
  102.     }
  103.  
  104.     body.single-product .woocommerce-product-gallery .flex-viewport {
  105.         width: 600px;
  106.         margin: 0 auto;
  107.     }
  108. }
  109.  
  110. @media screen and (max-width: 680px) {
  111.     body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .entry-content-wrap .woocommerce-product-gallery {
  112.         --wrapper-side-margin: 20px;
  113.         --image-side-margin: -20px;
  114.     }
  115.  
  116.     body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .flex-control-nav.flex-control-thumbs {
  117.         width: 100% !important;
  118.     }
  119. }
  120.  
  121. @media screen and (max-width: 632px) {
  122.     body.single-product .woocommerce-product-gallery .flex-viewport {
  123.         width: unset;
  124.     }
  125.  
  126.     body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .entry-content-wrap .woocommerce-product-gallery {
  127.         width: unset !important;
  128.     }
  129.  
  130.     body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .flex-control-nav.flex-control-thumbs {
  131.         width: unset !important;
  132.     }
  133. }
  134.  
  135. @media screen and (max-width: 617px) {
  136.     body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .entry-content-wrap .woocommerce-product-gallery {
  137.         --wrapper-side-margin: 35px;
  138.         --image-side-margin: -35px;
  139.         --thumbs-side-padding: 35px;
  140.     }
  141.  
  142.         body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .entry-content-wrap .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs {
  143.             padding: 0 var(--thumbs-side-padding) !important;
  144.         }
  145. }
  146.  
  147. @media screen and (max-width: 591px) {
  148.     body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .entry-content-wrap .woocommerce-product-gallery {
  149.         --wrapper-side-margin: 10px;
  150.         --image-side-margin: -10px;
  151.         --thumbs-side-padding: 10px;
  152.     }
  153. }
  154.  
  155. @media screen and (max-width: 553px) {
  156.     body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .entry-content-wrap .woocommerce-product-gallery {
  157.         --wrapper-side-margin: 25px;
  158.         --image-side-margin: -25px;
  159.         --thumbs-side-padding: 25px;
  160.     }
  161. }
  162.  
  163. @media screen and (max-width: 511px) {
  164.     body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .entry-content-wrap .woocommerce-product-gallery {
  165.         --wrapper-side-margin: 0px;
  166.         --image-side-margin: 0px;
  167.         --thumbs-side-padding: 0px;
  168.     }
  169. }
  170.  
  171.  
  172. @media screen and (max-width: 489px) {
  173.     body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .entry-content-wrap .woocommerce-product-gallery {
  174.         --wrapper-side-margin: 19px;
  175.         --image-side-margin: -19px;
  176.         --thumbs-side-padding: 14px;
  177.     }
  178. }
  179.  
  180. @media screen and (min-width: 426px) and (max-width: 478px) {
  181.     body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
  182.         margin-bottom: 65px !important;
  183.     }
  184. }
  185.  
  186. @media screen and (max-width: 429px) {
  187.     body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .entry-content-wrap .woocommerce-product-gallery {
  188.         --wrapper-side-margin: 0px;
  189.         --image-side-margin: 0px;
  190.         --thumbs-side-padding: 0px;
  191.     }
  192. }
  193.  
  194. @media screen and (max-width: 425px) and (min-width: 421px) {
  195.     body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .entry-content-wrap .woocommerce-product-gallery .woocommerce-product-gallery__image:nth-of-type(2) {
  196.         margin-left: 20px;
  197.     }
  198.  
  199.     body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .entry-content-wrap .woocommerce-product-gallery .woocommerce-product-gallery__image:nth-of-type(6) {
  200.         margin-right: 20px;
  201.     }
  202.  
  203.     body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .entry-content-wrap .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li:nth-of-type(1) {
  204.         margin-left: 20px;
  205.     }
  206.  
  207.     body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .entry-content-wrap .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li:nth-of-type(5) {
  208.         margin-right: 20px;
  209.     }
  210. }
  211.  
  212. @media screen and (max-width: 420px) {
  213.     body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .entry-content-wrap .woocommerce-product-gallery {
  214.         --wrapper-side-margin: 20px;
  215.         --image-side-margin: -20px;
  216.         --thumbs-side-padding: 20px;
  217.     }
  218. }
  219.  
  220. @media screen and (max-width: 373px) {
  221.     body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .entry-content-wrap .woocommerce-product-gallery {
  222.         --wrapper-side-margin: 10px;
  223.         --image-side-margin: -10px;
  224.         --thumbs-side-padding: 10px;
  225.     }
  226. }
  227.  
  228. @media screen and (max-width: 356px) {
  229.     body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .entry-content-wrap .woocommerce-product-gallery {
  230.         --wrapper-side-margin: 13px;
  231.         --image-side-margin: -13px;
  232.         --thumbs-side-padding: 13px;
  233.     }
  234.  
  235.     body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .entry-content-wrap .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li:last-of-type {
  236.         display: none;
  237.     }
  238. }
  239.  
  240. @media screen and (min-width: 300px) and (max-width: 351px) {
  241.     body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
  242.         margin-bottom: 65px !important;
  243.     }
  244.  
  245.     body.single-product:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .entry-content-wrap .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li:last-of-type {
  246.         display: block;
  247.     }
  248. }
  249.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement