|
|
| Zeile 1: |
Zeile 1: |
| /* Das folgende CSS wird für Benutzer des Citizen-Skins geladen */
| |
| /* ========================================
| |
| CITIZEN CUSTOM STYLES
| |
| MediaWiki:Citizen.css
| |
| ======================================== */
| |
|
| |
|
| /* ========================================
| |
| FULL WIDTH LAYOUT
| |
| ======================================== */
| |
|
| |
| :root {
| |
| --background-color-base: transparent !important;
| |
| --background-color-page: transparent !important;
| |
| --background-color-content: transparent !important;
| |
| --background-color-card: transparent !important;
| |
| --width-layout: 100%; /* Full width - ändere zu 1280px für Wide oder 960px für Standard */
| |
| }
| |
| /* ========================================
| |
| BACKGROUND IMAGE
| |
| ======================================== */
| |
|
| |
| /* Hintergrund für gesamte Seite */
| |
| body {
| |
| background-color: #000000;
| |
| background-image: url(https://lostdreamsoftomorrow.wiki/images/resources/Background.png);
| |
| background-repeat: no-repeat;
| |
| background-position: center top;
| |
| background-attachment: fixed;
| |
| background-size: cover;
| |
| }
| |
|
| |
| /* Content Bereich transparent machen */
| |
| .mw-page-container,
| |
| .mw-body,
| |
| #content {
| |
| background: transparent;
| |
| }
| |
|
| |
| /* Optional: Leichter dunkler Overlay für bessere Lesbarkeit */
| |
| .mw-body {
| |
| background: rgba(0, 0, 0, 0.7);
| |
| backdrop-filter: blur(2px);
| |
| }
| |
|
| |
| /* ========================================
| |
| SIDEBAR BREITER & EXPANDABLE
| |
| ======================================== */
| |
|
| |
| /* Sidebar breiter machen */
| |
| @media (min-width: 1000px) {
| |
| .citizen-page-container {
| |
| grid-template-columns: 280px 1fr; /* Standard: 240px - jetzt 280px */
| |
| }
| |
|
| |
| #mw-navigation {
| |
| width: 280px;
| |
| }
| |
| }
| |
|
| |
| /* Extra breit für große Bildschirme */
| |
| @media (min-width: 1600px) {
| |
| .citizen-page-container {
| |
| grid-template-columns: 320px 1fr;
| |
| }
| |
|
| |
| #mw-navigation {
| |
| width: 320px;
| |
| }
| |
| }
| |
|
| |
| /* Sidebar Styling verbessern */
| |
| .mw-portlet {
| |
| background: rgba(0, 0, 0, 0.8);
| |
| border: 1px solid #434360;
| |
| border-radius: 4px;
| |
| padding: 1em;
| |
| margin-bottom: 1em;
| |
| backdrop-filter: blur(5px);
| |
| }
| |
|
| |
| .mw-portlet h3 {
| |
| color: #ffffff;
| |
| font-size: 1.1em;
| |
| border-bottom: 1px solid rgba(255, 255, 255, 0.3);
| |
| padding-bottom: 0.5em;
| |
| margin-bottom: 0.5em;
| |
| }
| |
|
| |
| /* Sidebar Links */
| |
| .mw-portlet .mw-list-item a {
| |
| color: #ffffff;
| |
| padding: 0.3em 0;
| |
| display: block;
| |
| transition: all 0.2s;
| |
| }
| |
|
| |
| .mw-portlet .mw-list-item a:hover {
| |
| color: #0075ae;
| |
| padding-left: 0.5em;
| |
| }
| |
|
| |
| /* ========================================
| |
| COLLAPSIBLE SIDEBAR SECTIONS
| |
| ======================================== */
| |
|
| |
| /* Alle Portlets collapsible machen */
| |
| .mw-portlet h3 {
| |
| cursor: pointer;
| |
| position: relative;
| |
| padding-left: 20px;
| |
| user-select: none;
| |
| }
| |
|
| |
| /* Pfeil-Icon vor Überschrift */
| |
| .mw-portlet h3:before {
| |
| content: '▼';
| |
| position: absolute;
| |
| left: 0;
| |
| transition: transform 0.2s;
| |
| font-size: 0.8em;
| |
| }
| |
|
| |
| /* Collapsed state */
| |
| .mw-portlet.collapsed h3:before {
| |
| transform: rotate(-90deg);
| |
| }
| |
|
| |
| .mw-portlet.collapsed .mw-portlet-body {
| |
| display: none;
| |
| }
| |
|
| |
| /* Hover-Effekt */
| |
| .mw-portlet h3:hover {
| |
| background: rgba(255, 255, 255, 0.1);
| |
| border-radius: 4px;
| |
| }
| |
|
| |
| /* ========================================
| |
| DARK MODE OPTIMIERUNGEN
| |
| ======================================== */
| |
|
| |
| /* Text immer weiß/lesbar */
| |
| .citizen-body {
| |
| color: #ffffff;
| |
| }
| |
|
| |
| /* Links weiß mit blauem Hover */
| |
| a {
| |
| color: #ffffff;
| |
| }
| |
|
| |
| a:hover {
| |
| color: #0075ae;
| |
| }
| |
|
| |
| /* Header/Footer dunkler */
| |
| .citizen-header,
| |
| .citizen-footer {
| |
| background: rgba(0, 0, 0, 0.9);
| |
| border-color: #434360;
| |
| }
| |
|
| |
| /* Table of Contents (ToC) */
| |
| .citizen-toc {
| |
| background: rgba(0, 0, 0, 0.85);
| |
| border: 1px solid #434360;
| |
| backdrop-filter: blur(5px);
| |
| }
| |
|
| |
| /* Search */
| |
| .citizen-search-box {
| |
| background: rgba(0, 0, 0, 0.7);
| |
| border-color: #434360;
| |
| }
| |
|
| |
| .citizen-search-box input {
| |
| background: rgba(0, 0, 0, 0.5);
| |
| color: #ffffff;
| |
| }
| |
|
| |
| /* ========================================
| |
| MOBILE OPTIMIERUNGEN
| |
| ======================================== */
| |
|
| |
| @media (max-width: 999px) {
| |
| /* Mobile Sidebar volle Breite wenn geöffnet */
| |
| #mw-navigation {
| |
| background: rgba(0, 0, 0, 0.95);
| |
| }
| |
|
| |
| /* Background auch auf Mobile */
| |
| body {
| |
| background-attachment: scroll; /* Fixed kann auf Mobile Probleme machen */
| |
| }
| |
|
| |
| .mw-body {
| |
| background: rgba(0, 0, 0, 0.85);
| |
| }
| |
| }
| |
