Jump to content
Toggle search
Toggle menu
  • 10 articles
  • 1 users
  • 89 edits
Misconduct in Public Office
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Common.css: Difference between revisions

MediaWiki interface page
More actions
Created page with "→CSS placed here will be applied to all skins: /* ============================================================ MISCONDUCT IN PUBLIC OFFICE — Citizen CSS overrides Paste into MediaWiki:Common.css inside the wiki, as sysop. ============================================================ Note for the editor: Citizen uses its own CSS variables for typography and colour. The strategy here is to override those variables rather than fight the skin. Adjust..."
 
No edit summary
 
(7 intermediate revisions by the same user not shown)
Line 40: Line 40:
   /* Body-text scale */
   /* Body-text scale */
   --t-body-lead:  1.3125rem;  /* 21px — feature decks, hero deck */
   --t-body-lead:  1.3125rem;  /* 21px — feature decks, hero deck */
   --t-body:      1.1875rem;  /* 19px — primary body text */
   --t-body:      1.3125rem;  /* 19px — primary body text */
   --t-body-sm:    1.0625rem;  /* 17px — secondary body */
   --t-body-sm:    1.0625rem;  /* 17px — secondary body */
   --t-meta:      0.875rem;    /* 14px — captions, fine print */
   --t-meta:      0.875rem;    /* 14px — captions, fine print */
Line 179: Line 179:
   font-family: var(--font-serif);
   font-family: var(--font-serif);
   font-size: var(--t-body);
   font-size: var(--t-body);
   line-height: 1.65;
   line-height: 1.50;
   color: var(--c-ink-soft);
   color: var(--c-ink-soft);
   margin-bottom: 1.25rem;
   margin-bottom: 1.25rem;
}
/* Drop cap on the first paragraph of articles */
.mw-parser-output > p:first-of-type:first-letter {
  font-family: var(--font-serif);
  font-size: 4.2em;
  float: left;
  line-height: 0.85;
  margin: 0.08em 0.1em 0 0;
  font-weight: 700;
  color: var(--c-accent);
}
}


Latest revision as of 02:22, 26 September 2026

/* CSS placed here will be applied to all skins */
/* ============================================================
   MISCONDUCT IN PUBLIC OFFICE — Citizen CSS overrides
   Paste into MediaWiki:Common.css inside the wiki, as sysop.
   ============================================================

   Note for the editor: Citizen uses its own CSS variables for
   typography and colour. The strategy here is to override those
   variables rather than fight the skin. Adjust the values in the
   :root block at the top; everything else cascades.
   ============================================================ */


/* ------ FONT LOADING ------------------------------------------ */
/* Crimson Pro for body/headings, Inter Tight for UI, JetBrains
   Mono for dates and metadata. Loaded from Google Fonts. If you
   self-host fonts (recommended for production), replace the
   @import with @font-face declarations pointing to /resources/fonts/. */

@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;500;600;700&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');


/* ------ DESIGN TOKENS ----------------------------------------- */
/* Override Citizen's CSS custom properties. These cascade through
   the entire skin. */

:root,
html.skin-citizen {
  /* Typography */
  --citizen-font-family-base:   'Crimson Pro', 'Charter', 'Georgia', serif;
  --citizen-font-family-header: 'Crimson Pro', 'Charter', 'Georgia', serif;
  --citizen-font-family-sans:   'Inter Tight', -apple-system, system-ui, sans-serif;
  --citizen-font-family-mono:   'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

  /* Aliases for our own rules */
  --font-serif: var(--citizen-font-family-base);
  --font-sans:  var(--citizen-font-family-sans);
  --font-mono:  var(--citizen-font-family-mono);

  /* Body-text scale */
  --t-body-lead:  1.3125rem;   /* 21px — feature decks, hero deck */
  --t-body:       1.3125rem;   /* 19px — primary body text */
  --t-body-sm:    1.0625rem;   /* 17px — secondary body */
  --t-meta:       0.875rem;    /* 14px — captions, fine print */
  --t-micro:      0.75rem;     /* 12px — UI labels, badges */

  /* Display scale */
  --t-display: clamp(2.5rem, 5.5vw, 4.5rem);
  --t-h1:      clamp(1.875rem, 3vw, 2.5rem);
  --t-h2:      1.625rem;
  --t-h3:      1.25rem;

  /* Sober editorial palette */
  --c-ink:          #0e0e10;
  --c-ink-soft:     #2a2a2d;
  --c-ink-mute:     #56565b;
  --c-ink-faint:    #8a8a90;
  --c-rule:         #d8d4cc;
  --c-rule-soft:    #ebe7df;
  --c-paper:        #fbf8f1;
  --c-paper-pure:   #ffffff;
  --c-paper-sunk:   #f4efe5;
  --c-accent:       #8b1a1a;
  --c-accent-soft:  #f3e4e4;
  --c-accent-ink:   #5a0c0c;

  /* Flag colours — for {{Allegation}}, {{Opinion}}, etc. */
  --c-flag-fact:       #1f4a3a;
  --c-flag-fact-soft:  #e0ebe5;
  --c-flag-alleg:      #7a4a06;
  --c-flag-alleg-soft: #f4e9d4;
  --c-flag-opin:       #3b3a6e;
  --c-flag-opin-soft:  #e3e2f0;
  --c-flag-subj:       #56565b;
  --c-flag-subj-soft:  #ece9e1;

  /* Citizen overrides — colours and accents */
  --color-base:        var(--c-ink);
  --color-emphasized:  var(--c-ink);
  --color-base--subtle:var(--c-ink-soft);
  --color-link:        var(--c-accent);
  --color-link--visited: var(--c-accent-ink);
  --color-link--hover: var(--c-accent-ink);
  --color-surface-0:   var(--c-paper);
  --color-surface-1:   var(--c-paper-pure);
  --color-surface-2:   var(--c-paper-sunk);
  --color-surface-3:   var(--c-paper-sunk);
  --color-primary:     var(--c-accent);
  --color-primary--hover: var(--c-accent-ink);
}


/* ------ GLOBAL BODY ------------------------------------------- */

body {
  font-family: var(--font-serif);
  font-size:   var(--t-body);
  line-height: 1.6;
  background:  var(--c-paper);
  color:       var(--c-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a            { color: var(--c-accent); text-decoration: none; }
a:hover      { text-decoration: underline; text-underline-offset: 3px; }
a:visited    { color: var(--c-accent-ink); }


/* ------ HEADINGS ---------------------------------------------- */
/* Unified system: display-scale at weight 500, smaller headings
   at 600. Letter-spacing tight at large sizes, eased at small. */

.mw-body h1,
.mw-parser-output h1,
.firstHeading {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--c-ink);
  margin-bottom: 1rem;
  border-bottom: none;
}

.mw-body h2,
.mw-parser-output h2 {
  font-family: var(--font-serif);
  font-size: var(--t-h2);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 2.5rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--c-rule);
  color: var(--c-ink);
}

.mw-body h3,
.mw-parser-output h3 {
  font-family: var(--font-serif);
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 1.75rem 0 0.75rem;
  color: var(--c-ink);
}

.mw-body h4,
.mw-parser-output h4 {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 1.5rem 0 0.5rem;
  color: var(--c-ink-soft);
}

/* Italic in display headings — balanced kerning, accent colour */
.firstHeading em,
.mw-body h1 em,
.mw-parser-output h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--c-accent);
  margin-left: -0.08em;
  margin-right: 0.05em;
}

/* Italic in body — slight side-bearing fix */
.mw-parser-output p em,
.mw-parser-output li em {
  margin-right: 0.04em;
}


/* ------ BODY PROSE -------------------------------------------- */

.mw-parser-output p {
  font-family: var(--font-serif);
  font-size: var(--t-body);
  line-height: 1.50;
  color: var(--c-ink-soft);
  margin-bottom: 1.25rem;
}

.mw-parser-output ul,
.mw-parser-output ol {
  font-family: var(--font-serif);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--c-ink-soft);
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
}
.mw-parser-output li { margin-bottom: 0.4rem; }

.mw-parser-output blockquote {
  border-left: 3px solid var(--c-accent);
  padding: 0.5rem 0 0.5rem 1.5rem;
  margin: 1.5rem 0;
  font-family: var(--font-serif);
  font-size: var(--t-body);
  font-style: italic;
  color: var(--c-ink-soft);
  line-height: 1.5;
}


/* ------ MASTHEAD ---------------------------------------------- */
/* Citizen header customisation — bigger logo, breathing room */

.citizen-header {
  border-bottom: 1px solid var(--c-rule);
  background: rgba(251, 248, 241, 0.94);
  backdrop-filter: blur(8px);
}

.citizen-header__logo img {
  width: 48px;
  height: 48px;
}

.citizen-header__siteTitle {
  font-family: var(--font-serif) !important;
  font-weight: 600;
  font-size: 1.375rem;
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: var(--c-ink);
}

/* Navigation links */
.citizen-header nav a {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-ink-soft);
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}
.citizen-header nav a:hover {
  color: var(--c-accent);
  text-decoration: none;
}
.citizen-header nav a.is-active {
  color: var(--c-ink);
  border-bottom-color: var(--c-accent);
}


/* ------ FLAG TEMPLATES (Allegation, Opinion, etc.) ----------- */
/* These classes are emitted by Template:Allegation etc. */

.flag {
  border-left: 3px solid;
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
  border-radius: 0 4px 4px 0;
  background: var(--c-paper-sunk);
  font-family: var(--font-serif);
}

.flag__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.flag__type {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 3px;
  white-space: nowrap;
}

.flag__title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-ink);
}

.flag__body {
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--c-ink-soft);
}
.flag__body p:last-child { margin-bottom: 0; }

.flag__foot {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px dotted var(--c-rule);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--c-ink-mute);
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.flag__foot strong { color: var(--c-ink-soft); font-weight: 600; }

/* Per-type styling */
.flag--subj { border-color: var(--c-flag-subj); background: var(--c-flag-subj-soft); }
.flag--subj .flag__type { background: var(--c-flag-subj); color: var(--c-paper); }

.flag--allegation { border-color: var(--c-flag-alleg); background: var(--c-flag-alleg-soft); }
.flag--allegation .flag__type { background: var(--c-flag-alleg); color: var(--c-paper); }

.flag--opinion { border-color: var(--c-flag-opin); background: var(--c-flag-opin-soft); }
.flag--opinion .flag__type { background: var(--c-flag-opin); color: var(--c-paper); }

.flag--fact { border-color: var(--c-flag-fact); background: var(--c-flag-fact-soft); }
.flag--fact .flag__type { background: var(--c-flag-fact); color: var(--c-paper); }

.flag--reply { border-color: var(--c-ink-soft); background: var(--c-paper-pure); border: 1px solid var(--c-rule); border-left: 3px solid var(--c-ink-soft); }
.flag--reply .flag__type { background: var(--c-ink-soft); color: var(--c-paper); }

.flag--contact { border-color: var(--c-flag-fact); background: var(--c-flag-fact-soft); }
.flag--contact .flag__type { background: var(--c-flag-fact); color: var(--c-paper); }


/* ------ INFOBOXES (defendant, case, law) ---------------------- */

.infobox {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  border: 1px solid var(--c-rule);
  border-radius: 4px;
  margin: 0 0 1.5rem 1.5rem;
  background: var(--c-paper-pure);
  overflow: hidden;
  float: right;
  width: 280px;
  max-width: 40%;
}

.infobox__header {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--c-rule);
  background: var(--c-paper-sunk);
}

.infobox__kind {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-ink-mute);
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.infobox__title {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--c-ink);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.infobox__body { padding: 0.5rem 0; }

.infobox__row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--c-rule-soft);
  font-size: 0.8125rem;
}
.infobox__row:last-child { border-bottom: none; }

.infobox__label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-ink-mute);
  font-weight: 600;
  padding-top: 2px;
}

.infobox__value {
  font-family: var(--font-serif);
  color: var(--c-ink-soft);
  font-size: 0.875rem;
  line-height: 1.4;
}
.infobox__value strong { color: var(--c-ink); font-weight: 500; }

.infobox__status {
  display: inline-block;
  font-size: 0.6875rem;
  font-family: var(--font-sans);
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.infobox__status--active     { background: var(--c-flag-alleg-soft); color: var(--c-flag-alleg); }
.infobox__status--concluded  { background: var(--c-flag-fact-soft);  color: var(--c-flag-fact); }
.infobox__status--pending    { background: var(--c-paper-sunk);       color: var(--c-ink-soft); }


/* ------ REFERENCES / CITE EXTENSION --------------------------- */

.references,
.mw-references-wrap {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-rule);
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--c-ink-soft);
}
.references li {
  font-size: 0.9375rem !important;
  margin-bottom: 0.5rem !important;
}

sup.reference {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 600;
}
sup.reference a {
  color: var(--c-accent);
  text-decoration: none;
}


/* ------ NAMED-PERSON BADGES (inline) ------------------------- */

.named-person {
  display: inline;
  border-bottom: 1px dotted var(--c-ink-mute);
  cursor: help;
}
.named-person a {
  color: inherit;
}
.named-person::after {
  content: "*";
  font-size: 0.75em;
  color: var(--c-accent);
  margin-left: 1px;
  vertical-align: super;
}


/* ------ TABLES OF AUTHORITIES & SMW QUERY TABLES ------------- */

.wikitable,
.smwtable {
  background: var(--c-paper-pure);
  border: 1px solid var(--c-rule);
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  margin: 1.5rem 0;
}
.wikitable th,
.smwtable th {
  background: var(--c-paper-sunk);
  border-bottom: 1px solid var(--c-rule);
  padding: 0.7rem 0.85rem;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--c-ink-mute);
}
.wikitable td,
.smwtable td {
  padding: 0.85rem;
  border-bottom: 1px solid var(--c-rule-soft);
  font-size: 0.9375rem;
  color: var(--c-ink-soft);
  font-family: var(--font-serif);
}
.wikitable tr:hover td { background: rgba(244, 239, 229, 0.4); }


/* ------ SIDEBAR (left navigation) ---------------------------- */

.citizen-pageSidebar,
.citizen-toc {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
}

.citizen-pageSidebar a {
  color: var(--c-ink-soft);
  padding: 0.35rem 0;
  text-decoration: none;
  font-size: 0.8125rem;
  line-height: 1.4;
  border-left: 2px solid transparent;
  padding-left: 0.6rem;
  margin-left: -0.6rem;
}
.citizen-pageSidebar a:hover {
  color: var(--c-accent);
  border-left-color: var(--c-accent);
}
.citizen-pageSidebar a.is-active {
  color: var(--c-ink);
  border-left-color: var(--c-accent);
  font-weight: 500;
}


/* ------ EDITORIAL NOTE BANNER -------------------------------- */
/* Used at the top of the main page and similar contexts */

.editorial-note {
  background: var(--c-paper-sunk);
  border-left: 3px solid var(--c-accent);
  padding: 1.75rem 2rem;
  margin: 2rem 0;
  font-family: var(--font-serif);
  font-size: var(--t-body);
  line-height: 1.55;
  border-radius: 0 4px 4px 0;
}

.editorial-note__label {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--c-accent);
  margin-bottom: 0.6rem;
}


/* ------ FOOTER ----------------------------------------------- */

.citizen-footer {
  background: var(--c-paper-sunk);
  border-top: 1px solid var(--c-rule);
  padding: 3rem var(--pad-x, 1.5rem) 2rem;
  font-family: var(--font-sans);
}

.citizen-footer h4 {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--c-ink-mute);
  margin-bottom: 0.85rem;
  border: none;
}

.citizen-footer a {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--c-ink-soft);
  padding: 0.3rem 0;
  text-decoration: none;
}
.citizen-footer a:hover { color: var(--c-accent); }


/* ------ TOC --------------------------------------------------- */

.toc, #toc {
  background: var(--c-paper-sunk);
  border: 1px solid var(--c-rule);
  border-radius: 4px;
  padding: 1rem 1.25rem;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
}
.toc .toctitle h2 {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--c-ink-mute);
  border: none;
  padding: 0;
  margin: 0 0 0.5rem;
}
.toc ul {
  padding-left: 1rem;
  margin: 0;
}
.toc li {
  font-size: 0.8125rem;
  margin: 0.25rem 0;
}


/* ------ DARK MODE (Citizen respects prefers-color-scheme) ----- */
/* Re-tune the palette for dark mode */

html.skin-citizen-dark,
@media (prefers-color-scheme: dark) {
  :root {
    --c-paper:       #16161a;
    --c-paper-pure:  #1c1c20;
    --c-paper-sunk:  #232328;
    --c-ink:         #f0eee5;
    --c-ink-soft:    #d6d3c8;
    --c-ink-mute:    #97948b;
    --c-ink-faint:   #6b6962;
    --c-rule:        #3a3a40;
    --c-rule-soft:   #2c2c32;
    --c-accent:      #d96f6f;
    --c-accent-soft: #3d2424;
    --c-accent-ink:  #f0a5a5;
  }
}


/* ------ PRINT STYLES ----------------------------------------- */
/* Important for legal documents that may be printed */

@media print {
  body { background: white; color: black; font-size: 11pt; }
  .citizen-header, .citizen-footer, .citizen-pageSidebar,
  .citizen-toc, .editsection, #footer { display: none; }
  a { color: black; text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; font-size: 9pt; }
  .flag { border: 1pt solid black; background: white; }
  .flag__type { background: black; color: white; }
}
Retrieved from "https://wiki.misconductinpublicoffice.org/index.php?title=MediaWiki:Common.css&oldid=48"