MediaWiki:Common.css

From Mona Mahall / Asli Serbest
Revision as of 05:24, 21 July 2026 by Cmfiy (talk | contribs)
Jump to navigation Jump to search

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;
}
/* 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; }
/* force a line break after each heading so the inline paragraphs below
   start on their own line instead of flowing next to the heading */
body[class*="crazy-scheme-"] .mw-body-content h2::after,
body[class*="crazy-scheme-"] .mw-body-content h3::after,
body[class*="crazy-scheme-"] .mw-body-content h4::after {
    content: "" !important;
    display: block !important;
    height: 0 !important;
    background: transparent !important;
}
/* ---- paragraphs: colored boxes, max 800px wide, LEFT aligned ---- */
/* white highlight hugging each line of text, exactly like the sidebar
   (inline + box-decoration-break, NOT a block box) */
body[class*="crazy-scheme-"] .mw-parser-output > p {
    display: inline !important;
    background: #fff !important;
    color: #000 !important;
    -webkit-box-decoration-break: clone !important;
    box-decoration-break: clone !important;
    font-size: 18px !important;
    /* no vertical padding + tight line-height so the white lines touch
       with no gaps (one continuous white shape, ragged at the line ends) */
    line-height: 1.15 !important;
    padding: 0 0.3em !important;
}
/* block break + gap after each paragraph so inline paragraphs don't merge */
body[class*="crazy-scheme-"] .mw-parser-output > p::after {
    content: "" !important;
    display: block !important;
    height: 12px !important;
    background: transparent !important;
}
/* keep the TEXT to a readable line length, but let galleries stay full width */
body[class*="crazy-scheme-"] #mw-content-text .mw-parser-output {
    max-width: 820px !important;
}
body[class*="crazy-scheme-"] .mw-parser-output > ul.gallery,
body[class*="crazy-scheme-"] .mw-parser-output > .gallery {
    max-width: none !important;
    width: calc(100vw - 320px) !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.1em 0.3em !important;
    list-style: none !important;
}
/* white background behind list text, like the sidebar (no colored boxes) */
body[class*="crazy-scheme-"] .mw-parser-output > ul:not(.gallery) > li { background: #fff !important; color: #000 !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  =========================== */