refactor: slice web app wip

2026-05-11 08:31:07 +03:00
parent 763c4ad1bb
commit 7d8bbbc904
19 changed files with 1619 additions and 1271 deletions
@@ -1,4 +1,138 @@
-/*
-  Dialog-specific selectors are kept importable as a separate bundle boundary.
-  Existing rules remain in webapp.css to avoid visual churn during componentization.
-*/
+/* Modal/dialog primitives — bottom-sheet style cards used across the webapp. */
+
+.dialog {
+  position: fixed;
+  inset: 0;
+  z-index: 70;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  padding:
+    16px
+    var(--screen-gutter)
+    calc(var(--bottom-nav-height) + var(--bottom-nav-offset) + 16px + env(safe-area-inset-bottom));
+}
+
+.dialog-backdrop {
+  position: absolute;
+  inset: 0;
+  border: 0;
+  background: rgba(2, 7, 11, 0.54);
+  backdrop-filter: blur(10px);
+  animation: fade-in 0.18s ease-out both;
+}
+
+.dialog-card {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  width: min(100%, 420px);
+  gap: 12px;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius);
+  background: var(--panel);
+  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5);
+  padding: 14px;
+  transform-origin: center;
+  animation: modal-enter 0.2s ease-out both;
+}
+
+.dialog-head {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 42px;
+  align-items: start;
+  gap: 10px;
+}
+
+.dialog-head h2 {
+  margin: 0;
+  color: var(--text);
+  font-size: 18px;
+  line-height: 1.16;
+  font-weight: 850;
+}
+
+.dialog-head p {
+  margin: 4px 0 0;
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.3;
+}
+
+.payment-dialog-card {
+  max-height: 100%;
+  overflow-y: auto;
+}
+
+.link-email-dialog-card {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  height: min(100%, 560px);
+  max-height: 100%;
+  overflow: hidden;
+}
+
+.link-email-dialog-card .dialog-head {
+  position: relative;
+  z-index: 2;
+}
+
+.link-email-dialog-card .payment-dialog-body {
+  min-height: 0;
+}
+
+.link-email-code-layout {
+  display: grid;
+  min-height: 0;
+  height: 100%;
+  grid-template-rows: minmax(0, 1fr) auto;
+}
+
+.link-email-code-center {
+  align-self: center;
+}
+
+.link-email-resend {
+  align-self: end;
+}
+
+.payment-dialog-body {
+  display: grid;
+  gap: 10px;
+}
+
+.payment-divider {
+  height: 1px;
+  width: 100%;
+  background: var(--border);
+}
+
+.payment-submit-button {
+  border-color: color-mix(in srgb, var(--accent) 72%, transparent);
+  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 94%, white), var(--accent));
+  color: #031009;
+  box-shadow:
+    0 16px 38px color-mix(in srgb, var(--accent) 28%, transparent),
+    0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent),
+    0 0 26px color-mix(in srgb, var(--accent) 42%, transparent);
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes modal-enter {
+  from {
+    opacity: 0;
+    transform: translateY(10px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}