T3.2 - C3/S5: one source of truth for colour; page sheets alias only
theme-light.css is now the only file in html/ that contains a colour literal. The five page stylesheets and all four inline <style> blocks declare names and nothing else. theme-light.css 191 declarations, 175 with a literal value console.css 28 declarations, 0 work-package-suite-styles.css 16 declarations, 0 wp-chrome.css 14 declarations, 0 wp-creation-styles.css 24 declarations, 0 wp-sidenav.css 0 declarations, 0 #0f62fe is declared in one sheet, down from five. The eleven occurrences left inside theme-light.css are Carbon's own v10-to-v11 alias layer, which the inventory records as deliberate and not the S5 defect. Names were kept, because 111 var() references live in .js files across 23 token names and a rename there fails silently - no build error, no console warning, just an unstyled element. The rule the refactor was built on: consolidation is not unification. Where two sheets declared the same value, they collapse. Where they declared DIFFERENT values for one role - the two shadows, the eight status borders doing four jobs, the three mono stacks - each value got its own canonical name and the pair is recorded for T3.5. Picking a winner between two near-identical greys is a rendered change, which this task forbids. The console's zebra stripe is the one that would have bitten: #fafafa is six points from #f4f4f4, and merging them erases the striping on the nine-column user table. Collecting the one-offs in one place made two things countable that were not before: twelve distinct shadows, and a ninth amber (#8a6d00 on the field view, four points from #8e6a00 and doing the same job - BL-009). VERIFICATION - the screenshot done-when could not do the job, so it was replaced. Captured against wave 2, 11 of 14 shots were pixel-identical and 3 were not. Capturing wave 2 against ITSELF produced the same 3 differences at the same bounding box, so those shots cannot distinguish a regression from the clock. Trap 2 in the brief is half wrong: users.html is stable at both widths; the unstable third is the creator at 1440px, and admin's captured page height varies by ~600px between runs (BL-012). So tests/token_check.py was added. It checks what wave 3 actually claims: that every custom property resolves to the same literal, and every element computes the same colours, shadows and type. That is stronger than a screenshot - it covers the hover, focus and disabled rules a screenshot never exercises, and it is deterministic. wave 2 vs T3.2, all 7 pages: 178/178 wave-2 token names resolve identically, +213 new 3,500 elements compute identically, zero added, zero removed 16 tokens differ in notation only (#fff -> #ffffff), which is the duplicate class this task existed to collapse Two detours worth not repeating: the element walk was first keyed by sibling index and reported 55 phantom differences on the SOP page, where three JS-injected overlays append in whichever order their async work finishes (BL-011); and the comparator now normalises notation before reporting, because otherwise it fails on its own success. f_items 5 FIXED / F6 REPRODUCES as expected. browser_check 71/71. ONE DONE-WHEN NOT MET, recorded rather than skipped: "no page stylesheet declares a raw color, spacing or type value". The colour half is met in full. 483 raw spacing values, 281 font-sizes and 65 radii remain inside rules, 492 of them in the creator. That is arithmetic, not effort: the creator's spacing is every integer from 1px to 14px, so no token exists that padding:9px 11px maps to without changing one of the numbers - and this task forbids changing a rendered value. The two requirements are mutually exclusive. Logged as BL-010 for T5.x and T7.1, where those pages are re-laid-out and the values get chosen again. New backlog: BL-009 (ninth amber), BL-010 (raw spacing/type in rules), BL-011 (overlay append race), BL-012 (unstable screenshot targets). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -6,28 +6,35 @@
|
||||
body.embedded .embed-hide { display: none !important; }
|
||||
body.embedded .embed-first { margin-left: auto; }
|
||||
|
||||
/* Names only. Every value comes from theme-light.css, which this page loads
|
||||
first - this sheet declares nothing of its own (T3.2 / S5 / C3). The names
|
||||
stay because wp-creation-app.js reads eight of them from JavaScript, where
|
||||
a rename fails silently. See docs/reference/tokens.md section 9. */
|
||||
:root {
|
||||
--bg: #f4f4f4;
|
||||
--surface: #ffffff;
|
||||
--surface2: #f4f4f4;
|
||||
--border: #e0e0e0;
|
||||
--border-strong: #8d8d8d;
|
||||
--text: #161616;
|
||||
--text-muted: #525252;
|
||||
--text-dim: #8d8d8d;
|
||||
--accent: #0f62fe;
|
||||
--accent-dim: #edf5ff;
|
||||
--accent-green: #198038;
|
||||
--accent-green-dim: #defbe6;
|
||||
--accent-amber: #8e6a00;
|
||||
--accent-amber-dim: #fdf6dd;
|
||||
--red: #da1e28;
|
||||
--red-dim: #fff1f1;
|
||||
--radius: 0;
|
||||
--shadow: none;
|
||||
--shadow-lg: 0 4px 16px rgba(20,30,50,.12);
|
||||
--mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Consolas, monospace;
|
||||
--sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
|
||||
--bg: var(--cds-background);
|
||||
--surface: var(--cds-layer);
|
||||
--surface2: var(--cds-layer-accent);
|
||||
--border: var(--cds-border-subtle);
|
||||
--border-strong: var(--cds-border-strong);
|
||||
--text: var(--cds-text-primary);
|
||||
--text-muted: var(--cds-text-secondary);
|
||||
--text-dim: var(--cds-ui-04);
|
||||
--accent: var(--cds-interactive-01);
|
||||
--accent-dim: var(--cds-highlight);
|
||||
--accent-green: var(--cds-support-success);
|
||||
--accent-green-dim: var(--wp-status-success-bg);
|
||||
--accent-amber: var(--wp-status-warning-text);
|
||||
--accent-amber-dim: var(--wp-status-warning-bg);
|
||||
--red: var(--cds-support-error);
|
||||
--red-dim: var(--wp-status-error-bg);
|
||||
--radius: var(--wp-radius-0);
|
||||
--shadow: var(--wp-shadow-none);
|
||||
/* Cool-tinted, where the wizard's --shadow-lg is neutral. Same geometry in
|
||||
both - 0 4px 16px - so the two can be merged later without moving
|
||||
anything; merging is still a rendered change. tokens.md section 8-F. */
|
||||
--shadow-lg: var(--wp-shadow-lg-cool);
|
||||
--mono: var(--wp-font-mono);
|
||||
--sans: var(--wp-font-sans);
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
@@ -227,8 +234,8 @@
|
||||
.sub-heading::after { content: ''; flex: 1; height: 1px; background: var(--border); }
|
||||
|
||||
.notice {
|
||||
background: var(--accent-dim); border: 1px solid #b9d2fb; border-radius: var(--radius);
|
||||
padding: 10px 14px; font-size: 12px; color: #0043ce; margin-bottom: 18px; font-family: var(--mono);
|
||||
background: var(--accent-dim); border: 1px solid var(--wp-accent-border-a); border-radius: var(--radius);
|
||||
padding: 10px 14px; font-size: 12px; color: var(--cds-link-secondary); margin-bottom: 18px; font-family: var(--mono);
|
||||
}
|
||||
|
||||
/* ── DELIVERABLES ── */
|
||||
@@ -245,7 +252,7 @@
|
||||
.deliv-box {
|
||||
width: 16px; height: 16px; border: 1.5px solid var(--border-strong); border-radius: 3px;
|
||||
flex-shrink: 0; margin-top: 2px; display: flex; align-items: center; justify-content: center;
|
||||
font-size: 11px; color: #fff; transition: all .12s;
|
||||
font-size: 11px; color: var(--cds-text-on-color); transition: all .12s;
|
||||
}
|
||||
.deliv-item.checked .deliv-box { background: var(--accent); border-color: var(--accent); }
|
||||
.deliv-text { font-size: 12.5px; line-height: 1.35; color: var(--text); }
|
||||
@@ -259,10 +266,10 @@
|
||||
}
|
||||
.btn-ghost { background: var(--surface); border-color: var(--border-strong); color: var(--text-muted); }
|
||||
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
|
||||
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: var(--shadow); }
|
||||
.btn-primary:hover { background: #0353e9; }
|
||||
.btn-generate { background: var(--accent-green); border-color: var(--accent-green); color: #fff; font-weight: 700; box-shadow: var(--shadow); }
|
||||
.btn-generate:hover { background: #0e6027; }
|
||||
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--cds-text-on-color); box-shadow: var(--shadow); }
|
||||
.btn-primary:hover { background: var(--cds-hover-primary); }
|
||||
.btn-generate { background: var(--accent-green); border-color: var(--accent-green); color: var(--cds-text-on-color); font-weight: 700; box-shadow: var(--shadow); }
|
||||
.btn-generate:hover { background: var(--wp-hover-success); }
|
||||
|
||||
/* ── OUTPUT ── */
|
||||
#output-section { display: none; }
|
||||
@@ -299,7 +306,7 @@
|
||||
|
||||
/* ── LOADING ── */
|
||||
.loading-overlay {
|
||||
display: none; position: fixed; inset: 0; background: rgba(244,245,247,.82); z-index: 200;
|
||||
display: none; position: fixed; inset: 0; background: var(--wp-scrim-loading); z-index: 200;
|
||||
align-items: center; justify-content: center; flex-direction: column; gap: 16px; backdrop-filter: blur(2px);
|
||||
}
|
||||
.loading-overlay.active { display: flex; }
|
||||
@@ -369,7 +376,7 @@
|
||||
.seq-step.gate { border-color: var(--accent-amber); background: var(--accent-amber-dim); border-style: dashed; }
|
||||
.seq-step.gate .seq-label { color: var(--accent-amber); font-weight: 500; }
|
||||
.seq-gate-badge {
|
||||
flex-shrink: 0; padding: 3px 9px; border-radius: 20px; background: var(--accent-amber); color: #fff;
|
||||
flex-shrink: 0; padding: 3px 9px; border-radius: 20px; background: var(--accent-amber); color: var(--cds-text-on-color);
|
||||
font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .08em; white-space: nowrap;
|
||||
}
|
||||
.add-btn-gate { border-color: var(--accent-amber); color: var(--accent-amber); }
|
||||
@@ -382,13 +389,13 @@
|
||||
|
||||
/* ── REVIEW COMMENTS ─────────────────────────────────────────────── */
|
||||
.cbadge-total { display:inline-block; min-width:16px; padding:0 5px; margin-left:4px; font-family:var(--mono);
|
||||
font-size:10px; font-weight:700; line-height:16px; text-align:center; color:#fff; background:var(--accent); border-radius:9px; }
|
||||
font-size:10px; font-weight:700; line-height:16px; text-align:center; color:var(--cds-text-on-color); background:var(--accent); border-radius:9px; }
|
||||
.step-tab { position:relative; }
|
||||
.step-tab .cbadge { position:absolute; top:4px; right:4px; min-width:15px; height:15px; padding:0 4px;
|
||||
font-family:var(--mono); font-size:9px; font-weight:700; line-height:15px; text-align:center;
|
||||
color:#fff; background:var(--accent-amber); border-radius:8px; box-shadow:0 0 0 2px var(--surface); }
|
||||
color:var(--cds-text-on-color); background:var(--accent-amber); border-radius:8px; box-shadow:0 0 0 2px var(--surface); }
|
||||
|
||||
.cmt-overlay { position:fixed; inset:0; background:rgba(20,30,50,.28); opacity:0; pointer-events:none;
|
||||
.cmt-overlay { position:fixed; inset:0; background:var(--wp-scrim-cool); opacity:0; pointer-events:none;
|
||||
transition:opacity .2s ease; z-index:60; }
|
||||
.cmt-overlay.open { opacity:1; pointer-events:auto; }
|
||||
/* Starts below the header, not behind it. The containing block was already the
|
||||
@@ -443,12 +450,12 @@
|
||||
.radio-group.group-invalid, .check-group.group-invalid { outline:2px solid var(--red); outline-offset:4px; border-radius:var(--radius); }
|
||||
.ov-select.ov-unset { color:var(--red) !important; border-color:var(--red); }
|
||||
.use-btn { display:inline-block; margin-left:8px; padding:4px 14px; font-family:var(--sans); font-size:11px; font-weight:700;
|
||||
color:#fff; background:var(--accent-green); border:none; border-radius:var(--radius); cursor:pointer; letter-spacing:.03em; }
|
||||
.use-btn:hover { background:#0e6027; }
|
||||
color:var(--cds-text-on-color); background:var(--accent-green); border:none; border-radius:var(--radius); cursor:pointer; letter-spacing:.03em; }
|
||||
.use-btn:hover { background:var(--wp-hover-success); }
|
||||
.sum-chips { display:flex; flex-wrap:wrap; gap:7px; }
|
||||
.sum-chip { background:var(--accent-dim); color:var(--accent); border:1px solid #b9d2fb; border-radius:3px;
|
||||
.sum-chip { background:var(--accent-dim); color:var(--accent); border:1px solid var(--wp-accent-border-a); border-radius:3px;
|
||||
padding:3px 10px; font-family:var(--mono); font-size:10px; }
|
||||
.sum-warn { margin-top:10px; color:var(--accent-amber); background:var(--accent-amber-dim); border:1px solid #f0d9ad;
|
||||
.sum-warn { margin-top:10px; color:var(--accent-amber); background:var(--accent-amber-dim); border:1px solid var(--wp-status-warning-border-b);
|
||||
border-radius:var(--radius); padding:7px 10px; font-size:11px; }
|
||||
|
||||
/* ── CREATION TOOL ───────────────────────────────────────────────── */
|
||||
@@ -458,7 +465,7 @@
|
||||
.ctx-main .ctx-proj { font-weight:700; color:var(--text); font-size:14px; }
|
||||
.ctx-main .ctx-sub { font-size:11px; color:var(--text-muted); margin-top:2px; }
|
||||
.ctx-sample { font-family:var(--mono); font-size:9px; font-weight:700; color:var(--accent-amber);
|
||||
background:var(--accent-amber-dim); border:1px solid #f0d9ad; border-radius:9px; padding:1px 7px; margin-left:6px; vertical-align:middle; }
|
||||
background:var(--accent-amber-dim); border:1px solid var(--wp-status-warning-border-b); border-radius:9px; padding:1px 7px; margin-left:6px; vertical-align:middle; }
|
||||
.ctx-meta { margin-left:auto; display:flex; gap:16px; font-size:11px; color:var(--text-muted); flex-wrap:wrap; }
|
||||
.ctx-meta b { color:var(--accent); }
|
||||
.ctx-meta code { background:var(--surface2); padding:1px 6px; border-radius:3px; color:var(--accent); }
|
||||
@@ -468,7 +475,7 @@
|
||||
.mode-toggle { display:inline-flex; border:1px solid var(--border-strong); border-radius:6px; overflow:hidden; }
|
||||
.mode-btn { padding:8px 18px; font-family:var(--sans); font-size:13px; font-weight:600; border:none; background:var(--surface);
|
||||
color:var(--text-muted); cursor:pointer; }
|
||||
.mode-btn.active { background:var(--accent); color:#fff; }
|
||||
.mode-btn.active { background:var(--accent); color:var(--cds-text-on-color); }
|
||||
.created-count { font-size:11px; color:var(--text-muted); }
|
||||
|
||||
.wo-section { border:1px solid var(--border); border-radius:var(--radius); padding:11px 13px; margin-bottom:9px; background:var(--surface); }
|
||||
@@ -491,19 +498,19 @@
|
||||
.release-banner { max-width:none; margin:0; padding:0 28px 0 calc(var(--nav-w,288px) + 28px); }
|
||||
.release-banner .rb-inner { margin-top:14px; border-radius:var(--radius); padding:11px 16px; font-size:13px; font-weight:600;
|
||||
display:flex; align-items:center; gap:10px; }
|
||||
.rb-ready { background:var(--accent-green-dim); color:var(--accent-green); border:1px solid #b6e3c6; }
|
||||
.rb-notready { background:var(--accent-amber-dim); color:var(--accent-amber); border:1px solid #f0d9ad; }
|
||||
.rb-hold { background:var(--red-dim); color:var(--red); border:1px solid #f3c4c4; }
|
||||
.rb-ready { background:var(--accent-green-dim); color:var(--accent-green); border:1px solid var(--wp-status-success-border-b); }
|
||||
.rb-notready { background:var(--accent-amber-dim); color:var(--accent-amber); border:1px solid var(--wp-status-warning-border-b); }
|
||||
.rb-hold { background:var(--red-dim); color:var(--red); border:1px solid var(--wp-status-error-border-b); }
|
||||
.pill-hold.selected { background:var(--red) !important; border-color:var(--red) !important; }
|
||||
.pill-hold.selected .dot { background:#fff !important; }
|
||||
.pill-hold.selected .dot { background:var(--cds-text-on-color) !important; }
|
||||
|
||||
.cstatus { display:inline-flex; border:1px solid var(--border-strong); border-radius:5px; overflow:hidden; }
|
||||
.cstatus button { border:none; background:var(--surface); color:var(--text-muted); font-family:var(--sans); font-size:11px;
|
||||
font-weight:600; padding:4px 10px; cursor:pointer; border-right:1px solid var(--border); }
|
||||
.cstatus button:last-child { border-right:none; }
|
||||
.cstatus button.on-open { background:var(--red); color:#fff; }
|
||||
.cstatus button.on-cleared { background:var(--accent-green); color:#fff; }
|
||||
.cstatus button.on-na { background:var(--text-muted); color:#fff; }
|
||||
.cstatus button.on-open { background:var(--red); color:var(--cds-text-on-color); }
|
||||
.cstatus button.on-cleared { background:var(--accent-green); color:var(--cds-text-on-color); }
|
||||
.cstatus button.on-na { background:var(--text-muted); color:var(--cds-text-on-color); }
|
||||
#material-body input, #attach-body input, #constraint-body input, #signoff-body input { width:100%; }
|
||||
.signoff-check { width:18px; height:18px; cursor:pointer; }
|
||||
|
||||
@@ -512,15 +519,15 @@
|
||||
.lock-row { display:flex; align-items:center; gap:10px; margin-top:5px; }
|
||||
.lock-edit { background:none; border:none; color:var(--accent); cursor:pointer; font-size:11px; padding:0; }
|
||||
.override-note { font-size:11px; color:var(--accent-amber); }
|
||||
.sop-tag { font-size:9px; font-weight:700; color:var(--accent); background:var(--accent-dim,#eaf0fd); border:1px solid #cdd9f2; border-radius:9px; padding:1px 6px; margin-left:6px; vertical-align:middle; }
|
||||
.sop-tag { font-size:9px; font-weight:700; color:var(--accent); background:var(--accent-dim); border:1px solid var(--wp-accent-border-b); border-radius:9px; padding:1px 6px; margin-left:6px; vertical-align:middle; }
|
||||
|
||||
#toast { position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--text); color:#fff;
|
||||
padding:10px 20px; border-radius:8px; font-size:13px; font-weight:600; opacity:0; pointer-events:none; transition:all .25s; z-index:9999; box-shadow:0 6px 24px rgba(0,0,0,.25); }
|
||||
#toast { position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--text); color:var(--cds-text-on-color);
|
||||
padding:10px 20px; border-radius:8px; font-size:13px; font-weight:600; opacity:0; pointer-events:none; transition:all .25s; z-index:9999; box-shadow:var(--wp-shadow-toast); }
|
||||
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
|
||||
|
||||
.modal-overlay { position:fixed; inset:0; background:rgba(20,28,40,.55); display:none; align-items:center; justify-content:center; z-index:9000; padding:20px; }
|
||||
.modal-overlay { position:fixed; inset:0; background:var(--wp-scrim-cool-strong); display:none; align-items:center; justify-content:center; z-index:9000; padding:20px; }
|
||||
.modal-overlay.open { display:flex; }
|
||||
.modal { background:var(--surface); border-radius:0; width:100%; max-width:520px; box-shadow:0 20px 60px rgba(0,0,0,.3); overflow:hidden; max-height:90vh; display:flex; flex-direction:column; }
|
||||
.modal { background:var(--surface); border-radius:0; width:100%; max-width:520px; box-shadow:var(--wp-shadow-modal-lg); overflow:hidden; max-height:90vh; display:flex; flex-direction:column; }
|
||||
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); }
|
||||
.modal-title { font-weight:700; font-size:15px; color:var(--text); }
|
||||
.modal-body { padding:18px 20px; overflow-y:auto; }
|
||||
@@ -529,11 +536,11 @@
|
||||
.hold-photo-preview img { max-width:160px; max-height:120px; border-radius:6px; border:1px solid var(--border); margin-top:8px; display:block; }
|
||||
|
||||
/* ── REV 2 ADDITIONS ─────────────────────────────────────────────── */
|
||||
.auto-tag { font-size:9px; font-weight:700; color:var(--accent-green); background:var(--accent-green-dim); border:1px solid #b6e3c6; border-radius:9px; padding:1px 6px; margin-left:6px; vertical-align:middle; }
|
||||
.auto-tag { font-size:9px; font-weight:700; color:var(--accent-green); background:var(--accent-green-dim); border:1px solid var(--wp-status-success-border-b); border-radius:9px; padding:1px 6px; margin-left:6px; vertical-align:middle; }
|
||||
.derived-box { padding:9px 11px; border:1px dashed var(--border-strong); border-radius:var(--radius); background:var(--surface2); color:var(--text); font-size:13px; font-weight:600; min-height:38px; display:flex; align-items:center; }
|
||||
.material-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
|
||||
.workstep-row { display:flex; align-items:flex-start; gap:10px; margin-bottom:8px; }
|
||||
.workstep-row .ws-num { flex:0 0 26px; height:26px; border-radius:50%; background:var(--accent); color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:5px; }
|
||||
.workstep-row .ws-num { flex:0 0 26px; height:26px; border-radius:50%; background:var(--accent); color:var(--cds-text-on-color); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:5px; }
|
||||
.workstep-row textarea { flex:1; padding:8px 10px; border:1px solid var(--border-strong); border-radius:var(--radius); font-family:var(--sans); font-size:13px; resize:vertical; min-height:38px; }
|
||||
.workstep-row .row-del { flex:0 0 auto; margin-top:6px; }
|
||||
|
||||
@@ -562,7 +569,7 @@
|
||||
|
||||
/* ── REV 3 ADDITIONS ─────────────────────────────────────────────── */
|
||||
/* SOP-inherited field highlight (comment 8) */
|
||||
.sop-inherited { background:rgba(37,99,214,0.07) !important; border-color:var(--accent) !important; opacity:0.85; color:var(--text); }
|
||||
.sop-inherited { background:var(--wp-sop-inherited-bg) !important; border-color:var(--accent) !important; opacity:0.85; color:var(--text); }
|
||||
.sop-inherited:focus { opacity:1; }
|
||||
|
||||
/* Dev mode (comment 7) */
|
||||
@@ -570,16 +577,16 @@
|
||||
.dev-toggle { position:absolute; left:2px; bottom:-9px; width:18px; height:7px; padding:0; border:none;
|
||||
background:var(--text-dim); opacity:0.10; border-radius:3px; cursor:pointer; }
|
||||
.dev-toggle:hover { opacity:0.35; }
|
||||
.dev-banner { background:#3a2a00; color:#ffd479; font-size:12.5px; font-weight:700; text-align:center; padding:7px 14px; letter-spacing:.3px; }
|
||||
body.dev-mode .header { box-shadow: inset 0 -3px 0 #ffb000; }
|
||||
.dev-banner { background:var(--wp-dev-bg); color:var(--wp-dev-fg); font-size:12.5px; font-weight:700; text-align:center; padding:7px 14px; letter-spacing:.3px; }
|
||||
body.dev-mode .header { box-shadow: inset 0 -3px 0 var(--wp-dev-rule); }
|
||||
|
||||
/* SOP reference links (comments 1,3,4) */
|
||||
.sop-ref-links { margin-bottom:12px; }
|
||||
.ref-links-title { font-size:12px; color:var(--text-muted); margin-bottom:6px; }
|
||||
.ref-links { display:flex; flex-wrap:wrap; gap:8px; }
|
||||
.ref-link { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--accent);
|
||||
background:var(--accent-dim,#eef3fd); border:1px solid #cdd9f2; border-radius:8px; padding:6px 11px; text-decoration:none; }
|
||||
.ref-link:hover { background:#e2ecfc; }
|
||||
background:var(--accent-dim); border:1px solid var(--wp-accent-border-b); border-radius:8px; padding:6px 11px; text-decoration:none; }
|
||||
.ref-link:hover { background:var(--wp-accent-soft-hover); }
|
||||
.ref-link .ref-sys { font-weight:400; color:var(--text-muted); font-size:11px; }
|
||||
.ref-link-sm { font-size:12px; font-weight:600; color:var(--accent); text-decoration:none; }
|
||||
.ref-link-sm:hover { text-decoration:underline; }
|
||||
@@ -595,8 +602,8 @@
|
||||
|
||||
/* Section nav (jump chips) */
|
||||
.section-nav-bar{ position:sticky; top:0; z-index:30; display:flex; flex-wrap:wrap; gap:6px;
|
||||
padding:8px 12px 8px calc(var(--nav-w,288px) + 28px); background:rgba(255,255,255,.94); backdrop-filter:blur(4px);
|
||||
border-bottom:1px solid var(--border); box-shadow:0 1px 4px rgba(20,30,50,.06);
|
||||
padding:8px 12px 8px calc(var(--nav-w,288px) + 28px); background:var(--wp-scrim-frosted); backdrop-filter:blur(4px);
|
||||
border-bottom:1px solid var(--border); box-shadow:var(--wp-shadow-navbar);
|
||||
transition:transform .22s ease; }
|
||||
.section-nav-bar:empty{ display:none; }
|
||||
.section-nav-bar.nav-hidden{ transform:translateY(-160%); }
|
||||
@@ -611,16 +618,16 @@
|
||||
hover, and "this value came from the SOP" is the part people need to see. */
|
||||
.field-hint.sop-hint { display: none; }
|
||||
.sop-chip { display:inline-block; margin-left:6px; padding:0 6px; border-radius:9px;
|
||||
background:var(--accent-dim); color:var(--accent); border:1px solid #b9d2fb;
|
||||
background:var(--accent-dim); color:var(--accent); border:1px solid var(--wp-accent-border-a);
|
||||
font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
|
||||
vertical-align:middle; cursor:help; position:relative; }
|
||||
.sop-chip::after { content:attr(data-tip); position:absolute; bottom:135%; left:50%;
|
||||
transform:translateX(-50%); background:#161616; color:#fff; padding:7px 10px; font-size:12px;
|
||||
transform:translateX(-50%); background:var(--cds-ui-05); color:var(--cds-text-on-color); padding:7px 10px; font-size:12px;
|
||||
font-weight:400; letter-spacing:0; text-transform:none; line-height:1.4; white-space:normal;
|
||||
width:max-content; max-width:260px; text-align:left; z-index:9999; opacity:0;
|
||||
pointer-events:none; transition:opacity .12s; box-shadow:0 4px 14px rgba(20,30,50,.22); }
|
||||
pointer-events:none; transition:opacity .12s; box-shadow:var(--wp-shadow-tooltip); }
|
||||
.sop-chip::before { content:''; position:absolute; bottom:135%; left:50%;
|
||||
transform:translate(-50%,95%); border:5px solid transparent; border-top-color:#161616;
|
||||
transform:translate(-50%,95%); border:5px solid transparent; border-top-color:var(--cds-ui-05);
|
||||
opacity:0; transition:opacity .12s; z-index:9999; }
|
||||
.sop-chip:hover::after, .sop-chip:hover::before,
|
||||
.sop-chip:focus::after, .sop-chip:focus::before { opacity:1; }
|
||||
@@ -633,7 +640,7 @@
|
||||
.pp-chip { display:inline-flex; align-items:center; gap:5px; padding:2px 6px 2px 8px;
|
||||
background:var(--surface2); border:1px solid var(--border); border-radius:12px;
|
||||
font-size:12px; max-width:100%; }
|
||||
.pp-chip.pp-locked { background:var(--accent-dim); border-color:#b9d2fb; color:var(--accent); }
|
||||
.pp-chip.pp-locked { background:var(--accent-dim); border-color:var(--wp-accent-border-a); color:var(--accent); }
|
||||
.pp-chip .pp-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
||||
.pp-chip .pp-x { background:none; border:0; cursor:pointer; color:var(--text-muted);
|
||||
font-size:12px; line-height:1; padding:0 1px; }
|
||||
@@ -644,7 +651,7 @@
|
||||
.pp-add-btn:hover { border-color:var(--accent); color:var(--accent); }
|
||||
.pp-menu { position:absolute; top:calc(100% + 4px); left:0; z-index:60; min-width:270px;
|
||||
max-height:300px; overflow-y:auto; background:var(--surface); border:1px solid var(--border-strong);
|
||||
box-shadow:0 8px 24px rgba(20,30,50,.18); border-radius:4px; padding:6px 0; }
|
||||
box-shadow:var(--wp-shadow-menu); border-radius:4px; padding:6px 0; }
|
||||
.pp-menu[hidden] { display:none; }
|
||||
.pp-group { font-size:9.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
|
||||
color:var(--text-dim); padding:7px 10px 3px; }
|
||||
@@ -660,7 +667,7 @@
|
||||
/* Critical constraint marker (from the SOP) */
|
||||
.crit-tag { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:10px; font-size:10px;
|
||||
font-weight:700; letter-spacing:.02em; color:var(--red); background:var(--red-dim);
|
||||
border:1px solid #ffc4c4; white-space:nowrap; vertical-align:middle; }
|
||||
border:1px solid var(--wp-status-error-border-c); white-space:nowrap; vertical-align:middle; }
|
||||
|
||||
/* -- WORK PACKAGE NAVIGATOR ------------------------------------------------
|
||||
A persistent side panel in the spirit of MS Planner: collapse toggle, one
|
||||
@@ -677,7 +684,7 @@
|
||||
z-index: 120;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fbfbfc;
|
||||
background: var(--wp-nav-bg);
|
||||
border-right: 1px solid var(--border);
|
||||
overflow: hidden;
|
||||
transition: width .16s ease;
|
||||
@@ -693,7 +700,7 @@
|
||||
background: transparent; border: 1px solid transparent; border-radius: 5px;
|
||||
color: var(--text-muted); cursor: pointer;
|
||||
}
|
||||
.wp-nav-toggle:hover { background: #eef0f3; color: var(--text); }
|
||||
.wp-nav-toggle:hover { background: var(--wp-nav-hover); color: var(--text); }
|
||||
/* Arrow flips to point right when the panel is closed. */
|
||||
body.wp-nav-collapsed .wp-nav-toggle-arrow { transform: rotate(180deg); transform-origin: 11px 10px; }
|
||||
|
||||
@@ -703,23 +710,23 @@
|
||||
flex: 1 1 auto; min-width: 0;
|
||||
display: inline-flex; align-items: center; justify-content: flex-start; gap: 9px;
|
||||
height: 40px; padding: 0 14px;
|
||||
background: var(--accent); color: #fff;
|
||||
background: var(--accent); color: var(--cds-text-on-color);
|
||||
border: 0; border-radius: 6px 0 0 6px;
|
||||
font: inherit; font-size: 14px; font-weight: 600;
|
||||
cursor: pointer; white-space: nowrap;
|
||||
}
|
||||
.wp-nav-cta:hover { background: #0353e9; }
|
||||
.wp-nav-cta:hover { background: var(--cds-hover-primary); }
|
||||
.wp-nav-cta-plus { font-size: 17px; font-weight: 400; line-height: 1; }
|
||||
.wp-nav-cta-more {
|
||||
flex: 0 0 auto; width: 30px; height: 40px;
|
||||
background: var(--accent); color: #fff; border: 0; border-left: 1px solid rgba(255,255,255,.28);
|
||||
background: var(--accent); color: var(--cds-text-on-color); border: 0; border-left: 1px solid var(--wp-on-accent-divider);
|
||||
border-radius: 0 6px 6px 0; font: inherit; font-size: 12px; cursor: pointer;
|
||||
}
|
||||
.wp-nav-cta-more:hover { background: #0353e9; }
|
||||
.wp-nav-cta-more:hover { background: var(--cds-hover-primary); }
|
||||
.wp-nav-menu {
|
||||
position: absolute; top: calc(100% - 6px); left: 10px; right: 10px; z-index: 10;
|
||||
background: var(--surface); border: 1px solid var(--border-strong); border-radius: 6px;
|
||||
box-shadow: 0 10px 26px rgba(20,30,50,.18); padding: 5px 0;
|
||||
box-shadow: var(--wp-shadow-menu-lg); padding: 5px 0;
|
||||
}
|
||||
.wp-nav-menu[hidden] { display: none; }
|
||||
.wp-nav-menu button {
|
||||
@@ -737,8 +744,8 @@
|
||||
font: inherit; font-size: 14px; color: var(--text);
|
||||
cursor: pointer; text-align: left; white-space: nowrap;
|
||||
}
|
||||
.wp-nav-link:hover { background: #eef0f3; }
|
||||
.wp-nav-link.is-current { background: #e8eaed; font-weight: 600; }
|
||||
.wp-nav-link:hover { background: var(--wp-nav-hover); }
|
||||
.wp-nav-link.is-current { background: var(--wp-nav-active); font-weight: 600; }
|
||||
.wp-nav-ico { flex: 0 0 20px; width: 20px; text-align: center; font-size: 15px; color: var(--text-muted); }
|
||||
.wp-nav-link-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
|
||||
.wp-nav-link-n { flex: 0 0 auto; font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
|
||||
@@ -770,8 +777,8 @@
|
||||
background: none; border: 0; border-radius: 6px;
|
||||
font: inherit; color: var(--text); text-align: left; cursor: pointer;
|
||||
}
|
||||
.wp-nav-item:hover { background: #eef0f3; }
|
||||
.wp-nav-item.active { background: #e8eaed; }
|
||||
.wp-nav-item:hover { background: var(--wp-nav-hover); }
|
||||
.wp-nav-item.active { background: var(--wp-nav-active); }
|
||||
/* Left accent bar on the current package, like Planner's selected plan. */
|
||||
.wp-nav-item.active::before {
|
||||
content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
|
||||
@@ -781,7 +788,7 @@
|
||||
flex: 0 0 28px; width: 28px; height: 28px; border-radius: 5px;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .02em;
|
||||
color: #fff; text-transform: uppercase;
|
||||
color: var(--cds-text-on-color); text-transform: uppercase;
|
||||
}
|
||||
.wp-nav-body { min-width: 0; flex: 1 1 auto; }
|
||||
.wp-nav-num { display: block; font-size: 13.5px; font-weight: 600; color: var(--text);
|
||||
@@ -815,13 +822,13 @@
|
||||
/* Narrow screens: keep the rail collapsed-width so the form still has room. */
|
||||
@media (max-width: 860px) {
|
||||
body { --nav-w: 56px; }
|
||||
body:not(.wp-nav-collapsed) .wp-nav { width: 288px; box-shadow: 6px 0 22px rgba(20,30,50,.16); }
|
||||
body:not(.wp-nav-collapsed) .wp-nav { width: 288px; box-shadow: var(--wp-shadow-rail); }
|
||||
}
|
||||
|
||||
/* Sticky save bar */
|
||||
.sticky-save{ position:fixed; left:var(--nav-w,288px); right:0; bottom:0; z-index:40; display:flex; align-items:center;
|
||||
justify-content:space-between; gap:14px; padding:10px 20px; background:#fff;
|
||||
border-top:1px solid var(--border-strong); box-shadow:0 -2px 10px rgba(20,30,50,.08); }
|
||||
justify-content:space-between; gap:14px; padding:10px 20px; background:var(--surface);
|
||||
border-top:1px solid var(--border-strong); box-shadow:var(--wp-shadow-sticky); }
|
||||
.sticky-save .sticky-status{ font-size:13px; font-weight:600; }
|
||||
.sticky-save .sticky-actions{ display:flex; gap:10px; }
|
||||
.ss-ready{ color:var(--accent-green); }
|
||||
@@ -836,7 +843,7 @@
|
||||
.disc-pill:hover { border-color:var(--accent); color:var(--text); }
|
||||
.disc-pill input { display:none; }
|
||||
.disc-pill .dot { width:7px; height:7px; border-radius:50%; background:var(--border-strong); transition:background .12s; flex-shrink:0; }
|
||||
.disc-pill.selected { border-color:var(--accent); background:var(--accent-dim,#eef3fd); color:var(--accent); }
|
||||
.disc-pill.selected { border-color:var(--accent); background:var(--accent-dim); color:var(--accent); }
|
||||
.disc-pill.selected .dot { background:var(--accent); }
|
||||
.disc-scope { border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:6px; padding:12px 14px; margin-bottom:12px; background:var(--bg); }
|
||||
.disc-scope-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
|
||||
@@ -851,7 +858,7 @@
|
||||
.dash-metric .dm-label { font-size:11px; color:var(--text-muted); margin-top:6px; text-transform:uppercase; letter-spacing:.03em; }
|
||||
.dash-metric.dm-green .dm-val { color:var(--accent-green); }
|
||||
.dash-metric.dm-red .dm-val { color:var(--red); }
|
||||
.dash-metric.dm-blue .dm-val { color:var(--accent, #0f62fe); }
|
||||
.dash-metric.dm-blue .dm-val { color:var(--accent); }
|
||||
.dash-metric[onclick] { cursor:pointer; transition:border-color .12s, box-shadow .12s; }
|
||||
.dash-metric[onclick]:hover { border-color:var(--accent); }
|
||||
.dash-metric.dm-active { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-dim); }
|
||||
|
||||
Reference in New Issue
Block a user