MediaWiki:Gadget-TimelessDarkMode.css

/* Dark mode for the Timeless skin. */

@media screen and (min-width: 851px) and (max-width: 1099px) { /* in this case having a background interferes with #mw-header-nav-hack */ .skin-timeless #mw-site-navigation .sidebar-chunk, .skin-timeless #mw-related-navigation .sidebar-chunk { background: none!important; } }

@media screen and (prefers-color-scheme: dark) and (max-width: 850px) { .skin-timeless #ca-more span { background-image: url(https://files-ihaveahax-sfo3.sfo3.digitaloceanspaces.com/timeless-inverted-icons/gear-grey.svg); }	.skin-timeless #site-tools h2 { background-image: url(https://files-ihaveahax-sfo3.sfo3.digitaloceanspaces.com/timeless-inverted-icons/gear-large-grey.svg); }	.skin-timeless #user-tools h2:after, .skin-timeless .sidebar-chunk h2:after { background-image: url(https://files-ihaveahax-sfo3.sfo3.digitaloceanspaces.com/timeless-inverted-icons/arrow-down-grey.svg); }	.skin-timeless #site-navigation h2 { background-image: url(https://files-ihaveahax-sfo3.sfo3.digitaloceanspaces.com/timeless-inverted-icons/menu-large-grey.svg); } }

@media screen and (max-width: 1099px) { .skin-timeless #mw-related-navigation .sidebar-inner, .skin-timeless #mw-site-navigation .sidebar-inner { background-color: #262e39; border-color: #2f394d; } }

@media screen and (prefers-color-scheme: dark) and (min-width: 851px) and (max-width: 1099px) { .skin-timeless #mw-site-navigation h2:after, .skin-timeless #mw-related-navigation h2:after { background-image: url(https://files-ihaveahax-sfo3.sfo3.digitaloceanspaces.com/timeless-inverted-icons/arrow-down-grey.svg); }	.skin-timeless #mw-site-navigation .sidebar-chunk h2 span:after, .skin-timeless #mw-related-navigation .sidebar-inner:after { border-bottom-color: #262e39; }	.skin-timeless #mw-site-navigation .sidebar-chunk h2 span:before, .skin-timeless #mw-related-navigation .sidebar-inner:before { border-bottom-color: #2f394d; } }

@media (prefers-color-scheme: dark) { .skin-timeless { background-color: #12161b; }	.skin-timeless, .tools-inline li.selected a { color: #fff; }	.skin-timeless #mw-content-container { background: #1e2129; }	.skin-timeless #menus-cover { background-color: #1e2129; }	/* mobile stuff */ .skin-timeless #mw-header-nav-hack { background-color: #232730; border-top-color: #2f394d; }	/* some stuff needs more complicated styles, so these will be reset to black text */ .skin-timeless .mw-echo-ui-overlay, .skin-timeless .oo-ui-dialog, .oo-ui-popupWidget-popup { color: #000; }	/* header (with site name, search box, Notifications icons and username) */ .skin-timeless #mw-header-container { background: #364057; color: #fff; }	.skin-timeless #mw-content { background: #262e39; border: solid #2f394d; border-width: 1px 1px 0.2em; }	.skin-timeless #p-logo-text a { color: #fff; }	/* search input box */ .skin-timeless #simpleSearch { background: #364057; border: solid 1px #252a30; box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.1); }	.skin-timeless #searchButton, .skin-timeless #mw-searchButton { background-image: url(https://files-ihaveahax-sfo3.sfo3.digitaloceanspaces.com/timeless-inverted-icons/search-ltr.svg); }	.skin-timeless #searchInput { color: #fff; }	.skin-timeless .suggestions { /* while i test things... */		display: block!important; }	.skin-timeless .suggestions-special, .skin-timeless .suggestions .suggestions-results { background-color: #262e39; border-color: #2f394d; }	.skin-timeless .suggestions-special .special-label { color: #c5d1df; }	.skin-timeless .suggestions-special .special-query, .skin-timeless .suggestions .suggestions-result { color: #fff; }	/* user icon */ .skin-timeless #personal h2 { background-image: url(https://files-ihaveahax-sfo3.sfo3.digitaloceanspaces.com/timeless-inverted-icons/user-grey.svg); }	.skin-timeless #personal h2:after { background-image: url(https://files-ihaveahax-sfo3.sfo3.digitaloceanspaces.com/timeless-inverted-icons/arrow-down-grey.svg); }	/* icons from mw:Extension:Notifications (formerly called Echo, hence why this says echo) */ .skin-timeless #personal-extra .mw-echo-notifications-badge { filter: invert(1)!important; }	/* code */ .skin-timeless code, .skin-timeless pre, .skin-timeless .mw-code { background-color: #1a1f28; border-color: #252a30; color: #fff; }	.skin-timeless .mw-highlight { background-color: #1a1f28; }	.skin-timeless .mw-content-ltr.mw-highlight-lines pre, .skin-timeless .mw-content-ltr.content .mw-highlight-lines pre { box-shadow: inset 2.75em 0 0 #202730; }	/* lots of syntax colors, this is likely incomplete */ .skin-timeless .mw-highlight .c { color: #4ab5b5; } .skin-timeless .mw-highlight .c1 { color: #4ab5b5; } .skin-timeless .mw-highlight .k { color: #00ff00; } .skin-timeless .mw-highlight .kc { color: #00ff00; } .skin-timeless .mw-highlight .bp { color: #00ff00; } .skin-timeless .mw-highlight .nb { color: #00ff00; } .skin-timeless .mw-highlight .nb { color: #00ff00; } .skin-timeless .mw-highlight .nt { color: #00ff00; } .skin-timeless .mw-highlight .nf { color: #c7c7ff; } .skin-timeless .mw-highlight .nn { color: #9191ff; } .skin-timeless .mw-highlight .nc { color: #9191ff; } .skin-timeless .mw-highlight .nv { color: #9391ec; } .skin-timeless .mw-highlight .o { color: #adadad; } .skin-timeless .mw-highlight .s1 { color: #e77f7f; } .skin-timeless .mw-highlight .s2 { color: #e77f7f; } .skin-timeless .mw-highlight .sa { color: #e77f7f; } .skin-timeless .mw-highlight .ne { color: #f1a29e; } .skin-timeless .mw-highlight .mi { color: #e6af0f; } .skin-timeless .mw-highlight .mh { color: #e6af0f; } .skin-timeless .mw-highlight .mo { color: #e6af0f; } .skin-timeless .mw-highlight .kt { color: #ec4e87; } .skin-timeless .mw-highlight .sx { color: #00ff00; }

/* history */ .skin-timeless #pagehistory li.selected { background-color: #20262f; color: #b1b1b1; outline: 1px dashed #2f394d; }

.skin-timeless .diff-addedline .diffchange { background: #597998; }	.skin-timeless .diff-deletedline .diffchange { background: #695d42; }

.skin-timeless .diff-context { color: #dfdedd; background-color: #20262f; }

.skin-timeless .oo-ui-panelLayout-framed { border-color: #43506a; }

.skin-timeless .mw-plusminus-pos { color: #00e000; }	.skin-timeless .mw-plusminus-neg { color: #eb0000; }	.skin-timeless .ext-cc-language-selector__trigger { color: #95b8ff; }	.skin-timeless .ext-cc-language-selector__trigger:after { border-top-color: #95b8ff; }

/*	wikitables, infoboxes, the recent changes legend, image thumbnails, sitenotice, notification */	.skin-timeless .infobox, .skin-timeless .mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend, .skin-timeless .mw-changeslist-legend, .skin-timeless .mw-body .mw-search-profile-tabs, .skin-timeless .mw-body fieldset#mw-searchoptions, .skin-timeless .mw-pt-languages, .skin-timeless .mw_meta, .skin-timeless .mw-datatable, .skin-timeless .wikitable, .skin-timeless .thumbinner, .skin-timeless #localNotice, .skin-timeless .mw-notification { color: #fff; background: #20262f; border-color: #2f394d; }	/* this mess brought to you by..... idk, it was was appeared in my style editor from load.php */ .skin-timeless .mw_metadata > tr > th, .skin-timeless .mw-datatable > tr > th, .skin-timeless .wikitable > tr > th, .skin-timeless .mw_metadata > tr > td, .skin-timeless .mw-datatable > tr > td, .skin-timeless .wikitable > tr > td, .skin-timeless .mw_metadata > * > tr > th, .skin-timeless .mw-datatable > * > tr > th, .skin-timeless .wikitable > * > tr > th, .skin-timeless .mw_metadata > * > tr > td, .skin-timeless .mw-datatable > * > tr > td, .skin-timeless .wikitable > * > tr > td { border: 1px solid #2f394d; }	.skin-timeless .mw-pt-languages-label, .skin-timeless .wikitable > tr > th, .skin-timeless .wikitable > * > tr > th { background-color: #424f69; }	.skin-timeless .mw-datatable th { background: #424f69; }	.skin-timeless .mw-datatable td { background: #20262f; }	.skin-timeless .mw-datatable tr:hover td { background-color: #2f3c4e; }	/* Special:AllMessages table */ /* default message */ .skin-timeless #mw-allmessagestable .am_default { background-color: #4e4f36; }	/* current/custom message */ .skin-timeless #mw-allmessagestable .am_actual { background-color: #3a4f3a; }	/* toc */ .skin-timeless ul#filetoc, .skin-timeless .toc, .skin-timeless .toccolours, .skin-timeless .mw-warning { background-color: #424f69; border-color: #2f394d; }	.skin-timeless .tocnumber { color: #c1d5e4; }	.skin-timeless .toctogglelabel { cursor: pointer; color: #87adeb; }	/* other icons */ .skin-timeless .mw-editsection, .skin-timeless #ca-ve-edit a { background-image: url(https://files-ihaveahax-sfo3.sfo3.digitaloceanspaces.com/timeless-inverted-icons/pencil-grey.svg); }	.skin-timeless #ca-edit a { background-image: url(https://files-ihaveahax-sfo3.sfo3.digitaloceanspaces.com/timeless-inverted-icons/pencil-source-grey.svg); }	.skin-timeless #ca-viewsource a { background-image: url(https://files-ihaveahax-sfo3.sfo3.digitaloceanspaces.com/timeless-inverted-icons/brackets-grey.svg); }	.skin-timeless .tools-inline li[id^='ca-nstab-'] a { background-image: url(https://files-ihaveahax-sfo3.sfo3.digitaloceanspaces.com/timeless-inverted-icons/page-grey.svg); }	.skin-timeless #ca-talk a { background-image: url(https://files-ihaveahax-sfo3.sfo3.digitaloceanspaces.com/timeless-inverted-icons/talk-grey.svg); }	.skin-timeless #ca-history a { background-image: url(https://files-ihaveahax-sfo3.sfo3.digitaloceanspaces.com/timeless-inverted-icons/clock-grey.svg); }	.skin-timeless #t-contributions a { background-image: url(https://files-ihaveahax-sfo3.sfo3.digitaloceanspaces.com/timeless-inverted-icons/puzzle-grey.svg); }	.skin-timeless #ca-addsection a { background-image: url(https://files-ihaveahax-sfo3.sfo3.digitaloceanspaces.com/timeless-inverted-icons/plus-grey.svg); }	.skin-timeless #ca-watch a { background-image: url(https://files-ihaveahax-sfo3.sfo3.digitaloceanspaces.com/timeless-inverted-icons/star.svg); }	.skin-timeless .dropdown-toggle:after { background-image: url(https://files-ihaveahax-sfo3.sfo3.digitaloceanspaces.com/timeless-inverted-icons/arrow-down-grey.svg); }	.skin-timeless .tools-inline li a { background-image: url(https://files-ihaveahax-sfo3.sfo3.digitaloceanspaces.com/timeless-inverted-icons/page-misc-grey.svg); }	.skin-timeless div.magnify a { background-image: url(https://files-ihaveahax-sfo3.sfo3.digitaloceanspaces.com/timeless-inverted-icons/magnify-ltr.svg); }	/* using an alternate icon here instead of just an inverted version */ .skin-timeless #mw-indicator-mw-helplink a { background-image: url(https://upload.wikimedia.org/wikipedia/commons/c/c0/OOjs_UI_icon_help-ltr-invert.svg); }	/* personal menu */ .skin-timeless #personal .dropdown { background-color: #20262f; border-color: #2f394d; }	.skin-timeless #pt-uls .uls-trigger:before { background-image: url(https://upload.wikimedia.org/wikipedia/commons/3/32/OOjs_UI_icon_language-ltr-invert.svg); }	/* links */ .skin-timeless a { color: #95b8ff; }	.skin-timeless a:visited { color: #a6b9e2; }	.skin-timeless a:hover, .skin-timeless a:visited:hover { color: #688cd4; }	.skin-timeless a.new, .skin-timeless .new a { color: #ff6969; }	.skin-timeless a.new:visited, .skin-timeless .new a:visited { color: #d66767; }	.skin-timeless .mw-parser-output a.extiw:visited, .skin-timeless .mw-parser-output a.extiw:active:visited, .skin-timeless .mw-parser-output a.external:visited { color: #6cb3e7; }	.skin-timeless .mw-parser-output a.extiw, .skin-timeless .mw-parser-output a.extiw:active, .skin-timeless .mw-parser-output a.external { color: #3295df; }	.skin-timeless .mw-parser-output a.extiw:visited:hover, .skin-timeless .mw-parser-output a.extiw:active:visited:hover, .skin-timeless .mw-parser-output a.external:visited:hover { color: #216da7; }	.skin-timeless .mw-parser-output a.extiw:hover, .skin-timeless .mw-parser-output a.extiw:active:hover, .skin-timeless .mw-parser-output a.external:hover { color: #3473a2; }	/* sidebars */ .skin-timeless #mw-site-navigation .sidebar-chunk, .skin-timeless #mw-related-navigation .sidebar-chunk { background-color: #232730; border-color: #2f394d; }	/* message boxes */ .skin-timeless table.ambox, .skin-timeless table.imbox { background-color: #36415b /*#fbfbfb*/; }	.skin-timeless table.fmbox-system, .skin-timeless table.ombox { background-color: #343e57 /*#f8f9fa*/; }	.skin-timeless table.ambox { /* this box puts a 10px border on the left with a special color that should be preserved */ border-top-color: #5e7288; border-right-color: #5e7288; border-bottom-color: #5e7288; }	.skin-timeless table.tmbox { background-color: #5d5848; }	.skin-timeless table.fmbox-editnotice, .skin-timeless table.fmbox-system, .skin-timeless table.ombox-protection, .skin-timeless table.imbox-protection, .skin-timeless table.ombox-notice, .skin-timeless table.cmbox-delete, .skin-timeless table.cmbox-content, .skin-timeless table.cmbox-style, .skin-timeless table.cmbox-notice, .skin-timeless table.cmbox-move, .skin-timeless table.cmbox-protection { border-color: #5e7288; }	.skin-timeless table.ambox-speedy, .skin-timeless table.cmbox-speedy, .skin-timeless table.cmbox-delete, .skin-timeless table.imbox-speedy, .skin-timeless table.tmbox-speedy, .skin-timeless table.fmbox-warning, .skin-timeless table.ombox-speedy { background-color: #6c4543; }	.skin-timeless table.cmbox-content { background-color: #504438; }	.skin-timeless table.cmbox-style { background-color: #635f46; }	.skin-timeless table.cmbox-notice { background-color: #3a4759; }	.skin-timeless table.cmbox-move { background-color: #453b5c; }	.skin-timeless table.cmbox-protection { background-color: #4a4a36; }	/* documentation template */ /* this is using TemplateStyles, so I need to remember to move this over some day... */	.skin-timeless .mw-parser-output .documentation, .skin-timeless .mw-parser-output .documentation-metadata { border: 1px solid #909090!important; background-color: #2a3932!important; }	/* babel */ .skin-timeless .mw-babel-wrapper { background-color: #262e39; }	.skin-timeless .mw-babel-box-N { border: 1px solid #58a176; } .skin-timeless .mw-babel-box-N table th { background-color: #58a176; } .skin-timeless .mw-babel-box-N table { background-color: #39624b; }

.skin-timeless .mw-babel-box-5 { border: 1px solid #b19549; } .skin-timeless .mw-babel-box-5 table th { background-color: #b19549; } .skin-timeless .mw-babel-box-5 table { background-color: #756d45; }

.skin-timeless .mw-babel-box-4 { border: 1px solid #4e9a9f; } .skin-timeless .mw-babel-box-4 table th { background-color: #4e9a9f; } .skin-timeless .mw-babel-box-4 table { background-color: #3f6167; }

.skin-timeless .mw-babel-box-3 { border: 1px solid #6c84c9; } .skin-timeless .mw-babel-box-3 table th { background-color: #6c84c9; } .skin-timeless .mw-babel-box-3 table { background-color: #4d566f; }

.skin-timeless .mw-babel-box-2 { border: 1px solid #7571c1; } .skin-timeless .mw-babel-box-2 table th { background-color: #7571c1; } .skin-timeless .mw-babel-box-2 table { background-color: #554c79; }

.skin-timeless .mw-babel-box-1 { border: 1px solid #ab7dab; } .skin-timeless .mw-babel-box-1 table th { background-color: #ab7dab; } .skin-timeless .mw-babel-box-1 table { background-color: #704b70; }

.skin-timeless .mw-babel-box-0 { border: 1px solid #ab4b4b; } .skin-timeless .mw-babel-box-0 table th { background-color: #ab4b4b; } .skin-timeless .mw-babel-box-0 table { background-color: #784545; } /* misc */ .skin-timeless #contentSub { color: #b4babe; }	.skin-timeless body td.mw-abusefilter-history-changed { background: #875656; }	/* recentchanges stuff */ /* good god */ .skin-timeless .mw-rcfilters-ui-changesListWrapperWidget li.mw-rcfilters-highlight-color-c1, .skin-timeless .mw-rcfilters-ui-changesListWrapperWidget .mw-rcfilters-highlight-color-c1 tr:first-child, .skin-timeless .mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c1.mw-rcfilters-ui-highlights-enhanced-toplevel:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+2)), .skin-timeless .mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c1.mw-rcfilters-ui-highlights-enhanced-nested:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+4)) { background-color: #424c61; }	.skin-timeless .mw-rcfilters-ui-changesListWrapperWidget li.mw-rcfilters-highlight-color-c2, .skin-timeless .mw-rcfilters-ui-changesListWrapperWidget .mw-rcfilters-highlight-color-c2 tr:first-child, .skin-timeless .mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c2.mw-rcfilters-ui-highlights-enhanced-toplevel:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+2)), .skin-timeless .mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c2.mw-rcfilters-ui-highlights-enhanced-nested:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+4)) { background-color: #325951; }	.skin-timeless .mw-rcfilters-ui-changesListWrapperWidget li.mw-rcfilters-highlight-color-c3, .skin-timeless .mw-rcfilters-ui-changesListWrapperWidget .mw-rcfilters-highlight-color-c3 tr:first-child, .skin-timeless .mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c3.mw-rcfilters-ui-highlights-enhanced-toplevel:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+2)), .skin-timeless .mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c3.mw-rcfilters-ui-highlights-enhanced-nested:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+4)) { background-color: #5d5847; }	.skin-timeless .mw-rcfilters-ui-changesListWrapperWidget li.mw-rcfilters-highlight-color-c4, .skin-timeless .mw-rcfilters-ui-changesListWrapperWidget .mw-rcfilters-highlight-color-c4 tr:first-child, .skin-timeless .mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c4.mw-rcfilters-ui-highlights-enhanced-toplevel:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+2)), .skin-timeless .mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c4.mw-rcfilters-ui-highlights-enhanced-nested:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+4)) { background-color: #6a4c3d; }	.skin-timeless .mw-rcfilters-ui-changesListWrapperWidget li.mw-rcfilters-highlight-color-c5, .skin-timeless .mw-rcfilters-ui-changesListWrapperWidget .mw-rcfilters-highlight-color-c5 tr:first-child, .skin-timeless .mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c5.mw-rcfilters-ui-highlights-enhanced-toplevel:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+2)), .skin-timeless .mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c5.mw-rcfilters-ui-highlights-enhanced-nested:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+4)) { background-color: #6a4747; }	.skin-timeless .oo-ui-icon-clock, .skin-timeless .mw-ui-icon-clock:before { background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22%23fff%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Eclock%3C/title%3E%3Cpath d=%22M10 0a10 10 0 1010 10A10 10 0 0010 0zm2.5 14.5L9 11V4h2v6l3 3z%22/%3E%3C/svg%3E"); }	.skin-timeless .oo-ui-icon-expand, .skin-timeless .mw-ui-icon-expand:before { background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22%23fff%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Eexpand%3C/title%3E%3Cpath d=%22M17.5 4.75l-7.5 7.5-7.5-7.5L1 6.25l9 9 9-9z%22/%3E%3C/svg%3E"); }	.skin-timeless .oo-ui-icon-collapse, .skin-timeless .mw-ui-icon-collapse:before { background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22%23fff%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Ecollapse%3C/title%3E%3Cpath d=%22M2.5 15.25l7.5-7.5 7.5 7.5 1.5-1.5-9-9-9 9z%22/%3E%3C/svg%3E"); } }