MediaWiki:Citizen.css: Unterschied zwischen den Versionen

/* ========================================
   CITIZEN – GLASS HEADER + BACKGROUND ONLY
   ======================================== */
:root {
    --opacity-glass: 0.6;
    --backdrop-filter-frosted-glass: blur(12px) saturate(120%);
    --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;
}

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

/*Content platz entfernen*/
@media screen {
  .page-Main_Page.action-view .citizen-body-container {
    border-radius: 0px;
    margin-top: 0px;
  }
}

@media screen and (min-width: 1120px) {
  .citizen-footer {
    margin-bottom: 0;
    margin-top: 0px;
  }
}
/*footer icon  entfernen*/
@media screen {
  #footer-icons a {
    display: flex;
    align-items: center;
    background-color: var(--background-color-base-fixed);
    display: none;
  }
}
/* ========================================
   CITIZEN – GLASS HEADER INNER + CENTERED
   ======================================== */

/* Haupt-Header-Container */
.citizen-page-header-inner {
    display: flex;
    justify-content: center; /* mittig */
    align-items: center;     /* vertikal zentriert */
    flex-wrap: wrap;
    gap: var(--space-md);
    max-width: var(--width-layout);
    margin-inline: auto;
    padding-block: var(--space-md);
    background: rgba(0, 0, 0, 0.6); /* dunkler Glas-Hintergrund */
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    border-radius: 12px;
    border: 1px solid rgba(120, 120, 160, 0.35);
}

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

/* Spezifisch für die Main Page */
@media screen and (max-width: 1119px) {
  .page-Main_Page.action-view .citizen-page-header-inner {
      justify-content: center;
      padding-top: 8px;
      padding-bottom: 8px;
      border-top: var(--border-width-base) solid rgba(0, 0, 0, 0.1);
  }
} /* <-- HIER media schließen */

/* Haupt-Header */
.citizen-page-header {
    display: flex;
    justify-content: center; /* alles horizontal mittig */
    align-items: center;     /* vertikal mittig */
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    padding: 0.5rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(120, 120, 160, 0.35);
    margin-inline: auto;
    max-width: var(--width-layout);
}

/* Inner Container (für Flex-Zentrierung) */
.citizen-page-header-inner {
    display: flex;
    justify-content: center; /* mittig */
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    width: 100%;
}

/* Buttons und Actions */
.page-actions {
    display: flex;
    justify-content: center; /* Buttons mittig */
    gap: 0.5rem;
    flex-wrap: wrap;
}

.page-actions .citizen-button,
.page-actions .citizen-menu {
    flex: none; /* nicht die Breite des Containers einnehmen */
}

/* Glas-Effekt für Dropdowns */
.page-actions .citizen-dropdown .citizen-menu__card-content {
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    border-radius: 8px;
}

/* Mobile Fallback */
@media (max-width: 1119px) {
    .citizen-page-header,
    .citizen-page-header-inner,
    .page-actions {
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
}

@media screen and (min-width: 1120px) {
  .citizen-page-header {
    transition-property: 3px;
    margin-top: 0px;
    padding-right: 0px;
    padding-left: 0px;
  }
}

@media screen {
  .page-Main_Page.action-view .citizen-body-container {
    border-radius: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    border-top-width: 0px;
  }
}