MediaWiki:Common.css: Unterschied zwischen den Versionen

/* STEP 1: Hamburger Button zurück nach oben bringen */
#mw-sidebar-button {
    position: fixed !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 9999 !important;
    background-color: transparent !important;
    border: 2px solid #ffffff !important;
    width: 40px !important;
    height: 40px !important;
    padding: 5px !important;
    cursor: pointer;
}

#mw-sidebar-button:before {
    background-color: #ffffff !important;
    box-shadow: 0 0.35em 0 0 #ffffff, 0 0.7em 0 0 #ffffff !important;
}

/* STEP 2: Gesamte Sidebar aus dem Flow nehmen */
.mw-sidebar,
#mw-panel {
    position: fixed !important;
    top: 0 !important;
    left: -100% !important;
    height: 100vh !important;
    width: 80% !important;
    max-width: 300px !important;
    background: #161616 !important;
    z-index: 9998 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transition: left 0.3s ease !important;
    padding-top: 60px !important;
}

/* Wenn Sidebar geöffnet */
#mw-sidebar-checkbox:checked ~ .mw-sidebar,
#mw-sidebar-checkbox:checked ~ #mw-panel {
    left: 0 !important;
}

/* STEP 3: Navigation & Tools Container */
#mw-site-navigation,
#mw-related-navigation {
    position: relative !important;
    width: 100% !important;
    padding: 0 !important;
    float: none !important;
    margin: 0 !important;
}

/* STEP 4: Sidebar Chunks */
#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-chunk,
#site-navigation,
#site-tools,
#user-tools {
    position: relative !important;
    float: none !important;
    width: 100% !important;
    margin: 0.5em 0.5em !important;
    padding: 1em !important;
    box-sizing: border-box !important;
}

/* STEP 5: Personal/User Tools Fix */
#personal,
#personal-extra {
    position: fixed !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 9999 !important;
}

#personal-extra:before {
    color: #ffffff !important;
    filter: brightness(0) invert(1) !important;
}

/* STEP 6: Header Container anpassen */
#mw-header-container {
    position: relative !important;
    z-index: 100 !important;
    padding-left: 50px !important;
}

/* STEP 7: Content nicht überlappen */
#mw-content-container {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 0 !important;
}

#mw-content {
    position: relative !important;
}

/* STEP 8: Overlay für offene Sidebar */
#mw-sidebar-checkbox:checked ~ .mw-overlay {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.7) !important;
    z-index: 9997 !important;
}

/* Falls Overlay nicht existiert, erstelle Pseudo-Element */
body:after {
    content: '';
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9997;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

#mw-sidebar-checkbox:checked ~ body:after {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* STEP 9: Footer bleibt unten */
.mw-footer-container {
    position: relative !important;
    z-index: 1 !important;
    clear: both !important;
}

/* STEP 10: Sidebar Portlets richtig darstellen */
.mw-portlet,
.mw-portlet-body {
    position: relative !important;
    float: none !important;
}

.mw-portlet h3 {
    cursor: pointer;
    user-select: none;
}

/* STEP 11: Toggle Icons */
.toggle-icon {
    display: inline-block !important;
    margin-left: 8px !important;
    transition: transform 0.2s !important;
    vertical-align: middle !important;
}

h3.closed .toggle-icon,
.closed .toggle-icon {
    transform: rotate(-90deg) !important;
}

/* STEP 12: Verstecke Default-Elemente die Probleme machen */
#mw-sidebar-checkbox {
    display: none !important;
}

/* STEP 13: Logo Anpassung */
#p-banner {
    padding-left: 50px !important;
}

#p-banner img {
    width: 120px !important;
    height: auto !important;
}

/* STEP 14: Search anpassen */
#searchform {
    padding-left: 0 !important;
}

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


@media (max-width: 968px) {
  .mainpage-container {
    flex-direction: column-reverse; /* Sidebar kommt oben */
  }

  .mainpage-sidebar {
    max-width: 100%;
    margin-top: 0; /* Abstand oben nicht nötig */
  }
}

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