MediaWiki:Common.css
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/*
* catppuccin-dark.css
* ===================
* A clean, dark documentation stylesheet based on the Catppuccin Mocha colour palette.
* https://github.com/catppuccin/catppuccin
*
* Usage in your HTML file:
* <link rel="stylesheet" href="catppuccin-dark.css">
*
* The palette is defined as CSS custom properties (variables) at the top,
* so you can easily swap colours or create a light variant by overriding
* the variables in a separate file or a <style> block.
*
* Sections in this file:
* 1. Colour palette (CSS variables)
* 2. Reset and base
* 3. Typography
* 4. Links
* 5. Code and preformatted text
* 6. Callout / alert boxes (.note, .warn, .err, .good)
* 7. Tables
* 8. Status badges (.on, .off)
* 9. Tab labels (.tab-label)
* 10. Table of contents (.toc)
* 11. Utility classes
* 12. GUI mockup components (.mockup, .mgroup, etc.)
*/
/* ═══════════════════════════════════════════════════════════
1. COLOUR PALETTE — Catppuccin Mocha
═══════════════════════════════════════════════════════════
These are the official Catppuccin Mocha colours as CSS variables.
Override any of these in a <style> block or a second CSS file
to retheme everything at once.
For the light variant (Catppuccin Latte), replace these values:
--bg → #eff1f5
--surface → #e6e9ef
--border → #bcc0cc
--text → #4c4f69
--muted → #9ca0b0
--accent → #1e66f5
--green → #40a02b
(etc.)
*/
:root {
/* Backgrounds */
--bg: #1e1e2e; /* Base — main page background */
--surface: #313244; /* Surface0 — cards, code blocks, tables */
--overlay: #45475a; /* Overlay0 — borders, dividers */
/* Text */
--text: #cdd6f4; /* Main text colour */
--muted: #6c7086; /* Subdued text, labels, captions */
--border: #45475a; /* Border colour (same as overlay) */
/* Accent colours — used for headings, highlights, links */
--accent: #89b4fa; /* Blue — headings, links, selected tabs */
--teal: #89dceb; /* Sky — secondary links, tab label 2 */
--green: #a6e3a1; /* Green — code text, .good callout */
--yellow: #f9e2af; /* Yellow — h3 headings, .warn border */
--orange: #fab387; /* Peach — warnings */
--red: #f38ba8; /* Red — errors, dashed reference line */
--purple: #cba6f7; /* Mauve — tab label 3, crosshair dot */
}
/* ═══════════════════════════════════════════════════════════
2. RESET AND BASE
═══════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--bg);
color: var(--text);
font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
font-size: 14px;
line-height: 1.75;
/* Centre the content and limit its width for readability */
max-width: 960px;
margin: 0 auto;
padding: 32px;
}
/* ═══════════════════════════════════════════════════════════
3. TYPOGRAPHY
═══════════════════════════════════════════════════════════ */
/* Page title */
h1 {
color: var(--accent);
font-size: 26px;
margin-bottom: 4px;
}
/* Section headings */
h2 {
color: var(--accent);
font-size: 19px;
margin: 40px 0 12px;
padding-bottom: 5px;
border-bottom: 1px solid var(--border);
}
/* Subsection headings */
h3 {
color: var(--yellow);
font-size: 15px;
margin: 24px 0 7px;
}
/* Sub-subsection headings */
h4 {
color: var(--teal);
font-size: 14px;
margin: 16px 0 5px;
}
p {
margin-bottom: 10px;
}
ul,
ol {
padding-left: 22px;
margin-bottom: 10px;
}
li {
margin-bottom: 4px;
}
hr {
border: none;
border-top: 1px solid var(--border);
margin: 30px 0;
}
/* Small muted text — use for version numbers, captions */
.version {
color: var(--muted);
font-size: 12px;
}
/* ═══════════════════════════════════════════════════════════
4. LINKS
═══════════════════════════════════════════════════════════ */
a {
color: var(--teal);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* ═══════════════════════════════════════════════════════════
5. CODE AND PREFORMATTED TEXT
═══════════════════════════════════════════════════════════ */
/* Inline code and keyboard shortcuts */
code,
kbd {
background: var(--surface);
color: var(--green);
padding: 2px 6px;
border-radius: 4px;
font-family: "Noto Mono", "Fira Code", "Consolas", monospace;
font-size: 13px;
}
/* Multi-line code blocks */
pre {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
padding: 14px 18px;
overflow-x: auto; /* horizontal scroll instead of wrapping */
margin: 10px 0 16px;
font-size: 13px;
}
/* Reset code inside pre — inherits pre's colour */
pre code {
background: none;
padding: 0;
color: var(--green);
}
/* ═══════════════════════════════════════════════════════════
6. CALLOUT / ALERT BOXES
═══════════════════════════════════════════════════════════
Usage:
<div class="note">Informational note</div>
<div class="warn">Warning — something to be careful about</div>
<div class="err">Error — something is wrong / will break</div>
<div class="good">Success / positive outcome</div>
*/
.note,
.warn,
.err,
.good {
background: var(--surface);
border-radius: 0 6px 6px 0;
padding: 10px 16px;
margin: 12px 0;
}
/* Blue left border — informational */
.note { border-left: 4px solid var(--accent); }
/* Orange left border — caution */
.warn { border-left: 4px solid var(--orange); }
/* Red left border — error / danger */
.err { border-left: 4px solid var(--red); }
/* Green left border — success / tip */
.good { border-left: 4px solid var(--green); }
/* ═══════════════════════════════════════════════════════════
7. TABLES
═══════════════════════════════════════════════════════════ */
table {
border-collapse: collapse;
width: 100%;
margin: 12px 0 18px;
}
th {
background: var(--surface);
color: var(--accent);
padding: 8px 12px;
text-align: left;
border: 1px solid var(--border);
}
td {
padding: 7px 12px;
border: 1px solid var(--border);
vertical-align: top;
}
/* Zebra striping on table rows */
tr:nth-child(even) td {
background: #252535; /* slightly lighter than --bg */
}
/* ═══════════════════════════════════════════════════════════
8. STATUS BADGES (.on / .off)
═══════════════════════════════════════════════════════════
Use for binary state indicators, e.g. DIP switch positions.
Usage:
<span class="on">ON</span>
<span class="off">OFF</span>
*/
.on {
display: inline-block;
background: var(--green);
color: #1e1e2e;
font-weight: bold;
padding: 1px 8px;
border-radius: 3px;
font-family: monospace;
}
.off {
display: inline-block;
background: var(--border);
color: var(--text);
font-weight: bold;
padding: 1px 8px;
border-radius: 3px;
font-family: monospace;
}
/* ═══════════════════════════════════════════════════════════
9. TAB LABELS (.tab-label)
═══════════════════════════════════════════════════════════
Coloured pill labels, e.g. to indicate which UI tab a section
describes. Override the background-color inline for each variant.
Usage:
<span class="tab-label">Frequency Response</span>
<span class="tab-label" style="background:#89dceb;">THD+N</span>
<span class="tab-label" style="background:#cba6f7;">Voltage</span>
<span class="tab-label" style="background:#a6e3a1;">Power</span>
*/
.tab-label {
display: inline-block;
background: var(--accent); /* default: blue */
color: #1e1e2e; /* dark text on coloured background */
padding: 2px 10px;
border-radius: 4px;
font-weight: bold;
font-size: 13px;
margin-right: 6px;
}
/* ═══════════════════════════════════════════════════════════
10. TABLE OF CONTENTS (.toc)
═══════════════════════════════════════════════════════════
A styled box for a page table of contents.
Usage:
<div class="toc">
<strong>Contents</strong>
<ol>
<li><a href="#section1">Section 1</a></li>
...
</ol>
</div>
*/
.toc {
background: var(--surface);
border-radius: 8px;
padding: 16px 24px;
margin-bottom: 32px;
}
.toc ol {
padding-left: 20px;
}
.toc li {
margin: 4px 0;
}
.toc a {
color: var(--teal);
text-decoration: none;
}
.toc a:hover {
text-decoration: underline;
}
/* ═══════════════════════════════════════════════════════════
11. UTILITY CLASSES
═══════════════════════════════════════════════════════════ */
/* Centre text */
.text-center { text-align: center; }
/* Muted / subdued text */
.text-muted { color: var(--muted); font-size: 12px; }
/* Accent colour text */
.text-accent { color: var(--accent); }
/* Small caption below a figure or mockup */
.caption {
color: var(--muted);
font-size: 11px;
margin-top: -4px;
margin-bottom: 16px;
}
/* ═══════════════════════════════════════════════════════════
12. GUI MOCKUP COMPONENTS
═══════════════════════════════════════════════════════════
These classes recreate the look of the HP8903A application
using only HTML/CSS — no images needed. Useful for embedding
interface illustrations directly in documentation.
Structure:
<div class="mockup">
<div class="mockup-bar">Window title bar</div>
<div class="mockup-body">
<div class="mockup-left"> ... </div>
<div class="mockup-right"> ... </div>
</div>
</div>
*/
/* Outer container */
.mockup {
background: #181825; /* slightly darker than --bg */
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
margin: 16px 0;
}
/* Title bar at the top of the mockup window */
.mockup-bar {
background: var(--surface);
padding: 5px 12px;
color: var(--accent);
font-size: 11px;
font-family: monospace;
display: flex;
justify-content: space-between;
align-items: center;
}
/* Main content area — side by side columns */
.mockup-body {
padding: 12px;
display: flex;
gap: 10px;
font-size: 11px;
}
.mockup-left { min-width: 200px; }
.mockup-right { flex: 1; }
/* A grouped parameter section within the mockup */
.mgroup {
border: 1px solid var(--border);
border-radius: 5px;
padding: 8px;
margin: 5px 0;
position: relative;
}
/* Group title (floats above the border like a fieldset legend) */
.mgroup-title {
position: absolute;
top: -8px;
left: 8px;
background: #181825;
padding: 0 4px;
color: var(--accent);
font-size: 10px;
font-weight: bold;
}
/* A parameter row: label + value field + unit */
.mrow {
display: flex;
gap: 6px;
align-items: center;
margin: 3px 0;
}
.mlbl {
color: var(--muted);
min-width: 65px;
}
.mval {
background: var(--surface);
color: var(--text);
padding: 1px 5px;
border-radius: 3px;
border: 1px solid var(--border);
min-width: 72px;
}
.munit {
color: var(--muted);
font-size: 10px;
min-width: 26px;
}
/* A button inside the mockup */
.mbtn {
display: inline-block;
padding: 2px 8px;
border-radius: 3px;
font-weight: bold;
cursor: default;
font-size: 11px;
}
.mw-parser-output * { color: rgb(205, 214, 244) !important; }
.mw-parser-output p, .mw-parser-output li, .mw-parser-output td { color: rgb(205, 214, 244) !important; }
#firstHeading, .mw-parser-output h1, .mw-parser-output h2, .mw-parser-output h3 { color: rgb(137, 180, 250) !important; }
#content, #mw-content-container { background: rgb(36, 37, 60) !important; }
.mw-normal-catlinks { background: rgb(49, 50, 68) !important; }