- 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>tags/v1.16.0-rc1
@@ -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; |
@@ -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); | |||
} |
@@ -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; | |||
} | |||
} | |||
} | |||
@@ -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; | |||
} |
@@ -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; | |||
} | |||
} | |||
} |
@@ -0,0 +1 @@ | |||
/* Placeholder, there is no light theme, it uses CM defaults */ |
@@ -16,6 +16,8 @@ | |||
@import "./chroma/base.less"; | |||
@import "./chroma/light.less"; | |||
@import "./codemirror/base.less"; | |||
@import "./codemirror/light.less"; | |||
@import "_svg"; | |||
@import "_tribute"; |
@@ -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; | |||
} |