/* ========================================================================== Midicake UNA manual - theme colours ========================================================================== mkdocs.yml sets `primary: custom` and `accent: custom` deliberately. A NAMED colour there (teal, indigo...) makes Material emit its own values on , which shadows :root and silently beats this file. If colours ever stop responding to edits here, check that setting first. A named palette also defines link colours and light/dark variants, so "custom" means we own the whole set - not just the header. ========================================================================== */ /* --- Light mode ------------------------------------------------------- */ :root { /* Header, nav, active states. */ --md-primary-fg-color: #ff8e00; --md-primary-fg-color--light: #ffa733; --md-primary-fg-color--dark: #cc7200; /* Text and icons ON the orange header. Orange is bright: white scores ~2.3:1 against it (fails WCAG AA), near-black ~9:1 (passes). */ --md-primary-bg-color: rgba(0, 0, 0, 0.87); --md-primary-bg-color--light: rgba(0, 0, 0, 0.54); /* Hover / focus accent. */ --md-accent-fg-color: #00b8b8; --md-accent-fg-color--transparent: rgba(0, 184, 184, 0.1); /* Body links. Pure #00ffff is ~1.25:1 on white - effectively invisible. This is the same hue, darkened to ~3.9:1 so links are readable. */ --md-typeset-a-color: #00a0a0; } /* --- Dark mode -------------------------------------------------------- */ [data-md-color-scheme="slate"] { --md-primary-fg-color: #ff8e00; --md-primary-fg-color--light: #ffa733; --md-primary-fg-color--dark: #cc7200; --md-primary-bg-color: rgba(0, 0, 0, 0.87); --md-primary-bg-color--light: rgba(0, 0, 0, 0.54); /* Bright cyan works here - dark background gives it plenty of contrast. */ --md-accent-fg-color: #00ffff; --md-accent-fg-color--transparent: rgba(0, 255, 255, 0.1); --md-typeset-a-color: #4de8e8; /* Background tint for slate. Material's default is 232 (blue-grey). Lower = warmer, higher = cooler. Remove this line for stock slate. */ --md-hue: 232; } /* ========================================================================== Content styling ========================================================================== */ /* LCD screenshots are 2x nearest-neighbour renders of a 160x128 panel. Let them scale without browser smoothing so pixels stay pixels. */ img[src*="lcd_screenshots"] { image-rendering: pixelated; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 4px; max-width: 320px; } /* Consecutive screenshots sit side by side rather than stacking. */ p > img[src*="lcd_screenshots"] + img[src*="lcd_screenshots"] { margin-left: 0.5rem; } /* Diagrams are SVG line art - give them room, never pixelate. */ img[src*="diagrams"] { image-rendering: auto; max-width: 100%; margin: 1rem 0; } .md-typeset table:not([class]) th { font-weight: 500; } .md-typeset table:not([class]) td, .md-typeset table:not([class]) th { padding: 0.5rem 0.75rem; } /* Hairline under section headings. Delete this rule for plain headings. */ .md-typeset h2 { border-bottom: 1px solid var(--md-default-fg-color--lightest); padding-bottom: 0.3rem; }