MediaWiki:Common.css: Porovnání verzí

Verze z 9. 10. 2025, 12:26

/* === Portable Infobox pro skin Citizen: light/dark + GOLD AKCENT === */

/* LIGHT THEME (Citizen) */
.skin-citizen .portable-infobox {
  /* barevné proměnné – můžete měnit jen tyto tři a vše se přebarví */
  --pi-accent: #d4af37;   /* ZLATÁ (logo) */
  --pi-border: #d9dee6;
  --pi-bg:     #ffffff;
  --pi-muted:  #f6f8fb;

  width: 320px;
  float: right;
  margin: 0 0 1rem 1rem;
  border: 1px solid var(--pi-border);
  border-radius: 12px;
  background: var(--pi-bg);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  font-size: .95em;
  line-height: 1.5;
}
.skin-citizen .portable-infobox .pi-title {
  background: var(--pi-accent);
  color: #fff;
  font-weight: 700;
  padding: 12px 14px;
  text-align: center;         /* centrování titulku */
}
.skin-citizen .portable-infobox .pi-image,
.skin-citizen .portable-infobox .pi-image-collection { background: #fff; }
.skin-citizen .portable-infobox .pi-image img {
  display: block;
  margin: 0 auto;             /* centrování obrázku */
  max-height: 320px;
  object-fit: contain;
  border-bottom: 1px solid var(--pi-border);
}
.skin-citizen .portable-infobox .pi-group {
  background: var(--pi-muted);
  padding: 8px 12px;
  border-top: 1px solid var(--pi-border);
}
.skin-citizen .portable-infobox .pi-group .pi-group-title {
  font-weight: 700;
  margin: 6px 0 4px;
}
.skin-citizen .portable-infobox .pi-data {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 6px 10px;
  padding: 6px 0;
  border-top: 1px dashed #e6eaf0;
}
.skin-citizen .portable-infobox .pi-data-label { font-weight: 600; color: #334; }
.skin-citizen .portable-infobox .pi-data-value { color: #111; word-break: break-word; }
.skin-citizen .portable-infobox .pi-data-type-text .pi-data-value {
  grid-column: 1 / -1;
  background: #fff;
  border: 1px solid var(--pi-border);
  border-radius: 8px;
  padding: 8px 10px;
}

/* DARK THEME (Citizen dark) */
.skin-citizen-dark .portable-infobox {
  --pi-accent: #d4af37;   /* zlatá zůstává */
  --pi-border: #2c3442;
  --pi-bg:     #10131a;
  --pi-muted:  #141a24;

  color: #e6ebf3;
  background: var(--pi-bg);
  border-color: var(--pi-border);
  box-shadow: none;
}
.skin-citizen-dark .portable-infobox .pi-title { color: #fff; }
.skin-citizen-dark .portable-infobox .pi-image img {
  border-bottom: 1px solid var(--pi-border);
}
.skin-citizen-dark .portable-infobox .pi-group {
  background: var(--pi-muted);
  border-top-color: var(--pi-border);
}
.skin-citizen-dark .portable-infobox .pi-data {
  border-top-color: #2a3240;
}
.skin-citizen-dark .portable-infobox .pi-data-label { color: #cfd8ea; }
.skin-citizen-dark .portable-infobox .pi-data-type-text .pi-data-value {
  background: #0b0e14;
  border-color: #2c3442;
  color: #e6ebf3;
}

/* RESPONSIVE: na úzkých displejích zarovnat pod text, 100% šířka */
@media (max-width: 720px) {
  .portable-infobox {
    float: none !important;
    width: 100% !important;
    margin: 0 0 1rem 0 !important;
  }
  .portable-infobox .pi-image img { max-height: 260px; }
  .portable-infobox .pi-data { grid-template-columns: 42% 58%; }
}