bolyai/CIS490
3
0
Fork 0
Code Issues 5 Pull requests Projects 1 Releases Packages Wiki Activity Actions

training/dashboard: bilateral fade on the metric-stack backdrop

Browse source 
Backdrop card was a sharp rectangle whose right edge butted hard
against the prose column's left feather, producing a visible
seam where the two layers met. Replaced the solid background
with a horizontal linear-gradient that fades at both edges:

  0%   → transparent       (left edge dissolves into bg)
  8%   → full backdrop     (card body begins)
  78%  → full backdrop     (card body ends)
  100% → transparent       (right edge dissolves into bg)

The right fade is wider than the left because the right edge
overlaps the prose column's feathered start; double-feathering
that interface gives a continuous metric-card → bg → prose-card
transition with no rectangles meeting.

Border-radius removed — was hidden by the feather anyway.
This commit is contained in:
Max Gorog 2026-05-08 00:30:49 -05:00
parent b41bd75209
commit 698a3c96bc
2 changed files with 15 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
training/dashboard/static/dashboard.css
View file

@ -509,17 +509,26 @@ html, body { overflow-anchor: none; }
/* ─── Metric stack — calculated, viewport-relative sizing ──────────── */
/* Wide-by-default. Inside a stage-view the right padding already
reserves room for prose, so width:100% means "use everything left
of the prose column." A semi-opaque backdrop occludes the moving
bg behind the content; strength controlled by --content-backdrop
from the theme panel slider. */
of the prose column." Backdrop is a horizontal gradient that
fades at both edges so the card dissolves into the bg instead
of meeting it with a hard rectangle. The right fade is wider
(78%→100%) than the left (0%→8%) because the right edge meets
the prose column's feathered left edge — letting the two
feathers overlap produces a continuous transition from
metric-card → bg → prose-card. */
.metric-stack {
text-align: left;
padding: clamp(20px, 2.5vh, 36px) clamp(40px, 5vw, 88px);
width: 100%; max-width: none;
display: flex; flex-direction: column;
gap: clamp(10px, 1.4vh, 22px);
background: rgba(var(--bg-rgb), var(--content-backdrop, 0.30));
border-radius: 8px;
background: linear-gradient(
to right,
rgba(var(--bg-rgb), 0) 0%,
rgba(var(--bg-rgb), var(--content-backdrop, 0.30)) 8%,
rgba(var(--bg-rgb), var(--content-backdrop, 0.30)) 78%,
rgba(var(--bg-rgb), 0) 100%
);
}
.metric-stack-wide {
/* Slightly less right padding than other stages so the table can

2
training/dashboard/static/index.html
View file

@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CIS490 — live</title>
<link rel="stylesheet" href="/static/dashboard.css?v=7494068d">
<link rel="stylesheet" href="/static/dashboard.css?v=a3875c50">
</head>
<body>
<!-- SVG filter defs for the lava-lamp goo effect. Width/height 0