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
447 Bearbeitungen
Keine Bearbeitungszusammenfassung
Markierung: Zurückgesetzt
Keine Bearbeitungszusammenfassung
Markierung: Zurückgesetzt
Zeile 1: Zeile 1:
/* ===================================================== TIMLESS – GLOBAL PAGE BACKGROUND ===================================================== */
/* ==============================================
.skin-timeless {
  MEDIAWIKI TIMELESS - BACKGROUND VISIBILITY CSS
    --page-background: url("/images/resources/Background.png") no-repeat center center / cover fixed;
  ============================================== */
}


/* ===================================================== PAGE OVERLAY (WICHTIG – sonst kein BG sichtbar) ===================================================== */
/* Page Background - bereits definiert */
.skin-timeless #mw-page-base {
body {
    background: rgba(0, 0, 0, 0.55) !important;
  --page-background: var(--base-0) url('https://idleon.wiki/images/f/fb/Wiki_Background_10.png') no-repeat center center / cover fixed;
  background: var(--page-background);
}
}


/* ===================================================== HEADER ===================================================== */
/* ==============================================
@media screen and (min-width: 851px) {
  LAYOUT SPACING - Background durchscheinen lassen
    #mw-header-container {
  ============================================== */
        position: fixed;
        top: 0;
        z-index: 200;
        width: 100%;
        min-height: 3.125em;
        background: #171717;
        padding: 0.5em 0 0;
        box-sizing: border-box;
    }
}


/* ===================================================== SIDEBAR ===================================================== */
/* Container mit Abstand vom Rand */
#mw-site-navigation,
#mw-wrapper {
#mw-related-navigation {
  max-width: 1400px;
    background: rgba(23, 23, 23, 0.95) !important;
  margin: 20px auto;
  padding: 0 20px;
}
}


@media screen and (min-width: 1100px) {
/* Sidebar - eigener Hintergrund mit Abstand */
    #mw-site-navigation .sidebar-inner,
#mw-site-navigation {
    #mw-related-navigation .sidebar-inner {
  background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(8px);
  backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(8px);
  border-radius: 8px;
    }
  padding: 20px;
  margin-right: 20px; /* Abstand zum Content */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
}


/* ===================================================== CONTENT ===================================================== */
/* Content Area - eigener Hintergrund */
#mw-content-text {
#mw-content-wrapper {
    background: rgba(12, 12, 12, 0.95) !important;
  background: rgba(255, 255, 255, 0.95);
    padding: 2rem !important;
  backdrop-filter: blur(10px);
    border-radius: 8px !important;
  border-radius: 8px;
    border: 1px solid #262626 !important;
  padding: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
}


/* ===================================================== TYPOGRAPHY & LINKS ===================================================== */
/* Content Container */
body {
#mw-content {
    color: #ededed;
  background: transparent; /* Transparent damit Parent-BG sichtbar */
}
}


a {
/* ==============================================
    color: #a1a1aa;
  SIDEBAR STYLING
}
  ============================================== */


a:hover {
.sidebar-chunk {
    color: #d4d4d8;
  background: transparent;
  margin-bottom: 20px;
}
}


h1, h2, h3, h4, h5, h6 {
.sidebar-chunk h2 {
    color: #fafafa;
  background: rgba(0, 0, 0, 0.05);
    border-color: #262626;
  padding: 10px 15px;
  margin: -20px -20px 15px -20px;
  border-radius: 8px 8px 0 0;
}
}


/* ===================================================== TABLES ===================================================== */
/* Navigation Items */
.wikitable {
.mw-portlet {
    background: #171717;
  margin-bottom: 15px;
    border: 1px solid #262626;
}
}


.wikitable th {
.mw-portlet-body ul {
    background: #262626;
  list-style: none;
    color: #a1a1aa;
  padding: 0;
}
}


.wikitable td {
.mw-portlet-body li {
    border-color: #262626;
  padding: 5px 0;
}
}


/* ===================================================== BUTTONS ===================================================== */
/* ==============================================
button,
  HEADER BEREICH
.mw-ui-button {
  ============================================== */
    background: #262626;
    color: #ededed;
    border: 1px solid #404040;
}


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


/* ===================================================== INPUTS ===================================================== */
/* Site Notice */
input,
#siteNotice {
textarea,
  background: rgba(255, 255, 255, 0.9);
select {
  backdrop-filter: blur(10px);
    background: #171717;
  border-radius: 8px;
    color: #ededed;
  padding: 15px 20px;
    border: 1px solid #262626;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
}


/* ===================================================== SEARCH INPUT ===================================================== */
/* ==============================================
#searchInput {
  RESPONSIVE ANPASSUNGEN
    border: 0;
  ============================================== */
    height: 2.1em;
    padding: 0.4em 4.5em 0.2em 2em;
    background: #000000c7;
    width: 100%;
    font-family: inherit;
}


/* ===================================================== FOOTER CLEANUP ===================================================== */
@media (max-width: 1000px) {
#footer-poweredbyico,
  #mw-site-navigation {
#footer-copyrightico {
    margin-right: 0;
     display: none;
    margin-bottom: 20px;
  }
 
  #mw-wrapper {
     padding: 0 10px;
    margin: 10px auto;
  }
}
}


/* ===================================================== GRIDBOX (HOMEPAGE) ===================================================== */
/* ==============================================
.grid-container {
  ALTERNATIVE: Mehr Abstand / Transparenz
    display: flex;
  ============================================== */
    flex-wrap: wrap;
    gap: 1.2em;
    justify-content: center;
    margin: 1em 0;
}
 
.gridbox {
    width: 220px;
    background: #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;
}
 
.gridbox:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.6);
}


.gridbox-title {
/* Für mehr sichtbares Background - ersetze die Opacity-Werte:
    font-size: 1.1em;
 
    font-weight: bold;
  rgba(255, 255, 255, 0.85) statt 0.95 = transparenter
    margin-top: 0.6em;
  margin-right: 30px statt 20px = mehr Abstand
}
*/


.gridbox-desc {
/* Dark Mode Variante (optional) */
     font-size: 0.9em;
@media (prefers-color-scheme: dark) {
     color: #bbb;
  #mw-site-navigation,
     margin-top: 0.4em;
  #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:01 Uhr

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

/* Page Background - bereits definiert */
body {
  --page-background: var(--base-0) url('https://idleon.wiki/images/f/fb/Wiki_Background_10.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);
  }
}
Abgerufen von „https://lostdreamsoftomorrow.wiki/index.php?title=MediaWiki:Timeless.css&oldid=59“