| 182 |
182 |
|
--category-five: #a29bfe;
|
| 183 |
183 |
|
--category-six: #17a2b8;
|
| 184 |
184 |
|
--overlay: rgba(3, 1, 0, 0.5);
|
|
185 |
+ |
/* What a surface floating over the page casts onto it. Same tone as the
|
|
186 |
+ |
scrim above and pinned near-black on every theme, because a shadow is
|
|
187 |
+ |
absence of light rather than a tint. layout.css composes the geometry
|
|
188 |
+ |
into --elevation-overlay; a consumer that needs a different geometry
|
|
189 |
+ |
builds its own from this token rather than from a literal. */
|
|
190 |
+ |
--elevation: rgba(3, 1, 0, 0.18);
|
| 185 |
191 |
|
|
| 186 |
192 |
|
/* --------------------------------------------------------------------
|
| 187 |
193 |
|
APP-LOCAL CONSTANTS, not theme colors, not derivable from intents.
|
| 245 |
251 |
|
--z-banner: 80; /* page-level interruptions, above everything */
|
| 246 |
252 |
|
--z-skip-link: 90; /* the keyboard escape hatch outranks all of it */
|
| 247 |
253 |
|
|
| 248 |
|
- |
/* Shadow scale.
|
| 249 |
|
- |
--shadow-1/-2/-3 are blurred elevation (true floating: popovers,
|
| 250 |
|
- |
dropdowns, modals). --shadow-raised/-card/-inset are everyday depth,
|
| 251 |
|
- |
buttons feel pressable, cards feel layered, inputs feel recessed. Pick
|
| 252 |
|
- |
by role: blurred = floats over page, bevel = is part of page.
|
|
254 |
+ |
/* Depth, and there are only two kinds of it.
|
| 253 |
255 |
|
|
| 254 |
|
- |
The three used to be hard offsets over two literal greys, #bbb and #ddd,
|
| 255 |
|
- |
picked against parchment and then applied to all 31 themes a creator can
|
| 256 |
|
- |
select; on nord they were a light smear on a dark panel. They now alias
|
| 257 |
|
- |
the bevel pair from layout.css, which makeover derives from each theme's
|
| 258 |
|
- |
own raised surface, so no literal survives and every consumer re-themes
|
| 259 |
|
- |
without being opened. --shadow-raised and --shadow-card collapse onto
|
| 260 |
|
- |
one value: a bevel is an edge rather than a distance, so there is no
|
| 261 |
|
- |
heavier and lighter version of it to pick between. */
|
|
256 |
+ |
A surface IN the page takes a bevel: an edge, not a distance. That is
|
|
257 |
+ |
--shadow-raised/-card/-inset, aliasing the pair layout.css derives from
|
|
258 |
+ |
each theme's own raised surface. --shadow-raised and --shadow-card
|
|
259 |
+ |
collapse onto one value because an edge has no heavier and lighter
|
|
260 |
+ |
version to pick between.
|
|
261 |
+ |
|
|
262 |
+ |
A surface floating OVER the page takes --elevation-overlay, also from
|
|
263 |
+ |
layout.css, derived from the theme's page colour. Menus, toasts,
|
|
264 |
+ |
popovers, dropdowns and pickers float. A card, a plate and a framed
|
|
265 |
+ |
image do not; they are .raised.
|
|
266 |
+ |
|
|
267 |
+ |
There used to be a third kind, --shadow-1/-2/-3, a blurred scale of
|
|
268 |
+ |
rgba-black literals picked against parchment and then applied to all 31
|
|
269 |
+ |
themes a creator can select. It was the same defect the bevel trio was
|
|
270 |
+ |
rewritten to undo, one scale later, and the elevation intent is what
|
|
271 |
+ |
replaced it. No literal survives here now, so every consumer re-themes
|
|
272 |
+ |
without being opened. Geometry stays consumer-side: a site that needs a
|
|
273 |
+ |
different blur composes it from var(--elevation), never from a literal. */
|
| 262 |
274 |
|
--shadow-raised: var(--bevel-raised);
|
| 263 |
275 |
|
--shadow-card: var(--bevel-raised);
|
| 264 |
276 |
|
--shadow-inset: var(--bevel-inset);
|
| 265 |
|
- |
--shadow-1: 0 1px 3px rgba(0, 0, 0, 0.06);
|
| 266 |
|
- |
--shadow-2: 0 2px 8px rgba(0, 0, 0, 0.10);
|
| 267 |
|
- |
--shadow-3: 0 4px 12px rgba(0, 0, 0, 0.15);
|
| 268 |
277 |
|
}
|
| 269 |
278 |
|
|
| 270 |
279 |
|
/* Reset */
|
| 798 |
807 |
|
background: var(--surface-page);
|
| 799 |
808 |
|
border: 1px solid var(--border);
|
| 800 |
809 |
|
min-width: 180px;
|
| 801 |
|
- |
box-shadow: var(--shadow-2);
|
|
810 |
+ |
box-shadow: var(--elevation-overlay);
|
| 802 |
811 |
|
}
|
| 803 |
812 |
|
|
| 804 |
813 |
|
.tab-overflow-menu .tab {
|
| 1428 |
1437 |
|
padding: var(--gap-page);
|
| 1429 |
1438 |
|
}
|
| 1430 |
1439 |
|
|
|
1440 |
+ |
/* The one former --shadow-3 site that is not a float. The card is the whole
|
|
1441 |
+ |
page's content rather than something laid over it, so it takes .raised
|
|
1442 |
+ |
from layout.css for its surface and its edge, and keeps only the geometry
|
|
1443 |
+ |
the generated primitive does not carry. */
|
| 1431 |
1444 |
|
.buy-page .buy-card {
|
| 1432 |
|
- |
background: var(--surface-overlay);
|
| 1433 |
1445 |
|
border-radius: var(--radius-panel);
|
| 1434 |
1446 |
|
padding: var(--gap-page);
|
| 1435 |
1447 |
|
max-width: 420px;
|
| 1436 |
1448 |
|
width: 100%;
|
| 1437 |
|
- |
box-shadow: var(--shadow-3);
|
| 1438 |
1449 |
|
}
|
| 1439 |
1450 |
|
|
| 1440 |
1451 |
|
.buy-page .cover,
|
| 4890 |
4901 |
|
padding: var(--gap-section);
|
| 4891 |
4902 |
|
font-family: var(--font-mono);
|
| 4892 |
4903 |
|
font-size: var(--text-note);
|
| 4893 |
|
- |
box-shadow: var(--shadow-3);
|
|
4904 |
+ |
box-shadow: var(--elevation-overlay);
|
| 4894 |
4905 |
|
animation: toast-in 0.3s ease-out;
|
| 4895 |
4906 |
|
max-width: 300px;
|
| 4896 |
4907 |
|
display: flex;
|
| 6805 |
6816 |
|
max-height: 300px;
|
| 6806 |
6817 |
|
overflow-y: auto;
|
| 6807 |
6818 |
|
z-index: var(--z-dropdown);
|
| 6808 |
|
- |
box-shadow: var(--shadow-2);
|
|
6819 |
+ |
box-shadow: var(--elevation-overlay);
|
| 6809 |
6820 |
|
}
|
| 6810 |
6821 |
|
.docs-search-result {
|
| 6811 |
6822 |
|
display: flex;
|
| 8034 |
8045 |
|
max-height: 200px;
|
| 8035 |
8046 |
|
overflow-y: auto;
|
| 8036 |
8047 |
|
z-index: var(--z-dropdown);
|
| 8037 |
|
- |
box-shadow: var(--shadow-2);
|
|
8048 |
+ |
box-shadow: var(--elevation-overlay);
|
| 8038 |
8049 |
|
}
|
| 8039 |
8050 |
|
|
| 8040 |
8051 |
|
.suggestion-dropdown.open {
|
| 8149 |
8160 |
|
.collection-picker {
|
| 8150 |
8161 |
|
position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-picker);
|
| 8151 |
8162 |
|
background: var(--surface-page); border: 1px solid var(--border);
|
| 8152 |
|
- |
box-shadow: var(--shadow-2); min-width: 220px;
|
|
8163 |
+ |
box-shadow: var(--elevation-overlay); min-width: 220px;
|
| 8153 |
8164 |
|
}
|
| 8154 |
8165 |
|
.collection-picker-list { max-height: 200px; overflow-y: auto; padding: var(--gap-bound) 0; }
|
| 8155 |
8166 |
|
.collection-picker-item {
|
| 8173 |
8184 |
|
.grid-card-save {
|
| 8174 |
8185 |
|
position: absolute; top: 0.4rem; right: 0.4rem; z-index: var(--z-raised);
|
| 8175 |
8186 |
|
background: var(--surface-page); border-radius: var(--radius-control); padding: var(--gap-bound) var(--gap-peer);
|
| 8176 |
|
- |
box-shadow: var(--shadow-1); opacity: 0;
|
|
8187 |
+ |
box-shadow: var(--elevation-overlay); opacity: 0;
|
| 8177 |
8188 |
|
}
|
| 8178 |
8189 |
|
.grid-card:hover .grid-card-save { opacity: 0.7; }
|
| 8179 |
8190 |
|
.grid-card-save:hover { opacity: 1; }
|
| 8190 |
8201 |
|
.tag-suggest-list {
|
| 8191 |
8202 |
|
display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-picker);
|
| 8192 |
8203 |
|
background: var(--surface-page); border: 1px solid var(--border); border-top: none;
|
| 8193 |
|
- |
box-shadow: var(--shadow-3); max-height: 280px; overflow-y: auto;
|
|
8204 |
+ |
box-shadow: var(--elevation-overlay); max-height: 280px; overflow-y: auto;
|
| 8194 |
8205 |
|
}
|
| 8195 |
8206 |
|
.suggestion-item {
|
| 8196 |
8207 |
|
display: flex; justify-content: space-between; align-items: center;
|
| 10845 |
10856 |
|
top: 100%;
|
| 10846 |
10857 |
|
background: var(--surface-overlay);
|
| 10847 |
10858 |
|
border: 1px solid var(--border);
|
| 10848 |
|
- |
box-shadow: var(--shadow-2);
|
|
10859 |
+ |
box-shadow: var(--elevation-overlay);
|
| 10849 |
10860 |
|
min-width: 160px;
|
| 10850 |
10861 |
|
z-index: var(--z-context);
|
| 10851 |
10862 |
|
}
|
| 11572 |
11583 |
|
kind here by the scale's own rule at the top of this file: the frame reads as
|
| 11573 |
11584 |
|
something laid over the page rather than as part of it.
|
| 11574 |
11585 |
|
|
| 11575 |
|
- |
Scoped to .landing-showcase rather than applied to .carousel-img, and that is
|
| 11576 |
|
- |
the point rather than an inconsistency. The same widget carries creator
|
| 11577 |
|
- |
galleries on /u and /p, where a creator's chosen theme swaps every surface
|
| 11578 |
|
- |
token underneath it; a literal rgba-black offset picked against parchment and
|
| 11579 |
|
- |
pushed onto all 31 themes is the exact mistake --shadow-raised was rewritten
|
| 11580 |
|
- |
to undo. The landing page is brand-owned and always parchment, so the literal
|
| 11581 |
|
- |
is true everywhere it lands. If a themed surface ever wants this, it wants a
|
| 11582 |
|
- |
token derived from its own theme, not this rule widened. */
|
|
11586 |
+ |
Still scoped to .landing-showcase rather than applied to .carousel-img, but
|
|
11587 |
+ |
the reason has changed and is now weaker. It used to be a technical one: the
|
|
11588 |
+ |
rgba-black literal here was picked against parchment, and the same widget
|
|
11589 |
+ |
carries creator galleries on /u and /p where a chosen theme swaps every
|
|
11590 |
+ |
surface token underneath it. That argument is gone with the literal. What is
|
|
11591 |
+ |
left is a look call — the landing frames are screenshots of this site and
|
|
11592 |
+ |
want lifting off their own ground, a creator's gallery images are the
|
|
11593 |
+ |
creator's own — and it belongs to the F2 screenshot pass, not to this file.
|
|
11594 |
+ |
Widening the selector is a one-line change if that pass says so. */
|
| 11583 |
11595 |
|
.landing-showcase .carousel-img {
|
| 11584 |
|
- |
/* Not --shadow-3. That scale is calibrated for popovers and dropdowns, a few
|
| 11585 |
|
- |
hundred pixels across; on a frame this wide a 12px blur disappears, which
|
| 11586 |
|
- |
was measured rather than assumed. The blur scales with the plate instead. */
|
| 11587 |
|
- |
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.24);
|
|
11596 |
+ |
/* Geometry, not colour, is what is local here: --elevation-overlay is
|
|
11597 |
+ |
calibrated for popovers and dropdowns a few hundred pixels across, and on
|
|
11598 |
+ |
a frame this wide its 24px blur disappears, which was measured rather than
|
|
11599 |
+ |
assumed. So the blur scales with the plate and the two layers stack for
|
|
11600 |
+ |
the weight a full-width plate needs, both cast in the theme's own
|
|
11601 |
+ |
--elevation rather than in black. */
|
|
11602 |
+ |
box-shadow: 0 4px 10px var(--elevation), 0 14px 36px var(--elevation);
|
| 11588 |
11603 |
|
/* The shadow falls downward, so it does nothing for the top edge, which is
|
| 11589 |
11604 |
|
exactly where a parchment screenshot dissolves into a parchment page. The
|
| 11590 |
11605 |
|
border is what closes the other three sides. */
|