MediaWiki:Timeless.css
From Protochroma Wiki
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)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
:root { --bg-darkest: #202020; --bg-dark: #585858; --bg-middle: #A9A9A9; --bg-light: #D0D0D0; --bg-lightest: #FFFFFF; --ac-border: #1E90FF; --ac-link: #00FFFF; --ac-text: #FFFFFF; --g-text: #000000; --g-link: #000080; --g-link-hover: #0000CD; --g-bwtag-hover: #00FFFF; --g-highlight: #B0C4DE; --g-border: #000000; --g-overlay: rgba(140, 140, 140, 0.5); --svg-sm: #000000; } body { background: var(--bg-middle); } a:link, a:visited { color: var(--g-link); } a:focus, a:hover { color: var(--g-link-hover); } #mw-content-container { background: var(--bg-darkest); border-bottom: none; } #mw-content { background: var(--bg-light); padding: .5em 1em 1em; } #mw-content-wrapper { background: var(--bg-light); } #mw-header-container { background: var(--bg-middle); } #mw-site-navigation .sidebar-chunk, #mw-related-navigation .sidebar-chunk, .dropdown, #personal .dropdown { border-left: 3px solid var(--ac-border); background-image: linear-gradient(to right, var(--bg-darkest), var(--bg-dark)); } li.mw-list-item > a:link, li.mw-list-item > a:visited, .mw-portlet-body > ul > li > a:link, .mw-portlet-body > ul > li > a:visited { color: var(--ac-link); } li.mw-list-item > a:hover, li.mw-list-item > a:focus, .mw-portlet-body > ul > li > a:hover, .mw-portlet-body > ul > li > a:focus { color: var(--ac-text); } #mw-portlet { color: var(--ac-text); } .sidebar-inner, #p-personal { color: var(--ac-text); } /* #p-namespaces, #p-views, #p-more { background: var(--bg-dark); } */ .tools-inline > .mw-portlet-body > ul > .mw-list-item > a:link, .tools-inline > .mw-portlet-body > ul > .mw-list-item > a:hover { color: var(--g-link); } .tools-inline > .mw-portlet-body > ul > .mw-list-item > a:link, .tools-inline > .mw-portlet-body > ul > .mw-list-item > a:hover { color: var(--g-link); } .tools-inline li.selected a:visited, .tools-inline li.selected a:hover { color: var(--g-link) !important; } .tools-inline li:hover { border-bottom-color: var(--ac-border); } .tools-inline li.selected { border-bottom-color: var(--ac-border); } @media screen and (max-width: 850px) { #site-navigation .sidebar-inner, .dropdown, #personal .dropdown, .sidebar-inner { border-left: 3px solid var(--ac-border); background-image: linear-gradient(to right, var(--bg-darkest), var(--bg-dark)); } } .mw-footer-container { color: var(--g-text); background: var(--bg-middle); } .mw-footer-container a:visited, .mw-footer-container a:link { color: var(--g-link); } .mw-footer-container a:hover, .mw-footer-container a:focus, .mw-footer-container a:visited:hover { color: var(--g-link-hover); } .color-middle, .color-right, .color-left { background: var(--bg-dark); } @media screen { #p-logo-text a.long { font-size: 1.5em; padding: 0 0.75em 0 0; line-height: 1.25; } #p-logo-text a { font-family: 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif; } } /* Snippets */ /* Top bar font modernization */ #mw-header *, #mw-site-navigation *, #mw-related-navigation * { font-family: 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif } /* Avoid cutting off letters with descenders: g,j,p,q,y */ #personal h2 span { height: 1.5em; position:relative; bottom:0.1em }