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.

/* Logo ausblenden — dieser Block (#p-logo, 200x160px) saß ganz
   oben im Sidebar und war die eigentliche Ursache des großen
   Abstands über "About" */
#p-logo,
.mw-wiki-logo,
.mw-logo,
.mw-logo-icon,
.mw-logo-wordmark,
.vector-logo {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
}
/* Gesamte Seite schwarz machen */
body {
    background-color: #000 !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
/* Inhaltsbereich (Artikel) */
.mw-body {
    background-color: #000 !important;
    color: #fff !important;
    border: 0px solid #444 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
/* Überschriften weiß machen */
h1, h2, h3, h4, h5, h6 {
    color: #fff !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
/* Spezielle MediaWiki-Trennlinien entfernen */
.mw-headline, .firstHeading, .mw-title {
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
/* Pseudo-Elemente, die Linien erzeugen könnten, entfernen */
h1::after, h2::after, h3::after, h4::after, h5::after, h6::after {
    content: "" !important;
    display: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
/* Entfernt alle möglichen Linien in MediaWiki */
hr, .mw-content-ltr hr, .mw-parser-output hr {
    display: none !important;
    border: none !important;
    height: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
/* Kopfzeile und Navigation */
#mw-head,
#p-personal,
#mw-panel {
    background-color: #000 !important;
    color: #fff !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
/* Menüleisten und Boxen */
.vector-menu-content,
.vector-menu-content ul {
    background-color: #000 !important;
    color: #fff !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
/* Eingabefelder, Suchbox */
input, textarea {
    background-color: #222 !important;
    color: #fff !important;
    border: 0px solid #444 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
/* Links */
a {
    color: #4aa5ff !important;
}
a:visited {
    color: #9c77ff !important;
}
/* Tabellen, Boxen, Panels ohne Ränder */
table, th, td, .mw-body-content, .vector-menu-content, .vector-menu-tabs {
    border: none !important;
    background-color: #000 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    background-image: none !important;
    background: none !important;
}
/* Dropdown-Menüs */
.vector-dropdown {
    background-color: #000 !important;
    color: #fff !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
/* Footer (unten) */
#footer, #footer li, #footer a {
    background-color: #000 !important;
    color: #fff !important;
}
/* Hauptnavigation oben */
#mw-head,
#p-personal,
#left-navigation,
#right-navigation {
    background-color: #000 !important; /* Schwarzer Hintergrund */
    color: #fff !important; /* Weiße Schrift */
    box-shadow: none !important;
    text-decoration: none !important;
}
/* Tabs ("Read", "Discussion", etc.) */
#p-views .vector-menu-content ul {
    background-color: #000 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
/* Einzelne Tabs */
#p-views li {
    background-color: #000 !important;
    border: 0px solid #444 !important; /* Optional: Dunkle Ränder */
    box-shadow: none !important;
    text-decoration: none !important;
}
/* Ensure "Main Page" and "Discussion" links match the sidebar links */
#p-views li a,
#p-namespaces li a,
#p-variants li a {
    color: #4aa5ff !important; /* Same blue as sidebar links */
    text-decoration: none !important;
}
/* Hover effect */
#p-views li a:hover,
#p-namespaces li a:hover,
#p-variants li a:hover {
    color: #9c77ff !important; /* Same as visited links */
}
/* Make the top navigation links match the sidebar link colors */
#p-views a,
#p-views a:visited,
#p-views a:active,
#p-views a:hover {
    color: #4aa5ff !important; /* Same blue as sidebar links */
    text-decoration: none !important;
}
/* If you want a hover effect */
#p-views a:hover {
    color: #9c77ff !important; /* Same as visited links */
}
/* Falls noch weiß auftaucht, versuche dies für spezifische Skins */
.vector-menu-tabs li,
.vector-menu-tabs a {
    background-color: #000 !important;
    color: #fff !important;
    box-shadow: none !important;
    text-decoration: none !important;
    background-image: none !important;
    background: none !important;
}
/* Remove background gradients from menu tabs and headings */
#mw-head .vector-menu-dropdown .vector-menu-heading,
.vector-legacy-sidebar .vector-menu-portal .vector-menu-heading {
    background-image: none !important;
    background: none !important;
}
/* Dropdown-Menüs (z. B. "Mehr") */
.vector-dropdown {
    background-color: #000 !important;
}
/* Suchleiste */
#p-search input {
    background-color: #222 !important;
    color: #fff !important;
    border: 1px solid #444 !important;
}
/* ALLE Trennlinien entfernen */
hr,
.mw-body hr,
.vector-menu-content ul,
.vector-menu-content li,
.vector-menu-tabs li,
.vector-menu-tabs a,
table, th, td,
.mw-panel,
.vector-dropdown,
#footer {
    border: none !important;
    box-shadow: none !important;
}
/* Tabellen ohne Linien */
table, th, td {
    border: none !important;
    background-color: #000 !important;
}
.vector-legacy-sidebar .vector-menu-portal .vector-menu-heading {
    background-image: none !important;
    background: none !important;
}
/* Hide Tools box that Vector 2022 renders itself */
#p-tb {
    display: none;
}
/* Hide "Powered by MediaWiki" */
.mw-footer .poweredby {
    display: none !important;
}
/* ============================================================
   ADDED 1: sidebar width lock, matched to content's margin.
   ============================================================ */
#column-one,
#mw-panel,
.vector-legacy-sidebar {
    width: 250px !important;
}
#content {
    margin-left: 250px !important;
}
/* ============================================================
   ADDED 2: text sizes — content area and sidebar.
   ============================================================ */
#content,
.mw-body,
.mw-body-content {
    font-size: 26px !important;
}
#firstHeading, .firstHeading { font-size: 38px !important; }
.mw-body-content h2 { font-size: 32px !important; }
.mw-body-content h3 { font-size: 30px !important; }
.mw-body-content h4 { font-size: 28px !important; }
.vector-legacy-sidebar a,
.portlet a,
.pBody a,
#mw-panel a {
    font-size: 20px !important;
    line-height: 1.2 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}
.portlet h3,
.portlet h5,
.vector-menu-heading,
.mw-portlet .vector-menu-heading,
.vector-pinnable-header-label {
    font-size: 20px !important;
    font-weight: normal !important;
    line-height: 1.2 !important;
    margin-left: 0.5em !important;
}
/* ============================================================
   ADDED 3: turn off dark mode toggle, Create account, Log in
   ============================================================ */
#pt-darkmode,
#pt-darkmode-sticky-header,
#pt-createaccount,
#pt-login {
    display: none !important;
}
#ca-talk {
    display: none !important;
}
/* ============================================================
   ADDED 4: close the gap above and below the page title.
   ============================================================ */
#content {
    padding-top: 0.3em !important;
}
#firstHeading, .firstHeading {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    overflow: visible !important;
}
#siteSub, #contentSub, #contentSub2, .mw-indicators {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
#mw-content-text,
#mw-content-text > .mw-parser-output {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.mw-parser-output > p:first-of-type,
.mw-parser-output > p:first-child,
#mw-content-text p:first-of-type,
#firstHeading + p,
.firstHeading + p {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* ============================================================
   ADDED 5: force black text on the printable version
   ============================================================ */
@media print {
    body, .mw-body, .mw-body-content,
    p, li, td, th, dd, dt,
    h1, h2, h3, h4, h5, h6, .firstHeading,
    a, a:visited {
        color: #000 !important;
        background: #fff !important;
    }
}

/* ============================================================================
   ============================  CRAZY VERSION  ===============================
   Yale-School-of-Art-style. Every PAGE gets ONE of 10 color schemes, chosen
   from the page name by MediaWiki:Common.js (paste that file too!).
   → Same page always looks the same, but Digital Twin, Homes of the Internet,
     Köçek Pisti … each look COMPLETELY different: full colors (yellow, cyan,
     magenta, red…) mixed with pastels, big bold uppercase headlines, colored
     text-boxes, and a repeating background pattern.
   To turn the crazy version OFF: delete everything from this line to the end
   of the file, and blank out MediaWiki:Common.js. Nothing above is affected.
   ============================================================================ */

/* let the page background pattern show through the content column */
body[class*="crazy-scheme-"] #content,
body[class*="crazy-scheme-"] .mw-body,
body[class*="crazy-scheme-"] .mw-body-content,
body[class*="crazy-scheme-"] #bodyContent,
body[class*="crazy-scheme-"] #mw-content-text,
body[class*="crazy-scheme-"] .mw-parser-output,
body[class*="crazy-scheme-"] table,
body[class*="crazy-scheme-"] th,
body[class*="crazy-scheme-"] td {
    background: transparent !important;
}
body[class*="crazy-scheme-"] {
    background-attachment: fixed !important;
    background-repeat: repeat !important;
}

/* ---- big Yale-style page title, solid color highlight behind text ---- */
body[class*="crazy-scheme-"] #firstHeading,
body[class*="crazy-scheme-"] .firstHeading {
    display: inline-block !important;
    background: var(--accent) !important;
    color: var(--accent-text) !important;
    text-transform: uppercase !important;
    font-weight: 900 !important;
    font-size: 60px !important;
    line-height: 1.05 !important;
    letter-spacing: 0.01em !important;
    padding: 0.08em 0.28em !important;
    margin: 0 0 0.35em 0 !important;
}

/* ---- section headings (== Gallery ==, == Projects == …) as color blocks ---- */
body[class*="crazy-scheme-"] .mw-body-content h2 {
    display: inline-block !important;
    color: #000 !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    font-size: 38px !important;
    line-height: 1.1 !important;
    padding: 0.05em 0.28em !important;
    margin: 0.4em 0 0.3em 0 !important;
    border: none !important;
}
body[class*="crazy-scheme-"] .mw-body-content h2:nth-of-type(3n+1) { background: var(--h2a) !important; }
body[class*="crazy-scheme-"] .mw-body-content h2:nth-of-type(3n+2) { background: var(--h2b) !important; }
body[class*="crazy-scheme-"] .mw-body-content h2:nth-of-type(3n+3) { background: var(--h2c) !important; }

body[class*="crazy-scheme-"] .mw-body-content h3 {
    display: inline-block !important;
    color: #000 !important;
    background: var(--h2b) !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    padding: 0.05em 0.28em !important;
}

/* ---- every paragraph becomes a solid color box (rotating colors) ---- */
body[class*="crazy-scheme-"] .mw-parser-output > p {
    display: block !important;
    color: #000 !important;
    font-size: 22px !important;
    line-height: 1.4 !important;
    padding: 0.7em 1em !important;
    margin: 0 0 14px 0 !important;
    max-width: 46em !important;
}
body[class*="crazy-scheme-"] .mw-parser-output > p:nth-of-type(3n+1) { background: var(--box1) !important; }
body[class*="crazy-scheme-"] .mw-parser-output > p:nth-of-type(3n+2) { background: var(--box2) !important; }
body[class*="crazy-scheme-"] .mw-parser-output > p:nth-of-type(3n+3) { background: var(--box3) !important; }

/* links inside colored boxes stay readable */
body[class*="crazy-scheme-"] .mw-parser-output > p a,
body[class*="crazy-scheme-"] .mw-parser-output > ul > li a { color: #0000ee !important; }
body[class*="crazy-scheme-"] .mw-parser-output > p a:visited,
body[class*="crazy-scheme-"] .mw-parser-output > ul > li a:visited { color: #551a8b !important; }

/* ---- project / text lists as alternating color boxes ---- */
body[class*="crazy-scheme-"] .mw-parser-output > ul {
    padding-left: 0 !important;
    margin-left: 0 !important;
    list-style: none !important;
}
body[class*="crazy-scheme-"] .mw-parser-output > ul > li {
    color: #000 !important;
    font-size: 20px !important;
    line-height: 1.35 !important;
    padding: 0.45em 0.9em !important;
    margin: 0 0 8px 0 !important;
    list-style: none !important;
    max-width: 46em !important;
}
body[class*="crazy-scheme-"] .mw-parser-output > ul > li:nth-child(3n+1) { background: var(--box1) !important; }
body[class*="crazy-scheme-"] .mw-parser-output > ul > li:nth-child(3n+2) { background: var(--box2) !important; }
body[class*="crazy-scheme-"] .mw-parser-output > ul > li:nth-child(3n+3) { background: var(--box3) !important; }

/* ---- keep the nav sidebar a clean white box (like Yale) so it stays usable ---- */
body[class*="crazy-scheme-"] #mw-panel,
body[class*="crazy-scheme-"] .vector-legacy-sidebar,
body[class*="crazy-scheme-"] #column-one {
    background: #fff !important;
    background-image: none !important;
}
body[class*="crazy-scheme-"] #mw-panel .vector-menu-content,
body[class*="crazy-scheme-"] #mw-panel .vector-menu-content ul {
    background: transparent !important;
}
body[class*="crazy-scheme-"] #mw-panel a,
body[class*="crazy-scheme-"] .vector-legacy-sidebar a,
body[class*="crazy-scheme-"] .portlet a,
body[class*="crazy-scheme-"] .pBody a { color: #000 !important; }
body[class*="crazy-scheme-"] #mw-panel a:hover,
body[class*="crazy-scheme-"] .vector-legacy-sidebar a:hover { text-decoration: underline !important; }
body[class*="crazy-scheme-"] .portlet h3,
body[class*="crazy-scheme-"] .portlet h5,
body[class*="crazy-scheme-"] #mw-panel .vector-menu-heading { color: #000 !important; }

/* ============================================================================
   3 RANDOM BACKGROUND IMAGES
   MediaWiki:Common.js adds ONE of .crazy-bg-0 / -1 / -2 at random on every
   page load, so the background image changes each time you open/refresh a page.
   These override the per-scheme pattern below (the scheme colors for the
   headlines and boxes still apply).

   → TO USE: upload 3 images in the wiki (Special:UploadWizard), then replace
     BG1.jpg / BG2.jpg / BG3.jpg below with your exact file names.
   → background-size: 400px auto = tiled/repeating like the Yale grid.
     For ONE big non-repeating photo instead, use:
       background-size: cover !important;
       background-repeat: no-repeat !important;
   The actual .crazy-bg-0/1/2 rules are at the very END of this file (they
   must come after the schemes to override the fallback pattern).
   ============================================================================ */

/* ============================================================================
   THE 10 SCHEMES — colors for headlines + boxes. (The background-image here
   is a fallback pattern; it is overridden by the 3 random images at the end.)
   ============================================================================ */

/* 0 — full yellow / cyan, yellow dot grid */
body.crazy-scheme-0 {
    --accent:#ffe600; --accent-text:#000;
    --h2a:#ff00a8; --h2b:#00e0ff; --h2c:#37ff37;
    --box1:#b8f5ff; --box2:#fff4a3; --box3:#ffc9de;
    background-color:#000 !important;
    background-image: radial-gradient(#ffe600 3px, transparent 3.5px) !important;
    background-size: 26px 26px !important;
}
/* 1 — full magenta / pastel yellow, cyan diagonal stripes */
body.crazy-scheme-1 {
    --accent:#ff00a8; --accent-text:#fff;
    --h2a:#ffe600; --h2b:#00e0ff; --h2c:#ff2d1a;
    --box1:#fff4a3; --box2:#b8f5ff; --box3:#dcc9ff;
    background-color:#000 !important;
    background-image: repeating-linear-gradient(45deg,#00e0ff 0 14px,transparent 14px 30px) !important;
}
/* 2 — full cyan / pastel pink, magenta grid */
body.crazy-scheme-2 {
    --accent:#00e0ff; --accent-text:#000;
    --h2a:#ff00a8; --h2b:#ffe600; --h2c:#2a2aff;
    --box1:#ffc9de; --box2:#c7f5c0; --box3:#fff4a3;
    background-color:#000 !important;
    background-image:
        linear-gradient(#ff00a8 2px, transparent 2px),
        linear-gradient(90deg,#ff00a8 2px, transparent 2px) !important;
    background-size: 34px 34px, 34px 34px !important;
}
/* 3 — full red / pastel green, checkerboard */
body.crazy-scheme-3 {
    --accent:#ff2d1a; --accent-text:#fff;
    --h2a:#ffe600; --h2b:#00e0ff; --h2c:#37ff37;
    --box1:#c7f5c0; --box2:#fff4a3; --box3:#ffc9de;
    background-color:#000 !important;
    background-image: conic-gradient(#ff2d1a 0 25%, transparent 0 50%) !important;
    background-size: 44px 44px !important;
}
/* 4 — full green / pastel lilac, vertical stripes */
body.crazy-scheme-4 {
    --accent:#37ff37; --accent-text:#000;
    --h2a:#ff00a8; --h2b:#00e0ff; --h2c:#ff7a00;
    --box1:#dcc9ff; --box2:#b8f5ff; --box3:#fff4a3;
    background-color:#000 !important;
    background-image: repeating-linear-gradient(90deg,#37ff37 0 12px,transparent 12px 26px) !important;
}
/* 5 — full orange / pastel cyan, big dots */
body.crazy-scheme-5 {
    --accent:#ff7a00; --accent-text:#000;
    --h2a:#00e0ff; --h2b:#ff00a8; --h2c:#37ff37;
    --box1:#b8f5ff; --box2:#ffdcae; --box3:#ffc9de;
    background-color:#000 !important;
    background-image: radial-gradient(#ff7a00 7px, transparent 8px) !important;
    background-size: 42px 42px !important;
}
/* 6 — full blue / pastel yellow, zigzag */
body.crazy-scheme-6 {
    --accent:#2a2aff; --accent-text:#fff;
    --h2a:#ffe600; --h2b:#00e0ff; --h2c:#ff00a8;
    --box1:#fff4a3; --box2:#b8f5ff; --box3:#c7f5c0;
    background-color:#000 !important;
    background-image: repeating-linear-gradient(135deg,#2a2aff 0 10px,transparent 10px 22px) !important;
}
/* 7 — full yellow / pastel pink, crosshatch */
body.crazy-scheme-7 {
    --accent:#ffe600; --accent-text:#000;
    --h2a:#ff2d1a; --h2b:#00e0ff; --h2c:#ff00a8;
    --box1:#ffc9de; --box2:#fff4a3; --box3:#dcc9ff;
    background-color:#000 !important;
    background-image:
        repeating-linear-gradient(45deg,#ffe600 0 3px,transparent 3px 18px),
        repeating-linear-gradient(-45deg,#ffe600 0 3px,transparent 3px 18px) !important;
}
/* 8 — full magenta / full cyan, horizontal stripes */
body.crazy-scheme-8 {
    --accent:#ff00a8; --accent-text:#fff;
    --h2a:#00e0ff; --h2b:#ffe600; --h2c:#37ff37;
    --box1:#00e0ff; --box2:#fff4a3; --box3:#ffc9de;
    background-color:#000 !important;
    background-image: repeating-linear-gradient(0deg,#ff00a8 0 16px,transparent 16px 34px) !important;
}
/* 9 — full red / full yellow, thick diagonal */
body.crazy-scheme-9 {
    --accent:#ff2d1a; --accent-text:#fff;
    --h2a:#ffe600; --h2b:#00e0ff; --h2c:#ff00a8;
    --box1:#ffe600; --box2:#b8f5ff; --box3:#c7f5c0;
    background-color:#000 !important;
    background-image: repeating-linear-gradient(45deg,#ff2d1a 0 20px,transparent 20px 42px) !important;
}

/* ============================================================================
   3 RANDOM BACKGROUND IMAGES — placed here so they override the schemes.
   Replace BG1.jpg / BG2.jpg / BG3.jpg with your uploaded file names.
   ============================================================================ */
body.crazy-bg-0 {
    background-color:#000 !important;
    background-image:
        linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
        url("/index.php/Special:FilePath/BaGr1.jpg") !important;
    background-size: 400px auto !important;
    background-repeat: repeat !important;
}
body.crazy-bg-1 {
    background-color:#000 !important;
    background-image:
        linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
        url("/index.php/Special:FilePath/BaGr2.jpg") !important;
    background-size: 400px auto !important;
    background-repeat: repeat !important;
}
body.crazy-bg-2 {
    background-color:#000 !important;
    background-image:
        linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
        url("/index.php/Special:FilePath/BaGr3.jpg") !important;
    background-size: 400px auto !important;
    background-repeat: repeat !important;
}
/* ============================  END CRAZY VERSION  =========================== */