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>

Changes

8 changed files (+157/-151)

• 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;
• 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); }
• 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; - } } }
• web_src/less/codemirror/base.less (new)
  • @@ -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; + }
• web_src/less/codemirror/dark.less (new)
  • @@ -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; + } + } + }
• web_src/less/codemirror/light.less (new)
  • @@ -0,0 +1,1 @@
    + /* Placeholder, there is no light theme, it uses CM defaults */
• 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";
• 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; }