Skip to content

Commit 0d00629

Browse files
silverwindclaudeCopilot
authored
Inline and lazy-load EasyMDE CSS, fix border colors (#36714)
Replace the external easymde.min.css import with an inlined and lazy-loaded CSS file that uses proper theme variables for border colors. All EasyMDE/CodeMirror rules are scoped under `.EasyMDEContainer`, removing the need for !important overrides. - Fixes easymde borders, these were broken since a while now - Scope all easymde styles to .EasyMDEContainer - Inline easymde.min.css and codemirror.css into web_src/css/easymde.css - Lazy-load the CSS alongside the JS in switchToEasyMDE() - Fix .editor-toolbar and .CodeMirror border colors to use --color-input-border matching textarea inputs - Remove unused gutter, line number, and other unconfigured styles - Move .editor-loading to codeeditor.css where it belongs <img width="891" height="518" alt="image" src="https://github.com/user-attachments/assets/87495de5-7872-4645-90e7-96fe0f782f02" /> --------- Signed-off-by: silverwind <me@silverwind.io> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
1 parent 840cf68 commit 0d00629

8 files changed

Lines changed: 495 additions & 154 deletions

File tree

web_src/css/codemirror/base.css

Lines changed: 0 additions & 49 deletions
This file was deleted.

web_src/css/codemirror/dark.css

Lines changed: 44 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,106 @@
1-
.CodeMirror.cm-s-default .cm-property,
2-
.CodeMirror.cm-s-paper .cm-property {
1+
.EasyMDEContainer .CodeMirror.cm-s-default .cm-property,
2+
.EasyMDEContainer .CodeMirror.cm-s-paper .cm-property {
33
color: #a0cc75;
44
}
55

6-
.CodeMirror.cm-s-default .cm-header,
7-
.CodeMirror.cm-s-paper .cm-header {
6+
.EasyMDEContainer .CodeMirror.cm-s-default .cm-header,
7+
.EasyMDEContainer .CodeMirror.cm-s-paper .cm-header {
88
color: #9daccc;
99
}
1010

11-
.CodeMirror.cm-s-default .cm-quote,
12-
.CodeMirror.cm-s-paper .cm-quote {
11+
.EasyMDEContainer .CodeMirror.cm-s-default .cm-quote,
12+
.EasyMDEContainer .CodeMirror.cm-s-paper .cm-quote {
1313
color: #009900;
1414
}
1515

16-
.CodeMirror.cm-s-default .cm-keyword,
17-
.CodeMirror.cm-s-paper .cm-keyword {
16+
.EasyMDEContainer .CodeMirror.cm-s-default .cm-keyword,
17+
.EasyMDEContainer .CodeMirror.cm-s-paper .cm-keyword {
1818
color: #cc8a61;
1919
}
2020

21-
.CodeMirror.cm-s-default .cm-atom,
22-
.CodeMirror.cm-s-paper .cm-atom {
21+
.EasyMDEContainer .CodeMirror.cm-s-default .cm-atom,
22+
.EasyMDEContainer .CodeMirror.cm-s-paper .cm-atom {
2323
color: #ef5e77;
2424
}
2525

26-
.CodeMirror.cm-s-default .cm-number,
27-
.CodeMirror.cm-s-paper .cm-number {
26+
.EasyMDEContainer .CodeMirror.cm-s-default .cm-number,
27+
.EasyMDEContainer .CodeMirror.cm-s-paper .cm-number {
2828
color: #ff5656;
2929
}
3030

31-
.CodeMirror.cm-s-default .cm-def,
32-
.CodeMirror.cm-s-paper .cm-def {
31+
.EasyMDEContainer .CodeMirror.cm-s-default .cm-def,
32+
.EasyMDEContainer .CodeMirror.cm-s-paper .cm-def {
3333
color: #e4e4e4;
3434
}
3535

36-
.CodeMirror.cm-s-default .cm-variable-2,
37-
.CodeMirror.cm-s-paper .cm-variable-2 {
36+
.EasyMDEContainer .CodeMirror.cm-s-default .cm-variable-2,
37+
.EasyMDEContainer .CodeMirror.cm-s-paper .cm-variable-2 {
3838
color: #00bdbf;
3939
}
4040

41-
.CodeMirror.cm-s-default .cm-variable-3,
42-
.CodeMirror.cm-s-paper .cm-variable-3 {
41+
.EasyMDEContainer .CodeMirror.cm-s-default .cm-variable-3,
42+
.EasyMDEContainer .CodeMirror.cm-s-paper .cm-variable-3 {
4343
color: #008855;
4444
}
4545

46-
.CodeMirror.cm-s-default .cm-comment,
47-
.CodeMirror.cm-s-paper .cm-comment {
46+
.EasyMDEContainer .CodeMirror.cm-s-default .cm-comment,
47+
.EasyMDEContainer .CodeMirror.cm-s-paper .cm-comment {
4848
color: #8e9ab3;
4949
}
5050

51-
.CodeMirror.cm-s-default .cm-string,
52-
.CodeMirror.cm-s-paper .cm-string {
51+
.EasyMDEContainer .CodeMirror.cm-s-default .cm-string,
52+
.EasyMDEContainer .CodeMirror.cm-s-paper .cm-string {
5353
color: #a77272;
5454
}
5555

56-
.CodeMirror.cm-s-default .cm-string-2,
57-
.CodeMirror.cm-s-paper .cm-string-2 {
56+
.EasyMDEContainer .CodeMirror.cm-s-default .cm-string-2,
57+
.EasyMDEContainer .CodeMirror.cm-s-paper .cm-string-2 {
5858
color: #ff5500;
5959
}
6060

61-
.CodeMirror.cm-s-default .cm-meta,
62-
.CodeMirror.cm-s-paper .cm-meta,
63-
.CodeMirror.cm-s-default .cm-qualifier,
64-
.CodeMirror.cm-s-paper .cm-qualifier {
61+
.EasyMDEContainer .CodeMirror.cm-s-default .cm-meta,
62+
.EasyMDEContainer .CodeMirror.cm-s-paper .cm-meta,
63+
.EasyMDEContainer .CodeMirror.cm-s-default .cm-qualifier,
64+
.EasyMDEContainer .CodeMirror.cm-s-paper .cm-qualifier {
6565
color: #ffb176;
6666
}
6767

68-
.CodeMirror.cm-s-default .cm-builtin,
69-
.CodeMirror.cm-s-paper .cm-builtin {
68+
.EasyMDEContainer .CodeMirror.cm-s-default .cm-builtin,
69+
.EasyMDEContainer .CodeMirror.cm-s-paper .cm-builtin {
7070
color: #b7c951;
7171
}
7272

73-
.CodeMirror.cm-s-default .cm-bracket,
74-
.CodeMirror.cm-s-paper .cm-bracket {
73+
.EasyMDEContainer .CodeMirror.cm-s-default .cm-bracket,
74+
.EasyMDEContainer .CodeMirror.cm-s-paper .cm-bracket {
7575
color: #999977;
7676
}
7777

78-
.CodeMirror.cm-s-default .cm-tag,
79-
.CodeMirror.cm-s-paper .cm-tag {
78+
.EasyMDEContainer .CodeMirror.cm-s-default .cm-tag,
79+
.EasyMDEContainer .CodeMirror.cm-s-paper .cm-tag {
8080
color: #f1d273;
8181
}
8282

83-
.CodeMirror.cm-s-default .cm-attribute,
84-
.CodeMirror.cm-s-paper .cm-attribute {
83+
.EasyMDEContainer .CodeMirror.cm-s-default .cm-attribute,
84+
.EasyMDEContainer .CodeMirror.cm-s-paper .cm-attribute {
8585
color: #bfcc70;
8686
}
8787

88-
.CodeMirror.cm-s-default .cm-hr,
89-
.CodeMirror.cm-s-paper .cm-hr {
88+
.EasyMDEContainer .CodeMirror.cm-s-default .cm-hr,
89+
.EasyMDEContainer .CodeMirror.cm-s-paper .cm-hr {
9090
color: #999999;
9191
}
9292

93-
.CodeMirror.cm-s-default .cm-url,
94-
.CodeMirror.cm-s-paper .cm-url {
93+
.EasyMDEContainer .CodeMirror.cm-s-default .cm-url,
94+
.EasyMDEContainer .CodeMirror.cm-s-paper .cm-url {
9595
color: #c5cfd0;
9696
}
9797

98-
.CodeMirror.cm-s-default .cm-link,
99-
.CodeMirror.cm-s-paper .cm-link {
98+
.EasyMDEContainer .CodeMirror.cm-s-default .cm-link,
99+
.EasyMDEContainer .CodeMirror.cm-s-paper .cm-link {
100100
color: #d8c792;
101101
}
102102

103-
.CodeMirror.cm-s-default .cm-error,
104-
.CodeMirror.cm-s-paper .cm-error {
103+
.EasyMDEContainer .CodeMirror.cm-s-default .cm-error,
104+
.EasyMDEContainer .CodeMirror.cm-s-paper .cm-error {
105105
color: #dbdbeb;
106106
}

0 commit comments

Comments
 (0)