@colijnit/inphoto 300.1.9 → 301.1.0

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

@@ -1,128 +1,128 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-process-loader-theme') {
-  .co-process-loader {
-    font-family: var(--co-inphoto-process-loader-font-family);
-    font-size: var(--co-inphoto-process-loader-font-size-text);
-
-    .loader-wrapper {
-      background: var(--co-inphoto-loader-background-dark);
-    }
-
-    .loader-container {
-      border-radius: var(--co-inphoto-border-radius);
-      background: var(--co-inphoto-dialog-background-color);
-
-      .loading-icon {
-        border-radius: var(--co-inphoto-process-loader-icon-radius);
-      }
-
-      .loading-text-track {
-        transition: var(--co-inphoto-process-loader-track-transition);
-
-        &.no-transition {
-          transition: var(--co-inphoto-process-loader-track-transition-none);
-        }
-      }
-
-      .lt-dots {
-        span {
-          animation: var(--co-inphoto-process-loader-dots-animation);
-
-          &:nth-child(2) {
-            animation-delay: var(--co-inphoto-process-loader-dots-delay-2);
-          }
-
-          &:nth-child(3) {
-            animation-delay: var(--co-inphoto-process-loader-dots-delay-3);
-          }
-        }
-      }
-    }
-
-    .loading-icon {
-      background: var(--co-inphoto-header-icon-background);
-      animation: wrap-pulse var(--co-inphoto-loader-pulse-duration) ease-in-out infinite;
-
-      svg {
-        width: 100%;
-        height: 100%;
-        overflow: visible;
-      }
-
-      .spark {
-        fill: var(--co-inphoto-success-color);
-        transform-box: fill-box;
-        transform-origin: center;
-        transform-style: preserve-3d;
-
-        &--big {
-          animation: pulse var(--co-inphoto-loader-pulse-duration) ease-in-out infinite;
-        }
-
-        &--small-a {
-          animation: twinkle var(--co-inphoto-loader-twinkle-duration) ease-in-out infinite;
-          animation-delay: 0.3s;
-        }
-
-        &--small-b {
-          animation: twinkle var(--co-inphoto-loader-twinkle-duration) ease-in-out infinite;
-          animation-delay: 0.9s;
-        }
-      }
-    }
-
-    @keyframes wrap-pulse {
-      0% {
-        box-shadow: 0 0 0 0 rgba(222, 241, 221, 0.7);
-      }
-      70% {
-        box-shadow: 0 0 0 20px rgba(222, 241, 221, 0);
-      }
-      100% {
-        box-shadow: 0 0 0 0 rgba(222, 241, 221, 0);
-      }
-    }
-
-    @keyframes pulse {
-      0%, 100% {
-        transform: scale(1) rotate(0deg);
-        opacity: 1;
-      }
-      50% {
-        transform: scale(1.12) rotate(8deg);
-        opacity: 0.85;
-      }
-    }
-
-    @keyframes twinkle {
-      0%, 100% {
-        transform: scale(0.5);
-        opacity: 0.25;
-      }
-      50% {
-        transform: scale(1.15);
-        opacity: 1;
-      }
-    }
-
-    @keyframes drop {
-      0% {
-        transform: translateY(-0.6em);
-        opacity: 0;
-      }
-      20% {
-        transform: translateY(0);
-        opacity: 1;
-      }
-      80% {
-        transform: translateY(0);
-        opacity: 1;
-      }
-      100% {
-        transform: translateY(-0.6em);
-        opacity: 0;
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-process-loader-theme') {
+  .co-process-loader {
+    font-family: var(--co-inphoto-process-loader-font-family);
+    font-size: var(--co-inphoto-process-loader-font-size-text);
+
+    .loader-wrapper {
+      background: var(--co-inphoto-loader-background-dark);
+    }
+
+    .loader-container {
+      border-radius: var(--co-inphoto-border-radius);
+      background: var(--co-inphoto-dialog-background-color);
+
+      .loading-icon {
+        border-radius: var(--co-inphoto-process-loader-icon-radius);
+      }
+
+      .loading-text-track {
+        transition: var(--co-inphoto-process-loader-track-transition);
+
+        &.no-transition {
+          transition: var(--co-inphoto-process-loader-track-transition-none);
+        }
+      }
+
+      .lt-dots {
+        span {
+          animation: var(--co-inphoto-process-loader-dots-animation);
+
+          &:nth-child(2) {
+            animation-delay: var(--co-inphoto-process-loader-dots-delay-2);
+          }
+
+          &:nth-child(3) {
+            animation-delay: var(--co-inphoto-process-loader-dots-delay-3);
+          }
+        }
+      }
+    }
+
+    .loading-icon {
+      background: var(--co-inphoto-header-icon-background);
+      animation: wrap-pulse var(--co-inphoto-loader-pulse-duration) ease-in-out infinite;
+
+      svg {
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+
+      .spark {
+        fill: var(--co-inphoto-success-color);
+        transform-box: fill-box;
+        transform-origin: center;
+        transform-style: preserve-3d;
+
+        &--big {
+          animation: pulse var(--co-inphoto-loader-pulse-duration) ease-in-out infinite;
+        }
+
+        &--small-a {
+          animation: twinkle var(--co-inphoto-loader-twinkle-duration) ease-in-out infinite;
+          animation-delay: 0.3s;
+        }
+
+        &--small-b {
+          animation: twinkle var(--co-inphoto-loader-twinkle-duration) ease-in-out infinite;
+          animation-delay: 0.9s;
+        }
+      }
+    }
+
+    @keyframes wrap-pulse {
+      0% {
+        box-shadow: 0 0 0 0 rgba(222, 241, 221, 0.7);
+      }
+      70% {
+        box-shadow: 0 0 0 20px rgba(222, 241, 221, 0);
+      }
+      100% {
+        box-shadow: 0 0 0 0 rgba(222, 241, 221, 0);
+      }
+    }
+
+    @keyframes pulse {
+      0%, 100% {
+        transform: scale(1) rotate(0deg);
+        opacity: 1;
+      }
+      50% {
+        transform: scale(1.12) rotate(8deg);
+        opacity: 0.85;
+      }
+    }
+
+    @keyframes twinkle {
+      0%, 100% {
+        transform: scale(0.5);
+        opacity: 0.25;
+      }
+      50% {
+        transform: scale(1.15);
+        opacity: 1;
+      }
+    }
+
+    @keyframes drop {
+      0% {
+        transform: translateY(-0.6em);
+        opacity: 0;
+      }
+      20% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+      80% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+      100% {
+        transform: translateY(-0.6em);
+        opacity: 0;
+      }
+    }
+  }
+}

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

@@ -1,59 +1,59 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-scene-context-menu-layout') {
-  .co-scene-context-menu {
-    .scene-context-menu-container {
-      position: var(--co-inphoto-scene-context-menu-position-absolute);
-      bottom: var(--co-inphoto-scene-context-menu-container-bottom);
-      left: var(--co-inphoto-scene-context-menu-center-x);
-      transform: var(--co-inphoto-scene-context-menu-translate-center-x);
-      width: var(--co-inphoto-scene-context-menu-container-width);
-      padding: var(--co-inphoto-scene-context-menu-container-padding);
-
-      .scene-context-menu-body {
-        display: flex;
-        align-items: center;
-        gap: var(--co-inphoto-scene-context-menu-body-gap);
-
-        .scene-context-menu-item {
-          cursor: pointer;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          width: var(--co-inphoto-scene-context-menu-item-size);
-          height: var(--co-inphoto-scene-context-menu-item-size);
-          padding: var(--co-inphoto-scene-context-menu-item-padding-zero);
-          position: var(--co-inphoto-scene-context-menu-position-relative);
-
-          .scene-context-menu-item-icon {
-            display: flex;
-          }
-
-          .scene-context-menu-item-text {
-            visibility: hidden;
-            white-space: nowrap;
-            position: var(--co-inphoto-scene-context-menu-position-absolute);
-            top: var(--co-inphoto-scene-context-menu-item-text-top);
-            left: var(--co-inphoto-scene-context-menu-center-x);
-            transform: var(--co-inphoto-scene-context-menu-translate-center-x);
-            padding: var(--co-inphoto-scene-context-menu-item-text-padding);
-
-            &::before {
-              content: '';
-              position: var(--co-inphoto-scene-context-menu-position-absolute);
-              bottom: var(--co-inphoto-scene-context-menu-item-text-arrow-bottom);
-              left: var(--co-inphoto-scene-context-menu-center-x);
-              transform: var(--co-inphoto-scene-context-menu-translate-center-x);
-            }
-          }
-
-          &:hover {
-            .scene-context-menu-item-text {
-              visibility: visible;
-            }
-          }
-        }
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-scene-context-menu-layout') {
+  .co-scene-context-menu {
+    .scene-context-menu-container {
+      position: var(--co-inphoto-scene-context-menu-position-absolute);
+      bottom: var(--co-inphoto-scene-context-menu-container-bottom);
+      left: var(--co-inphoto-scene-context-menu-center-x);
+      transform: var(--co-inphoto-scene-context-menu-translate-center-x);
+      width: var(--co-inphoto-scene-context-menu-container-width);
+      padding: var(--co-inphoto-scene-context-menu-container-padding);
+
+      .scene-context-menu-body {
+        display: flex;
+        align-items: center;
+        gap: var(--co-inphoto-scene-context-menu-body-gap);
+
+        .scene-context-menu-item {
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: var(--co-inphoto-scene-context-menu-item-size);
+          height: var(--co-inphoto-scene-context-menu-item-size);
+          padding: var(--co-inphoto-scene-context-menu-item-padding-zero);
+          position: var(--co-inphoto-scene-context-menu-position-relative);
+
+          .scene-context-menu-item-icon {
+            display: flex;
+          }
+
+          .scene-context-menu-item-text {
+            visibility: hidden;
+            white-space: nowrap;
+            position: var(--co-inphoto-scene-context-menu-position-absolute);
+            top: var(--co-inphoto-scene-context-menu-item-text-top);
+            left: var(--co-inphoto-scene-context-menu-center-x);
+            transform: var(--co-inphoto-scene-context-menu-translate-center-x);
+            padding: var(--co-inphoto-scene-context-menu-item-text-padding);
+
+            &::before {
+              content: '';
+              position: var(--co-inphoto-scene-context-menu-position-absolute);
+              bottom: var(--co-inphoto-scene-context-menu-item-text-arrow-bottom);
+              left: var(--co-inphoto-scene-context-menu-center-x);
+              transform: var(--co-inphoto-scene-context-menu-translate-center-x);
+            }
+          }
+
+          &:hover {
+            .scene-context-menu-item-text {
+              visibility: visible;
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -1,27 +1,27 @@
-.co-scene-context-menu {
-  --co-inphoto-scene-context-menu-font-size-text: var(--co-inphoto-font-size-text);
-  --co-inphoto-scene-context-menu-font-family: var(--co-inphoto-font-family);
-  --co-inphoto-context-menu-box-shadow: 0 6px 20px rgba(23, 37, 51, 0.18);
-  --co-inphoto-context-menu-hover-background: #f0f2f5;
-  --co-inphoto-scene-context-menu-position-absolute: absolute;
-  --co-inphoto-scene-context-menu-position-relative: relative;
-  --co-inphoto-scene-context-menu-container-bottom: 70px;
-  --co-inphoto-scene-context-menu-center-x: 50%;
-  --co-inphoto-scene-context-menu-translate-center-x: translateX(-50%);
-  --co-inphoto-scene-context-menu-container-width: auto;
-  --co-inphoto-scene-context-menu-container-padding: 6px;
-  --co-inphoto-scene-context-menu-container-radius: 999px;
-  --co-inphoto-scene-context-menu-body-gap: 4px;
-  --co-inphoto-scene-context-menu-item-size: 40px;
-  --co-inphoto-scene-context-menu-item-padding-zero: 0;
-  --co-inphoto-scene-context-menu-item-radius: 50%;
-  --co-inphoto-scene-context-menu-item-transition: background 0.15s ease;
-  --co-inphoto-scene-context-menu-item-text-hidden-opacity: 0;
-  --co-inphoto-scene-context-menu-item-text-visible-opacity: 1;
-  --co-inphoto-scene-context-menu-item-text-top: calc(100% + 10px);
-  --co-inphoto-scene-context-menu-item-text-padding: 6px 12px;
-  --co-inphoto-scene-context-menu-item-text-radius: 8px;
-  --co-inphoto-scene-context-menu-item-text-transition: opacity 0.15s ease, visibility 0.15s ease;
-  --co-inphoto-scene-context-menu-item-text-arrow-bottom: 100%;
-  --co-inphoto-scene-context-menu-arrow-border: 5px solid transparent;
-}
+.co-scene-context-menu {
+  --co-inphoto-scene-context-menu-font-size-text: var(--co-inphoto-font-size-text);
+  --co-inphoto-scene-context-menu-font-family: var(--co-inphoto-font-family);
+  --co-inphoto-context-menu-box-shadow: 0 6px 20px rgba(23, 37, 51, 0.18);
+  --co-inphoto-context-menu-hover-background: #f0f2f5;
+  --co-inphoto-scene-context-menu-position-absolute: absolute;
+  --co-inphoto-scene-context-menu-position-relative: relative;
+  --co-inphoto-scene-context-menu-container-bottom: 70px;
+  --co-inphoto-scene-context-menu-center-x: 50%;
+  --co-inphoto-scene-context-menu-translate-center-x: translateX(-50%);
+  --co-inphoto-scene-context-menu-container-width: auto;
+  --co-inphoto-scene-context-menu-container-padding: 6px;
+  --co-inphoto-scene-context-menu-container-radius: 999px;
+  --co-inphoto-scene-context-menu-body-gap: 4px;
+  --co-inphoto-scene-context-menu-item-size: 40px;
+  --co-inphoto-scene-context-menu-item-padding-zero: 0;
+  --co-inphoto-scene-context-menu-item-radius: 50%;
+  --co-inphoto-scene-context-menu-item-transition: background 0.15s ease;
+  --co-inphoto-scene-context-menu-item-text-hidden-opacity: 0;
+  --co-inphoto-scene-context-menu-item-text-visible-opacity: 1;
+  --co-inphoto-scene-context-menu-item-text-top: calc(100% + 10px);
+  --co-inphoto-scene-context-menu-item-text-padding: 6px 12px;
+  --co-inphoto-scene-context-menu-item-text-radius: 8px;
+  --co-inphoto-scene-context-menu-item-text-transition: opacity 0.15s ease, visibility 0.15s ease;
+  --co-inphoto-scene-context-menu-item-text-arrow-bottom: 100%;
+  --co-inphoto-scene-context-menu-arrow-border: 5px solid transparent;
+}

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

@@ -1,57 +1,57 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-scene-context-menu-theme') {
-  .co-scene-context-menu {
-    font-family: var(--co-inphoto-scene-context-menu-font-family);
-    font-size: var(--co-inphoto-scene-context-menu-font-size-text);
-
-    .scene-context-menu-container {
-      background: var(--co-inphoto-background-white);
-      box-shadow: var(--co-inphoto-context-menu-box-shadow);
-      border-radius: var(--co-inphoto-scene-context-menu-container-radius);
-
-      .scene-context-menu-body {
-        .scene-context-menu-item {
-          border-radius: var(--co-inphoto-scene-context-menu-item-radius);
-          transition: var(--co-inphoto-scene-context-menu-item-transition);
-
-          .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 {
-            opacity: var(--co-inphoto-scene-context-menu-item-text-hidden-opacity);
-            background: var(--co-inphoto-background-white);
-            box-shadow: var(--co-inphoto-context-menu-box-shadow);
-            border-radius: var(--co-inphoto-scene-context-menu-item-text-radius);
-            transition: var(--co-inphoto-scene-context-menu-item-text-transition);
-            @include cfg.text();
-
-            &::before {
-              border: var(--co-inphoto-scene-context-menu-arrow-border);
-              border-bottom-color: var(--co-inphoto-background-white);
-            }
-          }
-
-          &:hover {
-            background: var(--co-inphoto-context-menu-hover-background);
-
-            .scene-context-menu-item-text {
-              opacity: var(--co-inphoto-scene-context-menu-item-text-visible-opacity);
-            }
-          }
-
-          &.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);
-            }
-          }
-        }
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-scene-context-menu-theme') {
+  .co-scene-context-menu {
+    font-family: var(--co-inphoto-scene-context-menu-font-family);
+    font-size: var(--co-inphoto-scene-context-menu-font-size-text);
+
+    .scene-context-menu-container {
+      background: var(--co-inphoto-background-white);
+      box-shadow: var(--co-inphoto-context-menu-box-shadow);
+      border-radius: var(--co-inphoto-scene-context-menu-container-radius);
+
+      .scene-context-menu-body {
+        .scene-context-menu-item {
+          border-radius: var(--co-inphoto-scene-context-menu-item-radius);
+          transition: var(--co-inphoto-scene-context-menu-item-transition);
+
+          .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 {
+            opacity: var(--co-inphoto-scene-context-menu-item-text-hidden-opacity);
+            background: var(--co-inphoto-background-white);
+            box-shadow: var(--co-inphoto-context-menu-box-shadow);
+            border-radius: var(--co-inphoto-scene-context-menu-item-text-radius);
+            transition: var(--co-inphoto-scene-context-menu-item-text-transition);
+            @include cfg.text();
+
+            &::before {
+              border: var(--co-inphoto-scene-context-menu-arrow-border);
+              border-bottom-color: var(--co-inphoto-background-white);
+            }
+          }
+
+          &:hover {
+            background: var(--co-inphoto-context-menu-hover-background);
+
+            .scene-context-menu-item-text {
+              opacity: var(--co-inphoto-scene-context-menu-item-text-visible-opacity);
+            }
+          }
+
+          &.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

@@ -1,51 +1,51 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-segment-inpaint-layout') {
-  .co-segment-inpaint {
-    .segment-inpaint-container {
-      width: var(--co-inphoto-segment-inpaint-full-size);
-      height: var(--co-inphoto-segment-inpaint-full-size);
-      padding: var(--co-inphoto-segment-inpaint-zero);
-      margin: var(--co-inphoto-segment-inpaint-zero);
-      position: var(--co-inphoto-segment-inpaint-position-relative);
-
-
-      .inpaint-container {
-        display: flex;
-
-        .inpaint-canvas-container {
-          width: var(--co-inphoto-left-container-width);
-        }
-
-        .inpaint-info {
-          width: var(--co-inphoto-right-container-width);
-
-          .inpaint-info-dialog-tile-group {
-            display: flex;
-            gap: var(--co-inphoto-segment-inpaint-tile-group-gap);
-
-            .co-step-tile {
-              flex: 1;
-
-              .button-container {
-                display: block;
-
-                .image-container {
-                  --co-inphoto-step-tile-image-size: var(--co-inphoto-segment-inpaint-tile-image-size);
-                }
-                .button-container-text-container {
-                  --co-inphoto-step-tile-button-container-padding: var(--co-inphoto-segment-inpaint-tile-container-padding);
-                }
-              }
-
-              &.tile-disabled {
-                pointer-events: none;
-                cursor: not-allowed;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-segment-inpaint-layout') {
+  .co-segment-inpaint {
+    .segment-inpaint-container {
+      width: var(--co-inphoto-segment-inpaint-full-size);
+      height: var(--co-inphoto-segment-inpaint-full-size);
+      padding: var(--co-inphoto-segment-inpaint-zero);
+      margin: var(--co-inphoto-segment-inpaint-zero);
+      position: var(--co-inphoto-segment-inpaint-position-relative);
+
+
+      .inpaint-container {
+        display: flex;
+
+        .inpaint-canvas-container {
+          width: var(--co-inphoto-left-container-width);
+        }
+
+        .inpaint-info {
+          width: var(--co-inphoto-right-container-width);
+
+          .inpaint-info-dialog-tile-group {
+            display: flex;
+            gap: var(--co-inphoto-segment-inpaint-tile-group-gap);
+
+            .co-step-tile {
+              flex: 1;
+
+              .button-container {
+                display: block;
+
+                .image-container {
+                  --co-inphoto-step-tile-image-size: var(--co-inphoto-segment-inpaint-tile-image-size);
+                }
+                .button-container-text-container {
+                  --co-inphoto-step-tile-button-container-padding: var(--co-inphoto-segment-inpaint-tile-container-padding);
+                }
+              }
+
+              &.tile-disabled {
+                pointer-events: none;
+                cursor: not-allowed;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -1,11 +1,11 @@
-.co-segment-inpaint {
-  --co-inphoto-segment-inpaint-font-size-text: var(--co-inphoto-font-size-text);
-  --co-inphoto-segment-inpaint-font-family: var(--co-inphoto-font-family);
-  --co-inphoto-segment-inpaint-full-size: 100%;
-  --co-inphoto-segment-inpaint-zero: 0;
-  --co-inphoto-segment-inpaint-position-relative: relative;
-  --co-inphoto-segment-inpaint-tile-group-gap: 10px;
-  --co-inphoto-segment-inpaint-tile-image-size: 100%;
-  --co-inphoto-segment-inpaint-tile-container-padding: 5px;
-  --co-inphoto-segment-inpaint-tile-active-border: 1px solid var(--co-inphoto-accent-color);
-}
+.co-segment-inpaint {
+  --co-inphoto-segment-inpaint-font-size-text: var(--co-inphoto-font-size-text);
+  --co-inphoto-segment-inpaint-font-family: var(--co-inphoto-font-family);
+  --co-inphoto-segment-inpaint-full-size: 100%;
+  --co-inphoto-segment-inpaint-zero: 0;
+  --co-inphoto-segment-inpaint-position-relative: relative;
+  --co-inphoto-segment-inpaint-tile-group-gap: 10px;
+  --co-inphoto-segment-inpaint-tile-image-size: 100%;
+  --co-inphoto-segment-inpaint-tile-container-padding: 5px;
+  --co-inphoto-segment-inpaint-tile-active-border: 1px solid var(--co-inphoto-accent-color);
+}