MediaWiki:Common.css: Difference between revisions
UX: yellow hover glow on links (patch step5) Tag: Reverted |
UX: fandom-like hover bar + TOC/menu block highlight (patch step6) Tag: Reverted |
||
| Line 1,728: | Line 1,728: | ||
outline-offset: 2px; | outline-offset: 2px; | ||
text-decoration: none; | 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; | |||
} | } | ||