216 lines
8.2 KiB
CSS
216 lines
8.2 KiB
CSS
/* ==================================================================
|
|
Mathew — the wiki's skin for lean4web.
|
|
|
|
Lean4web paints its whole interface — the top bar, menus, modals and
|
|
the Monaco editor itself — with the CSS custom properties its VS Code
|
|
theme defines (`--vscode-*`), and its app root carries the
|
|
`monaco-editor` class so those variables reach every corner of the
|
|
page. This layer therefore does not fight the editor's styling: it
|
|
redefines that same vocabulary with the wiki's tokens — Computer
|
|
Modern for the chrome, the wiki's paper-and-slate surfaces, its
|
|
violet for focus, selection and links.
|
|
|
|
The wiki opens the frame as ?theme=light|dark and the companion
|
|
theme-init.js records that on <html data-mathew-theme> before the
|
|
first paint; with no parameter (a direct visit) the browser's
|
|
preference decides, exactly as lean4web's own default does. The
|
|
editor thus opens matching the page around it; the wiki's own theme
|
|
switch takes effect on the frame's next mount, not mid-edit — a live
|
|
swap would tear down a running Lean session.
|
|
|
|
The rules that target elements directly (rather than through the
|
|
--vscode variables) carry an `html[data-mathew-theme]` prefix: the
|
|
client bundles its own stylesheets through JavaScript, which can land
|
|
after this link, so specificity, not source order, is what holds.
|
|
================================================================== */
|
|
|
|
/* ---------- the wiki's typeface ---------- */
|
|
/* Computer Modern, the wiki's reading face. CMU ships only two weights,
|
|
so intermediate weights map onto real faces the way the wiki's own
|
|
stylesheet does. */
|
|
@font-face {
|
|
font-family: 'Computer Modern';
|
|
src: url('/fonts/cmunrm.ttf') format('truetype');
|
|
font-weight: 100 550;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: 'Computer Modern';
|
|
src: url('/fonts/cmunti.ttf') format('truetype');
|
|
font-weight: 100 550;
|
|
font-style: italic;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: 'Computer Modern';
|
|
src: url('/fonts/cmunbx.ttf') format('truetype');
|
|
font-weight: 551 900;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: 'Computer Modern';
|
|
src: url('/fonts/cmunbi.ttf') format('truetype');
|
|
font-weight: 551 900;
|
|
font-style: italic;
|
|
font-display: swap;
|
|
}
|
|
|
|
/* ---------- the wiki's palette, as the editor knows it ---------- */
|
|
html[data-mathew-theme='light'], html:not([data-mathew-theme]) {
|
|
color-scheme: light;
|
|
--mw-bg: #f7f8fb;
|
|
--mw-bg-elev: #ffffff;
|
|
--mw-surface: #ffffff;
|
|
--mw-surface-2: #eef1f7;
|
|
--mw-input-bg: #ffffff;
|
|
--mw-border: #e2e6ef;
|
|
--mw-text: #1b2130;
|
|
--mw-muted: #5b6478;
|
|
--mw-accent: #4f5fe8;
|
|
--mw-accent-strong: #3d4dd6;
|
|
--mw-on-accent: #ffffff;
|
|
--mw-danger: #d1344b;
|
|
--mw-warning: #d97706;
|
|
--mw-shadow: 0 4px 12px rgb(16 24 40 / 8%), 0 16px 40px -12px rgb(16 24 40 / 18%);
|
|
}
|
|
|
|
html[data-mathew-theme='dark'] {
|
|
color-scheme: dark;
|
|
--mw-bg: #0a0c12;
|
|
--mw-bg-elev: #10131c;
|
|
--mw-surface: #141826;
|
|
--mw-surface-2: #1a2030;
|
|
--mw-input-bg: #0c0f16;
|
|
--mw-border: #232a3c;
|
|
--mw-text: #e7eaf3;
|
|
--mw-muted: #99a1b5;
|
|
--mw-accent: #7c8cff;
|
|
--mw-accent-strong: #99a5ff;
|
|
--mw-on-accent: #0a0c12;
|
|
--mw-danger: #f47085;
|
|
--mw-warning: #f5a83c;
|
|
--mw-shadow: 0 4px 16px rgb(0 0 0 / 40%), 0 24px 48px -16px rgb(0 0 0 / 55%);
|
|
}
|
|
|
|
/* ---------- the same vocabulary, in Mathew's colours ----------
|
|
The app root (`.app.monaco-editor`) is where the editor's theme
|
|
service publishes --vscode-*; redefining the same names on it, with
|
|
an attribute selector for company, outranks the generated rules and
|
|
the whole interface — editor included — follows the wiki instead. */
|
|
html[data-mathew-theme] body,
|
|
html[data-mathew-theme] .monaco-editor {
|
|
/* the editor paper */
|
|
--vscode-editor-background: var(--mw-surface);
|
|
--vscode-editor-foreground: var(--mw-text);
|
|
--vscode-editor-selectionBackground: color-mix(in srgb, var(--mw-accent) 26%, transparent);
|
|
--vscode-editorCursor-foreground: var(--mw-accent);
|
|
--vscode-editorLineNumber-activeForeground: var(--mw-accent);
|
|
--vscode-editorGutter-background: var(--mw-surface);
|
|
|
|
/* chrome: the top bar, menus, popups, hover */
|
|
--vscode-menu-background: var(--mw-bg-elev);
|
|
--vscode-menu-foreground: var(--mw-text);
|
|
--vscode-menu-separatorBackground: var(--mw-border);
|
|
--vscode-menu-selectionBackground: var(--mw-surface-2);
|
|
--vscode-menu-selectionForeground: var(--mw-text);
|
|
--vscode-panel-border: var(--mw-border);
|
|
--vscode-widget-shadow: var(--mw-shadow);
|
|
|
|
/* hovers and suggestions the editor paints */
|
|
--vscode-editorWidget-border: var(--mw-border);
|
|
--vscode-editorHoverWidget-background: var(--mw-bg-elev);
|
|
--vscode-editorHoverWidget-foreground: var(--mw-text);
|
|
--vscode-editorHoverWidget-border: var(--mw-border);
|
|
|
|
/* form controls, buttons, links */
|
|
--vscode-input-background: var(--mw-input-bg);
|
|
--vscode-input-foreground: var(--mw-text);
|
|
--vscode-inputOption-activeForeground: var(--mw-accent);
|
|
--vscode-button-background: var(--mw-accent);
|
|
--vscode-button-hoverBackground: var(--mw-accent-strong);
|
|
--vscode-button-foreground: var(--mw-on-accent);
|
|
--vscode-button-border: transparent;
|
|
--vscode-textLink-foreground: var(--mw-accent-strong);
|
|
--vscode-focusBorder: var(--mw-accent);
|
|
|
|
/* lists (the file and project pickers) */
|
|
--vscode-list-hoverBackground: var(--mw-surface-2);
|
|
--vscode-list-dropBackground: color-mix(in srgb, var(--mw-accent) 12%, transparent);
|
|
|
|
/* the editor draws its own scrollbars — same subtle wash as the wiki's */
|
|
--vscode-scrollbarSlider-background: color-mix(in srgb, var(--mw-text) 18%, transparent);
|
|
--vscode-scrollbarSlider-hoverBackground: color-mix(in srgb, var(--mw-text) 30%, transparent);
|
|
--vscode-scrollbarSlider-activeBackground: color-mix(in srgb, var(--mw-text) 40%, transparent);
|
|
|
|
/* messages and marks, in the wiki's reds and ambers */
|
|
--vscode-notifications-background: var(--mw-bg-elev);
|
|
--vscode-notificationsErrorIcon-foreground: var(--mw-danger);
|
|
--vscode-editorError-foreground: var(--mw-danger);
|
|
--vscode-editorWarning-foreground: var(--mw-warning);
|
|
--vscode-editorWarning-background: color-mix(in srgb, var(--mw-warning) 14%, transparent);
|
|
--vscode-editorOverviewRuler-warningForeground: var(--mw-warning);
|
|
|
|
/* inline code, as the wiki sets it */
|
|
--vscode-textPreformat-background: var(--mw-surface-2);
|
|
--vscode-textPreformat-foreground: var(--mw-text);
|
|
}
|
|
|
|
/* ---------- the chrome, wearing the wiki ---------- */
|
|
/* The body: index.css paints it #2b2b2b / white by media query; the
|
|
wiki's own ground wins that tie by specificity. */
|
|
html[data-mathew-theme] body {
|
|
margin: 0;
|
|
font-family: 'Computer Modern', 'CMU Serif', Georgia, 'Times New Roman', serif;
|
|
background: var(--mw-bg);
|
|
color: var(--mw-text);
|
|
}
|
|
|
|
/* Form controls answer to the system font unless told; the editor keeps
|
|
its monospace (the wiki sets its own code the same way). */
|
|
html[data-mathew-theme] button,
|
|
html[data-mathew-theme] input,
|
|
html[data-mathew-theme] select,
|
|
html[data-mathew-theme] textarea {
|
|
font-family: inherit;
|
|
}
|
|
|
|
/* The top bar: the wiki's hairline, and its menu row rounded to a chip */
|
|
html[data-mathew-theme] nav {
|
|
border-bottom: 1px solid var(--mw-border);
|
|
}
|
|
html[data-mathew-theme] nav .nav-link,
|
|
html[data-mathew-theme] nav select {
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* Syntax errors and warnings read in the wiki's danger red / amber */
|
|
html[data-mathew-theme] .loading-ring:after {
|
|
border-color: var(--mw-accent) transparent var(--mw-accent) transparent;
|
|
}
|
|
|
|
/* Selection, like the wiki's — accent wash, not system blue */
|
|
html[data-mathew-theme] ::selection {
|
|
background: color-mix(in srgb, var(--mw-accent) 30%, transparent);
|
|
}
|
|
|
|
/* Scrollbars, the wiki's subtle shape (mirrors its _base.scss) */
|
|
html[data-mathew-theme] ::-webkit-scrollbar {
|
|
width: 11px;
|
|
height: 10px;
|
|
}
|
|
html[data-mathew-theme] ::-webkit-scrollbar-thumb {
|
|
background: color-mix(in srgb, var(--mw-text) 18%, transparent);
|
|
border-radius: 8px;
|
|
border: 3px solid transparent;
|
|
background-clip: content-box;
|
|
}
|
|
html[data-mathew-theme] ::-webkit-scrollbar-thumb:hover {
|
|
background: color-mix(in srgb, var(--mw-text) 30%, transparent);
|
|
background-clip: content-box;
|
|
}
|
|
html[data-mathew-theme] ::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|