From 94023a22260a678e9ba56b30fbdc53a2cf892cee Mon Sep 17 00:00:00 2001 From: Joona Yoon Date: Wed, 20 Oct 2021 23:42:32 +0900 Subject: [PATCH] fix: dark theme colors and fix issue #40 #42 --- css/theme-dark.css | 160 +++++++++++++++++++++++++-------------------- 1 file changed, 90 insertions(+), 70 deletions(-) diff --git a/css/theme-dark.css b/css/theme-dark.css index 4aa1f2a9..f269db22 100644 --- a/css/theme-dark.css +++ b/css/theme-dark.css @@ -266,7 +266,7 @@ html[theme='dark'] .input-group-addon { border-color: #222; } html[theme='dark'] .breadcrumbs { - background: #1a1a1a; + background: #1d1d1d; border-color: #252525; } html[theme='dark'] .sky-form { @@ -369,7 +369,7 @@ html[theme='dark'] .dropdown-menu > li > a:focus { background-color: #5f5f5f; } html[theme='dark'] .funny-boxes { - background: #191919; + background: #262626; } html[theme='dark'] .funny-boxes h2 a { color: #89c4e8; @@ -441,6 +441,9 @@ html[theme='dark'] .posts .dl-horizontal a { html[theme='dark'] .result-ac { color: #09b58c !important; } +html[theme='dark'] .result-pac { + color: #efc050 !important; +} html[theme='dark'] .result-wa { color: #dd4124 !important; } @@ -551,7 +554,7 @@ html[theme='dark'] .problem-label-bookmark { color: #777 !important; } html[theme='dark'] .label-purple, -html[theme='dark'] .badge-purple, +html[theme='dark'] .badge-purple, html[theme='dark'] .problem-label-tag { background-color: transparent; border: 1px solid #9b6bcc; @@ -683,9 +686,9 @@ html[theme='dark'] .redactor-styles figure, html[theme='dark'] .redactor-box.redactor-styles-on, html[theme='dark'] #logo-header, html[theme='dark'] #problem-body img:not(.level_badge) { - filter: invert(80%) hue-rotate(180deg) brightness(110%) contrast(150%); - -webkit-filter: invert(80%) hue-rotate(180deg) brightness(110%) contrast(150%); - -moz-filter: invert(80%) hue-rotate(180deg) brightness(110%) contrast(150%); + filter: invert(100%) hue-rotate(180deg) brightness(120%) contrast(72.5%); + -webkit-filter: invert(100%) hue-rotate(180deg) brightness(120%) contrast(72.5%); + -moz-filter: invert(100%) hue-rotate(180deg) brightness(120%) contrast(72.5%); transition: 0.2s ease-out; } html[theme='dark'] .panel img:hover, @@ -764,121 +767,138 @@ html[theme='dark'] .CodeMirror { Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) But override as 'cm-s-paper', 'cm-s-default' to replace (original is 'cm-s-base16-dark') */ -html[theme="dark"] .cm-s-default.CodeMirror, -html[theme="dark"] .cm-s-paper.CodeMirror { - background: #151515; +html[theme='dark'] .cm-s-default.CodeMirror, +html[theme='dark'] .cm-s-paper.CodeMirror { + background: #1d1d1d; color: #e0e0e0; } -html[theme="dark"] .cm-s-default div.CodeMirror-selected, -html[theme="dark"] .cm-s-paper div.CodeMirror-selected { +html[theme='dark'] .cm-s-default div.CodeMirror-selected, +html[theme='dark'] .cm-s-paper div.CodeMirror-selected { background: #303030; } -html[theme="dark"] .cm-s-default .CodeMirror-line::selection, -html[theme="dark"] .cm-s-paper .CodeMirror-line::selection, -html[theme="dark"] .cm-s-default .CodeMirror-line > span::selection, -html[theme="dark"] .cm-s-paper .CodeMirror-line > span::selection, -html[theme="dark"] .cm-s-default .CodeMirror-line > span > span::selection, -html[theme="dark"] .cm-s-paper .CodeMirror-line > span > span::selection { +html[theme='dark'] .cm-s-default .CodeMirror-line::selection, +html[theme='dark'] .cm-s-paper .CodeMirror-line::selection, +html[theme='dark'] .cm-s-default .CodeMirror-line > span::selection, +html[theme='dark'] .cm-s-paper .CodeMirror-line > span::selection, +html[theme='dark'] .cm-s-default .CodeMirror-line > span > span::selection, +html[theme='dark'] .cm-s-paper .CodeMirror-line > span > span::selection { background: rgba(48, 48, 48, 0.99); } -html[theme="dark"] .cm-s-default .CodeMirror-line::-moz-selection, -html[theme="dark"] .cm-s-paper .CodeMirror-line::-moz-selection, -html[theme="dark"] .cm-s-default .CodeMirror-line > span::-moz-selection, -html[theme="dark"] .cm-s-paper .CodeMirror-line > span::-moz-selection, -html[theme="dark"] .cm-s-default .CodeMirror-line > span > span::-moz-selection, -html[theme="dark"] .cm-s-paper .CodeMirror-line > span > span::-moz-selection { +html[theme='dark'] .cm-s-default .CodeMirror-line::-moz-selection, +html[theme='dark'] .cm-s-paper .CodeMirror-line::-moz-selection, +html[theme='dark'] .cm-s-default .CodeMirror-line > span::-moz-selection, +html[theme='dark'] .cm-s-paper .CodeMirror-line > span::-moz-selection, +html[theme='dark'] .cm-s-default .CodeMirror-line > span > span::-moz-selection, +html[theme='dark'] .cm-s-paper .CodeMirror-line > span > span::-moz-selection { background: rgba(48, 48, 48, 0.99); } -html[theme="dark"] .cm-s-default .CodeMirror-gutters, -html[theme="dark"] .cm-s-paper .CodeMirror-gutters { - background: #151515; +html[theme='dark'] .editor-toolbar a.fa-header-x:after { + color: #d6dadd !important; +} +html[theme='dark'] .editor-toolbar.fullscreen, +html[theme='dark'] .editor-toolbar.fullscreen::before, +html[theme='dark'] .editor-toolbar.fullscreen::after { + background: #222222; +} +html[theme='dark'] .editor-preview-active, +html[theme='dark'] .editor-preview-active-side { + background: #222; + border: 1px solid #333; +} +html[theme='dark'] .editor-toolbar.disabled-for-preview a:not(.no-disable) { + background: inherit; + opacity: 0.5; +} +html[theme='dark'] .cm-s-default .CodeMirror-gutters, +html[theme='dark'] .cm-s-paper .CodeMirror-gutters { + background: #1d1d1d; border-right: 0px; } -html[theme="dark"] .cm-s-default .CodeMirror-guttermarker, -html[theme="dark"] .cm-s-paper .CodeMirror-guttermarker { +html[theme='dark'] .cm-s-default .CodeMirror-guttermarker, +html[theme='dark'] .cm-s-paper .CodeMirror-guttermarker { color: #ac4142; } -html[theme="dark"] .cm-s-default .CodeMirror-guttermarker-subtle, -html[theme="dark"] .cm-s-paper .CodeMirror-guttermarker-subtle { +html[theme='dark'] .cm-s-default .CodeMirror-guttermarker-subtle, +html[theme='dark'] .cm-s-paper .CodeMirror-guttermarker-subtle { color: #505050; } -html[theme="dark"] .cm-s-default .CodeMirror-linenumber, -html[theme="dark"] .cm-s-paper .CodeMirror-linenumber { +html[theme='dark'] .cm-s-default .CodeMirror-linenumber, +html[theme='dark'] .cm-s-paper .CodeMirror-linenumber { color: #505050; } -html[theme="dark"] .cm-s-default .CodeMirror-cursor, -html[theme="dark"] .cm-s-paper .CodeMirror-cursor { +html[theme='dark'] .cm-s-default .CodeMirror-cursor, +html[theme='dark'] .cm-s-paper .CodeMirror-cursor { border-left: 1px solid #b0b0b0; } -html[theme="dark"] .cm-s-default.cm-fat-cursor .CodeMirror-cursor, -html[theme="dark"] .cm-s-paper.cm-fat-cursor .CodeMirror-cursor { +html[theme='dark'] .cm-s-default.cm-fat-cursor .CodeMirror-cursor, +html[theme='dark'] .cm-s-paper.cm-fat-cursor .CodeMirror-cursor { background-color: #8e8d8875 !important; } -html[theme="dark"] .cm-s-default .cm-animate-fat-cursor, -html[theme="dark"] .cm-s-paper .cm-animate-fat-cursor { +html[theme='dark'] .cm-s-default .cm-animate-fat-cursor, +html[theme='dark'] .cm-s-paper .cm-animate-fat-cursor { background-color: #8e8d8875 !important; } -html[theme="dark"] .cm-s-default span.cm-comment, -html[theme="dark"] .cm-s-paper span.cm-comment { +html[theme='dark'] .cm-s-default span.cm-comment, +html[theme='dark'] .cm-s-paper span.cm-comment { color: #8f5536; } -html[theme="dark"] .cm-s-default span.cm-atom, -html[theme="dark"] .cm-s-paper span.cm-atom { +html[theme='dark'] .cm-s-default span.cm-atom, +html[theme='dark'] .cm-s-paper span.cm-atom { color: #aa759f; } -html[theme="dark"] .cm-s-default span.cm-number, -html[theme="dark"] .cm-s-paper span.cm-number { +html[theme='dark'] .cm-s-default span.cm-number, +html[theme='dark'] .cm-s-paper span.cm-number { color: #aa759f; } -html[theme="dark"] .cm-s-default span.cm-property, -html[theme="dark"] .cm-s-paper span.cm-property, -html[theme="dark"] .cm-s-default span.cm-attribute, -html[theme="dark"] .cm-s-paper span.cm-attribute { +html[theme='dark'] .cm-s-default span.cm-property, +html[theme='dark'] .cm-s-paper span.cm-property, +html[theme='dark'] .cm-s-default span.cm-attribute, +html[theme='dark'] .cm-s-paper span.cm-attribute { color: #90a959; } -html[theme="dark"] .cm-s-default span.cm-keyword, -html[theme="dark"] .cm-s-paper span.cm-keyword { +html[theme='dark'] .cm-s-default span.cm-keyword, +html[theme='dark'] .cm-s-paper span.cm-keyword { color: #ac4142; } -html[theme="dark"] .cm-s-default span.cm-string, -html[theme="dark"] .cm-s-paper span.cm-string { +html[theme='dark'] .cm-s-default span.cm-string, +html[theme='dark'] .cm-s-paper span.cm-string { color: #f4bf75; } -html[theme="dark"] .cm-s-default span.cm-variable, -html[theme="dark"] .cm-s-paper span.cm-variable { +html[theme='dark'] .cm-s-default span.cm-variable, +html[theme='dark'] .cm-s-paper span.cm-variable { color: #90a959; } -html[theme="dark"] .cm-s-default span.cm-variable-2, -html[theme="dark"] .cm-s-paper span.cm-variable-2 { +html[theme='dark'] .cm-s-default span.cm-variable-2, +html[theme='dark'] .cm-s-paper span.cm-variable-2 { color: #6a9fb5; } -html[theme="dark"] .cm-s-default span.cm-def, -html[theme="dark"] .cm-s-paper span.cm-def { +html[theme='dark'] .cm-s-default span.cm-def, +html[theme='dark'] .cm-s-paper span.cm-def { color: #d28445; } -html[theme="dark"] .cm-s-default span.cm-bracket, -html[theme="dark"] .cm-s-paper span.cm-bracket { +html[theme='dark'] .cm-s-default span.cm-bracket, +html[theme='dark'] .cm-s-paper span.cm-bracket { color: #e0e0e0; } -html[theme="dark"] .cm-s-default span.cm-tag, -html[theme="dark"] .cm-s-paper span.cm-tag { +html[theme='dark'] .cm-s-default span.cm-tag, +html[theme='dark'] .cm-s-paper span.cm-tag { color: #ac4142; } -html[theme="dark"] .cm-s-default span.cm-link, -html[theme="dark"] .cm-s-paper span.cm-link { +html[theme='dark'] .cm-s-default span.cm-link, +html[theme='dark'] .cm-s-paper span.cm-link { color: #aa759f; } -html[theme="dark"] .cm-s-default span.cm-error, -html[theme="dark"] .cm-s-paper span.cm-error { +html[theme='dark'] .cm-s-default span.cm-error, +html[theme='dark'] .cm-s-paper span.cm-error { background: #ac4142; color: #b0b0b0; } -html[theme="dark"] .cm-s-default .CodeMirror-activeline-background, -html[theme="dark"] .cm-s-paper .CodeMirror-activeline-background { +html[theme='dark'] .cm-s-default .CodeMirror-activeline-background, +html[theme='dark'] .cm-s-paper .CodeMirror-activeline-background { background: #202020; } -html[theme="dark"] .cm-s-default .CodeMirror-matchingbracket, -html[theme="dark"] .cm-s-paper .CodeMirror-matchingbracket { +html[theme='dark'] .cm-s-default .CodeMirror-matchingbracket, +html[theme='dark'] .cm-s-paper .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; }