MediaWiki:Common.css: Unterschied zwischen den Versionen

Version vom 24. Januar 2024, 15:25 Uhr

/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */

/* 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: #4CAF50; /* Verblasstes Grün für Button-Hover */
}

/* Erweiterte Texturierung und Farbanpassungen */
:root {
    --button-texture: url('https://de.maddraxikon.com//asphalt.png'); /* Pfad zur Texturgrafik */
}

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

body, input, button, select, textarea {
    font-family: 'Special Elite', Courier, monospace; /* Schreibmaschinenschrift */
}

/* Grafische Elemente */
.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);
}

a {
    color: var(--link-color);
}

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

/* Stile für UI-Elemente */
.button {
    background-color: var(--secondary-color);
    color: var(--text-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);
    border-bottom: 2px solid var(--accent-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;
}

#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 */
}