From 7301aa954b1e075bf998f175b468a0232c0de770 Mon Sep 17 00:00:00 2001 From: Lephe Date: Thu, 8 Jul 2021 14:09:17 +0200 Subject: [PATCH] theme: update dark theme, override SimpleMDE (#14) This commit updates the dark theme by FlamingKite, and adds a simplemde-override.css file which overrides most of SimpleMDE's styling for the edition area (CodeMirror) to replace fixed, bright-style values with references to theme variables. --- app/static/css/container.css | 15 ------- app/static/css/form.css | 9 ++++ app/static/css/global.css | 17 ++++++++ app/static/css/simplemde-override.css | 58 +++++++++++++++++++++++++ app/static/css/themes/FK_dark_theme.css | 44 ++++++++++++------- app/static/css/themes/default_theme.css | 17 ++++++-- app/utils/render.py | 1 + 7 files changed, 127 insertions(+), 34 deletions(-) create mode 100644 app/static/css/simplemde-override.css diff --git a/app/static/css/container.css b/app/static/css/container.css index 9d2452b..b82bd9f 100644 --- a/app/static/css/container.css +++ b/app/static/css/container.css @@ -18,21 +18,6 @@ section { } } -section h1 { - margin-top: 0; - border-bottom: 1px solid #d8d8d8; - font-family: Cantarell; font-weight: bold; - font-size: 26px; color: #101010; -} - -section h2 { - margin: 24px 0 16px 0; - border-bottom: 1px solid #d8d8d8; - font-family: Cantarell; font-weight: bold; - font-size: 18px; color: #101010; - padding-bottom: 2px; -} - section .avatar { display: block; width: 128px; height: 128px; diff --git a/app/static/css/form.css b/app/static/css/form.css index 1cb019a..7fe9dfb 100644 --- a/app/static/css/form.css +++ b/app/static/css/form.css @@ -45,6 +45,15 @@ border-color: var(--border-focused); box-shadow: 0 0 0 3px var(--shadow-focused); } +.form input[type='text']:focus-within, +.form input[type='email']:focus-within, +.form input[type='date']:focus-within, +.form input[type='password']:focus-within, +.form input[type='search']:focus-within, +.form textarea:focus { + /* Override an annoying Firefox default */ + outline: none; +} .form input[type='radio'] { margin: 0 4px 0 0; diff --git a/app/static/css/global.css b/app/static/css/global.css index 3029f0d..b3105a0 100644 --- a/app/static/css/global.css +++ b/app/static/css/global.css @@ -42,6 +42,23 @@ section ul { line-height: 24px; } +section h1 { + margin-top: 0; + border-bottom: var(--hr-border); + font-family: Cantarell; font-weight: bold; + font-size: 26px; + color: var(--text-light); +} + +section h2 { + margin: 24px 0 16px 0; + border-bottom: var(--hr-border); + font-family: Cantarell; font-weight: bold; + font-size: 18px; + color: var(--text-light); + padding-bottom: 2px; +} + /* Buttons */ .button, diff --git a/app/static/css/simplemde-override.css b/app/static/css/simplemde-override.css new file mode 100644 index 0000000..04231f5 --- /dev/null +++ b/app/static/css/simplemde-override.css @@ -0,0 +1,58 @@ +/* SimpleMDE overwrite that allows us to customize from themes */ + +div.editor-toolbar { + border-color: var(--border); +} + +div.editor-toolbar > a { + color: var(--text) !important; +} +div.editor-toolbar > a.active, +div.editor-toolbar > a:hover { + background: var(--background-light); + border-color: var(--background-light); +} + +div.editor-toolbar > i.separator { + border-right-color: transparent; + border-left-color: var(--separator); +} + +div.editor-toolbar.disabled-for-preview a:not(.no-disable) { + background: none; + color: var(--text-disabled) !important; +} +div.editor-toolbar.disabled-for-preview > i.separator { + border-left-color: var(--text-disabled); +} + +div.CodeMirror, +div.editor-preview { + background: var(--background); + color: var(--text); + border-color: var(--border); +} +div.editor-preview { + background: var(--background-preview); +} + +div.CodeMirror .CodeMirror-selected, +div.CodeMirror .CodeMirror-selectedtext { + background: var(--background-light); +} +div.CodeMirror .CodeMirror-focused .CodeMirror-selected, +div.CodeMirror .CodeMirror-focused .CodeMirror-selectedtext, +div.CodeMirror .CodeMirror-line::selection, +div.CodeMirror .CodeMirror-line > span::selection, +div.CodeMirror .CodeMirror-line > span > span::selection { + background: var(--background-light); +} +div.CodeMirror .CodeMirror-line::-moz-selection, +div.CodeMirror .CodeMirror-line > span::-moz-selection, +div.CodeMirror .CodeMirror-line > span > span::-moz-selection { + background: var(--background-light); +} + +div.CodeMirror-cursor { + border-color: var(--text); +} diff --git a/app/static/css/themes/FK_dark_theme.css b/app/static/css/themes/FK_dark_theme.css index 712b7a8..f81b669 100644 --- a/app/static/css/themes/FK_dark_theme.css +++ b/app/static/css/themes/FK_dark_theme.css @@ -10,10 +10,11 @@ */ :root { - --background: #1c2124; /*22292c, 1c2124, 1E1E1E, 242424,*/ - --text: #f2f2f2; + --background: #171a1c; /*22292c, 1c2124, 1E1E1E, 242424,*/ + --text: #eaeaea; + --text-light: #e2e2e2; - --links: #fe2d2d; + --links: #db3f3f; --ok: #149641; --ok-text: #ffffff; @@ -31,14 +32,13 @@ --info-text: #ffffff; --info-active: #215ab0; - --hr-border: 1px solid #b0b0b0; + --hr-border: 1px solid #404040; } .form { - --background: #ffffff; - --text: #000000; - --border: 1px solid #c8c8c8; - --border-focused: #7cade0; + --background: #1c2124; + --border: 1px solid #303030; + --border-focused: #577799; --shadow-focused: rgba(87, 143, 228, 0.5); } @@ -74,13 +74,13 @@ header { - --background: #0d1215; /*5a5a5a*/ + --background: #0d1215; --text: #000000; - --border: 1px solid #d0d0d0; + --border: 1px solid #404040; } footer { - --background: rgba(0, 0, 0, 1); /* #ffffff */ + --background: #0d1215; --text: #a0a0a0; --border: #d0d0d0; } @@ -102,12 +102,26 @@ footer { } .profile-xp { - --background: #e0e0e0; - --border: 1px solid #c0c0c0; + --background: #4a4a4a; + --border: 1px solid #5a5a5a; --background-xp: #f85555; --border-xp: 1px solid #d03333; } +table { + --border: #404040; +} +table tr:nth-child(even) { + --background: #262c2f; +} +table tr:nth-child(odd) { + --background: #1d2326; +} -table tr:nth-child(even) { --background: rgba(255, 255, 255, 0.15); } -table tr:nth-child(odd) { --background: #1c2124; } /* 22292c = background, 1c2124, 1e1e1e*/ +div.editor-toolbar, div.CodeMirror { + --border: #404040; + --background-light: #404040; + --background-preview: #1c2124; + --separator: #404040; + --text-disabled: #262c2f; +} diff --git a/app/static/css/themes/default_theme.css b/app/static/css/themes/default_theme.css index e1f1954..09edd22 100644 --- a/app/static/css/themes/default_theme.css +++ b/app/static/css/themes/default_theme.css @@ -3,6 +3,7 @@ :root { --background: #ffffff; --text: #000000; + --text-light: #101010; --links: #c61a1a; @@ -22,7 +23,7 @@ --info-text: #ffffff; --info-active: #215ab0; - --hr-border: 1px solid #b0b0b0; + --hr-border: 1px solid #d8d8d8; } table { @@ -32,8 +33,8 @@ table tr:nth-child(even) { --background: rgba(0, 0, 0, .1); } table th { - --background: #e0e0e0; - --border: #d0d0d0; + --background: #e0e0e0; + --border: #d0d0d0; } .form { @@ -76,7 +77,7 @@ table th { header { --background: #f4f4f6; --text: #000000; - --border: 1px solid #d0d0d0; + --border: 1px solid #d8d8d8; } footer { @@ -108,3 +109,11 @@ footer { --background-xp-100: #d03333; --border-xp: 1px solid #d03333; } + +div.editor-toolbar, div.CodeMirror { + --border: #c0c0c0; + --background-light: #d9d9d9; + --background-preview: #f4f4f6; + --separator: #a0a0a0; + --text-disabled: #c0c0c0; +} diff --git a/app/utils/render.py b/app/utils/render.py index 000fd37..4e0f16d 100644 --- a/app/utils/render.py +++ b/app/utils/render.py @@ -18,6 +18,7 @@ def render(*args, styles=[], scripts=[], **kwargs): 'css/pagination.css', 'css/responsive.css', 'css/simplemde.min.css', + 'css/simplemde-override.css', 'css/pygments.css', ] scripts_ = [