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

Verze z 9. 10. 2025, 12:28

/* === Portable Infobox – transparentní, jemné, se zlatým akcentem === */
/* Výchozí akcent (můžete změnit): */
:root { --pi-accent: #d4af37; } /* old gold */

/* ZÁKLAD – funguje v light i dark díky průhlednosti */
.portable-infobox{
  width: min(340px, 100%);
  float: right;
  margin: 0 0 1rem 1rem;
  background: transparent;                 /* žádný plný podklad */
  border: 1px solid rgba(0,0,0,.10);       /* v dark přepíšeme níž */
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);  /* jemný stín */
  color: inherit;                           /* zdědí text barvu skinu */
  line-height: 1.5;
  font-size: .95em;
}

/* Titulek – jen lehký zlatý „sheen“, bez neprůhledné plochy */
.portable-infobox .pi-title{
  text-align: center;
  font-weight: 700;
  padding: 12px 14px;
  color: inherit;
  background:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--pi-accent) 35%, transparent) 0%,
      color-mix(in srgb, var(--pi-accent) 15%, transparent) 100%
    );
  border-bottom: 1px solid rgba(0,0,0,.10);
}

/* Obrázek centrovaný, bez tvrdého pozadí */
.portable-infobox .pi-image,
.portable-infobox .pi-image-collection{ background: transparent; }
.portable-infobox .pi-image img{
  display: block;
  margin: 0 auto;
  max-height: 320px;
  object-fit: contain;
  border-bottom: 1px solid rgba(0,0,0,.10);
}

/* Skupiny – poloprůhledný podklad, decentní oddělovače */
.portable-infobox .pi-group{
  background: rgba(0,0,0,.035);
  padding: 8px 12px;
  border-top: 1px solid rgba(0,0,0,.08);
}
.portable-infobox .pi-group .pi-group-title{
  font-weight: 700;
  margin: 6px 0 4px;
}

/* Řádky: grid label/value, tenká čárkovaná linka */
.portable-infobox .pi-data{
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 6px 10px;
  padding: 6px 0;
  border-top: 1px dashed rgba(0,0,0,.10);
}
.portable-infobox .pi-data-label{ font-weight: 600; opacity: .9; }
.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: 8px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.025);
}

/* Jemný zlatý proužek nahoře (luxusní detail) */
.portable-infobox::before{
  content:"";
  display:block;
  height: 3px;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--pi-accent) 85%, transparent),
      color-mix(in srgb, var(--pi-accent) 40%, transparent)
    );
}

/* DARK – když skin netaguje třídu, pomůže prefers-color-scheme */
@media (prefers-color-scheme: dark){
  .portable-infobox{
    border-color: rgba(255,255,255,.16);
    box-shadow: 0 6px 20px rgba(0,0,0,.30);
  }
  .portable-infobox .pi-title{
    border-bottom-color: rgba(255,255,255,.14);
    /* o něco výraznější zlatý nádech v dark */
    background:
      linear-gradient(
        to bottom,
        color-mix(in srgb, var(--pi-accent) 45%, transparent) 0%,
        color-mix(in srgb, var(--pi-accent) 20%, transparent) 100%
      );
  }
  .portable-infobox .pi-image img{
    border-bottom-color: rgba(255,255,255,.14);
  }
  .portable-infobox .pi-group{
    background: rgba(255,255,255,.04);
    border-top-color: rgba(255,255,255,.14);
  }
  .portable-infobox .pi-data{
    border-top-color: rgba(255,255,255,.16);
  }
  .portable-infobox .pi-data-type-text .pi-data-value{
    border-color: rgba(255,255,255,.16);
    background: rgba(255,255,255,.03);
  }
}

/* Pokud Citizen přidává .skin-citizen-dark, přepíše to ještě přesněji */
.skin-citizen-dark .portable-infobox{
  border-color: rgba(255,255,255,.16);
  box-shadow: none;
}
.skin-citizen-dark .portable-infobox .pi-title{
  border-bottom-color: rgba(255,255,255,.14);
}
.skin-citizen-dark .portable-infobox .pi-group{
  background: rgba(255,255,255,.04);
  border-top-color: rgba(255,255,255,.14);
}
.skin-citizen-dark .portable-infobox .pi-data{
  border-top-color: rgba(255,255,255,.16);
}
.skin-citizen-dark .portable-infobox .pi-data-type-text .pi-data-value{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.03);
}

/* RESPONSIVE */
@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-data{ grid-template-columns: 42% 58%; }
}