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>
This commit is contained in:
silverwind
GitHub
parent
660c30db80
commit
3f34f09537
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
41
web_src/less/codemirror/base.less
Normal file
41
web_src/less/codemirror/base.less
Normal file
|
|
@ -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;
|
||||
}
|
||||
89
web_src/less/codemirror/dark.less
Normal file
89
web_src/less/codemirror/dark.less
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
1
web_src/less/codemirror/light.less
Normal file
1
web_src/less/codemirror/light.less
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user