MediaWiki:Common.css: Difference between revisions

From Mona Mahall / Asli Serbest
Jump to navigation Jump to search
No edit summary
No edit summary
Line 311: Line 311:
   To turn OFF: delete from here to the end of the file, and blank Common.js.
   To turn OFF: delete from here to the end of the file, and blank Common.js.
   ============================================================================ */
   ============================================================================ */
/* ---- ANTI-FLASH GUARD ----
  Common.js adds the color scheme AFTER the first paint (MediaWiki loads
  site JS late), which caused the plain dark layout to flash before the
  colors. Hide the article until Common.js adds "crazy-ready" to <html>,
  then reveal it already colored. Scoped to html.client-js so that visitors
  with JavaScript OFF always see the content normally. */
html.client-js:not(.crazy-ready) #content {
    visibility: hidden !important;
}
/* ---- links: DEFAULT browser states + yellow hover ----
/* ---- links: DEFAULT browser states + yellow hover ----
   unvisited = blue #0000FF · visited = purple #800080 · hover = yellow bg
   unvisited = blue #0000FF · visited = purple #800080 · hover = yellow bg

Revision as of 04:46, 21 July 2026

/* 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;
}
/* Hide the "navigation" heading in the sidebar */
#p-navigation h3,
#p-navigation .vector-menu-heading,
#p-navigation .vector-pinnable-header-label {
    display: none !important;
}
/* ============================================================
   ADDED 2: text sizes — content area and sidebar.
   ============================================================ */
#content,
.mw-body,
.mw-body-content {
    font-size: 18px !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: 18px !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: 18px !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  ===============================
   Every PAGE gets ONE of 10 color schemes (chosen from the page name by
   MediaWiki:Common.js) + ONE of 3 random background images (BaGr1/2/3.jpg).
   To turn OFF: delete from here to the end of the file, and blank Common.js.
   ============================================================================ */
/* ---- links: DEFAULT browser states + yellow hover ----
   unvisited = blue #0000FF · visited = purple #800080 · hover = yellow bg
   · active = red #FF0000.
   NOTE: to make VISITED bright magenta instead of purple, change #800080
   to #ff00ff on the ":visited" rule below.
   The sidebar selectors carry #mw-panel (an id) so they must be repeated on
   EVERY state, otherwise the plain-link rule wins and visited/hover fail. */

/* unvisited */
body[class*="crazy-scheme-"] a:link,
body[class*="crazy-scheme-"] #mw-panel a:link,
body[class*="crazy-scheme-"] .vector-legacy-sidebar a:link,
body[class*="crazy-scheme-"] .portlet a:link,
body[class*="crazy-scheme-"] .pBody a:link,
body[class*="crazy-scheme-"] .mw-parser-output a:link {
    color: #0000ff !important;
    text-decoration: underline !important;
}
/* visited */
body[class*="crazy-scheme-"] a:visited,
body[class*="crazy-scheme-"] #mw-panel a:visited,
body[class*="crazy-scheme-"] .vector-legacy-sidebar a:visited,
body[class*="crazy-scheme-"] .portlet a:visited,
body[class*="crazy-scheme-"] .pBody a:visited,
body[class*="crazy-scheme-"] .mw-parser-output a:visited {
    color: #800080 !important;
    text-decoration: underline !important;
}
/* hover — YELLOW background behind every link (order matters: after visited) */
body[class*="crazy-scheme-"] a:hover,
body[class*="crazy-scheme-"] #mw-panel a:hover,
body[class*="crazy-scheme-"] .vector-legacy-sidebar a:hover,
body[class*="crazy-scheme-"] .portlet a:hover,
body[class*="crazy-scheme-"] .pBody a:hover,
body[class*="crazy-scheme-"] .mw-parser-output a:hover {
    background: #ffff00 !important;
    -webkit-box-decoration-break: clone !important;
    box-decoration-break: clone !important;
}
/* active (while clicking) = red */
body[class*="crazy-scheme-"] a:active,
body[class*="crazy-scheme-"] #mw-panel a:active,
body[class*="crazy-scheme-"] .vector-legacy-sidebar a:active,
body[class*="crazy-scheme-"] .portlet a:active,
body[class*="crazy-scheme-"] .pBody a:active,
body[class*="crazy-scheme-"] .mw-parser-output a:active {
    color: #ff0000 !important;
}
/* ---- let the random background image 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;
}
/* ---- NO colored background behind images / galleries ---- */
body[class*="crazy-scheme-"] .gallery,
body[class*="crazy-scheme-"] .gallerybox,
body[class*="crazy-scheme-"] .thumb,
body[class*="crazy-scheme-"] .thumbinner,
body[class*="crazy-scheme-"] figure,
body[class*="crazy-scheme-"] img {
    background: transparent !important;
}
/* ---- page title: SAME SIZE as content text, 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;
    font-weight: bold !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    padding: 0.05em 0.25em !important;
    margin: 0 0 0.3em 0 !important;
}
/* ---- section headings: same size as text, color highlight behind text ---- */
body[class*="crazy-scheme-"] .mw-body-content h2,
body[class*="crazy-scheme-"] .mw-body-content h3,
body[class*="crazy-scheme-"] .mw-body-content h4 {
    display: inline-block !important;
    color: #000 !important;
    font-weight: bold !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    padding: 0.05em 0.25em !important;
    margin: 0.3em 0 0.2em 0 !important;
    border: none !important;
}
body[class*="crazy-scheme-"] .mw-body-content h2 { background: var(--h2a) !important; }
body[class*="crazy-scheme-"] .mw-body-content h3 { background: var(--h2b) !important; }
body[class*="crazy-scheme-"] .mw-body-content h4 { background: var(--h2c) !important; }
/* ---- paragraphs: colored boxes, max 800px wide, LEFT aligned ---- */
body[class*="crazy-scheme-"] .mw-parser-output > p {
    display: block !important;
    width: fit-content !important;
    max-width: 800px !important;
    margin: 0 0 12px 0 !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
    padding: 0.4em 0.7em !important;
}
body[class*="crazy-scheme-"] .mw-parser-output > p:nth-of-type(3n+1) { background: var(--box1) !important; color: var(--box1t) !important; }
body[class*="crazy-scheme-"] .mw-parser-output > p:nth-of-type(3n+2) { background: var(--box2) !important; color: var(--box2t) !important; }
body[class*="crazy-scheme-"] .mw-parser-output > p:nth-of-type(3n+3) { background: var(--box3) !important; color: var(--box3t) !important; }
/* ---- project / text lists: colored boxes, max 800px, LEFT aligned (never galleries) ---- */
body[class*="crazy-scheme-"] .mw-parser-output > ul:not(.gallery) {
    padding-left: 0 !important;
    margin-left: 0 !important;
    list-style: none !important;
}
body[class*="crazy-scheme-"] .mw-parser-output > ul:not(.gallery) > li {
    display: block !important;
    width: fit-content !important;
    max-width: 800px !important;
    margin: 0 0 8px 0 !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
    padding: 0.35em 0.7em !important;
    list-style: none !important;
}
body[class*="crazy-scheme-"] .mw-parser-output > ul:not(.gallery) > li:nth-child(3n+1) { background: var(--box1) !important; color: var(--box1t) !important; }
body[class*="crazy-scheme-"] .mw-parser-output > ul:not(.gallery) > li:nth-child(3n+2) { background: var(--box2) !important; color: var(--box2t) !important; }
body[class*="crazy-scheme-"] .mw-parser-output > ul:not(.gallery) > li:nth-child(3n+3) { background: var(--box3) !important; color: var(--box3t) !important; }
/* ---- SIDEBAR: no white box. Yellow highlight behind each line of text ---- */
body[class*="crazy-scheme-"] #mw-panel,
body[class*="crazy-scheme-"] .vector-legacy-sidebar,
body[class*="crazy-scheme-"] #column-one {
    background: transparent !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;
}
/* yellow behind sidebar links (link color stays default blue/purple) */
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 {
    display: inline !important;
    background: #fff !important;
    -webkit-box-decoration-break: clone !important;
    box-decoration-break: clone !important;
    padding: 0 0.2em !important;
    /* very tight line-height so a wrapped title (e.g. "Homes of the
       Internet") stays together with almost no gap between the lines */
    line-height: 1.15 !important;
}
/* space BETWEEN separate sidebar entries (so items don't run together) */
body[class*="crazy-scheme-"] #mw-panel li,
body[class*="crazy-scheme-"] .vector-legacy-sidebar li {
    margin-bottom: 7px !important;
}
/* white behind sidebar section headings (Pages, Texts, …) */
body[class*="crazy-scheme-"] .portlet h3,
body[class*="crazy-scheme-"] .portlet h5,
body[class*="crazy-scheme-"] #mw-panel .vector-menu-heading {
    display: inline-block !important;
    background: #fff !important;
    color: #000 !important;
    padding: 0.05em 0.2em !important;
}
/* hide the "navigation" heading — must come AFTER the heading rule above,
   otherwise that rule re-shows it with higher specificity */
body[class*="crazy-scheme-"] #p-navigation h3,
body[class*="crazy-scheme-"] #p-navigation h5,
body[class*="crazy-scheme-"] #p-navigation .vector-menu-heading,
body[class*="crazy-scheme-"] #p-navigation .vector-menu-heading-label,
body[class*="crazy-scheme-"] #p-navigation .vector-pinnable-header-label {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Safety net: hide ANY sidebar section heading with no text — this is the
   empty "-" portlet (<nav id="p-">, <h3 id="p--label">) that appears when a
   group of links has no "* heading" line. The real fix is in MediaWiki:Sidebar,
   this just guarantees it never shows. */
body[class*="crazy-scheme-"] #mw-panel .vector-menu-heading:has(> .vector-menu-heading-label:empty),
body[class*="crazy-scheme-"] #mw-panel #p--label {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* ============================================================================
   THE 10 SCHEMES — only your palette:
   full  #ffff00 #ff0000 #ff00ff #0000ff #000000
   pastel #ffdcff #cdffff #ffffdc #b8c0fc
   (blue and black boxes use white text; everything else black text)
   ============================================================================ */
body.crazy-scheme-0 {
    --accent:#ffff00; --accent-text:#000;
    --h2a:#ff00ff; --h2b:#cdffff; --h2c:#ff0000;
    --box1:#ffffff; --box1t:#000; --box2:#ffffdc; --box2t:#000; --box3:#ffff00; --box3t:#000;
}
body.crazy-scheme-1 {
    --accent:#ff00ff; --accent-text:#000;
    --h2a:#ffff00; --h2b:#b8c0fc; --h2c:#ff0000;
    --box1:#ffffff; --box1t:#000; --box2:#ffffff; --box2t:#000; --box3:#0000ff; --box3t:#fff;
}
body.crazy-scheme-2 {
    --accent:#ff0000; --accent-text:#000;
    --h2a:#ffff00; --h2b:#cdffff; --h2c:#ff00ff;
    --box1:#ffffff; --box1t:#000; --box2:#b8c0fc; --box2t:#000; --box3:#ffffff; --box3t:#000;
}
body.crazy-scheme-3 {
    --accent:#0000ff; --accent-text:#fff;
    --h2a:#ffff00; --h2b:#ff00ff; --h2c:#ff0000;
    --box1:#fff; --box1t:#000; --box2:#fff; --box2t:#000; --box3:#fff; --box3t:#000;
}
body.crazy-scheme-4 {
    --accent:#ffff00; --accent-text:#000;
    --h2a:#ff0000; --h2b:#ffdcff; --h2c:#ff00ff;
    --box1:#b8c0fc; --box1t:#000; --box2:#cdffff; --box2t:#000; --box3:#000000; --box3t:#fff;
}
body.crazy-scheme-5 {
    --accent:#ff00ff; --accent-text:#000;
    --h2a:#ffff00; --h2b:#ff0000; --h2c:#cdffff;
    --box1:#ffffdc; --box1t:#000; --box2:#ffffff; --box2t:#000; --box3:#0000ff; --box3t:#fff;
}
body.crazy-scheme-6 {
    --accent:#ff0000; --accent-text:#000;
    --h2a:#ffff00; --h2b:#ff00ff; --h2c:#b8c0fc;
    --box1:#000; --box1t:#fff; --box2:#ffffdc; --box2t:#000; --box3:#ffffff; --box3t:#000;
}
body.crazy-scheme-7 {
    --accent:#ffff00; --accent-text:#000;
    --h2a:#ff00ff; --h2b:#ff0000; --h2c:#ffffdc;
    --box1:#fff; --box1t:#000; --box2:#fff; --box2t:#000; --box3:#ffffff; --box3t:#000;
}
body.crazy-scheme-8 {
    --accent:#0000ff; --accent-text:#fff;
    --h2a:#ffff00; --h2b:#ff00ff; --h2c:#ff0000;
    --box1:#000; --box1t:#fff; --box2:#000; --box2t:#fff; --box3:#000000; --box3t:#fff;
}
body.crazy-scheme-9 {
    --accent:#ff00ff; --accent-text:#000;
    --h2a:#ffff00; --h2b:#ff0000; --h2c:#ffdcff;
    --box1:#b8c0fc; --box1t:#000; --box2:#ffffff; --box2t:#000; --box3:#ffff00; --box3t:#000;
}
/* ============================================================================
   3 RANDOM BACKGROUND IMAGES — one is chosen at random on every page load.
   ============================================================================ */
body.crazy-bg-0 {
    background-color:#000 !important;
    background-image: 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: 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: url("/index.php/Special:FilePath/BaGr3.jpg") !important;
    background-size: 400px auto !important;
    background-repeat: repeat !important;
}
/* ============================  END CRAZY VERSION  =========================== */