MediaWiki:Common.css: Unterschied zwischen den Versionen

Version vom 13. Februar 2026, 17:53 Uhr

/* ========================================
   Pixo-Kacheln (Spiel-Grid)
   ======================================== */
/* Grid-Container für Start-Kacheln */
.pixo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
}

/* BASIS-KARTE */
.pixo-card {
  display: block;
  width: 100%;
  margin: 0;
  border-radius: 25px; 
/* border: 2px solid #333; */
  background: transparent;
  box-shadow: 0 5px 16px rgba(0,0,0,0.5);
  overflow: hidden;
  font-family: inherit;
}

/* Normale Karte mit Hero-Bild */
.pixo-card-hero {
  position: relative;
  width: 100%;
  height: 140px;
  background: transparent;
  overflow: hidden;
}

/* Bild im Hero-Bereich */
.pixo-card-hero img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 20px;
  background: transparent;
  display: block;
}

/* Karten OHNE Hero-Bild */
.pixo-card--nohero .pixo-card-hero {
  height: auto;                  /* keine feste Höhe */
  padding: 0;
  margin: 0;
  border-radius: 20px;
  background: transparent;
  border: 0;
}

/* Falls irgendwo Standard-Rand auf Bildern sitzt, hier nochmal hart entfernen */
.pixo-card-hero a,
.pixo-card-hero img {
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* Schwarzer Balken unter dem Hero-Bild */
.pixo-card-title-bar {
  display: block;
  width: 100%;
  height: 32px;          /* 10px Balken + etwas Platz für Text */
  background: #000;
  opacity: 0.7;
  padding: 4px 10px;     /* Innenabstand links/rechts/oben/unten */
  box-sizing: border-box;
}

/* Titel rechtsbündig auf der Title-Bar */
.pixo-card-title-text {
  position: static;      /* NICHT absolut */
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  color: #ca8600;
  text-shadow: 0 0 4px rgba(0,0,0,0.9);
  white-space: nowrap;
  text-align: right;     /* rechtsbündig */
}

.pixo-card-hero-inner {
  display: inline-block;
}