@colijnit/inphoto 300.1.2 → 300.1.4

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

@@ -2,12 +2,10 @@
 
 @include cfg.export-module('co-image-title-layout') {
   .co-image-title {
-
     .image-tile {
       border-radius: var(--co-inphoto-border-radius);
       overflow: hidden;
       width: 95%;
-      background: var(--co-inphoto-background-white);
       cursor: pointer;
 
       .image-tile-top {
@@ -15,11 +13,13 @@
 
         .image-tile-index, .image-tile-remove {
           position: absolute;
-          width: 20px;
-          height: 20px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          width: 28px;
+          height: 28px;
           border-radius: 50%;
           text-align: center;
-          background: var(--co-inphoto-background-white);
         }
 
         .image-tile-index {
@@ -32,21 +32,28 @@
           top: 5px;
           right: 5px;
           cursor: pointer;
-          @include cfg.default-icon(var(--co-inphoto-icon-size), var(--co-inphoto-icon-size), var( --co-inphoto-icon-color));
+
+          .co-button {
+            width: 28px;
+            height: 28px;
+          }
+
         }
 
         .image-tile-container {
-          min-height: 100px;
+          min-height: 130px;
+          max-height: 130px;
+          overflow: hidden;
 
           .mask-no-image-explain {
             box-sizing: border-box;
             padding: 30px 8px 0;
-            font-size: var(--co-inphoto-font-size-label)
           }
 
           img {
             width: 100%;
             height: 100%;
+            max-height: 130px;
             object-fit: contain;
           }
         }
@@ -55,17 +62,21 @@
       .image-tile-bottom {
         box-sizing: border-box;
         padding: 8px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
 
-        .brush-icon, .delete-icon {
-          cursor: pointer;
-          @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var( --co-inphoto-icon-color));
+        .co-button {
+          background: none;
+          width: 28px;
+          height: 28px;
 
-          .co-icon {
-            display: block;
-            margin: 5px auto;
+          .brush-icon, .delete-icon {
+            cursor: pointer;
           }
         }
 
+
         .hide-delete-button, .hide-brush-button {
           display: none;
         }
@@ -75,7 +86,7 @@
 
           .color-palette {
             display: grid;
-            grid-template-columns: repeat(5, 25px);
+            grid-template-columns: repeat(5, 30px);
           }
 
           .color-palette-disabled {
@@ -88,13 +99,5 @@
         }
       }
     }
-
-    .active-item {
-      .image-tile-top {
-        .image-tile-index {
-          background: var(--co-inphoto-accent-color);
-        }
-      }
-    }
   }
 }

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

@@ -2,7 +2,52 @@
 
 @include cfg.export-module('co-image-title-theme') {
   .co-image-title {
+    .image-tile {
+      background: var(--co-inphoto-background-white);
 
+      .image-tile-top {
+        .image-tile-index, .image-tile-remove {
+          background: var(--co-inphoto-background-white);
+        }
+
+        .image-tile-remove {
+          border: 1px solid var(--co-inphoto-icon-color);
+
+          .co-button {
+            background: none;
+            @include cfg.default-icon(var(--co-inphoto-icon-size), var(--co-inphoto-icon-size), var(--co-inphoto-icon-color));
+          }
+        }
+
+        .image-tile-container {
+          .mask-no-image-explain {
+            font-size: var(--co-inphoto-font-size-label)
+          }
+        }
+      }
+
+      .image-tile-bottom {
+        .co-button {
+          .brush-icon, .delete-icon {
+            @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-color));
+
+            .co-icon {
+              display: block;
+              margin: 5px auto;
+            }
+          }
+        }
+
+      }
+    }
+
+    .active-item {
+      .image-tile-top {
+        .image-tile-index {
+          background: var(--co-inphoto-accent-color);
+        }
+      }
+    }
   }
 }
 

package/lib/component/photo-editor/style/_layout.scss

@@ -2,6 +2,22 @@
 
 @include cfg.export-module('co-photo-editor-layout') {
   .co-photo-editor {
+
+    .photo-editor-dialog {
+      .photo-editor-container {
+        display: flex;
+        min-height: 100vh;
+
+        .photo-editor-canvas {
+          width: 70vw;
+        }
+
+        .photo-editor-pane {
+          width: 30vw;
+        }
+      }
+    }
+
     .photo-editor-upload {
       display: flex;
       align-items: center;
@@ -9,7 +25,5 @@
       height: 100vh;
       width: 100vw;
     }
-
-
   }
 }

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

@@ -3,91 +3,33 @@
 @include cfg.export-module('co-prepare-starting-image-layout') {
   .co-prepare-starting-image {
     .prepare-starting-image-container {
-      background-size: contain;
       display: flex;
-      justify-content: space-around;
-      align-items: center;
+      //justify-content: space-around;
+      //align-items: center;
       width: 100%;
       height: 100%;
       min-height: 100vh;
-      background-repeat: no-repeat;
-      background-position: center;
+
+
+      .prepare-image-preview {
+        width: 70vw;
+        height: 100vh;
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+      }
 
       .prepare-starting-image-dialog {
         width: 100%;
-        max-width: 960px;
+        max-width: 30vw;
         box-sizing: border-box;
-        padding: 25px;
+        padding: 35px 25px;
         position: relative;
 
-        .prepare-starting-dialog-header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          margin-bottom: 25px;
-
-          .header-icon {
-            width: 50px;
-            height: 50px;
-            display: flex;
-            justify-content: space-around;
-            align-items: center;
-            border-radius: 50%;
-          }
-
-          .header-info {
-            max-width: 500px;
-          }
-
-          .header-button {
-            .co-button {
-              display: flex;
-              box-sizing: border-box;
-              cursor: pointer;
-            }
-          }
-        }
-
         .dialog-container {
-          display: grid;
-          grid-gap: 15px;
-          grid-template-columns: repeat(3, minmax(100px, .5fr));
-
-          .button-container {
-            cursor: pointer;
-            position: relative;
-
-            .image-container {
-              min-width: 100%;
-              min-height: 200px;
-              max-height: 250px;
-              display: flex;
-              align-items: center;
-              align-content: center;
-            }
-
-            .button-container-text-container {
-              box-sizing: border-box;
-
-              .tile-head-new-container {
-                margin-bottom: 10px;
-              }
-
-              .tile-next-icon {
-                width: 45px;
-                height: 45px;
-                display: flex;
-                align-items: center;
-                position: absolute;
-                bottom: 8px;
-                right: 8px;
-
-                .co-icon {
-                  flex: 1;
-                }
-              }
-            }
-          }
+          display: flex;
+          flex-direction: column;
+          gap: 20px;
         }
 
         .prepare-image-disclaimer {
@@ -97,6 +39,19 @@
           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;
+          }
+        }
       }
     }
   }

package/lib/component/prepare-starting-image/style/_material-definition.scss

@@ -1,3 +1,4 @@
 :root {
   --co-inphoto-tile-next-background: #EFEEEE;
+  --co-inphoto-prepare-icon-background: #FFF7ED;
 }

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

@@ -9,16 +9,13 @@
         border-radius: var(--co-inphoto-border-radius);
 
         .prepare-starting-dialog-header {
-          text-align: center;
-
           .header-icon {
-            background: #FFF7ED;
-            color: #D29428;
-            @include cfg.default-icon(var(--co-inphoto-icon-size-large), var(--co-inphoto-icon-size-large), #D29428);
+            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();
             }
@@ -27,98 +24,28 @@
               @include cfg.text();
             }
           }
-
-          .header-button {
-            .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;
-              }
-            }
-          }
         }
 
-        .dialog-container {
-          display: grid;
-          grid-gap: 15px;
-          grid-template-columns: repeat(3, minmax(100px, .5fr));
-
-          .button-container {
-            border-radius: var(--co-inphoto-border-radius);
-            background: var(--co-inphoto-background-white);
-            border: 1px solid var(--co-inphoto-border-color);
-            box-shadow: var(--co-inphoto-dialog-box-shadow);
-            box-sizing: border-box;
-            padding: 8px 8px 25px;
-
-            .image-container {
-              border-radius: var(--co-inphoto-border-radius);
-
-              img {
-                width: 100%;
-                height: 100%;
-                object-fit: contain;
-                border-radius: var(--co-inphoto-border-radius);
-              }
-            }
-
-            .button-container-text-container {
-              padding: 16px 8px 40px;
-
-              .tile-head {
-                @include cfg.sub-header-text();
-                margin-bottom: 10px;
-              }
-
-              .tile-text {
-                @include cfg.text();
-              }
-
-              .tile-head-new-container {
-
-                .text-head-new {
-                  margin-left: 10px;
-                  box-sizing: border-box;
-                  padding: 4px 12px;
-                  border-radius: var(--co-inphoto-border-radius);
-                  background: var(--co-inphoto-header-icon-background);
-                  color: var(--co-inphoto-success-color);
-                  font-size: var(--co-inphoto-font-size-label);
-                  font-weight: bold;
-                }
-              }
-
-              .tile-next-icon {
-                border-radius: 50%;
-                background: var(--co-inphoto-dialog-background-color);
-                @include cfg.default-icon(var(--co-inphoto-icon-size), var(--co-inphoto-icon-size), var(--co-inphoto-accent-text));
-              }
-            }
-
-            &:hover {
-              border-color: var(--co-inphoto-accent-color);
+        .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;
             }
           }
         }
-
-        .prepare-image-disclaimer {
-          margin-top: 20px;
-          @include cfg.text();
-          color: var(--co-inphoto-accent-text);
-          @include cfg.default-icon(var(--co-inphoto-icon-size), var(--co-inphoto-icon-size), var(--co-inphoto-accent-text));
-        }
       }
     }
   }

package/lib/component/ready-to-add-articles/style/_layout.scss

@@ -33,8 +33,13 @@
         }
 
         .top-close-container {
-          .co-icon {
+          .co-button {
+            background: none;
             cursor: pointer;
+
+            @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-color));
+            .co-icon {
+            }
           }
         }
       }

package/lib/component/ready-to-add-articles/style/_theme.scss

@@ -12,7 +12,6 @@
         border-bottom: 1px solid #eee;
 
         .top-left-container {
-
           .icon-container {
             border: 5px solid #eee;
             @include cfg.default-icon(var(--co-inphoto-icon-size-large), var(--co-inphoto-icon-size-large), var(--co-inphoto-success-color));
@@ -55,7 +54,6 @@
       }
 
       .ready-to-add-article-buttons {
-
         .action-button {
           @include cfg.action-button(
                   var(--co-inphoto-action-button-background),
@@ -83,7 +81,9 @@
           text-decoration: underline;
           font-size: var(--co-inphoto-font-size-text);
           box-sizing: border-box;
-          padding: var(--co-inphoto-action-button-padding)
+          padding: var(--co-inphoto-action-button-padding);
+          background: none;
+          color: var(--co-inphoto-color-dark);
         }
 
       }

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

@@ -10,9 +10,7 @@
       width: auto;
       box-sizing: border-box;
       padding: 6px;
-      background: var(--co-inphoto-dialog-background-color);
       border-radius: 999px;
-      box-shadow: 0 6px 20px rgba(23, 37, 51, 0.18);
 
       .scene-context-menu-body {
         display: flex;
@@ -33,7 +31,6 @@
 
           .scene-context-menu-item-icon {
             display: flex;
-            @include cfg.default-icon(18px, 18px, #172533);
           }
 
           .scene-context-menu-item-text {
@@ -47,11 +44,6 @@
             box-sizing: border-box;
             padding: 6px 12px;
             border-radius: 8px;
-            background: #fff;
-            box-shadow: 0 4px 14px rgba(23, 37, 51, 0.18);
-            font-size: 12px;
-            font-weight: 400;
-            color: #172533;
             transition: opacity 0.15s ease, visibility 0.15s ease;
 
             &::before {
@@ -60,29 +52,15 @@
               bottom: 100%;
               left: 50%;
               transform: translateX(-50%);
-              border: 5px solid transparent;
-              border-bottom-color: #fff;
             }
           }
 
           &:hover {
-            background: #f0f2f5;
-
             .scene-context-menu-item-text {
               visibility: visible;
               opacity: 1;
             }
           }
-
-          &.active {
-            background: var(--co-inphoto-accent-color);
-
-            @include cfg.default-icon(25px, 25px, #fff);
-
-            &:hover {
-              background: var(--co-inphoto-accent-color);
-            }
-          }
         }
       }
     }

package/lib/component/scene-context-menu/style/_material-definition.scss

@@ -1,3 +1,4 @@
 :root {
-
+  --co-inphoto-context-menu-box-shadow: 0 6px 20px rgba(23, 37, 51, 0.18);
+  --co-inphoto-context-menu-hover-background: #f0f2f5;
 }

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

@@ -2,7 +2,43 @@
 
 @include cfg.export-module('co-scene-context-menu-theme') {
   .co-scene-context-menu {
+    .scene-context-menu-container {
+      background: var(--co-inphoto-background-white);
+      box-shadow: var(--co-inphoto-context-menu-box-shadow);
 
+      .scene-context-menu-body {
+        .scene-context-menu-item {
+          .scene-context-menu-item-icon {
+            @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-color));
+          }
+
+          .scene-context-menu-item-text {
+            background: var(--co-inphoto-background-white);
+            box-shadow: var(--co-inphoto-context-menu-box-shadow);
+            @include cfg.text();
+
+            &::before {
+              border: 5px solid transparent;
+              border-bottom-color: var(--co-inphoto-background-white);
+            }
+          }
+
+          &:hover {
+            background: var(--co-inphoto-context-menu-hover-background);
+          }
+
+          &.active {
+            background: var(--co-inphoto-accent-color);
+
+            @include cfg.default-icon(var(--co-inphoto-icon-size), var(--co-inphoto-icon-size), var(--co-inphoto-icon-color-light));
+
+            &:hover {
+              background: var(--co-inphoto-accent-color);
+            }
+          }
+        }
+      }
+    }
   }
 }
 

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

@@ -9,42 +9,39 @@
       padding: 0;
       margin: 0;
       position: relative;
-    }
 
-    .inpaint-info-dialog-container {
-      position: absolute;
-      z-index: 10000;
-      bottom: 20%;
-      left: calc(50% - 490px);
-      background: var(--co-inphoto-dialog-background-color);
-      width: 100%;
-      max-width: 980px;
-      box-sizing: border-box;
-      padding: 20px 20px 30px;
-      border-radius: var(--co-inphoto-border-radius);
+      .inpaint-info {
+        min-height: 100vh;
+      }
+    }
 
-      .inpaint-info-dialog-header {
-        display: flex;
-        justify-content: space-between;
-        box-sizing: border-box;
-        padding: 10px 0 25px;
+    .inpaint-container {
+      display: flex;
+      min-height: 100vh;
+      height: 100vh;
 
-        .dialog-header {
-          @include cfg.sub-header-text()
-        }
+      .inpaint-canvas-container {
+        width: 70vw;
+      }
 
-        .close-click {
-          cursor: pointer;
-        }
+      .inpaint-info-dialog-container {
+        width: 100%;
+        max-width: 30vw;
+        box-sizing: border-box;
+        padding: 35px 25px;
+        position: relative;
       }
 
-      .dialog-content {
-        display: flex;
-        justify-content: space-between;
+      .restart-button-container {
+        box-sizing: border-box;
+        padding: 20px 0 0;
+        margin-top: 20px;
+
 
-        .arrow-next {
-          width: 50px;
-          @include cfg.default-icon(var(--co-inphoto-icon-size), var(--co-inphoto-icon-size), var(--co-inphoto-accent-text));
+        .co-button {
+          display: flex;
+          box-sizing: border-box;
+          cursor: pointer;
         }
       }
     }