refactor: CSS tasks 7-9 — split components into landmarks, forms, navigation
Extract from monolithic 03-components.css: - 03-landmarks.css: nav, article, section, hgroup, dt/dd, footer - 04-forms.css: buttons, inputs, selects, checkboxes, validation - 06-navigation.css: sidebar nav, TOC aside 03-components.css retains: accordion, dialog, breadcrumb, steps. All files will be renumbered to final scheme in next task. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
b602a8d54e
commit
9ace9ea2bb
GPG key ID:
F6E479DEFAB84D6E
5 changed files with 683 additions and 664 deletions
|
|
@ -1,585 +1,16 @@
|
||||||
/**
|
/**
|
||||||
* 03-components.css
|
* 03-components.css → will become 05-components.css in Task 10
|
||||||
* UI component patterns (buttons, forms, nav, dialog, details)
|
* Compound UI patterns: accordion, dialog, breadcrumb, steps.
|
||||||
* Part of: Agentic Semantic Web
|
* Part of: Agentic Semantic Web
|
||||||
*
|
*
|
||||||
* Ported from: Pico CSS v2.1.1
|
* Buttons/forms extracted to 04-forms.css
|
||||||
* License: MIT
|
* Landmarks extracted to 03-landmarks.css
|
||||||
*
|
* Sidebar/TOC extracted to 06-navigation.css
|
||||||
* Modernizations:
|
|
||||||
* - Uses `accent-color` for checkbox/radio (simpler than background-image)
|
|
||||||
* - Drops class-based button variants (.secondary, .contrast, .outline)
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/* ── Buttons ───────────────────────────────────────────────────────────*/
|
|
||||||
|
|
||||||
button {
|
|
||||||
margin: 0;
|
|
||||||
overflow: visible;
|
|
||||||
font-family: inherit;
|
|
||||||
text-transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
button,
|
|
||||||
[type=submit],
|
|
||||||
[type=reset],
|
|
||||||
[type=button],
|
|
||||||
[role=button] {
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
display: inline-block;
|
|
||||||
padding: var(--input-py) var(--input-px);
|
|
||||||
border: var(--border-width) solid var(--border);
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
outline: none;
|
|
||||||
background-color: var(--surface);
|
|
||||||
color: var(--text);
|
|
||||||
font-weight: var(--weight-normal);
|
|
||||||
font-size: var(--text-base);
|
|
||||||
line-height: var(--leading);
|
|
||||||
text-align: center;
|
|
||||||
text-decoration: none;
|
|
||||||
cursor: pointer;
|
|
||||||
user-select: none;
|
|
||||||
transition: background-color var(--ease),
|
|
||||||
border-color var(--ease),
|
|
||||||
color var(--ease);
|
|
||||||
}
|
|
||||||
|
|
||||||
button:is(:hover, :active, :focus-visible),
|
|
||||||
[type=submit]:is(:hover, :active, :focus-visible),
|
|
||||||
[type=reset]:is(:hover, :active, :focus-visible),
|
|
||||||
[type=button]:is(:hover, :active, :focus-visible),
|
|
||||||
[role=button]:is(:hover, :active, :focus-visible) {
|
|
||||||
background-color: var(--surface-hover);
|
|
||||||
border-color: var(--border);
|
|
||||||
color: var(--text);
|
|
||||||
}
|
|
||||||
|
|
||||||
button:focus-visible,
|
|
||||||
[type=submit]:focus-visible,
|
|
||||||
[type=reset]:focus-visible,
|
|
||||||
[type=button]:focus-visible,
|
|
||||||
[role=button]:focus-visible {
|
|
||||||
box-shadow: 0 0 0 var(--outline-width) var(--accent-focus);
|
|
||||||
}
|
|
||||||
|
|
||||||
button[disabled],
|
|
||||||
[type=submit][disabled],
|
|
||||||
[type=reset][disabled],
|
|
||||||
[type=button][disabled],
|
|
||||||
[role=button][disabled] {
|
|
||||||
opacity: 0.5;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Form Elements ─────────────────────────────────────────────────────*/
|
|
||||||
|
|
||||||
input,
|
|
||||||
optgroup,
|
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
margin: 0;
|
|
||||||
font-size: var(--text-base);
|
|
||||||
line-height: var(--leading);
|
|
||||||
font-family: inherit;
|
|
||||||
letter-spacing: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
fieldset {
|
|
||||||
width: 100%;
|
|
||||||
margin: 0;
|
|
||||||
margin-bottom: var(--space-4);
|
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
fieldset legend,
|
|
||||||
label {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: calc(var(--space-4) * 0.375);
|
|
||||||
color: var(--text);
|
|
||||||
font-weight: var(--weight-normal);
|
|
||||||
}
|
|
||||||
|
|
||||||
input:not([type=checkbox], [type=radio], [type=range], [type=file]),
|
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
width: 100%;
|
|
||||||
padding: var(--input-py) var(--input-px);
|
|
||||||
border: var(--border-width) solid var(--input-border);
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
outline: none;
|
|
||||||
background-color: var(--input-bg);
|
|
||||||
color: var(--text);
|
|
||||||
font-weight: var(--weight-normal);
|
|
||||||
transition: background-color var(--ease),
|
|
||||||
border-color var(--ease),
|
|
||||||
color var(--ease);
|
|
||||||
}
|
|
||||||
|
|
||||||
input:not([type=checkbox], [type=radio], [type=range], [type=file], [readonly]):is(:active, :focus-visible),
|
|
||||||
select:not([readonly]):is(:active, :focus-visible),
|
|
||||||
textarea:not([readonly]):is(:active, :focus-visible) {
|
|
||||||
border-color: var(--accent);
|
|
||||||
background-color: var(--input-active-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
input:not([type=checkbox], [type=radio], [type=range], [type=file], [readonly]):focus-visible,
|
|
||||||
select:not([readonly]):focus-visible,
|
|
||||||
textarea:not([readonly]):focus-visible {
|
|
||||||
box-shadow: 0 0 0 var(--outline-width) var(--accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
input:not([type=checkbox], [type=radio], [type=range], [type=file])[disabled],
|
|
||||||
select[disabled],
|
|
||||||
textarea[disabled] {
|
|
||||||
opacity: var(--disabled-opacity);
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
input::placeholder,
|
|
||||||
textarea::placeholder,
|
|
||||||
select:invalid {
|
|
||||||
color: var(--text-3);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
input:not([type=checkbox], [type=radio]),
|
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
margin-bottom: var(--space-4);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Select Dropdown ───────────────────────────────────────────────────*/
|
|
||||||
|
|
||||||
select:not([multiple], [size]) {
|
|
||||||
padding-right: calc(var(--input-px) + 1.5rem);
|
|
||||||
background-image: var(--icon-chevron);
|
|
||||||
background-position: center right 0.75rem;
|
|
||||||
background-size: 1rem auto;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
select[multiple] option:checked {
|
|
||||||
background: var(--input-selected);
|
|
||||||
color: var(--text);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Textarea ──────────────────────────────────────────────────────────*/
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
display: block;
|
|
||||||
resize: vertical;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Checkboxes & Radios (Modern CSS) ──────────────────────────────────*/
|
|
||||||
|
|
||||||
label:has([type=checkbox], [type=radio]) {
|
|
||||||
width: fit-content;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio] {
|
|
||||||
width: 1.25em;
|
|
||||||
height: 1.25em;
|
|
||||||
margin-top: -0.125em;
|
|
||||||
margin-right: 0.5em;
|
|
||||||
vertical-align: middle;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
/* Modern CSS: use browser's native styling with our accent color */
|
|
||||||
accent-color: var(--accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
[type=checkbox] ~ label,
|
|
||||||
[type=radio] ~ label {
|
|
||||||
display: inline-block;
|
|
||||||
margin-bottom: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
[type=checkbox] ~ label:not(:last-of-type),
|
|
||||||
[type=radio] ~ label:not(:last-of-type) {
|
|
||||||
margin-right: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Validation States ─────────────────────────────────────────────────*/
|
|
||||||
|
|
||||||
input[aria-invalid=false],
|
|
||||||
select[aria-invalid=false],
|
|
||||||
textarea[aria-invalid=false] {
|
|
||||||
border-color: var(--accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
input[aria-invalid=false]:is(:active, :focus-visible),
|
|
||||||
select[aria-invalid=false]:is(:active, :focus-visible),
|
|
||||||
textarea[aria-invalid=false]:is(:active, :focus-visible) {
|
|
||||||
border-color: var(--accent-hover);
|
|
||||||
box-shadow: 0 0 0 var(--outline-width) var(--accent-focus) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[aria-invalid=true],
|
|
||||||
select[aria-invalid=true],
|
|
||||||
textarea[aria-invalid=true] {
|
|
||||||
border-color: var(--error);
|
|
||||||
}
|
|
||||||
|
|
||||||
input[aria-invalid=true]:is(:active, :focus-visible),
|
|
||||||
select[aria-invalid=true]:is(:active, :focus-visible),
|
|
||||||
textarea[aria-invalid=true]:is(:active, :focus-visible) {
|
|
||||||
border-color: var(--error-active);
|
|
||||||
box-shadow: 0 0 0 var(--outline-width) var(--error-focus) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Helper Text ───────────────────────────────────────────────────────*/
|
|
||||||
|
|
||||||
:where(input, select, textarea, fieldset) + small {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
margin-top: calc(var(--space-4) * -0.75);
|
|
||||||
margin-bottom: var(--space-4);
|
|
||||||
color: var(--text-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
:where(input, select, textarea, fieldset)[aria-invalid=false] + small {
|
|
||||||
color: var(--accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
:where(input, select, textarea, fieldset)[aria-invalid=true] + small {
|
|
||||||
color: var(--accent-red);
|
|
||||||
}
|
|
||||||
|
|
||||||
label > :where(input, select, textarea) {
|
|
||||||
margin-top: calc(var(--space-4) * 0.25);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Navigation ────────────────────────────────────────────────────────*/
|
|
||||||
/* Semantic nav: <nav><strong>Brand</strong><ul><li><a>...</a></li></ul></nav> */
|
|
||||||
|
|
||||||
/* Nav content centered at --width-xl without a wrapper element.
|
|
||||||
max() falls back to --container-padding on narrow viewports. */
|
|
||||||
body > nav {
|
|
||||||
padding-inline: max(var(--container-padding), calc((100% - var(--width-xl)) / 2));
|
|
||||||
}
|
|
||||||
|
|
||||||
body > nav {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding-top: var(--space-5);
|
|
||||||
padding-bottom: var(--space-5);
|
|
||||||
|
|
||||||
margin-bottom: var(--space-6);
|
|
||||||
border-bottom: var(--border-width) solid var(--border);
|
|
||||||
}
|
|
||||||
|
|
||||||
body > nav strong {
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: var(--text-base);
|
|
||||||
letter-spacing: -0.03em;
|
|
||||||
}
|
|
||||||
|
|
||||||
body > nav ul {
|
|
||||||
list-style: none;
|
|
||||||
display: flex;
|
|
||||||
gap: 0;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: var(--text-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
body > nav ul li {
|
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
body > nav ul li + li::before {
|
|
||||||
content: "|";
|
|
||||||
color: var(--text-dim);
|
|
||||||
margin: 0 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
body > nav a {
|
|
||||||
color: var(--text-2);
|
|
||||||
text-decoration: none;
|
|
||||||
transition: color var(--ease);
|
|
||||||
}
|
|
||||||
|
|
||||||
body > nav a:hover,
|
|
||||||
body > nav a[aria-current="page"] {
|
|
||||||
color: var(--text);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Medium screens: allow links to wrap */
|
|
||||||
@media (--nav-compact) {
|
|
||||||
body > nav ul {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 0.25rem 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Small screens: stack brand above links */
|
|
||||||
@media (--md-n-below) {
|
|
||||||
body > nav {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: var(--space-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
body > nav ul:last-child {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
body > nav ul:last-child li + li::before {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Nav Dropdown ──────────────────────────────────────────────────────*/
|
|
||||||
/* <details> inside <nav> becomes a dropdown menu. No classes needed.
|
|
||||||
Usage: <nav><ul><li><details><summary>Menu</summary><ul><li>...</li></ul></details></li></ul></nav> */
|
|
||||||
|
|
||||||
body > nav li:has(details) {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
body > nav details {
|
|
||||||
position: relative;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
body > nav details summary {
|
|
||||||
color: var(--text-2);
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: var(--text-sm);
|
|
||||||
list-style: none;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: color var(--ease);
|
|
||||||
}
|
|
||||||
|
|
||||||
body > nav details summary:hover {
|
|
||||||
color: var(--text);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Override accordion chevron in nav context */
|
|
||||||
body > nav details summary::after {
|
|
||||||
content: "▾";
|
|
||||||
float: none;
|
|
||||||
margin-inline-start: 0.25rem;
|
|
||||||
transform: none;
|
|
||||||
font-size: var(--text-xs);
|
|
||||||
}
|
|
||||||
|
|
||||||
body > nav details[open] > summary::after {
|
|
||||||
content: "▴";
|
|
||||||
transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Dropdown panel */
|
|
||||||
body > nav details > ul,
|
|
||||||
body > nav details > div {
|
|
||||||
position: absolute;
|
|
||||||
top: calc(100% + 0.5rem);
|
|
||||||
left: 0;
|
|
||||||
min-width: var(--dropdown-min-width);
|
|
||||||
padding: 0.5rem 0;
|
|
||||||
margin: 0;
|
|
||||||
background: var(--surface-1);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
box-shadow: var(--shadow-dropdown);
|
|
||||||
z-index: 20;
|
|
||||||
list-style: none;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
body > nav details > ul li {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Remove pipe separator in dropdown items */
|
|
||||||
body > nav details > ul li + li::before {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
body > nav details > ul li a {
|
|
||||||
display: block;
|
|
||||||
padding: 0.35rem 1rem;
|
|
||||||
color: var(--text-2);
|
|
||||||
text-decoration: none;
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: var(--text-sm);
|
|
||||||
transition: background-color var(--ease-fast), color var(--ease-fast);
|
|
||||||
}
|
|
||||||
|
|
||||||
body > nav details > ul li a:hover {
|
|
||||||
background: var(--border-subtle);
|
|
||||||
color: var(--text);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Close dropdown when clicking outside (CSS-only via :focus-within) */
|
|
||||||
nav details:not(:focus-within) > ul,
|
|
||||||
nav details:not(:focus-within) > div {
|
|
||||||
/* Allow browser default open/close behavior —
|
|
||||||
no forced hiding. Agent can add JS for click-outside. */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mobile: dropdown becomes full-width */
|
|
||||||
@media (--md-n-below) {
|
|
||||||
nav details > ul,
|
|
||||||
nav details > div {
|
|
||||||
position: static;
|
|
||||||
box-shadow: none;
|
|
||||||
border: none;
|
|
||||||
border-left: 2px solid var(--border);
|
|
||||||
margin-left: 0.5rem;
|
|
||||||
padding: 0.25rem 0 0.25rem 0.5rem;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Articles & Cards ──────────────────────────────────────────────────*/
|
|
||||||
/* Semantic article: <article><header><h3>Title</h3></header>Content</article> */
|
|
||||||
/* Container query: layout adapts to article's own width, not viewport.
|
|
||||||
An article in a sidebar shrinks gracefully; at full width it expands. */
|
|
||||||
|
|
||||||
article {
|
|
||||||
container-type: inline-size;
|
|
||||||
container-name: article;
|
|
||||||
background: transparent;
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
padding: var(--space-4) var(--space-5a);
|
|
||||||
margin: var(--space-3) 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
article > header {
|
|
||||||
margin: 0 0 var(--space-2) 0;
|
|
||||||
padding: 0 0 0.4rem 0;
|
|
||||||
border-bottom: 1px solid var(--border-subtle);
|
|
||||||
border-top: none;
|
|
||||||
border-radius: 0;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
article header h3 {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: var(--text-sm);
|
|
||||||
font-weight: 500;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.05em;
|
|
||||||
color: var(--text-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Narrow container: compact card (sidebar, grid cell) */
|
|
||||||
@container article (max-width: 300px) {
|
|
||||||
article > header {
|
|
||||||
border-bottom: none;
|
|
||||||
padding-bottom: 0;
|
|
||||||
margin-bottom: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
article header h3 {
|
|
||||||
font-size: var(--text-xs);
|
|
||||||
}
|
|
||||||
|
|
||||||
article > :is(p, dl, ul, ol) {
|
|
||||||
font-size: var(--text-sm);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Wide container: spacious layout */
|
|
||||||
@container article (min-width: 600px) {
|
|
||||||
article {
|
|
||||||
padding: var(--space-5) var(--space-6);
|
|
||||||
}
|
|
||||||
|
|
||||||
article > header {
|
|
||||||
margin-bottom: var(--space-3);
|
|
||||||
padding-bottom: var(--space-2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Definition Lists ──────────────────────────────────────────────────*/
|
|
||||||
/* Monospace data display for dt/dd pairs */
|
|
||||||
|
|
||||||
dt {
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: var(--text-sm);
|
|
||||||
font-weight: 500;
|
|
||||||
color: var(--text-2);
|
|
||||||
margin-top: var(--space-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
dd {
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: var(--text-sm);
|
|
||||||
color: var(--text);
|
|
||||||
margin-left: 0;
|
|
||||||
margin-top: 0.15rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
article dt:first-of-type {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Sections ──────────────────────────────────────────────────────────*/
|
|
||||||
|
|
||||||
section + section {
|
|
||||||
padding-top: var(--space-5);
|
|
||||||
border-top: var(--border-width) solid var(--border-subtle);
|
|
||||||
}
|
|
||||||
|
|
||||||
hgroup p {
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: var(--text-sm);
|
|
||||||
color: var(--text-3);
|
|
||||||
margin-top: var(--space-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Section intro: hgroup as centered subtitle block */
|
|
||||||
section > hgroup:first-child {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: var(--space-6);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Card variant: navigation cards use UI font h3, not session-log monospace */
|
|
||||||
article[data-role="card"] header h3 {
|
|
||||||
font-family: var(--font-ui);
|
|
||||||
font-size: var(--h3-size);
|
|
||||||
font-weight: var(--h3-weight);
|
|
||||||
text-transform: none;
|
|
||||||
letter-spacing: normal;
|
|
||||||
color: var(--text);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Footer ────────────────────────────────────────────────────────────*/
|
|
||||||
|
|
||||||
body > footer,
|
|
||||||
footer:last-child {
|
|
||||||
margin-top: 3rem;
|
|
||||||
padding-top: var(--space-5);
|
|
||||||
padding-bottom: var(--space-6);
|
|
||||||
border-top: var(--border-width) solid var(--border);
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: var(--text-xs);
|
|
||||||
color: var(--text-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Accordion / Disclosure ────────────────────────────────────────────*/
|
/* ── Accordion / Disclosure ────────────────────────────────────────────*/
|
||||||
/* Standalone <details>/<summary> — no JS needed.
|
/* Standalone <details>/<summary> — no JS needed.
|
||||||
Nav dropdown variant lives in the Nav Dropdown section above.
|
Nav dropdown variant lives in 03-landmarks.css.
|
||||||
Usage:
|
Usage:
|
||||||
<details>
|
<details>
|
||||||
<summary>Title</summary>
|
<summary>Title</summary>
|
||||||
|
|
@ -960,92 +391,3 @@ dialog > footer {
|
||||||
[data-role="steps"][data-layout="vertical"] > li > span {
|
[data-role="steps"][data-layout="vertical"] > li > span {
|
||||||
padding-inline: 0;
|
padding-inline: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Sidebar nav ────────────────────────────────────────────────────── */
|
|
||||||
|
|
||||||
nav[data-nav="sidebar"] h3 {
|
|
||||||
color: var(--text-3);
|
|
||||||
font-size: var(--text-xs);
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-weight: var(--weight-medium);
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.08em;
|
|
||||||
margin-top: var(--space-4);
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav[data-nav="sidebar"] h3:first-child {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav[data-nav="sidebar"] ul {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
gap: var(--space-1);
|
|
||||||
font-family: var(--font-ui);
|
|
||||||
font-size: var(--text-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
nav[data-nav="sidebar"] a {
|
|
||||||
display: block;
|
|
||||||
padding: var(--space-2) var(--space-3);
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
color: var(--text-2);
|
|
||||||
text-decoration: none;
|
|
||||||
transition: background-color var(--ease), color var(--ease);
|
|
||||||
}
|
|
||||||
|
|
||||||
nav[data-nav="sidebar"] a:hover {
|
|
||||||
background-color: var(--surface-hover);
|
|
||||||
color: var(--text);
|
|
||||||
}
|
|
||||||
|
|
||||||
nav[data-nav="sidebar"] a[aria-current] {
|
|
||||||
background-color: var(--accent-subtle);
|
|
||||||
color: var(--accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── TOC (aside) ────────────────────────────────────────────────────── */
|
|
||||||
|
|
||||||
aside[data-toc] h3 {
|
|
||||||
color: var(--text-3);
|
|
||||||
font-size: var(--text-xs);
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-weight: var(--weight-medium);
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.08em;
|
|
||||||
margin-bottom: var(--space-2);
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
aside[data-toc] nav ul {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
gap: var(--space-1);
|
|
||||||
font-size: var(--text-xs);
|
|
||||||
}
|
|
||||||
|
|
||||||
aside[data-toc] nav a {
|
|
||||||
display: block;
|
|
||||||
padding: var(--space-1) var(--space-2);
|
|
||||||
color: var(--text-3);
|
|
||||||
text-decoration: none;
|
|
||||||
border-left: var(--focus-ring-width) solid transparent;
|
|
||||||
transition: color var(--ease), border-color var(--ease);
|
|
||||||
}
|
|
||||||
|
|
||||||
aside[data-toc] nav a:hover {
|
|
||||||
color: var(--text);
|
|
||||||
border-left-color: var(--border);
|
|
||||||
}
|
|
||||||
|
|
||||||
aside[data-toc] nav a[aria-current] {
|
|
||||||
color: var(--accent);
|
|
||||||
border-left-color: var(--accent);
|
|
||||||
}
|
|
||||||
|
|
|
||||||
328
src/layers/03-landmarks.css
Normal file
328
src/layers/03-landmarks.css
Normal file
|
|
@ -0,0 +1,328 @@
|
||||||
|
/**
|
||||||
|
* 03-landmarks.css
|
||||||
|
* HTML landmark elements — structural bones of a page.
|
||||||
|
* Part of: Agentic Semantic Web
|
||||||
|
*
|
||||||
|
* Covers: body > nav, article, aside, section, hgroup, dt/dd, body > footer
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* ── Navigation ────────────────────────────────────────────────────────*/
|
||||||
|
/* Semantic nav: <nav><strong>Brand</strong><ul><li><a>...</a></li></ul></nav> */
|
||||||
|
|
||||||
|
/* Nav content centered at --width-xl without a wrapper element.
|
||||||
|
max() falls back to --container-padding on narrow viewports. */
|
||||||
|
body > nav {
|
||||||
|
padding-inline: max(var(--container-padding), calc((100% - var(--width-xl)) / 2));
|
||||||
|
}
|
||||||
|
|
||||||
|
body > nav {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: var(--space-5);
|
||||||
|
padding-bottom: var(--space-5);
|
||||||
|
|
||||||
|
margin-bottom: var(--space-6);
|
||||||
|
border-bottom: var(--border-width) solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
body > nav strong {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: var(--text-base);
|
||||||
|
letter-spacing: -0.03em;
|
||||||
|
}
|
||||||
|
|
||||||
|
body > nav ul {
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
gap: 0;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
body > nav ul li {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body > nav ul li + li::before {
|
||||||
|
content: "|";
|
||||||
|
color: var(--text-dim);
|
||||||
|
margin: 0 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
body > nav a {
|
||||||
|
color: var(--text-2);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color var(--ease);
|
||||||
|
}
|
||||||
|
|
||||||
|
body > nav a:hover,
|
||||||
|
body > nav a[aria-current="page"] {
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Medium screens: allow links to wrap */
|
||||||
|
@media (--nav-compact) {
|
||||||
|
body > nav ul {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.25rem 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small screens: stack brand above links */
|
||||||
|
@media (--md-n-below) {
|
||||||
|
body > nav {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: var(--space-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
body > nav ul:last-child {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
body > nav ul:last-child li + li::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Nav Dropdown ──────────────────────────────────────────────────────*/
|
||||||
|
/* <details> inside <nav> becomes a dropdown menu. No classes needed.
|
||||||
|
Usage: <nav><ul><li><details><summary>Menu</summary><ul><li>...</li></ul></details></li></ul></nav> */
|
||||||
|
|
||||||
|
body > nav li:has(details) {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
body > nav details {
|
||||||
|
position: relative;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body > nav details summary {
|
||||||
|
color: var(--text-2);
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
list-style: none;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: color var(--ease);
|
||||||
|
}
|
||||||
|
|
||||||
|
body > nav details summary:hover {
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Override accordion chevron in nav context */
|
||||||
|
body > nav details summary::after {
|
||||||
|
content: "▾";
|
||||||
|
float: none;
|
||||||
|
margin-inline-start: 0.25rem;
|
||||||
|
transform: none;
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
body > nav details[open] > summary::after {
|
||||||
|
content: "▴";
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dropdown panel */
|
||||||
|
body > nav details > ul,
|
||||||
|
body > nav details > div {
|
||||||
|
position: absolute;
|
||||||
|
top: calc(100% + 0.5rem);
|
||||||
|
left: 0;
|
||||||
|
min-width: var(--dropdown-min-width);
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
margin: 0;
|
||||||
|
background: var(--surface-1);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
box-shadow: var(--shadow-dropdown);
|
||||||
|
z-index: 20;
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
body > nav details > ul li {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove pipe separator in dropdown items */
|
||||||
|
body > nav details > ul li + li::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
body > nav details > ul li a {
|
||||||
|
display: block;
|
||||||
|
padding: 0.35rem 1rem;
|
||||||
|
color: var(--text-2);
|
||||||
|
text-decoration: none;
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
transition: background-color var(--ease-fast), color var(--ease-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
body > nav details > ul li a:hover {
|
||||||
|
background: var(--border-subtle);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Close dropdown when clicking outside (CSS-only via :focus-within) */
|
||||||
|
nav details:not(:focus-within) > ul,
|
||||||
|
nav details:not(:focus-within) > div {
|
||||||
|
/* Allow browser default open/close behavior —
|
||||||
|
no forced hiding. Agent can add JS for click-outside. */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile: dropdown becomes full-width */
|
||||||
|
@media (--md-n-below) {
|
||||||
|
nav details > ul,
|
||||||
|
nav details > div {
|
||||||
|
position: static;
|
||||||
|
box-shadow: none;
|
||||||
|
border: none;
|
||||||
|
border-left: 2px solid var(--border);
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
padding: 0.25rem 0 0.25rem 0.5rem;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Articles & Cards ──────────────────────────────────────────────────*/
|
||||||
|
/* Semantic article: <article><header><h3>Title</h3></header>Content</article> */
|
||||||
|
/* Container query: layout adapts to article's own width, not viewport.
|
||||||
|
An article in a sidebar shrinks gracefully; at full width it expands. */
|
||||||
|
|
||||||
|
article {
|
||||||
|
container-type: inline-size;
|
||||||
|
container-name: article;
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
padding: var(--space-4) var(--space-5a);
|
||||||
|
margin: var(--space-3) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
article > header {
|
||||||
|
margin: 0 0 var(--space-2) 0;
|
||||||
|
padding: 0 0 0.4rem 0;
|
||||||
|
border-bottom: 1px solid var(--border-subtle);
|
||||||
|
border-top: none;
|
||||||
|
border-radius: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
article header h3 {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
font-weight: 500;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
color: var(--text-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Narrow container: compact card (sidebar, grid cell) */
|
||||||
|
@container article (max-width: 300px) {
|
||||||
|
article > header {
|
||||||
|
border-bottom: none;
|
||||||
|
padding-bottom: 0;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
article header h3 {
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
article > :is(p, dl, ul, ol) {
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Wide container: spacious layout */
|
||||||
|
@container article (min-width: 600px) {
|
||||||
|
article {
|
||||||
|
padding: var(--space-5) var(--space-6);
|
||||||
|
}
|
||||||
|
|
||||||
|
article > header {
|
||||||
|
margin-bottom: var(--space-3);
|
||||||
|
padding-bottom: var(--space-2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Definition Lists ──────────────────────────────────────────────────*/
|
||||||
|
/* Monospace data display for dt/dd pairs */
|
||||||
|
|
||||||
|
dt {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-2);
|
||||||
|
margin-top: var(--space-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
dd {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
color: var(--text);
|
||||||
|
margin-left: 0;
|
||||||
|
margin-top: 0.15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
article dt:first-of-type {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Sections ──────────────────────────────────────────────────────────*/
|
||||||
|
|
||||||
|
section + section {
|
||||||
|
padding-top: var(--space-5);
|
||||||
|
border-top: var(--border-width) solid var(--border-subtle);
|
||||||
|
}
|
||||||
|
|
||||||
|
hgroup p {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
color: var(--text-3);
|
||||||
|
margin-top: var(--space-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Section intro: hgroup as centered subtitle block */
|
||||||
|
section > hgroup:first-child {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: var(--space-6);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Card variant: navigation cards use UI font h3, not session-log monospace */
|
||||||
|
article[data-role="card"] header h3 {
|
||||||
|
font-family: var(--font-ui);
|
||||||
|
font-size: var(--h3-size);
|
||||||
|
font-weight: var(--h3-weight);
|
||||||
|
text-transform: none;
|
||||||
|
letter-spacing: normal;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Footer ────────────────────────────────────────────────────────────*/
|
||||||
|
|
||||||
|
body > footer,
|
||||||
|
footer:last-child {
|
||||||
|
margin-top: 3rem;
|
||||||
|
padding-top: var(--space-5);
|
||||||
|
padding-bottom: var(--space-6);
|
||||||
|
border-top: var(--border-width) solid var(--border);
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
color: var(--text-3);
|
||||||
|
}
|
||||||
250
src/layers/04-forms.css
Normal file
250
src/layers/04-forms.css
Normal file
|
|
@ -0,0 +1,250 @@
|
||||||
|
/**
|
||||||
|
* 04-forms.css
|
||||||
|
* Form element styling: buttons, inputs, selects, textareas, checkboxes, radios.
|
||||||
|
* Part of: Agentic Semantic Web
|
||||||
|
*
|
||||||
|
* Ported from: Pico CSS v2.1.1 (MIT)
|
||||||
|
* Modernizations: accent-color for checkbox/radio, no class-based variants
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* ── Buttons ───────────────────────────────────────────────────────────*/
|
||||||
|
|
||||||
|
button {
|
||||||
|
margin: 0;
|
||||||
|
overflow: visible;
|
||||||
|
font-family: inherit;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
[type=submit],
|
||||||
|
[type=reset],
|
||||||
|
[type=button],
|
||||||
|
[role=button] {
|
||||||
|
display: inline-block;
|
||||||
|
padding: var(--input-py) var(--input-px);
|
||||||
|
border: var(--border-width) solid var(--border);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
outline: none;
|
||||||
|
background-color: var(--surface);
|
||||||
|
color: var(--text);
|
||||||
|
font-weight: var(--weight-normal);
|
||||||
|
font-size: var(--text-base);
|
||||||
|
line-height: var(--leading);
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
transition: background-color var(--ease),
|
||||||
|
border-color var(--ease),
|
||||||
|
color var(--ease);
|
||||||
|
}
|
||||||
|
|
||||||
|
button:is(:hover, :active, :focus-visible),
|
||||||
|
[type=submit]:is(:hover, :active, :focus-visible),
|
||||||
|
[type=reset]:is(:hover, :active, :focus-visible),
|
||||||
|
[type=button]:is(:hover, :active, :focus-visible),
|
||||||
|
[role=button]:is(:hover, :active, :focus-visible) {
|
||||||
|
background-color: var(--surface-hover);
|
||||||
|
border-color: var(--border);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
button:focus-visible,
|
||||||
|
[type=submit]:focus-visible,
|
||||||
|
[type=reset]:focus-visible,
|
||||||
|
[type=button]:focus-visible,
|
||||||
|
[role=button]:focus-visible {
|
||||||
|
box-shadow: 0 0 0 var(--outline-width) var(--accent-focus);
|
||||||
|
}
|
||||||
|
|
||||||
|
button[disabled],
|
||||||
|
[type=submit][disabled],
|
||||||
|
[type=reset][disabled],
|
||||||
|
[type=button][disabled],
|
||||||
|
[role=button][disabled] {
|
||||||
|
opacity: 0.5;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Form Elements ─────────────────────────────────────────────────────*/
|
||||||
|
|
||||||
|
input,
|
||||||
|
optgroup,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
margin: 0;
|
||||||
|
font-size: var(--text-base);
|
||||||
|
line-height: var(--leading);
|
||||||
|
font-family: inherit;
|
||||||
|
letter-spacing: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: var(--space-4);
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset legend,
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: calc(var(--space-4) * 0.375);
|
||||||
|
color: var(--text);
|
||||||
|
font-weight: var(--weight-normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
input:not([type=checkbox], [type=radio], [type=range], [type=file]),
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
width: 100%;
|
||||||
|
padding: var(--input-py) var(--input-px);
|
||||||
|
border: var(--border-width) solid var(--input-border);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
outline: none;
|
||||||
|
background-color: var(--input-bg);
|
||||||
|
color: var(--text);
|
||||||
|
font-weight: var(--weight-normal);
|
||||||
|
transition: background-color var(--ease),
|
||||||
|
border-color var(--ease),
|
||||||
|
color var(--ease);
|
||||||
|
}
|
||||||
|
|
||||||
|
input:not([type=checkbox], [type=radio], [type=range], [type=file], [readonly]):is(:active, :focus-visible),
|
||||||
|
select:not([readonly]):is(:active, :focus-visible),
|
||||||
|
textarea:not([readonly]):is(:active, :focus-visible) {
|
||||||
|
border-color: var(--accent);
|
||||||
|
background-color: var(--input-active-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
input:not([type=checkbox], [type=radio], [type=range], [type=file], [readonly]):focus-visible,
|
||||||
|
select:not([readonly]):focus-visible,
|
||||||
|
textarea:not([readonly]):focus-visible {
|
||||||
|
box-shadow: 0 0 0 var(--outline-width) var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
input:not([type=checkbox], [type=radio], [type=range], [type=file])[disabled],
|
||||||
|
select[disabled],
|
||||||
|
textarea[disabled] {
|
||||||
|
opacity: var(--disabled-opacity);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input::placeholder,
|
||||||
|
textarea::placeholder,
|
||||||
|
select:invalid {
|
||||||
|
color: var(--text-3);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:not([type=checkbox], [type=radio]),
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
margin-bottom: var(--space-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Select Dropdown ───────────────────────────────────────────────────*/
|
||||||
|
|
||||||
|
select:not([multiple], [size]) {
|
||||||
|
padding-right: calc(var(--input-px) + 1.5rem);
|
||||||
|
background-image: var(--icon-chevron);
|
||||||
|
background-position: center right 0.75rem;
|
||||||
|
background-size: 1rem auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
select[multiple] option:checked {
|
||||||
|
background: var(--input-selected);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Textarea ──────────────────────────────────────────────────────────*/
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
display: block;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Checkboxes & Radios (Modern CSS) ──────────────────────────────────*/
|
||||||
|
|
||||||
|
label:has([type=checkbox], [type=radio]) {
|
||||||
|
width: fit-content;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
[type=checkbox],
|
||||||
|
[type=radio] {
|
||||||
|
width: 1.25em;
|
||||||
|
height: 1.25em;
|
||||||
|
margin-top: -0.125em;
|
||||||
|
margin-right: 0.5em;
|
||||||
|
vertical-align: middle;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
/* Modern CSS: use browser's native styling with our accent color */
|
||||||
|
accent-color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
[type=checkbox] ~ label,
|
||||||
|
[type=radio] ~ label {
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
[type=checkbox] ~ label:not(:last-of-type),
|
||||||
|
[type=radio] ~ label:not(:last-of-type) {
|
||||||
|
margin-right: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Validation States ─────────────────────────────────────────────────*/
|
||||||
|
|
||||||
|
input[aria-invalid=false],
|
||||||
|
select[aria-invalid=false],
|
||||||
|
textarea[aria-invalid=false] {
|
||||||
|
border-color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[aria-invalid=false]:is(:active, :focus-visible),
|
||||||
|
select[aria-invalid=false]:is(:active, :focus-visible),
|
||||||
|
textarea[aria-invalid=false]:is(:active, :focus-visible) {
|
||||||
|
border-color: var(--accent-hover);
|
||||||
|
box-shadow: 0 0 0 var(--outline-width) var(--accent-focus) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[aria-invalid=true],
|
||||||
|
select[aria-invalid=true],
|
||||||
|
textarea[aria-invalid=true] {
|
||||||
|
border-color: var(--error);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[aria-invalid=true]:is(:active, :focus-visible),
|
||||||
|
select[aria-invalid=true]:is(:active, :focus-visible),
|
||||||
|
textarea[aria-invalid=true]:is(:active, :focus-visible) {
|
||||||
|
border-color: var(--error-active);
|
||||||
|
box-shadow: 0 0 0 var(--outline-width) var(--error-focus) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Helper Text ───────────────────────────────────────────────────────*/
|
||||||
|
|
||||||
|
:where(input, select, textarea, fieldset) + small {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: calc(var(--space-4) * -0.75);
|
||||||
|
margin-bottom: var(--space-4);
|
||||||
|
color: var(--text-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
:where(input, select, textarea, fieldset)[aria-invalid=false] + small {
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
:where(input, select, textarea, fieldset)[aria-invalid=true] + small {
|
||||||
|
color: var(--accent-red);
|
||||||
|
}
|
||||||
|
|
||||||
|
label > :where(input, select, textarea) {
|
||||||
|
margin-top: calc(var(--space-4) * 0.25);
|
||||||
|
}
|
||||||
96
src/layers/06-navigation.css
Normal file
96
src/layers/06-navigation.css
Normal file
|
|
@ -0,0 +1,96 @@
|
||||||
|
/**
|
||||||
|
* 06-navigation.css
|
||||||
|
* Navigation patterns beyond the basic nav landmark.
|
||||||
|
* Part of: Agentic Semantic Web
|
||||||
|
*
|
||||||
|
* Covers: sidebar navigation, table of contents (TOC)
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* ── Sidebar nav ────────────────────────────────────────────────────── */
|
||||||
|
|
||||||
|
nav[data-nav="sidebar"] h3 {
|
||||||
|
color: var(--text-3);
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-weight: var(--weight-medium);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
margin-top: var(--space-4);
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav[data-nav="sidebar"] h3:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav[data-nav="sidebar"] ul {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
gap: var(--space-1);
|
||||||
|
font-family: var(--font-ui);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav[data-nav="sidebar"] a {
|
||||||
|
display: block;
|
||||||
|
padding: var(--space-2) var(--space-3);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
color: var(--text-2);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: background-color var(--ease), color var(--ease);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav[data-nav="sidebar"] a:hover {
|
||||||
|
background-color: var(--surface-hover);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav[data-nav="sidebar"] a[aria-current] {
|
||||||
|
background-color: var(--accent-subtle);
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── TOC (aside) ────────────────────────────────────────────────────── */
|
||||||
|
|
||||||
|
aside[data-toc] h3 {
|
||||||
|
color: var(--text-3);
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-weight: var(--weight-medium);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
margin-bottom: var(--space-2);
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside[data-toc] nav ul {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
gap: var(--space-1);
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
aside[data-toc] nav a {
|
||||||
|
display: block;
|
||||||
|
padding: var(--space-1) var(--space-2);
|
||||||
|
color: var(--text-3);
|
||||||
|
text-decoration: none;
|
||||||
|
border-left: var(--focus-ring-width) solid transparent;
|
||||||
|
transition: color var(--ease), border-color var(--ease);
|
||||||
|
}
|
||||||
|
|
||||||
|
aside[data-toc] nav a:hover {
|
||||||
|
color: var(--text);
|
||||||
|
border-left-color: var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
aside[data-toc] nav a[aria-current] {
|
||||||
|
color: var(--accent);
|
||||||
|
border-left-color: var(--accent);
|
||||||
|
}
|
||||||
|
|
@ -14,7 +14,10 @@
|
||||||
@import "./layers/00-reset.css";
|
@import "./layers/00-reset.css";
|
||||||
@import "./layers/01-tokens.css";
|
@import "./layers/01-tokens.css";
|
||||||
@import "./layers/02-semantic.css";
|
@import "./layers/02-semantic.css";
|
||||||
|
@import "./layers/03-landmarks.css";
|
||||||
|
@import "./layers/04-forms.css";
|
||||||
@import "./layers/03-components.css";
|
@import "./layers/03-components.css";
|
||||||
|
@import "./layers/06-navigation.css";
|
||||||
@import "./layers/04-data-attrs.css";
|
@import "./layers/04-data-attrs.css";
|
||||||
@import "./layers/05-utilities.css";
|
@import "./layers/05-utilities.css";
|
||||||
@import "./layers/06-charts.css";
|
@import "./layers/06-charts.css";
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue