MediaWiki:PortableInfobox.css
MediaWiki interface page
More actions
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.
/* ===========================================================
PortableInfobox – styl Bradavice Online
=========================================================== */
/* Šířka, rámeček, stín – společné */
.portable-infobox {
width: 320px;
border: 1px solid var(--pi-border, #d9dee6);
border-radius: 12px;
background: var(--pi-bg, #fff);
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,.06);
font-size: 0.95em;
line-height: 1.5;
}
/* ===========================================================
Titulek – centrovaný, zlatý text + barevný pruh
=========================================================== */
.portable-infobox .pi-title {
position: relative;
padding: 12px 14px;
text-align: center;
font-weight: 700;
/* Zlatý text (gradient do glyfů) */
background-image: linear-gradient(
180deg,
#a0703a 0%,
#a0703a 25%,
#ffcf5b 50%,
#a0703a 75%,
#a0703a 100%
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
/* Backdrop stín pro čitelnost */
filter:
drop-shadow(0 1px 0 rgba(0,0,0,.35))
drop-shadow(0 3px 3px rgba(0,0,0,.35))
drop-shadow(0 6px 12px rgba(0,0,0,.25));
/* Správné vykreslení při vícerádkovém titulku */
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
/* Barevný pruh pozadí (zůstává podle motivu) */
.portable-infobox .pi-title::before {
content: "";
position: absolute;
inset: 0;
background: var(--pi-accent, #2f4f7f);
z-index: -1;
pointer-events: none;
}
/* ===========================================================
Obrázek – centrovaný a oddělený linkou
=========================================================== */
.portable-infobox .pi-image,
.portable-infobox .pi-image-collection {
background: #fff;
}
.portable-infobox .pi-image img {
display: block;
margin: 0 auto;
max-height: 320px;
object-fit: contain;
border-bottom: 1px solid var(--pi-border, #d9dee6);
}
/* ===========================================================
Skupiny – nadpis a podklad
=========================================================== */
.portable-infobox .pi-group {
background: var(--pi-muted, #f6f8fb);
padding: 8px 12px;
border-top: 1px solid var(--pi-border, #d9dee6);
}
.portable-infobox .pi-group .pi-group-title {
font-weight: 700;
margin: 6px 0 4px 0;
}
/* ===========================================================
Řádky: dvousloupcová mřížka label / hodnota
=========================================================== */
.portable-infobox .pi-data {
display: grid;
grid-template-columns: 40% 60%;
gap: 6px 10px;
padding: 6px 0;
border-top: 1px dashed #e6eaf0;
}
.portable-infobox .pi-data-label {
font-weight: 600;
color: #334;
}
.portable-infobox .pi-data-value {
color: #111;
word-break: break-word;
}
/* Textové bloky přes celou šířku (type=text) */
.portable-infobox .pi-data-type-text .pi-data-value {
grid-column: 1 / -1;
background: #fff;
border: 1px solid var(--pi-border, #d9dee6);
border-radius: 8px;
padding: 8px 10px;
}
/* ===========================================================
Tmavý režim (Citizen)
=========================================================== */
.skin-citizen-dark .portable-infobox {
--pi-accent: #4b6bb3;
--pi-border: #2c3442;
--pi-bg: #10131a;
--pi-muted: #141a24;
color: #e6ebf3;
box-shadow: none;
}
/* Dark mode: zesílený stín u titulku pro kontrast */
.skin-citizen-dark .portable-infobox .pi-title {
filter:
drop-shadow(0 1px 0 rgba(0,0,0,.5))
drop-shadow(0 3px 3px rgba(0,0,0,.5))
drop-shadow(0 8px 14px rgba(0,0,0,.38));
}
/* Dark mode barvy labelů a čar */
.skin-citizen-dark .portable-infobox .pi-data-label {
color: #cfd8ea;
}
.skin-citizen-dark .portable-infobox .pi-data {
border-top-color: #2a3240;
}
.skin-citizen-dark .portable-infobox .pi-data-type-text .pi-data-value {
background: #0b0e14;
border-color: #2c3442;
}