From 3f34f09537726ad218e2edccbee4b670f456fcc3 Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 20 Dec 2021 12:07:49 -0800 Subject: [PATCH] Extract CodeMirror styles (#17960) - Extract CodeMirror-related styles to separate files - Generalize CodeMirror styles where possible - Improve fullscreen and side-by-side mode for dark theme Co-authored-by: 6543 <6543@obermui.de> --- web_src/less/_base.less | 12 +-- web_src/less/_editor.less | 38 ++++---- web_src/less/_repository.less | 18 ---- web_src/less/codemirror/base.less | 41 +++++++++ web_src/less/codemirror/dark.less | 89 +++++++++++++++++++ web_src/less/codemirror/light.less | 1 + web_src/less/index.less | 2 + web_src/less/themes/theme-arc-green.less | 107 +---------------------- 8 files changed, 157 insertions(+), 151 deletions(-) create mode 100644 web_src/less/codemirror/base.less create mode 100644 web_src/less/codemirror/dark.less create mode 100644 web_src/less/codemirror/light.less diff --git a/web_src/less/_base.less b/web_src/less/_base.less index 300323b2e..fc242e159 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -214,18 +214,12 @@ details summary > * { background: transparent; } -.CodeMirror-cursor { - border-color: var(--color-caret) !important; -} - -::selection, -.CodeMirror-selected { +::selection { background: var(--color-primary-light-1) !important; color: var(--color-white) !important; } ::placeholder, -.CodeMirror-placeholder, .ui.dropdown:not(.button) > .default.text, .ui.default.dropdown:not(.button) > .text { color: var(--color-placeholder-text) !important; @@ -280,10 +274,6 @@ a.label, border-color: var(--color-primary); } -.CodeMirror-focused { - border-color: var(--color-primary) !important; -} - /* currently used for search bar dropdowns in repo search and explore code */ .ui.action.input:not([class*="left action"]) > .ui.dropdown.selection { min-width: 10em; diff --git a/web_src/less/_editor.less b/web_src/less/_editor.less index 6ddb1a335..73e5bda0a 100644 --- a/web_src/less/_editor.less +++ b/web_src/less/_editor.less @@ -1,19 +1,3 @@ -.EasyMDEContainer .CodeMirror { - color: var(--color-input-text); - background-color: var(--color-input-background); - border-color: var(--color-secondary); - font: 14px var(--fonts-monospace); - - &.cm-s-default { - border-radius: 3px; - padding: 0 !important; - } - - .cm-comment { - background: inherit !important; - } -} - .repository.file.editor .tab[data-tab="write"] { padding: 0 !important; } @@ -33,6 +17,10 @@ border-color: var(--color-secondary); } +.editor-toolbar.fullscreen { + background: var(--color-body); +} + .editor-toolbar button { border: none !important; color: var(--color-text-light); @@ -55,6 +43,24 @@ background: var(--color-active); } +/* hide preview button, we have the preview tab for this */ +.editor-toolbar:not(.fullscreen) .preview { + display: none; +} + +/* hide revert button in fullscreen, it breaks the page */ +.editor-toolbar.fullscreen .revert-to-textarea { + display: none; +} + +.editor-preview { + background-color: var(--color-body); +} + +.editor-preview-side { + border-color: var(--color-secondary); +} + .editor-statusbar { color: var(--color-text-light); } diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index bf8722690..bb4bee280 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -2040,26 +2040,8 @@ } &.new { - .CodeMirror { - .CodeMirror-code { - font-family: var(--fonts-monospace); - - .cm-comment { - background: inherit; - } - } - } - - .editor-preview { - background-color: white; - } - .ui.attached.tabular.menu.previewtabs { margin-bottom: 15px; - - & + .field .editor-toolbar:not(.fullscreen) a.fa-eye { - display: none; - } } } diff --git a/web_src/less/codemirror/base.less b/web_src/less/codemirror/base.less new file mode 100644 index 000000000..873445746 --- /dev/null +++ b/web_src/less/codemirror/base.less @@ -0,0 +1,41 @@ +.EasyMDEContainer .CodeMirror { + color: var(--color-input-text); + background-color: var(--color-input-background); + border-color: var(--color-secondary); + font: 14px var(--fonts-monospace); + + &.cm-s-default { + border-radius: var(--border-radius); + padding: 0 !important; + } + + &.CodeMirror-fullscreen.CodeMirror-focused { + border-right: 1px solid var(--color-primary) !important; + } +} + +.CodeMirror-cursor { + border-color: var(--color-caret) !important; +} + +.CodeMirror .cm-comment { + background: inherit !important; +} + +.CodeMirror .CodeMirror-code { + font: 14px var(--fonts-monospace); +} + +.CodeMirror-selected { + background: var(--color-primary-light-1) !important; + color: var(--color-white) !important; +} + +.CodeMirror-placeholder { + color: var(--color-placeholder-text) !important; + opacity: 1 !important; +} + +.CodeMirror-focused { + border-color: var(--color-primary) !important; +} diff --git a/web_src/less/codemirror/dark.less b/web_src/less/codemirror/dark.less new file mode 100644 index 000000000..d0e954df5 --- /dev/null +++ b/web_src/less/codemirror/dark.less @@ -0,0 +1,89 @@ +.CodeMirror { + &.cm-s-default, + &.cm-s-paper { + .cm-property { + color: #a0cc75; + } + + .cm-header { + color: #9daccc; + } + + .cm-quote { + color: #009900; + } + + .cm-keyword { + color: #cc8a61; + } + + .cm-atom { + color: #ef5e77; + } + + .cm-number { + color: #ff5656; + } + + .cm-def { + color: #e4e4e4; + } + + .cm-variable-2 { + color: #00bdbf; + } + + .cm-variable-3 { + color: #008855; + } + + .cm-comment { + color: #8e9ab3; + } + + .cm-string { + color: #a77272; + } + + .cm-string-2 { + color: #ff5500; + } + + .cm-meta, + .cm-qualifier { + color: #ffb176; + } + + .cm-builtin { + color: #b7c951; + } + + .cm-bracket { + color: #999977; + } + + .cm-tag { + color: #f1d273; + } + + .cm-attribute { + color: #bfcc70; + } + + .cm-hr { + color: #999999; + } + + .cm-url { + color: #c5cfd0; + } + + .cm-link { + color: #d8c792; + } + + .cm-error { + color: #dbdbeb; + } + } +} diff --git a/web_src/less/codemirror/light.less b/web_src/less/codemirror/light.less new file mode 100644 index 000000000..aa89263bc --- /dev/null +++ b/web_src/less/codemirror/light.less @@ -0,0 +1 @@ +/* Placeholder, there is no light theme, it uses CM defaults */ diff --git a/web_src/less/index.less b/web_src/less/index.less index 0aa4a2f8f..e95cb72eb 100644 --- a/web_src/less/index.less +++ b/web_src/less/index.less @@ -16,6 +16,8 @@ @import "./chroma/base.less"; @import "./chroma/light.less"; +@import "./codemirror/base.less"; +@import "./codemirror/light.less"; @import "_svg"; @import "_tribute"; diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index 091cd2875..35a0e88d8 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -1,4 +1,5 @@ @import "../chroma/dark.less"; +@import "../codemirror/dark.less"; :root { --is-dark-theme: true; @@ -292,19 +293,6 @@ a.ui.basic.green.label:hover { background-color: #393d4a !important; } -.repository.file.editor.edit, -.repository.wiki.new .CodeMirror { - .editor-preview, - .editor-preview-side, - & + .editor-preview-side { - background: #353945; - - .markup.ui.segment { - border-width: 0; - } - } -} - .overflow.menu .items .item { color: #9d9d9d; } @@ -445,99 +433,6 @@ td.blob-excerpt { border-right-color: var(--color-secondary) !important; } -/* code mirror dark theme */ - -.CodeMirror { - &.cm-s-default, - &.cm-s-paper { - .cm-property { - color: #a0cc75; - } - - .cm-header { - color: #9daccc; - } - - .cm-quote { - color: #009900; - } - - .cm-keyword { - color: #cc8a61; - } - - .cm-atom { - color: #ef5e77; - } - - .cm-number { - color: #ff5656; - } - - .cm-def { - color: #e4e4e4; - } - - .cm-variable-2 { - color: #00bdbf; - } - - .cm-variable-3 { - color: #008855; - } - - .cm-comment { - color: #8e9ab3; - } - - .cm-string { - color: #a77272; - } - - .cm-string-2 { - color: #ff5500; - } - - .cm-meta, - .cm-qualifier { - color: #ffb176; - } - - .cm-builtin { - color: #b7c951; - } - - .cm-bracket { - color: #999977; - } - - .cm-tag { - color: #f1d273; - } - - .cm-attribute { - color: #bfcc70; - } - - .cm-hr { - color: #999999; - } - - .cm-url { - color: #c5cfd0; - } - - .cm-link { - color: #d8c792; - } - - .cm-error { - /* color: #ff6e00; */ - color: #dbdbeb; - } - } -} - footer .container .links > * { border-left-color: #888; }