User:Lysdexic/common.css
Jump to navigation
Jump to search
In other languages: Čeština • Deutsch • Español • Eesti • Français • Italiano • 日本語 • Polski • Português do Brasil • Русский • Türkçe • 中文
CSS and Javascript changes must comply with the wiki design rules.
Note: After saving, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
@media (prefers-color-scheme: dark) {
/* Invert all elements on the body while attempting to not alter the hue substantially. */
body {
filter: invert(90%) hue-rotate(180deg);
}
/* Workarounds and optical adjustments. */
/*
Firefox workaround: Set the background colour for the html
element separately because, unlike other browsers, Firefox
doesn’t apply the filter to the root element’s background.
*/
html {
background-color: #333;
}
/* Do not invert media (revert the invert). */
img, video, iframe, svg {
filter: invert(100%) hue-rotate(180deg);
}
/*
Videos running fullscreen are no longer affected by the
filter on the body so we need to also unset the
revert we applied earlier so we’re left with no filter again.
*/
video:fullscreen {
filter: none;
}
/* Improve contrast on icons. */
.icon {
filter: invert(15%) hue-rotate(180deg);
}
/* Re-enable code block backgrounds. */
pre {
filter: invert(6%);
}
/* Improve contrast on list item markers. */
li::marker {
color: #666;
}
}