mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-17 16:46:31 +03:00
532 lines
38 KiB
CSS
532 lines
38 KiB
CSS
/* ============================================================
|
|
Screen 08: boundary style.
|
|
|
|
What tells the reader one section has ended and the next has begun. Four
|
|
answers, in order of how much material they spend: nothing, a line, a
|
|
change of ground, an edge you can see.
|
|
|
|
Bands are mixed from the artboard's own ink and ground rather than named
|
|
colors, so a drenched page separates with a lighter wash of its primary
|
|
instead of turning grey.
|
|
|
|
The tokens moved here are section-scale, and they are the grounds and edges
|
|
themselves. Depth works at element scale and only ever adds to what is set
|
|
here, as a shadow or as a tonal overlay, so the two answers compose rather
|
|
than overwrite each other.
|
|
============================================================ */
|
|
|
|
/* The four answers differ in material, not in vertical rhythm: a tint, a
|
|
hairline, an inset, an edge. None of them pads the proof band, because on the
|
|
desktop artboard that band is a fixed grid row and the row heights belong to
|
|
the layout answer on screen 07. Padding it was not buying air, it was
|
|
claiming room the row did not have: the copy overflowed the padding box
|
|
downward, which is why a tinted band read as squeezed and sat low in its own
|
|
tint, and why the open answer quietly stretched the row and shifted every
|
|
section under it. */
|
|
|
|
/* ── Open space ──────────────────────────────────────────────
|
|
Every rule off and every ground the same, so the only thing left holding
|
|
the sections apart is the air between them. */
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="open-space"]) .picker-preview-boundaries,
|
|
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="open-space"]:checked)) [data-carry] {
|
|
--pvs-divider-w: 0px;
|
|
--pvs-band: transparent;
|
|
--pvs-band-alt: transparent;
|
|
--pvs-band-top: transparent;
|
|
--pvs-panel: transparent;
|
|
--pvs-panel-edge-w: 0px;
|
|
--pvs-panel-pad: 0px;
|
|
--pvs-proof-inset: 0px;
|
|
}
|
|
|
|
/* ── Thin dividers ───────────────────────────────────────────
|
|
One hairline per boundary and nothing else: at the nav, above and below
|
|
the proof band, between its columns, and over the footer. */
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="thin-dividers"]) .picker-preview-boundaries,
|
|
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="thin-dividers"]:checked)) [data-carry] {
|
|
--pvs-divider-w: 1px;
|
|
--pvs-divider-c: color-mix(in oklab, var(--pvs-ink) 24%, var(--pvs-ground));
|
|
--pvs-band: transparent;
|
|
--pvs-band-alt: transparent;
|
|
--pvs-band-top: transparent;
|
|
--pvs-panel: transparent;
|
|
--pvs-panel-edge-w: 0px;
|
|
--pvs-panel-pad: 0px;
|
|
--pvs-proof-inset: 0px;
|
|
}
|
|
|
|
/* ── Surface changes ─────────────────────────────────────────
|
|
No lines at all. Chrome sits on one tone, the proof band on another, and
|
|
the boundary is wherever the ground changes under your eye. */
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="surface-changes"]) .picker-preview-boundaries,
|
|
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="surface-changes"]:checked)) [data-carry] {
|
|
--pvs-divider-w: 0px;
|
|
--pvs-band: color-mix(in oklab, var(--pvs-ink) 7%, var(--pvs-ground));
|
|
--pvs-band-alt: color-mix(in oklab, var(--pvs-ink) 13%, var(--pvs-ground));
|
|
--pvs-band-top: color-mix(in oklab, var(--pvs-ink) 7%, var(--pvs-ground));
|
|
--pvs-panel: transparent;
|
|
--pvs-panel-edge-w: 0px;
|
|
--pvs-panel-pad: 0px;
|
|
--pvs-proof-inset: 0px;
|
|
}
|
|
|
|
/* ── Cards and panels ────────────────────────────────────────
|
|
Content moves inside containers. The proof band pulls in off the page
|
|
margins and grows an edge, the cards do the same, and the page reads as a
|
|
set of objects on a ground rather than a run of sections. */
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="cards-and-panels"]) .picker-preview-boundaries,
|
|
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="cards-and-panels"]:checked)) [data-carry] {
|
|
--pvs-divider-w: 0px;
|
|
--pvs-band: transparent;
|
|
--pvs-band-alt: color-mix(in oklab, var(--pvs-ink) 5%, var(--pvs-ground));
|
|
--pvs-band-top: transparent;
|
|
--pvs-panel: color-mix(in oklab, var(--pvs-ink) 5%, var(--pvs-ground));
|
|
--pvs-panel-edge: color-mix(in oklab, var(--pvs-ink) 20%, var(--pvs-ground));
|
|
--pvs-panel-edge-w: 1px;
|
|
--pvs-panel-pad: 5%;
|
|
--pvs-proof-inset: var(--pvs-gutter);
|
|
}
|
|
|
|
/* The proof band is the one section that can become a container without the
|
|
page being restructured, so it carries the difference between a tinted
|
|
band and a panel: the inset pulls it off the page margins and the edge
|
|
only exists where an inset was asked for. */
|
|
[data-carry] .ps-desktop > .ps-proof {
|
|
margin-inline: var(--pvs-proof-inset, 0px);
|
|
border: var(--pvs-panel-edge-w) solid var(--pvs-panel-edge);
|
|
border-radius: var(--pvs-radius-surface);
|
|
}
|
|
|
|
/* The handset's chrome carries its own tint in the base artboard, which is a
|
|
boundary the open answers did not ask for. Both ends take the band. */
|
|
[data-carry] .ps-phone-top,
|
|
[data-carry] .ps-phone-footer {
|
|
background-color: var(--pvs-band-top, var(--pvs-surface));
|
|
}
|
|
|
|
/* Percentage padding resolves against the card's own width, so one value
|
|
holds at both artboard sizes instead of swamping the handset. */
|
|
[data-carry] .ps-gallery-item {
|
|
padding: var(--pvs-panel-pad, 0px);
|
|
}
|
|
|
|
/* The handset's card row is already the block closest to the footer, so it
|
|
takes a shorter version of the same padding rather than growing into it. */
|
|
[data-carry] .ps-phone-body .ps-gallery-item {
|
|
padding: calc(var(--pvs-panel-pad, 0px) * 0.5);
|
|
}
|
|
|
|
/* ── The three region bodies ──────────────────────────────────
|
|
A shell, a document, and an index are separated in different places from a
|
|
landing page, so the same four answers are spent on different parts. What is
|
|
shared is the material: the answers above set a hairline, a ground, or an edge,
|
|
and each body below reads the one it has a use for.
|
|
|
|
The dividing rules on these bodies were hardcoded hairlines, which is the
|
|
thing this screen is asking about. A shell with a permanent rule down its rail
|
|
answers Open space with a line still on screen. */
|
|
[data-carry] :is(.ps-ops-rail, .ps-ops-main, .ps-docs-rail) {
|
|
border-right: var(--pvs-divider-w) solid var(--pvs-divider-c);
|
|
}
|
|
|
|
/* A table is a run of sections stacked, so the hairline answer rules it. The
|
|
plot's own baseline is not in here: an axis is part of the chart's drawing and
|
|
not a boundary between two things. */
|
|
[data-carry] .ps-ops-table {
|
|
border-top: var(--pvs-divider-w) solid var(--pvs-divider-c);
|
|
}
|
|
|
|
[data-carry] .ps-ops-row + .ps-ops-row {
|
|
border-top: var(--pvs-divider-w) solid var(--pvs-divider-c);
|
|
}
|
|
|
|
[data-carry] .ps-index-row + .ps-index-row,
|
|
[data-carry] .ps-index-rail {
|
|
border-top: var(--pvs-divider-w) solid var(--pvs-divider-c);
|
|
}
|
|
|
|
[data-carry] :is(.ps-index-row + .ps-index-row, .ps-index-rail) {
|
|
padding-top: calc(var(--pvs-divider-w) * 8);
|
|
}
|
|
|
|
/* Grounds. Each one fills its own region and stops at the page margin rather than
|
|
bleeding to the frame edge. That is the same claim the layout screen's header
|
|
makes about these boards: their regions sit on the page grid, so the rail's
|
|
ground starts where the rail starts, on the first column line. Reaching the
|
|
edge would need the margin restated as a share of a different box, and the two
|
|
percentages do not resolve against the same width, so the tone would land a
|
|
point or two off the very line the board is drawn to check. */
|
|
[data-carry] :is(.ps-ops-rail, .ps-ops-panel, .ps-docs-rail) {
|
|
background-color: var(--pvs-band);
|
|
}
|
|
|
|
/* Alternating grounds are what a run of entries has instead of bands: the second
|
|
entry sits on a different tone from the first, and the boundary is where the
|
|
tone changes. */
|
|
[data-carry] .ps-index-row--flip {
|
|
background-color: var(--pvs-band-alt);
|
|
}
|
|
|
|
/* A table's heading row is the one place on a shell where a change of ground
|
|
does the whole job a rule would have done. */
|
|
[data-carry] .ps-ops-row--head {
|
|
background-color: var(--pvs-band-alt);
|
|
}
|
|
|
|
/* The callout is the document's only container, so it is where this screen's
|
|
answer lands. Its accent edge is not part of the answer: that is what marks
|
|
the block as a callout, and it stays under all three. */
|
|
[data-carry] .ps-docs-note {
|
|
padding: calc(var(--pt-base) * 0.7) calc(var(--pt-base) * 0.9);
|
|
background-color: var(--pvs-band-alt);
|
|
border-left: calc(var(--pt-base) * 0.25) solid var(--pvs-accent-c);
|
|
}
|
|
|
|
/* Cards, on a tool. Offered to Persuade and Operate only, so a shell is the one
|
|
region body that draws it: the chart, the table, and the side panel become
|
|
objects on a ground, and the rules that had been dividing them go, because an
|
|
edge and a hairline saying the same thing twice is the fault the answer after
|
|
Open space is meant to avoid. */
|
|
[data-carry] :is(.ps-ops-chart, .ps-ops-table, .ps-ops-panel) {
|
|
background-color: var(--pvs-panel);
|
|
border: var(--pvs-panel-edge-w) solid var(--pvs-panel-edge);
|
|
}
|
|
|
|
[data-carry] :is(.ps-ops-chart, .ps-ops-table) {
|
|
padding: var(--pvs-panel-pad, 0px);
|
|
}
|
|
|
|
/* An open rail plate is a state and reads as one already, so under the card
|
|
answer the rest of the rail joins it rather than the plate growing an edge. */
|
|
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="cards-and-panels"]:checked)) [data-carry] .ps-ops-item,
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="cards-and-panels"]) .picker-preview-boundaries .ps-ops-item {
|
|
background-color: var(--pvs-panel);
|
|
}
|
|
|
|
/* Gallery parity (plan-18): the persuade artboard kept on the boundaries and
|
|
corners screens flattens its shadows and re-grids the proof strip, ported
|
|
from the gallery's previews-38-41-proof-spacing block. Scoped to the two
|
|
screens' own stages; document proofs and hub clones keep carried shadows
|
|
through the dcx mirrors. */
|
|
:is(.picker-screen[data-screen="08"], .picker-screen[data-screen="09"]) .picker-board-stage > [data-artboard][data-surface="persuade"] :is(*, *::before, *::after) {
|
|
box-shadow: none !important;
|
|
text-shadow: none !important;
|
|
}
|
|
|
|
:is(.picker-screen[data-screen="08"], .picker-screen[data-screen="09"]) .picker-board-stage > [data-artboard][data-surface="persuade"] .ps-desktop .ps-proof {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
|
|
}
|
|
|
|
:is(.picker-screen[data-screen="08"], .picker-screen[data-screen="09"]) .picker-board-stage > [data-artboard][data-surface="persuade"] .ps-phone .ps-proof {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
|
|
position: relative;
|
|
top: 10px;
|
|
}
|
|
|
|
:is(.picker-screen[data-screen="08"], .picker-screen[data-screen="09"]) .picker-board-stage > [data-artboard][data-surface="persuade"] .ps-phone .ps-editorial-copy {
|
|
margin-top: 16px !important;
|
|
}
|
|
|
|
:is(.picker-screen[data-screen="08"], .picker-screen[data-screen="09"]) .picker-board-stage > [data-artboard][data-surface="persuade"] .ps-desktop .ps-proof-item {
|
|
padding-right: 24px !important;
|
|
}
|
|
|
|
:is(.picker-screen[data-screen="08"], .picker-screen[data-screen="09"]) .picker-board-stage > [data-artboard][data-surface="persuade"] .ps-proof-divider {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Cells 40 and 41 only: band washes under surface-changes, and both band
|
|
rules under cards-and-panels, exactly the gallery's cellNum conditionals. */
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="surface-changes"]) .picker-screen[data-screen="08"] .picker-board-stage > [data-artboard][data-surface="persuade"] .ps-proof,
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="surface-changes"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > [data-artboard][data-surface="persuade"] .ps-proof,
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="cards-and-panels"]) .picker-screen[data-screen="08"] .picker-board-stage > [data-artboard][data-surface="persuade"] .ps-proof,
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="cards-and-panels"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > [data-artboard][data-surface="persuade"] .ps-proof {
|
|
background-color: color-mix(in oklab, var(--pvs-band-alt) 65%, white) !important;
|
|
}
|
|
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="surface-changes"]) .picker-screen[data-screen="08"] .picker-board-stage > [data-artboard][data-surface="persuade"] .ps-footer,
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="surface-changes"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > [data-artboard][data-surface="persuade"] .ps-footer,
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="cards-and-panels"]) .picker-screen[data-screen="08"] .picker-board-stage > [data-artboard][data-surface="persuade"] .ps-footer,
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="cards-and-panels"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > [data-artboard][data-surface="persuade"] .ps-footer {
|
|
background-color: color-mix(in oklab, var(--pvs-band) 65%, white) !important;
|
|
}
|
|
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="surface-changes"]) .picker-screen[data-screen="08"] .picker-board-stage > [data-artboard][data-surface="persuade"] .ps-phone .ps-proof,
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="surface-changes"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > [data-artboard][data-surface="persuade"] .ps-phone .ps-proof {
|
|
column-gap: 16px !important;
|
|
padding-right: var(--pvs-gutter) !important;
|
|
}
|
|
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="cards-and-panels"]) .picker-screen[data-screen="08"] .picker-board-stage > [data-artboard][data-surface="persuade"] .ps-gallery-item,
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="cards-and-panels"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > [data-artboard][data-surface="persuade"] .ps-gallery-item {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* ==== Derived stage (plan-18): screens 08, 09, 10 mount strategy-preview
|
|
clones for the surfaces the gallery derives. Geometry mirrors the artboard
|
|
footprint; colors are locked to the restrained base for operate, read and
|
|
experience clones, matching the gallery's baseCellId map. ==== */
|
|
:is(.picker-screen[data-screen="08"], .picker-screen[data-screen="09"], .picker-screen[data-screen="10"]) .picker-board-stage > .picker-preview {
|
|
grid-row: 2;
|
|
aspect-ratio: 1.865 / 1;
|
|
width: 100%;
|
|
--pv-primary: var(--pkc-primary, var(--ks-champagne));
|
|
--pv-secondary: var(--pkc-secondary, var(--ks-patina));
|
|
--pv-tertiary: var(--pkc-tertiary, var(--ks-kinpaku));
|
|
--pv-neutral: var(--pkc-neutral, var(--ks-lacquer-raised));
|
|
--pv-n-ink: var(--pkc-n-ink, var(--ks-champagne));
|
|
--pv-p-ink: var(--pkc-p-ink, var(--ks-champagne));
|
|
--derived-rule: color-mix(in oklab, var(--pv-strong) 24%, var(--pv-neutral));
|
|
--derived-band: color-mix(in oklab, var(--pv-strong) 7%, var(--pv-neutral));
|
|
--derived-band-alt: color-mix(in oklab, var(--pv-strong) 13%, var(--pv-neutral));
|
|
--derived-panel: color-mix(in oklab, var(--pv-strong) 5%, var(--pv-neutral));
|
|
--derived-panel-edge: color-mix(in oklab, var(--pv-strong) 20%, var(--pv-neutral));
|
|
}
|
|
|
|
/* Restrained lock for the non-persuade clones, mirrored from the strategy
|
|
remap so the derived boards hold the gallery's base regardless of the
|
|
run's strategy answer. */
|
|
:is(.picker-screen[data-screen="08"], .picker-screen[data-screen="09"], .picker-screen[data-screen="10"]) .picker-board-stage > .picker-preview:not([data-surface="persuade"]) {
|
|
--pv-secondary: color-mix(in oklab, var(--pkc-neutral) 78%, var(--pkc-n-ink));
|
|
--pv-tertiary: color-mix(in oklab, var(--pkc-neutral) 86%, var(--pkc-n-ink));
|
|
--pv-t-ink: var(--pkc-n-ink);
|
|
--pv-t-on-t: var(--pkc-n-ink);
|
|
--pv-t-on-n: color-mix(in oklab, var(--pkc-n-ink) 62%, var(--pkc-neutral));
|
|
--pv-t-on-p: var(--pkc-p-ink);
|
|
}
|
|
|
|
:is(.picker-screen[data-screen="08"], .picker-screen[data-screen="09"], .picker-screen[data-screen="10"]) .picker-board-stage > .picker-preview.picker-preview--docs {
|
|
--pd-quote: var(--pd-ink);
|
|
}
|
|
|
|
:is(.picker-screen[data-screen="08"], .picker-screen[data-screen="09"], .picker-screen[data-screen="10"]) .picker-board-stage > .picker-preview.picker-preview--docs :is(.pd-note-dot, .pd-note-lines i) {
|
|
background: var(--pd-ink);
|
|
}
|
|
|
|
/* Wireframe weights. The gallery derives these boards from the strategy
|
|
stage, so the ops, docs and portfolio clones carry that stage's 1.35 desktop
|
|
step and nothing else; their bar geometry stays the authored base. */
|
|
:is(.picker-screen[data-screen="08"], .picker-screen[data-screen="09"], .picker-screen[data-screen="10"]) .picker-board-stage > .picker-preview:is(.picker-preview--ops, .picker-preview--docs, .picker-preview--gallery) .pv-desktop {
|
|
--pv-text: 1.35;
|
|
}
|
|
|
|
/* Boundaries read (gallery cells 45 to 47) is the one derived group the
|
|
gallery reweights: both viewports step to 1.65 and the rail dot and note dot
|
|
widen. Corners read and depth read draw at the base weight. */
|
|
.picker-screen[data-screen="08"] .picker-board-stage > .picker-preview.picker-preview--docs :is(.pv-desktop, .pv-phone) {
|
|
--pv-text: 1.65;
|
|
}
|
|
|
|
.picker-screen[data-screen="08"] .picker-board-stage > .picker-preview.picker-preview--docs .pd-item i { width: calc(4.07 * var(--pv-x)); }
|
|
.picker-screen[data-screen="08"] .picker-board-stage > .picker-preview.picker-preview--docs .pd-note-dot { width: calc(4.07 * var(--pv-x)); }
|
|
|
|
/* Experience cap avatars on derived boards, from the gallery derived sheet. */
|
|
:is(.picker-screen[data-screen="08"], .picker-screen[data-screen="09"], .picker-screen[data-screen="10"]) .picker-board-stage > .picker-preview--gallery .pv-desktop .pg-cap { padding-top: 5.2cqh; gap: 2.6cqh; }
|
|
:is(.picker-screen[data-screen="08"], .picker-screen[data-screen="09"], .picker-screen[data-screen="10"]) .picker-board-stage > .picker-preview--gallery .pv-desktop .pg-cap::before {
|
|
content: "";
|
|
display: block;
|
|
width: calc(11.5 * var(--pv-x));
|
|
aspect-ratio: 1;
|
|
border: 1px solid color-mix(in oklab, var(--pv-secondary) 55%, var(--pv-neutral));
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, color-mix(in oklab, var(--pv-secondary) 24%, var(--pv-neutral)), color-mix(in oklab, var(--pv-secondary) 46%, var(--pv-neutral)));
|
|
}
|
|
|
|
/* Phone field chevron alignment on ops clones, from the gallery derived sheet
|
|
(cells 44 and 55-58; the corners screen applies it under every option). */
|
|
:is(.picker-screen[data-screen="09"], .picker-screen[data-screen="10"]) .picker-board-stage > .picker-preview .pv-phone .po-field > .po-chev { align-self: center; transform: translateY(-25%) rotate(45deg); }
|
|
|
|
/* Boundary additions on derived clones: the base geometry stays fixed; only
|
|
separation changes. Ported from the gallery derived sheet. */
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="open-space"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.pv-nav, .po-side, .po-main, .pd-side),
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="open-space"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.pv-nav, .po-side, .po-main, .pd-side) {
|
|
border-color: transparent !important;
|
|
}
|
|
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="open-space"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.po-divider, .pg-row--flip, .pg-rail),
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="open-space"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.po-divider, .pg-row--flip, .pg-rail) {
|
|
border-color: transparent !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="open-space"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview .po-divider,
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="open-space"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview .po-divider {
|
|
background: transparent !important;
|
|
}
|
|
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="thin-dividers"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview:is(.picker-preview--ops, .picker-preview--docs, .picker-preview--gallery) .pv-nav,
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="thin-dividers"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview:is(.picker-preview--ops, .picker-preview--docs, .picker-preview--gallery) .pv-nav {
|
|
border-bottom: 1px solid var(--derived-rule) !important;
|
|
}
|
|
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="thin-dividers"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.po-side, .po-main, .pd-side),
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="thin-dividers"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.po-side, .po-main, .pd-side) {
|
|
border-right: 1px solid var(--derived-rule) !important;
|
|
}
|
|
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="thin-dividers"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview .po-divider,
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="thin-dividers"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview .po-divider {
|
|
background: var(--derived-rule) !important;
|
|
}
|
|
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="thin-dividers"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview .po-row + .po-row,
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="thin-dividers"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview .po-row + .po-row {
|
|
box-shadow: inset 0 1px 0 var(--derived-rule);
|
|
}
|
|
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="thin-dividers"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview:not([data-surface="experience"]) .pg-row--flip,
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="thin-dividers"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview:not([data-surface="experience"]) .pg-row--flip {
|
|
box-shadow: inset 0 1px 0 var(--derived-rule);
|
|
}
|
|
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="thin-dividers"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview:not([data-surface="experience"]) .pg-rail,
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="thin-dividers"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview:not([data-surface="experience"]) .pg-rail {
|
|
border-top: 1px solid var(--derived-rule);
|
|
}
|
|
|
|
/* Cell 49: experience thin-dividers redraws its flip row and phone image
|
|
separations by pseudo-element rules. */
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="thin-dividers"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-row--flip,
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="thin-dividers"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-row--flip {
|
|
position: relative;
|
|
margin-top: 10cqh !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="thin-dividers"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-row--flip::before,
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="thin-dividers"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-row--flip::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -5cqh;
|
|
right: 0;
|
|
left: 0;
|
|
height: 1px;
|
|
background: var(--derived-rule);
|
|
}
|
|
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="thin-dividers"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-rail,
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="thin-dividers"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-rail,
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="surface-changes"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-rail,
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="surface-changes"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-rail {
|
|
border-top: 0 !important;
|
|
}
|
|
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="thin-dividers"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-phone-body > .pg-cap + .pv-image,
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="thin-dividers"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-phone-body > .pg-cap + .pv-image {
|
|
margin-top: 8cqh !important;
|
|
overflow: visible;
|
|
}
|
|
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="thin-dividers"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-phone-body > .pg-cap + .pv-image::before,
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="thin-dividers"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-phone-body > .pg-cap + .pv-image::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -4cqh;
|
|
right: 0;
|
|
left: 0;
|
|
height: 1px;
|
|
background: var(--derived-rule);
|
|
}
|
|
|
|
/* Cell 50: experience surface-changes. */
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="surface-changes"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-row--flip,
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="surface-changes"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-row--flip {
|
|
margin-top: 5cqh !important;
|
|
padding-block: 5cqh !important;
|
|
box-shadow: none !important;
|
|
background: color-mix(in oklab, var(--derived-band-alt) 60%, white 40%) !important;
|
|
}
|
|
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="surface-changes"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-phone-body > .pg-cap + .pv-image,
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="surface-changes"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-phone-body > .pg-cap + .pv-image {
|
|
margin-top: 8cqh !important;
|
|
}
|
|
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="surface-changes"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-phone-body,
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="surface-changes"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pg-phone-body {
|
|
background: linear-gradient(to bottom, transparent 0 50%, color-mix(in oklab, var(--derived-band-alt) 60%, white 40%) 50% 100%) !important;
|
|
}
|
|
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="surface-changes"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pv-phone .pv-tabbar,
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="surface-changes"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="experience"] .pv-phone .pv-tabbar {
|
|
background: color-mix(in oklab, var(--derived-band-alt) 60%, white 40%) !important;
|
|
}
|
|
|
|
/* Surface changes on every derived clone. */
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="surface-changes"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.pv-nav, .po-side, .po-main, .pd-side),
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="surface-changes"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.pv-nav, .po-side, .po-main, .pd-side) {
|
|
border-color: transparent !important;
|
|
}
|
|
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="surface-changes"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.pv-nav, .pv-phone-top, .pv-tabbar),
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="surface-changes"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.pv-nav, .pv-phone-top, .pv-tabbar) {
|
|
background: var(--derived-band) !important;
|
|
}
|
|
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="surface-changes"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.po-side, .po-panel, .pd-side),
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="surface-changes"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.po-side, .po-panel, .pd-side) {
|
|
background: var(--derived-band) !important;
|
|
}
|
|
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="surface-changes"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview:not([data-surface="experience"]) :is(.pd-note, .pg-row--flip),
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="surface-changes"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview:not([data-surface="experience"]) :is(.pd-note, .pg-row--flip) {
|
|
background: var(--derived-band-alt) !important;
|
|
}
|
|
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="surface-changes"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview .po-divider,
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="surface-changes"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview .po-divider {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Cards and panels. */
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="cards-and-panels"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.pv-nav, .po-side, .po-main),
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="cards-and-panels"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.pv-nav, .po-side, .po-main) {
|
|
border-color: transparent !important;
|
|
}
|
|
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="cards-and-panels"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview .po-divider,
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="cards-and-panels"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview .po-divider {
|
|
background: transparent !important;
|
|
}
|
|
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="cards-and-panels"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.po-side, .po-chart, .po-rows, .po-panel, .po-phone-body .po-chart, .po-phone-body .po-field, .po-phone-body .po-prow),
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="cards-and-panels"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview :is(.po-side, .po-chart, .po-rows, .po-panel, .po-phone-body .po-chart, .po-phone-body .po-field, .po-phone-body .po-prow) {
|
|
background: var(--derived-panel) !important;
|
|
border: 1px solid var(--derived-panel-edge) !important;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="cards-and-panels"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview .po-chart,
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="cards-and-panels"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview .po-chart {
|
|
padding-inline: calc(3 * var(--pv-x));
|
|
}
|
|
|
|
/* Cell 44: operate cards-and-panels details. */
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="cards-and-panels"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="operate"] .pv-desktop .po-chart,
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="cards-and-panels"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="operate"] .pv-desktop .po-chart {
|
|
padding: calc(3 * var(--pv-x)) calc(5 * var(--pv-x)) !important;
|
|
}
|
|
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="cards-and-panels"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="operate"] .pv-phone .po-toggle,
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="cards-and-panels"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="operate"] .pv-phone .po-toggle {
|
|
margin-left: auto !important;
|
|
margin-right: 12px !important;
|
|
padding-right: 12px !important;
|
|
}
|
|
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="cards-and-panels"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="operate"] .pv-phone .po-prow,
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="cards-and-panels"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="operate"] .pv-phone .po-prow {
|
|
padding-left: 12px !important;
|
|
}
|
|
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="cards-and-panels"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="operate"] .pv-phone .po-field > .po-chev,
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="cards-and-panels"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview[data-surface="operate"] .pv-phone .po-field > .po-chev {
|
|
align-self: center !important;
|
|
transform: translateY(-25%) rotate(45deg) !important;
|
|
}
|
|
|
|
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="cards-and-panels"]) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview .po-rows,
|
|
#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="cards-and-panels"]:checked) .picker-screen[data-screen="08"] .picker-board-stage > .picker-preview .po-rows {
|
|
padding-inline: calc(2 * var(--pv-x));
|
|
}
|