90a74967e0
- Item form: subtitle + fields grouped into hairline-separated labeled sections (Basics / Alerts / Schedule and marketplaces / Filters / Advanced) instead of one flat card; refined Advanced summary. - Preview: refined headings; best-price hero keeps a 160px product image; Other results becomes a thumbnailed feed via the shared components. - New .v-form-section-title helper.
621 lines
17 KiB
CSS
621 lines
17 KiB
CSS
/* Veola — Sega-blue palette and component overrides for Tailwind play CDN. */
|
|
|
|
:root {
|
|
--bg: #16224f;
|
|
--surface: #243a93;
|
|
--surface-2: #2c47ad;
|
|
--accent: #00a4e4;
|
|
--yellow: #f5c400;
|
|
--text: #ffffff;
|
|
--text-2: #a8c0f0;
|
|
--danger: #e84040;
|
|
--success: #00e4a4;
|
|
--border: rgba(255, 255, 255, 0.12);
|
|
--shadow: 0 4px 16px rgba(0, 0, 80, 0.4);
|
|
}
|
|
|
|
html, body {
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-family: 'Outfit', system-ui, sans-serif;
|
|
}
|
|
|
|
.font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
|
|
|
|
a { color: var(--accent); }
|
|
a:hover { text-decoration: underline; }
|
|
|
|
/* Solid surfaces, per the spec's "blue mode": no glassmorphism, no blur. A
|
|
clear value gap between --bg and --surface is what lifts cards off the
|
|
page; a 1px top highlight + soft blue shadow gives the cartridge edge. */
|
|
.v-card {
|
|
position: relative;
|
|
isolation: isolate;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 40, 0.25);
|
|
transition:
|
|
box-shadow 180ms ease,
|
|
border-color 180ms ease;
|
|
}
|
|
.v-card:hover {
|
|
border-color: rgba(255, 255, 255, 0.2);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 40, 0.3);
|
|
}
|
|
|
|
.v-card-flat {
|
|
position: relative;
|
|
isolation: isolate;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.v-divider { border-top: 1px solid var(--border); }
|
|
|
|
/* --- Console readout / page header system -------------------------------
|
|
The dashboard's signature: a mono "terminal" kicker over a heavy display
|
|
title, and the Spend/Saved pair styled as an arcade scoreboard readout.
|
|
JetBrains Mono is the machine voice here (labels, counts); Outfit carries
|
|
the title. */
|
|
|
|
.v-kicker {
|
|
font-family: 'JetBrains Mono', ui-monospace, monospace;
|
|
font-size: 0.72rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.22em;
|
|
text-transform: uppercase;
|
|
color: var(--accent);
|
|
}
|
|
.v-kicker .v-kicker-sep { color: var(--text-2); opacity: 0.6; }
|
|
.v-kicker .v-kicker-dim { color: var(--text-2); }
|
|
|
|
/* --- Refined header + metric system -------------------------------------
|
|
Calm and spacious: type and whitespace carry the page. No glow, no
|
|
uppercase-mono labels, no accent rules. Mono is reserved for the numbers
|
|
themselves; Outfit carries everything else. */
|
|
|
|
.v-page-title {
|
|
font-family: 'Outfit', system-ui, sans-serif;
|
|
font-size: 1.9rem;
|
|
font-weight: 600;
|
|
letter-spacing: -0.015em;
|
|
line-height: 1.1;
|
|
text-shadow: none;
|
|
}
|
|
.v-page-sub {
|
|
color: var(--text-2);
|
|
font-size: 0.95rem;
|
|
margin-top: 0.3rem;
|
|
}
|
|
|
|
/* Hero metric: a small quiet label over a large clean number. Presented in
|
|
open space with a hairline, not a boxed card. */
|
|
.v-metric-label {
|
|
color: var(--text-2);
|
|
font-size: 0.82rem;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
.v-metric-value {
|
|
font-family: 'JetBrains Mono', ui-monospace, monospace;
|
|
font-size: clamp(2rem, 3.8vw, 2.75rem);
|
|
font-weight: 600;
|
|
line-height: 1.05;
|
|
margin-top: 0.45rem;
|
|
}
|
|
.v-metric-value.v-price-deal { color: var(--success); }
|
|
.v-metric-sub {
|
|
color: var(--text-2);
|
|
font-size: 0.82rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
/* Secondary stat: smaller label/number pair for the supporting counts. */
|
|
.v-stat-label {
|
|
color: var(--text-2);
|
|
font-size: 0.78rem;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
.v-stat-value {
|
|
font-family: 'JetBrains Mono', ui-monospace, monospace;
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
margin-top: 0.3rem;
|
|
}
|
|
|
|
/* Understated section heading for list panels — sized to sit below the page
|
|
title, sentence case, no glow. */
|
|
.v-section-title {
|
|
font-family: 'Outfit', system-ui, sans-serif;
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0;
|
|
color: var(--text);
|
|
text-shadow: none;
|
|
}
|
|
|
|
/* Hairline used to separate open sections instead of boxing them. */
|
|
.v-rule {
|
|
border: 0;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
/* Small uppercase group label inside forms (item form sections). */
|
|
.v-form-section-title {
|
|
font-size: 0.74rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--text-2);
|
|
}
|
|
|
|
/* Quiet empty-state line. */
|
|
.v-empty {
|
|
color: var(--text-2);
|
|
font-size: 0.9rem;
|
|
padding: 0.4rem 0;
|
|
}
|
|
|
|
/* --- Product feed (thumbnails) ------------------------------------------
|
|
Listing thumbnails are what give the data life. A square cropped image,
|
|
the listing title as the line that earns its space, price on the right. */
|
|
.v-thumb {
|
|
width: 52px;
|
|
height: 52px;
|
|
flex: none;
|
|
border-radius: 8px;
|
|
object-fit: cover;
|
|
background: var(--surface-2);
|
|
border: 1px solid var(--border);
|
|
display: block;
|
|
}
|
|
.v-thumb-empty {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--text-2);
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
/* Compact variant for table rows. */
|
|
.v-thumb-sm { width: 40px; height: 40px; border-radius: 7px; }
|
|
.v-thumb-sm.v-thumb-empty { font-size: 0.9rem; }
|
|
|
|
.v-feed { display: block; }
|
|
.v-feed-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.85rem;
|
|
padding: 0.7rem 0;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
.v-feed-row:last-child { border-bottom: 0; }
|
|
.v-feed-name {
|
|
display: block;
|
|
font-weight: 500;
|
|
color: var(--text);
|
|
}
|
|
a.v-feed-name:hover { color: var(--accent); text-decoration: none; }
|
|
.v-feed-meta {
|
|
color: var(--text-2);
|
|
font-size: 0.8rem;
|
|
margin-top: 0.15rem;
|
|
}
|
|
.v-feed-price { flex: none; white-space: nowrap; }
|
|
|
|
.v-btn {
|
|
background: var(--accent);
|
|
color: white;
|
|
border-radius: 6px;
|
|
padding: 0.5rem 1rem;
|
|
font-weight: 600;
|
|
transition: filter 0.1s ease;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
}
|
|
.v-btn:hover { filter: brightness(1.1); }
|
|
.v-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
|
|
|
|
.v-btn-ghost {
|
|
background: transparent;
|
|
color: var(--text);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
padding: 0.5rem 1rem;
|
|
cursor: pointer;
|
|
}
|
|
.v-btn-ghost:hover { background: rgba(255,255,255,0.05); }
|
|
|
|
.v-btn-danger {
|
|
background: var(--danger);
|
|
color: white;
|
|
border-radius: 6px;
|
|
padding: 0.5rem 1rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.v-input, .v-select, .v-textarea {
|
|
background: rgba(0, 0, 0, 0.25);
|
|
color: var(--text);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
padding: 0.5rem 0.75rem;
|
|
width: 100%;
|
|
font-family: inherit;
|
|
}
|
|
.v-input:focus, .v-select:focus, .v-textarea:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 3px rgba(0, 164, 228, 0.25);
|
|
}
|
|
|
|
.v-label {
|
|
display: block;
|
|
color: var(--text-2);
|
|
font-size: 0.85rem;
|
|
margin-bottom: 0.3rem;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
.v-pill {
|
|
display: inline-block;
|
|
padding: 0.15rem 0.55rem;
|
|
border-radius: 999px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
.v-pill-active { background: var(--accent); color: white; }
|
|
.v-pill-paused { background: rgba(255,255,255,0.1); color: var(--text-2); }
|
|
.v-pill-error { background: var(--danger); color: white; }
|
|
|
|
.v-price { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 1.5rem; }
|
|
.v-price-target { color: var(--yellow); }
|
|
.v-price-deal { color: var(--success); }
|
|
|
|
.v-side-nav {
|
|
background: var(--surface);
|
|
border-right: 1px solid var(--border);
|
|
width: 220px;
|
|
min-height: 100vh;
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
|
|
.v-side-nav a {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
padding: 0.7rem 1rem;
|
|
color: var(--text-2);
|
|
text-decoration: none;
|
|
border-left: 3px solid transparent;
|
|
}
|
|
.v-side-nav a.active {
|
|
background: var(--surface-2);
|
|
border-left-color: var(--accent);
|
|
color: white;
|
|
}
|
|
.v-side-nav a:hover { color: white; }
|
|
|
|
/* The brand wordmark at the top of the sidebar is also an anchor (→ /), but
|
|
shouldn't pick up the active-item border-left / padding treatment that
|
|
the nav links get. Higher specificity overrides .v-side-nav a defaults. */
|
|
.v-side-nav a.v-side-brand {
|
|
border-left: 0;
|
|
color: var(--text);
|
|
text-decoration: none;
|
|
}
|
|
.v-side-nav a.v-side-brand:hover {
|
|
text-decoration: none;
|
|
filter: brightness(1.15);
|
|
}
|
|
|
|
.v-veola-portrait {
|
|
background: #f3ead8;
|
|
border-radius: 12px;
|
|
padding: 1rem;
|
|
border: 1px solid var(--border);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.v-veola-portrait img { display: block; max-width: 100%; height: auto; }
|
|
|
|
.v-badge {
|
|
display: inline-block;
|
|
padding: 0.2rem 0.55rem;
|
|
border-radius: 6px;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
}
|
|
.v-badge-low { background: var(--success); color: #053b2c; }
|
|
.v-badge-avg { background: var(--accent); color: white; }
|
|
.v-badge-target { background: var(--yellow); color: #2a2200; }
|
|
|
|
table.v-table { width: 100%; border-collapse: collapse; }
|
|
table.v-table th {
|
|
text-align: left;
|
|
font-size: 0.74rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.01em;
|
|
color: var(--text-2);
|
|
padding: 0.5rem 0.75rem 0.7rem;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
table.v-table td {
|
|
padding: 0.7rem 0.75rem;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
vertical-align: middle;
|
|
}
|
|
/* No zebra — hairline rows and a faint hover keep it calm but scannable. */
|
|
table.v-table td { transition: background 140ms ease; }
|
|
table.v-table tbody tr:last-child td { border-bottom: 0; }
|
|
table.v-table tbody tr:hover td { background: rgba(255, 255, 255, 0.04); }
|
|
|
|
.v-error-text { color: var(--danger); font-size: 0.85rem; }
|
|
.v-muted { color: var(--text-2); }
|
|
|
|
.v-flash {
|
|
background: rgba(0, 164, 228, 0.15);
|
|
border: 1px solid var(--accent);
|
|
border-radius: 6px;
|
|
padding: 0.6rem 0.9rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.v-flash-error {
|
|
background: rgba(232, 64, 64, 0.15);
|
|
border: 1px solid var(--danger);
|
|
border-radius: 6px;
|
|
padding: 0.6rem 0.9rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.v-spinner {
|
|
display: inline-block;
|
|
width: 14px; height: 14px;
|
|
border: 2px solid rgba(255,255,255,0.2);
|
|
border-top-color: var(--accent);
|
|
border-radius: 50%;
|
|
animation: v-spin 0.8s linear infinite;
|
|
}
|
|
@keyframes v-spin { to { transform: rotate(360deg); } }
|
|
|
|
/* htmx indicator: hidden by default, visible during in-flight requests.
|
|
Declared AFTER .v-spinner on purpose: an element carrying both classes
|
|
(e.g. <span class="v-spinner htmx-indicator">) must stay hidden until a
|
|
request is active, and equal-specificity rules resolve by source order. */
|
|
.htmx-indicator { display: none; }
|
|
.htmx-request .htmx-indicator,
|
|
.htmx-request.htmx-indicator { display: inline-flex; }
|
|
|
|
/* flair.js adds .v-just-swapped to any htmx swap target for ~400ms, giving
|
|
refreshed regions a soft fade-in instead of an abrupt content jump. */
|
|
@keyframes v-fade-in-up {
|
|
from { opacity: 0; transform: translateY(6px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.v-just-swapped { animation: v-fade-in-up 240ms ease-out; }
|
|
|
|
/* Ending-soon strip: one global "next auction to close" banner. flair.js
|
|
keeps the countdown live. Subtle by default; pulses red when inside the
|
|
last 5 minutes via .v-countdown-critical on the inner counter. */
|
|
.v-ending-strip {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 0.7rem 1rem;
|
|
border-radius: 8px;
|
|
background:
|
|
linear-gradient(90deg, rgba(245, 196, 0, 0.12), rgba(0, 164, 228, 0.08));
|
|
border: 1px solid rgba(245, 196, 0, 0.35);
|
|
}
|
|
.v-ending-label {
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
font-weight: 700;
|
|
color: var(--yellow);
|
|
white-space: nowrap;
|
|
}
|
|
.v-ending-title { flex: 1; min-width: 0; }
|
|
.v-ending-countdown {
|
|
font-size: 1.15rem;
|
|
font-weight: 700;
|
|
color: var(--yellow);
|
|
}
|
|
|
|
/* Per-row + strip countdown urgency states. Default reads as neutral muted
|
|
text so 6-day countdowns don't shout; urgency tints kick in only when
|
|
flair.js flips the class. */
|
|
.v-countdown { color: var(--text-2); }
|
|
.v-countdown-urgent { color: var(--yellow); font-weight: 600; }
|
|
.v-countdown-critical {
|
|
color: var(--danger);
|
|
font-weight: 700;
|
|
animation: v-pulse 1.2s ease-in-out infinite;
|
|
}
|
|
.v-countdown-ended { color: var(--text-2); font-style: italic; }
|
|
|
|
@keyframes v-pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.55; }
|
|
}
|
|
|
|
/* Sparkline cells in the items list. Color follows trend: green when the
|
|
latest price is meaningfully below the running average (good news for a
|
|
watchlist), red when it's risen, neutral otherwise. */
|
|
.v-sparkline { display: block; overflow: visible; }
|
|
.v-spark-down { color: var(--success); filter: drop-shadow(0 0 4px rgba(0, 228, 164, 0.45)); }
|
|
.v-spark-up { color: var(--danger); filter: drop-shadow(0 0 4px rgba(232, 64, 64, 0.40)); }
|
|
.v-spark-flat { color: var(--text-2); }
|
|
|
|
/* Trend arrow rendered next to Best Price. Same palette as the sparkline,
|
|
so a glance at the column reads consistently. */
|
|
.v-trend { font-size: 0.95rem; font-weight: 700; }
|
|
.v-trend-down { color: var(--success); }
|
|
.v-trend-up { color: var(--danger); }
|
|
.v-trend-flat { color: var(--text-2); }
|
|
|
|
/* Mascot "deal" moment: Veola appears next to an item's name only when the
|
|
current best price is at or below target. Small, animated, decorative —
|
|
purely a delight hit on top of the existing "Deal" badge. */
|
|
.v-deal-mascot {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 6px;
|
|
object-fit: cover;
|
|
background: #f3ead8;
|
|
padding: 1px;
|
|
box-shadow: 0 0 0 1px rgba(0, 228, 164, 0.6), 0 0 12px rgba(0, 228, 164, 0.45);
|
|
animation: v-deal-bob 2.4s ease-in-out infinite;
|
|
}
|
|
@keyframes v-deal-bob {
|
|
0%, 100% { transform: translateY(0) rotate(-2deg); }
|
|
50% { transform: translateY(-2px) rotate(2deg); }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.v-deal-mascot { animation: none; }
|
|
}
|
|
|
|
/* --- Login / Setup chrome -----------------------------------------------
|
|
The auth pages use the Bare layout (no sidebar) so the form has to carry
|
|
its own visual weight. The v-auth-* classes give it that: a glassy card
|
|
for the form, a softly-rotating conic halo behind the mascot, a
|
|
typeset wordmark + tagline, and the right column is left translucent so
|
|
the global aurora reaches edge-to-edge instead of stopping at a flat
|
|
blue block. */
|
|
|
|
.v-auth-wordmark {
|
|
font-family: 'Outfit', system-ui, sans-serif;
|
|
text-shadow: 0 2px 14px rgba(0, 164, 228, 0.30);
|
|
}
|
|
|
|
.v-auth-card {
|
|
/* Slightly heavier shadow + inner glow ring since the card stands
|
|
alone on the page with no sidebar context. */
|
|
box-shadow:
|
|
0 16px 44px rgba(0, 0, 80, 0.55),
|
|
0 0 0 1px rgba(0, 164, 228, 0.18),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
.v-auth-tagline {
|
|
margin-top: 1.5rem;
|
|
text-align: center;
|
|
letter-spacing: 0.34em;
|
|
font-size: 0.72rem;
|
|
text-transform: uppercase;
|
|
color: var(--text-2);
|
|
text-shadow: 0 0 12px rgba(0, 164, 228, 0.35);
|
|
}
|
|
|
|
.v-auth-portrait-col {
|
|
/* Translucent overlay instead of a solid block: a soft inward vignette
|
|
plus a faint diagonal sheen, keeping the column distinct from the
|
|
form side without hiding the aurora behind it. */
|
|
background:
|
|
radial-gradient(ellipse at center, rgba(0, 0, 0, 0.0) 30%, rgba(0, 0, 0, 0.25) 100%),
|
|
linear-gradient(135deg, rgba(0, 164, 228, 0.05) 0%, rgba(245, 196, 0, 0.04) 100%);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.v-auth-portrait-halo {
|
|
position: relative;
|
|
isolation: isolate;
|
|
width: min(420px, 80%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
animation: v-auth-portrait-float 7s ease-in-out infinite;
|
|
will-change: transform;
|
|
}
|
|
|
|
/* Rotating conic-gradient halo. Sits behind the portrait via z-index -1
|
|
inside the isolated stacking context, blurred so it reads as a glow
|
|
rather than a hard rainbow. */
|
|
.v-auth-portrait-halo::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -15%;
|
|
border-radius: 50%;
|
|
background: conic-gradient(
|
|
from 180deg,
|
|
rgba(0, 164, 228, 0.55),
|
|
rgba(245, 196, 0, 0.40),
|
|
rgba(232, 64, 64, 0.30),
|
|
rgba(0, 228, 164, 0.40),
|
|
rgba(0, 164, 228, 0.55)
|
|
);
|
|
filter: blur(50px);
|
|
z-index: -1;
|
|
animation: v-auth-portrait-spin 22s linear infinite;
|
|
will-change: transform;
|
|
}
|
|
|
|
/* A second, slower halo gives the impression of depth: two layers of
|
|
light rotating at different speeds keep the eye from locking onto a
|
|
single repeating pattern. */
|
|
.v-auth-portrait-halo::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -25%;
|
|
border-radius: 50%;
|
|
background: conic-gradient(
|
|
from 0deg,
|
|
rgba(0, 228, 164, 0.18),
|
|
rgba(0, 164, 228, 0.10),
|
|
rgba(245, 196, 0, 0.14),
|
|
rgba(0, 228, 164, 0.18)
|
|
);
|
|
filter: blur(70px);
|
|
z-index: -1;
|
|
animation: v-auth-portrait-spin 42s linear infinite reverse;
|
|
will-change: transform;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
@keyframes v-auth-portrait-spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes v-auth-portrait-float {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-6px); }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.v-auth-portrait-halo,
|
|
.v-auth-portrait-halo::before,
|
|
.v-auth-portrait-halo::after { animation: none; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.v-card { transition: none; }
|
|
.v-card:hover { transform: none; }
|
|
table.v-table td, table.v-table tr { transition: none; }
|
|
.v-just-swapped { animation: none; }
|
|
.v-countdown-critical { animation: none; }
|
|
}
|
|
|
|
/* Budget progress bar (dashboard). Styled cross-browser without inline styles
|
|
so it stays within the strict CSP (no style-src 'unsafe-inline'). */
|
|
.v-progress {
|
|
height: 0.6rem;
|
|
border-radius: 9999px;
|
|
overflow: hidden;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
border: 1px solid var(--border);
|
|
background: var(--surface-2);
|
|
}
|
|
.v-progress::-webkit-progress-bar { background: var(--surface-2); }
|
|
.v-progress::-webkit-progress-value { background: var(--accent); }
|
|
.v-progress::-moz-progress-bar { background: var(--accent); }
|