MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
| (10 intermediate revisions by the same user not shown) | |||
| Line 790: | Line 790: | ||
.oo-ui-textInputWidget textarea::placeholder { | .oo-ui-textInputWidget textarea::placeholder { | ||
color: #8a8a8a !important; | color: #8a8a8a !important; | ||
} | |||
/* === Fix bielych pozadí v MediaWiki === */ | |||
/* Hlavný obsah */ | |||
.mw-body, | |||
.mw-parser-output, | |||
body, | |||
html { | |||
background: var(--bg-primary) !important; | |||
color: var(--text-primary) !important; | |||
} | |||
/* Tabuľky */ | |||
.wikitable, | |||
.mw-parser-output table, | |||
.mw-parser-output th, | |||
.mw-parser-output td { | |||
background: var(--bg-secondary) !important; | |||
border: 1px solid var(--accent-yellow) !important; | |||
color: var(--text-primary) !important; | |||
} | |||
/* Infoboxy a bočné boxy */ | |||
.infobox, | |||
.navbox, | |||
.toc, | |||
.mw-warning, | |||
.mw-message-box, | |||
.mw-body-content { | |||
background: var(--bg-secondary) !important; | |||
color: var(--text-primary) !important; | |||
border: 1px solid var(--accent-yellow) !important; | |||
} | |||
/* Transcript a preformatovaný text */ | |||
pre, | |||
code, | |||
blockquote { | |||
background: var(--bg-tertiary) !important; | |||
color: var(--text-secondary) !important; | |||
border: 1px solid var(--accent-yellow) !important; | |||
padding: 0.5em; | |||
} | |||
/* Hlavičky a nadpisy */ | |||
h1, h2, h3, h4, h5, h6 { | |||
background: transparent !important; | |||
color: var(--accent-yellow) !important; | |||
} | |||
/* Linky */ | |||
a, | |||
a:visited { | |||
color: var(--link-color) !important; | |||
} | |||
/* === Fix white bar on categories (#catlinks) === */ | |||
#catlinks, | |||
#catlinks .mw-normal-catlinks, | |||
.skin-vector #catlinks, | |||
.skin-vector-2022 #catlinks, | |||
.skin-monobook #catlinks, | |||
.skin-timeless #catlinks { | |||
background: var(--bg-secondary) !important; | |||
color: var(--text-primary) !important; | |||
border: 1px solid var(--accent-yellow) !important; | |||
border-radius: 8px !important; | |||
padding: 6px 10px !important; | |||
box-shadow: none !important; | |||
} | |||
/* Inline list, no bullets, no extra gaps */ | |||
#catlinks ul { | |||
list-style: none !important; | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
display: inline !important; | |||
} | |||
#catlinks li { | |||
display: inline !important; | |||
margin: 0 .6em 0 0 !important; | |||
} | |||
/* Links/colors */ | |||
#catlinks a, | |||
#catlinks a:visited { | |||
color: var(--link-color) !important; | |||
background: transparent !important; | |||
text-decoration: none; | |||
} | |||
#catlinks a:hover { text-decoration: underline; } | |||
/* Remove any inherited white backgrounds from descendants */ | |||
#catlinks * { | |||
background-color: transparent !important; | |||
} | |||
/* 2025 09 05 - 15 08 */ | |||
/***** LAYOUT & TYPO *****/ | |||
.mw-body, .mw-parser-output { line-height: 1.5; } | |||
.mw-parser-output img, .mw-parser-output video, .mw-parser-output .thumb img { | |||
max-width: 100% !important; height: auto !important; | |||
} | |||
/***** INFOBOX A PRAVÝ STĹPEC *****/ | |||
.infobox, .portable-infobox { | |||
float: right; | |||
width: 320px; max-width: 100%; | |||
margin: .5rem 0 .75rem .75rem; | |||
background: var(--bg-secondary) !important; | |||
border: 1px solid var(--accent-yellow) !important; | |||
} | |||
@media (max-width: 1100px) { | |||
.infobox, .portable-infobox { float:none; margin:.75rem 0; } | |||
} | |||
/***** TABUĽKY – PRETEKANIE DOPRAVA *****/ | |||
/* 1) Každú wiki tabuľku sprav ako blok s horizontálnym scrollom */ | |||
.mw-parser-output .wikitable, | |||
.mw-parser-output table.prettytable, | |||
.mw-parser-output table { | |||
display: block; /* umožní overflow-x */ | |||
max-width: 100%; | |||
overflow-x: auto; /* scroll pri úzkych viewportoch */ | |||
-webkit-overflow-scrolling: touch; | |||
box-sizing: border-box; | |||
clear: both; /* nenechaj ju „napchávať sa“ vedľa infoboxu */ | |||
border-collapse: collapse; | |||
background: var(--bg-secondary) !important; | |||
border: 1px solid var(--accent-yellow) !important; | |||
} | |||
/* 2) Rozumné lámanie dlhých slov/URL a stabilná šírka stĺpcov */ | |||
.mw-parser-output .wikitable th, | |||
.mw-parser-output .wikitable td, | |||
.mw-parser-output table th, | |||
.mw-parser-output table td { | |||
white-space: normal !important; /* zabrání nekonečným riadkom */ | |||
overflow-wrap: anywhere; /* láme veľmi dlhé slová/URL */ | |||
word-break: break-word; | |||
hyphens: auto; | |||
padding: .4rem .5rem; | |||
border: 1px solid var(--accent-yellow) !important; | |||
} | |||
/* 3) Pri tabuľkách s veľa stĺpcami zrýchli layout */ | |||
.mw-parser-output .wikitable { table-layout: fixed; } | |||
/***** TOC, QUOTES, PRE/ CODE *****/ | |||
#toc, .toc { | |||
background: var(--bg-secondary) !important; | |||
border: 1px solid var(--accent-cyan) !important; | |||
} | |||
pre, code, blockquote { | |||
background: var(--bg-tertiary) !important; | |||
color: var(--text-secondary) !important; | |||
border: 1px solid var(--accent-yellow) !important; | |||
padding: .5rem .6rem; | |||
max-width: 100%; | |||
overflow: auto; /* dlhé riadky nech sa scrollujú, nie rozbíjajú layout */ | |||
} | |||
/***** DOLADENIE ROZHRANIA *****/ | |||
/* Kategórie – už máš, ale doplním drobnosti pre konzistenciu */ | |||
#catlinks, #catlinks * { background: transparent !important; } | |||
#catlinks { background: var(--bg-secondary) !important; border:1px solid var(--accent-cyan) !important; } | |||
/* Mini fixy pre systémové boxy a message bannery */ | |||
.mw-message-box, .mw-warning, .mw-notification { | |||
background: var(--bg-secondary) !important; | |||
border-color: var(--accent-cyan) !important; | |||
color: var(--text-primary) !important; | |||
} | |||
/***** HRANICE A MIERKA TABULIEK *****/ | |||
.mw-parser-output .wikitable caption { color: var(--text-secondary); } | |||
.mw-parser-output .wikitable tr:nth-child(even) td { background: rgba(255,255,255,.02); } | |||
/* ************************** */ | |||
/***** TEXT – lepšia čitateľnosť *****/ | |||
.mw-body, | |||
.mw-parser-output p, | |||
.mw-parser-output li { | |||
max-width: 900px; /* obmedz šírku odstavcov na čitateľnú mieru */ | |||
margin-left: auto; | |||
margin-right: auto; | |||
line-height: 1.65; /* vzdušnejšie riadkovanie */ | |||
font-size: 15px; /* o trochu väčší, kompaktnejší text */ | |||
letter-spacing: 0.2px; /* jemné rozšírenie písma pre cyberpunk vzhľad */ | |||
color: var(--text-primary); | |||
} | |||
/* Tighter spacing pre headings */ | |||
.mw-parser-output h1, | |||
.mw-parser-output h2, | |||
.mw-parser-output h3 { | |||
margin-top: 1.6em; | |||
margin-bottom: 0.6em; | |||
line-height: 1.3; | |||
} | |||
/* Odrážky a zoznamy nech sú kompaktnejšie */ | |||
.mw-parser-output ul, | |||
.mw-parser-output ol { | |||
margin-top: 0.4em; | |||
margin-bottom: 0.8em; | |||
padding-left: 1.4em; | |||
} | |||
/* ============================================================================================== */ | |||
/* === TYPO RESET: jednotná veľkosť a odsadenie === */ | |||
.mw-body, | |||
.mw-parser-output { | |||
--font-body: 15.5px; | |||
--lh: 1.65; | |||
--space-xxs: .25rem; | |||
--space-xs: .4rem; | |||
--space-sm: .6rem; | |||
--space-md: .9rem; | |||
font-size: var(--font-body); | |||
line-height: var(--lh); | |||
} | |||
/* Bežný text (odstavce, zoznamy, definície) – všade rovnaké */ | |||
.mw-parser-output p, | |||
.mw-parser-output li, | |||
.mw-parser-output dd, | |||
.mw-parser-output dt, | |||
.mw-parser-output blockquote, | |||
.mw-parser-output pre, | |||
.mw-parser-output code, | |||
.mw-parser-output table, | |||
.mw-parser-output .infobox, | |||
.mw-parser-output .portable-infobox, | |||
.mw-parser-output .toc, | |||
.mw-parser-output .navbox, | |||
.mw-parser-output .mw-message-box { | |||
font-size: 1em; /* žiadne zmenšovanie/zväčšovanie */ | |||
line-height: var(--lh); /* jednotné riadkovanie */ | |||
} | |||
/* Konzistentné okraje bežných prvkov */ | |||
.mw-parser-output p { margin: 0 0 var(--space-sm); } | |||
.mw-parser-output ul, | |||
.mw-parser-output ol { margin: var(--space-xs) 0 var(--space-sm); padding-left: 1.4em; } | |||
.mw-parser-output li { margin: 0 0 var(--space-xxs); } | |||
.mw-parser-output dl { margin: var(--space-xs) 0 var(--space-sm); } | |||
.mw-parser-output dt { font-weight: 600; margin-top: var(--space-xxs); } | |||
.mw-parser-output dd { margin-left: 1.1em; } | |||
/* Nadpisy – rovnaké medzery nad/pod a mierka */ | |||
.mw-parser-output h1 { font-size: 1.9em; margin: 1.2em 0 .55em; line-height: 1.25; } | |||
.mw-parser-output h2 { font-size: 1.55em; margin: 1.1em 0 .5em; line-height: 1.28; } | |||
.mw-parser-output h3 { font-size: 1.3em; margin: 1.0em 0 .45em; line-height: 1.3; } | |||
.mw-parser-output h4 { font-size: 1.12em; margin: .9em 0 .4em; line-height: 1.35; } | |||
.mw-parser-output h5, | |||
.mw-parser-output h6 { font-size: 1em; margin: .8em 0 .35em; } | |||
/* TOC, infobox, tabuľky – nech neprepisujú typografiu */ | |||
.mw-parser-output #toc, | |||
.mw-parser-output .toc, | |||
.mw-parser-output .infobox, | |||
.mw-parser-output .portable-infobox, | |||
.mw-parser-output .wikitable, | |||
.mw-parser-output table { | |||
margin-top: var(--space-sm); | |||
margin-bottom: var(--space-md); | |||
} | |||
/* Obrázky a popisky – mierne kompaktnejšie, ale stále čitateľné */ | |||
.mw-parser-output .thumb .thumbcaption, | |||
.mw-parser-output figcaption { font-size: .95em; line-height: var(--lh); } | |||
/* Poznámky a referencie – jednotné medzery */ | |||
.mw-parser-output .references li { margin: 0 0 var(--space-xxs); line-height: var(--lh); } | |||
.mw-parser-output .reference { font-size: .95em; } | |||
/* Zaruč rovnakú veľkosť textu aj v tabuľkách/infoboxe */ | |||
.mw-parser-output .wikitable th, | |||
.mw-parser-output .wikitable td, | |||
.mw-parser-output .infobox td, | |||
.mw-parser-output .infobox th { font-size: 1em; line-height: var(--lh); padding: .4rem .5rem; } | |||
/* Zbytočne „zmenšené“ systémové prvky narovnaj */ | |||
#catlinks, .mw-notification, .mw-warning, .hatnote, .dablink { font-size: 1em; line-height: var(--lh); } | |||
/* Voliteľné: obmedz čitateľnú šírku bežného textu (bez tabuliek/infoboxu) */ | |||
.mw-parser-output > p, | |||
.mw-parser-output > ul, | |||
.mw-parser-output > ol, | |||
.mw-parser-output > dl, | |||
.mw-parser-output > blockquote { | |||
max-width: 900px; | |||
margin-left: auto; | |||
margin-right: auto; | |||
} | |||
/* - ------------------------------------------------------------------------------ */ | |||
/* === Fix obtekania obrázkov === */ | |||
.mw-parser-output .thumb, | |||
.mw-parser-output .floatleft, | |||
.mw-parser-output .floatright, | |||
.mw-parser-output .infobox, | |||
.mw-parser-output .portable-infobox { | |||
margin: 0.5rem 1.2rem 0.8rem 1.2rem !important; /* väčšie odsadenie zo všetkých strán */ | |||
} | |||
/* Ak je obrázok vľavo, nech má extra priestor vpravo */ | |||
.mw-parser-output .floatleft, | |||
.mw-parser-output .thumb.tright { | |||
margin-right: 1.5rem !important; | |||
} | |||
/* Ak je obrázok vpravo, nech má extra priestor vľavo */ | |||
.mw-parser-output .floatright, | |||
.mw-parser-output .thumb.tleft, | |||
.mw-parser-output .infobox, | |||
.mw-parser-output .portable-infobox { | |||
margin-left: 1.5rem !important; | |||
} | |||
/* Popisky pod obrázkami nech sú kompaktnejšie, ale čitateľné */ | |||
.mw-parser-output .thumbcaption { | |||
font-size: 0.95em; | |||
line-height: 1.5; | |||
margin-top: 0.3rem; | |||
} | |||
/* Väčšie medzery okolo plávajúcich prvkov */ | |||
.mw-parser-output .thumb, | |||
.mw-parser-output .floatleft, | |||
.mw-parser-output .floatright, | |||
.mw-parser-output .infobox, | |||
.mw-parser-output .portable-infobox { | |||
margin-top: .5rem !important; | |||
margin-bottom: .8rem !important; | |||
} | |||
/* Obrázok vľavo → priestor vpravo */ | |||
.mw-parser-output .thumb.tleft, | |||
.mw-parser-output .floatleft { | |||
margin-left: 0 !important; | |||
margin-right: 1.6rem !important; | |||
} | |||
/* Obrázok vpravo (aj infobox) → priestor vľavo */ | |||
.mw-parser-output .thumb.tright, | |||
.mw-parser-output .floatright, | |||
.mw-parser-output .infobox, | |||
.mw-parser-output .portable-infobox { | |||
margin-right: 0 !important; | |||
margin-left: 1.6rem !important; | |||
} | |||
/* Jemný vnútorný odstup v rámci rámčeka thumb */ | |||
.mw-parser-output .thumb .thumbinner { | |||
padding: .25rem !important; | |||
} | |||
/* Pri tabulkách: viac priestoru medzi stĺpcami s textom */ | |||
.mw-parser-output table td, | |||
.mw-parser-output table th { | |||
padding: 0.75rem 0.9rem !important; | |||
vertical-align: top; /* text hore vedľa obrázka */ | |||
} | |||
/* Extra ľavé odsadenie pre každý nasledujúci stĺpec v riadku */ | |||
.mw-parser-output table td + td, | |||
.mw-parser-output table th + td, | |||
.mw-parser-output table th + th { | |||
padding-left: 1.25rem !important; /* toto vytvorí medzeru od obrázka */ | |||
} | |||
/* Ak je v bunke obrázok, nech je jemný odstup od rámu bunky */ | |||
.mw-parser-output table td img, | |||
.mw-parser-output table td .thumb { | |||
margin: 0.2rem 0.2rem 0.2rem 0.2rem !important; | |||
max-width: 100%; | |||
height: auto; | |||
} | |||
/* Odstránenie bielych pozadí z RecentChanges */ | |||
.mw-body, | |||
.mw-body-content, | |||
.rcfilters-head, | |||
.mw-changeslist-legend, | |||
.mw-changeslist, | |||
.mw-specialpage-summary { | |||
background: transparent !important; | |||
color: var(--text-primary, #fff) !important; | |||
} | |||
.mw-changeslist-legend, | |||
.rcfilters-head { | |||
border: 1px solid #333 !important; | |||
} | |||
/* Fix bielych rámikov v Live updates / filteroch */ | |||
.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper, | |||
.oo-ui-menuSelectWidget, | |||
.oo-ui-tagMultiselectWidget-handle { | |||
background-color: #111 !important; | |||
color: #fff !important; | |||
} | } | ||