ea3577a45e
- Bulk-load recent price points per item and render a sparkline in the items list (new LoadRecentPriceHistory query avoids N+1). - Add retro.css visual layer and refreshed login/items/layout styling. - Swap the logo from webp to avif. - Pin htmx/Chart.js/Tailwind/templ versions in the Makefile with vendor / tools / update-deps targets; README documents the dependency-bump flow and the hardened systemd deploy. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
477 lines
13 KiB
CSS
477 lines
13 KiB
CSS
/* Veola — Sega-blue palette and component overrides for Tailwind play CDN. */
|
|
|
|
:root {
|
|
--bg: #1a2b6d;
|
|
--surface: #1f3380;
|
|
--surface-2: #243a93;
|
|
--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; }
|
|
|
|
.v-card {
|
|
position: relative;
|
|
isolation: isolate;
|
|
background:
|
|
linear-gradient(180deg, rgba(36, 58, 147, 0.82), rgba(31, 51, 128, 0.82));
|
|
backdrop-filter: blur(10px) saturate(140%);
|
|
-webkit-backdrop-filter: blur(10px) saturate(140%);
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
box-shadow: var(--shadow);
|
|
transition:
|
|
transform 180ms ease,
|
|
box-shadow 180ms ease,
|
|
border-color 180ms ease;
|
|
}
|
|
.v-card::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
padding: 1px;
|
|
background: linear-gradient(135deg,
|
|
rgba(0, 164, 228, 0.65) 0%,
|
|
rgba(245, 196, 0, 0.30) 45%,
|
|
rgba(255, 255, 255, 0.04) 100%);
|
|
-webkit-mask:
|
|
linear-gradient(#000 0 0) content-box,
|
|
linear-gradient(#000 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask-composite: exclude;
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
}
|
|
.v-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow:
|
|
0 10px 28px rgba(0, 0, 80, 0.55),
|
|
0 0 0 1px rgba(0, 164, 228, 0.30);
|
|
}
|
|
|
|
.v-card-flat {
|
|
position: relative;
|
|
isolation: isolate;
|
|
background:
|
|
linear-gradient(180deg, rgba(36, 58, 147, 0.70), rgba(31, 51, 128, 0.70));
|
|
backdrop-filter: blur(8px) saturate(130%);
|
|
-webkit-backdrop-filter: blur(8px) saturate(130%);
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.v-divider { border-top: 1px solid var(--border); }
|
|
|
|
.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.75rem;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
color: var(--text-2);
|
|
padding: 0.6rem 0.75rem;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
table.v-table td {
|
|
padding: 0.7rem 0.75rem;
|
|
border-bottom: 1px solid var(--border);
|
|
vertical-align: middle;
|
|
}
|
|
table.v-table td { transition: background 140ms ease; }
|
|
table.v-table tr { transition: transform 140ms ease; }
|
|
table.v-table tbody tr:hover td { background: rgba(0, 164, 228, 0.08); }
|
|
|
|
.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; }
|
|
}
|