User:GA Kevin/vector-2022.css
Jump to navigation
Jump to search
Note: After publishing, 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)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* 1) Import your font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:wght@200;400;600;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono&display=swap');
/* 2) Apply it globally */
body, #mw-wrapper, #content, h1, h2, h3, h4, h5, h6,
.mw-headline {
font-family: 'Atkinson Hyperlegible Next', sans-serif !important;
}
#wpTextbox1,
.CodeMirror,
.CodeMirror pre {
font-family: 'Atkinson Hyperlegible Mono', monospace !important;
}
/* make the page background black and text light */
body, #mw-wrapper, #content {
background-color: #000 !important;
color: #eee !important;
}
/* adjust link colors so they’re readable */
a, a:visited {
color: #728CE3;
}
a.external {
color: #EDB88B;
}
a:hover {
color: #728CE3;
}
.taginfo-status {
background-color: transparent !important;
/* optionally tweak padding if you no longer need the “pill” shape */
/* padding: 0.1em 0.4em !important; */
}
/* 2) Then colour the text based on each status */
.taginfo-status.in-use {
color: #28a745 !important; /* green */
}
.taginfo-status.defacto {
color: #007bff !important; /* blue */
}
.taginfo-status.deprecated {
color: #ffae42 !important; /* orange */
}
.taginfo-status.obsolete {
color: #dc3545 !important; /* red */
}
.taginfo-status.discardable {
color: #6c757d !important; /* gray */
}
.taginfo-status.unspecified,
.taginfo-status.undefined,
.taginfo-status.unknown {
color: #343a40 !important; /* dark */
}
.taginfo-status.imported {
color: #17a2b8 !important; /* teal */
}
/* 3) Hover states (optional) */
.taginfo-status.in-use:hover { color: #218838 !important; }
.taginfo-status.deprecated:hover { color: #e69a30 !important; }
/* ensure nav bars, tables, captions, etc., stay readable */
.mw-body-content, .navbox, .infobox, table, caption {
color: #ddd !important;
}