@colijnit/inphoto 300.1.4 → 300.1.6

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

@@ -3,53 +3,37 @@
 @include cfg.export-module('co-image-enhancer-theme') {
   .co-image-enhancer {
     .enhancer-container {
-      background: var(--co-inphoto-dialog-background-color);
-      height: 100vh;
-      box-sizing: border-box;
-      padding: 20px;
-      min-height: 0;
-      max-height: 99vh;
-      overflow-y: scroll;
-      scroll-behavior: smooth;
-      scrollbar-width: none;
-      -ms-overflow-style: none;
-      transition: max-height 0.5s;
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
-    }
 
+      background: var(--co-inphoto-dialog-background-color);
+      padding: var(--co-inphoto-side-panel-padding);
 
-    .image-enhancer-container {
-      .header {
-        .header-icon-container {
-          margin-bottom: 10px;
-
-          h2 {
-            @include cfg.header-text();
-          }
-        }
-      }
-
-      .tabs {
-        .instruction-dialog {
-          font-size: var(--font-size-small);
-        }
-
-        .tab-button {
-          background: none;
-          border-radius: 0;
-          @include cfg.sub-header-text();
-          border-bottom: 2px solid transparent;
-          font-weight: bold;
+      .enhancer-scroll-container {
 
-          &:hover {
-            border-bottom-color: var(--co-inphoto-accent-color);
+        .enhancer-body {
+          .instruction-dialog {
+            font-size: var(--font-size-small);
           }
 
-          &.active {
-            border-bottom-color: var(--co-inphoto-accent-color);
+          .tabs {
+
+            .tab-button {
+              padding: var(--co-inphoto-image-enhancer-tab-button-padding);
+              cursor: pointer;
+              height: 100%;
+              text-align: center;
+              background: none;
+              border-radius: 0;
+              @include cfg.sub-header-text();
+              border-bottom: var(--co-inphoto-image-enhancer-tab-button-border-width) solid transparent;
+
+              &:hover {
+                border-bottom-color: var(--co-inphoto-accent-color);
+              }
+
+              &.active {
+                border-bottom-color: var(--co-inphoto-accent-color);
+              }
+            }
           }
         }
       }

package/lib/component/image-enhancer-style/style/_material-definition.scss

@@ -1,3 +1,3 @@
 :root {
-
+  --co-inphoto-enhancer-style-padding: 15px;
 }

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

@@ -6,13 +6,12 @@
     .tool-explainer, .explainer-text {
       background: var(--co-inphoto-background-white);
       border-radius: var(--co-inphoto-border-radius);
-      box-sizing: border-box;
-      padding: 15px;
+      padding: var(--co-inphoto-enhancer-style-padding);
 
       .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;
+          margin-right: 15px;
         }
         .tool-explainer-header {
           @include cfg.sub-header-text();
@@ -26,6 +25,45 @@
 
     .button-container {
       margin-top: 20px;
+
+      .generate-button {
+        margin-bottom: 30px;
+        @include cfg.action-button(
+                var(--co-inphoto-active-button-background),
+                var(--co-inphoto-active-button-background),
+                var(--co-inphoto-active-button-color),
+                var(--co-inphoto-button-font-size),
+                var(--co-inphoto-button-icon-size),
+                var(--co-inphoto-active-button-color),
+                var(--co-inphoto-button-border),
+                var(--co-inphoto-button-radius),
+                var(--co-inphoto-button-padding)
+        );
+
+        .label {
+          margin-left: 15px;
+          font-weight: bold;
+        }
+      }
+
+      .restart-button {
+        @include cfg.action-button(
+                var(--co-inphoto-button-background),
+                var(--co-inphoto-button-background),
+                var(--co-inphoto-button-color),
+                var(--co-inphoto-button-font-size),
+                var(--co-inphoto-button-icon-size),
+                var(--co-inphoto-button-icon-color),
+                var(--co-inphoto-button-border),
+                var(--co-inphoto-button-radius),
+                var(--co-inphoto-button-padding)
+        );
+
+        .label {
+          margin-left: 15px;
+          font-weight: bold;
+        }
+      }
     }
   }
 }

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

@@ -3,12 +3,6 @@
 @include cfg.export-module('co-image-enhancer-upload-layout') {
   .co-image-enhancer-upload {
     .image-enhancer-upload {
-      box-sizing: border-box;
-
-      .tool-explainer {
-        box-sizing: border-box;
-      }
-
       .uploaded-image-container {
         display: grid;
       }

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

@@ -14,7 +14,6 @@
           display: flex;
           align-items: center;
           justify-content: flex-start;
-          box-sizing: border-box;
           padding-bottom: 5px;
 
           .co-icon {
@@ -32,11 +31,55 @@
         }
       }
 
+      .button-container {
+        margin-top: 20px;
+
+        .generate-button {
+          margin-bottom: 30px;
+          @include cfg.action-button(
+                  var(--co-inphoto-active-button-background),
+                  var(--co-inphoto-active-button-background),
+                  var(--co-inphoto-active-button-color),
+                  var(--co-inphoto-button-font-size),
+                  var(--co-inphoto-button-icon-size),
+                  var(--co-inphoto-active-button-color),
+                  var(--co-inphoto-button-border),
+                  var(--co-inphoto-button-radius),
+                  var(--co-inphoto-button-padding)
+          );
+
+          .label {
+            margin-left: 15px;
+            font-weight: bold;
+          }
+        }
+
+        .restart-button {
+          @include cfg.action-button(
+                  var(--co-inphoto-button-background),
+                  var(--co-inphoto-button-background),
+                  var(--co-inphoto-button-color),
+                  var(--co-inphoto-button-font-size),
+                  var(--co-inphoto-button-icon-size),
+                  var(--co-inphoto-button-icon-color),
+                  var(--co-inphoto-button-border),
+                  var(--co-inphoto-button-radius),
+                  var(--co-inphoto-button-padding)
+          );
+
+          .label {
+            margin-left: 15px;
+            font-weight: bold;
+          }
+        }
+      }
+
       .uploaded-image-container {
         grid-template-columns: repeat(3, 1fr);
         margin: 20px 0;
       }
     }
+
   }
 }
 

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

@@ -4,9 +4,8 @@
   .co-image-history {
     .image-history-container {
       position: absolute;
-      bottom: 10px;
-      left: 115px;
-      box-sizing: border-box;
+      bottom: var(--co-inphoto-history-image-history-container-position-bottom);
+      left: var(--co-inphoto-history-image-history-container-position-left);
     }
 
     .image-history-card {
@@ -108,7 +107,6 @@
           .co-button {
             display: flex;
             cursor: pointer;
-            box-sizing: border-box;
             padding: 8px 15px;
 
             .label {

package/lib/component/image-history/style/_material-definition.scss

@@ -1,3 +1,5 @@
 :root {
-
+  --co-inphoto-history-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+  --co-inphoto-history-image-history-container-position-bottom: 10px;
+  --co-inphoto-history-image-history-container-position-left: 115px;
 }

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

@@ -14,7 +14,7 @@
 
     .scroll-btn {
       background: var(--co-inphoto-background-white);
-      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+      box-shadow:var(--co-inphoto-history-box-shadow);
       @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-color));
     }
 

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

@@ -33,7 +33,7 @@
         z-index: 1;
       }
 
-      &:hover .tile-action {
+      &:hover .tile-action, .tile-action-select {
         opacity: 1;
       }
 

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

@@ -8,9 +8,13 @@
         color: var(--co-inphoto-background-white);
         background: var(--co-inphoto-loader-background-light);
         @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-color-light));
+
+        &:hover {
+          background: var(--co-inphoto-accent-color);
+        }
       }
 
-      &--selected {
+      &-selected {
         .tile-action-select {
           opacity: 1;
           background: var(--co-inphoto-accent-color);

package/lib/component/image-process-complete/style/_layout.scss

@@ -10,55 +10,24 @@
       min-height: 100vh;
 
       .image-process-preview {
-        width: 70vw;
+        width: var(--co-inphoto-left-container-width);
         height: 100vh;
-        background-size: contain;
-        background-repeat: no-repeat;
-        background-position: center;
+        background-size: var(--co-inphoto-background-size);
+        background-repeat: var(--co-inphoto-background-repeat);
+        background-position: var(--co-inphoto-background-position);
       }
     }
 
     .image-process-complete-dialog {
       width: 100%;
-      max-width: 30vw;
-      box-sizing: border-box;
-      position: relative;
-      border-radius: var(--co-inphoto-border-radius);
-      padding: 35px 25px;
+      max-width: var(--co-inphoto-right-container-width);
+
 
       .image-process-complete-dialog-header {
         .header-icon {
           width: 95px;
         }
       }
-
-      .image-process-complete-dialog-body {
-        display: flex;
-        flex-direction: column;
-        gap: 20px;
-      }
-    }
-
-    .prepare-image-disclaimer {
-      display: flex;
-      gap: 10px;
-      align-items: center;
-      justify-content: center;
-      box-sizing: border-box;
-      margin-top: 20px;
-    }
-
-    .restart-button-container {
-      box-sizing: border-box;
-      padding: 20px 0 0;
-      margin-top: 20px;
-
-
-      .co-button {
-        display: flex;
-        box-sizing: border-box;
-        cursor: pointer;
-      }
     }
   }
 }

package/lib/component/image-process-complete/style/_theme.scss

@@ -3,8 +3,6 @@
 @include cfg.export-module('co-image-process-complete-theme') {
   .co-image-process-complete {
     .image-process-complete-dialog {
-      background: var(--co-inphoto-dialog-background-color);
-
       .image-process-complete-dialog-header {
         .header-icon {
           background: var(--co-inphoto-process-complete-icon-background);
@@ -13,32 +11,7 @@
         }
       }
     }
-
-
-    .restart-button-container {
-      border-top: 1px solid #eee;
-
-      .co-button {
-        @include cfg.action-button(
-                var(--co-inphoto-button-background),
-                var(--co-inphoto-button-background),
-                var(--co-inphoto-button-color),
-                var(--co-inphoto-button-font-size),
-                var(--co-inphoto-button-icon-size),
-                var(--co-inphoto-button-icon-color),
-                var(--co-inphoto-button-border),
-                var(--co-inphoto-button-radius),
-                var(--co-inphoto-button-padding)
-        );
-
-        .label {
-          margin-left: 15px;
-          font-weight: bold;
-        }
-      }
-    }
   }
-
 }
 
 

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

@@ -46,7 +46,6 @@
           overflow: hidden;
 
           .mask-no-image-explain {
-            box-sizing: border-box;
             padding: 30px 8px 0;
           }
 
@@ -60,7 +59,6 @@
       }
 
       .image-tile-bottom {
-        box-sizing: border-box;
         padding: 8px;
         display: flex;
         flex-direction: column;

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

@@ -32,7 +32,6 @@
           font-size: var(--co-inphoto-font-size-label);
           font-weight: bold;
           border-radius: 15px;
-          box-sizing: border-box;
           padding: 4px 10px;
           margin: 0 4px;
         }

package/lib/component/prepare-starting-image/style/_layout.scss

@@ -4,54 +4,22 @@
   .co-prepare-starting-image {
     .prepare-starting-image-container {
       display: flex;
-      //justify-content: space-around;
-      //align-items: center;
       width: 100%;
       height: 100%;
       min-height: 100vh;
 
 
       .prepare-image-preview {
-        width: 70vw;
+        width: var(--co-inphoto-left-container-width);
         height: 100vh;
-        background-size: contain;
-        background-repeat: no-repeat;
-        background-position: center;
+        background-size: var(--co-inphoto-background-size);
+        background-repeat: var(--co-inphoto-background-repeat);
+        background-position: var(--co-inphoto-background-position);
       }
 
       .prepare-starting-image-dialog {
         width: 100%;
-        max-width: 30vw;
-        box-sizing: border-box;
-        padding: 35px 25px;
-        position: relative;
-
-        .dialog-container {
-          display: flex;
-          flex-direction: column;
-          gap: 20px;
-        }
-
-        .prepare-image-disclaimer {
-          display: flex;
-          gap: 10px;
-          align-items: center;
-          justify-content: center;
-          box-sizing: border-box;
-        }
-
-        .restart-button-container {
-          box-sizing: border-box;
-          padding: 20px 0 0;
-          margin-top: 20px;
-          border-top: 1px solid #eee;
-
-          .co-button {
-            display: flex;
-            box-sizing: border-box;
-            cursor: pointer;
-          }
-        }
+        max-width: var(--co-inphoto-right-container-width);
       }
     }
   }

package/lib/component/prepare-starting-image/style/_theme.scss

@@ -3,48 +3,13 @@
 @include cfg.export-module('co-prepare-starting-image-theme') {
   .co-prepare-starting-image {
     .prepare-starting-image-container {
-
       .prepare-starting-image-dialog {
-        background: var(--co-inphoto-dialog-background-color);
-        border-radius: var(--co-inphoto-border-radius);
-
         .prepare-starting-dialog-header {
           .header-icon {
             background: var(--co-inphoto-prepare-icon-background);
             color: var(--co-inphoto-accent-color);
             @include cfg.default-icon(var(--co-inphoto-icon-size-large), var(--co-inphoto-icon-size-large), var(--co-inphoto-accent-color));
           }
-
-          .header-info {
-            .header-text {
-              @include cfg.header-text();
-            }
-
-            .explain-text {
-              @include cfg.text();
-            }
-          }
-        }
-
-        .restart-button-container {
-          .co-button {
-            @include cfg.action-button(
-                    var(--co-inphoto-button-background),
-                    var(--co-inphoto-button-background),
-                    var(--co-inphoto-button-color),
-                    var(--co-inphoto-button-font-size),
-                    var(--co-inphoto-button-icon-size),
-                    var(--co-inphoto-button-icon-color),
-                    var(--co-inphoto-button-border),
-                    var(--co-inphoto-button-radius),
-                    var(--co-inphoto-button-padding)
-            );
-
-            .label {
-              margin-left: 15px;
-              font-weight: bold;
-            }
-          }
         }
       }
     }

package/lib/component/process-loader/style/_layout.scss

@@ -26,7 +26,6 @@
         justify-content: space-around;
         align-items: center;
         border-radius: 50%;
-        box-sizing: border-box;
         padding: 15px;
       }
 

package/lib/component/scene-context-menu/style/_layout.scss

@@ -8,7 +8,6 @@
       left: 50%;
       transform: translateX(-50%);
       width: auto;
-      box-sizing: border-box;
       padding: 6px;
       border-radius: 999px;
 
@@ -41,7 +40,6 @@
             top: calc(100% + 10px);
             left: 50%;
             transform: translateX(-50%);
-            box-sizing: border-box;
             padding: 6px 12px;
             border-radius: 8px;
             transition: opacity 0.15s ease, visibility 0.15s ease;

package/lib/component/segment-inpaint/style/_layout.scss

@@ -5,7 +5,6 @@
     .segment-inpaint-container {
       width: 100%;
       height: 100%;
-      box-sizing: border-box;
       padding: 0;
       margin: 0;
       position: relative;
@@ -21,28 +20,12 @@
       height: 100vh;
 
       .inpaint-canvas-container {
-        width: 70vw;
+        width: var(--co-inphoto-left-container-width);
       }
 
       .inpaint-info-dialog-container {
         width: 100%;
-        max-width: 30vw;
-        box-sizing: border-box;
-        padding: 35px 25px;
-        position: relative;
-      }
-
-      .restart-button-container {
-        box-sizing: border-box;
-        padding: 20px 0 0;
-        margin-top: 20px;
-
-
-        .co-button {
-          display: flex;
-          box-sizing: border-box;
-          cursor: pointer;
-        }
+        max-width: var(--co-inphoto-right-container-width);
       }
     }
   }

package/lib/component/segment-inpaint/style/_theme.scss

@@ -3,9 +3,6 @@
 @include cfg.export-module('co-segment-inpaint-theme') {
   .co-segment-inpaint {
     .inpaint-container {
-      .inpaint-info {
-        background: var(--co-inphoto-dialog-background-color);
-      }
       .inpaint-info-dialog-container {
         .header-icon {
           background: var(--co-inphoto-prepare-icon-background);
@@ -14,28 +11,6 @@
         }
 
       }
-      .restart-button-container {
-        border-top: 1px solid #eee;
-
-        .co-button {
-          @include cfg.action-button(
-                  var(--co-inphoto-button-background),
-                  var(--co-inphoto-button-background),
-                  var(--co-inphoto-button-color),
-                  var(--co-inphoto-button-font-size),
-                  var(--co-inphoto-button-icon-size),
-                  var(--co-inphoto-button-icon-color),
-                  var(--co-inphoto-button-border),
-                  var(--co-inphoto-button-radius),
-                  var(--co-inphoto-button-padding)
-          );
-
-          .label {
-            margin-left: 15px;
-            font-weight: bold;
-          }
-        }
-      }
     }
   }
 }

package/lib/component/side-panel/style/_layout.scss

@@ -0,0 +1,40 @@
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-side-panel-layout') {
+  .co-side-panel {
+    .side-panel-container {
+      width: 100%;
+      height: 100vh;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+
+      .side-panel-scroll-container {
+        flex: 1 1 auto;
+        min-height: 0;
+        overflow-y: auto;
+        scroll-behavior: smooth;
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+        padding-bottom: 35px;
+
+        &::-webkit-scrollbar {
+          display: none;
+        }
+
+        .side-panel-body {
+          display: flex;
+          flex-direction: column;
+        }
+
+        .side-panel-button-container {
+
+          .co-button {
+            display: flex;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+}

package/lib/component/side-panel/style/_material-definition.scss

@@ -0,0 +1,6 @@
+:root {
+  --co-inphoto-side-panel-padding: 35px 25px;
+  --co-inphoto-side-panel-border-color-button-container: #eee;
+  --co-inphoto-side-panel-padding-button-container: 20px 0 0;
+  --co-inphoto-side-panel-margin-button-container: 20px 0 0;
+}