UI: slab brand mark replacing checkmark, header aligned to page column, flatter controls
This commit is contained in:
Barely Removable
parent
fa5467e55d
commit
527558bef2
4 changed files with 73 additions and 46 deletions
|
|
@ -90,24 +90,34 @@ main {
|
|||
|
||||
.topbar {
|
||||
position: sticky; top: 0; z-index: 20;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
gap: 16px; flex-wrap: wrap;
|
||||
padding: 14px 24px;
|
||||
background: rgba(8, 12, 20, .82);
|
||||
-webkit-backdrop-filter: blur(14px) saturate(1.4);
|
||||
backdrop-filter: blur(14px) saturate(1.4);
|
||||
border-bottom: 1px solid var(--hairline);
|
||||
}
|
||||
/* The bar spans the viewport, but its CONTENTS line up with the page
|
||||
column — the logo sitting hard against a 3440px screen edge while the
|
||||
panels floated in a narrow centre column was the single thing making
|
||||
this read as unfinished rather than designed. */
|
||||
.topbar-inner {
|
||||
max-width: 940px; margin: 0 auto;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
gap: 16px; flex-wrap: wrap;
|
||||
padding: 13px 24px;
|
||||
}
|
||||
/* Holo-foil edge: the rainbow sweep you get tilting a refractor. Purely
|
||||
decorative and it encodes nothing, so it's free to be vivid here where no
|
||||
number lives. Kept from the light theme — it's the app's signature. */
|
||||
number lives — but dialled back from the original full-strength stripe,
|
||||
which was the loudest thing on an otherwise restrained page. */
|
||||
.topbar::after {
|
||||
content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
|
||||
content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px;
|
||||
background: linear-gradient(90deg,
|
||||
#ff5f8f, #ffb347, #ffe66d, #3ddcc0, #4d9bff, #a97bff, #ff5f8f);
|
||||
opacity: .9;
|
||||
opacity: .5;
|
||||
}
|
||||
.topbar h1 {
|
||||
color: #fff; font-size: 16px; font-weight: 600; letter-spacing: -.005em;
|
||||
}
|
||||
.topbar h1 { color: #fff; letter-spacing: .005em; }
|
||||
|
||||
.topbar .btn {
|
||||
background: var(--accent-2); color: #04231d;
|
||||
|
|
@ -120,41 +130,34 @@ main {
|
|||
}
|
||||
.topbar .btn-quiet:hover { background: rgba(255, 255, 255, .13); filter: none; }
|
||||
|
||||
.brand { display: flex; align-items: center; gap: 12px; }
|
||||
.brand { display: flex; align-items: center; gap: 11px; }
|
||||
|
||||
/* Brand mark: a graded slab, drawn in plain CSS. A rounded card outline with
|
||||
a check — "this one's been looked at" — rather than any single game's
|
||||
iconography, since this grades anything PSA does. */
|
||||
.brand-mark {
|
||||
position: relative; flex: none;
|
||||
width: 30px; height: 30px; border-radius: 8px;
|
||||
background: linear-gradient(150deg, var(--accent-2), var(--accent) 70%, #a97bff);
|
||||
box-shadow:
|
||||
inset 0 0 0 1.5px rgba(255, 255, 255, .34),
|
||||
0 2px 10px rgba(77, 155, 255, .45);
|
||||
}
|
||||
.brand-mark::after {
|
||||
content: ''; position: absolute; left: 8px; top: 8px;
|
||||
width: 9px; height: 5.5px;
|
||||
border-left: 2.2px solid #04231d; border-bottom: 2.2px solid #04231d;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
/* Brand mark: a graded slab — case, label, and the card sealed inside.
|
||||
Drawn as flat two-tone geometry rather than the gradient-blob-with-a-
|
||||
checkmark it replaced: that read as a generic app badge and said nothing
|
||||
about grading. Thin strokes and no glow keep it legible at 22px. */
|
||||
.brand-mark { flex: none; width: 21px; height: 26px; display: block; }
|
||||
.brand-mark .mark-case { stroke: var(--accent); }
|
||||
.brand-mark .mark-label { fill: var(--accent-2); }
|
||||
.brand-mark .mark-card { fill: var(--accent); opacity: .34; }
|
||||
|
||||
.topbar-actions { display: flex; gap: 9px; flex-wrap: wrap; }
|
||||
|
||||
/* ------------------------------------------------------------ controls */
|
||||
|
||||
/* Flat accent fill with a plain shadow. The previous gradient-plus-coloured-
|
||||
glow made every button feel like the page's main event, which flattened
|
||||
the hierarchy — the grade result should be the loudest thing here, not
|
||||
the controls. */
|
||||
.btn {
|
||||
font: inherit; font-weight: 550; font-size: 14.5px;
|
||||
padding: 9px 17px; border-radius: 10px; cursor: pointer;
|
||||
background: linear-gradient(180deg,
|
||||
color-mix(in srgb, var(--accent) 92%, #fff),
|
||||
var(--accent));
|
||||
font: inherit; font-weight: 600; font-size: 14.5px;
|
||||
padding: 9px 17px; border-radius: 9px; cursor: pointer;
|
||||
background: var(--accent);
|
||||
color: #04121f;
|
||||
border: 1px solid transparent;
|
||||
text-decoration: none; display: inline-block; line-height: 1.4;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(77, 155, 255, .22);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
|
||||
transition: filter .13s ease, transform .13s ease, background .13s ease;
|
||||
}
|
||||
.btn:hover { filter: brightness(1.08); }
|
||||
|
|
@ -217,9 +220,15 @@ textarea { resize: vertical; min-height: 64px; }
|
|||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
/* A rule under the heading gives each panel a real header band instead of
|
||||
a title floating above loose content — the cheapest structural cue there
|
||||
is, and what most separates "designed" from "stacked divs". Suppressed
|
||||
inside modals, which set their own tighter header treatment below. */
|
||||
.panel-head {
|
||||
display: flex; align-items: baseline; justify-content: space-between;
|
||||
gap: 12px; flex-wrap: wrap; margin-bottom: 6px;
|
||||
gap: 12px; flex-wrap: wrap;
|
||||
padding-bottom: 13px; margin-bottom: 4px;
|
||||
border-bottom: 1px solid var(--hairline);
|
||||
}
|
||||
.hint { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
|
||||
.search-status {
|
||||
|
|
@ -341,7 +350,7 @@ textarea { resize: vertical; min-height: 64px; }
|
|||
line under the title. Pin it: title takes the slack, × stays top-right. */
|
||||
.modal .panel-head {
|
||||
flex-wrap: nowrap; align-items: flex-start; gap: 16px;
|
||||
margin-bottom: 14px;
|
||||
padding-bottom: 0; margin-bottom: 12px; border-bottom: none;
|
||||
}
|
||||
.modal .panel-head h2 { flex: 1; min-width: 0; }
|
||||
.modal .close { flex: none; margin-top: 1px; }
|
||||
|
|
@ -365,12 +374,17 @@ textarea { resize: vertical; min-height: 64px; }
|
|||
}
|
||||
.spacer { flex: 1; }
|
||||
|
||||
/* Informational by default — accent, not amber. The shooting guidance
|
||||
("front straight-on is the minimum") is instruction, not a caution, and
|
||||
colouring it like a warning spent the page's only alarm colour on
|
||||
something that never needed it. Genuine cautions opt into .note-warn. */
|
||||
.note {
|
||||
font-size: 13px; line-height: 1.55; color: var(--ink-2);
|
||||
background: var(--surface-2); border: 1px solid var(--hairline);
|
||||
border-left: 3px solid var(--warning);
|
||||
border-left: 3px solid var(--accent);
|
||||
border-radius: 8px; padding: 12px 14px; margin-top: 14px;
|
||||
}
|
||||
.note-warn { border-left-color: var(--warning); }
|
||||
.note-flag {
|
||||
border-left-color: var(--critical);
|
||||
color: var(--critical);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue