viberoom 0.7.0 → 0.9.0

package/ui/theme.css

@@ -163,6 +163,7 @@
   --shadow: 0 2px 0 rgba(28, 27, 51, 0.04);
   --bevel: none;
   --shadow-room: 0px;
+  --bevel-pressed: none;
   --grad-canvas: radial-gradient(900px 520px at 100% 100%, rgba(91, 91, 240, 0.06), transparent 70%), radial-gradient(640px 380px at 0% 0%, rgba(47, 201, 126, 0.04), transparent 70%), linear-gradient(165deg, #fdfdff 0%, #f7f7fe 55%, #f0f1fd 100%);
   --canvas-pattern: radial-gradient(circle at 1px 1px, rgba(91, 91, 240, 0.13) 0.9px, transparent 1.6px);
   --canvas-pattern-size: 22px 22px;
@@ -171,6 +172,7 @@
   --sb-thumb: rgba(91, 91, 240, 0.22);
   --sb-thumb-hover: rgba(91, 91, 240, 0.45);
   --r-scale: 1;
+  --r-ctl-min: 0px;
   --r-xs: calc(8px * var(--r-scale));
   --r-sm: calc(12px * var(--r-scale));
   --r-md: calc(14px * var(--r-scale));
@@ -204,6 +206,7 @@
   --btn-hover-ink: #5b5bf0;
   --btn-on-primary: #ffffff;
   --btn-secondary-bg: #ffffff;
+  --btn-secondary-hover-bg: #ffffff;
   --btn-soft-bg: #eef0fb;
   --btn-soft-hover-bg: #e4e6fb;
   --btn-ghost-ink: #8080a3;
@@ -219,8 +222,8 @@
   --btn-spinner-track-quiet: #e4e6fb;
   --btn-spinner-head-quiet: #5b5bf0;
   --btn-disabled-opacity: 0.45;
-  --btn-dark-bg: rgba(255, 255, 255, 0.12);
-  --btn-dark-ink: #ffffff;
+  --btn-dark-bg: rgba(244, 242, 255, 0.12);
+  --btn-dark-ink: #f4f2ff;
   --btn-dark-hover-bg: #5b5bf0;
   --btn-warn-ink: #a07408;
   --btn-warn-hover-bg: #fff3cc;
@@ -234,6 +237,23 @@
   --btn-paper-bg: #ffffff;
   --btn-paper-ink: #5c5c80;
   --btn-paper-hover-bg: #f6f6fb;
+  --btn-border: 0;
+  --btn-case: none;
+  --btn-tracking: 0px;
+  --btn-link-underline: none;
+  --btn-ghost-bg: transparent;
+  --btn-shadow: none;
+  --btn-hover-shadow: none;
+  --btn-hover-lift: 0px;
+  --btn-active-shadow: none;
+  --btn-primary-active-shadow: var(--shadow-primary);
+  --btn-primary-hover-filter: brightness(1.05);
+  --btn-secondary-hover-shadow: var(--shadow-tile);
+  --btn-secondary-active-shadow: var(--shadow-tile);
+  --btn-danger-solid-hover-shadow: 0 8px 18px -8px rgba(224, 85, 74, 0.8);
+  --btn-danger-solid-active-shadow: 0 8px 18px -8px rgba(224, 85, 74, 0.8);
+  --btn-ok-shadow: none;
+  --btn-warn-shadow: none;
   --btn-h: 42px;
   --btn-h-sm: 34px;
   --btn-h-xs: 24px;
@@ -260,6 +280,14 @@
   --icon-button-inline-ink: #5c5c80;
   --icon-button-inline-on-bg: rgba(91, 91, 240, 0.1);
   --icon-button-inline-on-ink: #5b5bf0;
+  --icon-button-ghost-bg: transparent;
+  --icon-button-shadow: none;
+  --icon-button-hover-shadow: none;
+  --icon-button-hover-lift: 0px;
+  --icon-button-active-shadow: none;
+  --icon-button-primary-shadow: var(--shadow-primary);
+  --icon-button-primary-hover-shadow: var(--shadow-primary);
+  --icon-button-primary-active-shadow: var(--shadow-primary);
   --badge-bg: #eef0fb;
   --badge-ink: #5b5bf0;
   --badge-attention-bg: #fff3cc;
@@ -267,19 +295,33 @@
   --badge-muted-bg: #f1f1f8;
   --badge-muted-ink: #8080a3;
   --badge-outline-border: #e4e6fb;
+  --badge-outline-w: 2px;
   --badge-outline-ink: #8080a3;
   --badge-fs-xs: calc(10px * var(--fs-scale));
+  --badge-fill: 100%;
+  --badge-border: 0;
+  --badge-case: none;
+  --badge-tracking: 0px;
+  --badge-shadow: none;
   --chip-bg: #eef0fb;
   --chip-ink: #5b5bf0;
   --chip-hover-bg: #e4e6fb;
+  --chip-fill: 100%;
+  --chip-border: 0;
+  --chip-shadow: none;
+  --chip-hover-shadow: none;
+  --chip-hover-lift: 0px;
+  --chip-active-shadow: none;
+  --chip-active-drop: 0px;
   --file-card-bg: #26244a;
   --file-card-ink: #f4f2ff;
-  --file-card-head-bg: rgba(255, 255, 255, 0.06);
+  --file-card-head-bg: rgba(244, 242, 255, 0.06);
   --file-card-head-ink: #e8e6ff;
   --file-card-head-meta: #a9a5d8;
   --file-card-note-ink: #e0554a;
-  --file-card-image-body-bg: rgba(255, 255, 255, 0.04);
+  --file-card-image-body-bg: rgba(244, 242, 255, 0.04);
   --file-card-image-bg: #ffffff;
+  --file-card-shadow: var(--edge);
   --tool-call-ready-bg: #d9f7e8;
   --tool-call-ready-ink: #1d8f6a;
   --tool-call-error-bg: #fff0ee;
@@ -301,6 +343,7 @@
   --tool-fold-hover-ink: #5b5bf0;
   --tool-fold-failed-ink: #e0554a;
   --tool-fold-fs: calc(11px * var(--fs-scale));
+  --tool-fold-shadow: none;
   --ask-card-bg: #fff3cc;
   --ask-card-ink: #1c1b33;
   --ask-card-quiet-ink: #8080a3;
@@ -309,6 +352,7 @@
   --ask-card-kind-fs: calc(11px * var(--fs-scale));
   --ask-card-input-fs: calc(11px * var(--fs-scale));
   --ask-card-outcome-fs: calc(12px * var(--fs-scale));
+  --ask-card-shadow: none;
   --reply-note-ink: #8080a3;
   --reply-note-bg: #f6f6fb;
   --reply-note-attention-ink: #a07408;
@@ -321,6 +365,7 @@
   --look-card-border: #e4e6fb;
   --look-card-hover-border: #a9a9f5;
   --look-card-on-border: #5b5bf0;
+  --look-card-shadow: none;
   --choice-bg: #f6f6fb;
   --choice-ink: #5c5c80;
   --choice-hover-bg: #eef0fb;
@@ -328,6 +373,13 @@
   --choice-on-border: #5b5bf0;
   --choice-quiet-ink: #8080a3;
   --choice-h: 32px;
+  --choice-border: transparent;
+  --choice-shadow: none;
+  --choice-hover-shadow: none;
+  --choice-hover-lift: 0px;
+  --choice-active-shadow: none;
+  --choice-active-drop: 0px;
+  --choice-on-shadow: none;
   --control-knob: #ffffff;
   --control-knob-shadow: 0 1px 3px rgba(28, 27, 51, 0.25);
   --control-box-bg: #ffffff;
@@ -339,6 +391,10 @@
   --room-mark-grad-from: 72% 66%;
   --room-mark-grad-to: 68% 52%;
   --room-mark-emoji: 70% 93%;
+  --room-mark-shadow: none;
+  --room-mark-radius: calc(14px * var(--r-scale));
+  --room-mark-radius-lg: calc(16px * var(--r-scale));
+  --room-mark-radius-rail: calc(13px * var(--r-scale));
   --pop-bg: #ffffff;
   --pop-shadow: 0 10px 28px -12px rgba(28, 27, 51, 0.45);
   --pop-arrow-shadow: 3px 3px 4px -3px rgba(28, 27, 51, 0.25);
@@ -403,19 +459,19 @@
   --code-gutter-ink: #7c78ad;
   --code-line-mark-ink: #ffcf8f;
   --code-line-mark-bg: rgba(255, 207, 143, 0.16);
-  --code-head-bg: rgba(255, 255, 255, 0.06);
+  --code-head-bg: rgba(244, 242, 255, 0.06);
   --code-head-ink: #e8e6ff;
   --code-head-meta: #a9a5d8;
-  --code-head-btn-bg: rgba(255, 255, 255, 0.12);
-  --code-head-btn-ink: #ffffff;
-  --code-body-bg: rgba(255, 255, 255, 0.04);
+  --code-head-btn-bg: rgba(244, 242, 255, 0.12);
+  --code-head-btn-ink: #f4f2ff;
+  --code-body-bg: rgba(244, 242, 255, 0.04);
   --code-sb-track: rgba(0, 0, 0, 0.25);
-  --code-sb-thumb: rgba(255, 255, 255, 0.3);
-  --code-sb-thumb-hover: rgba(255, 255, 255, 0.5);
-  --code-sb-firefox: rgba(255, 255, 255, 0.35);
+  --code-sb-thumb: rgba(244, 242, 255, 0.3);
+  --code-sb-thumb-hover: rgba(244, 242, 255, 0.5);
+  --code-sb-firefox: rgba(244, 242, 255, 0.35);
   --code-find-hit-bg: #ffcf8f;
   --code-find-hit-ink: #26244a;
-  --syntax-comment: #8080a3;
+  --syntax-comment: #7c78ad;
   --syntax-punctuation: #c9c6ea;
   --syntax-keyword: #b9a7ff;
   --syntax-string: #8fe3bd;
@@ -444,6 +500,8 @@
   --face-avatar-default: #5b5bf0;
   --face-avatar-gloss: #ffffff;
   --face-avatar-label-ink: #ffffff;
+  --face-shadow: 0 0 0 0 transparent;
+  --face-card-shadow: var(--shadow-pop);
   --logo-tile-bg: #ffffff;
   --logo-tile-ink: #1f1d3a;
   --logo-tile-badge-bg: #ffffff;
@@ -454,11 +512,20 @@
   --logo-tile-sm: 30px;
   --logo-tile-md: 36px;
   --logo-tile-lg: 40px;
+  --logo-tile-shadow: var(--shadow-tile);
+  --logo-tile-radius: calc(12px * var(--r-scale));
+  --logo-tile-radius-sm: calc(10px * var(--r-scale));
+  --logo-tile-radius-lg: calc(13px * var(--r-scale));
+  --logo-tile-radius-badge: calc(6px * var(--r-scale));
   --unseen-line-ink: #be185d;
   --unseen-line-bg: #fff1f7;
   --unseen-line-line: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='8' viewBox='0 0 16 8'><path d='M0 4 Q4 0 8 4 T16 4' fill='none' stroke='%23be185d' stroke-width='1.6'/></svg>") repeat-x center / 16px 8px;
   --unseen-line-line-h: 8px;
   --unseen-line-line-opacity: 0.55;
+  --unseen-line-label-border: 0;
+  --unseen-line-label-case: none;
+  --unseen-line-label-tracking: 0px;
+  --unseen-line-label-shadow: none;
   --number-field-step-w: 22px;
   --number-field-step-ink: #8080a3;
   --number-field-step-hover-bg: #eef0fb;
@@ -471,12 +538,14 @@
   --adjust-row-back-hover-bg: #eef0fb;
   --row-button-size: 24px;
   --row-button-icon: 14px;
-  --row-button-radius: 8px;
+  --row-button-radius: calc(8px * var(--r-scale));
   --row-button-bg: #f1f1f8;
   --row-button-ink: #8080a3;
   --row-button-hover-bg: #5b5bf0;
   --row-button-hover-ink: #ffffff;
   --row-button-disabled-opacity: 0.4;
+  --row-button-shadow: none;
+  --row-button-active-shadow: none;
   --hub-row-ink: #8080a3;
   --hub-row-attention-ink: #a07408;
   --hub-row-error-ink: #e0554a;
@@ -484,6 +553,9 @@
   --hub-row-action-ink: #1d8f6a;
   --hub-row-action-hover-bg: #c4efdb;
   --hub-row-face-size: 18px;
+  --hub-row-prefix: none;
+  --hub-row-prefix-gap: 0px;
+  --hub-row-action-shadow: var(--edge);
   --hero-ink: #ffffff;
   --hero-bg: linear-gradient(120deg, #6a6af7 0%, #5b5bf0 45%, #8b5cf6 100%);
   --hero-shadow: 0 18px 40px -22px rgba(91, 91, 240, 0.9);
@@ -503,6 +575,11 @@
   --hero-spark: #ffd166;
   --feature-emoji-bg: rgba(255, 255, 255, 0.8);
   --feature-peach-bg: #ffe4d6;
+  --feature-shadow: var(--edge);
+  --composer-shadow: none;
+  --composer-bg: transparent;
+  --composer-radius: 0px;
+  --composer-pad-x: 0px;
   --step-bg: #ffffff;
   --step-num-ink: #ffffff;
   --tpl-shadow: 0 1px 3px rgba(28, 27, 51, 0.06);
@@ -538,6 +615,7 @@ pre { background: var(--code-bg); color: var(--code-ink); padding: 10px 12px; bo
 .hint { color: var(--faint); font-size: var(--fs-xs); font-weight: 600; line-height: 1.45; }
 .hint.accent { color: var(--primary); }
 .hint.warn { color: var(--warm-ink); }
+.hint.req { color: var(--rose-ink); font-weight: 700; }
 .hint.error, .error { color: var(--rose-ink); font-size: var(--fs-sm); font-weight: 700; }
 .eyebrow { font-size: calc(11px * var(--fs-scale)); text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); font-weight: 800; }
 .muted { color: var(--muted); }
@@ -743,6 +821,9 @@ code .open-link { color: inherit; }
 .dialog .actions .spacer { flex: 1; }
 .dialog.wide { width: 720px; }
 .dialog.narrow { width: 440px; }
+.dialog.narrow.three-way { width: 580px; }
+.dialog.narrow.three-way .actions { flex-wrap: nowrap; }
+.dialog.narrow.three-way .actions [data-ui="button"] { white-space: nowrap; }
 .toasts { position: fixed; right: 18px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; max-width: 400px; z-index: 50; pointer-events: none; }
 .toast { pointer-events: auto; background: var(--toast-bg); color: var(--toast-ink); padding: 10px 14px; border-radius: calc(12px * var(--r-scale)); font-size: var(--fs-sm); font-weight: 700; box-shadow: var(--shadow-pop); cursor: pointer; animation: slide-in-right var(--t-slow) var(--ease-pop); line-height: 1.4; display: flex; gap: 8px; align-items: flex-start; }
 .toast .i { width: 15px; height: 15px; margin-top: 1px; opacity: 0.85; }