kolorki

IdoSellAddOn/style.html

@@ -1,7 +1,8 @@
 <style>
   .idm_picture__module {
-    --photo-prod-box-bg: #fff;
-    --photo-prod-box-text: #111;
+    --photo-prod-box-bg: var(--photo-mod-col-bg, #fff);
+    --photo-prod-box-text: var(--photo-mod-col-text, #111);
+
     --photo-prod-point-shadow: rgba(255, 255, 255, 0.5);
 
     --photo-prod-box-pad-top: 1rem;
@@ -32,8 +33,7 @@
     position: absolute;
     z-index: 10;
   }
-  .idm_picture__product:hover,
-  .idm_picture__product.--show {
+  .idm_picture__product:hover {
     z-index: 20;
   }
   .idm_picture__img {
@@ -114,15 +114,18 @@ PULSE ANIMATION
 
   .product_info {
     background: var(--photo-prod-box-bg);
-    flex-direction: column;
     padding: 1rem;
-    gap: 1rem;
     display: none;
     max-width: var(--photo-prod-box-width);
     position: absolute;
     width: max-content;
     box-shadow: 0px 0px 10px 1px #000;
   }
+  .product_info__container {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
   @media (min-width: 757px) {
     .product_info {
       padding: 1.5rem;
@@ -294,19 +297,27 @@ PULSE ANIMATION
     }
   }
 
-  .idm_picture__product .product_info .product_name {
+  :is(.idm_picture__module, .modal.--photo-prod-mobile)
+    .product_info
+    .product_name {
     font-size: 1.6rem;
     color: var(--photo-prod-box-text);
   }
-  .idm_picture__product .product_info .product_name:hover {
+  :is(.idm_picture__module, .modal.--photo-prod-mobile)
+    .product_info
+    .product_name:hover {
     color: var(--primary-color, #000) !important;
   }
 
-  .idm_picture__product .product_info .product_prices {
+  :is(.idm_picture__module, .modal.--photo-prod-mobile)
+    .product_info
+    .product_prices {
     font-size: 1.6rem;
     color: var(--photo-prod-box-text);
   }
-  .idm_picture__product .product_info .price.--main {
+  :is(.idm_picture__module, .modal.--photo-prod-mobile)
+    .product_info
+    .price.--main {
     margin-bottom: 0;
   }
 
@@ -320,12 +331,6 @@ PULSE ANIMATION
       animation: idmShowUp 0.3s ease-in-out;
     }
   }
-  @media (max-width: 978px) {
-    .idm_picture__product.--show .product_info {
-      display: flex;
-      animation: idmShowUp 0.3s ease-in-out;
-    }
-  }
 
   @keyframes idmShowUp {
     from {
@@ -356,38 +361,101 @@ PULSE ANIMATION
     }
   }
 
-  .idm_picture__module .label_icons {
+  :is(.idm_picture__module, .modal.--photo-prod-mobile) .label_icons {
     display: flex;
     gap: 0.5rem;
     position: static;
   }
 
-  .idm_picture__module .product_opinions {
+  :is(.idm_picture__module, .modal.--photo-prod-mobile) .product_opinions {
     display: flex;
+    color: var(--photo-prod-box-text);
   }
 
-  .idm_picture__module .icon-star:not(.--active)::before {
+  :is(.idm_picture__module, .modal.--photo-prod-mobile)
+    .icon-star:not(.--active)::before {
     content: "\f006";
   }
-  .idm_picture__module .icon-star.--active {
+  :is(.idm_picture__module, .modal.--photo-prod-mobile) .icon-star.--active {
     color: var(--opinions-star-active-color, #fac917);
   }
 
-  .idm_picture__module .product_opinions__score {
+  :is(.idm_picture__module, .modal.--photo-prod-mobile)
+    .product_opinions__score {
     margin-left: 1rem;
     margin-right: 0.5rem;
   }
 
-  .idm_picture__module .product_opinions__count::before {
+  :is(.idm_picture__module, .modal.--photo-prod-mobile)
+    .product_opinions__count::before {
     content: "(";
   }
-  .idm_picture__module .product_opinions__count::after {
+  :is(.idm_picture__module, .modal.--photo-prod-mobile)
+    .product_opinions__count::after {
     content: ")";
   }
 
-  .idm_picture__module :is(.add_to_basket, .add_to_basket__link) {
+  :is(.idm_picture__module, .modal.--photo-prod-mobile)
+    :is(.add_to_basket, .add_to_basket__link) {
     display: flex;
     justify-content: center;
     margin-top: 0;
   }
+
+  :is(.idm_picture__module, .modal.--photo-prod-mobile)
+    :is(.price.--omnibus.omnibus_price, .price.--max) {
+    color: var(--photo-prod-box-text);
+  }
+
+  :is(.idm_picture__module, .modal.--photo-prod-mobile)
+    .--omnibus-higher
+    :is(.price.--normal.--main, .price_percent) {
+    color: var(--color-promo-price, #cd2323);
+  }
+
+  .idm_picture__module .product_icon {
+    display: none !important;
+  }
+
+  @media (max-width: 978px) {
+    .modal.--photo-prod-mobile .product_info.--mod-init {
+      position: static;
+      display: flex;
+      width: 100%;
+      box-shadow: none;
+      flex-direction: column;
+    }
+    .modal.--photo-prod-mobile .modal__wrapper {
+      border-radius: 10px 10px 0 0;
+      background-color: var(--photo-prod-box-bg);
+      color: var(--photo-prod-box-text);
+    }
+    .modal.--photo-prod-mobile .modal__close {
+      position: absolute;
+      color: var(--photo-prod-box-text);
+    }
+    .modal.--photo-prod-mobile
+      .modal__close
+      :is(.product_name, .omnibus_price, .price.--max) {
+      color: var(--photo-prod-box-text);
+    }
+    .modal.--photo-prod-mobile .product_icon {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  @media (min-width: 420px) and (max-width: 978px) {
+    .modal.--photo-prod-mobile .product_info.--mod-init {
+      display: grid;
+      grid-template-columns: 1fr 2fr;
+    }
+    .modal.--photo-prod-mobile .product_info.--mod-init > *:not(.product_icon) {
+      grid-column: "2/3";
+    }
+    .modal.--photo-prod-mobile .product_info.--mod-init > .product_icon {
+      grid-row: "1/-1";
+    }
+  }
 </style>