MediaWiki:Citizen.css: Unterschied zwischen den Versionen

/* Das folgende CSS wird für Benutzer des Citizen-Skins geladen */
/* ========================================
   CITIZEN CUSTOM STYLES
   MediaWiki:Citizen.css
   ======================================== */

/* ========================================
   FULL WIDTH LAYOUT
   ======================================== */
:root {
    --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);
}

/* Haupt-Content Wrapper */
.citizen-body-container,
.citizen-content,
.citizen-page-container {
    background: transparent !important;
}

/* Die eigentliche Content-Card */
.citizen-card {
    background: rgba(0, 0, 0, 0.7) !important; /* oder transparent */
    backdrop-filter: blur(4px);
    border: 1px solid #434360;
}

/* Falls Artikelinhalt extra Hintergrund hat */
.mw-parser-output {
    background: transparent !important;
}

/* ========================================
   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);
    }
}