Zum Inhalt springen

MediaWiki:Common.css

Aus Pixopedia

Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.

  • Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
  • Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
  • Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
/* ========================================
   PIXO.GG WIKI - KOMPLETTES CSS
   ======================================== */

/* 1. STARTSEITE - Navigation komplett ausblenden */
body.page-Start #mw-panel,
body.page-Start #p-tb,
body.page-Start #p-cactions,
body.page-Start #mw-head-base,
body.page-Start #footer,
body.page-Start .mw-editsection,
body.page-Start .mw-indicators,
body.page-Start #mw-navigation {
  display: none !important;
}

body.page-Start #content { 
  margin: 0 !important; 
  padding: 0 !important; 
  max-width: none !important;
}

body.page-Start #mw-content-text { 
  padding: 0 !important; 
}

/* 2. HEADER-STYLING */
.wiki-header {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
  color: white;
  padding: 2em;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.wiki-header h1 {
  margin: 0.5em 0 0 0;
  font-size: 2.5em;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* 3. GAME-KACHELN-TABELLE */
.wiki-games-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 1.5em;
  margin: 2em auto;
  max-width: 1000px;
}

.wiki-games-table td {
  width: 50%;
  padding: 1.5em;
  background: linear-gradient(145deg, #f8fafc, #e2e8f0);
  border-radius: 16px;
  text-align: center;
  vertical-align: middle;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  height: 160px;
}

.wiki-games-table td:hover {
  background: linear-gradient(145deg, #e2e8f0, #cbd5e1);
  border-color: #3b82f6;
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.wiki-games-table img {
  border-radius: 12px;
  margin-bottom: 0.5em;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* 4. MOBILE OPTIMIERUNG */
@media (max-width: 768px) {
  .wiki-games-table {
    border-spacing: 1em;
  }
  
  .wiki-games-table td {
    width: 100%;
    display: block;
  }
}

/* 5. INFOBOX-STYLING */
.infobox {
  float: right;
  width: 280px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  margin: 0 0 1em 1em;
}

.infobox-title {
  background: #111827;
  color: white;
  padding: 0.75em;
  text-align: center;
  font-weight: bold;
}

/* 6. TAB-SYSTEM */
.game-tabs {
  display: flex;
  background: #f3f4f6;
  border-radius: 8px;
  padding: 0.25em;
  margin: 1em 0;
}

.tab-link {
  padding: 0.75em 1.5em;
  background: white;
  border-radius: 6px;
  text-decoration: none;
  margin: 0 0.25em;
  transition: all 0.2s;
}

.tab-link:hover {
  background: #e5e7eb;
}

/* 7. BROWSER-PFAD */
.navigation-path {
  background: #f8fafc;
  padding: 0.75em 1em;
  border-radius: 6px;
  font-size: 0.9em;
  margin: 1em 0;
}

/* 8. TABELLEN-INFOBOX */
table.infobox-table {
  width: 100%;
  border-collapse: collapse;
}

.infobox-table th {
  background: #e5e7eb;
  padding: 0.5em;
  text-align: left;
  width: 35%;
}

.infobox-table td {
  padding: 0.5em;
}

/* 9. DUNKLER MODUS */
@media (prefers-color-scheme: dark) {
  .wiki-games-table td {
    background: linear-gradient(145deg, #1e293b, #334155);
    color: white;
  }
  
  .infobox {
    background: #1e293b;
    border-color: #334155;
  }
  
  .infobox-title {
    background: #0f172a;
  }
}