core
/
gitea
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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 2021-12-20 12:07:49 -08:00 committed by GitHub
parent 660c30db80
commit 3f34f09537
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 157 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web_src/less/_base.less
View File

@ -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;

38
web_src/less/_editor.less
View File

@ -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);
}

18
web_src/less/_repository.less
View File

@ -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
View 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
View 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
View File

@ -0,0 +1 @@
/* Placeholder, there is no light theme, it uses CM defaults */

2
web_src/less/index.less
View File

@ -16,6 +16,8 @@
@import "./chroma/base.less";
@import "./chroma/light.less";
@import "./codemirror/base.less";
@import "./codemirror/light.less";
@import "_svg";
@import "_tribute";

107
web_src/less/themes/theme-arc-green.less
View File

@ -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;
}