aboutsummaryrefslogtreecommitdiffstats
path: root/language-web/src/main/css
diff options
context:
space:
mode:
authorLibravatar Kristóf Marussy <kristof@marussy.com>2021-10-10 01:11:33 +0200
committerLibravatar Kristóf Marussy <kristof@marussy.com>2021-10-31 19:26:09 +0100
commit2ada4a06167b3a00a4c4c69e1b0c78b00ef1db5f (patch)
tree24f0b0bf8f8959ebcf0722456da2d6260c6f1421 /language-web/src/main/css
parentMerge pull request #7 from golej-marci/language-to-store (diff)
downloadrefinery-2ada4a06167b3a00a4c4c69e1b0c78b00ef1db5f.tar.gz
refinery-2ada4a06167b3a00a4c4c69e1b0c78b00ef1db5f.tar.zst
refinery-2ada4a06167b3a00a4c4c69e1b0c78b00ef1db5f.zip
feat(web): add CodeMirror 6 editor
Diffstat (limited to 'language-web/src/main/css')
-rw-r--r--language-web/src/main/css/index.scss213
1 files changed, 0 insertions, 213 deletions
diff --git a/language-web/src/main/css/index.scss b/language-web/src/main/css/index.scss
index 54f3a654..ad876aaf 100644
--- a/language-web/src/main/css/index.scss
+++ b/language-web/src/main/css/index.scss
@@ -1,13 +1,6 @@
1@use 'sass:map';
2@use '@fontsource/roboto/scss/mixins' as Roboto; 1@use '@fontsource/roboto/scss/mixins' as Roboto;
3@use '@fontsource/jetbrains-mono/scss/mixins' as JetbrainsMono; 2@use '@fontsource/jetbrains-mono/scss/mixins' as JetbrainsMono;
4 3
5@import 'codemirror/lib/codemirror';
6@import 'codemirror/addon/hint/show-hint';
7@import 'codemirror/theme/material-darker';
8
9@import './themes';
10
11$fontWeights: 300, 400, 500, 700; 4$fontWeights: 300, 400, 500, 700;
12@each $weight in $fontWeights { 5@each $weight in $fontWeights {
13 @include Roboto.fontFace($fontName: 'Roboto', $weight: $weight); 6 @include Roboto.fontFace($fontName: 'Roboto', $weight: $weight);
@@ -21,209 +14,3 @@ $monoFontWeights: 400, 700;
21} 14}
22@include JetbrainsMono.fontFaceVariable($fontName: 'JetBrains MonoVariable'); 15@include JetbrainsMono.fontFaceVariable($fontName: 'JetBrains MonoVariable');
23@include JetbrainsMono.fontFaceVariable($fontName: 'JetBrains MonoVariable', $style: italic); 16@include JetbrainsMono.fontFaceVariable($fontName: 'JetBrains MonoVariable', $style: italic);
24
25body {
26 font-family: 'Roboto', sans-serif;
27}
28
29.CodeMirror {
30 height: 100%;
31}
32
33.problem-fallback-editor {
34 display: block;
35 height: 100%;
36 width: 100%;
37 resize: none;
38 border: none;
39 outline: none;
40 padding: 4px 4px 4px 16px;
41 white-space: pre;
42 overflow-wrap: normal;
43 overflow: auto;
44}
45
46.CodeMirror, .CodeMirror-hints, .problem-fallback-editor {
47 font-size: 16px;
48 font-family: 'JetBrains MonoVariable', 'JetBrains Mono', monospace;
49 font-feature-settings: 'liga', 'calt';
50 font-weight: 400;
51 text-rendering: optimizeLegibility;
52 line-height: 1.35;
53 letter-spacing: 0;
54}
55
56@each $themeName, $theme in $themes {
57 .cm-s-problem-#{$themeName} {
58 &.CodeMirror {
59 background: map.get($theme, 'background');
60 color: map.get($theme, 'foreground');
61 }
62
63 &.problem-fallback-editor {
64 background: map.get($theme, 'background');
65 color: map.get($theme, 'foreground');
66 caret-color: map.get($theme, 'cursor');
67
68 &::selection {
69 background: map.get($theme, 'selection');
70 }
71 }
72
73 .CodeMirror-gutters {
74 background: map.get($theme, 'background');
75 border: none;
76 }
77
78 .CodeMirror-cursor {
79 border-left: 1px solid map.get($theme, 'cursor');
80 }
81
82 div.CodeMirror-selected,
83 &.CodeMirror-focused div.CodeMirror-selected,
84 .CodeMirror-line::selection,
85 .CodeMirror-line > span::selection,
86 .CodeMirror-line > span > span::selection {
87 background: map.get($theme, 'selection');
88 }
89
90 .CodeMirror-guttermarker,
91 .CodeMirror-guttermarker-subtle,
92 .CodeMirror-linenumber {
93 color: map.get($theme, 'lineNumber');
94 }
95
96 .CodeMirror-activeline-background {
97 background: map.get($theme, 'currentLine');
98 }
99
100 .CodeMirror-activeline-gutter {
101 background: map.get($theme, 'currentLine');
102
103 .CodeMirror-guttermarker,
104 .CodeMirror-guttermarker-subtle,
105 .CodeMirror-linenumber {
106 color: map.get($theme, 'foreground');
107 }
108 }
109
110 .cm-keyword {
111 color: map.get($theme, 'keyword');
112 }
113
114 .cm-number {
115 color: map.get($theme, 'number');
116 }
117
118 .cm-lparen, .cm-rparen {
119 color: map.get($theme, 'delimiter');
120 }
121
122 .cm-comment {
123 color: map.get($theme, 'comment');
124 font-style: italic;
125 }
126
127 .problem-predicate, .problem-class, .problem-reference, .problem-enum {
128 color: map.get($theme, 'predicate');
129 }
130
131 .problem-unique-node {
132 color: map.get($theme, 'uniqueNode');
133 }
134
135 .problem-variable {
136 color: map.get($theme, 'variable');
137 }
138 }
139}
140
141.CodeMirror-hints {
142 background: #333;
143 border: 0;
144 border-radius: 4px;
145 box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
146 0 5px 8px 0 rgba(0, 0, 0, 0.14),
147 0 1px 8px 0 rgba(0, 0, 0, 0.12);
148 padding: 0;
149}
150
151.CodeMirror-hint {
152 color: #fff;
153 border-radius: 0;
154}
155
156li.CodeMirror-hint-active {
157 background: rgba(128, 203, 196, 0.2);
158}
159
160.annotations-gutter {
161 width: 12px;
162}
163
164.xtext-annotation_error {
165 width: 12px;
166 height: 1em;
167 background-image: url('images/error_an.gif');
168 background-repeat: no-repeat;
169 background-position: bottom;
170}
171
172.xtext-annotation_warning {
173 width: 12px;
174 height: 1em;
175 background-image: url('images/warning_an.gif');
176 background-repeat: no-repeat;
177 background-position: bottom;
178}
179
180.xtext-annotation_info {
181 width: 12px;
182 height: 1em;
183 background-image: url('images/info_an.gif');
184 background-repeat: no-repeat;
185 background-position: bottom;
186}
187
188.xtext-marker_error {
189 z-index: 30;
190 background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAABmJLR0QA/wD/AP+gvaeTAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==");
191 background-repeat: repeat-x;
192 background-position: left bottom;
193}
194
195.xtext-marker_warning {
196 z-index: 20;
197 background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAABmJLR0QA/wD/AP+gvaeTAAAAMklEQVQI12NkgIIvJ3QXMjAwdDN+OaEbysDA4MPAwNDNwMCwiOHLCd1zX07o6kBVGQEAKBANtobskNMAAAAASUVORK5CYII=");
198 background-repeat: repeat-x;
199 background-position: left bottom;
200}
201
202.xtext-marker_info {
203 z-index: 10;
204 background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAABmJLR0QA/wD/AP+gvaeTAAAANklEQVQI12NkgIIVRx8tZGBg6GZccfRRKAMDgw8DA0M3AwPDIiYGBoZKBgaG7ghruSsMDAwpABH5CoqwzCoTAAAAAElFTkSuQmCC");
205 background-repeat: repeat-x;
206 background-position: left bottom;
207}
208
209.xtext-marker_read {
210 background: rgba(128, 203, 196, 0.2);
211 display: inline-block;
212}
213
214
215.xtext-marker_write {
216 background: rgba(255, 229, 100, 0.2);
217 display: inline-block;
218}
219
220.problem-abstract {
221 font-style: italic;
222}
223
224.problem-containment {
225 font-weight: 700;
226}
227.problem-new-node {
228 font-style: italic;
229}