MediaWiki:Common.css: Unterschied zwischen den Versionen

Aus Hydra Wiki
Zur Navigation springen Zur Suche springen
Die Seite wurde neu angelegt: „Das folgende CSS wird für alle Benutzeroberflächen geladen.: === PnP Grid Layout ===: .pnp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px; max-width: 1300px; margin: 40px auto; } === Card Styling ===: .pnp-card { text-align: center; transition: transform 0.25s ease; } .pnp-card:hover { transform: scale(1.05); } === Quadratische Bild-Crop-Optik ===: .pnp-card-image…“
 
Keine Bearbeitungszusammenfassung
 
(2 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */
/* === real dirty wiki logo hack ===*/
#p-logo a {
    background-image: url("images/b/be/Kushon-face.png") !important;
    background-size: contain;
}
 


/* === PnP Grid Layout === */
/* === PnP Grid Layout === */
Zeile 22: Zeile 27:
}
}


/* === Quadratische Bild-Crop-Optik === */
/* === Bild Styling (normale Proportionen, Hover-Zoom) === */


.pnp-card-image {
.pnp-card-image {
   width: 100%;
   width: 100%;
  aspect-ratio: 1 / 1;
   overflow: hidden;
   overflow: hidden;
   border-radius: 14px;
   border-radius: 14px;
Zeile 34: Zeile 38:
.pnp-card-image img {
.pnp-card-image img {
   width: 100%;
   width: 100%;
   height: 100%;
   height: auto;
  object-fit: cover;
   transition: transform 0.4s ease;
   transition: transform 0.4s ease;
}
}


.pnp-card:hover .pnp-card-image img {
.pnp-card:hover .pnp-card-image img {
   transform: scale(1.15);
   transform: scale(1.08);
}
}



Aktuelle Version vom 16. Februar 2026, 21:24 Uhr

/* === real dirty wiki logo hack ===*/
#p-logo a {
    background-image: url("images/b/be/Kushon-face.png") !important;
    background-size: contain;
}


/* === PnP Grid Layout === */

.pnp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 28px;
  max-width: 1300px;
  margin: 40px auto;
}

/* === Card Styling === */

.pnp-card {
  text-align: center;
  transition: transform 0.25s ease;
}

.pnp-card:hover {
  transform: scale(1.05);
}

/* === Bild Styling (normale Proportionen, Hover-Zoom) === */

.pnp-card-image {
  width: 100%;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

.pnp-card-image img {
  width: 100%;
  height: auto;
  transition: transform 0.4s ease;
}

.pnp-card:hover .pnp-card-image img {
  transform: scale(1.08);
}

/* === Titel Styling === */

.pnp-card-title {
  margin-top: 10px;
  font-weight: bold;
  font-size: 1.05em;
}