MediaWiki:Timeless.css

Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.

• Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
• Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
• Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken

/* ==============================================
   MEDIAWIKI TIMELESS - BACKGROUND VISIBILITY CSS
   ============================================== */

/* Page Background - bereits definiert */
body {
  --page-background: var(--base-0) url('images/resources/Background.png') no-repeat center center / cover fixed;
  background: var(--page-background);
}

/* ==============================================
   LAYOUT SPACING - Background durchscheinen lassen
   ============================================== */

/* Container mit Abstand vom Rand */
#mw-wrapper {
  max-width: 1400px;
  margin: 20px auto;
  padding: 0 20px;
}

/* Sidebar - eigener Hintergrund mit Abstand */
#mw-site-navigation {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  padding: 20px;
  margin-right: 20px; /* Abstand zum Content */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Content Area - eigener Hintergrund */
#mw-content-wrapper {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Content Container */
#mw-content {
  background: transparent; /* Transparent damit Parent-BG sichtbar */
}

/* ==============================================
   SIDEBAR STYLING
   ============================================== */

.sidebar-chunk {
  background: transparent;
  margin-bottom: 20px;
}

.sidebar-chunk h2 {
  background: rgba(0, 0, 0, 0.05);
  padding: 10px 15px;
  margin: -20px -20px 15px -20px;
  border-radius: 8px 8px 0 0;
}

/* Navigation Items */
.mw-portlet {
  margin-bottom: 15px;
}

.mw-portlet-body ul {
  list-style: none;
  padding: 0;
}

.mw-portlet-body li {
  padding: 5px 0;
}

/* ==============================================
   HEADER BEREICH
   ============================================== */

#mw-page-header-links {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  padding: 15px 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Site Notice */
#siteNotice {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  padding: 15px 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ==============================================
   RESPONSIVE ANPASSUNGEN
   ============================================== */

@media (max-width: 1000px) {
  #mw-site-navigation {
    margin-right: 0;
    margin-bottom: 20px;
  }
  
  #mw-wrapper {
    padding: 0 10px;
    margin: 10px auto;
  }
}

/* ==============================================
   ALTERNATIVE: Mehr Abstand / Transparenz
   ============================================== */

/* Für mehr sichtbares Background - ersetze die Opacity-Werte:
   
   rgba(255, 255, 255, 0.85) statt 0.95 = transparenter
   margin-right: 30px statt 20px = mehr Abstand
*/

/* Dark Mode Variante (optional) */
@media (prefers-color-scheme: dark) {
  #mw-site-navigation,
  #mw-content-wrapper,
  #mw-page-header-links,
  #siteNotice {
    background: rgba(30, 30, 30, 0.9);
    color: #e0e0e0;
  }
  
  .sidebar-chunk h2 {
    background: rgba(255, 255, 255, 0.1);
  }
}