MediaWiki:Common.css: Difference between revisions

Revision as of 20:11, 8 March 2026

/*
 * 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; }