MediaWiki:Common.css: Unterschied zwischen den Versionen

/* ======================================== 
   MOBILE SIDEBAR FIX - Navigation & Tools 
   ======================================== */

@media screen and (max-width: 850px) {
    
    /* Sidebar Container Fix */
    #mw-sidebar-checkbox:not(:checked) ~ .mw-sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        height: 100vh;
        width: 80%;
        max-width: 320px;
        overflow-y: auto;
        background: #161616;
        z-index: 1000;
        transition: left 0.3s ease;
    }
    
    #mw-sidebar-checkbox:checked ~ .mw-sidebar {
        left: 0;
    }
    
    /* Sidebar Chunks korrekt positionieren */
    #mw-site-navigation,
    #mw-related-navigation {
        position: static !important;
        width: 100% !important;
        padding: 0 !important;
    }
    
    #mw-site-navigation .sidebar-chunk,
    #mw-related-navigation .sidebar-chunk {
        position: static !important;
        margin: 0.5em !important;
        padding: 1em !important;
    }
    
    /* Tools Bereich fix */
    #site-tools,
    #user-tools {
        position: static !important;
        width: 100% !important;
    }
    
    /* Verhindere dass Sidebar-Elemente in Footer rutschen */
    .mw-sidebar {
        position: relative;
        display: block;
    }
    
    /* Hamburger Menu Button */
    #mw-sidebar-button {
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 1001;
        background-color: transparent;
        border: none;
        cursor: pointer;
    }
    
    #mw-sidebar-button:before {
        background-color: #ffffff;
        box-shadow: 0 0.35em 0 0 #ffffff, 0 0.7em 0 0 #ffffff;
    }
    
    /* Overlay wenn Sidebar offen */
    #mw-sidebar-checkbox:checked ~ .mw-sidebar:before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: -1;
    }
    
    /* Collapsible Sections in Mobile */
    .sidebar-collapsible {
        position: relative;
        cursor: pointer;
        user-select: none;
        padding-left: 25px;
    }
    
    .sidebar-collapsible:before {
        content: '▼';
        position: absolute;
        left: 5px;
        top: 0;
        transition: transform 0.2s;
    }
    
    .sidebar-collapsible.closed:before {
        transform: rotate(-90deg);
    }
    
    /* Toggle Icons */
    .toggle-icon {
        display: inline-block;
        margin-left: 8px;
        transition: transform 0.2s;
        vertical-align: middle;
    }
    
    .closed .toggle-icon {
        transform: rotate(-90deg);
    }
}

/* ======================================== 
   ZUSÄTZLICHER FIX FÜR NAVIGATION LAYOUT
   ======================================== */

/* Verhindere absolute/fixed Positionierung auf Mobile */
@media screen and (max-width: 850px) {
    
    .sidebar-inner,
    .mw-portlet,
    .mw-portlet-body {
        position: static !important;
    }
    
    /* Stelle sicher dass Content nicht hinter Sidebar verschwindet */
    #mw-content-container {
        position: relative;
        z-index: 1;
    }
    
    /* Footer bleibt unten */
    .mw-footer-container {
        position: relative;
        z-index: 1;
        margin-top: auto;
    }
}

/*-----------------------------------------  Card Design START  --------------------------------------*/

/* ===============================
   Dark / Elegant Card Style
   =============================== */
.wiki-card {
  background-color: #1f1f1f; /* dunkles Grau-Schwarz */
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* tiefer Schatten */
  padding: 1.2em 1em;
  margin: 1em 0;
  border: 1px solid #333; /* dezente Umrandung */
  font-family: "Inter", "Segoe UI", sans-serif;
  color: #eee; /* heller Text */
}

/* Titel */
.wiki-card h3 {
  margin-top: 0;
  font-size: 1.25em;
  font-weight: 600;
  color: #ffd966; /* dezenter goldener Akzent für Titel */
}

/* Beschreibung */
.wiki-card p {
  margin: 0.5em 0 1em 0;
  color: #ccc;
  font-size: 0.95em;
}

/* Content (Liste etc.) */
.wiki-card div {
  color: #ddd;
  font-size: 0.9em;
}

/* Optional: Links in Card */
.wiki-card a {
  color: #ffd966;
  text-decoration: none;
  transition: color 0.2s;
}

.wiki-card a:hover {
  color: #ffcc00;
  text-decoration: underline;
}

/*-----------------------------------------  Container ENDE  --------------------------------------*/

/*-----------------------------------------  Item Weapon Template START  --------------------------------------*/

.wikitable tr th, .mw_metadata tr th, .mw-datatable tr th, .dataTable tr th, .cargoTable tr th, .statstable tr th {
  background: #000000;
  border: none;
  border-width: 0 0 1px;
  white-space: nowrap;
}

/* Upgrade table styling (shadcn-dark) */
.wikitable.upgrade {
  width: 100%;
  border-collapse: collapse;
  background-color: #0a0a0a;
  color: #eee;
}

.wikitable.upgrade th {
  background-color: #000 !important;   /* zwingend schwarz */
  color: #ffd966 !important;           /* goldener Text */
  font-weight: bold;
  padding: 6px 8px;
  border: 1px solid #222 !important;
}

.wikitable.upgrade td {
  background-color: #1a1a1a !important;
  color: #eee;
  padding: 6px 8px;
  text-align: center;
  border: 1px solid #333 !important;
}

.wikitable.upgrade tr:hover td {
  background-color: #2a2a2a !important;
}

.wikitable img,
.wikitable.upgrade img,
img[src*="Icon.png"],
img[src*=".png"],
.thumbimage {
  image-rendering: pixelated !important;
  image-rendering: -moz-crisp-edges !important;
  image-rendering: crisp-edges !important;
  -ms-interpolation-mode: nearest-neighbor !important;
}

/*-----------------------------------------  Item Weapon Template ENDE  --------------------------------------*/
/*----------------------------------------- Grid Container START  --------------------------------------*/
.gridbox pre {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 auto 0.5em auto !important;
  overflow: visible; /* kein Scroll */
}

.grid-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2em;
  justify-content: center;
  margin: 1em 0;
}

/* Einzelne Box */
.gridbox {
  width: 220px;
  background-color: #1e1e1e; /* Box-Hintergrund */
  border: 1px solid #444;     /* Box-Rand */
  border-radius: 10px;
  padding: 1em;
  text-align: center;
  color: #eee;
}

/* Alle MediaWiki-Thumbnails innerhalb von GridBox „clean“ */
.gridbox .thumb {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  width: auto !important; /* damit die Box nicht den Hintergrund zieht */
}

.gridbox .thumbinner {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Bilder in GridBox scharf für Pixel-Art */
.gridbox img {
  width: 120px;             /* gewünschte Box-Größe */
  height: 120px;
  image-rendering: pixelated; /* Pixel-Art wird scharf skaliert */
  image-rendering: crisp-edges; /* alternative für manche Browser */
  display: block;
  margin: 0 auto 0.5em auto; /* zentrieren */
  border: none;
  background: none;
  box-shadow: none;
}

/* 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;
}

/*----------------------------------------- Grid Container END  --------------------------------------*/



/*----------------------------------------- MediaWiki Base Change  --------------------------------------*/
/* Aggressiveres Override für alle Container */
.mw-parser-output,
.mw-body,
.mw-body-content,
#bodyContent {
  background-color: #0a0a0a !important;
}

/* Entferne alle weißen Hintergründe */
.mainpage-container * {
  background-color: transparent;
}

/* Entferne alle Borders von Container-Elementen */
.mainpage-container,
.mainpage-content,
.mainpage-sidebar,
.content-section {
  border: none !important;
}

.sidebar-panel,
.landing-container,
.npc-grid-container {
  background-color: #0a0a0a;
  border: none !important; /* Keine Borders mehr */
  padding: 1em;
}



/*-------------------------------- NPC Grid Template --------------------------------*/
/* ==========================================
   TEIL 1: CSS - MediaWiki:Common.css
   ========================================== */

.npc-grid-container {
  max-width: 1200px;
  margin: 0 auto;
  background-color: #0a0a0a;
  padding: 1em;
  border: none;
}

.npc-category {
  font-size: 1.3em;
  font-weight: bold;
  margin: 1.5em 0 1em 0;
  color: #ffd966;
  background-color: #000000;
  border: 1px solid #222;
  padding: 0.5em;
  text-align: center;
}

.npc-category:first-child {
  margin-top: 0;
}

.npc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 1em;
  margin-bottom: 1em;
}

.npc-box {
  display: block;
  text-align: center;
}

.npc-image {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.4em auto;
  overflow: hidden;
}

.npc-image img {
  max-width: 100%;
  max-height: 100%;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  border: none !important;
}

.npc-image .mw-file-description {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.npc-image:hover {
  opacity: 0.7;
}

.npc-name {
  font-size: 0.85em;
  text-align: center;
  line-height: 1.3;
  color: #eee;
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.npc-name a {
  color: #eee;
  text-decoration: none;
}

.npc-name a:hover {
  color: #ffd966;
}

/*-------------------------------- NPC Grid Template --------------------------------*/


/*-------------------------------- LandingFeatures --------------------------------*/
/* Container */
.landing-container {
  max-width: 1200px;
  margin: 0 auto;
  background-color: #0a0a0a;
  border: 1px solid #222;
  padding: 1em;
  font-family: sans-serif;
}

/* Tabs */
.landing-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-bottom: 1em;
}

.tab-button {
  padding: 0.5em 1em;
  background-color: #000;
  color: #eee;
  border: 1px solid #222;
  cursor: pointer;
  font-weight: bold;
  transition: 0.2s;
}

.tab-button:hover {
  background-color: #111;
}

.tab-button.active {
  background-color: #222;
  color: #ffd966;
}

/* Grid */
.landing-grid-container {
  display: block;
}

.landing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1em;
  display: none;
}

.landing-grid.active {
  display: grid;
}

/* Boxes */
.landing-box {
  text-align: center;
  background-color: #111;
  border: 1px solid #222;
  padding: 0.5em;
  border-radius: 8px;
  transition: 0.2s;
}

.landing-box:hover {
  background-color: #1a1a1a;
}

.landing-image {
  width: 64px;
  height: 64px;
  margin: 0 auto 0.5em auto;
  background-color: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.landing-image img {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  border: none !important;
}

.landing-name {
  font-size: 0.85em;
  color: #eee;
}

.landing-name a {
  color: #eee;
  text-decoration: none;
}

.landing-name a:hover {
  color: #ffd966;
}







/*-------------------------------- Info Panel Rechts --------------------------------*/



/* Main Page Layout */
.mainpage-container {
  display: flex;
  gap: 0px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0px;
}

.mainpage-content {
  flex: 2;
  min-width: 0;
}

.content-section {
  margin-bottom: 0px;
}

.content-section:last-child {
  margin-bottom: 0;
}

.mainpage-sidebar {
  flex: 1;
  min-width: 280px;
  max-width: 350px;
}

.sidebar-panel {
  background-color: #0a0a0a;
  border: 1px solid #222;
  padding: 1em;
}

.sidebar-title {
  font-size: 1.5em;
  font-weight: bold;
  color: #ffd966;
  text-align: center;
  margin-bottom: 1em;
  padding-bottom: 0.5em;
  border-bottom: 2px solid #222;
}

.sidebar-section {
  margin-bottom: 1em;
}

.sidebar-image {
  text-align: center;
  margin: 1em 0;
  line-height: 0; /* Entfernt Leerraum zwischen inline Elementen */
}

.sidebar-image pre {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  line-height: 0;
}

.sidebar-image img {
  width: 100% !important;
  height: auto;
  display: block;
  border: none !important;
  image-rendering: pixelated; /* Sharp pixelated rendering */
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.sidebar-image span,
.sidebar-image .mw-file-description {
  display: block;
  line-height: 0;
}

.sidebar-label {
  font-size: 1.1em;
  font-weight: bold;
  color: #ffd966;
  background-color: #111;
  padding: 0.5em;
  border: 1px solid #222;
  text-align: center;
  margin-bottom: 0.5em;
}

.sidebar-item {
  display: flex;
  flex-direction: column;
  padding: 0.5em;
  background-color: #111;
  border: 1px solid #222;
  margin-bottom: 0.5em;
}

.sidebar-item pre {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  font-family: inherit !important;
  line-height: inherit !important;
}

.item-label {
  font-size: 0.85em;
  color: #999;
  margin-bottom: 0.2em;
  display: block;
}

.item-value {
  color: #eee;
  font-size: 0.95em;
  display: block;
}

.item-value a {
  color: #eee;
  text-decoration: none;
}

.item-value a:hover {
  color: #ffd966;
}

.release-dates {
  background-color: #111;
  border: 1px solid #222;
  padding: 0.5em;
  font-size: 0.9em;
  color: #eee;
  line-height: 1.6;
}

.release-dates div {
  padding: 0.2em 0;
}

@media (max-width: 968px) {
  .mainpage-container {
    flex-direction: column;
  }
  
  .mainpage-sidebar {
    max-width: 100%;
    margin-top: 1em;
  }
}