@colijnit/inphoto 300.1.7 → 300.1.9

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

@@ -1,26 +1,34 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-prepare-starting-image-layout') {
-  .co-prepare-starting-image {
-    .prepare-starting-image-container {
-      display: flex;
-      width: 100%;
-      height: 100%;
-      min-height: 100vh;
-
-
-      .prepare-image-preview {
-        width: var(--co-inphoto-left-container-width);
-        height: 100vh;
-        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: var(--co-inphoto-right-container-width);
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-prepare-starting-image-layout') {
+  .co-prepare-starting-image {
+    .prepare-starting-image-container {
+      display: flex;
+      align-items: flex-start;
+      width: var(--co-inphoto-prepare-starting-image-full-width);
+      min-height: var(--co-inphoto-prepare-starting-image-min-height);
+
+
+      .prepare-image-preview {
+        width: var(--co-inphoto-left-container-width);
+        margin: var(--co-inphoto-prepare-starting-image-preview-margin);
+        padding: var(--co-inphoto-prepare-starting-image-preview-padding);
+        display: inline-flex;
+
+        .prepare-image-view-container {
+          max-width: var(--co-inphoto-prepare-starting-image-preview-max-width);
+          img {
+            display: block;
+            max-width: var(--co-inphoto-prepare-starting-image-preview-max-width);
+            height: var(--co-inphoto-prepare-starting-image-image-height);
+          }
+        }
+      }
+
+      .prepare-starting-image-dialog {
+        width: var(--co-inphoto-prepare-starting-image-full-width);
+        max-width: var(--co-inphoto-right-container-width);
+      }
+    }
+  }
+}

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

@@ -1,4 +1,11 @@
-:root {
-  --co-inphoto-tile-next-background: #EFEEEE;
-  --co-inphoto-prepare-icon-background: #FFF7ED;
-}
+.co-prepare-starting-image {
+  --co-inphoto-prepare-starting-image-font-size-text: var(--co-inphoto-font-size-text);
+  --co-inphoto-prepare-starting-image-font-family: var(--co-inphoto-font-family);
+  --co-inphoto-prepare-icon-background: #FFF7ED;
+  --co-inphoto-prepare-starting-image-full-width: 100%;
+  --co-inphoto-prepare-starting-image-min-height: 100vh;
+  --co-inphoto-prepare-starting-image-preview-margin: 20px;
+  --co-inphoto-prepare-starting-image-preview-padding: 20px;
+  --co-inphoto-prepare-starting-image-preview-max-width: 100%;
+  --co-inphoto-prepare-starting-image-image-height: auto;
+}

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

@@ -2,7 +2,14 @@
 
 @include cfg.export-module('co-prepare-starting-image-theme') {
   .co-prepare-starting-image {
+    font-family: var(--co-inphoto-prepare-starting-image-font-family);
+    font-size: var(--co-inphoto-prepare-starting-image-font-size-text);
+
     .prepare-starting-image-container {
+      .prepare-image-preview {
+        box-shadow: var(--co-inphoto-container-box-shadow);
+      }
+
       .prepare-starting-image-dialog {
         .prepare-starting-dialog-header {
           .header-icon {

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

@@ -1,92 +1,74 @@
-@use '../../../style' as cfg;
-
-@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: 101;
-    }
-
-    .loader-container {
-      text-align: center;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      width: 375px;
-      padding: 25px;
-
-      .loading-icon {
-        width: 100px;
-        height: 100px;
-        display: flex;
-        justify-content: space-around;
-        align-items: center;
-        border-radius: 50%;
-        padding: 15px;
-      }
-
-      .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;
-        @include cfg.sub-header-text();
-
-        &::before {
-          content: '';
-          flex: none;
-          width: 1.5em;
-        }
-      }
-
-      .lt-dots {
-        display: inline-flex;
-        flex: none;
-        width: 1.5em;
-
-        span {
-          animation: drop 1.4s ease-in-out infinite;
-
-          &:nth-child(2) {
-            animation-delay: 0.15s;
-          }
-
-          &:nth-child(3) {
-            animation-delay: 0.30s;
-          }
-        }
-      }
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .loading-text-track {
-        transition: none;
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-process-loader-layout') {
+  .co-process-loader {
+    .loader-wrapper {
+      position: var(--co-inphoto-process-loader-position-fixed);
+      inset: var(--co-inphoto-process-loader-inset-zero);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: var(--co-inphoto-process-loader-wrapper-z-index);
+    }
+
+    .loader-container {
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: var(--co-inphoto-process-loader-container-width);
+      padding: var(--co-inphoto-process-loader-container-padding);
+
+      .loading-icon {
+        width: var(--co-inphoto-process-loader-icon-size);
+        height: var(--co-inphoto-process-loader-icon-size);
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        padding: var(--co-inphoto-process-loader-icon-padding);
+      }
+
+      .loading-text-carousel {
+        margin-top: var(--co-inphoto-process-loader-carousel-margin-top);
+        width: var(--co-inphoto-process-loader-carousel-width);
+        height: var(--co-inphoto-process-loader-text-item-height);
+        overflow: hidden;
+      }
+
+      .loading-text-track {
+        display: flex;
+        flex-direction: column;
+        transform: var(--co-inphoto-process-loader-track-transform);
+      }
+
+      .loading-text-item {
+        flex: 0 0 auto;
+        height: var(--co-inphoto-process-loader-text-item-height);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        white-space: normal;
+        @include cfg.sub-header-text();
+
+        &::before {
+          content: '';
+          flex: none;
+          width: var(--co-inphoto-process-loader-dots-size);
+        }
+      }
+
+      .lt-dots {
+        display: inline-flex;
+        flex: none;
+        width: var(--co-inphoto-process-loader-dots-size);
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .loading-text-track {
+        transition: var(--co-inphoto-process-loader-track-transition-none);
+      }
+    }
+  }
+}

package/lib/component/process-loader/style/_material-definition.scss

@@ -1,6 +1,24 @@
-:root {
-
-  --co-inphoto-loader-icon-size: 220px;
-  --co-inphoto-loader-pulse-duration: 2.4s;
-  --co-inphoto-loader-twinkle-duration: 1.6s;
-}
+.co-process-loader {
+  --co-inphoto-process-loader-font-size-text: var(--co-inphoto-font-size-text);
+  --co-inphoto-process-loader-font-family: var(--co-inphoto-font-family);
+  --co-inphoto-loader-pulse-duration: 2.4s;
+  --co-inphoto-loader-twinkle-duration: 1.6s;
+  --co-inphoto-process-loader-position-fixed: fixed;
+  --co-inphoto-process-loader-inset-zero: 0;
+  --co-inphoto-process-loader-wrapper-z-index: 101;
+  --co-inphoto-process-loader-container-width: 375px;
+  --co-inphoto-process-loader-container-padding: 25px;
+  --co-inphoto-process-loader-icon-size: 100px;
+  --co-inphoto-process-loader-icon-radius: 50%;
+  --co-inphoto-process-loader-icon-padding: 15px;
+  --co-inphoto-process-loader-carousel-margin-top: 30px;
+  --co-inphoto-process-loader-carousel-width: 450px;
+  --co-inphoto-process-loader-text-item-height: 60px;
+  --co-inphoto-process-loader-track-transform: translateY(calc(var(--active, 0) * var(--co-inphoto-process-loader-text-item-height) * -1));
+  --co-inphoto-process-loader-track-transition: transform 0.5s ease-in-out;
+  --co-inphoto-process-loader-track-transition-none: none;
+  --co-inphoto-process-loader-dots-size: 1.5em;
+  --co-inphoto-process-loader-dots-animation: drop 1.4s ease-in-out infinite;
+  --co-inphoto-process-loader-dots-delay-2: 0.15s;
+  --co-inphoto-process-loader-dots-delay-3: 0.30s;
+}

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

@@ -1,103 +1,128 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-process-loader-theme') {
-  .co-process-loader {
-
-    .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 {
-      background: var(--co-inphoto-header-icon-background);
-      animation: wrap-pulse 2.4s 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,66 +1,59 @@
-@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;
-      padding: 6px;
-      border-radius: 999px;
-
-      .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;
-          }
-
-          .scene-context-menu-item-text {
-            visibility: hidden;
-            opacity: 0;
-            white-space: nowrap;
-            position: absolute;
-            top: calc(100% + 10px);
-            left: 50%;
-            transform: translateX(-50%);
-            padding: 6px 12px;
-            border-radius: 8px;
-            transition: opacity 0.15s ease, visibility 0.15s ease;
-
-            &::before {
-              content: '';
-              position: absolute;
-              bottom: 100%;
-              left: 50%;
-              transform: translateX(-50%);
-            }
-          }
-
-          &:hover {
-            .scene-context-menu-item-text {
-              visibility: visible;
-              opacity: 1;
-            }
-          }
-        }
-      }
-    }
-  }
-}
+@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;
+            }
+          }
+        }
+      }
+    }
+  }
+}