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

← Porovnání se starší verzí Porovnání s novější verzí →

Verze z 9. 10. 2025, 13:26

/* === FIX: jednodušší dělítka + zlatý titulek === */

/* zruš ten zlatý vnitřní proužek a nech kulaté rohy boxu */
.portable-infobox{
  box-shadow: 0 4px 18px rgba(0,0,0,.08);
  border-radius: 16px;
}

/* titulek: plné zlaté pozadí, bez overlaye, s kulatými rohy nahoře */
.portable-infobox .pi-title{
  background: var(--pi-accent, #d4af37) !important;
  color: #111 !important;                 /* lepší kontrast na zlaté */
  border-bottom: 1px solid var(--pi-bd, rgba(0,0,0,.12));
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

/* obrazek – jen tenká linka pod ním, žádné další pozadí */
.portable-infobox .pi-image,
.portable-infobox .pi-image-collection{ background: transparent !important; }
.portable-infobox .pi-image img{
  border-bottom: 1px solid var(--pi-sep, rgba(0,0,0,.10));
}

/* dělítka ve vnitřku: sjednotit, žádné „přerušované“ */
.portable-infobox .pi-data{
  border-top: none !important;            /* zruš naše staré dashed */
  padding: 8px 0;
}
.portable-infobox .pi-data + .pi-data{
  border-top: 1px solid var(--pi-sep, rgba(0,0,0,.10));  /* jemné, plné */
}
/* jistota: odstraň jakékoli defaultní čáry, co si nosí skin/extension */
.portable-infobox .pi-data-label,
.portable-infobox .pi-data-value{
  border: 0 !important;
  background: transparent !important;
}

/* skupiny – jen tenká horní linka a lehký „závoj“ */
.portable-infobox .pi-group{
  background: var(--pi-soft, rgba(0,0,0,.035));
  border-top: 1px solid var(--pi-sep, rgba(0,0,0,.10));
}

/* dark režim přes prefers-color-scheme + citizen dark */
@media (prefers-color-scheme: dark){
  .portable-infobox .pi-data + .pi-data{ border-top-color: rgba(255,255,255,.16); }
  .portable-infobox .pi-image img{ border-bottom-color: rgba(255,255,255,.14); }
  .portable-infobox .pi-group{
    background: rgba(255,255,255,.05);
    border-top-color: rgba(255,255,255,.16);
  }
}
.skin-citizen-dark .portable-infobox .pi-data + .pi-data{ border-top-color: rgba(255,255,255,.16); }
.skin-citizen-dark .portable-infobox .pi-image img{ border-bottom-color: rgba(255,255,255,.14); }
.skin-citizen-dark .portable-infobox .pi-group{
  background: rgba(255,255,255,.05); border-top-color: rgba(255,255,255,.16);
}

@@ Řádek 1: / Řádek 1: @@
-/* === Portable Infobox – jednoduchý transparentní styl se zlatým akcentem === */
+/* === FIX: jednodušší dělítka + zlatý titulek === */
-/* Globální proměnné (můžete změnit jen accent) */
+/* zruš ten zlatý vnitřní proužek a nech kulaté rohy boxu */
-:root{
-  --pi-accent: #d4af37;           /* zlatá (logo) */
-  --pi-bd: rgba(0,0,0,.12);       /* hrana v light */
-  --pi-sep: rgba(0,0,0,.10);      /* oddělovače v light */
-  --pi-soft: rgba(0,0,0,.035);    /* jemný podklad skupin v light */
-}
-@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);
-  }
-}
-/* Když Citizen přidá dark class, posílíme to ještě jistěji */
-.skin-citizen-dark{
-  --pi-bd: rgba(255,255,255,.22);
-  --pi-sep: rgba(255,255,255,.16);
-  --pi-soft: rgba(255,255,255,.05);
-}
-/* BOX */
 .portable-infobox{
-  width: min(360px, 100%);
+   box-shadow: 0 4px 18px rgba(0,0,0,.08);
-  float: right;
+  border-radius: 16px;
-  margin: 0 0 1rem 1rem;
-  background: transparent;                 /* plně průhledné pozadí */
-  border: 1px solid var(--pi-bd);
-  border-radius: 16px;                     /* kulaté rohy */
-  color: inherit;
-  overflow: hidden;
-  /* tenký vnitřní zlatý proužek + jemný stín */
-   box-shadow:
-    inset 0 3px 0 var(--pi-accent),
-4px 18px rgba(0,0,0,.08);
 }
-/* TITULEK – bez overlaye, jen čistý text a spodní linka */
+/* titulek: plné zlaté pozadí, bez overlaye, s kulatými rohy nahoře */
 .portable-infobox .pi-title{
-   background: transparent;                 /* žádný gradient/overlay */
+   background: var(--pi-accent, #d4af37) !important;
-   color: inherit;
+  color: #111 !important;                 /* lepší kontrast na zlaté */
-  text-align: center;
+   border-bottom: 1px solid var(--pi-bd, rgba(0,0,0,.12));
-  font-weight: 700;
+   border-top-left-radius: 16px;
-  letter-spacing: .2px;
+   border-top-right-radius: 16px;
-   padding: 12px 14px 10px;
-   border-bottom: 1px solid var(--pi-sep);
 }
-/* OBRÁZEK – centrovaný, bez plného podkladu */
+/* obrazek – jen tenká linka pod ním, žádné další pozadí */
 .portable-infobox .pi-image,
-.portable-infobox .pi-image-collection{ background: transparent; }
+.portable-infobox .pi-image-collection{ background: transparent !important; }
 .portable-infobox .pi-image img{
-  display: block;
+   border-bottom: 1px solid var(--pi-sep, rgba(0,0,0,.10));
-  margin: 0 auto;
-  max-height: 320px;
-  object-fit: contain;
-   border-bottom: 1px solid var(--pi-sep);
 }
-/* SKUPINY */
+/* dělítka ve vnitřku: sjednotit, žádné „přerušované“ */
-.portable-infobox .pi-group{
+.portable-infobox .pi-data{
-   background: var(--pi-soft);              /* jen lehký závoj */
+   border-top: none !important;            /* zruš naše staré dashed */
-   padding: 8px 12px;
+   padding: 8px 0;
-  border-top: 1px solid var(--pi-sep);
 }
-.portable-infobox .pi-group .pi-group-title{
+.portable-infobox .pi-data + .pi-data{
-   font-weight: 700;
+   border-top: 1px solid var(--pi-sep, rgba(0,0,0,.10));  /* jemné, plné */
-  margin: 6px 0 4px;
-  opacity: .95;
 }
+/* jistota: odstraň jakékoli defaultní čáry, co si nosí skin/extension */
-/* ŘÁDKY (label / value) */
+.portable-infobox .pi-data-label,
-.portable-infobox .pi-data{
+.portable-infobox .pi-data-value{
-  display: grid;
+   border: 0 !important;
-  grid-template-columns: 40% 60%;
+   background: transparent !important;
-   gap: 6px 10px;
-  padding: 6px 0;
-   border-top: 1px dashed var(--pi-sep);
 }
-.portable-infobox .pi-data-label{ font-weight: 600; opacity: .9; }
-.portable-infobox .pi-data-value{ word-break: break-word; }
-/* Textové bloky přes celou šířku */
+/* skupiny – jen tenká horní linka a lehký „závoj“ */
-.portable-infobox .pi-data-type-text .pi-data-value{
+.portable-infobox .pi-group{
-   grid-column: 1 / -1;
+   background: var(--pi-soft, rgba(0,0,0,.035));
-  padding: 8px 10px;
+   border-top: 1px solid var(--pi-sep, rgba(0,0,0,.10));
-   border-radius: 10px;
-  border: 1px solid var(--pi-sep);
-  background: color-mix(in srgb, currentColor 5%, transparent);
 }
-/* RESPONSIVE */
+/* dark režim přes prefers-color-scheme + citizen dark */
-@media (max-width: 720px){
+@media (prefers-color-scheme: dark){
-   .portable-infobox{
+   .portable-infobox .pi-data + .pi-data{ border-top-color: rgba(255,255,255,.16); }
-    float: none !important;
+  .portable-infobox .pi-image img{ border-bottom-color: rgba(255,255,255,.14); }
-     width: 100% !important;
+  .portable-infobox .pi-group{
-     margin: 0 0 1rem 0 !important;
+     background: rgba(255,255,255,.05);
+     border-top-color: rgba(255,255,255,.16);
    }
-  .portable-infobox .pi-image img{ max-height: 260px; }
+}
-  .portable-infobox .pi-data{ grid-template-columns: 42% 58%; }
+.skin-citizen-dark .portable-infobox .pi-data + .pi-data{ border-top-color: rgba(255,255,255,.16); }
+.skin-citizen-dark .portable-infobox .pi-image img{ border-bottom-color: rgba(255,255,255,.14); }
+.skin-citizen-dark .portable-infobox .pi-group{
+  background: rgba(255,255,255,.05); border-top-color: rgba(255,255,255,.16);
 }