MediaWiki:Common.css: Difference between revisions

UI: infobox left accent bar
Tag: Reverted
Revert to old revision 10665 (undo recent UI patches)
Tag: Manual revert
Line 1,640: Line 1,640:
}
}
.mw-editsection a:hover { color: #ffcc00 !important; }
.mw-editsection a:hover { color: #ffcc00 !important; }
/* === PATCH step4: kill white spots, polish Vector === */
/* Inputs / search */
input, textarea, select { background:#121212!important; color:#e0e0e0!important; border:1px solid #333!important; }
input::placeholder, textarea::placeholder { color:#8a8a8a!important; }
#simpleSearch, .vector-search-box { background:#111!important; border:1px solid #222!important; }
.vector-search-box-input { background:#121212!important; color:#e0e0e0!important; border-color:#333!important; }
.vector-search-box .vector-search-box-input:focus { outline: none!important; box-shadow: 0 0 0 1px #ffcc00 inset; }
/* Top tabs (Vector) */
.vector-menu-tabs, .vector-menu-tabs a { background:#0f0f0f!important; color:#ddd!important; border-color:#222!important; }
.vector-menu-tabs .selected a { background:#141414!important; color:#ffcc00!important; border-bottom-color:#141414!important; }
.vector-sticky-header { background:#0d0d0d!important; border-bottom:1px solid #222!important; }
/* Portlets / sidebar bodies */
.portal, .portal .body { background:#111!important; }
/* Thumbnails / galleries */
.thumb, .thumbinner { background:#111!important; border:1px solid #333!important; }
.thumbcaption { background:#0f0f0f!important; color:#cfcfcf!important; border-top:1px solid #333!important; }
.gallery, .gallerybox, .gallerytext { background:#111!important; border:1px solid #333!important; }
/* Message boxes / notices / hatnotes */
.ambox, .tmbox, .ombox, .fmbox, .imbox, .cmbox, .notice, .hatnote, .metadata {
  background:#111!important; color:#e0e0e0!important; border:1px solid #333!important; border-left:3px solid #ffcc00!important;
}
/* References */
ol.references, .references, .refbegin, .refend {
  background:#111!important; border:1px solid #333!important; padding:.6rem .8rem!important; border-left:3px solid #ffcc00!important;
}
.references li { margin: .25rem 0!important; }
/* Collapsible areas */
.mw-collapsible-content { background:#121212!important; border-top:1px solid #222!important; }
/* Infobox links for contrast */
.infobox a { color:#39d1ff!important; }
.infobox a:hover { color:#ffcc00!important; }
/* Horizontal rule */
hr { border:0; border-top:1px solid #222!important; }
/* Inline code / kbd */
code, kbd, samp { background:#101010!important; color:#e8e8e8!important; border:1px solid #2a2a2a!important; border-radius:3px; padding:0 .25rem; }
/* === PATCH step5: link hover glow === */
/* smooth transitions for links */
a, .mw-body-content a, .navbox a, .infobox a, #mw-panel .portal li a {
  transition: color .15s ease, text-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
/* default link colors stay ako máme už */
a { text-decoration: none; }
a:hover, a:focus {
  color: #ffcc00 !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-shadow: 0 0 6px rgba(255, 204, 0, .55);
  outline: none;
}
/* infobox & navbox konkrétne (vyšší kontrast) */
.infobox a:hover, .infobox a:focus,
.navbox a:hover, .navbox a:focus {
  color: #ffcc00 !important;
  text-shadow: 0 0 8px rgba(255, 204, 0, .65);
}
/* sidebar (ľavé menu) */
#mw-panel .portal li a:hover,
#mw-panel .portal li a:focus {
  color: #ffcc00 !important;
  text-shadow: 0 0 6px rgba(255, 204, 0, .5);
}
/* breadcrumbs / edit-section / footer odkazy */
#siteSub a:hover, .mw-editsection a:hover, #footer a:hover,
#siteSub a:focus, .mw-editsection a:focus, #footer a:focus {
  color: #ffcc00 !important;
  text-shadow: 0 0 5px rgba(255, 204, 0, .5);
}
/* bezpečný focus pre klávesnicu (ak link nemá hover) */
a:focus-visible {
  outline: 2px solid #ffcc00;
  outline-offset: 2px;
  text-decoration: none;
}
/* === PATCH step6: fandom-like hover bar & TOC/sidebar highlight === */
/* univerzálny žltý podčiarkovací pruh na hover (bez glow) */
a, .mw-body-content a, .navbox a, .infobox a, #mw-panel .portal li a {
  text-decoration: none;
  background-image: linear-gradient(#ffcc00,#ffcc00);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 2px;                /* hrúbka pruhu */
  transition: background-size .18s ease, color .18s ease;
}
a:hover, a:focus {
  color: #ffcc00 !important;
  background-size: 100% 2px;              /* pruh sa roztiahne pod text */
  text-shadow: none !important;            /* vypni predchádzajúci glow */
  outline: none;
}
/* v infoboxe a navboxe jemnejší efekt (nech pruh neskáče cez tesný layout) */
.infobox a, .navbox a {
  background-size: 0 1.5px;
}
.infobox a:hover, .navbox a:hover,
.infobox a:focus, .navbox a:focus {
  background-size: 100% 1.5px;
}
/* TOC – zvýrazni celý riadok na hover + žltý ľavý okraj */
#toc ul li, .toc ul li {
  transition: background-color .15s ease, border-color .15s ease;
  border-left: 2px solid transparent;
}
#toc ul li:hover, .toc ul li:hover {
  background: rgba(255, 204, 0, .08);
  border-left-color: #ffcc00;
}
#toc a, .toc a {
  background-image: none;                  /* v TOC nechaj iba block highlight */
  text-decoration: none;
}
#toc a:hover, .toc a:hover { color: #ffcc00 !important; }
/* ľavé menu – celé položky na hover s tenkým žltým okrajom vľavo */
#mw-panel .portal ul li {
  border-left: 2px solid transparent;
  transition: background-color .15s ease, border-color .15s ease;
}
#mw-panel .portal ul li:hover {
  background: rgba(255, 204, 0, .08);
  border-left-color: #ffcc00;
}
#mw-panel .portal li a {
  background-image: none;                  /* pre menu použijeme block highlight, nie podčiarknutie */
}
/* breadcrumbs / edit-section / footer – tenší pruh */
#siteSub a, .mw-editsection a, #footer a {
  background-size: 0 1px;
}
#siteSub a:hover, .mw-editsection a:hover, #footer a:hover {
  background-size: 100% 1px;
  color: #ffcc00 !important;
}
/* accessibility: klávesový focus bez posunu layoutu */
a:focus-visible {
  outline: 2px solid #ffcc00;
  outline-offset: 2px;
  background-size: 100% 2px;
}
/* === PATCH step7: refine TOC, link underline, infobox header === */
/* A) BODY LINKS – tenší „fandom“ underline, iba v obsahu stránky */
.mw-body-content a {
  text-decoration: none;
  background-image: linear-gradient(#ffcc00,#ffcc00);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;            /* 1px je decentnejšie */
  transition: background-size .16s ease, color .16s ease;
}
.mw-body-content a:hover, .mw-body-content a:focus {
  color: #ffcc00 !important;
  background-size: 100% 1px;
  text-shadow: none !important;
}
/* Zachovaj predchádzajúce farby pre navbox/infobox odkazy, ale bez background pruhu */
.navbox a, .infobox a { background-image: none; }
/* B) TOC – jemný block highlight, hlavne žltý ľavý pás; menšia intenzita */
#toc ul li, .toc ul li {
  border-left: 2px solid transparent;
  transition: background-color .12s ease, border-color .12s ease;
}
#toc ul li:hover, .toc ul li:hover {
  background: rgba(255, 204, 0, .05);  /* z ~.08 → .05 */
  border-left-color: #ffcc00;
}
#toc a, .toc a { color: #cfe8ff; background-image: none; }
#toc a:hover, .toc a:focus { color: #ffcc00 !important; }
/* C) INFOBOX HEADER – žltý pás s čiernym textom, bez bieleho pozadia */
.infobox .infobox-above,
.infobox caption,
.infobox .infobox-title,
.infobox th.heading {
  background: #ffcc00 !important;
  color: #111 !important;
  text-transform: uppercase;
  font-weight: 700;
  border: 1px solid #eab800 !important;
  padding: .35rem .5rem !important;
}
.infobox, .infobox td, .infobox th {
  border-color: #2b2b2b !important;      /* jemnejšie línie vo vnútri */
}
.infobox td { background: #151515 !important; }
.infobox th { background: #1b1b1b !important; color: #ffcc00 !important; }
/* D) Vector tabs – ešte subtílnejšie */
.vector-menu-tabs, .vector-menu-tabs a { border-color:#222 !important; }
.vector-menu-tabs .selected a {
  background:#121212 !important;
  border-bottom-color:#121212 !important;
  color:#ffcc00 !important;
}
/* E) Typografia – trocha čitateľnejšie odseky */
.mw-parser-output > p { line-height: 1.6; }
/* F) Jemnejšie horizontálne čiary */
hr { border-top: 1px solid #1f1f1f !important; }
/* G) Bez „bar underline“ v sidebare (používame block highlight z predošlého patchu) */
#mw-panel .portal li a { background-image: none; }
/* === PATCH step8: message boxes + heading rhythm === */
/* A) Štýly pre všetky message boxy (error/warn/info/note) v dark štýle */
.ambox, .tmbox, .ombox, .fmbox, .imbox, .cmbox, .mw-message-box, .hatnote, .notice {
  background:#111 !important;
  color:#e6e6e6 !important;
  border:1px solid #333 !important;
  border-left:4px solid #4aa3ff !important; /* default = info modrá */
  padding:.65rem .8rem !important;
  margin:.8rem 0 !important;
  border-radius:3px;
}
.mw-message-box-warning, .ambox-warning, .ombox-warning {
  border-left-color:#ffcc00 !important;
}
.mw-message-box-error, .ambox-serious, .ombox-crit, .error {
  border-left-color:#ff5b5b !important;
  background:#140f0f !important;
}
.mw-message-box-success, .ambox-green {
  border-left-color:#66d17a !important;
  background:#0f1410 !important;
}
.hatnote { font-style: italic; color:#d0d0d0 !important; }
/* Linky v boxoch */
.ambox a, .mw-message-box a, .hatnote a {
  color:#39d1ff !important;
}
.ambox a:hover, .mw-message-box a:hover, .hatnote a:hover {
  color:#ffcc00 !important;
}
/* B) Nadpisy – vzdušnejšie medzery a konzistentná veľkosť */
h1.firstHeading { margin: .25rem 0 1.0rem 0 !important; }
.mw-parser-output h2 { margin: 1.4rem 0 .6rem !important; font-size:1.6rem; }
.mw-parser-output h3 { margin: 1.0rem 0 .45rem !important; font-size:1.25rem; }
.mw-parser-output h4 { margin: .8rem 0 .35rem !important; font-size:1.1rem; }
/* jemnejší underline pri h2/h3, aby nelietali línie */
.mw-parser-output h2, .mw-parser-output h3 {
  border-bottom:1px solid #1f1f1f !important;
}
/* C) TOC – tenší ľavý pás a ľahšie pozadie pri hover */
#toc ul li, .toc ul li { border-left-width:1px !important; }
#toc ul li:hover, .toc ul li:hover { background: rgba(255,204,0,.04) !important; }
/* D) References – lepší kontrast odsekov v zozname */
.references li { line-height:1.5; }
/* E) Error hlášky zo šablón (červený text) – znížiť agresivitu farby na dark pozadí */
.mw-parser-output .error, .error { color:#ff7a7a !important; }
/* === HERO LEFT: len pre [[Cyberpunk 2077]] === */
:root{
  --hero-w: 320px;                          /* šírka panelu */
  --hero-h: 420px;                          /* výška panelu (kľudne uprav) */
  --hero-gap: 24px;                        /* medzera od textu */
  --hero-url: url(null);            /* ← sem ide lokálna /images cesta */
}
/* aktivuj iba na tejto stránke */
.page-Cyberpunk_2077 .mw-body{ position: relative; }
/* obrázkový panel vľavo hore */
.page-Cyberpunk_2077 .mw-body::before{
  content:"";
  position: absolute;
  top: 82px;                                /* zlaď s heading pruhom, doladíme podľa oka */
  left: 0;
  width: var(--hero-w);
  height: var(--hero-h);
  background: var(--hero-url) center/contain no-repeat, #0d0d0d;  /* logo je skôr „štvorec“, preto contain */
  border: 1px solid #2b2b2b;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  outline: 2px solid #ffcc00;
  outline-offset: -2px;
}
/* posun textu doprava, aby nenabehoval pod panel */
.page-Cyberpunk_2077 .mw-body-content{
  padding-left: calc(var(--hero-w) + var(--hero-gap)) !important;
}
/* TOC nech nie je nalepený */
.page-Cyberpunk_2077 #toc, .page-Cyberpunk_2077 .toc{
  max-width: 720px;
}
/* responzívne vypnutie panela na užších viewportoch */
@media (max-width: 1200px){
  .page-Cyberpunk_2077 .mw-body::before{ display:none; }
  .page-Cyberpunk_2077 .mw-body-content{ padding-left: 0 !important; }
}
/* Sticky TOC na stránke Cyberpunk_2077 */
.page-Cyberpunk_2077 #toc, .page-Cyberpunk_2077 .toc{
  position: sticky;
  top: 96px;                /* rovnaké ako horný okraj nad panelom */
  z-index: 2;
}
@media (max-width: 1200px){
  .page-Cyberpunk_2077 #toc, .page-Cyberpunk_2077 .toc{ position: static; }
}
/* žltý accent bar vľavo na infoboxe */
.infobox{
  position: relative;
}
.infobox::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width: 3px;
  background:#ffcc00;
}