Template:Wikipedia/styles.css: Difference between revisions
Template page
More actions
m Empirically align the Wikipedia icon with the link text |
m Make the Wikipedia icon white by default (dark mode is the majority case), black in light mode |
||
| Line 9: | Line 9: | ||
.loka-wikipedia-icon img { | .loka-wikipedia-icon img { | ||
vertical-align: -1.5px; | vertical-align: -1.5px; | ||
/* The source SVG (File:Wikipedia icon.svg) is solid black -- inverted | |||
to white by default since the wiki defaults to dark mode and most | |||
visitors stay on it, so a black icon would be nearly invisible. | |||
invert(1) is exact for a pure black-on-transparent glyph like this | |||
one (turns #000 into #fff with no partial/off-white artifacts). */ | |||
filter: invert(1); | |||
} | |||
@media (prefers-color-scheme: light) { | |||
.loka-wikipedia-icon img { | |||
filter: none; | |||
} | |||
} | } | ||
Latest revision as of 21:33, 19 August 2026
.loka-wikipedia-link {
display: inline;
}
/* Empirically measured against the live rendered text/icon (same method
as the YouTube/Twitch/Loka/Challonge-bracket icons) -- vertical-align:
middle left it 1.4px high; this is the exact value that lines up the
icon's centre with the text's centre. */
.loka-wikipedia-icon img {
vertical-align: -1.5px;
/* The source SVG (File:Wikipedia icon.svg) is solid black -- inverted
to white by default since the wiki defaults to dark mode and most
visitors stay on it, so a black icon would be nearly invisible.
invert(1) is exact for a pure black-on-transparent glyph like this
one (turns #000 into #fff with no partial/off-white artifacts). */
filter: invert(1);
}
@media (prefers-color-scheme: light) {
.loka-wikipedia-icon img {
filter: none;
}
}