MediaWiki:Vector.css: Difference between revisions
Jump to navigation
Jump to search
(Fix syntax) |
m (Reorder.) |
||
| Line 1: | Line 1: | ||
/* CSS placed here will affect users of the Vector skin */ | /* CSS placed here will affect users of the Vector skin */ | ||
html { | html { | ||
| Line 708: | Line 663: | ||
body.theme-light .gallery.bg3wiki-gallery-drop-shadow img { | body.theme-light .gallery.bg3wiki-gallery-drop-shadow img { | ||
filter: drop-shadow(0 0 2px black); | filter: drop-shadow(0 0 2px black); | ||
} | |||
/* | |||
CSS tooltip implementation. Usage in markup: | |||
<some-element aria-label="tooltip text here"> | |||
normal text | |||
</some-element> | |||
*/ | |||
[aria-label]:hover, [aria-label]:focus {position: relative} | |||
[aria-label]:hover::after, | |||
[aria-label]:focus::after { | |||
position: absolute; | |||
white-space: pre; | |||
line-height: 1; | |||
padding: 0.3rem; | |||
content: attr(aria-label); | |||
background-color: var(--aria-label-tooltip-bg); | |||
color: var(--aria-label-tooltip-fg); | |||
border: var(--aria-label-tooltip-border); | |||
text-decoration: unset; | |||
/* See optional override below. */ | |||
bottom: 100%; | |||
left: 0; | |||
} | |||
/* Changes the tooltip position. */ | |||
[aria-label].aria-label-top-rig:hover::after, | |||
[aria-label].aria-label-top-rig:focus::after { | |||
bottom: 100%; | |||
left: unset; | |||
right: 0; | |||
} | |||
/* Optional class for indicating tooltip presence via underline. */ | |||
.bg3wiki-help-tooltip[aria-label] { | |||
cursor: help; | |||
text-decoration-line: underline; | |||
text-decoration-style: dotted; | |||
text-decoration-thickness: 1px; | |||
text-underline-offset: calc(1ex / 2); | |||
} | } | ||