Codeforces Dracula theme by saibulusu

/* ==UserStyle==
@name         Codeforces Dracula theme
@version      20240628.12.19
@namespace    https://userstyles.world/user/saibulusu
@description  Dracula palette for codeforces, based on the dark theme https://github.com/GaurangTandon/codeforces-darktheme.
@author       saibulusu
@license      No License
==/UserStyle== */

@-moz-document url-prefix("https://codeforces.com/") {
:root {
    --backgroundGreyColor: #282A36;
    --tableGreyRow: #2e2e2e;
    --whiteTextColor: #F8F8F2;
    --inputBoxBackgroundBorderColor: #282A36;

    --genericLinkBlueColor: #21b0fd;
    --genericLinkVisitedBlueColor: #8BE9FD;
    
    --draculaBackground: #282A36;
    --draculaCurrentLine: #44475A;
    --draculaForeground: #F8F8F2;
    --draculaComment: #6272A4;
    --draculaCyan: #8BE9FD;
    --draculaGreen: #50FA7B;
    --draculaOrange: #FFB86C;
    --draculaPink: #FF79C6;
    --draculaPurple: #BD93F9;
    --draculaRed: #FF5555;
    --draculaYellow: #F1FA8C;
}

/* BACKGROUND/BORDER COLOR CHANGES */
body:not(.wysiwyg), /* wysiwyg is the textbox in the usertalk section, it's inside an iframe */
.roundbox,
.bottom-links,
.datatable td:not(.dark),
.datatable td:not(.dark) div.dark,
.datatable th,
.datatable > div.dark, /* the heading Problems on /problemset page */
#facebox .content,
.talk-content div[id^="history-text-content"] {
    /* any value above this starts to look greyish */
    /* need to overwrite background property as well
        otherwise background-color gets overwritten */
    background: var(--backgroundGreyColor) !important;
    background-color: var(--backgroundGreyColor) !important;
}

.spoiler-content,
.roundbox.highlight-blue {
    background-color: hsl(240, 15%, 35%) !important;
}

.topic .content {
    border-left-color: #999 !important;
}

.comment-table {
    border-color: grey !important;
}

div.ttypography .bordertable thead th:not(:last-child) {
    border-right-color: #000;
}

.search,
.ac_input,
input[name$="Difficulty"],
input[type="text"],
#title,
#comment {
    background-color: var(--inputBoxBackgroundBorderColor) !important;
    border-color: var(--inputBoxBackgroundBorderColor) !important;
    color: var(--TextColor) !important;
}

td.dark,
td.dark div.dark,
.ttypography tbody tr:hover td,
.status-frame-datatable tr td.dark {
    background-color: var(--tableGreyRow) !important;
}

div.ttypography tbody tr:hover th {
    color: black !important;
    border-color: black !important;
}

/* disable link highlighting in attempt to improve readability */
a {
    text-decoration: none;
}

/* if the image is transparent, it adds a white background to it to avoid messing
up its colors with the black background
only for logo headers in gyms, etc. */
#header > div:first-child img, ._logo_div img, .sidebox img[alt="Logo"] {
    background-color: white !important;
}

/* all codeforces system hosted images already
look good on the dark background, so revert them back
EXCEPT the ajax loader image which blinks
 */
img[src^="//st.codeforces.com"]:not(.ajax-loading-gif),
img[src^="//sta.codeforces.com"]:not(.ajax-loading-gif),
/* these images are not served from above domain */
img[src$="/lightning-16x16.png"],
img[src$="/ok-16x16.png"] {
    background-color: rgba(255, 255, 255, 0) !important;
}

/* codeforces uses code.prettyprint element but desert.css looks for pre.prettyprint */
pre {
    background-color: var(--draculaBackground) !important;
}

.source-popup-source {
    background-color: var(--draculaBackground) !important;
}

#program-source-text, .source-popup-source .kwd {
    color: var(--draculaCyan);
}
#program-source-text, .source-popup-source .typ {
    color: var(--draculaCyan);
}
#program-source-text, .source-popup-source .com {
    color: var(--draculaPurple);
}
#program-source-text, .source-popup-source .str {
    color: var(--draculaYellow);
}
#program-source-text, .source-popup-source .pun {
    color: var(--draculaForeground);
}
#program-source-text, .source-popup-source .pln {
    color: var(--draculaOrange);
}

/* in the test display for hacks like this one
https://codeforces.com/contest/1092/hacks/511691/test */
body > pre,
/* for pre elements, on problems like 696B */
div.ttypography pre {
    color: var(--whiteTextColor) !important;
}

/* during contest, own submissions's row needs to be highlighted */
.comment-table.highlight-blue,
.comment-table.highlight,
.standings tr.highlighted-row td,
table tr.highlighted-row td,
.highlight-blue,
/* You have a new message*/
.lang-chooser div[style^="background-color: #EAF4FF;"] {
    background-color: #13203a !important;
}

.standings .cell-accepted,
.standings .cell-accepted-locked {
    color: var(--draculaGreen) !important;
}

/* the following two rules are for accessibility */
.standings .cell-challenged {
    color: var(--draculaRed) !important;
}

.standings .cell-passed-system-test {
    color: var(--draculaGreen) !important;
}

/* improve contrast ratio on grey background */
blockquote {
    color: #a8a8a8 !important;
}

div.alert-success {
    color: #0f5711 !important;
    background-color: var(--draculaGreen) !important;
}

/* these are inline code blocks */
div.ttypography .tt,
.search-help code {
    color: #fff !important;
    border-color: #333 !important;
    background-color: #333 !important;
}

.sidebar-menu ul li {
    border: none !important;
}

.sidebar-menu ul li:hover {
    border: 1px solid #2e2e2e !important;
    background-color: #2e2e2e !important;
}

/* submissions page and contest front page */

.problems tr.rejected-problem td.act {
    background-color: var(--draculaRed) !important;
}

.problems tr.accepted-problem td.act {
    background-color: var(--draculaGreen) !important;
}
.problems tr.rejected-problem td.id {
    border-left-color: var(--draculaRed) !important;
}

.problems tr.accepted-problem td.id {
    border-left-color: var(--draculaGreen) !important;
}

div.ttypography .MathJax {
    -webkit-filter: invert(1) !important;
    filter: invert(1) !important;
}

div.ttypography a:hover,
div.ttypography a:focus {
    background-color: #020466 !important;
}

table tbody tr th a img[alt^="Sort"] {
    filter: invert(1);
}

/* issues/#7, #28 */
/* partially solved contest */
.datatable td.state[style^="background-color: rgb(221, 238, 255);"] {
    background-color: #4a4a4a !important;
}

/* completely solved contest */
.datatable td.state[style^="background-color: rgb(212, 237, 201);"] {
    background-color: var(--draculaGreen) !important;
}

/* markitup topic editor, make header and tag input boxes white */
.miu-complete,
.miu-comment,
input[name^="tag"].ac_input,
.send-talk-form table .wysiwyg {
    background-color: var(--inputBoxBackgroundBorderColor) !important;
    border-color: var(--inputBoxBackgroundBorderColor) !important;
}

/* user search button */
input[type="submit"],
input[type="button"],
input[type="file"] {
    color: var(--whiteTextColor) !important;
    background: #4f4f4f !important;
    border-color: #4f4f4f !important;
}

/* fix for google calendar */
.CalendarPage_calendar {
    filter: invert(90%) hue-rotate(180deg);
    background: rgb(25, 25, 25);
}

.CalendarPage_calendar iframe {
    margin-top: 0px !important;
}

/* topic editor */
.miu-complete,
.miu-comment,
.send-talk-form table .wysiwyg {
    background: #fff !important; /* #fff gets inverted */
    filter: invert(90%) hue-rotate(180deg);
}

/* fix CF logo's inverted colors */
.miu-comment .markItUp .markItUpButton8 a,
.miu-complete .markItUp .markItUpButton12 a {
    filter: invert(90%) hue-rotate(180deg);
}

textarea[name="input"],
textarea[name="output"],
#sourceCodeTextarea {
    background-color: var(--draculaBackground);
}

#editor {
    background-color: var(--draculaBackground);
}
.ace_gutter-cell {
    color: gray;   
}
.ace_gutter-layer {
    background-color: var(--draculaBackground);
}

/* issues/#10 */
.delete-resource-link,
.close {
    filter: invert(1);
    background-color: #e0e0e0 !important;
}

.close_image {
    opacity: 0.7 !important;
}

/* new feature that highlights different test cases in problem page
   https://codeforces.com/problemset/problem/1721/A */
.problem-statement .test-example-line-even {
    background-color: var(--draculaCurrentLine) !important;
}

.problem-statement .test-example-line-odd {
    background-color: var(--draculaBackground) !important;
}

/* TEXT COLOR CHANGES */

/* the error that appears when you try to submit binary data (like pdf)
    to a problem */
span.error {
    color: var(--draculaRed) !important;
}

/* the "-> Attention" box on old problems like this one
 https://codeforces.com/problemset/problem/4/C */
.roundbox.highlight-blue .caption.titled {
    color: #ddddee !important;
}

.roundbox.highlight-blue .caption.titled + div {
    color: rgb(230, 230, 230) !important;
}

/* always write most specific selector first in a chain of selectors
if they aren't mutually exclusive */
.second-level-menu ul li a:link,
.second-level-menu ul li a:visited,
span.verdict-unsuccessful-challenge /* unsuccessful hacking attempt */,
span.cell-rejected /* rejected indicator on contests' standings */,
a:not([href]):not(.rated-user),
a:link:not(.rated-user) {
    color: var(--genericLinkBlueColor) !important;
}

/* all visited anchor elements  */
a:visited:not(.rated-user) {
    color: var(--genericLinkVisitedBlueColor) !important;
}

.info /* below the blog headings */,
.ttypography /* generic class */,
.ttypography table,
.ttypography h1, .ttypography h2, .ttypography h3, .ttypography h4, .ttypography h5, .ttypography h6,
.right-meta,
.tickLabel /* the vertical and horizontal reading values on rating graph */,
.personal-sidebar,
.roundbox /* almost all bordered boxes on the page */,
#footer,
.pagination /* at bottom of tables of /ratings */,
#locationSelect /* country/org/city menu on top right of /ratings table */,
#pageContent /* container for everything on the page except the topbar, sideboxes and logo */, #pageContent > div:not(:first-child),
body.notfoundpage h3, /* notfoundpa...