third_party
/
gitea
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Extract CodeMirror styles (#17960)

Browse Source 
- 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>
tokarchuk/v1.17
silverwind 3 years ago 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 all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 12
      web_src/less/_base.less
  2. 38
      web_src/less/_editor.less
  3. 18
      web_src/less/_repository.less
  4. 41
      web_src/less/codemirror/base.less
  5. 89
      web_src/less/codemirror/dark.less
  6. 1
      web_src/less/codemirror/light.less
  7. 2
      web_src/less/index.less
  8. 107
      web_src/less/themes/theme-arc-green.less

12
web_src/less/_base.less
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape View File

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

2
web_src/less/index.less
Unescape 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
Unescape 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;
}

Write Preview
Loading…
Cancel
Save