Desktop v2 screens: releases (store cards, stage stepper, rollout ring), submit checklist, TestFlight cards; listings as store pages with completeness, framed screenshots with issue badges, product cards, price matrix with gap shading; health tiles and issue cards, store-style review feed with rating distribution, growth funnel, readiness score with fix-first, tools grid, store-info sheet; settings, accounts, folders, dependencies and onboarding in the v2 language
This commit is contained in:
parent
ce939ee063
commit
f131de9df2
47 changed files with 2309 additions and 927 deletions
26
apps/desktop/src/styles/accounts.css
Normal file
26
apps/desktop/src/styles/accounts.css
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
/* Studios & accounts v2: KPI row, one section per studio, account cards per store with key status. */
|
||||
.scr-accounts { gap: 22px; }
|
||||
.scr-accounts .acct-kpis { --ds-min: 200px; }
|
||||
.scr-accounts .studio-card { overflow: hidden; scroll-margin-top: 16px; }
|
||||
.scr-accounts .studio-card .card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 22px 4px; }
|
||||
.scr-accounts .studio-card .card-head h2 { font-size: var(--ds-t-h2); font-weight: var(--ds-w-title); letter-spacing: -.015em; }
|
||||
.scr-accounts .studio-card .card-head .sub { color: var(--muted); font-size: var(--ds-t-meta); }
|
||||
.scr-accounts .studio-card.focus { box-shadow: var(--ds-e3), 0 0 0 2px var(--accent-line); }
|
||||
.scr-accounts .studio-card .card-body { padding: 14px 22px 20px; }
|
||||
.scr-accounts .acct-list { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; padding: 16px 22px 22px; }
|
||||
.scr-accounts .acct { border: 1px solid var(--ds-stroke); border-radius: var(--ds-r); background: var(--ds-raised); box-shadow: var(--ds-e1); overflow: hidden; transition: box-shadow var(--speed) var(--ease); }
|
||||
.scr-accounts .acct:hover { box-shadow: var(--ds-e2); }
|
||||
.scr-accounts .acct-row { flex-wrap: wrap; align-items: flex-start; padding: 16px; gap: 14px; }
|
||||
.scr-accounts .acct-glyph { width: 42px; height: 42px; border-radius: 12px; border: 0; }
|
||||
.scr-accounts .acct-glyph svg, .scr-accounts .acct-glyph .store-mark { width: 20px; height: 20px; }
|
||||
.scr-accounts .acct-glyph.play { background: color-mix(in srgb, var(--ok-fg, var(--accent-solid)) 16%, transparent); color: var(--ok-fg, var(--accent-solid)); }
|
||||
.scr-accounts .acct-glyph.apple { background: color-mix(in srgb, var(--info-fg, var(--accent-solid)) 16%, transparent); color: var(--info-fg, var(--accent-solid)); }
|
||||
.scr-accounts .acct-main { flex: 1 1 200px; gap: 6px; }
|
||||
.scr-accounts .acct-main .strong { font-size: var(--ds-t-h3); }
|
||||
.scr-accounts .acct-main .small { white-space: normal; line-height: 1.5; }
|
||||
.scr-accounts .acct-row > .actions { flex: 1 1 100%; padding-top: 12px; border-top: 1px solid var(--ds-stroke); }
|
||||
.scr-accounts .acct-edit { padding: 0 16px 16px; grid-template-columns: 1fr 1fr; }
|
||||
.scr-accounts .acct-edit .actions { grid-column: 1 / -1; }
|
||||
.scr-accounts .acct-fix { padding: 0 16px 16px; }
|
||||
.scr-accounts .acct-add { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; align-items: start; }
|
||||
.scr-accounts .acct-add .form { gap: 14px; }
|
||||
45
apps/desktop/src/styles/appinfo.css
Normal file
45
apps/desktop/src/styles/appinfo.css
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
/* App info tab v2: a store-info sheet (key facts), then the declarations and App Store info sections. Scoped to
|
||||
.scr-appinfo (tab) and .scr-appinfo-ed (its editor). */
|
||||
.scr-appinfo { display: grid; gap: 20px; min-width: 0; }
|
||||
|
||||
.scr-appinfo .ai-sheet {
|
||||
position: relative; overflow: hidden; display: grid; gap: 18px; padding: 22px 26px;
|
||||
border-radius: var(--ds-r-xl); background: var(--ds-surface); border: 1px solid var(--ds-stroke); box-shadow: var(--ds-e2);
|
||||
}
|
||||
.scr-appinfo .ai-sheet::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--ds-grad); }
|
||||
.scr-appinfo .ai-sheet-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
|
||||
.scr-appinfo .ai-sheet-h .ds-eyebrow { flex-basis: 100%; margin: 0; }
|
||||
.scr-appinfo .ai-sheet-h h2 { margin: 0; font-size: var(--ds-t-h1); font-weight: var(--ds-w-display); letter-spacing: -.02em; color: var(--ink); }
|
||||
.scr-appinfo .ai-sheet-stores { display: inline-flex; gap: 12px; font-size: var(--ds-t-meta); color: var(--muted); font-weight: 600; }
|
||||
.scr-appinfo .ai-sheet-stores span { display: inline-flex; align-items: center; gap: 5px; }
|
||||
.scr-appinfo .ai-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; margin: 0; border: 1px solid var(--ds-stroke); border-radius: var(--ds-r); overflow: hidden; background: var(--ds-inset); }
|
||||
.scr-appinfo .ai-fact { display: grid; gap: 6px; padding: 14px 16px; border-right: 1px solid var(--ds-stroke); min-width: 0; }
|
||||
.scr-appinfo .ai-fact:last-child { border-right: 0; }
|
||||
.scr-appinfo .ai-fact dt { display: flex; align-items: center; gap: 6px; font-size: var(--ds-t-micro); font-weight: 650; color: var(--muted); }
|
||||
.scr-appinfo .ai-fact dt svg { width: 13px; height: 13px; color: var(--accent-solid); }
|
||||
.scr-appinfo .ai-fact dd { margin: 0; font-size: var(--ds-t-h3); font-weight: var(--ds-w-strong); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.scr-appinfo .ai-fact.tone-warn dd { color: var(--warn-ink); }
|
||||
.scr-appinfo .ai-fact.tone-warn dt svg { color: var(--warn-solid); }
|
||||
.scr-appinfo .ai-fact.tone-ok dd { color: var(--ok-ink); }
|
||||
|
||||
.scr-appinfo .ai-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
|
||||
.scr-appinfo .ai-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
|
||||
@media (max-width: 1240px) { .scr-appinfo .ai-three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
||||
@media (max-width: 980px) { .scr-appinfo .ai-two, .scr-appinfo .ai-three { grid-template-columns: minmax(0, 1fr); } }
|
||||
|
||||
/* sections: the old card bodies inside v2 sections */
|
||||
.scr-appinfo .ds-sec .card-body { padding: 0 22px 18px; }
|
||||
.scr-appinfo .ds-sec .card-foot { margin: 0 22px 18px; padding: 10px 0 0; border-top: 1px solid var(--ds-stroke); background: none; }
|
||||
.scr-appinfo .ds-sec .ds-table-wrap { margin: 0 18px 18px; box-shadow: none; }
|
||||
.scr-appinfo .ds-sec > .list, .scr-appinfo .ds-sec > .ds-empty { margin: 0 12px 12px; }
|
||||
.scr-appinfo .ds-sec > .list { display: grid; gap: 8px; }
|
||||
.scr-appinfo .ds-sec > .list .li { border: 1px solid var(--ds-stroke); border-radius: var(--ds-r); background: var(--ds-inset); }
|
||||
.scr-appinfo .ask-card { border-color: color-mix(in srgb, var(--warn-solid) 45%, var(--ds-stroke)); }
|
||||
.scr-appinfo .kv { row-gap: 12px; }
|
||||
.scr-appinfo .kv dt { color: var(--muted); font-weight: 600; }
|
||||
.scr-appinfo .kv dd { color: var(--ink); }
|
||||
.scr-appinfo .ai-foot { margin: 0; font-size: var(--ds-t-meta); color: var(--muted); }
|
||||
|
||||
/* editor below the tab */
|
||||
.scr-appinfo-ed .ds-sec .ed-grid { gap: 14px 18px; }
|
||||
.scr-appinfo-ed .act-col { border-radius: var(--ds-r); background: var(--ds-inset); border-color: var(--ds-stroke); }
|
||||
38
apps/desktop/src/styles/art.css
Normal file
38
apps/desktop/src/styles/art.css
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
/* Store art tab, live art and art editor (desktop v2): a screenshot gallery in device frames. Scoped under .scr-art. */
|
||||
.scr-art { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
|
||||
section.scr-art { display: block; }
|
||||
.scr-art .ds-grid.art-stats { --ds-min: 200px; }
|
||||
.scr-art .art-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 22px; border-bottom: 1px solid var(--ds-stroke); }
|
||||
.scr-art .art-rows { display: grid; gap: 4px; padding: 6px 0; }
|
||||
.scr-art .art-row { padding: 16px 22px; }
|
||||
.scr-art .art-row + .art-row { border-top: 1px solid var(--ds-stroke); }
|
||||
.scr-art .art-row h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--ds-t-h3); font-weight: var(--ds-w-strong); margin: 0 0 12px; }
|
||||
.scr-art .art-row h3 code { font-size: var(--ds-t-micro); color: var(--muted); background: var(--ds-inset); padding: 2px 7px; border-radius: var(--ds-r-xs); }
|
||||
.scr-art .art-tiles { gap: 18px; padding: 4px 2px 10px; }
|
||||
.scr-art .art-tile { gap: 8px; position: relative; }
|
||||
|
||||
/* device frames: portrait tiles sit in a phone bezel, landscape ones in a tablet / banner frame */
|
||||
.scr-art .art-tile .art-pic { border-radius: var(--ds-r-sm); border: 2px solid var(--ds-stroke); background: var(--ds-inset); box-shadow: var(--ds-e2); }
|
||||
.scr-art .art-tile.portrait .art-pic { border: 6px solid #15161a; border-radius: 24px; box-shadow: 0 0 0 1px var(--ds-stroke-strong), var(--ds-e2); }
|
||||
.scr-art .art-tile.landscape .art-pic { border: 5px solid #15161a; border-radius: 14px; box-shadow: 0 0 0 1px var(--ds-stroke-strong), var(--ds-e2); }
|
||||
.scr-art .art-tile.portrait .art-pic::after { content: ""; position: absolute; top: 5px; left: 50%; width: 28%; height: 9px; transform: translateX(-50%); border-radius: var(--ds-r-pill); background: #15161a; z-index: 1; pointer-events: none; }
|
||||
.scr-art .art-tile.warn .art-pic { border-color: var(--warn-solid); }
|
||||
.scr-art .art-tile.err .art-pic { border-color: var(--bad-solid); }
|
||||
.scr-art .art-pic:focus-visible { outline: 2px solid var(--tint, var(--accent-solid)); outline-offset: 3px; }
|
||||
.scr-art .art-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
|
||||
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
|
||||
.scr-art button.art-pic:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--ds-stroke-strong), var(--ds-e3); }
|
||||
}
|
||||
.scr-art .art-badge { position: absolute; top: 10px; right: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: var(--ds-r-pill); font-size: var(--ds-t-micro); font-weight: 700; color: #fff; box-shadow: var(--ds-e1); }
|
||||
.scr-art .art-badge svg { width: 12px; height: 12px; }
|
||||
.scr-art .art-badge.err { background: var(--bad-solid); }
|
||||
.scr-art .art-badge.warn { background: var(--warn-solid); }
|
||||
.scr-art .art-tile figcaption { display: flex; justify-content: space-between; gap: 6px; font-size: var(--ds-t-micro); }
|
||||
.scr-art .art-tile .ds-pill { justify-self: start; }
|
||||
.scr-art .art-issues { font-size: var(--ds-t-micro); }
|
||||
.scr-art [data-live-icons] .art-tile .art-pic { border-radius: 22%; border: 1px solid var(--ds-stroke); }
|
||||
.scr-art [data-live-icons] .art-tile .art-pic::after { display: none; }
|
||||
|
||||
/* art editor: scene order as a numbered strip */
|
||||
.scr-art.art-editor .ed-scenes li > .num { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; background: color-mix(in srgb, var(--tint, var(--accent-solid)) 16%, transparent); color: var(--tint, var(--accent-solid)); }
|
||||
.scr-art.art-editor [role="tablist"] .btn { border-radius: var(--ds-r-pill); }
|
||||
29
apps/desktop/src/styles/catalog.css
Normal file
29
apps/desktop/src/styles/catalog.css
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
/* Catalog tab + catalog editor (desktop v2): products as cards. Scoped under .scr-catalog. */
|
||||
.scr-catalog { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
|
||||
section.scr-catalog { display: block; }
|
||||
.scr-catalog .ds-grid.cat-stats { --ds-min: 200px; }
|
||||
.scr-catalog .cat-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
|
||||
.scr-catalog .cat-card { background: var(--ds-raised); border: 1px solid var(--ds-stroke); border-radius: var(--ds-r); box-shadow: var(--ds-e1); padding: 14px 16px 14px 18px; display: grid; gap: 12px; position: relative; overflow: hidden; min-width: 0; }
|
||||
.scr-catalog .cat-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--ok-solid); opacity: .7; }
|
||||
.scr-catalog .cat-card.t-warn::before { background: var(--warn-solid); }
|
||||
.scr-catalog .cat-card.t-bad::before { background: var(--bad-solid); }
|
||||
.scr-catalog .cat-card-h { display: flex; align-items: center; gap: 12px; min-width: 0; }
|
||||
.scr-catalog .cat-card-h .grow { flex: 1; }
|
||||
.scr-catalog .cat-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--tint, var(--accent-solid)) 16%, transparent); color: var(--tint, var(--accent-solid)); }
|
||||
.scr-catalog .cat-ic svg { width: 19px; height: 19px; }
|
||||
.scr-catalog .cat-ic.sm { width: 26px; height: 26px; border-radius: 8px; }
|
||||
.scr-catalog .cat-ic.sm svg { width: 14px; height: 14px; }
|
||||
.scr-catalog .cat-names { display: grid; gap: 4px; min-width: 0; }
|
||||
.scr-catalog .cat-id { font-size: var(--ds-t-h3); overflow-wrap: anywhere; }
|
||||
.scr-catalog .cat-type { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
||||
.scr-catalog .cat-stores { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
|
||||
.scr-catalog .cat-store { background: var(--ds-inset); border-radius: var(--ds-r-sm); padding: 9px 11px; display: grid; gap: 4px; align-content: start; min-width: 0; }
|
||||
.scr-catalog .cat-store-l { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ds-t-micro); color: var(--muted); }
|
||||
.scr-catalog .cat-store-l svg, .scr-catalog .cat-store-l .store-mark { width: 12px; height: 12px; }
|
||||
.scr-catalog .cat-store .mx-cell { font-weight: var(--ds-w-strong); }
|
||||
.scr-catalog .cat-store .note-list { font-size: var(--ds-t-micro); margin: 0; }
|
||||
.scr-catalog .ds-table-wrap { box-shadow: none; }
|
||||
|
||||
/* editor rows */
|
||||
.scr-catalog.cat-editor .ed-item-head { gap: 10px; }
|
||||
.scr-catalog.cat-editor .cat-price { font-weight: var(--ds-w-strong); padding: 2px 9px; border-radius: var(--ds-r-pill); background: var(--ds-inset); font-size: var(--ds-t-meta); }
|
||||
76
apps/desktop/src/styles/checks.css
Normal file
76
apps/desktop/src/styles/checks.css
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
/* Checks tab v2: a readiness view. Big ready / blocked score, blockers first as cards with their fix, passed checks
|
||||
collapsed. Scoped to .scr-checks. */
|
||||
.scr-checks { display: grid; gap: 20px; min-width: 0; }
|
||||
|
||||
/* score hero */
|
||||
.scr-checks .ck-hero {
|
||||
position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.4fr) auto auto; gap: 28px; align-items: center;
|
||||
padding: 26px 28px; border-radius: var(--ds-r-xl); background: var(--ds-surface); border: 1px solid var(--ds-stroke); box-shadow: var(--ds-e2);
|
||||
}
|
||||
.scr-checks .ck-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 140% at 0% 0%, hsl(var(--tint-h) var(--ds-tint-s) var(--ds-tint-l) / .14), transparent 55%); }
|
||||
.scr-checks .ck-hero.tone-bad::before { background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--bad-solid) 16%, transparent), transparent 55%); }
|
||||
.scr-checks .ck-hero.tone-ok::before { background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--ok-solid) 16%, transparent), transparent 55%); }
|
||||
.scr-checks .ck-hero.tone-warn::before { background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--warn-solid) 14%, transparent), transparent 55%); }
|
||||
.scr-checks .ck-hero > * { position: relative; }
|
||||
.scr-checks .ck-score { display: flex; align-items: center; gap: 20px; min-width: 0; }
|
||||
.scr-checks .ck-score-ic { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 22px; flex: none; }
|
||||
.scr-checks .ck-score-ic svg { width: 36px; height: 36px; }
|
||||
.scr-checks .ck-score-t { display: grid; gap: 6px; min-width: 0; flex: 1; }
|
||||
.scr-checks .ck-score-t h2 { margin: 0; font-size: var(--ds-t-display); font-weight: var(--ds-w-display); letter-spacing: -.03em; line-height: 1.05; color: var(--ink); }
|
||||
.scr-checks .ck-hero.tone-bad .ck-score-t h2 { color: var(--bad-ink); }
|
||||
.scr-checks .ck-hero.tone-ok .ck-score-t h2 { color: var(--ok-ink); }
|
||||
.scr-checks .ck-score-t p { margin: 0; font-size: var(--ds-t-meta); color: var(--muted); }
|
||||
.scr-checks .ck-score-t .bar { height: 8px; max-width: 420px; margin-top: 4px; }
|
||||
.scr-checks .ck-counts { display: flex; gap: 10px; }
|
||||
.scr-checks .ck-count { display: grid; justify-items: center; gap: 2px; min-width: 84px; padding: 12px 14px; border-radius: var(--ds-r); background: var(--ds-inset); font-size: var(--ds-t-micro); color: var(--muted); font-weight: 600; }
|
||||
.scr-checks .ck-count b { font-size: 26px; font-weight: var(--ds-w-display); line-height: 1.05; color: var(--ink); }
|
||||
.scr-checks .ck-count.bad b { color: var(--bad-ink); }
|
||||
.scr-checks .ck-count.warn b { color: var(--warn-ink); }
|
||||
.scr-checks .ck-count.ok b { color: var(--ok-ink); }
|
||||
.scr-checks .ck-hero-acts { display: grid; gap: 8px; justify-items: end; }
|
||||
@media (max-width: 1200px) {
|
||||
.scr-checks .ck-hero { grid-template-columns: minmax(0, 1fr) auto; }
|
||||
.scr-checks .ck-hero-acts { grid-column: 1 / -1; justify-items: start; grid-auto-flow: column; justify-content: start; align-items: center; }
|
||||
}
|
||||
|
||||
/* cards */
|
||||
.scr-checks .ck-list { display: grid; gap: 10px; min-width: 0; }
|
||||
.scr-checks .ck-card {
|
||||
display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start;
|
||||
padding: 14px 16px; border-radius: var(--ds-r); background: var(--ds-inset); border: 1px solid var(--ds-stroke); border-left: 3px solid var(--ds-stroke-strong);
|
||||
}
|
||||
.scr-checks .ck-card.tone-bad { border-left-color: var(--bad-solid); background: color-mix(in srgb, var(--bad-solid) 5%, var(--ds-inset)); }
|
||||
.scr-checks .ck-card.tone-warn { border-left-color: var(--warn-solid); }
|
||||
.scr-checks .ck-card.tone-ok { border-left-color: var(--ok-solid); }
|
||||
.scr-checks .ck-card.tone-info { border-left-color: var(--info-solid); }
|
||||
.scr-checks .ck-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; flex: none; }
|
||||
.scr-checks .ck-ic svg { width: 17px; height: 17px; }
|
||||
.scr-checks .ck-main { display: grid; gap: 6px; min-width: 0; }
|
||||
.scr-checks .ck-title { font-weight: var(--ds-w-strong); color: var(--ink); line-height: 1.4; overflow-wrap: anywhere; }
|
||||
.scr-checks .ck-gl { display: inline-block; margin-right: 8px; padding: 0 7px; border-radius: var(--ds-r-pill); background: var(--ds-surface); border: 1px solid var(--ds-stroke); font-size: var(--ds-t-micro); font-weight: 650; color: var(--muted); vertical-align: 1px; }
|
||||
.scr-checks .ck-sub { font-size: var(--ds-t-meta); color: var(--muted); overflow-wrap: anywhere; }
|
||||
.scr-checks .ck-sub code { font-size: var(--ds-t-micro); }
|
||||
.scr-checks .ck-fix { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: var(--ds-r-sm); background: hsl(var(--tint-h) var(--ds-tint-s) var(--ds-tint-l) / .08); font-size: var(--ds-t-meta); color: var(--ink-2); overflow-wrap: anywhere; }
|
||||
.scr-checks .ck-fix svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--tint); }
|
||||
.scr-checks .ck-ai { margin-top: 2px; }
|
||||
.scr-checks .ck-side { display: grid; gap: 8px; justify-items: end; }
|
||||
.scr-checks .ck-tags { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
|
||||
.scr-checks .ck-store { display: inline-flex; align-items: center; gap: 5px; font-size: var(--ds-t-micro); color: var(--muted); font-weight: 600; white-space: nowrap; }
|
||||
.scr-checks .ck-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
|
||||
.scr-checks .ck-acts:empty { display: none; }
|
||||
.scr-checks .ck-notes { display: grid; gap: 4px; padding-top: 6px; }
|
||||
@media (max-width: 900px) { .scr-checks .ck-card { grid-template-columns: auto minmax(0, 1fr); } .scr-checks .ck-side { grid-column: 2; justify-items: start; } }
|
||||
|
||||
/* collapsed passed / accepted */
|
||||
.scr-checks .ck-passed { border-radius: var(--ds-r-lg); border: 1px solid var(--ds-stroke); background: var(--ds-surface); }
|
||||
.scr-checks .ck-list .ck-passed { background: none; border-style: dashed; }
|
||||
.scr-checks .ck-passed > summary { display: flex; align-items: center; gap: 8px; padding: 14px 18px; cursor: pointer; font-weight: var(--ds-w-strong); color: var(--ink); list-style: none; }
|
||||
.scr-checks .ck-passed > summary::-webkit-details-marker { display: none; }
|
||||
.scr-checks .ck-passed > summary svg { width: 16px; height: 16px; color: var(--ok-solid); }
|
||||
.scr-checks .ck-passed > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--ds-r-lg); }
|
||||
.scr-checks .ck-passed > .ck-list { padding: 0 14px 14px; }
|
||||
|
||||
/* report */
|
||||
.scr-checks .ck-report { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: var(--ds-r-lg); background: var(--ds-surface); border: 1px solid var(--ds-stroke); }
|
||||
.scr-checks .ck-report-t { display: grid; gap: 2px; flex: 1; min-width: 0; font-size: var(--ds-t-meta); color: var(--muted); }
|
||||
.scr-checks .ck-report-t b { color: var(--ink); font-size: var(--ds-t-body); }
|
||||
20
apps/desktop/src/styles/deps.css
Normal file
20
apps/desktop/src/styles/deps.css
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
/* Dependencies v2: KPI row, tool cards with status / version / needs chips and the install control. */
|
||||
.scr-deps { gap: 22px; }
|
||||
.scr-deps .deps-kpis { --ds-min: 220px; }
|
||||
.scr-deps .deps-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; padding: 16px 22px 22px; }
|
||||
.scr-deps .tool-row { flex-wrap: wrap; align-items: flex-start; gap: 14px; padding: 16px; border: 1px solid var(--ds-stroke); border-radius: var(--ds-r); background: var(--ds-raised); box-shadow: var(--ds-e1); transition: box-shadow var(--speed) var(--ease); }
|
||||
.scr-deps .tool-row:hover { box-shadow: var(--ds-e2); }
|
||||
.scr-deps .tool-row .ti { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--ds-inset); color: var(--muted); }
|
||||
.scr-deps .tool-row .ti svg { width: 20px; height: 20px; }
|
||||
.scr-deps .tool-ok .ti { background: color-mix(in srgb, var(--ok-fg, var(--accent-solid)) 15%, transparent); color: var(--ok-fg, var(--accent-solid)); }
|
||||
.scr-deps .tool-warn .ti { background: color-mix(in srgb, var(--warn-fg, var(--accent-solid)) 15%, transparent); color: var(--warn-fg, var(--accent-solid)); }
|
||||
.scr-deps .tool-accent .ti { background: var(--accent-soft); color: var(--accent); }
|
||||
.scr-deps .tool-row .li-main { flex: 1 1 200px; gap: 6px; }
|
||||
.scr-deps .tool-row .li-title { font-size: var(--ds-t-h3); font-weight: var(--ds-w-title); }
|
||||
.scr-deps .tool-chips { flex-wrap: wrap; }
|
||||
.scr-deps .tool-acts { flex: 1 1 100%; justify-content: flex-end; flex-wrap: wrap; }
|
||||
.scr-deps .tool-acts:empty { display: none; }
|
||||
.scr-deps .tool-acts .prog { flex: 1; min-width: 160px; }
|
||||
.scr-deps .deps-src { gap: 18px; }
|
||||
.scr-deps .kv { row-gap: 8px; }
|
||||
.scr-deps .cmd { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: var(--ds-r-sm); background: var(--ds-inset); border: 1px solid var(--ds-stroke); }
|
||||
22
apps/desktop/src/styles/folders.css
Normal file
22
apps/desktop/src/styles/folders.css
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
/* App folders v2: one card per folder (app icon, tint stripe, health pill, accounts, actions). Ignored: a quiet list. */
|
||||
.scr-folders { gap: 22px; }
|
||||
.scr-folders .list { grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 16px; padding: 16px 22px 22px; }
|
||||
.scr-folders .fold-card { position: relative; flex-wrap: wrap; align-items: flex-start; gap: 14px; padding: 18px; border: 1px solid var(--ds-stroke); border-radius: var(--ds-r); background: var(--ds-raised); box-shadow: var(--ds-e1); overflow: hidden; transition: box-shadow var(--speed) var(--ease); }
|
||||
.scr-folders .fold-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--tint); }
|
||||
.scr-folders .fold-card:hover { box-shadow: var(--ds-e3); }
|
||||
.scr-folders .fold-card .app-icon.fold-icon { width: 52px; height: 52px; border-radius: 14px; }
|
||||
.scr-folders .fold-card .li-main { flex: 1 1 220px; gap: 4px; }
|
||||
.scr-folders .fold-card .li-title { font-size: var(--ds-t-h3); font-weight: var(--ds-w-title); }
|
||||
.scr-folders .fold-accs { flex: 1 1 100%; display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
|
||||
.scr-folders .fold-acts { flex: 1 1 100%; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--ds-stroke); }
|
||||
.scr-folders .fold-acts > :last-child { margin-left: auto; }
|
||||
.scr-folders .log { max-height: 360px; border-radius: var(--ds-r-sm); }
|
||||
.scr-folders .act-note { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
|
||||
|
||||
.scr-ignored { gap: 20px; }
|
||||
.scr-ignored .ds-sec { box-shadow: none; background: transparent; }
|
||||
.scr-ignored .list { padding: 6px 10px 10px; }
|
||||
.scr-ignored .li { border-top: 0; border-radius: var(--ds-r-sm); padding: 10px 12px; align-items: center; opacity: .82; transition: background var(--speed) var(--ease), opacity var(--speed) var(--ease); }
|
||||
.scr-ignored .li:hover, .scr-ignored .li:focus-within { background: var(--ds-inset); opacity: 1; }
|
||||
.scr-ignored .li .app-icon { width: 34px; height: 34px; filter: saturate(.55); }
|
||||
.scr-ignored .card-body { padding: 4px 22px 18px; }
|
||||
37
apps/desktop/src/styles/growth.css
Normal file
37
apps/desktop/src/styles/growth.css
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
/* Growth tab v2: funnel tiles with deltas, ASO tiles, experiments. Scoped to .scr-growth. */
|
||||
.scr-growth { display: grid; gap: 20px; min-width: 0; }
|
||||
.scr-growth .gr-body { display: grid; gap: 18px; min-width: 0; }
|
||||
.scr-growth .gr-note, .scr-growth .gr-text { margin: 0; font-size: var(--ds-t-meta); color: var(--muted); line-height: 1.5; }
|
||||
.scr-growth .gr-text { color: var(--ink-2); font-size: var(--ds-t-body); }
|
||||
|
||||
/* reach -> installs -> conversion */
|
||||
.scr-growth .gr-funnel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 10px; }
|
||||
.scr-growth .gr-step { display: grid; place-items: center; color: var(--tint); }
|
||||
.scr-growth .gr-step svg { width: 20px; height: 20px; }
|
||||
.scr-growth .gr-funnel .ds-stat, .scr-growth .gr-tiles .ds-stat { background: var(--ds-inset); box-shadow: none; }
|
||||
.scr-growth .gr-funnel .ds-stat-v { font-size: 36px; }
|
||||
@media (max-width: 900px) {
|
||||
.scr-growth .gr-funnel { grid-template-columns: minmax(0, 1fr); }
|
||||
.scr-growth .gr-step { transform: rotate(90deg); }
|
||||
}
|
||||
.scr-growth .gr-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
|
||||
.scr-growth .gr-tiles .ds-stat-v { font-size: 24px; }
|
||||
|
||||
/* next actions */
|
||||
.scr-growth .gr-next { display: grid; gap: 10px; padding: 16px 18px; border-radius: var(--ds-r); background: hsl(var(--tint-h) var(--ds-tint-s) var(--ds-tint-l) / .07); border: 1px solid hsl(var(--tint-h) var(--ds-tint-s) var(--ds-tint-l) / .22); }
|
||||
.scr-growth .gr-next-h { display: flex; align-items: center; gap: 8px; font-weight: var(--ds-w-strong); color: var(--ink); }
|
||||
.scr-growth .gr-next-h svg { width: 16px; height: 16px; color: var(--tint); }
|
||||
.scr-growth .gr-next ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
|
||||
.scr-growth .gr-next li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; }
|
||||
.scr-growth .gr-next-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--tint); color: #fff; font-size: var(--ds-t-micro); font-weight: 700; }
|
||||
.scr-growth .gr-next-t { display: grid; gap: 2px; min-width: 0; font-size: var(--ds-t-meta); color: var(--muted); }
|
||||
.scr-growth .gr-next-t b { color: var(--ink); font-size: var(--ds-t-body); font-weight: var(--ds-w-strong); }
|
||||
|
||||
/* experiments */
|
||||
.scr-growth .gr-exp { display: grid; gap: 20px; align-items: start; }
|
||||
.scr-growth .gr-exp.two { grid-template-columns: minmax(0, 1fr) 360px; }
|
||||
@media (max-width: 1180px) { .scr-growth .gr-exp.two { grid-template-columns: minmax(0, 1fr); } }
|
||||
.scr-growth .gr-ppo-act { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--ds-stroke); }
|
||||
.scr-growth .gr-ppo-act .act-col { border-radius: var(--ds-r); background: var(--ds-inset); border-color: var(--ds-stroke); padding: 14px 16px; }
|
||||
.scr-growth .gr-foot { display: flex; align-items: center; gap: 8px; font-size: var(--ds-t-meta); color: var(--muted); }
|
||||
.scr-growth .gr-foot svg { width: 14px; height: 14px; }
|
||||
79
apps/desktop/src/styles/health.css
Normal file
79
apps/desktop/src/styles/health.css
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
/* Health tab v2: big metric tiles (crash, ANR, startup) with large sparklines, issues as cards. Scoped to .scr-health. */
|
||||
.scr-health { display: grid; gap: 20px; min-width: 0; }
|
||||
.scr-health .hl-top { display: flex; align-items: center; gap: 12px; }
|
||||
.scr-health .hl-top .grow { flex: 1; }
|
||||
|
||||
.scr-health .hl-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
|
||||
.scr-health .hl-tile {
|
||||
position: relative; overflow: hidden; display: grid; gap: 12px; align-content: start; min-width: 0;
|
||||
padding: 20px 22px 18px; border-radius: var(--ds-r-lg); background: var(--ds-surface);
|
||||
border: 1px solid var(--ds-stroke); box-shadow: var(--ds-e2);
|
||||
}
|
||||
.scr-health .hl-tile::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--tint); opacity: .85; }
|
||||
.scr-health .hl-tile.tone-bad::before { background: var(--bad-solid); }
|
||||
.scr-health .hl-tile.tone-warn::before { background: var(--warn-solid); }
|
||||
.scr-health .hl-tile.tone-ok::before { background: var(--ok-solid); }
|
||||
.scr-health .hl-tile-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
|
||||
.scr-health .hl-tile-l { display: inline-flex; align-items: center; gap: 8px; font-size: var(--ds-t-h3); font-weight: var(--ds-w-strong); color: var(--ink); min-width: 0; }
|
||||
.scr-health .hl-tile-l svg { width: 18px; height: 18px; color: var(--tint); flex: none; }
|
||||
.scr-health .hl-tile-v { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
|
||||
.scr-health .hl-big { font-size: 44px; font-weight: var(--ds-w-display); letter-spacing: -.035em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
|
||||
.scr-health .hl-big small { font-size: var(--ds-t-h3); font-weight: 600; color: var(--muted); margin-left: 6px; letter-spacing: 0; }
|
||||
.scr-health .hl-big.bad { color: var(--bad-ink); }
|
||||
.scr-health .hl-big.warn { color: var(--warn-ink); }
|
||||
.scr-health .hl-big.ok { color: var(--ok-ink); }
|
||||
.scr-health .hl-tile-sub { font-size: var(--ds-t-meta); color: var(--muted); }
|
||||
.scr-health .hl-tile .spark { height: 132px; }
|
||||
.scr-health .hl-axis { display: flex; justify-content: space-between; font-size: var(--ds-t-micro); color: var(--muted); font-variant-numeric: tabular-nums; margin-top: -4px; }
|
||||
.scr-health .hl-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: var(--ds-t-micro); color: var(--muted); padding-top: 10px; border-top: 1px solid var(--ds-stroke); }
|
||||
.scr-health .hl-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
|
||||
.scr-health .hl-legend .sw { width: 16px; height: 3px; border-radius: 2px; background: var(--accent-solid); }
|
||||
.scr-health .hl-legend .sw.ok { background: var(--ok-solid); }
|
||||
.scr-health .hl-legend .sw.warn { background: var(--warn-solid); }
|
||||
.scr-health .hl-legend .sw.bad { background: var(--bad-solid); }
|
||||
.scr-health .hl-legend .sw.thr { background: repeating-linear-gradient(90deg, var(--bad-solid) 0 4px, transparent 4px 7px); }
|
||||
.scr-health .hl-win { margin-left: auto; }
|
||||
.scr-health .hl-startup-meta { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ds-t-meta); color: var(--muted); }
|
||||
|
||||
.scr-health .hl-store { display: flex; align-items: center; gap: 10px; margin: 8px 0 -6px; font-size: var(--ds-t-h2); font-weight: var(--ds-w-title); color: var(--ink); }
|
||||
.scr-health .hl-store svg { width: 18px; height: 18px; color: var(--tint); }
|
||||
|
||||
.scr-health .hl-two { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
|
||||
.scr-health .hl-col { display: grid; gap: 16px; min-width: 0; }
|
||||
@media (max-width: 1100px) { .scr-health .hl-two { grid-template-columns: minmax(0, 1fr); } }
|
||||
|
||||
/* issues as cards */
|
||||
.scr-health .hl-issues { display: grid; gap: 10px; }
|
||||
.scr-health .hl-issue { border: 1px solid var(--ds-stroke); border-radius: var(--ds-r); background: var(--ds-inset); overflow: hidden; border-left: 3px solid var(--bad-solid); }
|
||||
.scr-health .hl-issue.tone-warn { border-left-color: var(--warn-solid); }
|
||||
.scr-health .hl-issue.tone-info { border-left-color: var(--info-solid); }
|
||||
.scr-health .hl-issue.open { background: var(--ds-surface); box-shadow: var(--ds-e1); }
|
||||
.scr-health .hl-issue-h { all: unset; box-sizing: border-box; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; cursor: pointer; }
|
||||
.scr-health .hl-issue-h:hover { background: hsl(var(--tint-h) var(--ds-tint-s) var(--ds-tint-l) / .06); }
|
||||
.scr-health .hl-issue-h:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--ds-r); }
|
||||
.scr-health .hl-issue-h .chev { color: var(--muted); transition: transform var(--speed) var(--ease); }
|
||||
.scr-health .hl-issue-h .chev.rot { transform: rotate(90deg); }
|
||||
.scr-health .hl-issue-t { display: grid; gap: 4px; min-width: 0; }
|
||||
.scr-health .hl-issue-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
|
||||
.scr-health .hl-issue-title { font-weight: var(--ds-w-strong); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
|
||||
.scr-health .hl-issue-where { color: var(--muted); font-size: var(--ds-t-micro); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.scr-health .hl-issue-stats { display: flex; gap: 14px; font-size: var(--ds-t-micro); color: var(--muted); }
|
||||
.scr-health .hl-issue-stats span { display: grid; justify-items: end; gap: 1px; }
|
||||
.scr-health .hl-issue-stats b { font-size: var(--ds-t-h3); color: var(--ink); font-weight: var(--ds-w-title); }
|
||||
.scr-health .hl-issue-b { padding: 4px 16px 16px; border-top: 1px solid var(--ds-stroke); }
|
||||
.scr-health .hl-issue-b .issue-detail { padding-top: 12px; }
|
||||
|
||||
/* bars and metric rows */
|
||||
.scr-health .hl-bars { display: grid; gap: 12px; }
|
||||
.scr-health .hl-bar { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) 64px; align-items: center; gap: 12px; font-size: var(--ds-t-meta); }
|
||||
.scr-health .hl-bar .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 600; }
|
||||
.scr-health .hl-bar .num { text-align: right; color: var(--muted); }
|
||||
.scr-health .hl-mets { display: grid; gap: 2px; }
|
||||
.scr-health .hl-met { display: grid; grid-template-columns: minmax(0, 1fr) auto 72px; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--ds-stroke); }
|
||||
.scr-health .hl-met:last-child { border-bottom: 0; }
|
||||
.scr-health .hl-met-t { display: grid; gap: 2px; min-width: 0; }
|
||||
.scr-health .hl-met-t b { font-weight: var(--ds-w-strong); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.scr-health .hl-met-t small { font-size: var(--ds-t-micro); color: var(--muted); }
|
||||
.scr-health .hl-met-v { font-weight: var(--ds-w-title); color: var(--ink); text-align: right; }
|
||||
.scr-health .hl-met-v small { color: var(--muted); font-weight: 500; }
|
||||
.scr-health .hl-met > :last-child { justify-self: end; }
|
||||
36
apps/desktop/src/styles/listings.css
Normal file
36
apps/desktop/src/styles/listings.css
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
/* Listings tab + listing editors (desktop v2): the store page per language. Scoped under .scr-listings. */
|
||||
.scr-listings { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
|
||||
.scr-listings .ds-grid.lst-stats { --ds-min: 200px; }
|
||||
.scr-listings .ds-sec-h h2 .store-mark, .scr-listings .ds-sec-h h2 > svg { width: 16px; height: 16px; }
|
||||
|
||||
.scr-listings .lst-pages { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
|
||||
.scr-listings .lst-page { background: var(--ds-raised); border: 1px solid var(--ds-stroke); border-radius: var(--ds-r); box-shadow: var(--ds-e1); padding: 14px 16px 16px; display: grid; gap: 12px; position: relative; overflow: hidden; }
|
||||
.scr-listings .lst-page::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--tint, var(--accent-solid)); opacity: .55; }
|
||||
.scr-listings .lst-page.done::before { background: var(--ok-solid); }
|
||||
.scr-listings .lst-page.bad::before { background: var(--bad-solid); opacity: .8; }
|
||||
.scr-listings .lst-page-h { display: flex; align-items: center; gap: 8px; }
|
||||
.scr-listings .lst-lang { font-size: var(--ds-t-h2); font-weight: var(--ds-w-title); letter-spacing: -.01em; }
|
||||
.scr-listings .lst-page-h .grow { flex: 1; }
|
||||
.scr-listings .lst-fields { display: grid; gap: 9px; }
|
||||
.scr-listings .lst-f { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 10px; }
|
||||
.scr-listings .lst-f-l { font-size: var(--ds-t-meta); color: var(--muted); }
|
||||
.scr-listings .lst-f.f-title .lst-f-l, .scr-listings .lst-f.f-name .lst-f-l { color: var(--text); font-weight: var(--ds-w-strong); font-size: var(--ds-t-h3); }
|
||||
.scr-listings .lst-f.f-short .lst-f-l, .scr-listings .lst-f.f-subtitle .lst-f-l { color: var(--text); font-weight: 600; }
|
||||
.scr-listings .lg-cell .bar { height: 6px; border-radius: var(--ds-r-pill); }
|
||||
.scr-listings .lst-foot-cmd { border: 0; background: none; padding: 6px 0 0; }
|
||||
|
||||
/* the store page preview in the editors */
|
||||
.scr-listings .lst-preview { background: var(--ds-inset); border: 1px solid var(--ds-stroke); border-radius: var(--ds-r); padding: 14px 16px; display: grid; gap: 10px; margin: 4px 0 8px; }
|
||||
.scr-listings .lst-pv-eyebrow { font-size: var(--ds-t-micro); color: var(--muted); font-weight: 650; letter-spacing: .02em; }
|
||||
.scr-listings .lst-pv-top { display: flex; gap: 14px; align-items: center; min-width: 0; }
|
||||
.scr-listings .lst-pv-icon { flex: none; width: 64px; height: 64px; border-radius: 15px; display: grid; place-items: center; font-size: 28px; font-weight: var(--ds-w-display); color: #fff; background: var(--ds-grad); box-shadow: var(--ds-e2); }
|
||||
.scr-listings .lst-preview.play .lst-pv-icon { border-radius: 20%; }
|
||||
.scr-listings .lst-pv-names { min-width: 0; display: grid; gap: 3px; }
|
||||
.scr-listings .lst-pv-title { font-size: 20px; font-weight: var(--ds-w-title); letter-spacing: -.015em; line-height: 1.2; overflow-wrap: anywhere; }
|
||||
.scr-listings .lst-pv-sub { font-size: var(--ds-t-body); color: var(--muted); line-height: 1.35; }
|
||||
.scr-listings .lst-pv-promo { margin: 0; font-size: var(--ds-t-body); line-height: 1.45; padding: 8px 12px; border-radius: var(--ds-r-sm); background: color-mix(in srgb, var(--tint, var(--accent-solid)) 10%, transparent); }
|
||||
.scr-listings .lst-pv-desc { margin: 0; font-size: var(--ds-t-body); line-height: 1.5; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
|
||||
.scr-listings .lst-pv-more { justify-self: end; font-size: var(--ds-t-meta); font-weight: 650; color: var(--tint, var(--accent-solid)); margin-top: -6px; }
|
||||
.scr-listings .lst-langbar .btn { border-radius: var(--ds-r-pill); }
|
||||
.scr-listings .ed-cols { gap: 18px; }
|
||||
.scr-listings .ed-col { background: var(--ds-raised); border: 1px solid var(--ds-stroke); border-radius: var(--ds-r); padding: 14px 16px; }
|
||||
33
apps/desktop/src/styles/onboarding.css
Normal file
33
apps/desktop/src/styles/onboarding.css
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
/* Onboarding v2: bigger, friendlier first run with a step progress rail. Scoped under .wz2. */
|
||||
.wz2 { backdrop-filter: blur(6px); }
|
||||
.wz2 .wizard { width: min(1080px, 100%); height: min(700px, 100%); grid-template-columns: 290px minmax(0, 1fr); border-radius: var(--ds-r-xl); border-color: var(--ds-stroke); background: var(--ds-surface); box-shadow: var(--ds-e3); overflow: hidden; }
|
||||
.wz2 .wz-side { background: var(--ds-inset); border-right-color: var(--ds-stroke); padding: 28px 20px; position: relative; }
|
||||
.wz2 .wz-side::before { content: ""; position: absolute; inset: 0 0 auto; height: 160px; background: var(--ds-grad-soft); opacity: .7; pointer-events: none; }
|
||||
.wz2 .wz-side > * { position: relative; }
|
||||
.wz2 .wz-side .brand { font-size: var(--ds-t-h2); font-weight: var(--ds-w-title); }
|
||||
.wz2 .wz-step { padding: 11px 12px; border-radius: var(--ds-r-sm); }
|
||||
.wz2 .wz-step[aria-current="step"] { background: var(--ds-raised); box-shadow: var(--ds-e2), inset 0 0 0 1px var(--ds-stroke); }
|
||||
.wz2 .wz-num { width: 28px; height: 28px; }
|
||||
.wz2 .wz-step[aria-current="step"] .wz-num { background: var(--ds-grad); border-color: transparent; color: #fff; }
|
||||
.wz2 .wz-progress { display: grid; gap: 10px; padding: 26px 44px 0; }
|
||||
.wz2 .wz-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--ds-t-meta); font-weight: var(--ds-w-strong); color: var(--accent); letter-spacing: .02em; }
|
||||
.wz2 .wz-eyebrow svg { width: 15px; height: 15px; }
|
||||
.wz2 .wz-bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
|
||||
.wz2 .wz-bar span { height: 6px; border-radius: var(--ds-r-pill); background: var(--ds-stroke); transition: background var(--speed) var(--ease); }
|
||||
.wz2 .wz-bar span.done { background: color-mix(in srgb, var(--accent-solid) 55%, var(--ds-stroke)); }
|
||||
.wz2 .wz-bar span.on { background: var(--ds-grad); }
|
||||
.wz2 .wz-body { padding: 22px 44px 24px; gap: 20px; }
|
||||
.wz2 .wz-body h2 { font-size: var(--ds-t-h1); font-weight: var(--ds-w-display); letter-spacing: -.025em; line-height: 1.15; }
|
||||
.wz2 .wz-body h2:focus { outline: none; }
|
||||
.wz2 .wz-body h2:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 6px; }
|
||||
.wz2 .wz-body .lead { font-size: 15px; }
|
||||
.wz2 .ck { padding: 14px 16px; border-color: var(--ds-stroke); border-radius: var(--ds-r); background: var(--ds-raised); box-shadow: var(--ds-e1); }
|
||||
.wz2 .ck .ck-ic { width: 36px; height: 36px; border-radius: 10px; }
|
||||
.wz2 .ck .ck-ic svg { width: 18px; height: 18px; }
|
||||
.wz2 .ck-pick[aria-checked="true"] { border-color: var(--accent-solid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-solid) 18%, transparent); }
|
||||
.wz2 .choice { padding: 18px; border-color: var(--ds-stroke); border-radius: var(--ds-r-lg); background: var(--ds-raised); box-shadow: var(--ds-e1); }
|
||||
.wz2 .choice:hover { box-shadow: var(--ds-e3); }
|
||||
.wz2 .choice .ch-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--ds-grad); color: #fff; }
|
||||
.wz2 .choice b { font-size: var(--ds-t-h3); }
|
||||
.wz2 .wz-foot { padding: 16px 24px; border-top-color: var(--ds-stroke); background: var(--ds-inset); }
|
||||
@media (prefers-reduced-motion: reduce) { .wz2 .wz-bar span { transition: none; } }
|
||||
17
apps/desktop/src/styles/prices.css
Normal file
17
apps/desktop/src/styles/prices.css
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
/* Prices tab (desktop v2): a clean price matrix with region codes and the store gaps highlighted. Scoped under .scr-prices. */
|
||||
.scr-prices { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
|
||||
section.scr-prices { display: block; }
|
||||
.scr-prices .ds-grid.px-stats { --ds-min: 200px; }
|
||||
.scr-prices .ds-sec > .ds-table-wrap { margin: 14px 22px 16px; box-shadow: none; }
|
||||
.scr-prices .px-region { display: inline-block; font-weight: var(--ds-w-strong); }
|
||||
.scr-prices .px-region.code { font-family: var(--mono, ui-monospace, monospace); font-size: var(--ds-t-micro); letter-spacing: .04em; padding: 2px 7px; border-radius: var(--ds-r-xs); background: var(--ds-inset); border: 1px solid var(--ds-stroke); }
|
||||
.scr-prices .px-matrix th:first-child, .scr-prices .px-matrix td:first-child { position: sticky; left: 0; background: var(--ds-surface); z-index: 1; }
|
||||
.scr-prices .px-matrix thead th:first-child { z-index: 3; }
|
||||
.scr-prices .px-matrix th { text-align: left; }
|
||||
.scr-prices .px-matrix tr.sel td { background: color-mix(in srgb, var(--tint, var(--accent-solid)) 9%, var(--ds-surface)); }
|
||||
.scr-prices .px-stack { padding: 4px 6px; border-radius: var(--ds-r-xs); }
|
||||
.scr-prices .px-stack.gap-warn { background: color-mix(in srgb, var(--warn-solid) 14%, transparent); }
|
||||
.scr-prices .px-stack.gap-bad { background: color-mix(in srgb, var(--bad-solid) 14%, transparent); }
|
||||
.scr-prices tr.gap-warn td:first-child { box-shadow: inset 3px 0 0 var(--warn-solid); }
|
||||
.scr-prices tr.gap-bad td:first-child { box-shadow: inset 3px 0 0 var(--bad-solid); }
|
||||
.scr-prices .legend-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
|
||||
94
apps/desktop/src/styles/releases.css
Normal file
94
apps/desktop/src/styles/releases.css
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
/* Releases tab (v2): one big card per release train, a card per store inside with a stepper and a rollout ring. */
|
||||
.scr-releases { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
|
||||
|
||||
/* train */
|
||||
.scr-releases .rel-train { position: relative; background: var(--ds-surface); border: 1px solid var(--ds-stroke); border-radius: var(--ds-r-lg); box-shadow: var(--ds-e2); padding: 22px 24px 24px; overflow: hidden; }
|
||||
.scr-releases .rel-train::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--tint, var(--accent-solid)); opacity: .85; }
|
||||
.scr-releases .rel-train.ok::before { background: var(--ok-solid); }
|
||||
.scr-releases .rel-train.accent { background: linear-gradient(180deg, hsl(var(--tint-h, 250) var(--ds-tint-s) var(--ds-tint-l) / var(--ds-tint-a2)), transparent 160px), var(--ds-surface); }
|
||||
.scr-releases .rel-train-h { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
|
||||
.scr-releases .rel-train-title { display: flex; flex-direction: column; gap: 2px; }
|
||||
.scr-releases .rel-train-eyebrow { font-size: var(--ds-t-micro); font-weight: var(--ds-w-strong); color: var(--muted); letter-spacing: .04em; }
|
||||
.scr-releases .rel-train-ver { font-size: var(--ds-t-display); font-weight: var(--ds-w-display); letter-spacing: -.03em; line-height: 1.05; color: var(--ink); }
|
||||
.scr-releases .rel-train-h .grow { flex: 1; }
|
||||
.scr-releases .rel-train-meta { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--ds-t-meta); }
|
||||
.scr-releases .rel-train-meta svg { width: 14px; height: 14px; }
|
||||
|
||||
.scr-releases .rel-lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 16px; }
|
||||
|
||||
/* store card (neutralise the old .tl-lane / .tl-roll / .tl-none grid rules from styles.css) */
|
||||
.scr-releases .tl-lane.rel-store { grid-template-columns: none; align-items: stretch; }
|
||||
.scr-releases .tl-roll.rel-ring-wrap { position: static; width: auto; display: flex; top: auto; }
|
||||
.scr-releases .tl-roll .pct { text-align: left; font-size: var(--ds-t-h3); }
|
||||
.scr-releases .tl-none.rel-gap { grid-column: auto; text-align: left; border: 0; }
|
||||
.scr-releases .rel-store { display: flex; flex-direction: column; gap: 18px; background: var(--ds-raised); border: 1px solid var(--ds-stroke); border-radius: var(--ds-r); padding: 18px 20px; min-width: 0; box-shadow: var(--ds-e1); }
|
||||
.scr-releases .rel-store[data-tone="bad"] { border-color: color-mix(in srgb, var(--bad-solid) 45%, var(--ds-stroke)); }
|
||||
.scr-releases .rel-store-h { display: flex; align-items: center; gap: 12px; }
|
||||
.scr-releases .rel-mark { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--ds-inset); border: 1px solid var(--ds-stroke); color: var(--ink); flex: none; }
|
||||
.scr-releases .rel-mark svg { width: 20px; height: 20px; }
|
||||
.scr-releases .rel-who { flex: 1; min-width: 0; }
|
||||
.scr-releases .rel-store-name { font-size: var(--ds-t-h3); font-weight: var(--ds-w-title); }
|
||||
.scr-releases .rel-store-ver { font-size: var(--ds-t-meta); color: var(--muted); margin-top: 1px; }
|
||||
|
||||
.scr-releases .rel-gap { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: var(--ds-r-sm); background: var(--ds-inset); color: var(--muted); font-size: var(--ds-t-body); }
|
||||
.scr-releases .rel-gap svg { width: 16px; height: 16px; flex: none; }
|
||||
.scr-releases .rel-gap[data-gap="unreadable"] { background: var(--warn-bg); color: var(--warn-ink); }
|
||||
|
||||
.scr-releases .rel-body { display: flex; flex-direction: column; gap: 18px; }
|
||||
|
||||
/* stepper */
|
||||
.scr-releases .rel-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
|
||||
.scr-releases .rel-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; }
|
||||
.scr-releases .rel-step::before { content: ""; position: absolute; top: 15px; right: 50%; width: 100%; height: 3px; border-radius: 3px; background: var(--ds-stroke-strong); z-index: 0; }
|
||||
.scr-releases .rel-step:first-child::before { display: none; }
|
||||
.scr-releases .rel-step.done::before, .scr-releases .rel-step.cur::before { background: var(--tint, var(--accent-solid)); }
|
||||
.scr-releases .rel-node { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ds-inset); border: 2px solid var(--ds-stroke-strong); color: var(--muted); font-size: var(--ds-t-micro); font-weight: var(--ds-w-strong); }
|
||||
.scr-releases .rel-node svg { width: 15px; height: 15px; }
|
||||
.scr-releases .rel-step.done .rel-node { background: var(--tint, var(--accent-solid)); border-color: var(--tint, var(--accent-solid)); color: #fff; }
|
||||
.scr-releases .rel-step.cur .rel-node { background: var(--ds-raised); border-color: var(--tint, var(--accent-solid)); color: var(--tint, var(--accent-solid)); box-shadow: 0 0 0 5px hsl(var(--tint-h, 250) var(--ds-tint-s) var(--ds-tint-l) / .22); }
|
||||
.scr-releases .rel-step.cur.ok .rel-node { border-color: var(--ok-solid); color: var(--ok-solid); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ok-solid) 22%, transparent); }
|
||||
.scr-releases .rel-step.cur.warn .rel-node { border-color: var(--warn-solid); color: var(--warn-solid); box-shadow: 0 0 0 5px color-mix(in srgb, var(--warn-solid) 24%, transparent); }
|
||||
.scr-releases .rel-step.cur.bad .rel-node { border-color: var(--bad-solid); color: var(--bad-solid); box-shadow: 0 0 0 5px color-mix(in srgb, var(--bad-solid) 24%, transparent); }
|
||||
.scr-releases .rel-step.cur.info .rel-node { border-color: var(--info-solid); color: var(--info-solid); box-shadow: 0 0 0 5px color-mix(in srgb, var(--info-solid) 22%, transparent); }
|
||||
.scr-releases .rel-step-l { font-size: var(--ds-t-meta); color: var(--muted); font-weight: 560; }
|
||||
.scr-releases .rel-step.done .rel-step-l { color: var(--ink); }
|
||||
.scr-releases .rel-step.cur .rel-step-l { color: var(--ink); font-weight: var(--ds-w-title); }
|
||||
.scr-releases .rel-step-c { font-size: var(--ds-t-micro); font-weight: var(--ds-w-strong); padding: 2px 8px; border-radius: var(--ds-r-pill); background: var(--ds-inset); color: var(--ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
/* rollout ring (conic gradient, no svg) */
|
||||
.scr-releases .rel-ring-wrap { display: flex; align-items: center; gap: 18px; padding: 14px 16px; border-radius: var(--ds-r); background: var(--ds-inset); --ring: var(--tint, var(--accent-solid)); }
|
||||
.scr-releases .rel-ring-wrap.ok { --ring: var(--ok-solid); }
|
||||
.scr-releases .rel-ring-wrap.bad { --ring: var(--bad-solid); }
|
||||
.scr-releases .rel-ring { --p: 0; flex: none; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center;
|
||||
background: conic-gradient(var(--ring) calc(var(--p) * 1%), var(--ds-stroke-strong) 0); }
|
||||
.scr-releases .rel-ring::before { content: ""; grid-area: 1 / 1; width: 74px; height: 74px; border-radius: 50%; background: var(--ds-raised); }
|
||||
.scr-releases .rel-ring-v { grid-area: 1 / 1; position: relative; font-size: 24px; font-weight: var(--ds-w-display); letter-spacing: -.02em; color: var(--ink); }
|
||||
.scr-releases .rel-ring-v small { font-size: 13px; font-weight: var(--ds-w-strong); color: var(--muted); margin-left: 1px; }
|
||||
.scr-releases .rel-ring-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
|
||||
.scr-releases .rel-ring-side .pct { font-size: var(--ds-t-h3); font-weight: var(--ds-w-title); color: var(--ink); }
|
||||
.scr-releases .rel-ring-sub { font-size: var(--ds-t-meta); color: var(--muted); margin-bottom: 6px; }
|
||||
.scr-releases .rel-ring-side .rbar { height: 6px; }
|
||||
.scr-releases .rel-ring-wrap .rbar .fill { fill: var(--ring); }
|
||||
|
||||
/* rollout controls */
|
||||
.scr-releases .roll-ctl { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 14px; border-top: 1px solid var(--ds-stroke); }
|
||||
.scr-releases .roll-ctl > .small.muted { flex-basis: 100%; }
|
||||
|
||||
/* history */
|
||||
.scr-releases .rel-count { font-size: var(--ds-t-meta); color: var(--muted); font-weight: var(--ds-w-strong); }
|
||||
.scr-releases .rel-history .ds-table-wrap { margin: 14px 22px 22px; --ds-table-max: 420px; }
|
||||
.scr-releases .rel-hv { font-size: var(--ds-t-h3); }
|
||||
|
||||
/* send for review */
|
||||
.scr-releases .rel-submit { gap: 14px; }
|
||||
.scr-releases .rel-sec-h { display: flex; flex-direction: column; gap: 4px; padding: 0 2px; }
|
||||
.scr-releases .rel-sec-title { font-size: var(--ds-t-h2); font-weight: var(--ds-w-title); letter-spacing: -.015em; display: flex; align-items: center; gap: 10px; margin: 0; }
|
||||
.scr-releases .rel-sec-sub { color: var(--muted); font-size: var(--ds-t-meta); margin: 0; }
|
||||
.scr-releases .rel-submit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); gap: 16px; align-items: start; }
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.scr-releases .rel-lanes, .scr-releases .rel-submit-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
:root:not([data-motion="reduce"]) .scr-releases .rel-step.cur .rel-node { transition: box-shadow var(--speed, .2s) var(--ease, ease); }
|
||||
}
|
||||
81
apps/desktop/src/styles/reviews.css
Normal file
81
apps/desktop/src/styles/reviews.css
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
/* Reviews tab v2: rating summary, filters on a toolbar, a store-like review feed and the reply panel. Scoped to .scr-reviews. */
|
||||
.scr-reviews { display: grid; gap: 18px; min-width: 0; }
|
||||
.scr-reviews .grow { flex: 1; }
|
||||
|
||||
/* rating summary */
|
||||
.scr-reviews .rv2-sum {
|
||||
display: grid; grid-template-columns: auto minmax(220px, 1fr) auto; gap: 28px; align-items: center;
|
||||
padding: 22px 26px; border-radius: var(--ds-r-lg); background: var(--ds-surface); border: 1px solid var(--ds-stroke); box-shadow: var(--ds-e2);
|
||||
position: relative; overflow: hidden;
|
||||
}
|
||||
.scr-reviews .rv2-sum::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--tint); opacity: .85; }
|
||||
.scr-reviews .rv2-avg { display: grid; justify-items: center; gap: 6px; padding-right: 28px; border-right: 1px solid var(--ds-stroke); }
|
||||
.scr-reviews .rv2-avg b { font-size: 56px; line-height: 1; font-weight: var(--ds-w-display); letter-spacing: -.04em; color: var(--ink); }
|
||||
.scr-reviews .rv2-avg .stars svg { width: 18px; height: 18px; }
|
||||
.scr-reviews .rv2-avg span { font-size: var(--ds-t-meta); color: var(--muted); }
|
||||
.scr-reviews .rv2-dist { display: grid; gap: 6px; max-width: 520px; }
|
||||
.scr-reviews .rv2-dist-row {
|
||||
all: unset; box-sizing: border-box; display: grid; grid-template-columns: 34px minmax(0, 1fr) 40px; align-items: center; gap: 10px;
|
||||
padding: 3px 6px; border-radius: var(--ds-r-xs); cursor: pointer; font-size: var(--ds-t-meta); color: var(--muted);
|
||||
transition: opacity var(--speed) var(--ease), background var(--speed) var(--ease);
|
||||
}
|
||||
.scr-reviews .rv2-dist-row:hover { background: var(--ds-inset); }
|
||||
.scr-reviews .rv2-dist-row:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
|
||||
.scr-reviews .rv2-dist-row[aria-pressed="true"] { background: hsl(var(--tint-h) var(--ds-tint-s) var(--ds-tint-l) / .14); color: var(--ink); }
|
||||
.scr-reviews .rv2-dist-row[data-dim] { opacity: .45; }
|
||||
.scr-reviews .rv2-dist-row > span:first-child { display: inline-flex; align-items: center; gap: 3px; font-weight: 650; color: var(--ink); }
|
||||
.scr-reviews .rv2-dist-row > span:first-child svg { width: 11px; height: 11px; color: var(--warn-solid); }
|
||||
.scr-reviews .rv2-dist-row > span:last-child { text-align: right; }
|
||||
.scr-reviews .rv2-dist-row .bar { height: 10px; }
|
||||
.scr-reviews .rv2-side { display: grid; gap: 10px; justify-items: end; }
|
||||
.scr-reviews .rv2-unans { display: grid; justify-items: end; gap: 2px; }
|
||||
.scr-reviews .rv2-unans b { font-size: var(--ds-t-stat); font-weight: var(--ds-w-display); color: var(--ink); line-height: 1; }
|
||||
.scr-reviews .rv2-unans span { font-size: var(--ds-t-meta); color: var(--muted); }
|
||||
@media (max-width: 1100px) {
|
||||
.scr-reviews .rv2-sum { grid-template-columns: auto minmax(0, 1fr); }
|
||||
.scr-reviews .rv2-side { grid-column: 1 / -1; justify-items: start; grid-auto-flow: column; align-items: center; }
|
||||
}
|
||||
|
||||
.scr-reviews .ds-toolbar .search-input { min-width: 240px; }
|
||||
.scr-reviews .ds-toolbar .search-input .input { padding-left: 30px; }
|
||||
.scr-reviews .rv2-shown { font-size: var(--ds-t-meta); color: var(--muted); }
|
||||
|
||||
/* feed + reply panel */
|
||||
.scr-reviews .rv2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 18px; align-items: start; }
|
||||
@media (max-width: 1100px) { .scr-reviews .rv2 { grid-template-columns: minmax(0, 1fr); } }
|
||||
.scr-reviews .rv2-list { display: grid; gap: 10px; max-height: 1100px; overflow: auto; padding: 2px; }
|
||||
.scr-reviews .rv2-card.inbox-item {
|
||||
display: grid; gap: 8px; padding: 16px 18px; border: 1px solid var(--ds-stroke); border-top: 1px solid var(--ds-stroke);
|
||||
border-radius: var(--ds-r); background: var(--ds-surface); box-shadow: var(--ds-e1);
|
||||
transition: box-shadow var(--speed) var(--ease), border-color var(--speed) var(--ease);
|
||||
}
|
||||
.scr-reviews .rv2-card.inbox-item:hover { background: var(--ds-surface); box-shadow: var(--ds-e2); border-color: var(--ds-stroke-strong); }
|
||||
.scr-reviews .rv2-card.inbox-item[aria-selected="true"] { background: hsl(var(--tint-h) var(--ds-tint-s) var(--ds-tint-l) / .08); border-color: hsl(var(--tint-h) var(--ds-tint-s) var(--ds-tint-l) / .55); }
|
||||
.scr-reviews .rv2-card.inbox-item[aria-selected="true"]::before { background: var(--tint); top: 14px; bottom: 14px; }
|
||||
.scr-reviews .rv2-card.inbox-item:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
|
||||
.scr-reviews .rv2-c-top { display: flex; align-items: center; gap: 10px; }
|
||||
.scr-reviews .rv2-c-top .stars svg { width: 14px; height: 14px; }
|
||||
.scr-reviews .rv2-c-date { font-size: var(--ds-t-meta); color: var(--muted); }
|
||||
.scr-reviews .rv2-c-title { font-size: var(--ds-t-h3); font-weight: var(--ds-w-strong); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.scr-reviews .rv2-c-body { color: var(--ink-2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
|
||||
.scr-reviews .rv2-c-foot, .scr-reviews .rv2-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: var(--ds-t-micro); color: var(--muted); }
|
||||
.scr-reviews .rv2-c-foot svg { color: var(--muted); }
|
||||
.scr-reviews .rv2-lang { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: var(--ds-r-pill); background: var(--ds-inset); font-weight: 600; }
|
||||
.scr-reviews .rv2-lang svg { width: 11px; height: 11px; }
|
||||
|
||||
.scr-reviews .rv2-detail {
|
||||
display: grid; gap: 18px; padding: 22px 24px; border-radius: var(--ds-r-lg); background: var(--ds-surface);
|
||||
border: 1px solid var(--ds-stroke); box-shadow: var(--ds-e2); position: sticky; top: 72px; min-width: 0;
|
||||
}
|
||||
.scr-reviews .rv2-d-head { display: grid; gap: 8px; }
|
||||
.scr-reviews .rv2-d-head .stars svg { width: 18px; height: 18px; }
|
||||
.scr-reviews .rv2-d-head h2 { margin: 0; font-size: var(--ds-t-h2); font-weight: var(--ds-w-title); color: var(--ink); }
|
||||
.scr-reviews .rv2-body { margin: 0; font-size: var(--ds-t-body); line-height: 1.6; border-left-color: var(--tint); }
|
||||
.scr-reviews .rv2-dev { display: grid; gap: 8px; }
|
||||
.scr-reviews .rv2-dev-l, .scr-reviews .rv2-draft-l { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ds-t-meta); font-weight: 650; color: var(--ink); }
|
||||
.scr-reviews .rv2-dev-l svg, .scr-reviews .rv2-draft-l svg { width: 14px; height: 14px; color: var(--tint); }
|
||||
.scr-reviews .rv2-dev .reply-box { border-radius: var(--ds-r); background: var(--ds-inset); }
|
||||
.scr-reviews .rv2-draft { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--ds-stroke); }
|
||||
.scr-reviews .rv2-draft-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
|
||||
.scr-reviews .rv2-draft .reply-edit { border-radius: var(--ds-r); min-height: 120px; }
|
||||
.scr-reviews .rv2-count { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: var(--ds-t-micro); color: var(--muted); }
|
||||
37
apps/desktop/src/styles/settings.css
Normal file
37
apps/desktop/src/styles/settings.css
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
/* Settings v2: grouped sections with a sticky jump list, roomy toggle rows and calm descriptions. */
|
||||
.scr-settings { gap: 22px; }
|
||||
.scr-settings .set-layout { grid-template-columns: 230px minmax(0, 1fr); gap: 28px; }
|
||||
.scr-settings .set-nav { top: 12px; padding: 8px; gap: 2px; border: 1px solid var(--ds-stroke); border-radius: var(--ds-r-lg); background: var(--ds-surface); box-shadow: var(--ds-e1); }
|
||||
.scr-settings .set-nav .nav { height: 34px; border-radius: var(--ds-r-sm); font-size: var(--ds-t-body); }
|
||||
.scr-settings .set-nav .nav[aria-current="true"] { background: var(--ds-raised); color: var(--ink); box-shadow: var(--ds-e1), inset 0 0 0 1px var(--ds-stroke); }
|
||||
.scr-settings .set-nav .nav[aria-current="true"] svg { color: var(--accent-solid); }
|
||||
.scr-settings .set-body { gap: 20px !important; max-width: 920px; }
|
||||
.scr-settings .set-card { scroll-margin-top: 16px; }
|
||||
.scr-settings .ds-sec-b > .form { gap: 18px; }
|
||||
.scr-settings .toggle-row { padding: 14px 16px; margin: 0 -16px; border-top: 1px solid var(--ds-stroke); border-radius: var(--ds-r-sm); gap: 20px; transition: background var(--speed) var(--ease); }
|
||||
.scr-settings .toggle-row:first-child { border-top: 0; }
|
||||
.scr-settings .toggle-row:hover { background: var(--ds-inset); }
|
||||
.scr-settings .toggle-row .strong { font-size: var(--ds-t-h3); font-weight: var(--ds-w-strong); }
|
||||
.scr-settings .toggle-row .small { font-size: var(--ds-t-meta); line-height: 1.45; max-width: 64ch; }
|
||||
.scr-settings .switch { width: 42px; height: 24px; }
|
||||
.scr-settings .switch::after { width: 19px; height: 19px; }
|
||||
.scr-settings .switch:checked { background: var(--accent-solid); box-shadow: 0 4px 12px -6px var(--accent-solid); }
|
||||
.scr-settings .switch:checked::after { transform: translateX(18px); }
|
||||
.scr-settings .field .legend, .scr-settings .field > label { font-weight: var(--ds-w-strong); font-size: var(--ds-t-body); }
|
||||
.scr-settings .field .hint { font-size: var(--ds-t-meta); }
|
||||
.scr-settings .kv { padding: 14px 16px; border-radius: var(--ds-r); background: var(--ds-inset); border: 1px solid var(--ds-stroke); row-gap: 10px; }
|
||||
.scr-settings .studio-sum { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
|
||||
.scr-settings .studio-sum-item { padding: 14px 16px; border-radius: var(--ds-r); border: 1px solid var(--ds-stroke); background: var(--ds-raised); box-shadow: var(--ds-e1); transition: box-shadow var(--speed) var(--ease), border-color var(--speed) var(--ease); }
|
||||
.scr-settings .studio-sum-item:hover { box-shadow: var(--ds-e3); border-color: var(--ds-stroke-strong); }
|
||||
.scr-settings .studio-sum-item b { font-size: var(--ds-t-h3); }
|
||||
.scr-settings #set-pairing .table { margin-top: 14px; }
|
||||
.scr-settings #set-pairing .card-foot { display: flex; align-items: center; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--ds-stroke); color: var(--muted); font-size: var(--ds-t-meta); }
|
||||
.scr-settings .dep-sum { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
.scr-settings .dep-sum > span { padding: 6px 12px; border-radius: var(--ds-r-pill); background: var(--ds-inset); border: 1px solid var(--ds-stroke); }
|
||||
.scr-settings .plain-list { display: grid; gap: 10px; }
|
||||
.scr-settings .plain-list li { display: flex; gap: 10px; align-items: flex-start; }
|
||||
.scr-settings .plain-list li svg { color: var(--ok-fg, var(--accent-solid)); flex: none; margin-top: 2px; }
|
||||
.scr-settings .shortcuts { row-gap: 12px; }
|
||||
.scr-settings .danger-card { border-color: color-mix(in srgb, var(--bad-fg, var(--accent-solid)) 35%, var(--ds-stroke)); }
|
||||
.scr-settings .danger-card .ds-sec-ic { background: color-mix(in srgb, var(--bad-fg, var(--accent-solid)) 16%, transparent); color: var(--bad-fg, var(--accent-solid)); }
|
||||
@media (max-width: 1100px) { .scr-settings .set-layout { grid-template-columns: 1fr; } }
|
||||
60
apps/desktop/src/styles/submit.css
Normal file
60
apps/desktop/src/styles/submit.css
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
/* Send for review (v2): one card per store with a numbered checklist that ends in the one primary button. */
|
||||
.sub-card.card { background: var(--ds-surface); border: 1px solid var(--ds-stroke); border-radius: var(--ds-r-lg); box-shadow: var(--ds-e2); padding: 0; overflow: hidden; min-width: 0; }
|
||||
|
||||
.sub-card .sub-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px 22px 16px; border-bottom: 1px solid var(--ds-stroke);
|
||||
background: linear-gradient(180deg, hsl(var(--tint-h, 250) var(--ds-tint-s) var(--ds-tint-l) / var(--ds-tint-a2)), transparent); }
|
||||
.sub-card .sub-mark { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--ds-raised); border: 1px solid var(--ds-stroke); flex: none; }
|
||||
.sub-card .sub-mark svg { width: 20px; height: 20px; }
|
||||
.sub-card .sub-head-t { flex: 1; min-width: 180px; }
|
||||
.sub-card .sub-head-t h3 { font-size: var(--ds-t-h2); font-weight: var(--ds-w-title); letter-spacing: -.015em; margin: 0; }
|
||||
.sub-card .sub-head-s { color: var(--muted); font-size: var(--ds-t-meta); margin-top: 2px; }
|
||||
.sub-card .sub-count { display: inline-flex; align-items: baseline; padding: 6px 12px; border-radius: var(--ds-r-pill); background: var(--ds-inset); font-weight: var(--ds-w-display); font-size: 18px; color: var(--ink); }
|
||||
.sub-card .sub-count .of { font-size: var(--ds-t-meta); color: var(--muted); font-weight: var(--ds-w-strong); }
|
||||
.sub-card .sub-count.all { background: var(--ok-bg); color: var(--ok-ink); }
|
||||
.sub-card .sub-count.all .of { color: var(--ok-ink); }
|
||||
.sub-card .sub-head-a { flex-basis: 100%; justify-content: flex-start; }
|
||||
|
||||
.sub-card .sub-body { display: flex; flex-direction: column; gap: 16px; padding: 18px 22px 22px; }
|
||||
|
||||
/* checklist */
|
||||
.sub-card .sub-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
|
||||
.sub-card .sub-step { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding-bottom: 18px; }
|
||||
.sub-card .sub-step:last-child { padding-bottom: 0; }
|
||||
.sub-card .sub-step::before { content: ""; position: absolute; left: 16px; top: 36px; bottom: 2px; width: 2px; border-radius: 2px; background: var(--ds-stroke); }
|
||||
.sub-card .sub-step:last-child::before { display: none; }
|
||||
.sub-card .sub-step.ready::before { background: color-mix(in srgb, var(--ok-solid) 55%, var(--ds-stroke)); }
|
||||
.sub-card .sub-node { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ds-inset); border: 2px solid var(--ds-stroke-strong); color: var(--muted); font-weight: var(--ds-w-title); font-size: var(--ds-t-meta); position: relative; z-index: 1; }
|
||||
.sub-card .sub-node svg { width: 16px; height: 16px; }
|
||||
.sub-card .sub-step.ready .sub-node { background: var(--ok-solid); border-color: var(--ok-solid); color: #fff; }
|
||||
.sub-card .sub-step.blocked .sub-node { background: var(--bad-bg); border-color: var(--bad-solid); color: var(--bad-solid); }
|
||||
.sub-card .sub-step.warn .sub-node { background: var(--warn-bg); border-color: var(--warn-solid); color: var(--warn-ink); }
|
||||
.sub-card .sub-step-b { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-top: 5px; }
|
||||
.sub-card .sub-step-h { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
|
||||
.sub-card .sub-step-t { font-size: var(--ds-t-h3); font-weight: var(--ds-w-title); }
|
||||
.sub-card .sub-step.todo .sub-step-t { color: var(--muted); }
|
||||
.sub-card .sub-hint { font-size: var(--ds-t-meta); color: var(--muted); }
|
||||
|
||||
.sub-card .sub-field select.input { width: 100%; max-width: 520px; height: 40px; border-radius: var(--ds-r-sm); font-size: var(--ds-t-body); }
|
||||
.sub-card .sub-version { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
|
||||
.sub-card .sub-version-v { font-size: 24px; font-weight: var(--ds-w-display); letter-spacing: -.02em; }
|
||||
.sub-card .sub-check { gap: 8px; }
|
||||
.sub-card .sub-go .btn-primary { height: 42px; padding: 0 20px; font-size: var(--ds-t-body); border-radius: var(--ds-r-sm); }
|
||||
|
||||
/* submissions */
|
||||
.sub-card .sub-list { display: flex; flex-direction: column; gap: 8px; }
|
||||
.sub-card .sub-item { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: start; padding: 12px 14px; border-radius: var(--ds-r-sm); background: var(--ds-inset); border: 1px solid var(--ds-stroke); }
|
||||
.sub-card .sub-item-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--neutral-bg); color: var(--neutral-ink); }
|
||||
.sub-card .sub-item-ic svg { width: 16px; height: 16px; }
|
||||
.sub-card .sub-item.tone-info .sub-item-ic { background: var(--info-bg); color: var(--info-ink); }
|
||||
.sub-card .sub-item.tone-bad { border-color: color-mix(in srgb, var(--bad-solid) 40%, var(--ds-stroke)); }
|
||||
.sub-card .sub-item.tone-bad .sub-item-ic { background: var(--bad-bg); color: var(--bad-ink); }
|
||||
.sub-card .sub-item.tone-ok .sub-item-ic { background: var(--ok-bg); color: var(--ok-ink); }
|
||||
.sub-card .sub-item-m { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
|
||||
.sub-card .sub-item-t { font-weight: var(--ds-w-title); }
|
||||
.sub-card .sub-item-s { font-size: var(--ds-t-meta); color: var(--muted); overflow-wrap: anywhere; }
|
||||
.sub-card .sub-item .note-list { margin: 6px 0 0; padding-left: 18px; font-size: var(--ds-t-meta); }
|
||||
|
||||
/* extras: in-app purchases, console steps */
|
||||
.sub-card .sub-extra { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: var(--ds-r); background: var(--ds-inset); border: 1px dashed var(--ds-stroke-strong); }
|
||||
.sub-card .sub-extra-h { display: flex; align-items: center; gap: 8px; }
|
||||
.sub-card .sub-extra-h svg { width: 16px; height: 16px; color: var(--tint, var(--accent-solid)); }
|
||||
64
apps/desktop/src/styles/testflight.css
Normal file
64
apps/desktop/src/styles/testflight.css
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
/* TestFlight tab (v2): stat tiles, group cards with the tester count, build cards with three state pills. */
|
||||
.scr-testflight { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
|
||||
|
||||
.scr-testflight .tf-top { display: flex; align-items: flex-start; gap: 16px; }
|
||||
.scr-testflight .tf-kpis { flex: 1; --ds-min: 200px; }
|
||||
.scr-testflight .tf-read { flex: none; padding-top: 4px; }
|
||||
|
||||
/* groups */
|
||||
.scr-testflight .tf-groups { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
|
||||
.scr-testflight .tf-group { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; background: var(--ds-surface); border: 1px solid var(--ds-stroke); border-radius: var(--ds-r-lg); box-shadow: var(--ds-e1); overflow: hidden; }
|
||||
.scr-testflight .tf-group::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--info-solid); }
|
||||
.scr-testflight .tf-group.external::before { background: var(--tint, var(--accent-solid)); }
|
||||
.scr-testflight .tf-group-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
|
||||
.scr-testflight .tf-group-n { font-size: var(--ds-t-h3); font-weight: var(--ds-w-title); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.scr-testflight .tf-group-big { display: flex; align-items: baseline; gap: 8px; }
|
||||
.scr-testflight .tf-group-big .num { font-size: var(--ds-t-stat); font-weight: var(--ds-w-display); letter-spacing: -.03em; line-height: 1; }
|
||||
.scr-testflight .tf-group-l { color: var(--muted); font-size: var(--ds-t-meta); }
|
||||
.scr-testflight .tf-group-f { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
.scr-testflight .tf-tag { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--ds-r-pill); background: var(--ds-inset); color: var(--muted); font-size: var(--ds-t-micro); font-weight: var(--ds-w-strong); }
|
||||
.scr-testflight .tf-tag b { color: var(--ink); }
|
||||
.scr-testflight .tf-tag svg { width: 13px; height: 13px; }
|
||||
.scr-testflight .tf-tag.on { background: color-mix(in srgb, var(--tint, var(--accent-solid)) 16%, transparent); color: var(--tint, var(--accent-solid)); }
|
||||
|
||||
/* builds */
|
||||
.scr-testflight .tf-builds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
|
||||
.scr-testflight .tf-build { border: 1px solid var(--ds-stroke); border-radius: var(--ds-r); background: var(--ds-raised); transition: border-color var(--speed, .15s), box-shadow var(--speed, .15s); }
|
||||
.scr-testflight .tf-build:hover, .scr-testflight .tf-build.open { border-color: hsl(var(--tint-h, 250) var(--ds-tint-s) var(--ds-tint-l) / .55); box-shadow: var(--ds-e2); }
|
||||
.scr-testflight .tf-build-row { display: grid; grid-template-columns: minmax(150px, 200px) 1fr auto; gap: 18px; align-items: center; padding: 14px 18px; }
|
||||
.scr-testflight .tf-build-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
|
||||
.scr-testflight .tf-build-v { font-size: 22px; font-weight: var(--ds-w-display); letter-spacing: -.02em; line-height: 1.1; }
|
||||
.scr-testflight .tf-build-n { font-size: var(--ds-t-meta); color: var(--muted); }
|
||||
.scr-testflight .tf-build-n b { color: var(--ink); }
|
||||
.scr-testflight .tf-build-d { display: inline-flex; align-items: center; gap: 5px; font-size: var(--ds-t-micro); color: var(--muted); }
|
||||
.scr-testflight .tf-build-d svg { width: 12px; height: 12px; }
|
||||
.scr-testflight .tf-build-states { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
|
||||
.scr-testflight .tf-state { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
|
||||
.scr-testflight .tf-state-l { font-size: var(--ds-t-micro); color: var(--muted); font-weight: var(--ds-w-strong); }
|
||||
.scr-testflight .tf-state .ds-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
|
||||
.scr-testflight .tf-dash { color: var(--faint, var(--muted)); }
|
||||
.scr-testflight .tf-build-a .actions { justify-content: flex-end; flex-wrap: nowrap; }
|
||||
.scr-testflight .tf-edit { display: flex; flex-direction: column; gap: 10px; margin: 0 18px 16px; padding: 14px 16px; border-radius: var(--ds-r-sm); background: var(--ds-inset); }
|
||||
.scr-testflight .tf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
.scr-testflight .tf-chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: var(--ds-r-pill); border: 1px solid var(--ds-stroke-strong); background: var(--ds-raised); cursor: pointer; font-size: var(--ds-t-meta); font-weight: var(--ds-w-strong); }
|
||||
.scr-testflight .tf-chip input { margin: 0; }
|
||||
.scr-testflight .tf-chip svg { width: 13px; height: 13px; color: var(--muted); }
|
||||
.scr-testflight .tf-chip.on { border-color: var(--tint, var(--accent-solid)); background: color-mix(in srgb, var(--tint, var(--accent-solid)) 14%, var(--ds-raised)); }
|
||||
.scr-testflight .tf-chip:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
|
||||
.scr-testflight .tf-chip-n { color: var(--muted); font-size: var(--ds-t-micro); }
|
||||
|
||||
.scr-testflight .tf-note { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; color: var(--muted); font-size: var(--ds-t-meta); }
|
||||
.scr-testflight .tf-note svg { width: 14px; height: 14px; flex: none; }
|
||||
.scr-testflight .tf-err { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 22px 18px; color: var(--bad-ink); font-size: var(--ds-t-meta); }
|
||||
.scr-testflight .tf-err svg { width: 14px; height: 14px; }
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.scr-testflight .tf-build-row { grid-template-columns: 1fr; }
|
||||
.scr-testflight .tf-build-a .actions { justify-content: flex-start; }
|
||||
}
|
||||
|
||||
/* TestFlight editor */
|
||||
.scr-testflight-ed .ed-langs { gap: 16px; }
|
||||
.scr-testflight-ed .ed-lang { background: var(--ds-inset); border: 1px solid var(--ds-stroke); border-radius: var(--ds-r); padding: 14px 16px; }
|
||||
.scr-testflight-ed .ed-lang .mono-id { display: inline-block; padding: 2px 8px; border-radius: var(--ds-r-pill); background: color-mix(in srgb, var(--tint, var(--accent-solid)) 16%, transparent); color: var(--tint, var(--accent-solid)); margin-bottom: 8px; }
|
||||
.scr-testflight-ed .tf-apply { gap: 16px; }
|
||||
48
apps/desktop/src/styles/tools.css
Normal file
48
apps/desktop/src/styles/tools.css
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
/* More tools tab v2: a tidy command grid. Group tiles, the open group's commands as cards, owner steps. Scoped to .scr-tools. */
|
||||
.scr-tools { display: grid; gap: 20px; min-width: 0; }
|
||||
.scr-tools .tl-lead { display: flex; gap: 10px; align-items: flex-start; margin: 0; max-width: 980px; font-size: var(--ds-t-body); color: var(--muted); line-height: 1.55; }
|
||||
.scr-tools .tl-lead svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--tint); }
|
||||
|
||||
/* group tiles */
|
||||
.scr-tools .tl-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
|
||||
.scr-tools .tl-group {
|
||||
all: unset; box-sizing: border-box; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 10px 12px; align-items: center;
|
||||
padding: 16px 18px; border-radius: var(--ds-r-lg); background: var(--ds-surface); border: 1px solid var(--ds-stroke); box-shadow: var(--ds-e1); cursor: pointer;
|
||||
transition: box-shadow var(--speed) var(--ease), border-color var(--speed) var(--ease), background var(--speed) var(--ease);
|
||||
}
|
||||
.scr-tools .tl-group:hover { box-shadow: var(--ds-e2); border-color: var(--ds-stroke-strong); }
|
||||
.scr-tools .tl-group:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
|
||||
.scr-tools .tl-group[aria-expanded="true"] { background: hsl(var(--tint-h) var(--ds-tint-s) var(--ds-tint-l) / .10); border-color: hsl(var(--tint-h) var(--ds-tint-s) var(--ds-tint-l) / .55); }
|
||||
.scr-tools .tl-group-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: hsl(var(--tint-h) var(--ds-tint-s) var(--ds-tint-l) / .16); color: var(--tint); }
|
||||
.scr-tools .tl-group-ic svg { width: 19px; height: 19px; }
|
||||
.scr-tools .tl-group-t { display: grid; gap: 2px; min-width: 0; font-size: var(--ds-t-meta); color: var(--muted); }
|
||||
.scr-tools .tl-group-t b { font-size: var(--ds-t-h3); font-weight: var(--ds-w-strong); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.scr-tools .tl-group-x { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: space-between; gap: 6px; font-size: var(--ds-t-micro); font-weight: 650; color: var(--muted); padding-top: 8px; border-top: 1px solid var(--ds-stroke); }
|
||||
.scr-tools .tl-group-x svg { width: 14px; height: 14px; }
|
||||
.scr-tools .tl-group[aria-expanded="true"] .tl-group-x { color: var(--tint); }
|
||||
|
||||
/* commands */
|
||||
.scr-tools .tl-cmds { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; align-items: start; }
|
||||
.scr-tools .tl-cmd.tool { display: grid; gap: 12px; padding: 16px 18px; border: 1px solid var(--ds-stroke); border-radius: var(--ds-r); background: var(--ds-inset); min-width: 0; }
|
||||
.scr-tools .tl-cmd.tool:first-child { border-top: 1px solid var(--ds-stroke); padding-top: 16px; }
|
||||
.scr-tools .tl-cmd.has-out { grid-column: 1 / -1; }
|
||||
.scr-tools .tl-cmd-h { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
|
||||
.scr-tools .tl-cmd-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--info-bg); color: var(--info-ink); }
|
||||
.scr-tools .tl-cmd-ic.write { background: var(--warn-bg); color: var(--warn-ink); }
|
||||
.scr-tools .tl-cmd-ic svg { width: 16px; height: 16px; }
|
||||
.scr-tools .tl-cmd-t { display: grid; gap: 3px; min-width: 0; }
|
||||
.scr-tools .tl-cmd-title { font-weight: var(--ds-w-strong); color: var(--ink); }
|
||||
.scr-tools .tl-cmd-desc { font-size: var(--ds-t-meta); color: var(--muted); line-height: 1.45; }
|
||||
.scr-tools .tl-cmd-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
|
||||
.scr-tools .tl-cmd-m { margin-left: auto; font-size: var(--ds-t-micro); color: var(--muted); }
|
||||
.scr-tools .tl-form { padding: 12px; border-radius: var(--ds-r-sm); background: var(--ds-surface); border: 1px solid var(--ds-stroke); }
|
||||
.scr-tools .tl-cmd-run { display: flex; gap: 8px; }
|
||||
.scr-tools .tl-out { display: grid; gap: 6px; }
|
||||
.scr-tools .tl-out-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--ds-t-meta); color: var(--muted); }
|
||||
.scr-tools .tl-out pre { max-height: 300px; overflow: auto; margin: 0; border-radius: var(--ds-r-sm); }
|
||||
|
||||
/* owner steps */
|
||||
.scr-tools .tl-owner { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 10px; }
|
||||
.scr-tools .tl-step { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--ds-r); background: var(--ds-inset); border: 1px solid var(--ds-stroke); min-width: 0; }
|
||||
.scr-tools .tl-step-t { display: grid; gap: 4px; flex: 1; min-width: 0; color: var(--ink); font-weight: 600; }
|
||||
.scr-tools .tl-step-t code { font-size: var(--ds-t-micro); color: var(--muted); font-weight: 500; overflow-wrap: anywhere; }
|
||||
Loading…
Add table
Add a link
Reference in a new issue