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:PortableInfobox.css: Porovnání verzí

MediaWiki interface page
More actions
← Porovnání se starší verzí
Bez shrnutí editace
Bez shrnutí editace
 
(Není zobrazeno 12 mezilehlých verzí od stejného uživatele.)
Řádek 1: Řádek 1:
/* ===========================================================
:root{ --pi-accent:#bb7e0e; }
  PortableInfobox – styl Bradavice Online
  =========================================================== */


/* Šířka, rámeček, stín – společné */
.portable-infobox{
.portable-infobox {
   width:min(333px,100%);
   width: 320px;
   float:right;
   border: 1px solid var(--pi-border, #d9dee6);
   margin:0 0 1rem 1rem;
   border-radius: 12px;
   background:transparent;
   background: var(--pi-bg, #fff);
  border:1px solid rgba(0,0,0,.12);
   overflow: hidden;
   border-radius:0 !important;
   box-shadow: 0 2px 10px rgba(0,0,0,.06);
   box-shadow:0 4px 18px rgba(0,0,0,.08);
   font-size: 0.95em;
   color:inherit;
   line-height: 1.5;
   overflow:visible !important;
}
}


/* ===========================================================
/* Titulek (podpora obou variant DOM) */
  Titulek – centrovaný, zlatý text + barevný pruh
.portable-infobox .pi-title,
  =========================================================== */
.portable-infobox .pi-item.pi-title{
.portable-infobox .pi-title {
   background:var(--pi-accent) !important;
   position: relative;
  color:#111 !important;
   padding: 12px 14px;
  display:flex !important; align-items:center !important; justify-content:center !important;
   text-align: center;
  text-align:center !important;
   font-weight: 700;
   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;
}


   /* Zlatý text (gradient do glyfů) */
.portable-infobox .pi-image,
  background-image: linear-gradient(
.portable-infobox .pi-image-collection{
    180deg,
   text-align:center !important; background:transparent !important;
    #a0703a 0%,
}
    #a0703a 25%,
.portable-infobox .pi-image a,
    #ffcf5b 50%,
.portable-infobox .pi-image .image{
    #a0703a 75%,
  pointer-events:none !important;
    #a0703a 100%
  cursor: default !important;
   );
}
   -webkit-background-clip: text;
.portable-infobox .pi-image img{
   background-clip: text;
   display:block !important; margin:0 auto !important;
   -webkit-text-fill-color: transparent;
   max-height:320px; object-fit:contain;
   color: transparent;
  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;
}


   /* Backdrop stín pro čitelnost */
.portable-infobox .pi-group{
   filter:
   padding:0 !important;
    drop-shadow(0 1px 0 rgba(0,0,0,.35))
   background:transparent;
    drop-shadow(0 3px 3px rgba(0,0,0,.35))
  border-top:1px solid rgba(0,0,0,.10);
    drop-shadow(0 6px 12px rgba(0,0,0,.25));
}
.portable-infobox .pi-group:first-of-type{ border-top:none; }


  /* Správné vykreslení při vícerádkovém titulku */
/* Hlavičky skupin (někdy .pi-header, jindy .pi-section-header) */
   -webkit-box-decoration-break: clone;
.portable-infobox .pi-header,
   box-decoration-break: clone;
.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;
}
}


/* Barevný pruh pozadí (zůstává podle motivu) */
.portable-infobox .pi-header + .pi-data,
.portable-infobox .pi-title::before {
.portable-infobox .pi-header + .pi-data ~ .pi-data,
  content: "";
.portable-infobox .pi-section-header + .pi-data,
  position: absolute;
.portable-infobox .pi-section-header + .pi-data ~ .pi-data{
  inset: 0;
   padding:8px 14px !important;
  background: var(--pi-accent, #2f4f7f);
  z-index: -1;
   pointer-events: none;
}
}


/* ===========================================================
.portable-infobox .pi-data{
  Obrázek – centrovaný a oddělený linkou
  display:grid !important;
  =========================================================== */
  grid-template-columns:25% 75% !important;
.portable-infobox .pi-image,
  gap:6px 10px !important;
.portable-infobox .pi-image-collection {
  padding:8px 0 !important;
   background: #fff;
  border-top:none !important;
   align-items: center;
}
}
.portable-infobox .pi-image img {
.portable-infobox .pi-data + .pi-data{
  display: block;
   border-top:1px solid rgba(0,0,0,.10) !important;
  margin: 0 auto;
  max-height: 320px;
  object-fit: contain;
   border-bottom: 1px solid var(--pi-border, #d9dee6);
}
}
 
.portable-infobox .pi-data-label{
/* ===========================================================
   all:unset !important; display:block !important; visibility:visible !important;
  Skupiny – nadpis a podklad
  position:static !important; clip:auto !important; clip-path:none !important;
  =========================================================== */
   height:auto !important; width:auto !important; overflow:visible !important;
.portable-infobox .pi-group {
   font-weight:600 !important; opacity:.9;
   background: var(--pi-muted, #f6f8fb);
  margin:0;
   padding: 8px 12px;
   border-top: 1px solid var(--pi-border, #d9dee6);
}
}
.portable-infobox .pi-group .pi-group-title {
.portable-infobox .pi-data-value{
  font-weight: 700;
  word-break:break-word;
  margin: 6px 0 4px 0;
  padding-right: 10px;
}
}


/* ===========================================================
.portable-infobox .pi-data-type-text .pi-data-value{
  Řádky: dvousloupcová mřížka label / hodnota
   grid-column:1 / -1;
  =========================================================== */
   padding:8px 10px;
.portable-infobox .pi-data {
   border:1px solid rgba(0,0,0,.10);
  display: grid;
   background:color-mix(in srgb, currentColor 5%, transparent);
   grid-template-columns: 40% 60%;
   border-radius:0 !important;
   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-value > :not(ul), .portable-infobox .pi-data-value li {
.portable-infobox .pi-data-type-text .pi-data-value {
   text-align: left !important;
   grid-column: 1 / -1;
  background: #fff;
  border: 1px solid var(--pi-border, #d9dee6);
  border-radius: 8px;
  padding: 8px 10px;
}
}


/* ===========================================================
@media (prefers-color-scheme: dark){
  Tmavý režim (Citizen)
  .portable-infobox{
  =========================================================== */
    border-color:rgba(255,255,255,.22);
.skin-citizen-dark .portable-infobox {
    box-shadow:0 4px 18px rgba(0,0,0,.25);
  --pi-accent: #4b6bb3;
  }
   --pi-border: #2c3442;
  .portable-infobox .pi-title,
   --pi-bg: #10131a;
  .portable-infobox .pi-item.pi-title{
   --pi-muted: #141a24;
    border-bottom-color:rgba(255,255,255,.16);
  color: #e6ebf3;
    color:#111 !important;
   box-shadow: none;
   }
  .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;
  }
}
}


/* Dark mode: zesílený stín u titulku pro kontrast */
@media (max-width:720px){
.skin-citizen-dark .portable-infobox .pi-title {
  .portable-infobox{
  filter:
    float:none !important; width:100% !important; margin:0 0 1rem 0 !important;
    drop-shadow(0 1px 0 rgba(0,0,0,.5))
  }
    drop-shadow(0 3px 3px rgba(0,0,0,.5))
  .portable-infobox .pi-image img{ max-height:260px; }
    drop-shadow(0 8px 14px rgba(0,0,0,.38));
}
}


/* Dark mode barvy labelů a čar */
/* Čištění prázdných P v prvním Citizen section (váš hack) */
.skin-citizen-dark .portable-infobox .pi-data-label {
#citizen-section-0 > p.mw-empty-elt{ display:none !important; }
  color: #cfd8ea;
#citizen-section-0 > p:has(> br:only-child){ display:none !important; }
}
#citizen-section-0 > p > br:only-child{ display:none !important; }
.skin-citizen-dark .portable-infobox .pi-data {
#citizen-section-0 > .portable-infobox{ margin-top:0 !important; }
  border-top-color: #2a3240;
}
.skin-citizen-dark .portable-infobox .pi-data-type-text .pi-data-value {
  background: #0b0e14;
  border-color: #2c3442;
}

Aktuální verze z 14. 10. 2025, 10:41

: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; }
Citováno z „https://wiki.bradavice-online.cz/index.php?title=MediaWiki:PortableInfobox.css&oldid=690“
Last modified
Stránka byla naposledy editována 14. 10. 2025 v 10:41.