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-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: 150px;
  background: transparent;
  overflow: hidden;
}

/* Bild im Hero-Bereich */
.pixo-card-hero img {
  width: 100%;
  height: 180px;
  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;         
  background: #000;
  opacity: 0.85;
  padding: 6px 12px;
  box-sizing: border-box;
}

/* Titel rechtsbündig auf der Title-Bar */
.pixo-card-title-text {
  position: static;      
  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;
  margin: 0px 0px 2px 0px;
  text-align: right;     
}

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