@colijnit/inphoto 262.1.1 → 300.1.1

package/lib/component/edit-canvas/style/_theme.scss

@@ -1,33 +1,8 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-edit-canvas-theme') {
+@include cfg.export-module('co-edit-canvas-theme') {
   .co-edit-canvas {
 
-    .edit-canvas-container {
-      .toolbar {
-        background-color: var(--co-inphoto-loader-background-light);
-
-        .toolbar-item {
-          .toolbar-item-option {
-            background: #fff;
-          }
-
-          &:hover {
-            background-color: rgba(255, 255, 255, 1);
-          }
-        }
-      }
-
-      .canvas-container {
-        .close-canvas-button, .open-canvas-button {
-          @include default-icon(30px, 30px, #fff);
-        }
-      }
-
-      .canvas-container.canvas-full-screen {
-        background-color: var(--co-inphoto-loader-background-dark);
-      }
-    }
   }
 }
 

package/lib/component/error-dialog/style/_layout.scss

@@ -1,6 +1,6 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-error-dialog-layout') {
+@include cfg.export-module('co-error-dialog-layout') {
   .co-error-dialog {
 
     .error-dialog {
@@ -9,13 +9,13 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      background:var(--co-inphoto-loader-background-dark);
+      background: var(--co-inphoto-loader-background-dark);
       z-index: 120;
 
       .error-dialog-container {
-        background: #fff;
+        background: var(--co-inphoto-dialog-background-color);
         padding: 20px;
-        border-radius: 10px;
+        border-radius: var(--co-inphoto-border-radius);
         max-width: 550px;
         width: 100%;
 
@@ -35,6 +35,5 @@
         }
       }
     }
-
   }
 }

package/lib/component/error-dialog/style/_theme.scss

@@ -1,6 +1,6 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-error-dialog-theme') {
+@include cfg.export-module('co-error-dialog-theme') {
   .co-error-dialog {
 
   }

package/lib/component/image-enhancer/style/_layout.scss

@@ -1,38 +1,74 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-image-enhancer-layout') {
+@include cfg.export-module('co-image-enhancer-layout') {
   .co-image-enhancer {
     .image-enhancer-container {
-      width: 100%;
+      min-height: 0;
+      max-height: 90vh;
+      overflow-y: scroll;
+      scroll-behavior: smooth;
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+      transition: max-height 0.5s;
 
-      .header {
-        .header-icon-container {
-          margin-bottom: 10px;
-          display: flex;
-          align-items: center;
-          gap: 10px;
-        }
+      &::-webkit-scrollbar {
+        display: none;
       }
 
       .tabs {
         align-items: center;
         display: grid;
-        grid-template-columns: repeat(3, 1fr);
+        grid-template-columns: repeat(2, 1fr);
         border-radius: 5px;
-
-        .instruction-dialog {
-          font-size: var(--font-size-small);
-        }
+        height: 60px;
+        align-content: end;
 
         .tab-button {
           box-sizing: border-box;
           padding: 10px;
           cursor: pointer;
           height: 100%;
+          text-align: center;
+        }
+      }
+    }
+
+    .dialog-collapse {
+      max-height: 55px;
+    }
+
+
+    .collapse-menu {
+      border-radius: var(--co-inphoto-border-radius);
+      background: var(--co-inphoto-background-white);
+      box-sizing: border-box;
+      padding: 10px;
+      cursor: pointer;
+      display: grid;
+
+      .collapse-menu-item {
+        grid-area: 1 / 1;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.2s ease;
+
+        .collapse-menu-open, .collapse-close-open {
           display: flex;
+          justify-content: space-between;
           align-items: center;
+
+          .collapse-menu-text {
+            @include cfg.text();
+          }
+
+          @include cfg.default-icon(var(--co-inphoto-icon-size), var(--co-inphoto-icon-size), var(--co-inphoto-icon-color));
         }
       }
+
+      .collapse-menu-active {
+        opacity: 1;
+        pointer-events: auto;
+      }
     }
   }
 }

package/lib/component/image-enhancer/style/_theme.scss

@@ -1,11 +1,12 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-image-enhancer-theme') {
+@include cfg.export-module('co-image-enhancer-theme') {
   .co-image-enhancer {
     .image-enhancer-container {
       .header {
         .header-icon-container {
           margin-bottom: 10px;
+
           h2 {
             font-size: var(--co-inphoto-font-size-head);
             color: var(--co-inphoto-color-dark);
@@ -14,23 +15,22 @@
       }
 
       .tabs {
-        background: var(--co-inphoto-tab-background-color);
-        border-radius: 5px;
+        .instruction-dialog {
+          font-size: var(--font-size-small);
+        }
 
         .tab-button {
-          border-radius: 5px;
-          background: var(--co-inphoto-tab-background-color);
-          color: var(--co-inphoto-color-dark);
-          font-size: var(--co-inphoto-tab-header-font-size);
-          border: 2px solid var(--co-inphoto-tab-border-color);
+          background: none;
+          @include cfg.sub-header-text();
+          border-bottom: 2px solid transparent;
+          font-weight: bold;
 
           &:hover {
-            background: var(--co-inphoto-tab-active-background-color);
+            border-bottom-color: var(--co-inphoto-accent-color);
           }
 
           &.active {
-            background: var(--co-inphoto-tab-active-background-color);
-            color: var(--co-inphoto-tab-active-color);
+            border-bottom-color: var(--co-inphoto-accent-color);
           }
         }
       }

package/lib/component/image-enhancer-style/style/_layout.scss

@@ -1,20 +1,54 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-image-enhancer-style-layout') {
+@include cfg.export-module('co-image-enhancer-style-layout') {
   .co-image-enhancer-style {
-    .form-part-container, .custom-prompt-container {
+    .form-part-container {
       margin: 20px auto;
     }
 
     .form-part-container {
       .co-list-of-values {
         height: 60px;
+        border-radius: var(--co-inphoto-border-radius);
+        overflow: hidden;
+
+        &:before, &:hover {
+          box-shadow: none;
+          border: none;
+        }
+
+        &:not(.read-only):hover {
+          border: none;
+
+          &:before {
+            box-shadow: none;
+          }
+        }
+
+        &.cc-input-focused:not(.no-focus-line) {
+          border: none;
+
+          &:before {
+            box-shadow: none;
+          }
+        }
+
 
         .co-input-text {
           .input-text-clear-button {
             display: none;
           }
 
+          &:before {
+            box-shadow: none;
+          }
+
+          &:hover, &:not(.read-only):hover {
+            &:before {
+              box-shadow: none;
+            }
+          }
+
           &:not(.no-style) {
             input {
               padding-bottom: 10px;
@@ -22,6 +56,7 @@
 
             &:not(.custom-height) {
               height: 60px;
+              border-radius: var(--co-inphoto-border-radius);
             }
 
             &.has-own-label {
@@ -47,14 +82,26 @@
               max-height: 60px;
             }
           }
+
+          .input-text-wrapper {
+            .input-wrapper {
+              border-radius: var(--co-inphoto-border-radius);
+            }
+          }
         }
       }
     }
 
-    .custom-prompt-container {
-      .co-input-checkbox {
-        margin-bottom: 10px;
+
+    .tool-explainer {
+      .header-with-icon {
+        display: flex;
+        align-items: center;
       }
     }
+
+    .button-container {
+      margin-top: 20px;
+    }
   }
 }

package/lib/component/image-enhancer-style/style/_theme.scss

@@ -1,8 +1,32 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-image-enhancer-style-theme') {
+@include cfg.export-module('co-image-enhancer-style-theme') {
   .co-image-enhancer-style {
 
+    .tool-explainer, .explainer-text {
+      background: var(--co-inphoto-background-white);
+      border-radius: var(--co-inphoto-border-radius);
+      box-sizing: border-box;
+      padding: 15px;
+
+      .header-with-icon {
+        @include cfg.default-icon(var(--co-inphoto-icon-size), var(--co-inphoto-icon-size), var(--co-inphoto-icon-color));
+        .co-icon {
+          margin-right: 10px;
+        }
+        .tool-explainer-header {
+          @include cfg.sub-header-text();
+        }
+      }
+
+      .tool-explainer-text {
+        @include cfg.text();
+      }
+    }
+
+    .button-container {
+      margin-top: 20px;
+    }
   }
 }
 

package/lib/component/image-enhancer-upload/style/_layout.scss

@@ -1,17 +1,16 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-image-enhancer-upload-layout') {
+@include cfg.export-module('co-image-enhancer-upload-layout') {
   .co-image-enhancer-upload {
-
     .image-enhancer-upload {
       box-sizing: border-box;
-      padding: 20px 10px;
 
-      .custom-prompt-container {
-        margin: 20px 0;
-        .co-input-checkbox {
-          margin-bottom: 10px;
-        }
+      .tool-explainer {
+        box-sizing: border-box;
+      }
+
+      .uploaded-image-container {
+        display: grid;
       }
     }
   }

package/lib/component/image-enhancer-upload/style/_theme.scss

@@ -1,8 +1,42 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-image-enhancer-upload-theme') {
+@include cfg.export-module('co-image-enhancer-upload-theme') {
   .co-image-enhancer-upload {
+    .image-enhancer-upload {
 
+      .tool-explainer {
+        background: var(--co-inphoto-background-white);
+        border-radius: var(--co-inphoto-border-radius);
+        padding: 15px;
+        margin: 20px auto 0;
+
+        .header-with-icon {
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          box-sizing: border-box;
+          padding-bottom: 5px;
+
+          .co-icon {
+            margin-right: 10px;
+          }
+
+          .tool-explainer-header {
+            font-size: var(--co-inphoto-font-size-text);
+            font-weight: bold;
+          }
+        }
+
+        .tool-explainer-text {
+          font-size: var(--co-inphoto-font-size-text);
+        }
+      }
+
+      .uploaded-image-container {
+        grid-template-columns: repeat(3, 1fr);
+        margin: 20px 0;
+      }
+    }
   }
 }
 

package/lib/component/image-history/style/_layout.scss

@@ -1,45 +1,84 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-image-history-layout') {
+@include cfg.export-module('co-image-history-layout') {
   .co-image-history {
     .image-history-container {
+      position: absolute;
+      bottom: 10px;
+      left: 115px;
       box-sizing: border-box;
-      padding: 20px;
+    }
+
+    .image-history-card {
+      position: relative;
+      display: flex;
+      align-items: center;
+      width: 675px;
+    }
 
-      .image-history-header {
+    .image-history-tiles {
+      flex: 1 1 auto;
+      min-width: 0;
+      display: flex;
+      gap: 10px;
+      overflow-x: auto;
+      overflow-y: hidden;
+      scroll-behavior: smooth;
+      scrollbar-width: none;
+      -ms-overflow-style: none;
 
+      &::-webkit-scrollbar {
+        display: none;
       }
+    }
 
-      .image-history-tiles {
-        width: 100%;
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-        gap: 10px;
+    .scroll-btn {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 30px;
+      height: 30px;
+      padding: 0;
+      border: none;
+      border-radius: 50%;
+      cursor: pointer;
+      z-index: 2;
+
+      &-left {
+        left: -6px;
+      }
+
+      &-right {
+        right: -6px;
       }
     }
 
     .larger-image-dialog {
       position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
+      inset: 0;
       z-index: 1000;
       display: flex;
       justify-content: center;
       align-items: center;
 
+
       .close-dialog-button {
         position: absolute;
         top: 20px;
         right: 20px;
         cursor: pointer;
+
+        @include cfg.default-icon(var(--co-inphoto-icon-size), var(--co-inphoto-icon-size), var(--co-inphoto-icon-color-light));
       }
 
       .large-image {
         max-width: 90%;
         max-height: 90%;
         object-fit: contain;
+        border-radius: 8px;
       }
     }
   }

package/lib/component/image-history/style/_theme.scss

@@ -1,13 +1,25 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-image-history-theme') {
+@include cfg.export-module('co-image-history-theme') {
   .co-image-history {
-    .larger-image-dialog {
-      background-color: var(--co-inphoto-loader-background-dark);
+    .image-history-container {
+      background: var(--co-inphoto-dialog-background-color);
+      padding: 20px;
+      border-radius: var(--co-inphoto-border-radius);
+    }
+
+    .image-history-card {
+      border-radius: var(--co-inphoto-border-radius);
+    }
 
-      .close-dialog-button {
-        @include default-icon(30px, 30px, #fff);
-      }
+    .scroll-btn {
+      background: #ffffff;
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+      @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-color));
+    }
+
+    .larger-image-dialog {
+      background: var(--co-inphoto-loader-background-dark);
     }
   }
 }

package/lib/component/image-history-tile/style/_layout.scss

@@ -1,52 +1,66 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-image-history-tile-layout') {
+@include cfg.export-module('co-image-history-tile-layout') {
   .co-image-history-tile {
+    flex: 0 0 auto;
+    width: 160px;
 
     .image-history-item {
-      width: 100%;
-      height: 100%;
-      max-height: 250px;
       position: relative;
+      width: 100%;
+      height: 115px;
+      border-radius: var(--co-inphoto-border-radius);
+      overflow: hidden;
+      cursor: pointer;
 
-      .image-history-hover {
-        visibility: hidden;
-        position: absolute;
-        top: 0;
-        left: 0;
+      img {
+        display: block;
         width: 100%;
         height: 100%;
-        border-radius: 10px;
+        object-fit: cover;
+      }
+
+      .tile-action {
+        position: absolute;
         display: flex;
-        flex-direction: column;
         align-items: center;
-        justify-content: space-around;
+        justify-content: center;
+        width: 26px;
+        height: 26px;
+        border-radius: 50%;
+        color: #ffffff;
+        background: rgba(0, 0, 0, 0.55);
+        opacity: 0;
+        transition: opacity 0.15s ease;
+        z-index: 1;
 
-        .image-history-item-zoom {
-          cursor: pointer;
-        }
+        @include cfg.default-icon(20px, 20px, #fff);
+      }
 
-        .tile-toolbar {
-          display: flex;
-          align-items: center;
-          justify-content: space-around;
-          gap: 25px;
-          cursor: pointer;
-        }
+      &:hover .tile-action {
+        opacity: 1;
+      }
 
+      .tile-action-select {
+        top: 6px;
+        right: 6px;
       }
 
-      &:hover {
-        .image-history-hover {
-          visibility: visible;
-        }
+      .tile-action-download {
+        bottom: 6px;
+        left: 6px;
       }
 
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        border-radius: 10px;
+      .tile-action-remove {
+        bottom: 6px;
+        right: 6px;
+      }
+
+      &--selected {
+        .tile-action-select {
+          opacity: 1;
+          background: #f5a623;
+        }
       }
     }
   }

package/lib/component/image-history-tile/style/_theme.scss

@@ -1,6 +1,6 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-image-history-tile-theme') {
+@include cfg.export-module('co-image-history-tile-theme') {
 
   .co-image-history-tile {
     .image-history-item {
@@ -12,11 +12,11 @@
         }
 
         .image-history-item-zoom {
-          @include default-icon(40px, 40px, #fff)
+          @include cfg.default-icon(40px, 40px, #fff)
         }
 
         .tile-toolbar {
-          @include default-icon(40px, 40px, #fff);
+          @include cfg.default-icon(40px, 40px, #fff);
         }
       }
     }