├── imgs ├── lava-left.png ├── lava-left2.png ├── lava-right.png ├── screenshot.png └── lava-right2.png ├── LICENSE ├── desert.css ├── README.md ├── codeforces-darktheme.user.js └── darktheme.css /imgs/lava-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GaurangTandon/codeforces-darktheme/HEAD/imgs/lava-left.png -------------------------------------------------------------------------------- /imgs/lava-left2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GaurangTandon/codeforces-darktheme/HEAD/imgs/lava-left2.png -------------------------------------------------------------------------------- /imgs/lava-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GaurangTandon/codeforces-darktheme/HEAD/imgs/lava-right.png -------------------------------------------------------------------------------- /imgs/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GaurangTandon/codeforces-darktheme/HEAD/imgs/screenshot.png -------------------------------------------------------------------------------- /imgs/lava-right2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GaurangTandon/codeforces-darktheme/HEAD/imgs/lava-right2.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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Codeforces Dark Theme 2 | 3 | A dark theme for Codeforces. [**Click to install**](https://github.com/GaurangTandon/codeforces-darktheme/raw/master/codeforces-darktheme.user.js) (requires a userscript manager) 4 | 5 | ![screenshot of home page](./imgs/screenshot.png) 6 | 7 | **Accessibility in mind**: All colors used clear the minimum AA accessibility contrast ratio of 4.5:1, while most of them also clear the AAA contrast ratio of 7:1. 8 | 9 | ## Download instructions 10 | 11 | 1. Install Tampermonkey for your browser. ([Instructions](https://tampermonkey.net/)). 12 | 2. [**Click this link**](https://github.com/GaurangTandon/codeforces-darktheme/raw/master/codeforces-darktheme.user.js) to install Codeforces dark theme userscript. 13 | 14 | In case the script is updated later, you need not revisit the page. Tampermonkey auto fetches new updates every 24hrs by default. 15 | 16 | In case you're getting this warning: 17 | 18 | > Apps, extensions, and user scripts can not be added from this website. 19 | 20 | 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. 21 | 22 | ## Notes 23 | 24 | 1. **Rating color adjustments**: User handle colors needed to be reworked to be nice with the latest dark theme. That means the following colors now appear only ever so differently, but the sharp eyes amongst you may notice ;) These color adjustments are only meant to **improve contrast ratio of text** against a dark background. 25 | 26 | | users | original color | new color | 27 | | -------------------------------------------- | ------------------------------------------------------------------------- | :----------------------------------------------------------------: | 28 | | admins, non-rated, first letter of legendary | black (`#000`) | white (`#fff`) | 29 | | Grandmaster | ![red](https://user-images.githubusercontent.com/62207434/181259908-2df502e7-c398-4407-9bd6-1da3cdd8b920.png) red | ![#ff4747](https://user-images.githubusercontent.com/62207434/181260614-2738b0d5-f52d-4411-bd79-2ab9f9c37043.png) `#ff4747` | 30 | | Candidate master | ![violet](https://user-images.githubusercontent.com/62207434/181260265-1be718c2-e867-44d0-a066-e588e480fe3b.png) violet | ![#ce8aff](https://user-images.githubusercontent.com/62207434/181260624-c29a5d22-6c11-4c19-9874-0acc28c64e3e.png) `#ce8aff` | 31 | | Expert | ![blue](https://user-images.githubusercontent.com/62207434/181260319-bf58addb-b327-4c31-a340-6fde2c6c30d6.png) blue | ![#757dff](https://user-images.githubusercontent.com/62207434/181260628-a04e4ed5-43b4-485a-8156-8c4a380a4d11.png) `#757dff` | 32 | | Specialist | ![cyan](https://user-images.githubusercontent.com/62207434/181260378-738f0f7a-5302-41f1-851d-efcad298c265.png) cyan (`#03a89e`) | ![#01bdb2](https://user-images.githubusercontent.com/62207434/181260639-e6cfad86-0b25-4f07-a23d-4ca73b17885b.png) `#01bdb2` | 33 | | Pupil | ![green](https://user-images.githubusercontent.com/62207434/181260440-9b43353d-07ad-4c5c-bde7-1703bb413ac3.png) green (`#00d700`) | ![#00c700](https://user-images.githubusercontent.com/62207434/181260653-430462ca-ff29-48a4-ae08-d5ccbda4d648.png) `#00c700` | 34 | | Newbie | ![gray](https://user-images.githubusercontent.com/62207434/181260480-d0c737a4-7367-454a-9dd2-3ebea0019265.png) gray | ![#8c8c8c](https://user-images.githubusercontent.com/62207434/181260660-440aab86-daaa-495f-97be-72ab4463f114.png) `#8c8c8c` | 35 | 36 | To view all the color changes at once, view the table on the [blog post "Second Revolution of Colors and Titles"](https://codeforces.com/blog/entry/20638). 37 | 38 | ## External dependencies 39 | 40 | Both are for dark theme syntax highlighting of code. 41 | 42 | 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)). 43 | 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)). 44 | 45 | ## Contribution guidelines 46 | 47 | 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. 48 | 49 | ## License 50 | 51 | MIT License attached. 52 | -------------------------------------------------------------------------------- /codeforces-darktheme.user.js: -------------------------------------------------------------------------------- 1 | // ==UserScript== 2 | // @name Codeforces dark theme 3 | // @version 1.1.1 4 | // @description dark theme for codeforces 5 | // @author Gaurang Tandon 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 desert.css 11 | // @resource monokaiEditorTheme https://raw.githubusercontent.com/ajaxorg/ace/62e8e9e4d3b21552dd83d454b7fd55d4981d096a/lib/ace/theme/monokai.css 12 | // @resource darkthemecss 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: "#2e2e2e", 23 | whiteTextColor: "rgb(220, 220, 220)", 24 | inputBoxBackgroundBorderColor: "#383838", 25 | redColorJustPassesA11Y: "#ff3333", 26 | genericLinkBlueColor: "#4d9fef" 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/GaurangTandon/codeforces-darktheme/raw/master/imgs/lava-right2.png)"; 100 | elm.firstElementChild.style.backgroundImage = 101 | "url(https://github.com/GaurangTandon/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 fixBlackTextInRightTableDuringContest() { 146 | applyFuncWhenElmLoaded(".rtable span", function (elm) { 147 | if (elm.style && elm.style.color == "rgb(0, 0, 0)") 148 | overrideStyleAttribute(elm, "color", colors.whiteTextColor); 149 | }); 150 | })(); 151 | 152 | // cannot override through css since specifity issue 153 | (function improveLinkColorInGreenAlerts() { 154 | applyFuncWhenElmLoaded("div.alert-success a", function (elm) { 155 | overrideStyleAttribute(elm, "color", "#004794"); 156 | }); 157 | })(); 158 | 159 | // Throttle on both leading and trailing edge 160 | function throttleFn(fn, delayMs = 100) { 161 | let timeTrigger = 0, timeout = null; 162 | 163 | return function(...args) { 164 | let nowTime = Date.now(); 165 | 166 | if (nowTime - timeTrigger >= delayMs) { 167 | timeTrigger = nowTime; 168 | fn(...args); 169 | } else { 170 | if (timeout) clearTimeout(timeout); 171 | let timeLeft = delayMs - (nowTime - timeTrigger); 172 | timeout = setTimeout(() => { 173 | timeout = null; 174 | fn(...args); 175 | }, timeLeft); 176 | } 177 | }; 178 | } 179 | 180 | // The style is applied to multiple matching test-lines, hence cannot override 181 | // via CSS because there is no regex-based selector. 182 | (function improveTestCaseBgColor() { 183 | /* Highlight both even and odd lines with the same color for consistency 184 | with CF's behavior*/ 185 | 186 | // Behavior can be seen on 187 | // 1. Single problem (https://codeforces.com/problemset/problem/1721/A) 188 | // 2. Compact problemset (https://codeforces.com/contest/1721/problems) 189 | const TEST_LINE_CLASS = "test-example-line"; 190 | 191 | /** 192 | * @param {HTMLElement} elm 193 | */ 194 | function applyBGToTestCaseLine(elm) { 195 | const prop = 'cssText', value = 'background-color: rgb(26, 26, 26) !important;'; 196 | // Color removed on hover-out by CF 197 | if (elm.style[prop] === '') { 198 | return; 199 | } 200 | // Ensure to not trigger MutObserver recursively 201 | // Don't match the exact value in case different browsers 202 | // stringify the cssText differently 203 | if (!elm.style[prop].includes('(26') && !elm.style[prop].includes('#1a')) { 204 | // Doesn't include both rgb(26,26,26) and #1a1a1a 205 | elm.style[prop] = value; 206 | } 207 | } 208 | 209 | /** 210 | * Only called for `style` attribute modifications 211 | * when it spots a .test-example-line. 212 | * So not an expensive callback 213 | * @param {MutationRecord[]} mutationList 214 | * @param {MutationObserver} observer 215 | */ 216 | function mutationCallback(mutationList, observer) { 217 | mutationList.forEach((mutation) => { 218 | const target = /** @type {HTMLElement} */ (mutation.target); 219 | if (target.classList.contains(TEST_LINE_CLASS)) { 220 | applyBGToTestCaseLine(target); 221 | } 222 | }); 223 | } 224 | const observer = new MutationObserver(mutationCallback); 225 | 226 | applyFuncWhenElmLoaded("." + TEST_LINE_CLASS, function (elm) { 227 | observer.observe(document.body, { subtree: true, attributeFilter: ['style'] }); 228 | }); 229 | })(); 230 | })(); 231 | -------------------------------------------------------------------------------- /darktheme.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --backgroundGreyColor: #1e1e1e; 3 | --tableGreyRow: #2e2e2e; 4 | --whiteTextColor: rgb(200, 200, 200); 5 | --inputBoxBackgroundBorderColor: #383838; 6 | /* ever so slightly pinkish but does the job well. 7 | Decreasing lightness increases redness and increasing increases pinkness */ 8 | --redColorJustPassesA11Y: hsl(0, 100%, 64%); 9 | --genericLinkBlueColor: #21b0fd; 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 | 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; 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 | 154 | .sidebar-menu ul li:hover { 155 | border: 1px solid #2e2e2e !important; 156 | background-color: #2e2e2e !important; 157 | } 158 | 159 | /* submissions page and contest front page */ 160 | 161 | .problems tr.rejected-problem td.act { 162 | background-color: #ffabab !important; 163 | } 164 | 165 | .problems tr.accepted-problem td.act { 166 | background-color: #b5fd95 !important; 167 | } 168 | .problems tr.rejected-problem td.id { 169 | border-left-color: #ffabab !important; 170 | } 171 | 172 | .problems tr.accepted-problem td.id { 173 | border-left-color: #b5fd95 !important; 174 | } 175 | 176 | div.ttypography .MathJax { 177 | -webkit-filter: invert(1) !important; 178 | filter: invert(1) !important; 179 | } 180 | 181 | div.ttypography a:hover, 182 | div.ttypography a:focus { 183 | background-color: #020466 !important; 184 | } 185 | 186 | table tbody tr th a img[alt^="Sort"] { 187 | filter: invert(1); 188 | } 189 | 190 | /* issues/#7, #28 */ 191 | /* partially solved contest */ 192 | .datatable td.state[style^="background-color: rgb(221, 238, 255);"] { 193 | background-color: #4a4a4a !important; 194 | } 195 | 196 | /* completely solved contest */ 197 | .datatable td.state[style^="background-color: rgb(212, 237, 201);"] { 198 | background-color: #005a07 !important; 199 | } 200 | 201 | /* markitup topic editor, make header and tag input boxes white */ 202 | .miu-complete, 203 | .miu-comment, 204 | input[name^="tag"].ac_input, 205 | .send-talk-form table .wysiwyg { 206 | background-color: var(--inputBoxBackgroundBorderColor) !important; 207 | border-color: var(--inputBoxBackgroundBorderColor) !important; 208 | } 209 | 210 | /* user search button */ 211 | input[type="submit"], 212 | input[type="button"], 213 | input[type="file"] { 214 | color: var(--whiteTextColor) !important; 215 | background: #4f4f4f !important; 216 | border-color: #4f4f4f !important; 217 | } 218 | 219 | /* fix for google calendar */ 220 | .CalendarPage_calendar { 221 | filter: invert(90%) hue-rotate(180deg); 222 | background: rgb(25, 25, 25); 223 | } 224 | 225 | .CalendarPage_calendar iframe { 226 | margin-top: 0px !important; 227 | } 228 | 229 | /* topic editor */ 230 | .miu-complete, 231 | .miu-comment, 232 | .send-talk-form table .wysiwyg { 233 | background: #fff !important; /* #fff gets inverted */ 234 | filter: invert(90%) hue-rotate(180deg); 235 | } 236 | 237 | /* fix CF logo's inverted colors */ 238 | .miu-comment .markItUp .markItUpButton8 a, 239 | .miu-complete .markItUp .markItUpButton12 a { 240 | filter: invert(90%) hue-rotate(180deg); 241 | } 242 | 243 | textarea[name="input"], 244 | textarea[name="output"], 245 | #sourceCodeTextarea { 246 | background-color: #272822; 247 | color: white; 248 | } 249 | 250 | /* issues/#10 */ 251 | .delete-resource-link, 252 | .close { 253 | filter: invert(1); 254 | background-color: #e0e0e0 !important; 255 | } 256 | 257 | .close_image { 258 | opacity: 0.7 !important; 259 | } 260 | 261 | /* new feature that highlights different test cases in problem page 262 | https://codeforces.com/problemset/problem/1721/A */ 263 | .problem-statement .test-example-line-even { 264 | background-color: #444 !important; 265 | } 266 | 267 | /* TEXT COLOR CHANGES */ 268 | 269 | /* the error that appears when you try to submit binary data (like pdf) 270 | to a problem */ 271 | span.error { 272 | color: var(--redColorJustPassesA11Y) !important; 273 | } 274 | 275 | /* the "-> Attention" box on old problems like this one 276 | https://codeforces.com/problemset/problem/4/C */ 277 | .roundbox.highlight-blue .caption.titled { 278 | color: #ddddee !important; 279 | } 280 | 281 | .roundbox.highlight-blue .caption.titled + div { 282 | color: rgb(230, 230, 230) !important; 283 | } 284 | 285 | /* always write most specific selector first in a chain of selectors 286 | if they aren't mutually exclusive */ 287 | .second-level-menu ul li a:link, 288 | .second-level-menu ul li a:visited, 289 | span.verdict-unsuccessful-challenge /* unsuccessful hacking attempt */, 290 | span.cell-rejected /* rejected indicator on contests' standings */, 291 | a:not([href]):not(.rated-user), 292 | a:link:not(.rated-user) { 293 | color: var(--genericLinkBlueColor) !important; 294 | } 295 | 296 | /* all visited anchor elements */ 297 | a:visited:not(.rated-user) { 298 | color: var(--genericLinkVisitedBlueColor) !important; 299 | } 300 | 301 | .info /* below the blog headings */, 302 | .ttypography /* generic class */, 303 | .ttypography table, 304 | .ttypography h1, .ttypography h2, .ttypography h3, .ttypography h4, .ttypography h5, .ttypography h6, 305 | .right-meta, 306 | .tickLabel /* the vertical and horizontal reading values on rating graph */, 307 | .personal-sidebar, 308 | .roundbox /* almost all bordered boxes on the page */, 309 | #footer, 310 | .pagination /* at bottom of tables of /ratings */, 311 | #locationSelect /* country/org/city menu on top right of /ratings table */, 312 | #pageContent /* container for everything on the page except the topbar, sideboxes and logo */, #pageContent > div:not(:first-child), 313 | body.notfoundpage h3, /* notfoundpage class courtesy of JS function below */ 314 | #facebox .content, 315 | .lang-chooser, /* top right country flags */ 316 | .page-index.active, 317 | span#u_0_4, /* fb text like plugin */ 318 | .menu-list-container ul li a, 319 | #header h3, 320 | /* on no connection page, only p and ul direct children are present #21 */ 321 | body > p, body > ul 322 | /* #26 - score table on the right in contest page */ { 323 | color: var(--whiteTextColor) !important; 324 | } 325 | 326 | ul.second-level-menu-list li:hover a:hover { 327 | color: #014486 !important; 328 | } 329 | 330 | ul.second-level-menu-list li:hover a:link { 331 | color: #014486 !important; 332 | } 333 | 334 | li.selectedLava a:link { 335 | color: #014486 !important; 336 | } 337 | 338 | ul.second-level-menu-list:hover li:hover:not(.selectedLava) + .selectedLava a:link 339 | /* ul.second-level-menu-list:hover li.selectedLava:not(:hover) a:link */ { 340 | color: var(--genericLinkBlueColor) !important; 341 | } 342 | 343 | /* for problem tags on /problemset */ 344 | a:link.notice { 345 | color: #bababa !important; 346 | } 347 | 348 | /* the mathjax expressions that are 349 | denoted by images */ 350 | .tex-formula { 351 | filter: invert(1) hue-rotate(180deg); 352 | } 353 | 354 | div ul.menu-list li a:link, 355 | div ul.menu-list li a:visited { 356 | color: white !important; 357 | } 358 | 359 | /* on submissions page */ 360 | .verdict-rejected { 361 | color: lightblue !important; 362 | } 363 | 364 | /* hack to increase specificity */ 365 | a.red-link[href^="/contestRegistration"] { 366 | background-color: #9a0000 !important; 367 | color: var(--whiteTextColor) !important; 368 | } 369 | 370 | /* center a to fix formatting mishap as seen on https://codeforces.com/blog/entry/63505 and other related 371 | company posts */ 372 | .topic .content center a { 373 | color: var(--whiteTextColor) !important; 374 | } 375 | 376 | .topic .title p { 377 | color: rgb(94, 146, 255) !important; 378 | } 379 | 380 | .caption.titled, 381 | .contest-state-phase { 382 | color: #91a5cd !important; 383 | } 384 | 385 | .input pre, .output pre, 386 | /* embedded submissions display */ 387 | pre.input, pre.output, pre.answer, pre.checker, pre.diagnostics { 388 | color: white !important; 389 | } 390 | 391 | span.contest-state-regular, 392 | .countdown { 393 | color: #bababa !important; 394 | } 395 | 396 | /* Datatables on Gym, Submissions, Friends list, etc.*/ 397 | /* its background color shows up as borders of the table */ 398 | .datatable, 399 | .status-frame-datatable { 400 | color: var(--whiteTextColor) !important; 401 | border-radius: 5px; 402 | background-color: #585858 !important; 403 | } 404 | 405 | .datatable td.state[style^="back"] .notice { 406 | color: #cccccc !important; 407 | } 408 | 409 | .personal-sidebar div ul.propertyLinks li:nth-child(2) span[style*="green"] { 410 | color: #00c700 !important; 411 | } 412 | 413 | .personal-sidebar div ul.propertyLinks li:nth-child(2) span:not([style*="green"]) { 414 | color: #a8a8a8 !important; 415 | } 416 | 417 | .fix-tag-topic-contrast span a { 418 | color: white !important; 419 | } 420 | 421 | /* issues#6 */ 422 | #vote-list-filterDifficultyLowerBorder li a.vote-item:hover, 423 | #vote-list-filterDifficultyLowerBorder { 424 | filter: invert(1) hue-rotate(180deg); 425 | } 426 | 427 | /* OTHER CHANGES */ 428 | .roundbox { 429 | border-radius: 5px; 430 | } 431 | 432 | .ttypography h5 { 433 | font-weight: bold; 434 | } 435 | 436 | .roundbox-lt, 437 | .roundbox-lb, 438 | .roundbox-rt, 439 | .roundbox-rb, 440 | .datatable .lt, 441 | .datatable .lb, 442 | .datatable .rt, 443 | .datatable .rb, 444 | .datatable .ilt, 445 | .datatable .irt { 446 | display: none !important; 447 | } 448 | 449 | .bottom-links { 450 | border-bottom-left-radius: 5px !important; 451 | border-bottom-right-radius: 5px !important; 452 | } 453 | 454 | .second-level-menu-list li { 455 | border-radius: 5px !important; 456 | } 457 | 458 | td.dark span[style^="color: #0000bb;"] { 459 | color: #4e9fef !important; 460 | } 461 | 462 | .datatable td.state a[href$="standings"] { 463 | color: #8cc3f9 !important; 464 | } 465 | 466 | /* gym pages */ 467 | div.setting-name { 468 | color: #6c8bcc !important; 469 | } 470 | 471 | /* RATING COLOR CHANGES*/ 472 | 473 | /* need to prefix overrides with tag name 474 | precedence woes :( */ 475 | span.user-legendary::first-letter, 476 | a.user-legendary::first-letter, 477 | span.user-admin, 478 | a.user-admin, 479 | span.user-black, 480 | a.user-black { 481 | color: #fff !important; 482 | } 483 | 484 | /* tr for the rating tables page*/ 485 | tr.user-blue td, 486 | span.user-blue, 487 | a.user-blue { 488 | color: #757dff !important; 489 | } 490 | 491 | /* for a11y contrast coloring */ 492 | tr.user-red td, 493 | span.user-red, 494 | a.user-red, 495 | span.user-legendary, 496 | a.user-legendary { 497 | color: var(--redColorJustPassesA11Y) !important; 498 | } 499 | 500 | tr.user-cyan td, 501 | span.user-cyan, 502 | a.user-cyan { 503 | color: #01bdb2 !important; 504 | } 505 | 506 | tr.user-violet td, 507 | span.user-violet, 508 | a.user-violet { 509 | color: #ce8aff !important; 510 | } 511 | 512 | tr.user-gray td, 513 | span.user-gray, 514 | a.user-gray { 515 | color: #8c8c8c !important; 516 | } 517 | 518 | /* ins tag in compare window of submissions */ 519 | /* for example, goto any submission and press Compare 520 | https://codeforces.com/contest/1352/submission/79514097 */ 521 | div.diffHtmlTarget pre.prettyprint del[style^="background:#ff8080"] { 522 | background: #7b1313 !important; 523 | } 524 | 525 | div.diffHtmlTarget pre.prettyprint ins[style^="background:#80ff80"] { 526 | background: #004600 !important; 527 | } 528 | div.diffHtmlTarget pre.prettyprint ins[style^="background:#80ff80"] .lit { 529 | /* tone down the red tokens in the green regions, to improve color contrast */ 530 | background: #ff9d9d !important; 531 | } 532 | --------------------------------------------------------------------------------