fix(design-v2): visibility polish — stronger glass + themed nav chrome
CI / test (push) Has been cancelled
CI / test (push) Has been cancelled
First-cut v2 had transparent cards (alpha 0.55) that disappeared into the harbor backdrop, plus the v1 cream chrome leaked through. This pass: - Bumps --color-surface / surface-2 to 0.85 alpha across every dusk so cards stay readable on top of the photo - Darkens backdrop with a vignette + bumps --color-bg overlay to 0.70 - Adds [data-design=v2] chrome rules: top-nav/bottom-nav glass, theme swatches use dusks tokens, design-toggle cards become glass, install button keeps accent fg color, frame-card gets inset highlight - Brightens --color-text-muted in each dusk for legibility Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -10,15 +10,17 @@
|
||||
--brand-yellow: #f0d000;
|
||||
|
||||
// Default dusk = warm-craft → "amber dusk"
|
||||
// Glass opacity bumped to ~0.82 so cards stay readable on top of the
|
||||
// harbor photo (0.55 was too transparent — text disappeared into the bg).
|
||||
--color-bg: #1a0d05;
|
||||
--color-surface: rgba(50, 22, 8, 0.55);
|
||||
--color-surface-2: rgba(80, 38, 14, 0.55);
|
||||
--color-border: rgba(230, 180, 130, 0.20);
|
||||
--color-surface: rgba(36, 18, 6, 0.85);
|
||||
--color-surface-2: rgba(58, 28, 10, 0.85);
|
||||
--color-border: rgba(230, 180, 130, 0.32);
|
||||
--color-text: #faecd0;
|
||||
--color-text-muted: #c8a880;
|
||||
--color-text-muted: #d0b08c;
|
||||
--color-primary: #e89048;
|
||||
--color-primary-fg: #1a0d05;
|
||||
--color-secondary: rgba(80, 38, 14, 0.55);
|
||||
--color-secondary: rgba(58, 28, 10, 0.85);
|
||||
--color-secondary-fg:#faecd0;
|
||||
--color-destructive: #e08070;
|
||||
--color-destructive-fg: #ffffff;
|
||||
@@ -27,51 +29,51 @@
|
||||
// Per-theme dusk overrides — only the bg-tint + accent change between dusks
|
||||
&[data-theme="ocean-dusk"] {
|
||||
--color-bg: #06121f;
|
||||
--color-surface: rgba(10, 28, 48, 0.55);
|
||||
--color-surface-2: rgba(18, 42, 70, 0.55);
|
||||
--color-border: rgba(180, 210, 235, 0.18);
|
||||
--color-surface: rgba(10, 26, 44, 0.85);
|
||||
--color-surface-2: rgba(18, 40, 66, 0.85);
|
||||
--color-border: rgba(180, 210, 235, 0.30);
|
||||
--color-text: #f4eed8;
|
||||
--color-text-muted: #b0c4d8;
|
||||
--color-text-muted: #c0d0e0;
|
||||
--color-primary: #4e9fc8;
|
||||
--color-primary-fg: #06121f;
|
||||
}
|
||||
&[data-theme="sage-cream"] {
|
||||
--color-bg: #081208;
|
||||
--color-surface: rgba(18, 38, 22, 0.55);
|
||||
--color-surface-2: rgba(28, 60, 32, 0.55);
|
||||
--color-border: rgba(180, 220, 180, 0.18);
|
||||
--color-surface: rgba(14, 32, 18, 0.85);
|
||||
--color-surface-2: rgba(24, 50, 28, 0.85);
|
||||
--color-border: rgba(180, 220, 180, 0.28);
|
||||
--color-text: #ecf3e0;
|
||||
--color-text-muted: #a8c0a0;
|
||||
--color-text-muted: #b8d0b0;
|
||||
--color-primary: #88c068;
|
||||
--color-primary-fg: #081208;
|
||||
}
|
||||
&[data-theme="playful-pop"] {
|
||||
--color-bg: #1a060f;
|
||||
--color-surface: rgba(48, 14, 36, 0.55);
|
||||
--color-surface-2: rgba(72, 22, 54, 0.55);
|
||||
--color-border: rgba(230, 180, 200, 0.20);
|
||||
--color-surface: rgba(40, 12, 30, 0.85);
|
||||
--color-surface-2: rgba(60, 20, 48, 0.85);
|
||||
--color-border: rgba(230, 180, 200, 0.30);
|
||||
--color-text: #f8e8ec;
|
||||
--color-text-muted: #d0a0b8;
|
||||
--color-text-muted: #d8b0c0;
|
||||
--color-primary: #d878a0;
|
||||
--color-primary-fg: #1a060f;
|
||||
}
|
||||
&[data-theme="dusty-mauve"] {
|
||||
--color-bg: #100618;
|
||||
--color-surface: rgba(36, 14, 50, 0.55);
|
||||
--color-surface-2: rgba(54, 22, 74, 0.55);
|
||||
--color-border: rgba(210, 190, 230, 0.18);
|
||||
--color-surface: rgba(30, 12, 42, 0.85);
|
||||
--color-surface-2: rgba(46, 20, 64, 0.85);
|
||||
--color-border: rgba(210, 190, 230, 0.28);
|
||||
--color-text: #f0e8f8;
|
||||
--color-text-muted: #c0b0d0;
|
||||
--color-text-muted: #c8b8d8;
|
||||
--color-primary: #b890d8;
|
||||
--color-primary-fg: #100618;
|
||||
}
|
||||
&[data-theme="honey-slate"] {
|
||||
--color-bg: #18120a;
|
||||
--color-surface: rgba(42, 32, 12, 0.55);
|
||||
--color-surface-2: rgba(62, 50, 22, 0.55);
|
||||
--color-border: rgba(232, 200, 130, 0.22);
|
||||
--color-surface: rgba(36, 28, 10, 0.85);
|
||||
--color-surface-2: rgba(54, 42, 18, 0.85);
|
||||
--color-border: rgba(232, 200, 130, 0.32);
|
||||
--color-text: #faf0d8;
|
||||
--color-text-muted: #d0b888;
|
||||
--color-text-muted: #d8c098;
|
||||
--color-primary: #e8c050;
|
||||
--color-primary-fg: #18120a;
|
||||
}
|
||||
@@ -85,33 +87,128 @@
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: url('/build/assets/harbor.jpg') center/cover no-repeat;
|
||||
filter: brightness(0.55) saturate(0.9);
|
||||
filter: brightness(0.42) saturate(0.85);
|
||||
z-index: -3;
|
||||
}
|
||||
body::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: var(--color-bg);
|
||||
opacity: 0.55;
|
||||
background:
|
||||
radial-gradient(ellipse 80% 70% at 50% 50%, transparent 0%, rgba(0,0,0,0.45) 100%),
|
||||
var(--color-bg);
|
||||
opacity: 0.70;
|
||||
mix-blend-mode: multiply;
|
||||
z-index: -2;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// ─── Top nav — stronger glass so text is readable ─────────────────────
|
||||
.top-nav {
|
||||
background: color-mix(in srgb, var(--color-bg) 70%, transparent);
|
||||
backdrop-filter: saturate(160%) blur(20px);
|
||||
-webkit-backdrop-filter: saturate(160%) blur(20px);
|
||||
border-bottom-color: var(--color-border);
|
||||
|
||||
&__wordmark { color: var(--color-text); }
|
||||
&__tab {
|
||||
color: var(--color-text-muted);
|
||||
&:hover { background: var(--color-surface); color: var(--color-text); }
|
||||
&--active {
|
||||
background: var(--color-surface-2);
|
||||
color: var(--brand-yellow);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Bottom nav — same treatment for mobile/tablet ───────────────────
|
||||
.bottom-nav {
|
||||
background: color-mix(in srgb, var(--color-bg) 78%, transparent);
|
||||
backdrop-filter: saturate(160%) blur(20px);
|
||||
-webkit-backdrop-filter: saturate(160%) blur(20px);
|
||||
border-top-color: var(--color-border);
|
||||
}
|
||||
|
||||
// ─── Theme swatches — show v2 dusks instead of v1 cream variants ─────
|
||||
// Each swatch's --swatch-bg / --swatch-primary / --swatch-text are set
|
||||
// inline from `THEMES`. In v2 mode, override them so the preview reflects
|
||||
// what the user would actually see when in v2.
|
||||
.theme-swatch {
|
||||
--swatch-bg: var(--color-surface);
|
||||
background: var(--color-surface);
|
||||
border-color: var(--color-border);
|
||||
|
||||
&--active {
|
||||
border-color: var(--brand-yellow);
|
||||
}
|
||||
|
||||
&__bar, &__dot {
|
||||
background: var(--color-primary);
|
||||
}
|
||||
&__label { color: var(--color-text); }
|
||||
}
|
||||
// For each theme-id, give the swatch a tinted preview that matches the dusk
|
||||
&[data-theme="warm-craft"] .theme-swatch[aria-label*="Warm Craft" i],
|
||||
&[data-theme="ocean-dusk"] .theme-swatch[aria-label*="Ocean Dusk" i],
|
||||
&[data-theme="sage-cream"] .theme-swatch[aria-label*="Sage" i],
|
||||
&[data-theme="dusty-mauve"] .theme-swatch[aria-label*="Dusty" i],
|
||||
&[data-theme="playful-pop"] .theme-swatch[aria-label*="Playful" i],
|
||||
&[data-theme="honey-slate"] .theme-swatch[aria-label*="Honey" i] {
|
||||
background: var(--color-surface-2);
|
||||
}
|
||||
|
||||
// ─── Buttons — primary stays accent-coloured; secondary becomes glass ──
|
||||
// The .settings__install button is the main primary action; keep it
|
||||
// accent-coloured so it's clearly tappable. But its text-color was hard
|
||||
// to read on the bright orange — force light text on accent.
|
||||
.settings__install {
|
||||
color: var(--color-primary-fg);
|
||||
}
|
||||
|
||||
// The design toggle cards in Settings should look like glass cards, not
|
||||
// the v1 cream rectangles. (Selectors mirror the toggle markup.)
|
||||
.design-toggle__opt {
|
||||
background: var(--color-surface);
|
||||
border-color: var(--color-border);
|
||||
color: var(--color-text);
|
||||
|
||||
&:hover { border-color: var(--brand-yellow); }
|
||||
&--active {
|
||||
border-color: var(--brand-yellow);
|
||||
background: var(--color-surface-2);
|
||||
}
|
||||
}
|
||||
.design-toggle__sub { color: var(--color-text-muted); }
|
||||
|
||||
// ─── Frame card (Home) — let the glass + harbor backdrop show through ──
|
||||
// The frame card uses --color-surface as its bg already, which is now
|
||||
// semi-translucent. Add a subtle inset highlight + outer glow for depth.
|
||||
.frame-card {
|
||||
box-shadow:
|
||||
0 1px 0 color-mix(in srgb, var(--color-text) 8%, transparent) inset,
|
||||
0 24px 48px -16px rgba(0,0,0,0.55);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
// Settings list rows / dividers
|
||||
.settings__row,
|
||||
.settings__action-link {
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
.settings__row-label { color: var(--color-text-muted); }
|
||||
.settings__row-value,
|
||||
.settings__action-link { color: var(--color-text); }
|
||||
.settings__logout { color: var(--color-destructive); }
|
||||
|
||||
// Frosted-glass surfaces — anywhere v1 used --color-surface as a solid bg
|
||||
// becomes a backdrop-blurred semi-translucent panel.
|
||||
// (The v1 components don't change their structure; they just inherit
|
||||
// the new token values + glass effect via this overlay.)
|
||||
.frame-card,
|
||||
.library__tile,
|
||||
.settings__section-card,
|
||||
.home-view__empty-card {
|
||||
.home-view__empty-card,
|
||||
.design-toggle__opt,
|
||||
.theme-swatch {
|
||||
backdrop-filter: saturate(160%) blur(20px);
|
||||
-webkit-backdrop-filter: saturate(160%) blur(20px);
|
||||
}
|
||||
|
||||
// The yellow V in the wordmark needs to survive even when the V is
|
||||
// technically part of the brand glyph (no Vue change required — handled
|
||||
// by tokens).
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -16,9 +16,9 @@
|
||||
<meta name="mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
|
||||
<meta name="apple-mobile-web-app-title" content="WeVisto" />
|
||||
<script type="module" crossorigin src="/build/assets/index-C81kpUpa.js"></script>
|
||||
<script type="module" crossorigin src="/build/assets/index-nsK34hVO.js"></script>
|
||||
<link rel="modulepreload" crossorigin href="/build/assets/_plugin-vue_export-helper-BNDVmFr7.js">
|
||||
<link rel="stylesheet" crossorigin href="/build/assets/index-_dOZGklt.css">
|
||||
<link rel="stylesheet" crossorigin href="/build/assets/index-BQ5oGTyF.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
Reference in New Issue
Block a user