|
|
Zeile 1: |
Zeile 1: |
| /* 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 */
| |
|
| |
| /* Zentrieren der Buttons */
| |
| .Hauptseite-Button {
| |
| text-align: center; /* Zentriert den Inhalt */
| |
| }
| |
|
| |
| .button-container {
| |
| display: flex;
| |
| justify-content: center;
| |
| flex-wrap: wrap;
| |
| }
| |
|
| |
| .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;
| |
| }
| |