Webotvurci

Untitled

Oct 31st, 2025
216
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 24.48 KB | None | 0 0
  1. @charset "UTF-8";
  2. /**
  3.  * Main SCSS file for Revelor Textilomanie
  4.  * Compiles to dist/css/main.css
  5.  */
  6. /**
  7.  * SCSS Variables for Revelor Textilomanie
  8.  *
  9.  * DŮLEŽITÉ: CSS custom properties (--color-*) se NEDEFINUJÍ zde!
  10.  * Používají se přímo Shoptet proměnné z :root, které jsou již v e-shopu.
  11.  *
  12.  * Dostupné Shoptet CSS proměnné:
  13.  * --color-primary
  14.  * --color-primary-hover
  15.  * --color-secondary
  16.  * --color-secondary-hover
  17.  * --color-tertiary
  18.  * --color-tertiary-hover
  19.  *
  20.  * V SCSS souborech používejte: var(--color-primary)
  21.  */
  22. .sr-only {
  23.   position: absolute;
  24.   width: 1px;
  25.   height: 1px;
  26.   padding: 0;
  27.   margin: -1px;
  28.   overflow: hidden;
  29.   clip: rect(0, 0, 0, 0);
  30.   white-space: nowrap;
  31.   border-width: 0;
  32. }
  33.  
  34. .skip-link {
  35.   position: absolute;
  36.   top: -40px;
  37.   left: 0;
  38.   z-index: 100000;
  39.   padding: 8px 16px;
  40.   background: var(--color-primary);
  41.   color: white;
  42.   text-decoration: none;
  43.   font-weight: 600;
  44. }
  45. .skip-link:focus {
  46.   top: 0;
  47. }
  48.  
  49. *:focus-visible {
  50.   outline: 3px solid var(--color-primary);
  51.   outline-offset: 2px;
  52. }
  53.  
  54. *:focus:not(:focus-visible) {
  55.   outline: none;
  56. }
  57.  
  58. .search-overlay *:focus-visible {
  59.   outline: 3px solid var(--color-primary);
  60.   outline-offset: 2px;
  61. }
  62.  
  63. @media (prefers-reduced-motion: reduce) {
  64.   * {
  65.     animation-duration: 0.01ms !important;
  66.     animation-iteration-count: 1 !important;
  67.     transition-duration: 0.01ms !important;
  68.   }
  69. }
  70. @media (prefers-contrast: high) {
  71.   *:focus-visible {
  72.     outline-width: 4px;
  73.     outline-offset: 3px;
  74.   }
  75. }
  76. #header #formSearchForm input {
  77.   color: transparent;
  78. }
  79.  
  80. .search-overlay {
  81.   position: fixed;
  82.   top: 0;
  83.   left: 0;
  84.   width: 100%;
  85.   height: 100%;
  86.   background: rgba(0, 0, 0, 0.8);
  87.   backdrop-filter: blur(4px);
  88.   z-index: 9999;
  89.   opacity: 0;
  90.   visibility: hidden;
  91.   transition: all 0.3s ease;
  92. }
  93. .search-overlay--active {
  94.   opacity: 1;
  95.   visibility: visible;
  96. }
  97. .search-overlay__content {
  98.   display: flex;
  99.   flex-direction: column;
  100.   position: absolute;
  101.   top: 10vh;
  102.   left: 50%;
  103.   transform: translateX(-50%);
  104.   width: 90%;
  105.   max-width: 800px;
  106.   max-height: 80vh;
  107.   background: white;
  108.   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  109.   overflow: hidden;
  110.   transition: transform 0.3s ease, opacity 0.3s ease;
  111. }
  112. @media (max-width: 767px) {
  113.   .search-overlay__content {
  114.     bottom: 0;
  115.     width: 100%;
  116.     max-height: 85vh;
  117.   }
  118.   .search-overlay__content::before {
  119.     content: "";
  120.     position: absolute;
  121.     top: 8px;
  122.     left: 50%;
  123.     transform: translateX(-50%);
  124.     width: 40px;
  125.     height: 4px;
  126.     background: #e5e7eb;
  127.     z-index: 1;
  128.   }
  129. }
  130. .search-overlay__header {
  131.   display: flex;
  132.   align-items: center;
  133.   padding: 20px;
  134.   border-bottom: 1px solid #e5e7eb;
  135.   gap: 12px;
  136. }
  137. @media (max-width: 767px) {
  138.   .search-overlay__header {
  139.     padding: 16px;
  140.     padding-top: 24px;
  141.     cursor: grab;
  142.   }
  143.   .search-overlay__header:active {
  144.     cursor: grabbing;
  145.   }
  146. }
  147. .search-overlay__input-wrapper {
  148.   flex: 1;
  149.   position: relative;
  150. }
  151. .search-overlay__input {
  152.   width: 100%;
  153.   padding: 16px 50px 16px 20px;
  154.   border: 2px solid #e5e7eb;
  155.   font-size: 16px;
  156.   outline: none;
  157.   transition: border-color 0.3s ease;
  158. }
  159. @media (max-width: 767px) {
  160.   .search-overlay__input {
  161.     padding: 14px 45px 14px 16px;
  162.     font-size: 16px;
  163.   }
  164. }
  165. .search-overlay__input:focus {
  166.   border-color: var(--color-primary);
  167. }
  168. .search-overlay__input:focus-visible {
  169.   border-color: var(--color-primary);
  170.   outline: 3px solid var(--color-primary);
  171.   outline-offset: 2px;
  172. }
  173. .search-overlay__input::placeholder {
  174.   color: #6b7280;
  175. }
  176. .search-overlay__submit {
  177.   display: flex;
  178.   align-items: center;
  179.   justify-content: center;
  180.   position: absolute;
  181.   right: 0px;
  182.   top: 50%;
  183.   transform: translateY(-50%);
  184.   width: 50px;
  185.   height: 50px;
  186.   padding: 0;
  187.   background-color: transparent;
  188.   border: none;
  189.   cursor: pointer;
  190.   color: white;
  191.   font-size: 16px;
  192.   transition: all 0.2s ease;
  193.   mask-image: url("/user/documents/upload/kodovani/magnifier.svg");
  194.   mask-repeat: no-repeat;
  195.   mask-size: 20px;
  196.   mask-position: 10px center;
  197.   -webkit-mask-image: url("/user/documents/upload/kodovani/magnifier.svg");
  198.   -webkit-mask-repeat: no-repeat;
  199.   -webkit-mask-size: 20px;
  200.   -webkit-mask-position: 10px center;
  201.   background-color: #000;
  202. }
  203. @media (max-width: 767px) {
  204.   .search-overlay__submit {
  205.     width: 45px;
  206.     height: 45px;
  207.   }
  208. }
  209. .search-overlay__submit:hover {
  210.   background-color: var(--color-primary);
  211. }
  212. .search-overlay__close {
  213.   padding: 8px;
  214.   background: none;
  215.   border: none;
  216.   cursor: pointer;
  217.   color: #6b7280;
  218.   font-size: 24px;
  219.   transition: all 0.2s ease;
  220. }
  221. .search-overlay__close:hover {
  222.   background: #f3f4f6;
  223.   color: #374151;
  224. }
  225. .search-overlay__close:focus-visible {
  226.   background: #f3f4f6;
  227.   color: #374151;
  228.   outline: 3px solid var(--color-primary);
  229.   outline-offset: 2px;
  230. }
  231. .search-overlay__results {
  232.   flex: 1;
  233.   padding: 20px;
  234.   overflow-y: auto;
  235. }
  236. @media (max-width: 767px) {
  237.   .search-overlay__results {
  238.     padding: 16px;
  239.   }
  240. }
  241. .search-overlay__loading {
  242.   display: flex;
  243.   flex-direction: column;
  244.   align-items: center;
  245.   justify-content: center;
  246.   padding: 40px 20px;
  247.   text-align: center;
  248.   color: #6b7280;
  249. }
  250. .search-overlay__loading p {
  251.   margin-top: 16px;
  252.   font-size: 16px;
  253. }
  254. .search-overlay__spinner {
  255.   width: 32px;
  256.   height: 32px;
  257.   border: 3px solid #e5e7eb;
  258.   border-top: 3px solid var(--color-primary);
  259.   border-radius: 50%;
  260.   animation: spin 1s linear infinite;
  261. }
  262. .search-overlay__empty {
  263.   display: flex;
  264.   flex-direction: column;
  265.   align-items: center;
  266.   justify-content: center;
  267.   padding: 40px 20px;
  268.   text-align: center;
  269.   color: #6b7280;
  270. }
  271. .search-overlay__empty h3 {
  272.   margin: 16px 0 8px;
  273.   font-size: 18px;
  274.   color: #374151;
  275. }
  276. .search-overlay__empty p {
  277.   font-size: 14px;
  278. }
  279. .search-overlay__empty-icon {
  280.   font-size: 48px;
  281.   opacity: 0.5;
  282. }
  283. .search-overlay__no-results {
  284.   display: flex;
  285.   flex-direction: column;
  286.   align-items: center;
  287.   justify-content: center;
  288.   padding: 40px 20px;
  289.   text-align: center;
  290.   color: #6b7280;
  291. }
  292. .search-overlay__no-results h3 {
  293.   margin: 16px 0 8px;
  294.   font-size: 18px;
  295.   color: #374151;
  296. }
  297. .search-overlay__no-results p {
  298.   font-size: 14px;
  299. }
  300. .search-overlay__no-results-icon {
  301.   font-size: 48px;
  302.   opacity: 0.5;
  303. }
  304. .search-overlay__content-results {
  305.   display: flex;
  306.   flex-direction: column;
  307.   gap: 24px;
  308. }
  309. .search-overlay__section {
  310.   margin-bottom: 20px;
  311. }
  312. .search-overlay__section:last-child {
  313.   margin-bottom: 0;
  314. }
  315. .search-overlay__section-title {
  316.   margin-bottom: 12px;
  317.   padding-bottom: 8px;
  318.   font-size: 16px;
  319.   font-weight: 600;
  320.   color: #374151;
  321.   border-bottom: 2px solid #e5e7eb;
  322. }
  323. .search-overlay__products {
  324.   display: flex;
  325.   flex-wrap: wrap;
  326.   gap: 8px;
  327. }
  328. @media (max-width: 767px) {
  329.   .search-overlay__products {
  330.     flex-direction: column;
  331.   }
  332. }
  333. .search-overlay__product {
  334.   width: calc(50% - 4px);
  335.   position: relative;
  336. }
  337. @media (max-width: 767px) {
  338.   .search-overlay__product {
  339.     width: 100%;
  340.   }
  341. }
  342. .search-overlay__product-link {
  343.   display: flex;
  344.   align-items: center;
  345.   gap: 20px;
  346.   width: 100%;
  347.   height: 100%;
  348.   padding: 12px;
  349.   text-decoration: none;
  350.   color: inherit;
  351.   background-color: #f6f6f6;
  352.   transition: background-color 0.2s ease;
  353. }
  354. .search-overlay__product-link:hover {
  355.   background: #f0f0f0;
  356. }
  357. .search-overlay__product-link:focus-visible {
  358.   background: #e5e7eb;
  359.   outline: 3px solid var(--color-primary);
  360.   outline-offset: 2px;
  361. }
  362. .search-overlay__product-image {
  363.   display: flex;
  364.   align-items: center;
  365.   justify-content: center;
  366.   width: 60px;
  367.   height: 60px;
  368.   overflow: hidden;
  369.   background: #f3f4f6;
  370. }
  371. @media (max-width: 767px) {
  372.   .search-overlay__product-image {
  373.     width: 50px;
  374.     height: 50px;
  375.   }
  376. }
  377. .search-overlay__product-image img {
  378.   width: 100%;
  379.   height: 100%;
  380.   object-fit: cover;
  381. }
  382. .search-overlay__product-content {
  383.   display: flex;
  384.   flex-direction: row;
  385.   flex-wrap: wrap;
  386.   flex: 1;
  387.   gap: 10px 20px;
  388.   height: 100%;
  389. }
  390. .search-overlay__product-title {
  391.   width: 100%;
  392.   margin-bottom: 0;
  393.   font-size: 14px;
  394.   font-weight: 500;
  395.   color: #374151;
  396.   line-height: 1.4;
  397. }
  398. .search-overlay__product-price {
  399.   width: calc(50% - 10px);
  400.   margin-top: auto;
  401.   font-size: 14px;
  402.   font-weight: 600;
  403.   color: var(--color-primary);
  404. }
  405. .search-overlay__product-code {
  406.   width: calc(50% - 10px);
  407.   margin-top: auto;
  408.   font-size: 12px;
  409.   color: #6b7280;
  410.   text-align: right;
  411. }
  412. .search-overlay__product-add-btn {
  413.   position: absolute;
  414.   bottom: 8px;
  415.   right: 8px;
  416.   display: flex;
  417.   align-items: center;
  418.   justify-content: center;
  419.   width: 36px;
  420.   height: 36px;
  421.   padding: 0;
  422.   border: none;
  423.   background: #37a672;
  424.   color: white;
  425.   border-radius: 50%;
  426.   cursor: pointer;
  427.   transition: all 0.2s ease;
  428.   z-index: 10;
  429. }
  430. .search-overlay__product-add-btn svg {
  431.   width: 20px;
  432.   height: 20px;
  433.   fill: currentColor;
  434. }
  435. .search-overlay__product-add-btn:hover {
  436.   background: var(--color-primary-hover, var(--color-primary));
  437.   transform: scale(1.1);
  438. }
  439. .search-overlay__product-add-btn:active {
  440.   transform: scale(0.95);
  441. }
  442. .search-overlay__product-add-btn:focus-visible {
  443.   outline: 3px solid var(--color-primary);
  444.   outline-offset: 2px;
  445. }
  446. .search-overlay__product-add-btn:disabled {
  447.   cursor: not-allowed;
  448.   opacity: 0.5;
  449. }
  450. .search-overlay__product-add-btn.loading {
  451.   pointer-events: none;
  452.   opacity: 0.6;
  453. }
  454. .search-overlay__product-add-btn.success {
  455.   background: #10b981;
  456. }
  457. .search-overlay__product-add-btn.success svg {
  458.   display: none;
  459. }
  460. .search-overlay__product-add-btn.success::after {
  461.   content: "✓";
  462.   font-size: 18px;
  463.   line-height: 1;
  464. }
  465. .search-overlay__categories {
  466.   display: flex;
  467.   flex-wrap: wrap;
  468.   gap: 8px;
  469. }
  470. .search-overlay__category-link {
  471.   display: block;
  472.   padding: 12px;
  473.   text-decoration: none;
  474.   color: inherit;
  475.   transition: background-color 0.2s ease;
  476.   background-color: #f6f6f6;
  477. }
  478. .search-overlay__category-link:hover {
  479.   background: #f0f0f0;
  480. }
  481. .search-overlay__category-link:focus-visible {
  482.   background: #e5e7eb;
  483.   outline: 3px solid var(--color-primary);
  484.   outline-offset: 2px;
  485. }
  486. .search-overlay__category-title {
  487.   margin: 0;
  488.   font-size: 14px;
  489.   font-weight: 500;
  490.   color: #374151;
  491. }
  492. .search-overlay__articles {
  493.   display: flex;
  494.   flex-wrap: wrap;
  495.   gap: 8px;
  496. }
  497. @media (max-width: 767px) {
  498.   .search-overlay__articles {
  499.     flex-direction: column;
  500.   }
  501. }
  502. .search-overlay__article {
  503.   width: calc(50% - 4px);
  504. }
  505. @media (max-width: 767px) {
  506.   .search-overlay__article {
  507.     width: 100%;
  508.   }
  509. }
  510. .search-overlay__article-link {
  511.   display: flex;
  512.   align-items: center;
  513.   gap: 20px;
  514.   padding: 12px;
  515.   width: 100%;
  516.   height: 100%;
  517.   text-decoration: none;
  518.   color: inherit;
  519.   background-color: #f6f6f6;
  520.   transition: background-color 0.2s ease;
  521. }
  522. .search-overlay__article-link:hover {
  523.   background: #f0f0f0;
  524. }
  525. .search-overlay__article-link:focus-visible {
  526.   background: #e5e7eb;
  527.   outline: 3px solid var(--color-primary);
  528.   outline-offset: 2px;
  529. }
  530. .search-overlay__article-image {
  531.   display: flex;
  532.   align-items: center;
  533.   justify-content: center;
  534.   flex-shrink: 0;
  535.   width: 80px;
  536.   height: 60px;
  537.   overflow: hidden;
  538.   background: #f3f4f6;
  539. }
  540. @media (max-width: 767px) {
  541.   .search-overlay__article-image {
  542.     width: 70px;
  543.     height: 50px;
  544.   }
  545. }
  546. .search-overlay__article-image img {
  547.   width: 100%;
  548.   height: 100%;
  549.   object-fit: cover;
  550. }
  551. .search-overlay__article-content {
  552.   flex: 1;
  553. }
  554. .search-overlay__article-title {
  555.   margin-bottom: 4px;
  556.   font-size: 14px;
  557.   font-weight: 500;
  558.   color: #374151;
  559.   line-height: 1.4;
  560. }
  561. .search-overlay__article-description {
  562.   display: -webkit-box;
  563.   -webkit-line-clamp: 2;
  564.   line-clamp: 2;
  565.   -webkit-box-orient: vertical;
  566.   overflow: hidden;
  567.   font-size: 12px;
  568.   color: #6b7280;
  569.   line-height: 1.4;
  570. }
  571. .search-overlay__brands {
  572.   display: flex;
  573.   flex-direction: column;
  574.   gap: 12px;
  575. }
  576. .search-overlay__brand-link {
  577.   display: flex;
  578.   align-items: center;
  579.   gap: 12px;
  580.   padding: 12px;
  581.   text-decoration: none;
  582.   color: inherit;
  583.   transition: background-color 0.2s ease;
  584. }
  585. .search-overlay__brand-link:hover {
  586.   background: #f9fafb;
  587. }
  588. .search-overlay__brand-content {
  589.   flex: 1;
  590. }
  591. .search-overlay__brand-title {
  592.   margin-bottom: 4px;
  593.   font-size: 14px;
  594.   font-weight: 500;
  595.   color: #374151;
  596. }
  597. .search-overlay__brand-description {
  598.   display: -webkit-box;
  599.   -webkit-line-clamp: 2;
  600.   line-clamp: 2;
  601.   -webkit-box-orient: vertical;
  602.   overflow: hidden;
  603.   font-size: 12px;
  604.   color: #6b7280;
  605.   line-height: 1.4;
  606. }
  607. .search-overlay .search-history {
  608.   margin-top: 24px;
  609.   padding-top: 24px;
  610.   border-top: 1px solid #e5e7eb;
  611. }
  612. .search-overlay .search-history__title {
  613.   margin: 0 0 12px 0;
  614.   font-size: 14px;
  615.   font-weight: 600;
  616.   color: #374151;
  617. }
  618. .search-overlay .search-history__items {
  619.   display: flex;
  620.   flex-wrap: wrap;
  621.   gap: 8px;
  622.   margin-bottom: 12px;
  623. }
  624. .search-overlay .search-history__item {
  625.   display: flex;
  626.   align-items: center;
  627.   padding: 6px 12px;
  628.   background: #f3f4f6;
  629.   border: 1px solid #e5e7eb;
  630.   font-size: 13px;
  631.   color: #374151;
  632.   cursor: pointer;
  633.   transition: all 0.2s ease;
  634. }
  635. .search-overlay .search-history__item:hover {
  636.   background: #e5e7eb;
  637.   border-color: #d1d5db;
  638. }
  639. .search-overlay .search-history__item:focus-visible {
  640.   outline: 2px solid var(--color-primary);
  641.   outline-offset: 2px;
  642. }
  643. .search-overlay .search-history__text {
  644.   line-height: 1;
  645. }
  646. .search-overlay__show-all {
  647.   margin-top: 15px;
  648.   text-align: center;
  649. }
  650. .search-overlay__show-all-link {
  651.   display: inline-block;
  652.   padding: 8px 16px;
  653.   color: var(--color-primary);
  654.   text-decoration: none;
  655.   font-size: 14px;
  656.   font-weight: 500;
  657.   border: 1px solid var(--color-primary);
  658.   transition: all 0.2s ease;
  659.   background: none;
  660.   cursor: pointer;
  661. }
  662. .search-overlay__show-all-link:hover {
  663.   background: var(--color-primary);
  664.   color: white;
  665. }
  666. .search-overlay__show-all-link:focus-visible {
  667.   background: var(--color-primary);
  668.   color: white;
  669.   outline: 3px solid var(--color-primary);
  670.   outline-offset: 2px;
  671.   box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.1);
  672. }
  673.  
  674. .search-highlight {
  675.   background-color: #fef08a;
  676.   padding: 0 2px;
  677.   font-weight: 600;
  678. }
  679.  
  680. body.search-overlay-open {
  681.   overflow: hidden;
  682. }
  683.  
  684. @keyframes spin {
  685.   0% {
  686.     transform: rotate(0deg);
  687.   }
  688.   100% {
  689.     transform: rotate(360deg);
  690.   }
  691. }
  692. /**
  693.  * SCSS Functions for Revelor Textilomanie
  694.  */
  695. /**
  696.  * Convert pixels to rem
  697.  * @param {Number} $pixels - Pixel value
  698.  * @param {Number} $base - Base font size (default: 16)
  699.  * @return {Number} Rem value
  700.  */
  701. /**
  702.  * Convert pixels to em
  703.  * @param {Number} $pixels - Pixel value
  704.  * @param {Number} $base - Base font size (default: 16)
  705.  * @return {Number} Em value
  706.  */
  707. .in-vyhledavani .sr-only {
  708.   position: absolute;
  709.   width: 1px;
  710.   height: 1px;
  711.   padding: 0;
  712.   margin: -1px;
  713.   overflow: hidden;
  714.   clip: rect(0, 0, 0, 0);
  715.   white-space: nowrap;
  716.   border-width: 0;
  717. }
  718. .in-vyhledavani .search-results-page a:focus-visible,
  719. .in-vyhledavani .search-results-page button:focus-visible {
  720.   outline: 3px solid var(--color-primary);
  721.   outline-offset: 2px;
  722. }
  723. .in-vyhledavani .search-results-page a:focus:not(:focus-visible),
  724. .in-vyhledavani .search-results-page button:focus:not(:focus-visible) {
  725.   outline: none;
  726. }
  727. @media (prefers-reduced-motion: reduce) {
  728.   .in-vyhledavani .search-results-page * {
  729.     animation-duration: 0.01ms !important;
  730.     animation-iteration-count: 1 !important;
  731.     transition-duration: 0.01ms !important;
  732.   }
  733. }
  734. @media (prefers-contrast: high) {
  735.   .in-vyhledavani .search-results-page a:focus-visible,
  736.   .in-vyhledavani .search-results-page button:focus-visible {
  737.     outline-width: 4px;
  738.     outline-offset: 3px;
  739.   }
  740. }
  741. .in-vyhledavani .revelor-toast {
  742.   position: fixed;
  743.   top: 20px;
  744.   right: 20px;
  745.   z-index: 10000;
  746.   min-width: 300px;
  747.   max-width: 500px;
  748.   opacity: 0;
  749.   transform: translateX(400px);
  750.   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  751. }
  752. @media (max-width: 767px) {
  753.   .in-vyhledavani .revelor-toast {
  754.     left: 20px;
  755.     right: 20px;
  756.     min-width: auto;
  757.     max-width: none;
  758.   }
  759. }
  760. .in-vyhledavani .revelor-toast--visible {
  761.   opacity: 1;
  762.   transform: translateX(0);
  763. }
  764. .in-vyhledavani .revelor-toast__content {
  765.   display: flex;
  766.   align-items: center;
  767.   gap: 12px;
  768.   padding: 16px;
  769.   background: white;
  770.   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  771. }
  772. .in-vyhledavani .revelor-toast__icon {
  773.   font-size: 20px;
  774.   flex-shrink: 0;
  775. }
  776. .in-vyhledavani .revelor-toast__message {
  777.   flex: 1;
  778.   font-size: 14px;
  779.   color: #374151;
  780.   line-height: 1.4;
  781. }
  782. .in-vyhledavani .revelor-toast__close {
  783.   padding: 4px;
  784.   background: none;
  785.   border: none;
  786.   font-size: 20px;
  787.   color: #6b7280;
  788.   cursor: pointer;
  789.   line-height: 1;
  790.   transition: color 0.2s ease;
  791. }
  792. .in-vyhledavani .revelor-toast__close:hover {
  793.   color: #374151;
  794. }
  795. .in-vyhledavani .revelor-toast--success .revelor-toast__content {
  796.   border-left: 4px solid #10b981;
  797. }
  798. .in-vyhledavani .revelor-toast--error .revelor-toast__content {
  799.   border-left: 4px solid #ef4444;
  800. }
  801. .in-vyhledavani .revelor-toast--warning .revelor-toast__content {
  802.   border-left: 4px solid #f59e0b;
  803. }
  804. .in-vyhledavani .revelor-toast--info .revelor-toast__content {
  805.   border-left: 4px solid #3b82f6;
  806. }
  807. .in-vyhledavani .quick-add-btn {
  808.   margin-top: 12px;
  809.   width: 100%;
  810.   display: flex;
  811.   align-items: center;
  812.   justify-content: center;
  813.   gap: 8px;
  814. }
  815. .in-vyhledavani .quick-add-btn.success {
  816.   background-color: #10b981 !important;
  817. }
  818. .in-vyhledavani .quick-add-btn .spinner-small {
  819.   display: inline-block;
  820.   font-size: 14px;
  821. }
  822. .in-vyhledavani .search-results-page .products:not(#search-products-container),
  823. .in-vyhledavani .search-results-page .products-block:not(#search-products-container),
  824. .in-vyhledavani .search-results-page .products-searching:not(#search-products-container) {
  825.   display: none !important;
  826. }
  827. .in-vyhledavani .search-results-page .pagination:not(.search-results-pagination),
  828. .in-vyhledavani .search-results-page .products-pagination,
  829. .in-vyhledavani .search-results-page .listingControls {
  830.   display: none !important;
  831. }
  832. .in-vyhledavani .search-results-page .no-results:not(#search-results-no-results),
  833. .in-vyhledavani .search-results-page .products-no-results {
  834.   display: none !important;
  835. }
  836. .in-vyhledavani .search-results-page #content h2 {
  837.   display: none !important;
  838. }
  839. .in-vyhledavani .search-results-page .search-results-groups {
  840.   display: none !important;
  841. }
  842. .in-vyhledavani body.in-vyhledavani #content .search-results-groups {
  843.   display: none !important;
  844. }
  845. .in-vyhledavani .id-1755 .container {
  846.   min-width: 90rem;
  847.   max-width: 100rem;
  848. }
  849. @media (max-width: 1440px) {
  850.   .in-vyhledavani .id-1755 .container {
  851.     min-width: unset;
  852.     max-width: 75rem;
  853.   }
  854. }
  855. @media (max-width: 1024px) {
  856.   .in-vyhledavani .id-1755 .container {
  857.     min-width: 100%;
  858.   }
  859. }
  860. .in-vyhledavani .search-results-header {
  861.   padding: 20px 40px;
  862.   margin-block: 30px;
  863.   background-color: #F6F6F6;
  864. }
  865. @media (max-width: 767px) {
  866.   .in-vyhledavani .search-results-header {
  867.     padding: 20px;
  868.   }
  869. }
  870. .in-vyhledavani .search-results-header .search-results-query {
  871.   font-size: 24px;
  872.   font-weight: 700;
  873. }
  874. .in-vyhledavani .search-results-header .search-results-query .search-results-query-value {
  875.   color: var(--color-primary);
  876. }
  877. .in-vyhledavani .search-results-header .search-results-count {
  878.   font-size: 14px;
  879. }
  880. .in-vyhledavani .search-filters {
  881.   display: flex;
  882.   flex-wrap: wrap;
  883.   gap: 16px;
  884.   padding: 20px;
  885.   background: #f6f6f6;
  886.   margin-bottom: 30px;
  887. }
  888. @media (max-width: 767px) {
  889.   .in-vyhledavani .search-filters {
  890.     flex-direction: column;
  891.     gap: 12px;
  892.     padding: 16px;
  893.   }
  894. }
  895. .in-vyhledavani .search-filters__item {
  896.   display: flex;
  897.   align-items: center;
  898. }
  899. .in-vyhledavani .search-filter-checkbox {
  900.   display: flex;
  901.   align-items: center;
  902.   gap: 8px;
  903.   cursor: pointer;
  904.   font-size: 14px;
  905.   color: #374151;
  906.   user-select: none;
  907. }
  908. .in-vyhledavani .search-filter-checkbox input[type=checkbox] {
  909.   width: 18px;
  910.   height: 18px;
  911.   cursor: pointer;
  912. }
  913. .in-vyhledavani .search-filter-checkbox:hover {
  914.   color: var(--color-primary);
  915. }
  916. .in-vyhledavani .search-filter-select {
  917.   padding: 8px 32px 8px 12px;
  918.   border: 2px solid #e5e7eb;
  919.   font-size: 14px;
  920.   color: #374151;
  921.   background-color: white;
  922.   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23374151' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  923.   background-repeat: no-repeat;
  924.   background-position: right 10px center;
  925.   background-size: 12px;
  926.   cursor: pointer;
  927.   appearance: none;
  928. }
  929. .in-vyhledavani .search-filter-select:hover {
  930.   border-color: var(--color-primary);
  931. }
  932. .in-vyhledavani .search-filter-select:focus-visible {
  933.   outline: 2px solid var(--color-primary);
  934.   outline-offset: 2px;
  935. }
  936. .in-vyhledavani .search-results-content > div {
  937.   margin-block: 60px;
  938. }
  939. @media (max-width: 767px) {
  940.   .in-vyhledavani .search-results-content > div {
  941.     margin-block: 40px;
  942.   }
  943. }
  944. .in-vyhledavani .search-results-content > div:last-child {
  945.   margin-bottom: 0;
  946. }
  947. .in-vyhledavani .search-results-content .search-results-load-more {
  948.   text-align: center;
  949. }
  950. .in-vyhledavani .search-results-content #newsWrapper {
  951.   margin-top: 0;
  952.   display: flex;
  953.   flex-direction: column;
  954.   gap: 16px;
  955. }
  956. @media (max-width: 767px) {
  957.   .in-vyhledavani .search-results-content #newsWrapper {
  958.     gap: 12px;
  959.   }
  960. }
  961. .in-vyhledavani .search-results-content #newsWrapper .news-item-compact {
  962.   display: flex;
  963.   align-items: center;
  964.   gap: 16px;
  965.   padding: 12px;
  966.   text-decoration: none;
  967.   transition: background-color 0.2s ease;
  968. }
  969. @media (max-width: 767px) {
  970.   .in-vyhledavani .search-results-content #newsWrapper .news-item-compact {
  971.     gap: 12px;
  972.     padding: 10px;
  973.   }
  974. }
  975. .in-vyhledavani .search-results-content #newsWrapper .news-item-compact:hover {
  976.   background-color: #f6f6f6;
  977. }
  978. .in-vyhledavani .search-results-content #newsWrapper .news-item-compact .news-item-compact-image {
  979.   flex-shrink: 0;
  980.   width: 80px;
  981.   height: 80px;
  982.   overflow: hidden;
  983. }
  984. @media (max-width: 767px) {
  985.   .in-vyhledavani .search-results-content #newsWrapper .news-item-compact .news-item-compact-image {
  986.     width: 60px;
  987.     height: 60px;
  988.   }
  989. }
  990. .in-vyhledavani .search-results-content #newsWrapper .news-item-compact .news-item-compact-image .news-image-compact {
  991.   width: 100%;
  992.   height: 100%;
  993.   object-fit: cover;
  994.   display: block;
  995. }
  996. .in-vyhledavani .search-results-content #newsWrapper .news-item-compact .news-item-compact-title {
  997.   flex: 1;
  998.   font-size: 16px;
  999.   font-weight: 500;
  1000.   color: #374151;
  1001.   line-height: 1.4;
  1002. }
  1003. @media (max-width: 767px) {
  1004.   .in-vyhledavani .search-results-content #newsWrapper .news-item-compact .news-item-compact-title {
  1005.     font-size: 14px;
  1006.   }
  1007. }
  1008. .in-vyhledavani .search-results-content .articles-expand-btn,
  1009. .in-vyhledavani .search-results-content .subcategories-expand-btn {
  1010.   display: none;
  1011. }
  1012. .in-vyhledavani .search-results-content .articles-expand-btn:focus-visible,
  1013. .in-vyhledavani .search-results-content .subcategories-expand-btn:focus-visible {
  1014.   outline: 3px solid var(--color-primary);
  1015.   outline-offset: 2px;
  1016.   background-color: var(--color-primary);
  1017.   opacity: 0.1;
  1018. }
  1019. .in-vyhledavani .search-results-content .subcategories-expand-all-btn {
  1020.   margin-top: 20px;
  1021.   margin-left: auto;
  1022.   margin-right: auto;
  1023.   display: block;
  1024. }
  1025. @media (max-width: 767px) {
  1026.   .in-vyhledavani .search-results-content .subcategories-expand-all-btn {
  1027.     width: 100%;
  1028.     margin-top: 16px;
  1029.   }
  1030. }
  1031. @media (min-width: 768px) {
  1032.   .in-vyhledavani .search-results-content .articles-wrapper {
  1033.     position: relative;
  1034.     overflow: hidden;
  1035.     transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  1036.   }
  1037.   .in-vyhledavani .search-results-content .articles-wrapper[data-collapsed=true] {
  1038.     max-height: 400px;
  1039.   }
  1040.   .in-vyhledavani .search-results-content .articles-wrapper[data-collapsed=true]::after {
  1041.     content: "";
  1042.     position: absolute;
  1043.     bottom: 0;
  1044.     left: 0;
  1045.     right: 0;
  1046.     height: 60px;
  1047.     background: linear-gradient(180deg, rgba(255, 255, 255, 0) 8.17%, rgba(255, 255, 255, 0.75) 40.4%, #FFF 66.89%, #FFF 100%);
  1048.     z-index: 1;
  1049.   }
  1050.   .in-vyhledavani .search-results-content .articles-wrapper[data-collapsed=false] {
  1051.     max-height: none;
  1052.   }
  1053.   .in-vyhledavani .search-results-content .articles-expand-btn {
  1054.     margin-top: 20px;
  1055.     margin-left: auto;
  1056.     margin-right: auto;
  1057.     display: block;
  1058.   }
  1059. }
  1060.  
  1061. /*# sourceMappingURL=main.css.map */
  1062.  
Advertisement
Add Comment
Please, Sign In to add comment