MediaWiki:PortableInfobox.css

Poznámka: Po zveřejnění musíte vyprázdnit cache vašeho prohlížeče, jinak změny neuvidíte.

• Firefox / Safari: Při kliknutí na Aktualizovat držte Shift nebo stiskněte Ctrl-F5 nebo Ctrl-R (na Macu ⌘-R)
• Google Chrome: Stiskněte Ctrl-Shift-R (na Macu ⌘-Shift-R)
• Edge: Při kliknutí na Aktualizovat držte Ctrl nebo stiskněte Ctrl-F5.

:root{ --pi-accent:#bb7e0e; }

.portable-infobox{
  width:min(333px,100%);
  float:right;
  margin:0 0 1rem 1rem;
  background:transparent;
  border:1px solid rgba(0,0,0,.12);
  border-radius:0 !important;
  box-shadow:0 4px 18px rgba(0,0,0,.08);
  color:inherit;
  overflow:visible !important;
}

/* Titulek (podpora obou variant DOM) */
.portable-infobox .pi-title,
.portable-infobox .pi-item.pi-title{
  background:var(--pi-accent) !important;
  color:#111 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  text-align:center !important;
  padding:12px 14px 10px !important;
  border-bottom:1px solid rgba(0,0,0,.12);
  border-top-left-radius:0 !important; border-top-right-radius:0 !important;
  font-size: 25px;
  font-weight:700;
}

.portable-infobox .pi-image,
.portable-infobox .pi-image-collection{
  text-align:center !important; background:transparent !important;
}
.portable-infobox .pi-image a,
.portable-infobox .pi-image .image{
  pointer-events:none !important;
  cursor: default !important;
}
.portable-infobox .pi-image img{
  display:block !important; margin:0 auto !important;
  max-height:320px; object-fit:contain;
  border-bottom:1px solid rgba(0,0,0,.12);
  border-radius:0 !important;
  transform:none !important;
  transition:none !important;
}
.portable-infobox .pi-image a:hover img,
.portable-infobox .pi-image a:focus img{
  transform:none !important;
}

.portable-infobox .pi-group{
  padding:0 !important;
  background:transparent;
  border-top:1px solid rgba(0,0,0,.10);
}
.portable-infobox .pi-group:first-of-type{ border-top:none; }

/* Hlavičky skupin (někdy .pi-header, jindy .pi-section-header) */
.portable-infobox .pi-header,
.portable-infobox .pi-section-header{
  margin:0 !important; margin-top:5px; width:100% !important;
  background:var(--pi-accent) !important; color:#111 !important;
  padding:10px 14px !important;
  border-radius:0 !important;
  border-bottom:1px solid rgba(0,0,0,.12);
  font-size: 20px;
  font-weight:700;
  text-align:center !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
}

.portable-infobox .pi-header + .pi-data,
.portable-infobox .pi-header + .pi-data ~ .pi-data,
.portable-infobox .pi-section-header + .pi-data,
.portable-infobox .pi-section-header + .pi-data ~ .pi-data{
  padding:8px 14px !important;
}

.portable-infobox .pi-data{
  display:grid !important;
  grid-template-columns:25% 75% !important;
  gap:6px 10px !important;
  padding:8px 0 !important;
  border-top:none !important;
  align-items: center;
}
.portable-infobox .pi-data + .pi-data{
  border-top:1px solid rgba(0,0,0,.10) !important;
}
.portable-infobox .pi-data-label{
  all:unset !important; display:block !important; visibility:visible !important;
  position:static !important; clip:auto !important; clip-path:none !important;
  height:auto !important; width:auto !important; overflow:visible !important;
  font-weight:600 !important; opacity:.9;
  margin:0;
}
.portable-infobox .pi-data-value{
   word-break:break-word;
   padding-right: 10px;
}

.portable-infobox .pi-data-type-text .pi-data-value{
  grid-column:1 / -1;
  padding:8px 10px;
  border:1px solid rgba(0,0,0,.10);
  background:color-mix(in srgb, currentColor 5%, transparent);
  border-radius:0 !important;
}

.portable-infobox .pi-data-value > :not(ul), .portable-infobox .pi-data-value li {
  text-align: left !important;
}

@media (prefers-color-scheme: dark){
  .portable-infobox{
    border-color:rgba(255,255,255,.22);
    box-shadow:0 4px 18px rgba(0,0,0,.25);
  }
  .portable-infobox .pi-title,
  .portable-infobox .pi-item.pi-title{
    border-bottom-color:rgba(255,255,255,.16);
    color:#111 !important;
  }
  .portable-infobox .pi-image img{
    border-bottom-color:rgba(255,255,255,.14);
  }
  .portable-infobox .pi-group{
    border-top-color:rgba(255,255,255,.16);
  }
  .portable-infobox .pi-header,
  .portable-infobox .pi-section-header{
    border-bottom-color:rgba(255,255,255,.16);
    color:#111 !important;
  }
  .portable-infobox .pi-data + .pi-data{
    border-top-color:rgba(255,255,255,.16) !important;
  }
}

@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; }
}

/* Čištění prázdných P v prvním Citizen section (váš hack) */
#citizen-section-0 > p.mw-empty-elt{ display:none !important; }
#citizen-section-0 > p:has(> br:only-child){ display:none !important; }
#citizen-section-0 > p > br:only-child{ display:none !important; }
#citizen-section-0 > .portable-infobox{ margin-top:0 !important; }