Desktop portfolio v2: greeting with what is moving, store-style app cards (rendered screenshots or the icon on its tint), two-store release pipeline, crash sparkline, one next-step button; What changed feed and Fix first queue; Cards / Table switch keeps the old table
This commit is contained in:
parent
5e043fe17c
commit
27db41c3f0
4 changed files with 519 additions and 35 deletions
|
|
@ -1019,3 +1019,94 @@ button.ck.ck-pick[aria-checked="true"] { border-color: var(--accent-solid); box-
|
|||
.ai-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 8px; }
|
||||
.ai-panel .row { display: flex; gap: 8px; flex-wrap: wrap; }
|
||||
.ai-panel .ai-diff { max-height: 320px; }
|
||||
|
||||
/* Portfolio home (screens/Portfolio.tsx, .pf2): greeting, KPI row, store-listing app cards with the release track per
|
||||
store, then "What changed" and "Fix first". Cards are tinted by the app icon's hue (--tint-h, set per card). */
|
||||
:root { --pf-tint-s: 78%; --pf-tint-l: 62%; --pf-tint-a: .16; --pf-tint-a2: .07; --pf-seg: #e6e9f0; --pf-shot-l: 93%; --pf-shot-s: 60%; }
|
||||
:root[data-theme="dark"] { --pf-tint-l: 58%; --pf-tint-a: .26; --pf-tint-a2: .10; --pf-seg: #232e42; --pf-shot-l: 15%; --pf-shot-s: 45%; }
|
||||
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pf-tint-l: 58%; --pf-tint-a: .26; --pf-tint-a2: .10; --pf-seg: #232e42; --pf-shot-l: 15%; --pf-shot-s: 45%; } }
|
||||
.pf2 { gap: 24px; }
|
||||
.pf2 .pf-hero h1.pf-headline { font-size: 30px; line-height: 1.15; letter-spacing: -.025em; font-weight: 780; margin: 2px 0 6px; }
|
||||
.pf2 .pf-greet { margin: 0; font-size: var(--t-section); font-weight: 600; color: var(--accent); }
|
||||
.pf2 .kpis .kpi { padding: 18px 20px; border-radius: 16px; }
|
||||
.pf2 .kpis .kpi .k-value { font-size: 30px; }
|
||||
.pf-group { display: grid; gap: 12px; }
|
||||
.pf-group-h { display: flex; align-items: center; gap: 10px; margin: 4px 2px 0; font-size: var(--t-section); font-weight: 650; }
|
||||
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 20px; }
|
||||
.pf-card {
|
||||
--tint: hsl(var(--tint-h) var(--pf-tint-s) var(--pf-tint-l));
|
||||
--shot-bg: hsl(var(--tint-h) var(--pf-shot-s) var(--pf-shot-l));
|
||||
position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: 18px; overflow: hidden;
|
||||
background:
|
||||
radial-gradient(120% 70% at 100% 0%, hsl(var(--tint-h) var(--pf-tint-s) var(--pf-tint-l) / var(--pf-tint-a)), transparent 60%),
|
||||
linear-gradient(180deg, hsl(var(--tint-h) var(--pf-tint-s) var(--pf-tint-l) / var(--pf-tint-a2)), transparent 50%), var(--surface);
|
||||
border: 1px solid color-mix(in srgb, var(--tint) 22%, var(--line));
|
||||
box-shadow: var(--shadow-2);
|
||||
transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), border-color var(--speed) var(--ease);
|
||||
}
|
||||
.pf-card:hover, .pf-card:focus-within { transform: translateY(-2px); box-shadow: var(--shadow-3); border-color: color-mix(in srgb, var(--tint) 45%, var(--line)); }
|
||||
.pf-shots { display: flex; gap: 10px; height: 200px; padding: 14px 14px 0; overflow: hidden; background: linear-gradient(160deg, hsl(var(--tint-h) var(--pf-tint-s) var(--pf-tint-l) / .35), var(--shot-bg) 70%); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
|
||||
.pf-shots img { height: 100%; width: auto; aspect-ratio: 9 / 19.5; object-fit: cover; object-position: top; border-radius: 12px 12px 0 0; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45); flex: none; transition: transform var(--speed) var(--ease); }
|
||||
.pf-card:hover .pf-shots img { transform: translateY(-3px); }
|
||||
.pf-shots.empty { align-items: center; justify-content: center; padding: 0; -webkit-mask-image: none; mask-image: none;
|
||||
background: radial-gradient(60% 90% at 50% 60%, hsl(var(--tint-h) var(--pf-tint-s) var(--pf-tint-l) / .45), transparent 70%), linear-gradient(160deg, hsl(var(--tint-h) var(--pf-tint-s) var(--pf-tint-l) / .22), var(--shot-bg)); }
|
||||
.pf-shots .pf-hero-icon { width: 96px; height: 96px; border-radius: 24px; font-size: 30px; box-shadow: 0 18px 40px -14px hsl(var(--tint-h) 70% 30% / .7), inset 0 0 0 1px rgba(255, 255, 255, .12); transition: transform var(--speed) var(--ease); }
|
||||
.pf-card:hover .pf-hero-icon { transform: scale(1.04) rotate(-2deg); }
|
||||
.pf-body { display: grid; gap: 16px; padding: 18px 20px; align-content: start; }
|
||||
.pf-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
|
||||
.pf-head .pf-icon { width: 56px; height: 56px; border-radius: 14px; font-size: 18px; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .35); }
|
||||
.pf-title { display: grid; gap: 2px; min-width: 0; flex: 1; }
|
||||
.pf-name { all: unset; cursor: pointer; font-size: 18px; font-weight: 720; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 4px; }
|
||||
.pf-name:hover { color: var(--accent); }
|
||||
.pf-name:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
|
||||
.pf-id { font-size: var(--t-meta); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 6px; align-items: center; }
|
||||
.pf-next { display: grid; justify-items: end; flex: none; }
|
||||
.pf-next-l { font-size: var(--t-micro); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
|
||||
.pf-next-v { font-size: 22px; font-weight: 760; letter-spacing: -.02em; color: var(--ink); }
|
||||
.pf-pipe { display: grid; gap: 7px; }
|
||||
.pf-stages, .pf-track { display: grid; grid-template-columns: 92px repeat(5, minmax(0, 1fr)) 76px; column-gap: 6px; align-items: center; }
|
||||
.pf-stages span { font-size: var(--t-micro); color: var(--muted); text-align: center; }
|
||||
.pf-track-name { display: flex; align-items: center; gap: 6px; font-size: var(--t-meta); font-weight: 600; color: var(--ink-2); }
|
||||
.pf-segs { display: contents; }
|
||||
.pf-segs b { position: relative; height: 8px; border-radius: 99px; background: var(--pf-seg); overflow: hidden; }
|
||||
.pf-segs b.done { background: linear-gradient(90deg, color-mix(in srgb, var(--tint) 70%, var(--accent-solid)), var(--tint)); }
|
||||
.pf-segs b.at { background: linear-gradient(90deg, var(--tint), color-mix(in srgb, var(--tint) 60%, #fff)); box-shadow: 0 0 0 3px hsl(var(--tint-h) var(--pf-tint-s) var(--pf-tint-l) / .22); overflow: visible; }
|
||||
.pf-segs b.at.t-warn { background: var(--warn-solid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn-solid) 25%, transparent); }
|
||||
.pf-segs b.at.t-bad { background: var(--bad-solid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad-solid) 25%, transparent); }
|
||||
.pf-segs b.at:has(i) { background: var(--pf-seg); }
|
||||
.pf-segs b i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--tint); }
|
||||
.pf-track-v { font-size: var(--t-meta); color: var(--ink-2); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.pf-track.off .pf-track-name, .pf-track.off .pf-track-v { color: var(--faint); }
|
||||
.pf-foot { display: flex; align-items: center; gap: 14px; justify-content: space-between; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--tint) 14%, var(--line)); }
|
||||
.pf-health { display: flex; align-items: center; gap: 12px; min-width: 0; }
|
||||
.pf-spark { display: block; width: 120px; height: 34px; }
|
||||
.pf-health-v { display: grid; line-height: 1.2; }
|
||||
.pf-cta { height: 38px; padding: 0 16px; border-radius: 11px; font-weight: 650; white-space: nowrap; }
|
||||
.pf-cols { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: start; }
|
||||
.pf-side { display: grid; gap: 20px; }
|
||||
.pf-feed { list-style: none; margin: 0; padding: 6px; display: grid; }
|
||||
.pf-ev { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 32px 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; cursor: pointer; transition: background var(--speed) var(--ease); }
|
||||
.pf-ev:hover { background: var(--hover); }
|
||||
.pf-ev:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
|
||||
.pf-ev-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; }
|
||||
.pf-ev-ic svg { width: 16px; height: 16px; }
|
||||
.pf-ev .pf-ev-app { width: 28px; height: 28px; border-radius: 8px; font-size: 10px; }
|
||||
.pf-ev-t { font-size: var(--t-body); color: var(--ink-2); line-height: 1.4; }
|
||||
.pf-ev-t b { color: var(--ink); font-weight: 650; }
|
||||
.pf-ev-at { white-space: nowrap; font-variant-numeric: tabular-nums; }
|
||||
.pf-more { margin: 0 12px 12px; justify-self: start; }
|
||||
.pf-fixes { display: grid; gap: 10px; padding: 12px; }
|
||||
.pf-fix { display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); border-left: 3px solid var(--neutral-solid); background: var(--surface-2); transition: background var(--speed) var(--ease); }
|
||||
.pf-fix.tone-bad { border-left-color: var(--bad-solid); }
|
||||
.pf-fix.tone-warn { border-left-color: var(--warn-solid); }
|
||||
.pf-fix.tone-info { border-left-color: var(--info-solid); }
|
||||
.pf-fix:hover { background: var(--hover); }
|
||||
.pf-fix-head { display: flex; align-items: center; gap: 10px; }
|
||||
.pf-fix-head .pf-fix-icon { width: 28px; height: 28px; border-radius: 8px; font-size: 10px; }
|
||||
.pf-fix-app { font-weight: 650; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.pf-fix-t { margin: 0; font-size: var(--t-body); color: var(--ink-2); line-height: 1.45; }
|
||||
.pf-fix-h { margin: 0; }
|
||||
.pf-fix-a { display: flex; gap: 8px; }
|
||||
@media (max-width: 1100px) { .pf-cols { grid-template-columns: minmax(0, 1fr); } }
|
||||
@media (prefers-reduced-motion: reduce) { .pf-card, .pf-card:hover, .pf-shots img, .pf-hero-icon { transform: none !important; transition: none; } }
|
||||
:root[data-motion="reduce"] .pf-card, :root[data-motion="reduce"] .pf-card:hover, :root[data-motion="reduce"] .pf-shots img, :root[data-motion="reduce"] .pf-hero-icon { transform: none !important; transition: none; }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue