MediaWiki:Timeless.css: Unterschied zwischen den Versionen

Aus Lost Dreams Of Tomorrow Wiki
← Zum vorherigen VersionsunterschiedZum nächsten Versionsunterschied →
NeroReaver (Diskussion | Beiträge)
Bürokraten, Oberflächenadministratoren, Administratoren
403 Bearbeitungen
Keine Bearbeitungszusammenfassung
Markierung: Zurückgesetzt
Keine Bearbeitungszusammenfassung
Markierung: Manuelle Zurücksetzung
Zeile 1: Zeile 1:
/* ==============================================
/* Logo oben Links Timeless */
  MEDIAWIKI TIMELESS - BACKGROUND VISIBILITY CSS
#p-banner img {
  ============================================== */
    content: url("/images/resources/TopLeftLogo.png");
 
    width: 155px;
/* Page Background - bereits definiert */
    height: auto;
body {
    display: block;
  --page-background: var(--base-0) url('images/resources/Background.png') no-repeat center center / cover fixed;
  background: var(--page-background);
}
}
 
/* BG Timeless */
/* ==============================================
/* Seitenhintergrund (Bild) */
  LAYOUT SPACING - Background durchscheinen lassen
#mw-content-container {
  ============================================== */
    background: #eaecf0;
 
    border-bottom: solid 4px #00af89;
/* Container mit Abstand vom Rand */
    background-image: url(/images/resources/Background.png);
#mw-wrapper {
    background-repeat: no-repeat;
  max-width: 1400px;
    background-position: center 10em;
  margin: 20px auto;
  padding: 0 20px;
}
}
 
/* Content Box dunkel */
/* Sidebar - eigener Hintergrund mit Abstand */
#mw-content-text {
#mw-site-navigation {
    background: rgba(12,12,12,0.95) !important;
  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 */
/* CSS an dieser Stelle wird für Benutzer geladen, die die Benutzeroberfläche „Timeless“ verwenden */
#mw-content-wrapper {
/* Grid Container */
   background: rgba(255, 255, 255, 0.95);
.grid-container {
   backdrop-filter: blur(10px);
   display: flex;
   border-radius: 8px;
   flex-wrap: wrap;
   padding: 30px;
   gap: 1.2em;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   justify-content: center;
   margin: 1em 0;
}
}


/* Content Container */
/* Einzelne Box */
#mw-content {
.gridbox {
   background: transparent; /* Transparent damit Parent-BG sichtbar */
  width: 220px;
  background-color: #1e1e1e;
  border: 1px solid #444;
  border-radius: 10px;
  padding: 1em;
  text-align: center;
   color: #eee;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
}


/* ==============================================
/* Hover Effekt */
  SIDEBAR STYLING
.gridbox:hover {
  ============================================== */
   transform: translateY(-4px);
 
   box-shadow: 0 6px 16px rgba(0,0,0,0.6);
.sidebar-chunk {
   background: transparent;
   margin-bottom: 20px;
}
}


.sidebar-chunk h2 {
/* Titel */
   background: rgba(0, 0, 0, 0.05);
.gridbox-title {
   padding: 10px 15px;
   font-size: 1.1em;
   margin: -20px -20px 15px -20px;
   font-weight: bold;
  border-radius: 8px 8px 0 0;
   margin-top: 0.6em;
}
}


/* Navigation Items */
/* Beschreibung */
.mw-portlet {
.gridbox-desc {
   margin-bottom: 15px;
   font-size: 0.9em;
}
   color: #bbb;
 
   margin-top: 0.4em;
.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);
  }
}
}

Version vom 11. Januar 2026, 03:04 Uhr

/* Logo oben Links Timeless */
#p-banner img {
    content: url("/images/resources/TopLeftLogo.png");
    width: 155px;
    height: auto;
    display: block;
}
/* BG Timeless */
/* Seitenhintergrund (Bild) */
#mw-content-container {
    background: #eaecf0;
    border-bottom: solid 4px #00af89;
    background-image: url(/images/resources/Background.png);
    background-repeat: no-repeat;
    background-position: center 10em;
}
/* Content Box dunkel */
#mw-content-text {
    background: rgba(12,12,12,0.95) !important;
}

/* CSS an dieser Stelle wird für Benutzer geladen, die die Benutzeroberfläche „Timeless“ verwenden */
/* Grid Container */
.grid-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2em;
  justify-content: center;
  margin: 1em 0;
}

/* Einzelne Box */
.gridbox {
  width: 220px;
  background-color: #1e1e1e;
  border: 1px solid #444;
  border-radius: 10px;
  padding: 1em;
  text-align: center;
  color: #eee;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover Effekt */
.gridbox:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.6);
}

/* Titel */
.gridbox-title {
  font-size: 1.1em;
  font-weight: bold;
  margin-top: 0.6em;
}

/* Beschreibung */
.gridbox-desc {
  font-size: 0.9em;
  color: #bbb;
  margin-top: 0.4em;
}
Abgerufen von „https://lostdreamsoftomorrow.wiki/index.php?title=MediaWiki:Timeless.css&oldid=62“