@wizishop/img-manager 15.2.62 → 15.2.64-beta

package/wz-img-manager.scss

@@ -987,7 +987,7 @@ $tag-radius: rem(20px)!default;
     &__container {
         display: flex;
         justify-content: space-between;
-        margin: 0 0 rem(20);
+        margin: 0 0;
 
       > div {
         display: flex;
@@ -998,7 +998,7 @@ $tag-radius: rem(20px)!default;
       }
 
         &--window {
-            margin: rem(30) 0 rem(20);
+            margin: rem(30) 0 0;
         }
 
         &--uploadTab {
@@ -1150,6 +1150,32 @@ $tag-radius: rem(20px)!default;
         }
     }
 }
+
+.filter-video {
+  width: 100%;
+  margin: 0 0 20px;
+  label {
+    display: flex;
+    gap: 10px;
+    width: fit-content;
+    align-items: center;
+  }
+  span {
+    font-weight: 500;
+  }
+  select {
+    padding: 0 10px;
+    min-height: 25px;
+    line-height: 25px;
+    border: 1px solid $img-input-border;
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='black' fill='none'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 10px center;
+  }
+}
 .wz-img-manager .img-editor {
     &__scroll {
         position: relative;
@@ -1336,6 +1362,10 @@ $tag-radius: rem(20px)!default;
         padding: 0;
         margin: 0 rem(30) 0 0;
 
+      &, * {
+        box-sizing: border-box;
+      }
+
         &__propertyEditable {
             margin-bottom: 31px;
             p {
@@ -1468,6 +1498,31 @@ $tag-radius: rem(20px)!default;
 .wz-img-manager .marginBottom {
     margin-bottom: 20px;
 }
+
+.img-editorVideo__tabs {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 20px;
+  list-style-type: none;
+  width: 100%;
+  margin: 0 0 30px;
+  li {
+    cursor: pointer;
+    padding-bottom: 8px;
+    font-size: rem(14);
+    color: $img-second-color;
+    border-bottom: 1px solid transparent;
+    transition: .3s ease;
+    &:hover {
+      color: $main-text;
+    }
+    &.active {
+      color: $main-text;
+      border-bottom: 1px solid $img-main-color;
+    }
+  }
+}
 // Warning: in webcomponent (for wizishop-com project) the following style are added by styles-handler.js script (hard-coded)
 .wz-img-manager .img-selection {
     background-color: white;
@@ -1501,6 +1556,27 @@ $tag-radius: rem(20px)!default;
       transition: opacity .3s ease .1s, transform .3s ease  .1s, visibility 0s linear 0s;
     }
   }
+  &__video {
+    width: fit-content;
+    height: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    background-color: rgba(29, 42, 59, 0.8);
+    gap: 5px;
+    border-radius: 3px;
+    padding: 0 10px;
+    color: white;
+    font-size: rem(12);
+    font-weight: 500;
+    i {
+      color: white;
+      font-size: rem(14);
+    }
+  }
   .delete-btn {
     position: absolute;
     top: 100%;
@@ -2562,6 +2638,28 @@ $tag-radius: rem(20px)!default;
                     padding-top: 100%;
                 }
 
+                &__container__video {
+                  height: 16px;
+                  width: 60px;
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                  position: absolute;
+                  bottom: 0;
+                  left: 0;
+                  background-color: rgba(29, 42, 59, 0.8);
+                  gap: 5px;
+                  border-radius: 3px;
+                  padding: 0;
+                  color: white;
+                  font-size: rem(10);
+                  font-weight: 500;
+                  i {
+                    color: white;
+                    font-size: rem(10);
+                  }
+                }
+
                 &__img {
                     margin: 0!important;
                     position: absolute;
@@ -2662,42 +2760,180 @@ $tag-radius: rem(20px)!default;
 
 .grey {
   color: $img-grey-color;
-} 
+}
 
-.buttonCopy { 
+.buttonCopy {
   background-color: $img-green-color; // Vert léger
   border: 1px solid $img-green-color; // Bordure verte légère
   border-radius: 4px;
   padding: 8px 12px;
   cursor: pointer;
   transition: all 0.2s ease;
-  
+
   i {
     color: $img-white; // Icône verte
     transition: color 0.2s ease;
   }
-  
+
   &:hover {
     background-color: $img-green-color-secondary; // Vert plus foncé au survol
     border-color: $img-green-color-secondary;
-    
+
     i {
       color: $img-white; // Icône verte plus foncée au survol
     }
   }
-  
+
   &:active {
     background-color: #b1dfbb;
     transform: scale(0.98);
   }
-}image-cropper {
+}
+
+.wrap-name-info {
+  width: 100%;
+  > p {
+    padding: 0 0 0 15px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: $wizishop-blue;
+    font-size: rem(14);
+    i {
+      color: $wizishop-blue;
+    }
+  }
+}
+image-cropper {
     max-height: 60vh;
   }.img-editor__infoSection__propertySEO__tooltips {
   i {
     font-size: rem(16);
     color: $main-text;
   }
-}$default-color-p-alert: #1e5568;
+}.info-video {
+  width: 100%;
+  &, * {
+    box-sizing: border-box;
+  }
+  &__wrapper {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 30px;
+    &__top {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: flex-start;
+      gap: 12px;
+      > label {
+        font-size: rem(14);
+        font-weight: 500;
+        color: $main-text;
+        i {
+          font-size: rem(14);
+          font-weight: 400;
+          color: $img-second-color;
+          margin: 0 0 0 5px;
+        }
+      }
+      > span {
+        font-size: rem(12);
+        color: $img-second-color;
+        margin-top: -2px;
+      }
+      > input {
+        width: 100%;
+        height: rem(40);
+        border: 1px solid $img-input-border;
+        border-radius: rem(3);
+        color: $img-main-text;
+        padding: 0 rem(20);
+        font-size: rem(14);
+        &:hover, &:focus {
+          color: $main-text;
+          border-color: $main-text;
+        }
+      }
+    }
+    &__bottom {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: flex-start;
+      gap: 15px;
+      &.has-border {
+        padding-bottom: 32px;
+        border-bottom: 2px solid $img-input-border;
+      }
+      > strong {
+        font-size: rem(16);
+        font-weight: 600;
+        color: $main-text;
+      }
+      > p {
+        font-size: rem(14);
+        font-weight: 400;
+        color: $main-text;
+        display: flex;
+        align-items: center;
+        width: 100%;
+        > span {
+          white-space: nowrap;
+          &:first-child {
+            width: 100%;
+          }
+          &:last-child {
+            width: auto;
+          }
+        }
+      }
+    }
+    & > a {
+      color: $img-bright-red-color;
+      text-decoration: underline;
+      transition: .3s ease;
+      cursor: pointer;
+      font-size: rem(14);
+      font-weight: 400;
+      &:hover, &:focus {
+        color: darken($img-bright-red-color, 10%);
+        text-decoration: none;
+      }
+    }
+  }
+}
+.show-iframe {
+  box-sizing: border-box;
+  padding: 20px;
+  &__none {
+    width: 100%;
+    text-align: center;
+    font-size: rem(16);
+    font-weight: 600;
+    color: $main-text;
+    padding: 20px 0;
+  }
+}
+
+.video-container {
+  width: 100%;
+  max-width: 600px;
+  aspect-ratio: 16 / 9;
+  margin: 0 auto;
+  iframe {
+    width: 100%;
+    height: 100%;
+    border: 0;
+  }
+}
+
+$default-color-p-alert: #1e5568;
 $success-color-p-alert: #11552e;
 $warning-color-p-alert: #3a0505;
 $primary-button: #e95656;
@@ -3786,7 +4022,7 @@ $card-img-size-small: 140px;
                     background-color: $img-orange-color;
                   }
                 }
-                &.copy { 
+                &.copy {
                   background-color: $img-green-color;
                   transition: transform .3s ease .15s;
                   span, &:before {
@@ -3910,6 +4146,27 @@ $card-img-size-small: 140px;
             }
           }
         }
+      &__video {
+        width: fit-content;
+        height: 24px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: absolute;
+        bottom: 10px;
+        right: 10px;
+        background-color: rgba(29, 42, 59, 0.8);
+        gap: 5px;
+        border-radius: 3px;
+        padding: 0 10px;
+        color: white;
+        font-size: rem(12);
+        font-weight: 500;
+        i {
+          color: white;
+          font-size: rem(14);
+        }
+      }
     }
 
     &__nameContainer {
@@ -3975,6 +4232,9 @@ $card-img-size-small: 140px;
 
     &:hover, &:focus {
       z-index: 3;
+      .hover-img-size {
+        opacity: 1;
+      }
         .img-card {
             &__nameContainer {
               overflow: visible;
@@ -4031,6 +4291,21 @@ $card-img-size-small: 140px;
     width: $card-img-size-small;
   }
 }
+
+.hover-img-size {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  opacity: 0;
+  transition: .3s ease;
+  background-color: rgba(0,0,0,.45);
+  color: $white;
+  font-size: rem(12);
+  padding: 3px 6px;
+  border-radius: 2px;
+  pointer-events: none;
+}
+
 .wz-selector {
   &__default {
     position: relative;