MediaWiki:Common.css: Porovnání verzí
MediaWiki interface page
More actions
Bez shrnutí editace |
Bez shrnutí editace |
||
| Řádek 1: | Řádek 1: | ||
:root{ --pi-accent:#d4af37; } | :root{ --pi-accent:#d4af37; } | ||
/* Box */ | |||
.portable-infobox{ | .portable-infobox{ | ||
width:min(360px,100%); float:right; margin:0 0 1rem 1rem; | width:min(360px,100%); | ||
background:transparent; border:1px solid | float:right; margin:0 0 1rem 1rem; | ||
border-radius:16px; box-shadow:0 4px 18px rgba(0,0,0,.08); color:inherit; | background:transparent; | ||
border:1px solid rgba(0,0,0,.12); | |||
border-radius:16px; | |||
box-shadow:0 4px 18px rgba(0,0,0,.08); | |||
color:inherit; | |||
} | } | ||
/* Titulek – | /* Titulek – zlato, centrovaný */ | ||
.portable-infobox .pi-title{ | .portable-infobox .pi-title{ | ||
background:var(--pi-accent) !important; color:#111 !important; | background:var(--pi-accent) !important; color:#111 !important; | ||
display:flex !important; align-items:center !important; justify-content:center !important; | display:flex !important; align-items:center !important; justify-content:center !important; | ||
text-align:center !important; padding:12px 14px 10px | text-align:center !important; | ||
padding:12px 14px 10px !important; | |||
border-top-left-radius:16px !important; border-top-right-radius:16px !important; | border-top-left-radius:16px !important; border-top-right-radius:16px !important; | ||
border-bottom:1px solid rgba(0,0,0,.12); | |||
} | } | ||
| Řádek 22: | Řádek 25: | ||
.portable-infobox .pi-image,.portable-infobox .pi-image-collection{ text-align:center !important; background:transparent !important; } | .portable-infobox .pi-image,.portable-infobox .pi-image-collection{ text-align:center !important; background:transparent !important; } | ||
.portable-infobox .pi-image img{ display:block !important; margin:0 auto !important; max-height:320px; object-fit:contain; | .portable-infobox .pi-image img{ display:block !important; margin:0 auto !important; max-height:320px; object-fit:contain; | ||
border-bottom:1px solid | border-bottom:1px solid rgba(0,0,0,.12); } | ||
/* Skupiny – zrušíme vnitřní padding, header přes celou šířku */ | |||
.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; } | |||
/* | /* Header přes celou šířku boxu */ | ||
.portable-infobox .pi-header{ | .portable-infobox .pi-header{ | ||
background:var(--pi-accent) !important; color:#111 !important | margin:0 !important; width:100% !important; | ||
padding: | background:var(--pi-accent) !important; color:#111 !important; | ||
border:1px solid | padding:10px 14px !important; | ||
border-radius:0 !important; | |||
border-bottom:1px solid rgba(0,0,0,.12); | |||
font-weight:700; | |||
} | } | ||
/* Tělo skupiny */ | /* Tělo skupiny – vnitřní padding pro položky */ | ||
.portable-infobox .pi- | .portable-infobox .pi-header + .pi-data, | ||
.portable-infobox .pi-header + .pi-data ~ .pi-data{ | |||
padding:8px 14px !important; | |||
} | |||
/* | /* Vynutit VIDITELNÉ labely + layout 2 sloupce */ | ||
.portable-infobox .pi-data-label{ | .portable-infobox .pi-data-label{ | ||
all: unset !important; display:block !important; visibility:visible !important; position:static !important; | all:unset !important; display:block !important; visibility:visible !important; | ||
position:static !important; clip:auto !important; clip-path:none !important; | |||
font-weight:600 !important; opacity:.9 | font-weight:600 !important; opacity:.9; | ||
} | } | ||
.portable-infobox .pi-data{ | .portable-infobox .pi-data{ | ||
display:grid !important; grid-template-columns:44% 56% !important; gap:6px 10px !important; | display:grid !important; | ||
grid-template-columns:44% 56% !important; | |||
gap:6px 10px !important; | |||
border-top:none !important; | |||
} | } | ||
.portable-infobox .pi-data + .pi-data{ border-top:1px solid | .portable-infobox .pi-data + .pi-data{ border-top:1px solid rgba(0,0,0,.10) !important; } | ||
.portable-infobox .pi-data-value{ word-break:break-word; } | .portable-infobox .pi-data-value{ word-break:break-word; } | ||
/* | /* Textové bloky přes celou šířku */ | ||
.portable-infobox .pi-data-type-text .pi-data-value{ | .portable-infobox .pi-data-type-text .pi-data-value{ | ||
grid-column:1 / -1; padding:8px | grid-column:1 / -1; padding:8px 10px; | ||
border:1px solid | border:1px solid rgba(0,0,0,.10); border-radius:10px; | ||
background:color-mix(in srgb, currentColor 5%, transparent); | |||
} | } | ||
/* | /* Dark (přes systémový přepínač) */ | ||
@media ( | @media (prefers-color-scheme: dark){ | ||
.portable-infobox{ | .portable-infobox{ border-color:rgba(255,255,255,.22); box-shadow:0 4px 18px rgba(0,0,0,.25); } | ||
.portable-infobox .pi-image img{ | .portable-infobox .pi-title{ border-bottom-color:rgba(255,255,255,.16); } | ||
.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{ border-bottom-color:rgba(255,255,255,.16); } | |||
.portable-infobox .pi-data + .pi-data{ border-top-color:rgba(255,255,255,.16) !important; } | |||
} | } | ||
Verze z 9. 10. 2025, 13:50
:root{ --pi-accent:#d4af37; }
/* Box */
.portable-infobox{
width:min(360px,100%);
float:right; margin:0 0 1rem 1rem;
background:transparent;
border:1px solid rgba(0,0,0,.12);
border-radius:16px;
box-shadow:0 4px 18px rgba(0,0,0,.08);
color:inherit;
}
/* Titulek – zlato, centrovaný */
.portable-infobox .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-top-left-radius:16px !important; border-top-right-radius:16px !important;
border-bottom:1px solid rgba(0,0,0,.12);
}
/* Obrázek na střed */
.portable-infobox .pi-image,.portable-infobox .pi-image-collection{ text-align:center !important; background:transparent !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); }
/* Skupiny – zrušíme vnitřní padding, header přes celou šířku */
.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; }
/* Header přes celou šířku boxu */
.portable-infobox .pi-header{
margin:0 !important; 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-weight:700;
}
/* Tělo skupiny – vnitřní padding pro položky */
.portable-infobox .pi-header + .pi-data,
.portable-infobox .pi-header + .pi-data ~ .pi-data{
padding:8px 14px !important;
}
/* Vynutit VIDITELNÉ labely + layout 2 sloupce */
.portable-infobox .pi-data-label{
all:unset !important; display:block !important; visibility:visible !important;
position:static !important; clip:auto !important; clip-path:none !important;
font-weight:600 !important; opacity:.9;
}
.portable-infobox .pi-data{
display:grid !important;
grid-template-columns:44% 56% !important;
gap:6px 10px !important;
border-top:none !important;
}
.portable-infobox .pi-data + .pi-data{ border-top:1px solid rgba(0,0,0,.10) !important; }
.portable-infobox .pi-data-value{ word-break:break-word; }
/* Textové bloky přes celou šířku */
.portable-infobox .pi-data-type-text .pi-data-value{
grid-column:1 / -1; padding:8px 10px;
border:1px solid rgba(0,0,0,.10); border-radius:10px;
background:color-mix(in srgb, currentColor 5%, transparent);
}
/* Dark (přes systémový přepínač) */
@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{ border-bottom-color:rgba(255,255,255,.16); }
.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{ border-bottom-color:rgba(255,255,255,.16); }
.portable-infobox .pi-data + .pi-data{ border-top-color:rgba(255,255,255,.16) !important; }
}