MediaWiki:Common.css: Unterschied zwischen den Versionen

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

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








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