n.siegfried
6201fcfb4a
The deliberate mobile pass the original proposal never had. Driven page by page at 390px with mobile emulation (the media queries under test actually fire) by NEW tests/mobile_check.py, 24/24: - no page scrolls sideways - all seven (the creator joined at T9.5 when BL-001 died) - no visible control is clipped past the viewport (the probe learned frame_check's two lessons: an off-canvas drawer is PARKED, not clipped, and a row inside an overflow-x container is scrollable) - tap targets: the shared coarse-pointer block in wp-chrome.css puts every button, input, select, nav link and appbar control at a 44px minimum on phone widths and coarse pointers; checkboxes, radios and help-tip badges get the 24px WCAG floor with spacing doing the rest. Field View - the gloved-hands surface - measures 44px on EVERY control. Inline text links are exempt per WCAG 2.5.8's own exception. Even the deliberately unobtrusive dev toggle grew to the floor: subtle by opacity, not by size. - CR-007 attachments offline at 390px and T8.5 requests at 390px were already pinned by files_check and mreq_check; this pass cites rather than repeats. After-screenshots for all seven pages at 390px are committed in docs/reference/baseline/after-wave9, beside the wave 0 set, captured by the same baseline_shots.py fixture. Verification (each probe run alone): NEW tests/mobile_check.py 24/24. Regressions: form_structure_check 50/51 (BL-022's standing question), files_check 36/36. Items: C2 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
339 lines
13 KiB
CSS
339 lines
13 KiB
CSS
/* ============================================================================
|
|
SHARED APP CHROME — project switcher + global search
|
|
----------------------------------------------------------------------------
|
|
Injected by wp-chrome.js into whichever top bar a page has: the dark UI-shell
|
|
bar (.wp-appbar on index / admin / field) or the older light bars (.header on
|
|
the SOP suite and the WP creator). The two live side by side, so every colour
|
|
here comes from a variable that wp-chrome.js sets per host bar — the markup and
|
|
behaviour are identical on both.
|
|
============================================================================ */
|
|
.wp-chrome {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-width: 0; /* lets the search shrink instead of overflowing */
|
|
flex: 1 1 auto;
|
|
}
|
|
/* Seven role names, resolved twice — once for each kind of host bar. The switch
|
|
is the point of this block and it stays; only the literals move behind the
|
|
canonical tokens in theme-light.css (T3.2 / S5 / C3). */
|
|
/* Light host bar (the two tool pages) */
|
|
.wp-chrome {
|
|
--wpc-fg: var(--cds-text-primary);
|
|
--wpc-fg-dim: var(--cds-text-secondary);
|
|
--wpc-bg: var(--cds-layer);
|
|
--wpc-bg-soft: var(--cds-layer-accent);
|
|
--wpc-border: var(--cds-border-subtle-selected);
|
|
--wpc-hover: var(--cds-layer-hover);
|
|
--wpc-accent: var(--cds-interactive-01);
|
|
}
|
|
/* Dark host bar (the UI-shell appbar) */
|
|
.wp-chrome[data-bar="dark"] {
|
|
--wpc-fg: var(--wp-appbar-fg);
|
|
--wpc-fg-dim: var(--wp-appbar-fg-dim);
|
|
--wpc-bg: var(--wp-appbar-layer);
|
|
--wpc-bg-soft: var(--cds-inverse-02);
|
|
--wpc-border: var(--wp-appbar-border);
|
|
--wpc-hover: var(--wp-appbar-hover);
|
|
--wpc-accent: var(--cds-link-inverse);
|
|
}
|
|
|
|
/* ── archived-project banner ──────────────────────────────────────────────── */
|
|
/* Inserted by wp-chrome.js as the top bar's next sibling, so it sits directly
|
|
under the bar in normal flow and can never overlap it or eat its height (the
|
|
bar is sticky; this strip scrolls away under it). `flex: 0 0 auto` is for the
|
|
suite page, whose shell is a flex column — without it the strip would squash.
|
|
Amber tokens are the suite's warning set, same as the sync badge. */
|
|
.wpc-archived {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
padding: 9px 16px;
|
|
background: var(--wp-status-warning-bg);
|
|
color: var(--wp-status-warning-text);
|
|
border-bottom: 1px solid var(--cds-support-warning);
|
|
border-radius: 0;
|
|
font-family: var(--wp-font-sans-2);
|
|
font-size: 13.5px;
|
|
line-height: 1.35;
|
|
}
|
|
.wpc-archived-ico { flex: 0 0 auto; font-size: 14px; }
|
|
.wpc-archived-text { min-width: 0; } /* wraps instead of forcing a scrollbar */
|
|
@media (max-width: 620px) {
|
|
.wpc-archived { padding: 8px 12px; font-size: 13px; }
|
|
}
|
|
|
|
/* ── project switcher ─────────────────────────────────────────────────────── */
|
|
.wpc-proj { position: relative; flex: 0 0 auto; }
|
|
.wpc-proj-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
max-width: 280px;
|
|
padding: 5px 10px;
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
border-radius: 3px;
|
|
color: var(--wpc-fg);
|
|
font: inherit;
|
|
font-size: 13px;
|
|
line-height: 1.25;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
.wpc-proj-btn:hover { background: var(--wpc-hover); border-color: var(--wpc-border); }
|
|
.wpc-proj-btn[aria-expanded="true"] { background: var(--wpc-hover); border-color: var(--wpc-border); }
|
|
.wpc-proj-labels { min-width: 0; }
|
|
.wpc-proj-kicker {
|
|
display: block;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
letter-spacing: .06em;
|
|
text-transform: uppercase;
|
|
color: var(--wpc-fg-dim);
|
|
}
|
|
/* B2. These two caps are the "does not fit 280px" the review measured: a real name
|
|
ran past 240px and was ellipsised on the one control whose job is to say which job
|
|
you are in. Above 1024px the bar has the room, so the caps are raised until a real
|
|
project name fits — "Micron EUV Cleanroom Enable 2667008" is the one to test with.
|
|
Below 1024px the label is the project number instead (see wp-chrome.js), which is
|
|
short enough that these caps never bite. The ellipsis stays only as a backstop for
|
|
a name longer than anything real. */
|
|
.wpc-proj-name {
|
|
display: block;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 240px;
|
|
}
|
|
@media (min-width: 1024px) {
|
|
.wpc-proj-btn { max-width: 400px; }
|
|
.wpc-proj-name { max-width: 340px; }
|
|
}
|
|
.wpc-caret { flex: 0 0 auto; align-self: flex-end; margin-bottom: 3px; font-size: 10px;
|
|
line-height: 1; color: var(--wpc-fg-dim); }
|
|
|
|
/* ── dropdown / results panel (shared shell) ──────────────────────────────── */
|
|
.wpc-pop {
|
|
position: absolute;
|
|
top: calc(100% + 6px);
|
|
left: 0;
|
|
z-index: 2000;
|
|
min-width: 320px;
|
|
max-width: min(460px, 92vw);
|
|
max-height: min(70vh, 560px);
|
|
overflow-y: auto;
|
|
background: var(--cds-layer);
|
|
color: var(--cds-text-primary);
|
|
border: 1px solid var(--cds-border-subtle);
|
|
box-shadow: var(--wp-shadow-pop);
|
|
border-radius: 4px;
|
|
}
|
|
.wpc-pop[hidden] { display: none; }
|
|
.wpc-pop-head {
|
|
padding: 9px 12px 6px;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
letter-spacing: .07em;
|
|
text-transform: uppercase;
|
|
color: var(--cds-text-helper);
|
|
border-bottom: 1px solid var(--wp-pop-divider);
|
|
}
|
|
.wpc-item {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
background: transparent;
|
|
border: 0;
|
|
border-left: 3px solid transparent;
|
|
text-align: left;
|
|
font: inherit;
|
|
font-size: 13px;
|
|
color: var(--cds-text-primary);
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
}
|
|
.wpc-item:hover, .wpc-item.is-active { background: var(--cds-layer-accent); }
|
|
.wpc-item.is-current { border-left-color: var(--cds-interactive-01); background: var(--cds-highlight); }
|
|
.wpc-item-title { display: block; font-weight: 600; }
|
|
.wpc-item-sub { display: block; font-size: 11.5px; color: var(--cds-text-helper); }
|
|
.wpc-item-mono { font-family: var(--wp-font-mono-3); font-size: 12px; color: var(--cds-interactive-01); }
|
|
.wpc-empty { padding: 14px 12px; font-size: 13px; color: var(--cds-text-helper); }
|
|
.wpc-pop-foot {
|
|
padding: 8px 12px;
|
|
border-top: 1px solid var(--wp-pop-divider);
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.wpc-foot-btn {
|
|
font: inherit;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
padding: 5px 10px;
|
|
border: 1px solid var(--cds-border-subtle-selected);
|
|
background: var(--cds-layer);
|
|
color: var(--cds-text-primary);
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
}
|
|
.wpc-foot-btn:hover { border-color: var(--cds-interactive-01); color: var(--cds-interactive-01); }
|
|
|
|
/* ── global search ────────────────────────────────────────────────────────── */
|
|
/* Centered in the bar: the wrapper takes the free space and centres a capped box,
|
|
which keeps the field mid-screen without absolute positioning (so it can never
|
|
sit on top of the bar's own buttons). */
|
|
.wpc-search {
|
|
position: relative;
|
|
flex: 1 1 auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
min-width: 0;
|
|
}
|
|
.wpc-search-box {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 560px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 0 10px;
|
|
height: 34px;
|
|
background: var(--wpc-bg);
|
|
border: 1px solid var(--wpc-border);
|
|
border-radius: 3px;
|
|
}
|
|
/* The ring is drawn on the BOX, not the input: the input is a borderless field
|
|
inside a bordered shell, so ringing the input would draw a rectangle floating
|
|
inside another rectangle. --wpc-accent resolves to #0f62fe on a light bar
|
|
(8.6:1 against #ffffff) and #78a9ff on the dark one (6.6:1 against #262626),
|
|
so it clears 3:1 on both hosts. */
|
|
.wpc-search-box:focus-within { outline: 2px solid var(--wpc-accent); outline-offset: -2px; }
|
|
.wpc-search-ico { flex: 0 0 auto; color: var(--wpc-fg-dim); font-size: 13px; }
|
|
.wpc-search-input {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
background: transparent;
|
|
border: 0;
|
|
/* S12: the ONE `outline: none` left in the app, and it has its replacement in
|
|
the rule above — the shell rings on :focus-within, which fires for exactly the
|
|
same interactions. Ringing both would draw two. */
|
|
outline: none;
|
|
color: var(--wpc-fg);
|
|
font: inherit;
|
|
font-size: 13.5px;
|
|
}
|
|
.wpc-search-input::placeholder { color: var(--wpc-fg-dim); }
|
|
.wpc-kbd {
|
|
flex: 0 0 auto;
|
|
font-family: var(--wp-font-mono-3);
|
|
font-size: 10.5px;
|
|
color: var(--wpc-fg-dim);
|
|
border: 1px solid var(--wpc-border);
|
|
border-radius: 3px;
|
|
padding: 1px 5px;
|
|
white-space: nowrap;
|
|
}
|
|
.wpc-search .wpc-pop { left: 50%; transform: translateX(-50%); min-width: min(560px, 92vw); }
|
|
.wpc-clear {
|
|
flex: 0 0 auto; background: transparent; border: 0; cursor: pointer;
|
|
color: var(--wpc-fg-dim); font: inherit; font-size: 14px; line-height: 1; padding: 2px 4px;
|
|
}
|
|
.wpc-clear:hover { color: var(--wpc-fg); }
|
|
|
|
/* ── narrow screens ───────────────────────────────────────────────────────── */
|
|
@media (max-width: 900px) {
|
|
.wpc-search-box { max-width: none; }
|
|
.wpc-kbd { display: none; }
|
|
.wpc-proj-btn { max-width: 190px; }
|
|
.wpc-proj-name { max-width: 150px; }
|
|
}
|
|
@media (max-width: 620px) {
|
|
/* Keep the switcher (you must be able to change project) and let the search
|
|
collapse to an icon-width field rather than pushing the bar out of shape. */
|
|
.wpc-proj-kicker { display: none; }
|
|
.wpc-search { flex: 1 1 120px; }
|
|
}
|
|
|
|
|
|
/* ============================================================================
|
|
TOOL TAB STRIP (B7 / T7.1)
|
|
----------------------------------------------------------------------------
|
|
SOP Configuration | Work Package Creation | Dashboard.
|
|
|
|
These rules lived in work-package-suite-styles.css while the creator was an
|
|
iframe child, because only the suite page ever drew the strip. Dissolving the
|
|
frame makes the creator a document of its own that draws the same strip, so
|
|
they move to the sheet both pages already load. Nothing changed in the move -
|
|
same values, same tokens, no literal added; the fallbacks below exist only
|
|
because the two host pages alias the role names under different local names.
|
|
|
|
The strip is navigation between two documents now, so `.nav-tab` has to look
|
|
identical as a <button> and as an <a>.
|
|
============================================================================ */
|
|
.main-nav {
|
|
display: flex;
|
|
gap: 0;
|
|
padding: 0 16px;
|
|
background: var(--bg-card);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.nav-tab {
|
|
padding: 13px 18px;
|
|
background: none;
|
|
border: none;
|
|
border-bottom: 3px solid transparent;
|
|
border-radius: 0;
|
|
cursor: pointer;
|
|
font-size: 15px;
|
|
font-weight: 400;
|
|
color: var(--text-light);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
transition: background 0.15s, color 0.15s;
|
|
}
|
|
|
|
.nav-tab:hover {
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
}
|
|
|
|
.nav-tab.active {
|
|
background: none;
|
|
color: var(--text);
|
|
border-bottom-color: var(--primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.nav-tab { font-family: inherit; text-decoration: none; }
|
|
/* Not colour alone: the current tab carries aria-current, and the weight change
|
|
plus the 3px rule say which one it is without relying on hue. */
|
|
.nav-tab[aria-current="page"] { color: var(--text); border-bottom-color: var(--primary); font-weight: 600; }
|
|
/* A tab that cannot be entered yet - the WP tab before the SOP is complete. It
|
|
stays a real, focusable control that explains itself rather than vanishing;
|
|
the gate panel is what does the explaining. */
|
|
.nav-tab[aria-disabled="true"] { opacity: .55; cursor: default; }
|
|
.nav-tab[aria-disabled="true"]:hover { background: none; color: var(--text-light); }
|
|
|
|
/* C2 / T9.6: touch sizing. At phone widths (and any coarse pointer) every
|
|
control meets the 44px bar the field surfaces are held to; checkboxes,
|
|
radios and the help-tip badge get the 24px WCAG floor with spacing doing
|
|
the rest. Shared here because every page loads this sheet - six copies of
|
|
this block is how the six pages drift apart again. */
|
|
@media (max-width: 500px), (pointer: coarse) {
|
|
button, .btn, .add-btn, .nav-btn, .header-button,
|
|
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
|
|
select, textarea { min-height: 44px; }
|
|
a.wp-appbar-link, .wp-sidenav-item, .nav-tab {
|
|
min-height: 44px; display: inline-flex; align-items: center; }
|
|
input[type="checkbox"], input[type="radio"] { min-width: 24px; min-height: 24px; }
|
|
.help-tip { min-width: 24px; min-height: 24px; }
|
|
.wp-navbtn, .ui-help-fab, .wp-sidenav-close { min-width: 44px; }
|
|
.wp-appbar-brand { min-height: 44px; display: inline-flex; align-items: center; }
|
|
}
|