MediaWiki:Common.css: Unterschied zwischen den Versionen

Version vom 13. April 2024, 20:21 Uhr

/* Grundlegende Farbpalette */
:root {
    --primary-color: #3E3E3E; /* Dunkleres Grau für Hintergründe */
    --secondary-color: #9E9E9E; /* Mittelgrau für Karten/Boxen */
    --accent-color: #BA6700; /* Dunklere Rostfarbe für Akzente */
    --text-color: #E0E0E0; /* Helles Grau für Text */
    --link-color: #8AB4F8; /* Verblasstes Blau für Links */
    --button-hover-color: #f5d6b0; /* Verblasstes Grün für Button-Hover */
}

/* Schriftarten und Typografie */
@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');

/* Buttons */
.button {
    border: 1px solid var(--accent-color);
    background-image: var(--button-texture), linear-gradient(var(--secondary-color), var(--primary-color));
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

/* Anwendung der Farben */
body {
    background-color: var(--primary-color);
    color: var(--text-color);
    background-image: url('https://de.maddraxikon.com//asphalt.png');
    background-repeat: repeat; /* Hintergrundtextur wiederholen */
    background-size: auto; /* Automatische Größe der Textur */
    font-family: 'Abel', sans-serif;
}

/* Stile für Links */
a {
    color: var(--secondary-color)
    transition: color 0.3s ease; /* Sanfter Farbübergang bei Hover */
}

a:hover {
    color: var(--button-hover-color)
}

.button:hover {
    background-color: var(--accent-color);
}

/* Hintergründe für Abschnittstitel */
#content,
#mw-head,
#mw-panel,
.mw-page-container,
.vector-body,
.section-title {
    background-color: var(--secondary-color);
}

/* Hauptmenü-Stil */
#mw-panel .vector-menu-content-list li {
    margin-bottom: 5px; /* Abstand zwischen den Menüpunkten */
}

#mw-panel .vector-menu-content-list li a {
    display: block;
    padding: 8px 10px; /* Innenabstand */
    background-color: #333; /* Dunkler Hintergrund für die Buttons */
    color: white; /* Helle Textfarbe */
    text-decoration: none; /* Keine Unterstreichung */
    border-radius: 4px; /* Abgerundete Ecken */
    transition: background-color 0.3s; /* Animation für Hover-Effekt */
}

#mw-panel .vector-menu-content-list li a:hover {
    background-color: #555; /* Hintergrundfarbe beim Überfahren mit der Maus */
}

/* Stil für die Hauptmenü-Überschriften */
#mw-panel .vector-menu-portal .vector-menu-heading {
    background-color: #444; /* Dunkler Hintergrund */
    color: #c0c0c0; /* Leicht helle Textfarbe */
    padding: 8px 12px; /* Erhöhter Innenabstand */
    font-family: 'Courier New', Courier, monospace; /* Monospaced-Schriftart */
    font-size: 1.1em; /* Vergrößerte Schrift */
    border-bottom: 1px solid #333; /* Untere Grenze für die Trennung */
    text-transform: uppercase; /* Großbuchstaben */
    letter-spacing: 1px; /* Buchstabenabstand */
    text-shadow: 2px 2px 2px #000; /* Textschatten für einen Kontureffekt */
}

/* Link "Umschalten zum bisherigen Aussehen" im Hauptmenü versteckt */
.mw-sidebar-action-content {
    display: none;
}

/* Hintergrundbild für das Hauptmenü */
#mw-panel {
    background-image: url('https://de.maddraxikon.com//beton.png');
    background-size: cover; /* Stellt sicher, dass das Bild den gesamten Bereich abdeckt */
    background-repeat: no-repeat; /* Verhindert das Wiederholen des Bildes */
}

/* Boxen für die Hauptseite */
.Hauptseite-Box {
    background-color: #333; /* Dunkler Hintergrund */
    color: #E0E0E0; /* Helle Textfarbe */
    border: 1px solid #BA6700; /* Rostfarbener Rahmen */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); /* Schatten für Tiefeffekt */
    padding: 20px; /* Innenabstand */
    font-family: 'Special Elite', cursive; /* Passende Schriftart */
    font-size: 1.2em; /* Vergrößerte Schrift */
    text-align: center; /* Zentrierte Ausrichtung */
}

.Hauptseite-Box h2 {
    color: #BA6700; /* Rostfarbener Titel */
    font-size: 1.5em; /* Vergrößerte Titelschrift */
    margin-bottom: 10px; /* Abstand zum Inhalt */
}

.Hauptseite-Box p {
    margin-bottom: 10px; /* Abstand zwischen Absätzen */
}

.Hauptseite-Box a {
    text-decoration: none; /* Keine Unterstreichung */
}

.Hauptseite-Box a:hover {
    color: #4CAF50; /* Verblasstes Grün beim Überfahren mit der Maus */
}

.Hauptseite-Inhalt {
    font-family: 'Abel', sans-serif;
}

/* Toolbar für Artikelbearbeitung */
.vector-menu-tabs {
  font-family: 'Bree Serif', serif;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Inaktive Tabs */
.vector-menu-tabs .vector-menu-content-list a {
  color: #fff; 
  text-shadow: 1px 1px 2px #000;
}

/* Aktiver Tab */  
.vector-menu-tabs .selected a {
  color: #fff;
  text-shadow: 1px 1px 1px #000;
}

/* Hover/Focus */  
.vector-menu-tabs .vector-menu-content-list a:hover,
.vector-menu-tabs .vector-menu-content-list a:focus {
  text-shadow: none;
  color: #ccc; 
}

/* Kategorienmodul anpassen */
.catlinks {
  margin: 10px 0;
  padding: 10px;
  background: #333;
  border: 1px solid #666;
}

/* Titel */
.catlinks .mw-normal-catlinks {
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Liste */
.catlinks ul {
  list-style: none;
  margin: 0;
  padding: 0;  
}

.catlinks li {
  display: inline-block;
  margin-right: 5px;
}

/* Links */
.catlinks a {
  color: #fff;
  text-decoration: none;
  padding: 3px 5px;
  border: 1px solid #666;
  transition: background .3s;
}

.catlinks a:hover {
  background: #555;
}

/* Anpassung der Infoboxen */
/* Infobox */
.infobox {
  float:right;
  background-color: #555;
  color: #ccc;
  border: 1px solid #333;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  font-size: 0.7em;
}

.infobox-header {
  background-color: #444;
  color: #fff;
  padding: 10px;
  font-size: 1.2em;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.infobox-data {
  padding: 10px;
}

.infobox-row {
  padding: 5px 0;  
}

.infobox-cell {
  padding: 3px 10px;
}

.infobox-below {
  border-top: 1px solid #666;
  padding: 10px;
}

.infobox-button {
  background-color: var(--primary-color);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  text-align: center;
  font-size: 1.2em;
}

.infobox-button:hover {
  background-color: var(--secondary-color);
}

/* Hauptseite-Button Anpassung */
.Hauptseite-Button a {
    display: inline-block; /* Damit die Links wie Buttons behandelt werden */
    background-color: var(--secondary-color); /* Mittelgrau für den Button-Hintergrund */
    color: var(--text-color); /* Helles Grau für den Text */
    padding: 10px 20px; /* Innenabstand */
    margin: 5px; /* Außenabstand zwischen den Buttons */
    text-decoration: none; /* Entfernt die Unterstreichung */
    font-family: 'Special Elite', cursive; /* Schriftart */
    font-size: 1.1em; /* Schriftgröße */
    border: 2px solid var(--accent-color); /* Rostfarbener Rahmen */
    border-radius: 5px; /* Abgerundete Ecken für den Button */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); /* Schatten für Tiefe */
    transition: background-color 0.3s, color 0.3s; /* Animation beim Überfahren */
}

.Hauptseite-Button a:hover {
    background-color: var(--accent-color); /* Dunklere Rostfarbe für Hover */
    color: var(--primary-color); /* Dunkleres Grau für Hover-Text */
    border-color: var(--text-color); /* Helles Grau für den Rahmen beim Hover */
}

/* Anpassung der Schriftfarbe für Seiteninhalte */
#content, .mw-body-content {
    color: #F0F0F0; /* Neue helle Schriftfarbe für den Seiteninhalt */
}

/* Links innerhalb des Seiteninhalts */
#content a, .mw-body-content a {
    color: #945200; /* Dunkles Rostrot */
}
#content a:hover, .mw-body-content a:hover {
    color: #f5d6b0; /* Anpassen der Hover-Farbe für Links */
}

/* Links zur Neuerstellung von Artikeln */
.new a {
  color: #556b2f;
}

/* Logo ersetzen */
.mw-logo {
    display: inline-block; /* oder 'block'? */
    width: 135px; /* Anpassen an die Breite des Logos */
    height: 135px; /* Anpassen an die Höhe des Logos */
    background-image: url('https://de.maddraxikon.com/images/LogoNeu.png'); /* URL des Logos */
    background-size: contain; /* oder 'cover', je nach Bedarf */
    background-repeat: no-repeat;
    background-position: center; /* Zentriert das Bild */
    font-size: 0; /* Text unsichtbar */
    overflow: hidden; /* Verhindert, dass Inhalte überlaufen */
}

/* Anpassung der Roman-Infobox */
.heftartikel-tabelle {
    width: 100%; /* Stellt sicher, dass die Tabelle die volle Breite nutzt */
    border-collapse: collapse; /* Entfernt doppelte Ränder */
    margin-bottom: 20px; /* Abstand nach unten für Außenabstand */
    background-color: var(--secondary-color); /* Hintergrundfarbe der Infobox */
    color: var(--text-color); /* Textfarbe */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Schatten für Tiefe */
    text-transform: none;
    font-size: 14px;
}

.heftartikel-tabelle th, .heftartikel-tabelle td {
    padding: 10px; /* Innenabstand */
    border: 1px solid var(--accent-color); /* Rostfarbener Rahmen */
}

.heftartikel-tabelle th {
    background-color: var(--primary-color); /* Dunkleres Grau für Überschriften */
    color: var(--text-color); /* Helle Textfarbe für Überschriften */
    text-align: left; /* Ausrichtung des Textes */
    font-family: 'Special Elite', cursive; /* Schriftart für Überschriften */
}

.heftartikel-tabelle td {
    background-color: var(--secondary-color); /* Mittelgrau für Zellen */
    color: var(--text-color); /* Textfarbe */
    vertical-align: top; /* Ausrichtung des Inhalts in der Zelle */
}

/* Anpassung für das Bild im Infobox */
.heftartikel-tabelle img {
    max-width: 100%; /* Stellt sicher, dass das Bild responsive ist */
    height: auto; /* Erhält das Seitenverhältnis des Bildes */
    border: 2px solid var(--accent-color); /* Rahmen um das Bild */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Schatten für das Bild */
}

/* Anpassung für Links innerhalb der Infobox */
.heftartikel-tabelle a {
    color: var(--link-color); /* Farbe für Links */
    text-decoration: none; /* Keine Unterstreichung */
}

.heftartikel-tabelle a:hover {
    color: var(--button-hover-color); /* Farbe beim Überfahren */
    text-decoration: underline; /* Unterstreichung beim Überfahren */
}

/* Grafiken sollen Platz besser nutzen */
.thumb {
    border: 1px solid #ccc;
    padding: 3px !important;
    background-color: #f9f9f9 !important;
    text-align: center;
    overflow: hidden;
}
.thumbcaption {
    color: #252525 !important;
}