Toggle search
Toggle menu
7
37
7
734
Bradavice Online Wiki
Toggle preferences menu
Toggle personal menu
Nejste přihlášen(a)
Your IP address will be publicly visible if you make any edits.

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

MediaWiki interface page
More actions
← Porovnání se starší verzíPorovnání s novější verzí →
Bez shrnutí editace
Bez shrnutí editace
Řádek 1: Řádek 1:
/* === PortableInfobox: vynutit VIDITELNÉ LABELY + zlaté group headery === */
:root{ --pi-accent:#d4af37; }
 
@media (prefers-color-scheme: dark){
/* Odstranění skrytí labelů, které dělá Citizen (sr-only apod.) */
   :root{ --pi-bd:rgba(255,255,255,.22); --pi-sep:rgba(255,255,255,.16); --pi-soft:rgba(255,255,255,.05); }
.portable-infobox .pi-data-label{
  all: unset;                   /* zruší sr-only hacky */
  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;
  white-space: normal !important;
  font-weight: 600;
  opacity: .9;
  margin: 0;
}
}


/* Dvousloupcové řádky: label vlevo, hodnota vpravo */
.portable-infobox{
.portable-infobox .pi-data{
   width:min(360px,100%); float:right; margin:0 0 1rem 1rem;
   display: grid !important;
   background:transparent; border:1px solid var(--pi-bd,rgba(0,0,0,.12));
  grid-template-columns: 44% 56% !important;
   border-radius:16px; box-shadow:0 4px 18px rgba(0,0,0,.08); color:inherit;
  align-items: start;
  gap: 6px 10px !important;
  padding: 8px 0 !important;
   border-top: none !important;
}
.portable-infobox .pi-data + .pi-data{
  border-top: 1px solid var(--pi-sep, rgba(0,0,0,.12)) !important;
}
@media (prefers-color-scheme: dark){
   .portable-infobox .pi-data + .pi-data{ border-top-color: rgba(255,255,255,.16) !important; }
}
}


/* Titulek – celý zlatý a centrovaný */
/* Titulek – celé zlato + centrování */
:root{ --pi-accent:#d4af37; }
.portable-infobox .pi-title{
.portable-infobox .pi-title{
   background: var(--pi-accent) !important;
   background:var(--pi-accent) !important; color:#111 !important;
  color: #111 !important;
  text-align: center !important;
   display:flex !important; align-items:center !important; justify-content:center !important;
   display:flex !important; align-items:center !important; justify-content:center !important;
   padding: 12px 14px 10px !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 var(--pi-sep,rgba(0,0,0,.12)) !important;
   border-bottom: 1px solid var(--pi-sep, rgba(0,0,0,.12));
  border-top-left-radius:16px !important; border-top-right-radius:16px !important;
}
}


/* Obrázek – centrovaný */
/* Obrázek na střed */
.portable-infobox .pi-image,
.portable-infobox .pi-image,.portable-infobox .pi-image-collection{ text-align:center !important; background:transparent !important; }
.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{
   border-bottom:1px solid var(--pi-sep,rgba(0,0,0,.12)); }
  display:block !important; margin:0 auto !important; max-height:320px; object-fit:contain;
   border-bottom:1px solid var(--pi-sep, rgba(0,0,0,.12));
}


/* Zlaté hlavičky skupin – potřebují <header label="..."/> v šabloně */
/* ZLATÉ hlavičky skupin (vyžaduje <header>Text</header>) */
.portable-infobox .pi-header{
.portable-infobox .pi-header{
   background: var(--pi-accent) !important;
   background:var(--pi-accent) !important; color:#111 !important; font-weight:700;
  color: #111 !important;
   padding:8px 12px; border-radius:10px; margin:10px 12px 6px;
  font-weight: 700;
   border:1px solid var(--pi-bd,rgba(0,0,0,.12));
   padding: 8px 12px;
  border-radius: 10px;
  margin: 10px 12px 6px;
   border: 1px solid rgba(0,0,0,.12);
}
@media (prefers-color-scheme: dark){
  .portable-infobox .pi-header{ border-color: rgba(255,255,255,.18); }
}
}


/* Tělo skupiny – jemný závoj */
/* Tělo skupiny */
.portable-infobox .pi-group{
.portable-infobox .pi-group{ background:var(--pi-soft,rgba(0,0,0,.035));
  background: var(--pi-soft, rgba(0,0,0,.035));
   border-top:1px solid var(--pi-sep,rgba(0,0,0,.12)); padding:6px 12px 8px; }
   border-top: 1px solid var(--pi-sep, rgba(0,0,0,.12));
 
  padding: 6px 12px 8px;
/* **ODSKRYTÍ LABELŮ** (Citizen je schovává) + 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; height:auto !important; width:auto !important; overflow:visible !important;
  font-weight:600 !important; opacity:.9; margin:0;
}
}
@media (prefers-color-scheme: dark){
.portable-infobox .pi-data{
  .portable-infobox .pi-group{
  display:grid !important; grid-template-columns:44% 56% !important; gap:6px 10px !important;
    background: rgba(255,255,255,.05);
  padding:8px 0 !important; border-top:none !important;
    border-top-color: rgba(255,255,255,.16);
  }
}
}
.portable-infobox .pi-data + .pi-data{ border-top:1px solid var(--pi-sep,rgba(0,0,0,.12)) !important; }
.portable-infobox .pi-data-value{ word-break:break-word; }


/* Box a responsivita */
/* Textová pole přes celou šířku */
.portable-infobox{
.portable-infobox .pi-data-type-text .pi-data-value{
   width: min(360px, 100%);
   grid-column:1 / -1; padding:8px 10px; border-radius:10px;
  float: right;
   border:1px solid var(--pi-sep,rgba(0,0,0,.10)); background:color-mix(in srgb,currentColor 5%,transparent);
  margin: 0 0 1rem 1rem;
  background: transparent;
   border: 1px solid var(--pi-bd, rgba(0,0,0,.12));
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(0,0,0,.08);
  color: inherit;
}
}
@media (max-width: 720px){
 
   .portable-infobox{ float:none !important; width:100% !important; margin:0 0 1rem 0 !important; }
/* Responsivita */
@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-image img{ max-height:260px; }
}
}

Verze z 9. 10. 2025, 13:46

:root{ --pi-accent:#d4af37; }
@media (prefers-color-scheme: dark){
  :root{ --pi-bd:rgba(255,255,255,.22); --pi-sep:rgba(255,255,255,.16); --pi-soft:rgba(255,255,255,.05); }
}

.portable-infobox{
  width:min(360px,100%); float:right; margin:0 0 1rem 1rem;
  background:transparent; border:1px solid var(--pi-bd,rgba(0,0,0,.12));
  border-radius:16px; box-shadow:0 4px 18px rgba(0,0,0,.08); color:inherit;
}

/* Titulek – celé zlato + centrování */
.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-bottom:1px solid var(--pi-sep,rgba(0,0,0,.12)) !important;
  border-top-left-radius:16px !important; border-top-right-radius:16px !important;
}

/* 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 var(--pi-sep,rgba(0,0,0,.12)); }

/* ZLATÉ hlavičky skupin (vyžaduje <header>Text</header>) */
.portable-infobox .pi-header{
  background:var(--pi-accent) !important; color:#111 !important; font-weight:700;
  padding:8px 12px; border-radius:10px; margin:10px 12px 6px;
  border:1px solid var(--pi-bd,rgba(0,0,0,.12));
}

/* Tělo skupiny */
.portable-infobox .pi-group{ background:var(--pi-soft,rgba(0,0,0,.035));
  border-top:1px solid var(--pi-sep,rgba(0,0,0,.12)); padding:6px 12px 8px; }

/* **ODSKRYTÍ LABELŮ** (Citizen je schovává) + 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; height:auto !important; width:auto !important; overflow:visible !important;
  font-weight:600 !important; opacity:.9; margin:0;
}
.portable-infobox .pi-data{
  display:grid !important; grid-template-columns:44% 56% !important; gap:6px 10px !important;
  padding:8px 0 !important; border-top:none !important;
}
.portable-infobox .pi-data + .pi-data{ border-top:1px solid var(--pi-sep,rgba(0,0,0,.12)) !important; }
.portable-infobox .pi-data-value{ word-break:break-word; }

/* Textová pole přes celou šířku */
.portable-infobox .pi-data-type-text .pi-data-value{
  grid-column:1 / -1; padding:8px 10px; border-radius:10px;
  border:1px solid var(--pi-sep,rgba(0,0,0,.10)); background:color-mix(in srgb,currentColor 5%,transparent);
}

/* Responsivita */
@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; }
}
Citováno z „https://wiki.bradavice-online.cz/index.php?title=MediaWiki:Common.css&oldid=30“
Last modified
Stránka byla naposledy editována 9. 10. 2025 v 13:46.