@colijnit/inphoto 262.1.1 → 300.1.1

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

@@ -1,42 +1,124 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-prepare-starting-image-layout') {
+@include cfg.export-module('co-prepare-starting-image-layout') {
   .co-prepare-starting-image {
     .prepare-starting-image-container {
+      background-size: cover;
       display: flex;
-      gap: 20px;
+      justify-content: space-around;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      min-height: 100vh;
 
-      .prepare-starting-image-canvas-container {
-        width: 70%;
-      }
+      .prepare-starting-image-dialog {
+        width: 100%;
+        max-width: 815px;
+        background: var(--co-inphoto-dialog-background-color);
+        box-sizing: border-box;
+        padding: 25px 50px;
+        border-radius: var(--co-inphoto-border-radius);
+        position: relative;
 
-      .prepare-info-container {
-        width: 30%;
+        .close-click {
+          position: absolute;
+          right: 10px;
+          top: 10px;
+        }
 
-        .info-container {
-          box-sizing: border-box;
-          padding: 10px;
+        .prepare-starting-dialog-header {
+          display: flex;
+          justify-self: center;
+          flex-direction: column;
+          align-items: center;
+          margin-bottom: 30px;
+          text-align: center;
+          max-width: 500px;
 
-          .header-icon-container {
-            margin-bottom: 10px;
-            display: flex;
-            align-items: center;
-            gap: 10px;
+          .header-icon {
+            margin: 0 0 15px;
+            @include cfg.default-icon(var(--co-inphoto-icon-header), var(--co-inphoto-icon-header), var(--co-inphoto-accent-color));
           }
 
-          .main-action-buttons {
-            display: flex;
-            justify-content: space-between;
+          .header-text {
+            @include cfg.header-text;
+          }
+
+          .explain-text {
+            @include cfg.sub-header-light();
+          }
+        }
+
+        .dialog-container {
+          display: grid;
+          grid-gap: 15px;
+          grid-template-columns: repeat(2, minmax(100px, .5fr));
+
+          .button-container {
+            border-radius: var(--co-inphoto-border-radius);
+            background: #fff;
+            border: 1px solid var(--co-inphoto-border-color);
+            box-sizing: border-box;
+            padding: 15px 15px 25px;
+            text-align: center;
+            cursor: pointer;
+
+            .image-container {
+              min-width: 100%;
+              min-height: 200px;
+              display: flex;
+              align-items: center;
+              align-content: center;
+              text-align: center;
+              background: #eee;
+              border-right: 5px;
 
-            .remove-all-button, .make-selection-button {
-              min-width: 45%;
+              img {
+                width: 100%;
+                height: 100%;
+                object-fit: contain;
+                border-radius: 5px;
+              }
+            }
+
+            .button-container-text-container {
+              box-sizing: border-box;
+              padding: 0 10px;
+
+              .tile-head {
+                @include cfg.sub-header-text();
+                margin-bottom: 10px;
+              }
+
+              .tile-text {
+                @include cfg.text();
+              }
+            }
+
+
+            &:hover {
+              border-color: var(--co-inphoto-accent-color);
             }
           }
         }
 
-        .co-button.disabled {
-          cursor: not-allowed;
-          opacity: 0.5;
+        .prepare-starting-image-button-container {
+          margin-top: 25px;
+
+          .inphoto-cancel-button {
+            display: block;
+            box-sizing: border-box;
+            max-width: 230px;
+            text-align: center;
+            margin: 10px auto;
+            cursor: pointer;
+            background-color: var(--co-inphoto-button-background);
+            color: var(--co-inphoto-button-color);
+            font-size: var(--co-inphoto-button-font-size);
+            border: var(--co-inphoto-button-border);
+            border-radius: var(--co-inphoto-action-button-radius);
+            padding: 10px 15px;
+          }
         }
       }
     }

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

@@ -1,71 +1,8 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-prepare-starting-image-theme') {
+@include cfg.export-module('co-prepare-starting-image-theme') {
   .co-prepare-starting-image {
-    .prepare-starting-image-container {
-      .prepare-info-container {
-        .info-container {
-          .header-icon-container {
-            margin-bottom: 10px;
 
-            h2 {
-              font-size: var(--co-inphoto-font-size-head);
-              color: var(--co-inphoto-color-dark);
-            }
-          }
-
-          p {
-            font-size: var(--co-inphoto-font-size-label);
-            color: var(--co-inphoto-color-dark);
-          }
-        }
-
-        .action-button {
-          margin: 20px 0;
-          @include action-button(
-                          var(--co-inphoto-action-button-background),
-                          var(--co-inphoto-action-button-background),
-                          var(--co-inphoto-action-button-color),
-                          var(--co-inphoto-action-button-font-size),
-                          var(--co-inphoto-action-button-icon-size),
-                          var(--co-inphoto-action-button-icon-color),
-                          var(--co-inphoto-action-button-border),
-                          var(--co-inphoto-action-button-radius),
-                          var(--co-inphoto-action-button-padding))
-        }
-
-        .remove-all-button, .make-selection-button {
-          margin: 20px 0;
-          @include action-button(
-                          var(--co-inphoto-action-button-background),
-                          var(--co-inphoto-action-button-background),
-                          var(--co-inphoto-action-button-color),
-                          var(--co-inphoto-action-button-font-size),
-                          var(--co-inphoto-action-button-icon-size),
-                          var(--co-inphoto-action-button-icon-color),
-                          var(--co-inphoto-action-button-border),
-                          var(--co-inphoto-action-button-radius),
-                          var(--co-inphoto-action-button-padding)
-          )
-        }
-
-        .process-button {
-          margin: 20px 0;
-          @include action-button(
-                          var(--co-inphoto-action-button-background),
-                          var(--co-inphoto-action-button-background),
-                          var(--co-inphoto-action-button-color),
-                          var(--co-inphoto-action-button-font-size),
-                          var(--co-inphoto-action-button-icon-size),
-                          var(--co-inphoto-action-button-icon-color),
-                          var(--co-inphoto-action-button-border),
-                          var(--co-inphoto-action-button-radius),
-                          var(--co-inphoto-action-button-padding)
-          )
-        }
-
-      }
-    }
   }
 }
 

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

@@ -1,15 +1,14 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-process-loader-layout') {
+@include cfg.export-module('co-process-loader-layout') {
   .co-process-loader {
-
     .loader-wrapper {
       position: fixed;
       inset: 0;
       display: flex;
       align-items: center;
       justify-content: center;
-      z-index: 50;
+      z-index: 101;
     }
 
     .loader-container {
@@ -17,22 +16,57 @@
       display: flex;
       flex-direction: column;
       align-items: center;
-      width: 250px;
-      padding: 20px;
-      border-radius: 10px;
-
-      .loader-estimated-time {
-        span {
-          font-size: var(--co-inphoto-font-size-label);
-          margin-right: 5px;
+      width: 550px;
+      padding: 45px;
+      border-radius: var(--co-inphoto-border-radius);
+      background:  var(--co-inphoto-dialog-background-color);
+
+      .loading-icon {
+        width: 100px;
+        height: 100px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        border-radius: 50%;
+        background: var(--co-inphoto-header-icon-background);
+        @include cfg.default-icon(60px, 60px, var(--co-inphoto-success-color));
+      }
+
+      .loading-text-carousel {
+        margin-top: 30px;
+        width: 450px;
+        height: 60px;
+        overflow: hidden;
+      }
+
+      .loading-text-track {
+        display: flex;
+        flex-direction: column;
+        transform: translateY(calc(var(--active, 0) * 60px * -1));
+        transition: transform 0.5s ease-in-out;
+
+        &.no-transition {
+          transition: none;
         }
       }
+
+      .loading-text-item {
+        flex: 0 0 auto;
+        height: 60px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        white-space: normal;
+        font-size: var(--co-inphoto-font-size-head);
+        font-weight: bold;
+      }
     }
 
-    .percentage {
-      display: flex;
-      align-items: center;
-      justify-content: center;
+    @media (prefers-reduced-motion: reduce) {
+      .loading-text-track {
+        transition: none;
+      }
     }
   }
 }

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

@@ -1,6 +1,6 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-process-loader-theme') {
+@include cfg.export-module('co-process-loader-theme') {
   .co-process-loader {
 
     .loader-wrapper {
@@ -10,16 +10,6 @@
     .loader-container {
       background: #fff;
     }
-
-    .percentage {
-      font-size: var(--co-inphoto-font-size-sub-head);
-      font-weight: 600;
-    }
-
-    p {
-      margin-top: 16px;
-      font-size: var(--co-inphoto-font-size-base);
-    }
   }
 }
 

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

@@ -0,0 +1,65 @@
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-ready-to-add-articles-layout') {
+  .co-ready-to-add-articles {
+    .ready-to-add-articles-container {
+      position: absolute;
+      left: 135px;
+      top: 100px;
+      box-sizing: border-box;
+      max-width: 450px;
+
+      .ready-to-add-article-top {
+        display: flex;
+        box-sizing: border-box;
+        justify-content: space-between;
+
+        .top-left-container {
+          width: 20%;
+
+          .icon-container {
+            border-radius: 50%;
+            height: 50px;
+            width: 50px;
+            display: flex;
+            align-items: center;
+            justify-content: space-around;
+          }
+        }
+
+        .top-right-container {
+          margin-left: 20px;
+          max-width: 80%;
+        }
+
+        .top-close-container {
+          .co-icon {
+            cursor: pointer;
+          }
+        }
+      }
+
+      .ready-to-add-article-bottom {
+        display: flex;
+        box-sizing: border-box;
+        justify-content: space-between;
+
+        .bottom-left-container {
+          .icon-container {
+            border-radius: 50%;
+            height: 35px;
+            width: 35px;
+            display: flex;
+            align-items: center;
+            justify-content: space-around;
+          }
+        }
+
+        .bottom-right-container {
+          margin-left: auto;
+          max-width: 85%;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+:root {
+
+}

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

@@ -0,0 +1,95 @@
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-ready-to-add-articles-theme') {
+  .co-ready-to-add-articles {
+    .ready-to-add-articles-container {
+      background-color: var(--co-inphoto-dialog-background-color);
+      border-radius: var(--co-inphoto-border-radius);
+      padding: 20px;
+
+      .ready-to-add-article-top {
+        padding: 0 0 20px;
+        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));
+          }
+        }
+
+        .top-right-container {
+          .top-head {
+            font-size: var(--co-inphoto-font-size-head);
+            font-weight: bold;
+          }
+
+          .top-text {
+            font-size: var(--co-inphoto-font-size-text);
+          }
+        }
+
+        .top-close-container {
+          .co-icon {
+            cursor: pointer;
+          }
+        }
+      }
+
+      .ready-to-add-article-bottom {
+        padding: 20px 0;
+
+        .bottom-left-container {
+          .icon-container {
+            background: #eee;
+            @include cfg.default-icon(var(--co-inphoto-icon-size), var(--co-inphoto-icon-size), var(--co-inphoto-success-color));
+          }
+        }
+
+        .bottom-right-container {
+          .bottom-text {
+            font-size: var(--co-inphoto-font-size-text);
+          }
+        }
+      }
+
+      .ready-to-add-article-buttons {
+
+        .action-button {
+          @include cfg.action-button(
+                  var(--co-inphoto-action-button-background),
+                  var(--co-inphoto-action-button-background),
+                  var(--co-inphoto-action-button-color),
+                  var(--co-inphoto-action-button-font-size),
+                  var(--co-inphoto-action-button-icon-size),
+                  var(--co-inphoto-action-button-icon-color),
+                  var(--co-inphoto-action-button-border),
+                  var(--co-inphoto-action-button-radius),
+                  var(--co-inphoto-action-button-padding))
+        }
+
+        .has-left-icon {
+          .co-icon {
+            margin-right: 5px;
+          }
+        }
+
+        .text-button {
+          margin-top: 15px;
+          display: block;
+          cursor: pointer;
+          text-align: center;
+          text-decoration: underline;
+          font-size: var(--co-inphoto-font-size-text);
+          box-sizing: border-box;
+          padding: var(--co-inphoto-action-button-padding)
+        }
+
+      }
+    }
+  }
+}
+
+
+

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

@@ -0,0 +1,3 @@
+@use './_material-definition.scss';
+@use './_layout.scss';
+@use './_theme.scss';

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

@@ -0,0 +1,90 @@
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-scene-context-menu-layout') {
+  .co-scene-context-menu {
+    .scene-context-menu-container {
+      position: absolute;
+      bottom: 70px;
+      left: 50%;
+      transform: translateX(-50%);
+      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;
+        align-items: center;
+        gap: 4px;
+
+        .scene-context-menu-item {
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 40px;
+          height: 40px;
+          padding: 0;
+          position: relative;
+          border-radius: 50%;
+          transition: background 0.15s ease;
+
+          .scene-context-menu-item-icon {
+            display: flex;
+            @include cfg.default-icon(18px, 18px, #172533);
+          }
+
+          .scene-context-menu-item-text {
+            visibility: hidden;
+            opacity: 0;
+            white-space: nowrap;
+            position: absolute;
+            top: calc(100% + 10px);
+            left: 50%;
+            transform: translateX(-50%);
+            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 {
+              content: '';
+              position: absolute;
+              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

@@ -0,0 +1,3 @@
+:root {
+
+}

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

@@ -0,0 +1,8 @@
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-scene-context-menu-theme') {
+  .co-scene-context-menu {
+
+  }
+}
+

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

@@ -0,0 +1,3 @@
+@use './_material-definition.scss';
+@use './_layout.scss';
+@use './_theme.scss';

package/lib/component/segment-inpaint/components/inpaint-info-card/style/_layout.scss

@@ -0,0 +1,49 @@
+@use '../../../../../style' as cfg;
+
+@include cfg.export-module('co-inpaint-info-card-layout') {
+  .co-inpaint-info-card {
+    flex: 1;
+
+    .inpaint-info-container {
+      display: flex;
+      justify-content: space-between;
+
+      .number-container {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        display: flex;
+        justify-self: center;
+        align-items: center;
+        justify-content: space-around;
+        background: var(--co-inphoto-accent-color);
+        color: var(--co-inphoto-icon-color-light);
+      }
+
+      .col-right {
+        box-sizing: border-box;
+        padding: 0 4px 4px 15px;
+
+        .card-icon {
+          width: 50px;
+          height: 50px;
+          background: var(--co-inphoto-info-dialog-icon-bg);
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          margin-bottom: 10px;
+          border-radius: 4px;
+        }
+
+        .card-title {
+          @include cfg.sub-header-text();
+          margin-bottom: 10px;
+        }
+
+        .card-description {
+          @include cfg.text()
+        }
+      }
+    }
+  }
+}

package/lib/component/segment-inpaint/components/inpaint-info-card/style/_material-definition.scss

@@ -0,0 +1,3 @@
+:root {
+  --co-inphoto-info-dialog-icon-bg: #EEE;
+}

package/lib/component/segment-inpaint/components/inpaint-info-card/style/_theme.scss

@@ -0,0 +1,10 @@
+@use '../../../../../style' as cfg;
+
+@include cfg.export-module('co-inpaint-info-card-theme') {
+  .co-inpaint-info-card {
+
+  }
+}
+
+
+

package/lib/component/segment-inpaint/components/inpaint-info-card/style/material.scss

@@ -0,0 +1,3 @@
+@use './_material-definition.scss';
+@use './_layout.scss';
+@use './_theme.scss';