|
Tags: Blanking Manual revert |
| (4 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /*
| |
| * 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; }
| |