CRT/storebound
1
0
Fork 0
Code Issues Pull requests Releases 1 Packages 1 Activity Actions

Desktop: sidebar reader as short rows with a progress bar; one Refresh (top bar) instead of two; rolling-out tile lists versions on their own lines; cards without screenshots show live versions per store

Browse source
This commit is contained in:
CRTkafa 2026-10-23 09:43:08 +08:00
parent c36ad87658
commit 83b8ce8869
6 changed files with 67 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

15
apps/desktop/src/styles.css
View file

@ -1048,7 +1048,7 @@ button.ck.ck-pick[aria-checked="true"] { border-color: var(--accent-solid); box-
.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;
.pf-shots.empty { align-items: center; justify-content: center; gap: 22px; padding: 0 22px; -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); }
@ -1110,3 +1110,16 @@ button.ck.ck-pick[aria-checked="true"] { border-color: var(--accent-solid); box-
@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; }
.reader-line { display: grid; gap: 5px; }
.reader-line .row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-bar { height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; margin-left: 21px; }
.reader-bar i { display: block; height: 100%; background: var(--accent-solid); transition: width var(--speed) var(--ease); }
.kpi .k-sub .k-lines { display: grid; gap: 1px; white-space: nowrap; }
.kpi .k-sub .k-line { overflow: hidden; text-overflow: ellipsis; }
.kpi .k-sub:has(.k-lines) { white-space: normal; overflow: visible; }
.pf-shots.empty .pf-hero-icon { width: 76px; height: 76px; border-radius: 20px; flex: none; }
.pf-live { display: grid; gap: 8px; min-width: 0; }
.pf-live-row { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border-radius: 9px; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--line); font-size: var(--t-meta); white-space: nowrap; }
.pf-live-row svg, .pf-live-row .store-mark { width: 14px; height: 14px; flex: none; }
.pf-live-s { color: var(--muted); }
.pf-live-note { font-size: var(--t-micro, 11px); color: var(--muted); }