MediaWiki:Citizen.css: Unterschied zwischen den Versionen

/* ========================================
   CITIZEN – GLASS HEADER + BACKGROUND ONLY
   ======================================== */
:root {
    /* Glas-Grundlagen */
    --opacity-glass: 0.6;
    --backdrop-filter-frosted-glass: blur(12px) saturate(120%);

    /* Surface-Farben transparent machen */
    --color-surface-0: rgba(0, 0, 0, 0.6);
}
/* ===== Page Background ===== */
body {
    background-color: #000;
    background-image: url(https://lostdreamsoftomorrow.wiki/images/resources/Background.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
}

/* Mobile Fix */
@media (max-width: 999px) {
    body {
        background-attachment: scroll;
    }
}

/* ===== Glass Header (Citizen) ===== */
.mw-header,
.citizen-header {
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(120, 120, 160, 0.35);
}

/* Falls Citizen ein Overlay benutzt */
.mw-header::before,
.citizen-header::before {
    background: none !important;
}


/* ========================================
   CITIZEN – GLASS CONTENT AREA
   ======================================== */

/* Haupt-Content-Container */
.citizen-body-container {
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    border: 1px solid rgba(120, 120, 160, 0.35);
}

/* Falls Citizen ein Overlay nutzt */
.citizen-body-container::before {
    background: none !important;
}

/* Optional: etwas Abstand zum Rand */
.citizen-body {
    padding: 1.5rem;
}

.citizen-card--content,
.citizen-card {
    background: transparent !important;
    box-shadow: none;
}

.mw-parser-output, .mw-body, .mw-body-content, #bodyContent {
  background-color: transparent !important;
}

/* ========================================
   CITIZEN – STICKY MOBILE HEADER FIX
   ======================================== */

@media (max-width: 1119.98px) {

    /* Header fest oben verankern */
    .citizen-header {
        position: fixed !important;
        top: 0 !important;
        bottom: auto !important;
        transform: none !important;
    }

    /* Autohide-Feature neutralisieren */
    .citizen-feature-autohide-navigation-clientpref-1 .citizen-header {
        transform: none !important;
    }

    /* Content korrekt nach unten schieben */
    body {
        padding-top: var(--header-size);
        padding-bottom: 0;
    }
}

/* ========================================
   CITIZEN – MOBILE MENU DROPDOWN DIRECTION
   ======================================== */
@media (max-width: 1119.98px) {

  /* Header fix oben */
  .citizen-header {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    z-index: 200;
    transform: none !important;
  }

  /* Drawer Menü-Container unter Header */
  .citizen-menu__card-content {
    position: absolute !important;
    top: 100% !important; /* direkt unter Header */
    bottom: auto !important;
    left: 0;
    right: 0;
    width: 100% !important;
    max-height: calc(100vh - var(--header-size)) !important;
    overflow-y: auto;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    z-index: 201;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(120,120,160,0.35);
  }

  /* Animations sauber halten */
  .citizen-dropdown-details[open] + .citizen-menu__card .citizen-menu__card-content {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--transition-duration-medium) var(--transition-timing-function-ease-out),
                transform var(--transition-duration-medium) var(--transition-timing-function-ease-out);
  }

  .citizen-dropdown .citizen-menu__card .citizen-menu__card-content {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity var(--transition-duration-base) var(--transition-timing-function-ease-in),
                transform var(--transition-duration-base) var(--transition-timing-function-ease-in);
  }

  /* Content-Padding anpassen, damit Header nicht drüber liegt */
  body {
    padding-top: var(--header-size);
  }

}