MediaWiki:Common.css: Difference between revisions

From MediaWiki
Jump to navigation Jump to search
← Older editNewer edit →
No edit summary
No edit summary
Line 1,238: Line 1,238:
   color: #fffcc0;
   color: #fffcc0;
   font-weight: 600;
   font-weight: 600;
}
/* Cyberpunk table – menšie písmo */
.article-table-cyberpunk th,
.article-table-cyberpunk td {
  font-size: 13px !important;  /* univerzálne menšie písmo */
  line-height: 1.3em;          /* nech sa text stále ľahko číta */
  padding: 5px 8px;            /* zmenšené odsadenie aby to sedelo k fontu */
}
}

Revision as of 11:37, 5 September 2025

/* === OPTIMALIZOVANÉ CSS PRE MEDIAWIKI CYBERPUNK WIKI === */

/* === CSS PREMENNÉ === */
:root {
  /* Základné farby */
  --bg-primary: #0a0a0a;
  --bg-secondary: #111111;
  --bg-tertiary: #1a1a1a;
  --text-primary: #ffffff;
  --text-secondary: #e0e0e0;
  --text-muted: #cfcfcf;
  
  /* Cyberpunk farby */
  --accent-yellow: #FCEE0A;
  --accent-cyan: #29FFFF;
  --link-color: #39d1ff;
  --link-visited: #a0a0ff;
  --border-color: #2b2b2b;
  
  /* Grafické assets */
  --h2-bg-image: url("/mediawiki/images/d/df/CP2077_header_bottom.svg");
  --main-box: url("/mediawiki/images/0/0e/Cyberpunk_2077_yellow_box.svg");
  --main-box-alt: url("/mediawiki/images/0/00/Cyberpunk_2077_dark_gray_box.svg");
  --infobox-bg: url("/mediawiki/images/e/e6/Cyberpunk_2077_vertical_edge.svg");
}

/* === FONT FACES === */
@font-face {
  font-family: "Rajdhani";
  font-weight: 400;
  font-display: swap;
  src: url('wiki/Special:FilePath/Rajdhani-Regular.ttf') format("opentype");
}

@font-face {
  font-family: "Orbitron";
  font-weight: 400;
  font-display: swap;
  src: url('wiki/Special:FilePath/Orbitron.ttf') format("opentype");
}

@font-face {
  font-family: "BlenderProBook";
  font-weight: 400;
  font-display: swap;
  src: url('wiki/Special:FilePath/BlenderPro-Book.ttf') format("opentype");
}

@font-face {
  font-family: "BlenderProBold";
  font-weight: 700;
  font-display: swap;
  src: url('wiki/Special:FilePath/BlenderPro-Bold.ttf') format("opentype");
}

/* === IMPORTS === */
@import url("/mediawiki/index.php?title=MediaWiki:CustomNavigation.css&action=raw&ctype=text/css");
@import url("/mediawiki/index.php?title=MediaWiki:CustomTables.css&action=raw&ctype=text/css");
@import url("/mediawiki/index.php?title=MediaWiki:CustomTemplates.css&action=raw&ctype=text/css");
@import url("/mediawiki/index.php?title=MediaWiki:Netpages2077.css&action=raw&ctype=text/css");

/* === ZÁKLADNÉ ŠTÝLY === */
html, body {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

.mw-body, .mw-body-content, #content {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  max-width: 1080px !important;
  margin: 0 auto !important;
  padding-left: 15px !important;
  box-shadow: 0 0 0 1px #222, 0 10px 40px rgba(0,0,0,.4);
}

/* === NAVIGÁCIA A PANELY === */
#mw-head, #left-navigation, #right-navigation, 
#mw-page-base, #mw-head-base, #mw-navigation, 
.vector-sticky-header {
  background: var(--bg-primary) !important;
  border-color: #222 !important;
}

#mw-panel, #mw-panel .portal, #mw-panel .portal .body,
#p-logo, #p-logo a {
  background: var(--bg-secondary) !important;
  color: var(--text-muted) !important;
}

/* === ODKAZY === */
a {
  color: var(--link-color) !important;
  text-decoration: none;
  transition: color .16s ease;
}

a:visited { color: var(--link-visited) !important; }

.mw-body-content a:hover, .mw-body-content a:focus {
  color: var(--accent-yellow) !important;
}

/* === NADPISY === */
h1, h2, h3, h4, h5, h6 {
  color: var(--accent-yellow) !important;
  border-bottom: 1px solid #333 !important;
  font-family: BlenderProBold, sans-serif;
}

.firstHeading {
  background: 
    var(--hero-image, url(/mediawiki/images/e/e6/Site-logo.png)) left center / 120px auto no-repeat,
    linear-gradient(90deg, var(--bg-primary) 0%, #171717 60%, var(--bg-tertiary) 100%);
  padding-left: 140px;
  margin: .25rem 0 1.0rem 0 !important;
  border-left: 4px solid var(--accent-yellow);
}

.page-content h2:not(.all-maps__empty-title), .pi-header {
  background-image: var(--h2-bg-image);
  background-repeat: no-repeat;
  background-position: 25% 105%;
  background-size: 100% 10px;
  line-height: 1.2;
  color: var(--accent-cyan);
  border-bottom: none;
  overflow: auto;
}

/* === TOC === */
#toc, .toc {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--accent-yellow) !important;
  border-radius: 4px;
  padding: .6rem .8rem !important;
}

.tocnumber { color: var(--accent-yellow) !important; }

#toc ul li:hover, .toc ul li:hover {
  background: rgba(255,204,0,.06);
  border-left: 1px solid var(--accent-yellow);
  transition: all .12s ease;
}

/* === PORTABLE INFOBOXES === */
.portable-infobox {
  position: relative;
  margin-right: 5px;
  margin-left: 15px !important;
  border: 1px solid var(--accent-yellow);
  border-radius: 10px 0px 0px 10px;
  background-color: var(--bg-secondary);
  padding-bottom: 4px;
}

.portable-infobox::after {
  content: "";
  position: absolute;
  width: 6%;
  height: 100%;
  top: 0px;
  right: 0px;
  background-image: var(--infobox-bg);
  background-repeat: repeat-y;
  background-size: 32px 1080px;
}

.pi-title {
  background-color: transparent;
  border-radius: 10px 10px 0px 0px;
  color: var(--accent-cyan);
  border-bottom: none;
  margin-top: 5px;
  text-align: center;
  font-family: BlenderProBold, sans-serif;
  font-size: 1.4em;
}

.pi-header {
  background-color: transparent;
  color: var(--accent-cyan);
  margin: 5px 15px !important;
  text-align: center;
  font-family: BlenderProBold, sans-serif !important;
  font-size: 1.2em !important;
  background-position: 0% 135% !important;
  text-transform: none !important;
}

.pi-data-label {
  padding: 3px 5px 3px 1px;
  text-align: right;
  border-right: 1px var(--accent-yellow) solid;
  color: var(--accent-cyan);
  text-transform: none !important;
}

/* === TABY A SELEKTORY === */
.wds-tabs, .wds-tabs__wrapper, .wds-tabs__tab,
.wds-tabs__tab-label, .wds-tabs__tab a,
.pi-tab-link, .pi-media-collection-tabs .pi-tab-link {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
  border: 1px solid #333 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Aktívne taby */
.wds-tabs__tab.wds-is-current .wds-tabs__tab-label,
.wds-tabs__tab[aria-selected="true"] .wds-tabs__tab-label,
.pi-tab-link.is-active, .pi-tab-link.current,
[role="tab"][aria-selected="true"] {
  background: var(--accent-yellow) !important;
  color: #111 !important;
  border: 1px solid #555 !important;
}

/* Hover efekt */
.wds-tabs__tab:hover .wds-tabs__tab-label,
.pi-tab-link:hover {
  background: var(--bg-tertiary) !important;
  color: var(--link-color) !important;
}

/* === TABUĽKY === */
.wikitable, table, .infobox {
  background: var(--bg-tertiary) !important;
  color: var(--text-secondary) !important;
  border: 1px solid #333 !important;
  margin-left: 15px !important;
}

.wikitable th, .infobox th {
  background: #222 !important;
  color: var(--accent-yellow) !important;
}

.wikitable tr:nth-child(even) td { background: #171717 !important; }
.wikitable tr:nth-child(odd) td { background: #1b1b1b !important; }

/* === NAVBOXY === */
.navbox {
  --navbox-bg-color: var(--bg-secondary) !important;
  background: var(--bg-secondary) !important;
  border: 1px solid var(--accent-cyan) !important;
  color: var(--text-secondary) !important;
}

.navbox-title {
  background: #222 !important;
  color: var(--accent-yellow) !important;
}

.navbox a { color: var(--link-color) !important; }
.navbox a:hover { color: var(--accent-yellow) !important; }

/* === INPUTY A FORMULÁRE === */
input, textarea, select,
.vector-search-box-input {
  background: #121212 !important;
  color: var(--text-secondary) !important;
  border: 1px solid #333 !important;
}

input::placeholder, textarea::placeholder {
  color: #8a8a8a !important;
}

/* === THUMBNAILY A GALÉRIE === */
.thumb, .thumbinner, .gallery, .gallerybox {
  background: var(--bg-secondary) !important;
  border: 1px solid #333 !important;
}

.thumbcaption {
  background: #0f0f0f !important;
  color: var(--text-muted) !important;
  border-top: 1px solid #333 !important;
}

/* === UTILITY CLASSES === */
.divYellowBox {
  border: 3px solid transparent;
  border-image: var(--main-box) round;
  border-image-slice: 10% fill;
  border-image-width: 20px;
  margin: 10px auto;
  overflow: hidden;
  text-align: center;
}

.divGrayBox {
  border: 3px solid transparent;
  border-image: var(--main-box-alt) round;
  border-image-slice: 10% fill;
  border-image-width: 20px;
  padding: 10px;
}

.BlockQuote {
  display: block;
  border: 2px solid var(--accent-yellow);
  border-radius: 10px;
  text-align: center;
  padding: 1em;
  overflow: hidden;
}

/* === ŠPECIALIZOVANÉ KOMPONENTY === */
.mainpage-header {
  font-size: 18pt;
  letter-spacing: 1px;
  text-align: center;
  margin-top: 5px;
  background-image: var(--h2-bg-image);
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 70% 8px;
  color: var(--accent-cyan);
  padding-bottom: 6px;
}

.bannercurve {
  background-color: rgba(255, 255, 255, 0.10);
  margin: 10px auto;
  border: 1px solid var(--accent-yellow);
  border-left: 4px solid var(--accent-yellow);
  text-align: center;
  color: var(--text-primary);
  width: auto;
  overflow: auto;
  padding: 5px;
}

/* === OOUI A SPRÁVY === */
.oo-ui-panelLayout, .oo-ui-widget,
.oo-ui-textInputWidget input,
.oo-ui-dropdownWidget-handle {
  background: var(--bg-tertiary) !important;
  color: var(--text-secondary) !important;
  border-color: #333 !important;
}

.mw-message-box {
  background: var(--bg-tertiary) !important;
  color: var(--text-secondary) !important;
  border: 1px solid #333 !important;
  border-left: 4px solid var(--link-color) !important;
}

/* === RESPONZÍVNE ÚPRAVY === */
@media only screen and (max-width: 1024px) {
  .mainpage-header {
    background-size: 70% 6px;
  }
  
  #content h2 {
    background-position-y: 30px;
    padding-bottom: 6px;
    font-size: 15pt;
  }
}

/* === PÄTIČKA === */
#footer, .mw-footer {
  background: #0f0f0f !important;
  color: #9a9a9a !important;
  border-top: 1px solid #222 !important;
}

#footer a, .mw-footer a { color: #c8c8c8 !important; }
#footer a:hover, .mw-footer a:hover { color: var(--accent-yellow) !important; }

/* === BEZPEČNOSTNÉ OVERRIDES === */
* { border-color: currentColor; }
hr { border: 0; border-top: 1px solid #1f1f1f !important; }


/* === ANTI-WHITE PANELS - KOMPLETNÉ POKRYTIE === */

/* Vector skin základy */
.skin-vector body {
  color: var(--text-primary);
  background: var(--bg-primary);
}

.skin-vector .mw-body,
.skin-vector .mw-workspace-container {
  background: var(--bg-primary);
}

/* Page transparency */
.page__main { 
  background-color: rgba(10,10,10,0.9) !important; 
}

/* Všetky možné biele panely */
.page, .page-content, .mw-content-text,
.mw-parser-output, .content, article {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

/* Sidebar a navigačné elementy */
#mw-panel .portal h3,
#mw-panel .portal li a {
  color: var(--text-muted) !important;
}

#mw-panel .portal li a:hover {
  color: var(--accent-yellow) !important;
}

/* Záložky Vector skinu */
.vector-menu-tabs a {
  background: #0f0f0f !important;
  color: var(--text-muted) !important;
  border-color: #222 !important;
}

.vector-menu-tabs .selected a {
  background: #141414 !important;
  color: var(--accent-yellow) !important;
  border-bottom-color: #141414 !important;
}

/* Vyhľadávacie pole */
#simpleSearch, .vector-search-box {
  background: var(--bg-secondary) !important;
  border: 1px solid #222 !important;
}

/* Všetky možné white containery */
.mw-body-content,
.mw-content-container,
#bodyContent,
#mw-content-text,
.parsoid-body {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

/* Kategórie */
#catlinks {
  background: var(--bg-secondary) !important;
  border: 1px solid #333 !important;
  border-left: 3px solid var(--accent-yellow) !important;
}

#catlinks a { color: var(--link-color) !important; }
#catlinks a:hover { color: var(--accent-yellow) !important; }

/* Referencie a citations */
.references, .mw-references-wrap {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--accent-yellow) !important;
  padding: .6rem .8rem !important;
  border-radius: 4px;
}

ol.references li:target,
sup.reference:target {
  background-color: rgba(41,255,255,.2) !important;
}

/* Kód bloky */
pre, code, .mw-code {
  background: #101010 !important;
  color: #e8e8e8 !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 4px;
}

pre {
  padding: .6rem .8rem !important;
  overflow: auto;
}

/* Blockquotes */
blockquote {
  border-left: 3px solid var(--accent-yellow);
  background: var(--bg-secondary);
  padding: .6rem .8rem;
  color: #dcdcdc;
}

/* Lists */
.mw-body-content ul,
.mw-body-content ol {
  margin: .4rem 0 .8rem 2rem !important;
}

.mw-body-content li {
  line-height: 1.5;
}

.page-content li::marker {
  color: var(--accent-cyan);
}

/* Všetky OOUI komponenty */
.oo-ui-widget,
.oo-ui-optionWidget,
.oo-ui-toolbar,
.mw-rcfilters-ui-filterMenuHeaderWidget,
.mw-rcfilters-ui-rcTopSectionWidget,
.oo-ui-tagMultiselectWidget-handle,
.oo-ui-tagItemWidget.oo-ui-widget,
.oo-ui-menuSelectWidget,
.oo-ui-menuSelectWidget .oo-ui-menuOptionWidget,
.oo-ui-popupWidget-popup,
.oo-ui-popupWidget-body {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-secondary) !important;
  border-color: #333 !important;
}

/* Všetky možné message boxy */
.mw-message-box,
.mw-message-box-warning,
.mw-message-box-error,
.mw-message-box-success,
.warningbox,
.errorbox,
.successbox,
.mw-warning,
.mw-editnotice,
.mw-warning-with-logexcerpt {
  background: var(--bg-tertiary) !important;
  color: var(--text-secondary) !important;
  border: 1px solid #333 !important;
  padding: 0.75em 1em !important;
}

/* Farebné akcenty pre message boxy */
.mw-message-box-warning, .warningbox {
  border-left: 4px solid #d19a00 !important;
}

.mw-message-box-error, .errorbox {
  border-left: 4px solid #c0392b !important;
}

.mw-message-box-success, .successbox {
  border-left: 4px solid #27ae60 !important;
}

/* Editačné formuláre */
.editOptions,
.editCheckboxes,
#wpTextbox1,
#wpSummary {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
  border: 1px solid #333 !important;
}

.editButtons input,
.editButtons button {
  background: #222 !important;
  color: var(--text-secondary) !important;
  border: 1px solid #555 !important;
}

/* CodeMirror */
.CodeMirror,
.CodeMirror-gutters {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
  border-color: #333 !important;
}

.CodeMirror-cursor {
  border-left: 1px solid var(--text-secondary) !important;
}

/* Changeslist a Recent Changes */
.mw-changeslist,
.mw-changeslist-line,
.mw-rcfilters-ui-watchlistTopSectionWidget,
.mw-changeslist-legend,
.mw-changeslist-legend dl,
.mw-changeslist-legend dd {
  background: var(--bg-tertiary) !important;
  color: var(--text-secondary) !important;
  border-color: #333 !important;
}

/* Všetky možné DataTables a špeciálne stránky */
table.mw-datatable,
.TablePager,
table.filelist,
.mw-pager-navigation,
.TablePager_nav {
  background: var(--bg-tertiary) !important;
  color: var(--text-secondary) !important;
  border: 1px solid #333 !important;
}

table.mw-datatable th,
table.mw-datatable td,
.TablePager th,
.TablePager td,
table.filelist th,
table.filelist td {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
  border-color: #333 !important;
}

/* Pruhovanie tabuliek */
table.mw-datatable tr:nth-child(even) > td,
table.filelist tr:nth-child(even) > td {
  background: #161616 !important;
}

/* Hatnotes a notice boxy */
.ambox, .tmbox, .ombox, .fmbox, .imbox, .cmbox,
.hatnote, .notice {
  background: var(--bg-secondary) !important;
  color: #e6e6e6 !important;
  border: 1px solid #333 !important;
  border-left: 4px solid var(--link-color) !important;
  padding: .65rem .8rem !important;
  margin: .8rem 0 !important;
  border-radius: 3px;
}

/* Bezpečnostné globálne pravidlá pre všetky elementy */
div, section, article, aside, main, header, footer,
nav, span, p, ul, ol, li, dl, dt, dd {
  background-color: inherit;
}

/* Force dark pre akékoľvek inline štýly */
[style*="background: white"],
[style*="background-color: white"],
[style*="background: #fff"],
[style*="background-color: #fff"] {
  background: var(--bg-primary) !important;
}

[style*="color: black"],
[style*="color: #000"] {
  color: var(--text-primary) !important;
}

/* === BEZPEČNOSTNÉ OVERRIDES === */
* { border-color: currentColor; }
hr { border: 0; border-top: 1px solid #1f1f1f !important; }

/* ===== Global dark background & text ===== */
body, #content, .mw-body, .mw-body-content, .vector-body, .vector-page-content,
.mw-parser-output {
  background: #0a0a0a !important;
  color: #e6e6e6;
}

/* ===== Tables, TOC, navboxes, message boxes ===== */
.mw-parser-output table,
table, .wikitable, .toc, .navbox, .ambox {
  background: #111 !important;
  border-color: #333 !important;
}
.mw-parser-output table th,
.mw-parser-output table td {
  background: transparent !important;
  border-color: #333 !important;
}

/* ===== Infoboxes (white backgrounds -> dark) ===== */
table.infobox, .infobox,
.portable-infobox, .portable-infobox .pi-item, .portable-infobox .pi-data,
.portable-infobox .pi-header, .portable-infobox .pi-title,
.portable-infobox .pi-data-value, .portable-infobox .pi-image, .portable-infobox .pi-media {
  background: #111 !important;
  color: #eee !important;
  border-color: #333 !important;
}

/* ===== Code blocks ===== */
pre, code, .mw-code {
  background: #0f0f0f !important;
  color: #e6e6e6 !important;
  border: 1px solid #333 !important;
}

/* ===== Images: no overflow, responsive ===== */
.mw-parser-output img,
.thumb img, .thumbimage, .mw-file-element,
.gallerybox .thumb img, .fullImageLink img,
.mw-parser-output .infobox img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

/* Containers shouldn’t overflow horizontally */
.mw-parser-output, .vector-body, .mw-body { overflow-x: hidden; }

/* Thumbs/galleries keep content clipped inside */
.thumb, .tleft, .tright, .gallerybox .thumb {
  overflow: hidden;
  max-width: 100%;
}

/* Gallery text color */
.gallerybox .gallerytext { color: #ddd; }

/* Links (optional tweak for readability on dark bg) */
a { color: #8ab4ff; }
a:visited { color: #b388ff; }


/* =======================
   Dark fix pack for Vector
   ======================= */

:root{
  --bg: #0b0c0d;
  --ui-border: #2a2d33;
  --text: #e5e8eb;
  --text-muted: #a9b0b8;
}

/* 1) Thumbnails & captions – odstránenie bieleho pozadia/okrajov */
.mw-parser-output .thumb,
.mw-parser-output .thumb .thumbinner{
  background: transparent !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 6px;
}
.mw-parser-output .thumb .thumbimage{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.mw-parser-output .thumbcaption{
  background: transparent !important;
  color: var(--text-muted) !important;
}
img.thumbborder, .thumbborder{ /* ak je použitý parameter |border */
  border: 0 !important;
}

/* 2) Galéria a file stránky */
.gallerybox .thumb{
  background: transparent !important;
  border-color: var(--ui-border) !important;
}
.gallerybox, .gallerytext{
  background: transparent !important;
  color: var(--text) !important;
}
#file img{ background: transparent !important; }

/* 3) Nadpisy a portlety – žiadne biele pásy */
.mw-body-content h1,
.mw-body-content h2,
.mw-body-content h3,
.mw-body-content h4,
.mw-headline,
.mw-editsection,
#firstHeading,
.portlet .pBody,
.vector-menu-content{
  background: transparent !important;
  color: var(--text);
}

/* 4) TOC (Obsah) – tmavé pozadie a orámovanie */
.toc{
  background: #0f1012 !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 6px;
}
.toc .toctitle, .tocnumber{ color: var(--text-muted) !important; }

/* 5) Wikitable – jednotný tmavý vzhľad, zebra + hover */
.mw-parser-output .wikitable{
  background: #0f1012 !important;
  color: var(--text) !important;
  border: 1px solid var(--ui-border) !important;
  border-collapse: collapse;
}
.wikitable > tr > th, .wikitable > * > tr > th{
  background: #14161a !important;
  border: 1px solid var(--ui-border) !important;
}
.wikitable td{
  border: 1px solid var(--ui-border) !important;
}
.wikitable tr:nth-child(even) td{ background: #101216 !important; }
.wikitable tr:hover td{ background: #15181c !important; }

/* 6) Infobox (PortableInfobox kompatibilita – ak ju používaš) */
.portable-infobox{
  background: #0f1012 !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--text) !important;
  border-radius: 8px;
}
.portable-infobox .pi-header,
.portable-infobox .pi-data,
.portable-infobox .pi-title{ background: transparent !important; }
.portable-infobox .pi-image .thumb{
  background: transparent !important;
  border: 0 !important;
}

/* 7) Linky a drobnosti pre tmavý motív */
.mw-body a:link, a{ color: #f2bd00; }
a:visited{ color: #c99a00; }
a.new{ color: #ff7070; }
.small, small, .thumbcaption{ color: var(--text-muted) !important; }

.thumb.tleft, .thumb.tright{ margin-top: .3em; margin-bottom: .8em; }

/* 8) Kódové bloky */
pre, code, .mw-code{
  background: #0c0d0f !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--text) !important;
  border-radius: 6px;
}

/* Zabij všetky rámy/pozadia okolo náhľadov a obrázkov */
.mw-parser-output .thumb,
.mw-parser-output .thumb .thumbinner,
.mw-parser-output .thumb .thumbimage,
.mw-parser-output img.mw-file-element,
.gallerybox .thumb,
.gallerybox .thumb img {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Ak používaš |thumb|right/left – skry aj rám a caption pozadie */
.mw-parser-output .thumb .thumbinner { border: 0 !important; }
.mw-parser-output .thumbcaption { background: transparent !important; border: 0 !important; }

/* Niektoré skiny dávajú biele pozadie všetkým img – prebitie */
.mw-body-content img,
.mw-parser-output img {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* TOC a pravé boxy – žiadne biele pásy */
.toc, .vector-menu-content, .portlet .pBody {
  background: transparent !important;
  border: 1px solid #2a2d33 !important; /* zmeň/odstráň podľa chuti */
}

/* Odstránenie bieleho pozadia a rámikov pri figure obrázkoch */
figure[typeof*="mw:File"],
figure[typeof*="mw:File/Thumb"],
figure[typeof*="mw:File/Frame"] {
  background: transparent !important;
  border: 0 !important;
  margin: .5em auto !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Samotný obrázok */
figure[typeof*="mw:File"] img.mw-file-element {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Popisok pod obrázkom */
figure[typeof*="mw:File"] figcaption {
  background: transparent !important;
  color: #FCEE0A !important;  /* alebo #e5e8eb podľa tvojej témy */
  border: 0 !important;
  padding: 0.2em 0 !important;
}

/* === Thin yellow frame around images (global) === */
:root { --accent: #f2bd00; } /* ak už máš, nechaj svoju hodnotu */

figure[typeof*="mw:File"] img.mw-file-element,
.mw-parser-output .thumb .thumbimage,
.gallerybox .thumb img {
  border: 1px solid var(--accent) !important;   /* tenký žltý rámik */
  border-radius: 6px;                            /* ak chceš rovné, zmaž */
  background: transparent !important;
  box-shadow: none !important;
}

/* voliteľne jemný hover efekt */
figure[typeof*="mw:File"] img.mw-file-element:hover,
.mw-parser-output .thumb .thumbimage:hover,
.gallerybox .thumb img:hover {
  box-shadow: 0 0 0 1px rgba(242,189,0,.25), 0 0 10px rgba(242,189,0,.15) !important;
}

/* Random teaser card */
.random-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  align-items: center;
  background: #0f1012;
  border: 1px solid #2a2d33;
  border-radius: 8px;
  padding: 12px;
  margin: 8px 0 16px 0;
  color: #e5e8eb;
}
.random-card.loading { opacity: .7; }
.random-card .thumb {
  width: 120px; height: 120px; overflow: hidden; border-radius: 6px;
  background: #0b0c0d; display: flex; align-items: center; justify-content: center;
  border: 1px solid #2a2d33;
}
.random-card .thumb img { max-width: 100%; height: auto; display: block; }
.random-card .content h3 {
  margin: 0 0 6px 0; font-size: 1.1rem; line-height: 1.2;
}
.random-card .content p {
  margin: 0 0 8px 0; color: #a9b0b8;
}
.random-card .actions {
  display: flex; gap: 8px; margin-top: 6px;
}
.random-card .btn {
  border: 1px solid #2a2d33; padding: 4px 8px; border-radius: 6px;
  background: #14161a; color: #e5e8eb; cursor: pointer; text-decoration: none;
}
.random-card .btn:hover { background: #15191f; }
@media (max-width: 600px){
  .random-card { grid-template-columns: 1fr; }
  .random-card .thumb { width: 100%; height: auto; }
}


/* ===== Main page – compact header ===== */
.mp-hero {
  display: grid;
  grid-template-columns: 2fr 1.2fr;
  gap: 12px;
  align-items: stretch;
  margin: 6px 0 12px;
}
@media (max-width: 900px){
  .mp-hero { grid-template-columns: 1fr; }
}

/* Random teaser – compact variant */
.random-card.compact{
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
  align-items: center;
  background:#0f1012;
  border:1px solid #2a2d33;
  border-radius:8px;
  padding:10px;
  margin:0;
}
.random-card.compact .thumb{
  width:110px; height:110px; overflow:hidden;
  border-radius:6px; border:1px solid #2a2d33;
  display:flex; align-items:center; justify-content:center;
}
.random-card.compact .thumb img{ max-width:100%; height:auto; display:block; }
.random-card.compact .content h3{ margin:0 0 4px; font-size:1.05rem; line-height:1.2; }
.random-card.compact .content p{ margin:0 0 6px; color:#a9b0b8; max-height:3.2em; overflow:hidden; }
.random-card.compact .actions{ display:flex; gap:6px; }
.random-card.compact .btn{
  border:1px solid #2a2d33; padding:3px 7px; border-radius:6px;
  background:#14161a; color:#e5e8eb; text-decoration:none; cursor:pointer;
}
.random-card.compact .btn:hover{ background:#15191f; }

/* Quick cards (replace the big wikitable) */
.mp-cards{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
@media (max-width: 900px){ .mp-cards{ grid-template-columns: 1fr; } }
.mp-card{
  background:#0f1012;
  border:1px solid #2a2d33;
  border-radius:8px;
  padding:10px 12px;
}
.mp-card h4{ margin:0 0 6px; font-size:1rem; color:#f2bd00; }
.mp-card p{ margin:0; line-height:1.45; }
.mp-card a{ text-decoration:none; }

/* Thin stats bar under hero */
.mp-strip{
  display:flex; flex-wrap:wrap; gap:10px;
  padding:8px 10px; margin: 6px 0 12px;
  border:1px solid #2a2d33; border-radius:8px; background:#0f1012;
  font-size: .95rem;
}
.mp-chip{
  padding:3px 8px; border:1px solid #2a2d33; border-radius:999px;
  background:#14161a;
}

/* Smaller gaps */
#firstHeading { margin-bottom: 6px; }
.mw-body-content .toc { margin-top: 8px; }

/* ===== Compact Main Page layout ===== */
#firstHeading{ margin-bottom:6px; }
.mw-body-content .toc{ margin:8px 0 14px; }

/* Hero: 2-stĺpcová mriežka (teaser + karty) */
.mp-hero{
  display:grid; grid-template-columns: 2fr 1.2fr;
  gap:12px; align-items:stretch; margin:6px 0 12px;
}
@media (max-width: 1000px){ .mp-hero{ grid-template-columns:1fr; } }

/* Random teaser – kompaktná karta */
.random-card.compact{
  display:grid; grid-template-columns:110px 1fr; gap:10px; align-items:center;
  background:#0f1012; border:1px solid #2a2d33; border-radius:8px;
  padding:10px; margin:0;
}
.random-card.compact .thumb{
  width:110px;height:110px;overflow:hidden;border-radius:6px;
  border:1px solid #2a2d33;display:flex;align-items:center;justify-content:center;
}
.random-card.compact .thumb img{ max-width:100%; height:auto; display:block; }
.random-card.compact .content h3{ margin:0 0 4px; font-size:1.05rem; line-height:1.2; }
.random-card.compact .content p{ margin:0 0 6px; color:#a9b0b8; max-height:3.2em; overflow:hidden; }
.random-card.compact .actions{ display:flex; gap:6px; flex-wrap:wrap; }
.random-card.compact .btn{
  border:1px solid #2a2d33; padding:3px 7px; border-radius:6px;
  background:#14161a; color:#e5e8eb; text-decoration:none; cursor:pointer;
}
.random-card.compact .btn:hover{ background:#15191f; }

/* 4 „quick cards“ vpravo */
.mp-cards{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width: 520px){ .mp-cards{ grid-template-columns:1fr; } }
.mp-card{
  background:#0f1012; border:1px solid #2a2d33; border-radius:8px; padding:10px 12px;
}
.mp-card h4{ margin:0 0 6px; font-size:1rem; color:#f2bd00; }
.mp-card p{ margin:0; line-height:1.45; }
.mp-card a{ text-decoration:none; }

/* Tenký „chips“ pásik pod hero */
.mp-strip{
  display:flex;flex-wrap:wrap;gap:10px; padding:8px 10px;margin:6px 0 14px;
  border:1px solid #2a2d33;border-radius:8px;background:#0f1012;font-size:.95rem;
}
.mp-chip{ padding:3px 8px;border:1px solid #2a2d33;border-radius:999px;background:#14161a; }

/* Infobox & TOC – menšie medzery, aby stránka pôsobila kompaktne */
.infobox, .portable-infobox{ margin-top:4px !important; }
.toc ul{ margin-top:4px; }

/* Voliteľne: zruš neočakávané biele okraje okolo obrázkov */
.mw-parser-output .thumb, .mw-parser-output .thumb .thumbinner,
.mw-parser-output .thumb .thumbimage, .mw-parser-output img.mw-file-element{
  background:transparent!important; border:0!important; padding:0!important; box-shadow:none!important;
}
/* Cyberpunk systémové požiadavky – žlté mriežky */
.article-table-cyberpunk {
  border-collapse: collapse;            /* jedna linka medzi bunkami */
  width: 100%;
  table-layout: auto;
  background: #0b0b0b;                  /* tmavé pozadie (prispôsobte téme) */
  color: #e6e6e6;
  border: 2px solid #ffd400;            /* vonkajší rám tabuľky */
  border-radius: 6px;                   /* voliteľné: jemné zaoblenie */
  overflow: hidden;                     /* aby sa zaoblenie prejavilo */
}

.article-table-cyberpunk th,
.article-table-cyberpunk td {
  border: 1.5px solid #ffd400;          /* žlté čiary pre riadky aj stĺpce */
  padding: 6px 10px;
  vertical-align: middle;
  text-align: center;
}

.article-table-cyberpunk th {
  background: #151515;                  /* header mierne svetlejší */
  font-weight: 600;
  color: #fff8b3;                       /* jemne žltkastý text hlavičky */
}

@media (max-width: 768px) {
  /* voliteľné: horizontálny scroll na mobile */
  .article-table-cyberpunk {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* Cyberpunk systémové požiadavky – žltá mriežka */
.article-table-cyberpunk {
  border-collapse: collapse;
  width: 100%;
  table-layout: auto;
  background: #0b0b0b;
  color: #e6e6e6;
  border: 2px solid #ffcc00;        /* hrubý vonkajší rám */
}

.article-table-cyberpunk th,
.article-table-cyberpunk td {
  border: 2px solid #ffcc00;        /* hrubšie a jasne žlté čiary */
  padding: 8px 12px;
  vertical-align: middle;
  text-align: center;
}

.article-table-cyberpunk th {
  background: #151515;
  font-weight: 700;
  color: #fff7a0;                   /* jemne žltkastý text hlavičky */
  border: 2.5px solid #ffcc00;      /* ešte o niečo výraznejší okraj */
}

/* Cyberpunk systémové požiadavky – výrazné žlté okraje */
.article-table-cyberpunk {
  border-collapse: collapse;
  width: 100%;
  background: #0b0b0b;
  color: #f5f5f5;
  border: 2px solid #ffff00;   /* silná jasná žltá */
}

.article-table-cyberpunk th,
.article-table-cyberpunk td {
  border: 3px solid #ffff00;   /* hrubšie čiary vnútri tabuľky */
  padding: 8px 12px;
  text-align: center;
  vertical-align: middle;
}

.article-table-cyberpunk th {
  background: #1a1a1a;
  font-weight: bold;
  color: #fffcc0;              /* žltkastý text v hlavičke */
}
/* === Cyberpunk table: tvrdé, jasné žlté mriežky === */
:root { --cp-yellow: #ffff00; }  /* čistá žltá */

.article-table-cyberpunk,
.article-table-cyberpunk th,
.article-table-cyberpunk td {
  border-style: solid !important;
  border-color: var(--cp-yellow) !important;
}

/* používaj separate, nech sa nebijú „collapsnuté“ okraje so skinom */
.article-table-cyberpunk {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: #0b0b0b;
  color: #f5f5f5;
  border-width: 2px !important;       /* vonkajší rám */
}

/* vnútorná mriežka */
.article-table-cyberpunk th,
.article-table-cyberpunk td {
  border-width: 3px !important;
  padding: 8px 12px;
  text-align: center;
  vertical-align: middle;
  background-clip: padding-box;        /* žltá nepresvitá cez pozadie */
}

/* hlavičky – trochu odlíšiť, ale hrana stále jasne žltá */
.article-table-cyberpunk th {
  background: #1a1a1a;
  color: #fffcc0;
  font-weight: 700;
}

/* ak skin pridáva vlastné linky/okraje, prebijeme ešte tieto selektory */
.skin-vector .article-table-cyberpunk th,
.skin-vector .article-table-cyberpunk td,
.skin-timeless .article-table-cyberpunk th,
.skin-timeless .article-table-cyberpunk td {
  border-color: var(--cp-yellow) !important;
}

/* voliteľne “neón” efekt – pridaj, ak chceš aby to ešte viac svietilo */
.article-table-cyberpunk th,
.article-table-cyberpunk td {
  box-shadow: inset 0 0 0 0 var(--cp-yellow), 0 0 0 0 var(--cp-yellow);
}
/* === Cyberpunk table: tenšie žlté mriežky === */
:root { --cp-yellow: #ffff00; }  /* čistá žltá */

.article-table-cyberpunk,
.article-table-cyberpunk th,
.article-table-cyberpunk td {
  border-style: solid !important;
  border-color: var(--cp-yellow) !important;
}

/* separate -> žiadne konflikty */
.article-table-cyberpunk {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: #0b0b0b;
  color: #f5f5f5;
  border-width: 2px !important;     /* vonkajší rám (tenší) */
}

.article-table-cyberpunk th,
.article-table-cyberpunk td {
  border-width: 1px !important;     /* jemné žlté línie medzi bunkami */
  padding: 6px 10px;
  text-align: center;
  vertical-align: middle;
  background-clip: padding-box;
}

.article-table-cyberpunk th {
  background: #1a1a1a;
  color: #fffcc0;
  font-weight: 600;
}

/* Cyberpunk table – menšie písmo */
.article-table-cyberpunk th,
.article-table-cyberpunk td {
  font-size: 13px !important;   /* univerzálne menšie písmo */
  line-height: 1.3em;           /* nech sa text stále ľahko číta */
  padding: 5px 8px;             /* zmenšené odsadenie aby to sedelo k fontu */
}
Retrieved from "https://wiki.cbrpnk.eu/index.php?title=MediaWiki:Common.css&oldid=27388"