Items-list sparklines, retro CSS, pinned tooling, deploy docs
- 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>
This commit is contained in:
prosolis
@@ -176,6 +176,19 @@ a:hover { text-decoration: underline; }
|
||||
}
|
||||
.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;
|
||||
@@ -304,6 +317,156 @@ table.v-table tbody tr:hover td { background: rgba(0, 164, 228, 0.08); }
|
||||
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; }
|
||||
|
||||
Reference in New Issue
Block a user