├── LICENSE ├── README.md ├── codeforces-darktheme-darknutella.user.js ├── codeforces-darktheme.user.js ├── darktheme.css ├── darktheme_darknutella.css ├── desert.css └── imgs ├── lava-left.png ├── lava-left2.png ├── lava-right.png ├── lava-right2.png ├── logo.png └── screenshot.png /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Gaurang Tandon 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Codeforces Dark Theme 2 | ## Download instructions 3 | 4 | 1. Install Tampermonkey for your browser. ([Instructions](https://tampermonkey.net/)). 5 | 2. 6 | [**Click this link (White Nutella) **](https://github.com/LordLava/codeforces-darktheme/raw/master/codeforces-darktheme.user.js) to install Codeforces dark theme userscript. 7 | 8 | [**Click this link (Black Nutella) **](https://github.com/LordLava/codeforces-darktheme/raw/master/codeforces-darktheme-darknutella.user.js) to install Codeforces dark theme userscript. 9 | 10 | 3. Reload Codeforces twice. 11 | 12 | 13 | 14 | A dark theme for Codeforces. [**Click to install**](https://github.com/LordLava/codeforces-darktheme/raw/master/codeforces-darktheme.user.js) (requires a userscript manager) 15 | 16 | ![screenshot of home page](./imgs/screenshot.png) 17 | 18 | In case the script is updated later, you need not revisit the page. Tampermonkey auto fetches new updates every 24hrs by default. 19 | 20 | In case you're getting this warning: 21 | 22 | > Apps, extensions, and user scripts can not be added from this website. 23 | 24 | This warning is mainly to prevent vulnerable users from installing malicious extensions and apps. In my case, you can trust this userscript as its code is posted on GitHub, under public scrutiny. So, you can safely ignore the warning and proceed with installation. 25 | 26 | 27 | ## External dependencies 28 | 29 | Both are for dark theme syntax highlighting of code. 30 | 31 | 1. [prettyprint's desert.css](https://github.com/google/code-prettify/blob/master/styles/desert.css), since Codeforces depends on the same library for formatting submission's display ([Apache license](https://github.com/google/code-prettify/blob/master/COPYING)). 32 | 2. [Ace editor's monokai.css](https://github.com/ajaxorg/ace/blob/master/lib/ace/theme/monokai.css) since Codeforces' submission codebox uses the Ace editor ([BSD license](https://github.com/ajaxorg/ace/blob/master/LICENSE)). 33 | 34 | ## Contribution guidelines 35 | 36 | PRs are most welcome! Though it may be better to first create an issue describing the problem the PR fixes and then create it, in order to get more alternate views on the problem. 37 | 38 | ## License 39 | 40 | MIT License attached. 41 | -------------------------------------------------------------------------------- /codeforces-darktheme-darknutella.user.js: -------------------------------------------------------------------------------- 1 | // ==UserScript== 2 | // @name Codeforces Dark mode + Dark nutella 3 | // @version 1.2.1 4 | // @description Improved dark mode for Codeforces 5 | // @author Gaurang Tandon & fork by David 6 | // @match https://codeforces.com/* 7 | // @match http://codeforces.com/* 8 | // @match https://calendar.google.com/calendar/embed* 9 | // @match https://www.facebook.com/v2.8/plugins/like.php* 10 | // @resource desertCSS https://github.com/LordLava/codeforces-darktheme/raw/master/desert.css 11 | // @resource monokaiEditorTheme https://raw.githubusercontent.com/ajaxorg/ace/master/lib/ace/theme/monokai.css 12 | // @resource darkthemecss https://github.com/LordLava/codeforces-darktheme/raw/master/darktheme_darknutella.css 13 | // @grant GM_addStyle 14 | // @grant GM_getResourceText 15 | // @run-at document-start 16 | // ==/UserScript== 17 | 18 | (function () { 19 | "use strict"; 20 | 21 | var colors = { 22 | tableGreyRow: "#181818", 23 | whiteTextColor: "rgb(240, 240, 240)", 24 | inputBoxBackgroundBorderColor: "#383838", 25 | redColorJustPassesA11Y: "#ff0000", 26 | genericLinkBlueColor: "#00a6ff" 27 | }; 28 | 29 | function overrideStyleAttribute(elm, prop, value) { 30 | elm.setAttribute("style", elm.getAttribute("style") + `; ${prop}: ${value} !important; `); 31 | } 32 | 33 | if (window.self != window.top && /calendar\.google\.com/.test(window.self.location.hostname)) { 34 | // cannot add the other styles as they interfere with 35 | // calendar's elements (since the selectors are so generic) 36 | GM_addStyle(` 37 | /* google calendar logo, see #13 */ 38 | div.logo-plus-button { 39 | filter: invert(1) hue-rotate(180deg); 40 | }`); 41 | // rest of the google calendar has already been inverted 42 | // so return 43 | return; 44 | } 45 | 46 | var style = GM_getResourceText("darkthemecss"), 47 | desertCSS = GM_getResourceText("desertCSS"); 48 | 49 | GM_addStyle(style); 50 | GM_addStyle(desertCSS); 51 | 52 | // to avoid long FOUT duration 53 | function applyFuncWhenElmLoaded(sel, func) { 54 | var elm = document.querySelectorAll(sel); 55 | if (!elm || elm.length == 0) return setTimeout(applyFuncWhenElmLoaded, 100, sel, func); 56 | for (let i = 0, len = elm.length; i < len; i++) func(elm[i]); 57 | } 58 | 59 | // some properties are added via element.style 60 | // need to override them via javascript 61 | 62 | // div div h3 a = the top header "@user's blog" whose color property is added via js 63 | applyFuncWhenElmLoaded( 64 | "#pageContent div div h3 a, .comment-table.highlight-blue .right .ttypography p, .comment-table.highlight-blue .right .info", 65 | function (elm) { 66 | var obs = new MutationObserver(function (mutationList, observer) { 67 | mutationList.forEach(function (mutation) { 68 | if (mutation.type == "attributes" && mutation.attributeName == "style") { 69 | elm.setAttribute("style", elm.getAttribute("style") + "; color: white !important; "); 70 | } 71 | }); 72 | }); 73 | overrideStyleAttribute(elm, "color", "white"); 74 | 75 | obs.observe(elm, { attributes: true }); 76 | } 77 | ); 78 | 79 | applyFuncWhenElmLoaded(".datatable div:nth-child(5)", function (elm) { 80 | elm.classList.add("dark"); 81 | }); 82 | 83 | // in this case !important doesn't workthrough css stylesheet 84 | applyFuncWhenElmLoaded(".unread td", function (elm) { 85 | elm.style.backgroundColor = "#13203a !important"; 86 | }); 87 | 88 | (function detect404Page() { 89 | applyFuncWhenElmLoaded("body > h3", function (elm) { 90 | if (elm.innerText.startsWith("The requested URL was not found on this server.")) { 91 | document.body.classList.add("notfoundpage"); 92 | } 93 | }); 94 | })(); 95 | 96 | (function fixLavaMenu() { 97 | applyFuncWhenElmLoaded(".second-level-menu-list li.backLava", function (elm) { 98 | elm.style.backgroundImage = 99 | "url(https://github.com/LordLava/codeforces-darktheme/raw/master/imgs/lava-right2.png)"; 100 | elm.firstElementChild.style.backgroundImage = 101 | "url(https://github.com/LordLava/codeforces-darktheme/raw/master/imgs/lava-left2.png)"; 102 | }); 103 | })(); 104 | 105 | (function fixAceEditor() { 106 | applyFuncWhenElmLoaded("#editor", function (elm) { 107 | var monokaiEditorThemeCSS = GM_getResourceText("monokaiEditorTheme"), 108 | aceChromeClass = "ace-chrome"; 109 | GM_addStyle(monokaiEditorThemeCSS); 110 | elm.classList.remove(aceChromeClass); 111 | elm.classList.add("ace-monokai"); 112 | 113 | // using a mutationobserver to revert addition of class ace-chome 114 | // goes into an infinite loop, presumably because the script run 115 | // by codeforces adds it back 116 | function checkAceClassRemoved() { 117 | if (elm.classList.contains(aceChromeClass)) { 118 | elm.classList.remove(aceChromeClass); 119 | } 120 | } 121 | setInterval(checkAceClassRemoved, 10); 122 | }); 123 | })(); 124 | 125 | (function fixColorRedGreenContrast() { 126 | if (document.readyState != "complete") { 127 | return setTimeout(fixColorRedGreenContrast, 100); 128 | } 129 | 130 | var elms = document.querySelectorAll("*"); 131 | for (let i = 0, len = elms.length; i < len; i++) { 132 | if (getComputedStyle(elms[i]).color == "rgb(0, 128, 0)") { 133 | overrideStyleAttribute(elms[i], "color", "#00c700"); 134 | } 135 | } 136 | 137 | elms = document.querySelectorAll("font"); 138 | for (let i = 0, len = elms.length; i < len; i++) { 139 | if (elms[i].getAttribute("color") == "red") { 140 | elms[i].setAttribute("color", colors.redColorJustPassesA11Y); 141 | } 142 | } 143 | })(); 144 | 145 | (function fixLogo() { 146 | applyFuncWhenElmLoaded("#header > div:nth-child(1) > a > img", function (elm) { 147 | elm.src="https://github.com/LordLava/codeforces-darktheme/raw/master/imgs/logo.png"; 148 | }); 149 | })(); 150 | 151 | (function fixBlackTextInRightTableDuringContest() { 152 | applyFuncWhenElmLoaded(".rtable span", function (elm) { 153 | if (elm.style && elm.style.color == "rgb(0, 0, 0)"){ 154 | overrideStyleAttribute(elm, "color", colors.whiteTextColor); 155 | } 156 | }); 157 | })(); 158 | 159 | // cannot override through css since specifity issue 160 | (function improveLinkColorInGreenAlerts() { 161 | applyFuncWhenElmLoaded("div.alert-success a", function (elm) { 162 | overrideStyleAttribute(elm, "color", "#004794"); 163 | }); 164 | })(); 165 | })(); 166 | -------------------------------------------------------------------------------- /codeforces-darktheme.user.js: -------------------------------------------------------------------------------- 1 | // ==UserScript== 2 | // @name Codeforces dark mode 3 | // @version 1.2.1 4 | // @description Improved dark mode for Codeforces 5 | // @author Gaurang Tandon & fork by David 6 | // @match https://codeforces.com/* 7 | // @match http://codeforces.com/* 8 | // @match https://calendar.google.com/calendar/embed* 9 | // @match https://www.facebook.com/v2.8/plugins/like.php* 10 | // @resource desertCSS https://github.com/LordLava/codeforces-darktheme/raw/master/desert.css 11 | // @resource monokaiEditorTheme https://raw.githubusercontent.com/ajaxorg/ace/master/lib/ace/theme/monokai.css 12 | // @resource darkthemecss https://github.com/LordLava/codeforces-darktheme/raw/master/darktheme.css 13 | // @grant GM_addStyle 14 | // @grant GM_getResourceText 15 | // @run-at document-start 16 | // ==/UserScript== 17 | 18 | (function () { 19 | "use strict"; 20 | 21 | var colors = { 22 | tableGreyRow: "#181818", 23 | whiteTextColor: "rgb(240, 240, 240)", 24 | inputBoxBackgroundBorderColor: "#383838", 25 | redColorJustPassesA11Y: "#ff0000", 26 | genericLinkBlueColor: "#00a6ff" 27 | }; 28 | 29 | function overrideStyleAttribute(elm, prop, value) { 30 | elm.setAttribute("style", elm.getAttribute("style") + `; ${prop}: ${value} !important; `); 31 | } 32 | 33 | if (window.self != window.top && /calendar\.google\.com/.test(window.self.location.hostname)) { 34 | // cannot add the other styles as they interfere with 35 | // calendar's elements (since the selectors are so generic) 36 | GM_addStyle(` 37 | /* google calendar logo, see #13 */ 38 | div.logo-plus-button { 39 | filter: invert(1) hue-rotate(180deg); 40 | }`); 41 | // rest of the google calendar has already been inverted 42 | // so return 43 | return; 44 | } 45 | 46 | var style = GM_getResourceText("darkthemecss"), 47 | desertCSS = GM_getResourceText("desertCSS"); 48 | 49 | GM_addStyle(style); 50 | GM_addStyle(desertCSS); 51 | 52 | // to avoid long FOUT duration 53 | function applyFuncWhenElmLoaded(sel, func) { 54 | var elm = document.querySelectorAll(sel); 55 | if (!elm || elm.length == 0) return setTimeout(applyFuncWhenElmLoaded, 100, sel, func); 56 | for (let i = 0, len = elm.length; i < len; i++) func(elm[i]); 57 | } 58 | 59 | // some properties are added via element.style 60 | // need to override them via javascript 61 | 62 | // div div h3 a = the top header "@user's blog" whose color property is added via js 63 | applyFuncWhenElmLoaded( 64 | "#pageContent div div h3 a, .comment-table.highlight-blue .right .ttypography p, .comment-table.highlight-blue .right .info", 65 | function (elm) { 66 | var obs = new MutationObserver(function (mutationList, observer) { 67 | mutationList.forEach(function (mutation) { 68 | if (mutation.type == "attributes" && mutation.attributeName == "style") { 69 | elm.setAttribute("style", elm.getAttribute("style") + "; color: white !important; "); 70 | } 71 | }); 72 | }); 73 | overrideStyleAttribute(elm, "color", "white"); 74 | 75 | obs.observe(elm, { attributes: true }); 76 | } 77 | ); 78 | 79 | applyFuncWhenElmLoaded(".datatable div:nth-child(5)", function (elm) { 80 | elm.classList.add("dark"); 81 | }); 82 | 83 | // in this case !important doesn't workthrough css stylesheet 84 | applyFuncWhenElmLoaded(".unread td", function (elm) { 85 | elm.style.backgroundColor = "#13203a !important"; 86 | }); 87 | 88 | (function detect404Page() { 89 | applyFuncWhenElmLoaded("body > h3", function (elm) { 90 | if (elm.innerText.startsWith("The requested URL was not found on this server.")) { 91 | document.body.classList.add("notfoundpage"); 92 | } 93 | }); 94 | })(); 95 | 96 | (function fixLavaMenu() { 97 | applyFuncWhenElmLoaded(".second-level-menu-list li.backLava", function (elm) { 98 | elm.style.backgroundImage = 99 | "url(https://github.com/LordLava/codeforces-darktheme/raw/master/imgs/lava-right2.png)"; 100 | elm.firstElementChild.style.backgroundImage = 101 | "url(https://github.com/LordLava/codeforces-darktheme/raw/master/imgs/lava-left2.png)"; 102 | }); 103 | })(); 104 | 105 | (function fixAceEditor() { 106 | applyFuncWhenElmLoaded("#editor", function (elm) { 107 | var monokaiEditorThemeCSS = GM_getResourceText("monokaiEditorTheme"), 108 | aceChromeClass = "ace-chrome"; 109 | GM_addStyle(monokaiEditorThemeCSS); 110 | elm.classList.remove(aceChromeClass); 111 | elm.classList.add("ace-monokai"); 112 | 113 | // using a mutationobserver to revert addition of class ace-chome 114 | // goes into an infinite loop, presumably because the script run 115 | // by codeforces adds it back 116 | function checkAceClassRemoved() { 117 | if (elm.classList.contains(aceChromeClass)) { 118 | elm.classList.remove(aceChromeClass); 119 | } 120 | } 121 | setInterval(checkAceClassRemoved, 10); 122 | }); 123 | })(); 124 | 125 | (function fixLogo() { 126 | applyFuncWhenElmLoaded("#header > div:nth-child(1) > a > img", function (elm) { 127 | elm.src="https://github.com/LordLava/codeforces-darktheme/raw/master/imgs/logo.png"; 128 | }); 129 | })(); 130 | 131 | (function fixColorRedGreenContrast() { 132 | if (document.readyState != "complete") { 133 | return setTimeout(fixColorRedGreenContrast, 100); 134 | } 135 | 136 | var elms = document.querySelectorAll("*"); 137 | for (let i = 0, len = elms.length; i < len; i++) { 138 | if (getComputedStyle(elms[i]).color == "rgb(0, 128, 0)") { 139 | overrideStyleAttribute(elms[i], "color", "#00c700"); 140 | } 141 | } 142 | 143 | elms = document.querySelectorAll("font"); 144 | for (let i = 0, len = elms.length; i < len; i++) { 145 | if (elms[i].getAttribute("color") == "red") { 146 | elms[i].setAttribute("color", colors.redColorJustPassesA11Y); 147 | } 148 | } 149 | })(); 150 | 151 | (function fixBlackTextInRightTableDuringContest() { 152 | applyFuncWhenElmLoaded(".rtable span", function (elm) { 153 | if (elm.style && elm.style.color == "rgb(0, 0, 0)"){ 154 | overrideStyleAttribute(elm, "color", colors.whiteTextColor); 155 | } 156 | }); 157 | })(); 158 | 159 | // cannot override through css since specifity issue 160 | (function improveLinkColorInGreenAlerts() { 161 | applyFuncWhenElmLoaded("div.alert-success a", function (elm) { 162 | overrideStyleAttribute(elm, "color", "#004794"); 163 | }); 164 | })(); 165 | })(); 166 | -------------------------------------------------------------------------------- /darktheme.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --backgroundGreyColor: #181818; 3 | --tableGreyRow: #1e1e1e; 4 | --whiteTextColor: rgb(240, 240, 240); 5 | --inputBoxBackgroundBorderColor: #383838; 6 | /* Changed to pure red 7 | Decreasing lightness increases redness and increasing increases pinkness */ 8 | --redColorJustPassesA11Y: hsl(0, 100%, 50%); 9 | --genericLinkBlueColor: #00a6ff; 10 | --genericLinkVisitedBlueColor: #8ab1ff; 11 | } 12 | 13 | /* BACKGROUND/BORDER COLOR CHANGES */ 14 | body:not(.wysiwyg), /* wysiwyg is the textbox in the usertalk section, it's inside an iframe */ 15 | .roundbox, 16 | .bottom-links, 17 | .datatable td:not(.dark), 18 | .datatable td:not(.dark) div.dark, 19 | .datatable th, 20 | .datatable > div.dark, /* the heading Problems on /problemset page */ 21 | #facebox .content, 22 | .talk-content div[id^="history-text-content"] { 23 | /* any value above this starts to look greyish */ 24 | /* need to overwrite background property as well 25 | otherwise background-color gets overwritten */ 26 | background: var(--backgroundGreyColor) !important; 27 | background-color: var(--backgroundGreyColor) !important; 28 | } 29 | .roundbox{border:1px solid #000000 !important;position:relative}.roundbox .caption{color:#3b5998 !important;font-size:1.5rem;font-weight:700;margin:.2em 0;position:relative}.roundbox .titled{padding:0 0 .3em .5em;border-bottom: 1px solid #000000 !important;}.roundbox .caption .top-links{font-size:1.1rem;font-family:arial;position:absolute;right:.5em;top:.3em}.roundbox .bottom-links{font-family:arial;font-size:1.1rem;border-top:1px solid #000000 !important;background-color:#181818 !important;padding:.45em}.roundbox .dark{background-color:#181818}.roundbox .bottom-links a{margin:.1em}.roundbox table.rtable{width:100%;margin-top:-4px;border:none}.roundbox .rtable td,.roundbox .rtable th{border:1px solid #000000 !important;border-right:none;border-top:none;padding:4px;text-align:center;font-size:.9em}.roundbox .rtable th{font-size:1em;padding-top:7px}.roundbox .rtable .left{border-left:none}.roundbox .rtable .bottom{border-bottom:none}.roundbox .rtable .corner{width:10px;height:10px}.roundbox .roundbox-lt{background:url(../images/roundbox/roundbox-lt.png) no-repeat top left;position:absolute;top:-1px;left:-1px}.roundbox .roundbox-rt{background:url(../images/roundbox/roundbox-rt.png) no-repeat top right;position:absolute;top:-1px;right:-1px}.roundbox .roundbox-lb{background:url(../images/roundbox/roundbox-lb.png) no-repeat bottom left;position:absolute;bottom:-1px;left:-1px}.roundbox .roundbox-rb{background:url(../images/roundbox/roundbox-rb.png) no-repeat bottom right;position:absolute;bottom:-1px;right:-1px}.rtable th{font-weight:700} 30 | .spoiler-content, 31 | .roundbox.highlight-blue { 32 | background-color: hsl(240, 15%, 35%) !important; 33 | } 34 | 35 | .topic .content { 36 | border-left-color: #999 !important; 37 | } 38 | 39 | .comment-table { 40 | border-color: grey !important; 41 | } 42 | 43 | div.ttypography .bordertable thead th:not(:last-child) { 44 | border-right-color: #000 !important;; 45 | } 46 | 47 | .search, 48 | .ac_input, 49 | input[name$="Difficulty"], 50 | input[type="text"], 51 | #title, 52 | #comment { 53 | background-color: var(--inputBoxBackgroundBorderColor) !important; 54 | border-color: var(--inputBoxBackgroundBorderColor) !important; 55 | color: var(--whiteTextColor) !important; 56 | } 57 | 58 | td.dark, 59 | td.dark div.dark, 60 | .ttypography tbody tr:hover td, 61 | .status-frame-datatable tr td.dark { 62 | background-color: var(--tableGreyRow) !important; 63 | } 64 | 65 | div.ttypography tbody tr:hover th { 66 | color: black !important; 67 | border-color: black !important; 68 | } 69 | 70 | /* disable link highlighting in attempt to improve readability */ 71 | a { 72 | text-decoration: none; 73 | } 74 | 75 | /* if the image is transparent, it adds a white background to it to avoid messing 76 | up its colors with the black background 77 | only for logo headers in gyms, etc. */ 78 | #header > div:first-child img, ._logo_div img, .sidebox img[alt="Logo"] { 79 | background-color: white !important; 80 | } 81 | 82 | /* all codeforces system hosted images already 83 | look good on the dark background, so revert them back 84 | EXCEPT the ajax loader image which blinks 85 | */ 86 | img[src^="//st.codeforces.com"]:not(.ajax-loading-gif), 87 | img[src^="//sta.codeforces.com"]:not(.ajax-loading-gif), 88 | /* these images are not served from above domain */ 89 | img[src$="/lightning-16x16.png"], 90 | img[src$="/ok-16x16.png"] { 91 | background-color: rgba(255, 255, 255, 0) !important; 92 | } 93 | 94 | /* codeforces uses code.prettyprint element but desert.css looks for pre.prettyprint */ 95 | pre { 96 | background-color: #333 !important; 97 | } 98 | 99 | /* in the test display for hacks like this one 100 | https://codeforces.com/contest/1092/hacks/511691/test */ 101 | body > pre, 102 | /* for pre elements, on problems like 696B */ 103 | div.ttypography pre { 104 | color: var(--whiteTextColor) !important; 105 | } 106 | 107 | /* during contest, own submissions's row needs to be highlighted */ 108 | .comment-table.highlight-blue, 109 | .comment-table.highlight, 110 | .standings tr.highlighted-row td, 111 | table tr.highlighted-row td, 112 | .highlight-blue, 113 | /* You have a new message*/ 114 | .lang-chooser div[style^="background-color: #EAF4FF;"] { 115 | background-color: #13203a !important; 116 | } 117 | 118 | .standings .cell-accepted, 119 | .standings .cell-accepted-locked { 120 | color: rgb(78, 209, 253) !important; 121 | } 122 | 123 | /* the following two rules are for accessibility */ 124 | .standings .cell-challenged { 125 | color: var(--redColorJustPassesA11Y) !important; 126 | } 127 | 128 | .standings .cell-passed-system-test { 129 | color: #00c700 !important; 130 | } 131 | 132 | /* improve contrast ratio on grey background */ 133 | blockquote { 134 | color: #a8a8a8 !important; 135 | } 136 | 137 | div.alert-success { 138 | color: #0f5711 !important; 139 | background-color: #87df63 !important; 140 | } 141 | 142 | /* these are inline code blocks */ 143 | div.ttypography .tt, 144 | .search-help code { 145 | color: #fff !important; 146 | border-color: #333 !important; 147 | background-color: #333 !important; 148 | } 149 | 150 | .sidebar-menu ul li { 151 | border: none !important; 152 | } 153 | .roundbox{border:1px solid #000000 !important;position:relative} 154 | .datatable td,.datatable th{border-top: 1px solid #000000 !important;border-right: 1px solid #000000 !important;padding:.4em;font-size:1.3rem;text-align:center;overflow:hidden; } 155 | 156 | .sidebar-menu ul li:hover { 157 | border: 1px solid #2e2e2e !important; 158 | background-color: #2e2e2e !important; 159 | } 160 | 161 | /* submissions page and contest front page */ 162 | 163 | .problems tr.rejected-problem td.act { 164 | background-color: #b52222 !important; 165 | } 166 | 167 | .problems tr.accepted-problem td.act { 168 | background-color: #58ca25!important; 169 | } 170 | .problems tr.rejected-problem td.id { 171 | border-left-color: #b52222 !important; 172 | } 173 | 174 | .problems tr.accepted-problem td.id { 175 | border-left-color: #58ca25 !important; 176 | } 177 | 178 | div.ttypography .MathJax { 179 | -webkit-filter: invert(1) !important; 180 | filter: invert(1) !important; 181 | } 182 | 183 | div.ttypography a:hover, 184 | div.ttypography a:focus { 185 | background-color: #020466 !important; 186 | } 187 | 188 | table tbody tr th a img[alt^="Sort"] { 189 | filter: invert(1); 190 | } 191 | 192 | 193 | /* partially solved contest */ 194 | .datatable td.state[style^="background-color: rgb(221, 238, 255);"] { 195 | background-color: #2e2e2e !important; 196 | } 197 | 198 | /* completely solved contest */ 199 | .datatable td.state[style^="background-color: rgb(212, 237, 201);"] { 200 | background-color: #005a07 !important; 201 | } 202 | .roundbox .rtable td,.roundbox .rtable th{border:1px solid #000000 !important;border-right:none;border-top:none;padding:4px;text-align:center;font-size:.9em} 203 | /* markitup topic editor, make header and tag input boxes white */ 204 | .miu-complete, 205 | .miu-comment, 206 | input[name^="tag"].ac_input, 207 | .send-talk-form table .wysiwyg { 208 | background-color: var(--inputBoxBackgroundBorderColor) !important; 209 | border-color: var(--inputBoxBackgroundBorderColor) !important; 210 | } 211 | 212 | /* user search button */ 213 | input[type="submit"], 214 | input[type="button"], 215 | input[type="file"] { 216 | color: var(--whiteTextColor) !important; 217 | background: #181818 !important; 218 | border-color: #4f4f4f !important; 219 | } 220 | 221 | /* fix for google calendar */ 222 | .CalendarPage_calendar { 223 | filter: invert(90%) hue-rotate(180deg); 224 | background: rgb(25, 25, 25); 225 | } 226 | 227 | .CalendarPage_calendar iframe { 228 | margin-top: 0px !important; 229 | } 230 | 231 | /* topic editor */ 232 | .miu-complete, 233 | .miu-comment, 234 | .send-talk-form table .wysiwyg { 235 | background: #fff !important; /* #fff gets inverted */ 236 | filter: invert(90%) hue-rotate(180deg); 237 | } 238 | 239 | /* fix CF logo's inverted colors */ 240 | .miu-comment .markItUp .markItUpButton8 a, 241 | .miu-complete .markItUp .markItUpButton12 a { 242 | filter: invert(90%) hue-rotate(180deg); 243 | } 244 | 245 | textarea[name="input"], 246 | textarea[name="output"], 247 | #sourceCodeTextarea { 248 | background-color: #272822; 249 | color: white; 250 | } 251 | 252 | /* issues/#10 */ 253 | .delete-resource-link, 254 | .close { 255 | filter: invert(1); 256 | background-color: #e0e0e0 !important; 257 | } 258 | 259 | .close_image { 260 | opacity: 0.7 !important; 261 | } 262 | 263 | /* TEXT COLOR CHANGES */ 264 | 265 | /* the error that appears when you try to submit binary data (like pdf) 266 | to a problem */ 267 | span.error { 268 | color: var(--redColorJustPassesA11Y) !important; 269 | } 270 | 271 | /* the "-> Attention" box on old problems like this one 272 | https://codeforces.com/problemset/problem/4/C */ 273 | .roundbox.highlight-blue .caption.titled { 274 | color: #ddddee !important; 275 | } 276 | 277 | .roundbox.highlight-blue .caption.titled + div { 278 | color: rgb(230, 230, 230) !important; 279 | } 280 | 281 | /* always write most specific selector first in a chain of selectors 282 | if they aren't mutually exclusive */ 283 | .second-level-menu ul li a:link, 284 | .second-level-menu ul li a:visited, 285 | span.verdict-unsuccessful-challenge /* unsuccessful hacking attempt */, 286 | span.cell-rejected /* rejected indicator on contests' standings */, 287 | a:not([href]):not(.rated-user), 288 | a:link:not(.rated-user) { 289 | color: var(--genericLinkBlueColor) !important; 290 | } 291 | 292 | /* all visited anchor elements */ 293 | a:visited:not(.rated-user) { 294 | color: var(--genericLinkVisitedBlueColor) !important; 295 | } 296 | 297 | .info /* below the blog headings */, 298 | .ttypography /* generic class */, 299 | .ttypography table, 300 | .ttypography h1, .ttypography h2, .ttypography h3, .ttypography h4, .ttypography h5, .ttypography h6, 301 | .right-meta, 302 | .tickLabel /* the vertical and horizontal reading values on rating graph */, 303 | .personal-sidebar, 304 | .roundbox /* almost all bordered boxes on the page */, 305 | #footer, 306 | .pagination /* at bottom of tables of /ratings */, 307 | #locationSelect /* country/org/city menu on top right of /ratings table */, 308 | #pageContent /* container for everything on the page except the topbar, sideboxes and logo */, #pageContent > div:not(:first-child), 309 | body.notfoundpage h3, /* notfoundpage class courtesy of JS function below */ 310 | #facebox .content, 311 | .lang-chooser, /* top right country flags */ 312 | .page-index.active, 313 | span#u_0_4, /* fb text like plugin */ 314 | .menu-list-container ul li a, 315 | #header h3, 316 | /* on no connection page, only p and ul direct children are present #21 */ 317 | body > p, body > ul 318 | /* #26 - score table on the right in contest page */ { 319 | color: var(--whiteTextColor) !important; 320 | } 321 | 322 | ul.second-level-menu-list li:hover a:hover { 323 | color: #014486 !important; 324 | } 325 | 326 | ul.second-level-menu-list li:hover a:link { 327 | color: #014486 !important; 328 | } 329 | 330 | li.selectedLava a:link { 331 | color: #014486 !important; 332 | } 333 | 334 | ul.second-level-menu-list:hover li:hover:not(.selectedLava) + .selectedLava a:link 335 | /* ul.second-level-menu-list:hover li.selectedLava:not(:hover) a:link */ { 336 | color: var(--genericLinkBlueColor) !important; 337 | } 338 | 339 | /* for problem tags on /problemset */ 340 | a:link.notice { 341 | color: #bababa !important; 342 | } 343 | 344 | /* the mathjax expressions that are 345 | denoted by images */ 346 | .tex-formula { 347 | filter: invert(1) hue-rotate(180deg); 348 | } 349 | 350 | div ul.menu-list li a:link, 351 | div ul.menu-list li a:visited { 352 | color: white !important; 353 | } 354 | 355 | /* on submissions page */ 356 | .verdict-rejected { 357 | color: lightblue !important; 358 | } 359 | 360 | /* hack to increase specificity */ 361 | a.red-link[href^="/contestRegistration"] { 362 | background-color: #9a0000 !important; 363 | color: var(--whiteTextColor) !important; 364 | } 365 | 366 | /* center a to fix formatting mishap as seen on https://codeforces.com/blog/entry/63505 and other related 367 | company posts */ 368 | .topic .content center a { 369 | color: var(--whiteTextColor) !important; 370 | } 371 | 372 | .topic .title p { 373 | color: rgb(94, 146, 255) !important; 374 | } 375 | 376 | .caption.titled, 377 | .contest-state-phase { 378 | color: #91a5cd !important; 379 | } 380 | 381 | .input pre, .output pre, 382 | /* embedded submissions display */ 383 | pre.input, pre.output, pre.answer, pre.checker, pre.diagnostics { 384 | color: white !important; 385 | } 386 | 387 | span.contest-state-regular, 388 | .countdown { 389 | color: #bababa !important; 390 | } 391 | 392 | /* Datatables on Gym, Submissions, Friends list, etc.*/ 393 | /* its background color shows up as borders of the table */ 394 | .datatable, 395 | .status-frame-datatable { 396 | color: var(--whiteTextColor) !important; 397 | border-radius: 5px; 398 | background-color: #585858 !important; 399 | } 400 | 401 | .datatable td.state[style^="back"] .notice { 402 | color: #cccccc !important; 403 | } 404 | 405 | .personal-sidebar div ul.propertyLinks li:nth-child(2) span[style*="green"] { 406 | color: #00c700 !important; 407 | } 408 | 409 | .personal-sidebar div ul.propertyLinks li:nth-child(2) span:not([style*="green"]) { 410 | color: #a8a8a8 !important; 411 | } 412 | 413 | .fix-tag-topic-contrast span a { 414 | color: white !important; 415 | } 416 | 417 | /* issues#6 */ 418 | #vote-list-filterDifficultyLowerBorder li a.vote-item:hover, 419 | #vote-list-filterDifficultyLowerBorder { 420 | filter: invert(1) hue-rotate(180deg); 421 | } 422 | 423 | /* OTHER CHANGES */ 424 | .roundbox { 425 | border-radius: 5px; 426 | } 427 | 428 | .ttypography h5 { 429 | font-weight: bold; 430 | } 431 | 432 | .roundbox-lt, 433 | .roundbox-lb, 434 | .roundbox-rt, 435 | .roundbox-rb, 436 | .datatable .lt, 437 | .datatable .lb, 438 | .datatable .rt, 439 | .datatable .rb, 440 | .datatable .ilt, 441 | .datatable .irt { 442 | display: none !important; 443 | } 444 | 445 | .bottom-links { 446 | border-bottom-left-radius: 5px !important; 447 | border-bottom-right-radius: 5px !important; 448 | } 449 | 450 | .second-level-menu-list li { 451 | border-radius: 5px !important; 452 | } 453 | 454 | td.dark span[style^="color: #0000bb;"] { 455 | color: #4e9fef !important; 456 | } 457 | 458 | .datatable td.state a[href$="standings"] { 459 | color: #8cc3f9 !important; 460 | } 461 | .problem-statement .test-example-line-even { 462 | background-color: #2b2b2b !important; 463 | } 464 | .problem-statement .test-example-line-odd { 465 | background-color: #333333 !important; 466 | } 467 | .usertalks tr.unread td { 468 | background-color: #2b2b2b !important; 469 | } 470 | 471 | 472 | /* gym pages */ 473 | div.setting-name { 474 | color: #6c8bcc !important; 475 | } 476 | 477 | /* RATING COLOR CHANGES*/ 478 | 479 | /* need to prefix overrides with tag name 480 | precedence woes :( */ 481 | span.user-legendary::first-letter, 482 | a.user-legendary::first-letter, 483 | span.user-admin, 484 | a.user-admin, 485 | span.user-black, 486 | a.user-black { 487 | color: #fff !important; 488 | } 489 | 490 | /* tr for the rating tables page*/ 491 | tr.user-blue td, 492 | span.user-blue, 493 | a.user-blue { 494 | color: #35f !important; 495 | } 496 | 497 | /* for a11y contrast coloring */ 498 | tr.user-red td, 499 | span.user-red, 500 | a.user-red, 501 | span.user-legendary, 502 | a.user-legendary { 503 | color: var(--redColorJustPassesA11Y) !important; 504 | } 505 | 506 | tr.user-cyan td, 507 | span.user-cyan, 508 | a.user-cyan { 509 | color: #01bdb2 !important; 510 | } 511 | 512 | tr.user-violet td, 513 | span.user-violet, 514 | a.user-violet { 515 | color: #ac48f5 !important; 516 | } 517 | 518 | tr.user-gray td, 519 | span.user-gray, 520 | a.user-gray { 521 | color: #8c8c8c !important; 522 | } 523 | 524 | /* ins tag in compare window of submissions */ 525 | /* for example, goto any submission and press Compare 526 | https://codeforces.com/contest/1352/submission/79514097 */ 527 | div.diffHtmlTarget pre.prettyprint del[style^="background:#ff8080"] { 528 | background: #7b1313 !important; 529 | } 530 | 531 | div.diffHtmlTarget pre.prettyprint ins[style^="background:#80ff80"] { 532 | background: #004600 !important; 533 | } 534 | div.diffHtmlTarget pre.prettyprint ins[style^="background:#80ff80"] .lit { 535 | /* tone down the red tokens in the green regions, to improve color contrast */ 536 | background: #ff9d9d !important; 537 | } 538 | -------------------------------------------------------------------------------- /darktheme_darknutella.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --backgroundGreyColor: #181818; 3 | --tableGreyRow: #1e1e1e; 4 | --whiteTextColor: rgb(240, 240, 240); 5 | --inputBoxBackgroundBorderColor: #383838; 6 | /* Changed to pure red 7 | Decreasing lightness increases redness and increasing increases pinkness */ 8 | --redColorJustPassesA11Y: hsl(0, 100%, 50%); 9 | --genericLinkBlueColor: #00a6ff; 10 | --genericLinkVisitedBlueColor: #8ab1ff; 11 | } 12 | 13 | /* BACKGROUND/BORDER COLOR CHANGES */ 14 | body:not(.wysiwyg), /* wysiwyg is the textbox in the usertalk section, it's inside an iframe */ 15 | .roundbox, 16 | .bottom-links, 17 | .datatable td:not(.dark), 18 | .datatable td:not(.dark) div.dark, 19 | .datatable th, 20 | .datatable > div.dark, /* the heading Problems on /problemset page */ 21 | #facebox .content, 22 | .talk-content div[id^="history-text-content"] { 23 | /* any value above this starts to look greyish */ 24 | /* need to overwrite background property as well 25 | otherwise background-color gets overwritten */ 26 | background: var(--backgroundGreyColor) !important; 27 | background-color: var(--backgroundGreyColor) !important; 28 | } 29 | .roundbox{border:1px solid #000000 !important;position:relative}.roundbox .caption{color:#3b5998 !important;font-size:1.5rem;font-weight:700;margin:.2em 0;position:relative}.roundbox .titled{padding:0 0 .3em .5em;border-bottom: 1px solid #000000 !important;}.roundbox .caption .top-links{font-size:1.1rem;font-family:arial;position:absolute;right:.5em;top:.3em}.roundbox .bottom-links{font-family:arial;font-size:1.1rem;border-top:1px solid #000000 !important;background-color:#181818 !important;padding:.45em}.roundbox .dark{background-color:#181818}.roundbox .bottom-links a{margin:.1em}.roundbox table.rtable{width:100%;margin-top:-4px;border:none}.roundbox .rtable td,.roundbox .rtable th{border:1px solid #000000 !important;border-right:none;border-top:none;padding:4px;text-align:center;font-size:.9em}.roundbox .rtable th{font-size:1em;padding-top:7px}.roundbox .rtable .left{border-left:none}.roundbox .rtable .bottom{border-bottom:none}.roundbox .rtable .corner{width:10px;height:10px}.roundbox .roundbox-lt{background:url(../images/roundbox/roundbox-lt.png) no-repeat top left;position:absolute;top:-1px;left:-1px}.roundbox .roundbox-rt{background:url(../images/roundbox/roundbox-rt.png) no-repeat top right;position:absolute;top:-1px;right:-1px}.roundbox .roundbox-lb{background:url(../images/roundbox/roundbox-lb.png) no-repeat bottom left;position:absolute;bottom:-1px;left:-1px}.roundbox .roundbox-rb{background:url(../images/roundbox/roundbox-rb.png) no-repeat bottom right;position:absolute;bottom:-1px;right:-1px}.rtable th{font-weight:700} 30 | .spoiler-content, 31 | .roundbox.highlight-blue { 32 | background-color: hsl(240, 15%, 35%) !important; 33 | } 34 | 35 | .topic .content { 36 | border-left-color: #999 !important; 37 | } 38 | 39 | .comment-table { 40 | border-color: grey !important; 41 | } 42 | 43 | div.ttypography .bordertable thead th:not(:last-child) { 44 | border-right-color: #000 !important;; 45 | } 46 | 47 | .search, 48 | .ac_input, 49 | input[name$="Difficulty"], 50 | input[type="text"], 51 | #title, 52 | #comment { 53 | background-color: var(--inputBoxBackgroundBorderColor) !important; 54 | border-color: var(--inputBoxBackgroundBorderColor) !important; 55 | color: var(--whiteTextColor) !important; 56 | } 57 | 58 | td.dark, 59 | td.dark div.dark, 60 | .ttypography tbody tr:hover td, 61 | .status-frame-datatable tr td.dark { 62 | background-color: var(--tableGreyRow) !important; 63 | } 64 | 65 | div.ttypography tbody tr:hover th { 66 | color: black !important; 67 | border-color: black !important; 68 | } 69 | 70 | /* disable link highlighting in attempt to improve readability */ 71 | a { 72 | text-decoration: none; 73 | } 74 | 75 | /* if the image is transparent, it adds a white background to it to avoid messing 76 | up its colors with the black background 77 | only for logo headers in gyms, etc. */ 78 | #header > div:first-child img, ._logo_div img, .sidebox img[alt="Logo"] { 79 | background-color: white !important; 80 | } 81 | 82 | /* all codeforces system hosted images already 83 | look good on the dark background, so revert them back 84 | EXCEPT the ajax loader image which blinks 85 | */ 86 | img[src^="//st.codeforces.com"]:not(.ajax-loading-gif), 87 | img[src^="//sta.codeforces.com"]:not(.ajax-loading-gif), 88 | /* these images are not served from above domain */ 89 | img[src$="/lightning-16x16.png"], 90 | img[src$="/ok-16x16.png"] { 91 | background-color: rgba(255, 255, 255, 0) !important; 92 | } 93 | 94 | /* codeforces uses code.prettyprint element but desert.css looks for pre.prettyprint */ 95 | pre { 96 | background-color: #333 !important; 97 | } 98 | 99 | /* in the test display for hacks like this one 100 | https://codeforces.com/contest/1092/hacks/511691/test */ 101 | body > pre, 102 | /* for pre elements, on problems like 696B */ 103 | div.ttypography pre { 104 | color: var(--whiteTextColor) !important; 105 | } 106 | 107 | /* during contest, own submissions's row needs to be highlighted */ 108 | .comment-table.highlight-blue, 109 | .comment-table.highlight, 110 | .standings tr.highlighted-row td, 111 | table tr.highlighted-row td, 112 | .highlight-blue, 113 | /* You have a new message*/ 114 | .lang-chooser div[style^="background-color: #EAF4FF;"] { 115 | background-color: #13203a !important; 116 | } 117 | 118 | .standings .cell-accepted, 119 | .standings .cell-accepted-locked { 120 | color: rgb(78, 209, 253) !important; 121 | } 122 | 123 | /* the following two rules are for accessibility */ 124 | .standings .cell-challenged { 125 | color: var(--redColorJustPassesA11Y) !important; 126 | } 127 | 128 | .standings .cell-passed-system-test { 129 | color: #00c700 !important; 130 | } 131 | 132 | /* improve contrast ratio on grey background */ 133 | blockquote { 134 | color: #a8a8a8 !important; 135 | } 136 | 137 | div.alert-success { 138 | color: #0f5711 !important; 139 | background-color: #87df63 !important; 140 | } 141 | 142 | /* these are inline code blocks */ 143 | div.ttypography .tt, 144 | .search-help code { 145 | color: #fff !important; 146 | border-color: #333 !important; 147 | background-color: #333 !important; 148 | } 149 | 150 | .sidebar-menu ul li { 151 | border: none !important; 152 | } 153 | .roundbox{border:1px solid #000000 !important;position:relative} 154 | .datatable td,.datatable th{border-top: 1px solid #000000 !important;border-right: 1px solid #000000 !important;padding:.4em;font-size:1.3rem;text-align:center;overflow:hidden; } 155 | 156 | .sidebar-menu ul li:hover { 157 | border: 1px solid #2e2e2e !important; 158 | background-color: #2e2e2e !important; 159 | } 160 | 161 | /* submissions page and contest front page */ 162 | 163 | .problems tr.rejected-problem td.act { 164 | background-color: #b52222 !important; 165 | } 166 | 167 | .problems tr.accepted-problem td.act { 168 | background-color: #58ca25!important; 169 | } 170 | .problems tr.rejected-problem td.id { 171 | border-left-color: #b52222 !important; 172 | } 173 | 174 | .problems tr.accepted-problem td.id { 175 | border-left-color: #58ca25 !important; 176 | } 177 | 178 | div.ttypography .MathJax { 179 | -webkit-filter: invert(1) !important; 180 | filter: invert(1) !important; 181 | } 182 | 183 | div.ttypography a:hover, 184 | div.ttypography a:focus { 185 | background-color: #020466 !important; 186 | } 187 | 188 | table tbody tr th a img[alt^="Sort"] { 189 | filter: invert(1); 190 | } 191 | 192 | 193 | /* partially solved contest */ 194 | .datatable td.state[style^="background-color: rgb(221, 238, 255);"] { 195 | background-color: #2e2e2e !important; 196 | } 197 | 198 | /* completely solved contest */ 199 | .datatable td.state[style^="background-color: rgb(212, 237, 201);"] { 200 | background-color: #005a07 !important; 201 | } 202 | .roundbox .rtable td,.roundbox .rtable th{border:1px solid #000000 !important;border-right:none;border-top:none;padding:4px;text-align:center;font-size:.9em} 203 | /* markitup topic editor, make header and tag input boxes white */ 204 | .miu-complete, 205 | .miu-comment, 206 | input[name^="tag"].ac_input, 207 | .send-talk-form table .wysiwyg { 208 | background-color: var(--inputBoxBackgroundBorderColor) !important; 209 | border-color: var(--inputBoxBackgroundBorderColor) !important; 210 | } 211 | 212 | /* user search button */ 213 | input[type="submit"], 214 | input[type="button"], 215 | input[type="file"] { 216 | color: var(--whiteTextColor) !important; 217 | background: #181818 !important; 218 | border-color: #4f4f4f !important; 219 | } 220 | 221 | /* fix for google calendar */ 222 | .CalendarPage_calendar { 223 | filter: invert(90%) hue-rotate(180deg); 224 | background: rgb(25, 25, 25); 225 | } 226 | 227 | .CalendarPage_calendar iframe { 228 | margin-top: 0px !important; 229 | } 230 | 231 | /* topic editor */ 232 | .miu-complete, 233 | .miu-comment, 234 | .send-talk-form table .wysiwyg { 235 | background: #fff !important; /* #fff gets inverted */ 236 | filter: invert(90%) hue-rotate(180deg); 237 | } 238 | 239 | /* fix CF logo's inverted colors */ 240 | .miu-comment .markItUp .markItUpButton8 a, 241 | .miu-complete .markItUp .markItUpButton12 a { 242 | filter: invert(90%) hue-rotate(180deg); 243 | } 244 | 245 | textarea[name="input"], 246 | textarea[name="output"], 247 | #sourceCodeTextarea { 248 | background-color: #272822; 249 | color: white; 250 | } 251 | 252 | /* issues/#10 */ 253 | .delete-resource-link, 254 | .close { 255 | filter: invert(1); 256 | background-color: #e0e0e0 !important; 257 | } 258 | 259 | .close_image { 260 | opacity: 0.7 !important; 261 | } 262 | 263 | /* TEXT COLOR CHANGES */ 264 | 265 | /* the error that appears when you try to submit binary data (like pdf) 266 | to a problem */ 267 | span.error { 268 | color: var(--redColorJustPassesA11Y) !important; 269 | } 270 | 271 | /* the "-> Attention" box on old problems like this one 272 | https://codeforces.com/problemset/problem/4/C */ 273 | .roundbox.highlight-blue .caption.titled { 274 | color: #ddddee !important; 275 | } 276 | 277 | .roundbox.highlight-blue .caption.titled + div { 278 | color: rgb(230, 230, 230) !important; 279 | } 280 | 281 | /* always write most specific selector first in a chain of selectors 282 | if they aren't mutually exclusive */ 283 | .second-level-menu ul li a:link, 284 | .second-level-menu ul li a:visited, 285 | span.verdict-unsuccessful-challenge /* unsuccessful hacking attempt */, 286 | span.cell-rejected /* rejected indicator on contests' standings */, 287 | a:not([href]):not(.rated-user), 288 | a:link:not(.rated-user) { 289 | color: var(--genericLinkBlueColor) !important; 290 | } 291 | 292 | /* all visited anchor elements */ 293 | a:visited:not(.rated-user) { 294 | color: var(--genericLinkVisitedBlueColor) !important; 295 | } 296 | 297 | .info /* below the blog headings */, 298 | .ttypography /* generic class */, 299 | .ttypography table, 300 | .ttypography h1, .ttypography h2, .ttypography h3, .ttypography h4, .ttypography h5, .ttypography h6, 301 | .right-meta, 302 | .tickLabel /* the vertical and horizontal reading values on rating graph */, 303 | .personal-sidebar, 304 | .roundbox /* almost all bordered boxes on the page */, 305 | #footer, 306 | .pagination /* at bottom of tables of /ratings */, 307 | #locationSelect /* country/org/city menu on top right of /ratings table */, 308 | #pageContent /* container for everything on the page except the topbar, sideboxes and logo */, #pageContent > div:not(:first-child), 309 | body.notfoundpage h3, /* notfoundpage class courtesy of JS function below */ 310 | #facebox .content, 311 | .lang-chooser, /* top right country flags */ 312 | .page-index.active, 313 | span#u_0_4, /* fb text like plugin */ 314 | .menu-list-container ul li a, 315 | #header h3, 316 | /* on no connection page, only p and ul direct children are present #21 */ 317 | body > p, body > ul 318 | /* #26 - score table on the right in contest page */ { 319 | color: var(--whiteTextColor) !important; 320 | } 321 | 322 | ul.second-level-menu-list li:hover a:hover { 323 | color: #014486 !important; 324 | } 325 | 326 | ul.second-level-menu-list li:hover a:link { 327 | color: #014486 !important; 328 | } 329 | 330 | li.selectedLava a:link { 331 | color: #014486 !important; 332 | } 333 | 334 | ul.second-level-menu-list:hover li:hover:not(.selectedLava) + .selectedLava a:link 335 | /* ul.second-level-menu-list:hover li.selectedLava:not(:hover) a:link */ { 336 | color: var(--genericLinkBlueColor) !important; 337 | } 338 | 339 | /* for problem tags on /problemset */ 340 | a:link.notice { 341 | color: #bababa !important; 342 | } 343 | 344 | /* the mathjax expressions that are 345 | denoted by images */ 346 | .tex-formula { 347 | filter: invert(1) hue-rotate(180deg); 348 | } 349 | 350 | div ul.menu-list li a:link, 351 | div ul.menu-list li a:visited { 352 | color: white !important; 353 | } 354 | 355 | /* on submissions page */ 356 | .verdict-rejected { 357 | color: lightblue !important; 358 | } 359 | 360 | /* hack to increase specificity */ 361 | a.red-link[href^="/contestRegistration"] { 362 | background-color: #9a0000 !important; 363 | color: var(--whiteTextColor) !important; 364 | } 365 | 366 | /* center a to fix formatting mishap as seen on https://codeforces.com/blog/entry/63505 and other related 367 | company posts */ 368 | .topic .content center a { 369 | color: var(--whiteTextColor) !important; 370 | } 371 | 372 | .topic .title p { 373 | color: rgb(94, 146, 255) !important; 374 | } 375 | 376 | .caption.titled, 377 | .contest-state-phase { 378 | color: #91a5cd !important; 379 | } 380 | 381 | .input pre, .output pre, 382 | /* embedded submissions display */ 383 | pre.input, pre.output, pre.answer, pre.checker, pre.diagnostics { 384 | color: white !important; 385 | } 386 | 387 | span.contest-state-regular, 388 | .countdown { 389 | color: #bababa !important; 390 | } 391 | 392 | /* Datatables on Gym, Submissions, Friends list, etc.*/ 393 | /* its background color shows up as borders of the table */ 394 | .datatable, 395 | .status-frame-datatable { 396 | color: var(--whiteTextColor) !important; 397 | border-radius: 5px; 398 | background-color: #585858 !important; 399 | } 400 | 401 | .datatable td.state[style^="back"] .notice { 402 | color: #cccccc !important; 403 | } 404 | 405 | .personal-sidebar div ul.propertyLinks li:nth-child(2) span[style*="green"] { 406 | color: #00c700 !important; 407 | } 408 | 409 | .personal-sidebar div ul.propertyLinks li:nth-child(2) span:not([style*="green"]) { 410 | color: #a8a8a8 !important; 411 | } 412 | 413 | .fix-tag-topic-contrast span a { 414 | color: white !important; 415 | } 416 | 417 | /* issues#6 */ 418 | #vote-list-filterDifficultyLowerBorder li a.vote-item:hover, 419 | #vote-list-filterDifficultyLowerBorder { 420 | filter: invert(1) hue-rotate(180deg); 421 | } 422 | 423 | /* OTHER CHANGES */ 424 | .roundbox { 425 | border-radius: 5px; 426 | } 427 | 428 | .ttypography h5 { 429 | font-weight: bold; 430 | } 431 | 432 | .roundbox-lt, 433 | .roundbox-lb, 434 | .roundbox-rt, 435 | .roundbox-rb, 436 | .datatable .lt, 437 | .datatable .lb, 438 | .datatable .rt, 439 | .datatable .rb, 440 | .datatable .ilt, 441 | .datatable .irt { 442 | display: none !important; 443 | } 444 | 445 | .bottom-links { 446 | border-bottom-left-radius: 5px !important; 447 | border-bottom-right-radius: 5px !important; 448 | } 449 | 450 | .second-level-menu-list li { 451 | border-radius: 5px !important; 452 | } 453 | 454 | td.dark span[style^="color: #0000bb;"] { 455 | color: #4e9fef !important; 456 | } 457 | 458 | .datatable td.state a[href$="standings"] { 459 | color: #8cc3f9 !important; 460 | } 461 | 462 | .problem-statement .test-example-line-even { 463 | background-color: #2b2b2b !important; 464 | } 465 | .problem-statement .test-example-line-odd { 466 | background-color: #333333 !important; 467 | } 468 | .usertalks tr.unread td { 469 | background-color: #2b2b2b !important; 470 | } 471 | 472 | 473 | /* gym pages */ 474 | div.setting-name { 475 | color: #6c8bcc !important; 476 | } 477 | 478 | /* RATING COLOR CHANGES*/ 479 | 480 | /* need to prefix overrides with tag name 481 | precedence woes :( */ 482 | span.user-legendary::first-letter, 483 | a.user-legendary::first-letter, 484 | span.user-admin, 485 | a.user-admin, 486 | span.user-black, 487 | a.user-black { 488 | color: #000 !important; 489 | } 490 | 491 | /* tr for the rating tables page*/ 492 | tr.user-blue td, 493 | span.user-blue, 494 | a.user-blue { 495 | color: #35f !important; 496 | } 497 | 498 | /* for a11y contrast coloring */ 499 | tr.user-red td, 500 | span.user-red, 501 | a.user-red, 502 | span.user-legendary, 503 | a.user-legendary { 504 | color: var(--redColorJustPassesA11Y) !important; 505 | } 506 | 507 | tr.user-cyan td, 508 | span.user-cyan, 509 | a.user-cyan { 510 | color: #01bdb2 !important; 511 | } 512 | 513 | tr.user-violet td, 514 | span.user-violet, 515 | a.user-violet { 516 | color: #ac48f5 !important; 517 | } 518 | 519 | tr.user-gray td, 520 | span.user-gray, 521 | a.user-gray { 522 | color: #8c8c8c !important; 523 | } 524 | 525 | /* ins tag in compare window of submissions */ 526 | /* for example, goto any submission and press Compare 527 | https://codeforces.com/contest/1352/submission/79514097 */ 528 | div.diffHtmlTarget pre.prettyprint del[style^="background:#ff8080"] { 529 | background: #7b1313 !important; 530 | } 531 | 532 | div.diffHtmlTarget pre.prettyprint ins[style^="background:#80ff80"] { 533 | background: #004600 !important; 534 | } 535 | div.diffHtmlTarget pre.prettyprint ins[style^="background:#80ff80"] .lit { 536 | /* tone down the red tokens in the green regions, to improve color contrast */ 537 | background: #ff9d9d !important; 538 | } 539 | -------------------------------------------------------------------------------- /desert.css: -------------------------------------------------------------------------------- 1 | /* desert scheme ported from vim to google prettify */ 2 | pre.prettyprint { 3 | display: block !important; 4 | background-color: #333 !important; 5 | } 6 | .prettyprint .nocode { 7 | background-color: none !important; 8 | color: #000 !important; 9 | } 10 | .prettyprint .str { 11 | color: #ffa0a0 !important; 12 | } /* string - pink */ 13 | .prettyprint .kwd { 14 | color: #f0e68c !important; 15 | font-weight: bold !important; 16 | } 17 | .prettyprint .com { 18 | color: #87ceeb !important; 19 | } /* comment - skyblue */ 20 | .prettyprint .typ { 21 | color: #98fb98 !important; 22 | } /* type - lightgreen */ 23 | .prettyprint .lit { 24 | color: #cd5c5c !important; 25 | } /* literal - darkred */ 26 | .prettyprint .pun { 27 | color: #fff !important; 28 | } /* punctuation */ 29 | .prettyprint .pln { 30 | color: #fff !important; 31 | } /* plaintext */ 32 | .prettyprint .tag { 33 | color: #f0e68c !important; 34 | font-weight: bold !important; 35 | } /* html/xml tag - lightyellow */ 36 | .prettyprint .atn { 37 | color: #bdb76b !important; 38 | font-weight: bold !important; 39 | } /* attribute name - khaki */ 40 | .prettyprint .atv { 41 | color: #ffa0a0 !important; 42 | } /* attribute value - pink */ 43 | .prettyprint .dec { 44 | color: #98fb98 !important; 45 | } /* decimal - lightgreen */ 46 | 47 | /* Specify class=linenums on a .prettyprint to get line numbering */ 48 | ol.linenums { 49 | margin-top: 0 !important; 50 | margin-bottom: 0 !important; 51 | color: #aeaeae !important; 52 | } /* IE indents via margin-left */ 53 | li.L0, 54 | li.L1, 55 | li.L2, 56 | li.L3, 57 | li.L5, 58 | li.L6, 59 | li.L7, 60 | li.L8 { 61 | list-style-type: none !important; 62 | } 63 | /* Alternate shading for lines */ 64 | li.L1, 65 | li.L3, 66 | li.L5, 67 | li.L7, 68 | li.L9 { 69 | } 70 | 71 | @media print { 72 | pre.prettyprint { 73 | background-color: none !important; 74 | } 75 | .prettyprint .str, 76 | code .str { 77 | color: #060 !important; 78 | } 79 | .prettyprint .kwd, 80 | code .kwd { 81 | color: #006 !important; 82 | font-weight: bold !important; 83 | } 84 | .prettyprint .com, 85 | code .com { 86 | color: #600 !important; 87 | font-style: italic !important; 88 | } 89 | .prettyprint .typ, 90 | code .typ { 91 | color: #404 !important; 92 | font-weight: bold !important; 93 | } 94 | .prettyprint .lit, 95 | code .lit { 96 | color: #044 !important; 97 | } 98 | .prettyprint .pun, 99 | code .pun { 100 | color: #440 !important; 101 | } 102 | .prettyprint .pln, 103 | code .pln { 104 | color: #000 !important; 105 | } 106 | .prettyprint .tag, 107 | code .tag { 108 | color: #006 !important; 109 | font-weight: bold !important; 110 | } 111 | .prettyprint .atn, 112 | code .atn { 113 | color: #404 !important; 114 | } 115 | .prettyprint .atv, 116 | code .atv { 117 | color: #060 !important; 118 | } 119 | } 120 | -------------------------------------------------------------------------------- /imgs/lava-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LordLava/codeforces-darktheme/c1b10d4497709066201e93d5595af0d9030691b2/imgs/lava-left.png -------------------------------------------------------------------------------- /imgs/lava-left2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LordLava/codeforces-darktheme/c1b10d4497709066201e93d5595af0d9030691b2/imgs/lava-left2.png -------------------------------------------------------------------------------- /imgs/lava-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LordLava/codeforces-darktheme/c1b10d4497709066201e93d5595af0d9030691b2/imgs/lava-right.png -------------------------------------------------------------------------------- /imgs/lava-right2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LordLava/codeforces-darktheme/c1b10d4497709066201e93d5595af0d9030691b2/imgs/lava-right2.png -------------------------------------------------------------------------------- /imgs/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LordLava/codeforces-darktheme/c1b10d4497709066201e93d5595af0d9030691b2/imgs/logo.png -------------------------------------------------------------------------------- /imgs/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LordLava/codeforces-darktheme/c1b10d4497709066201e93d5595af0d9030691b2/imgs/screenshot.png --------------------------------------------------------------------------------