soneta-ui-style

2026-03-22 20:56:25 +01:00
parent ccaf27e569
commit 81b895cf2f
707 changed files with 33942 additions and 0 deletions
@@ -0,0 +1,96 @@
+@import "../common/PredefinedMixins.scss";
+@import "./partial.scss";
+@import "./Variables.scss";
+
+.editor-otp {
+  @include partial-row-center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  -webkit-tap-highlight-color: transparent;
+
+  .asterisk-content {
+    @include partial-row-center;
+    width: 60px;
+    height: 60px;
+    transform-style: preserve-3d;
+
+    input {
+      &:focus-visible {
+        @include focus();
+      }
+    }
+
+    .label {
+      visibility: hidden;
+    }
+
+    .asterisk-front,
+    .asterisk-back {
+      position: absolute;
+      width: 40px;
+      height: 40px;
+      border-radius: 8px;
+      box-sizing: border-box;
+      backface-visibility: hidden;
+    }
+
+    .asterisk-front {
+      position: absolute;
+      background-color: $input_bg;
+      color: $input_text_editor_fg;
+      border: $input_text_asteriks_border;
+      font-size: 18pt;
+      text-align: center;
+
+      &:disabled {
+        color: $input_disabled_fg;
+        text-shadow: $input_shadow_disabled;
+      }
+
+      &:focus {
+        color: $input_focused_fg;
+        background-color: $input_text_asteriks_focus_bg;
+        outline: none;
+      }
+    }
+
+    .asterisk-back {
+      background-color: $input_text_asteriks_bg;
+      color: $input_text_asteriks_color;
+      transform: rotateY(180deg);
+
+      &::before {
+        display: flex;
+        justify-content: center;
+        line-height: 50px;
+        font-size: 30pt;
+        font-family: monospace;
+        content: '*';
+      }
+    }
+  }
+
+  .asterisk-visible {
+    transform: rotateY(180deg);
+    transition: transform 0.5s;
+    transition-delay: 500ms;
+
+    .asterisk-back {
+      pointer-events: all;
+    }
+  }
+
+  .asterisk-hidden {
+    transform: none;
+    transition: none;
+    transition-delay: 250ms;
+
+    .asterisk-back {
+      pointer-events: none;
+    }
+  }
+
+}