MediaWiki:Common.css: Unterschied zwischen den Versionen
(Endlich das bsch. fehlende Komma gefunde :-/) |
(Optimierung damit sich alle besser zurecht finden im CSS) |
||
Zeile 1: | Zeile 1: | ||
/* Grundlegende Farbpalette */ | /* Grundlegende Farbpalette */ | ||
:root { | :root { | ||
Zeile 9: | Zeile 7: | ||
--link-color: #8AB4F8; /* Verblasstes Blau für Links */ | --link-color: #8AB4F8; /* Verblasstes Blau für Links */ | ||
--button-hover-color: #4CAF50; /* Verblasstes Grün für Button-Hover */ | --button-hover-color: #4CAF50; /* Verblasstes Grün für Button-Hover */ | ||
} | } | ||
/* Schriftarten und Typografie */ | /* Schriftarten und Typografie */ | ||
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap'); | @import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap'); | ||
/* Buttons */ | /* Buttons */ | ||
Zeile 36: | Zeile 25: | ||
} | } | ||
/* Stile für Links */ | |||
a { | a { | ||
color: var(--link-color); | color: var(--link-color); | ||
Zeile 63: | Zeile 53: | ||
background-color: var(--secondary-color); | background-color: var(--secondary-color); | ||
} | } | ||
/* Hauptmenü-Stil */ | /* Hauptmenü-Stil */ | ||
Zeile 102: | Zeile 91: | ||
} | } | ||
/* Hintergrundbild für das Hauptmenü */ | |||
#mw-panel { | #mw-panel { | ||
background-image: url('https://de.maddraxikon.com//beton.png'); | background-image: url('https://de.maddraxikon.com//beton.png'); |
Version vom 24. Januar 2024, 16:01 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: #4CAF50; /* Verblasstes Grün für Button-Hover */ } /* Schriftarten und Typografie */ @import url('https://fonts.googleapis.com/css2?family=Special+Elite&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); } /* Stile für Links */ 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); } /* 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 */ }