diff options
Diffstat (limited to 'subprojects/frontend/src/editor/EditorTheme.ts')
-rw-r--r-- | subprojects/frontend/src/editor/EditorTheme.ts | 48 |
1 files changed, 39 insertions, 9 deletions
diff --git a/subprojects/frontend/src/editor/EditorTheme.ts b/subprojects/frontend/src/editor/EditorTheme.ts index c983a378..fe5ba58e 100644 --- a/subprojects/frontend/src/editor/EditorTheme.ts +++ b/subprojects/frontend/src/editor/EditorTheme.ts | |||
@@ -14,20 +14,28 @@ export default styled('div', { | |||
14 | name: 'EditorTheme', | 14 | name: 'EditorTheme', |
15 | shouldForwardProp: (propName) => propName !== 'showLineNumbers', | 15 | shouldForwardProp: (propName) => propName !== 'showLineNumbers', |
16 | })<{ showLineNumbers: boolean }>(({ theme, showLineNumbers }) => { | 16 | })<{ showLineNumbers: boolean }>(({ theme, showLineNumbers }) => { |
17 | const editorFontStyle = { | ||
18 | ...theme.typography.editor, | ||
19 | [theme.breakpoints.down('sm')]: { | ||
20 | fontSize: '0.875rem', | ||
21 | lineHeight: 1.43, | ||
22 | }, | ||
23 | }; | ||
24 | |||
17 | const generalStyle: CSSObject = { | 25 | const generalStyle: CSSObject = { |
18 | background: theme.palette.background.default, | 26 | background: theme.palette.background.default, |
19 | '&, .cm-editor': { | 27 | '&, .cm-editor': { |
20 | height: '100%', | 28 | height: '100%', |
21 | }, | 29 | }, |
22 | '.cm-scroller': { | 30 | '.cm-scroller': { |
23 | ...theme.typography.editor, | ||
24 | color: theme.palette.text.secondary, | 31 | color: theme.palette.text.secondary, |
25 | }, | 32 | }, |
26 | '.cm-gutters': { | 33 | '.cm-gutters': { |
27 | background: 'transparent', | 34 | background: theme.palette.background.default, |
28 | border: 'none', | 35 | border: 'none', |
29 | }, | 36 | }, |
30 | '.cm-content': { | 37 | '.cm-content': { |
38 | ...editorFontStyle, | ||
31 | padding: 0, | 39 | padding: 0, |
32 | }, | 40 | }, |
33 | '.cm-activeLine': { | 41 | '.cm-activeLine': { |
@@ -138,6 +146,7 @@ export default styled('div', { | |||
138 | 146 | ||
139 | const lineNumberStyle: CSSObject = { | 147 | const lineNumberStyle: CSSObject = { |
140 | '.cm-lineNumbers': { | 148 | '.cm-lineNumbers': { |
149 | ...editorFontStyle, | ||
141 | color: theme.palette.highlight.lineNumber, | 150 | color: theme.palette.highlight.lineNumber, |
142 | ...(!showLineNumbers && { | 151 | ...(!showLineNumbers && { |
143 | display: 'none !important', | 152 | display: 'none !important', |
@@ -157,7 +166,7 @@ export default styled('div', { | |||
157 | borderBottom: `1px solid ${theme.palette.outer.border}`, | 166 | borderBottom: `1px solid ${theme.palette.outer.border}`, |
158 | marginBottom: theme.spacing(1), | 167 | marginBottom: theme.spacing(1), |
159 | }, | 168 | }, |
160 | '.cm-panel, .cm-panel.cm-search': { | 169 | '.cm-panel': { |
161 | color: theme.palette.text.primary, | 170 | color: theme.palette.text.primary, |
162 | background: theme.palette.outer.background, | 171 | background: theme.palette.outer.background, |
163 | borderTop: `1px solid ${theme.palette.outer.border}`, | 172 | borderTop: `1px solid ${theme.palette.outer.border}`, |
@@ -207,12 +216,21 @@ export default styled('div', { | |||
207 | [`.cm-tooltip .cm-diagnostic-${severity}::before`]: { | 216 | [`.cm-tooltip .cm-diagnostic-${severity}::before`]: { |
208 | background: tooltipColor, | 217 | background: tooltipColor, |
209 | }, | 218 | }, |
219 | [`.cm-panel.cm-panel-lint .cm-diagnostic-${severity}::before`]: { | ||
220 | top: 8, | ||
221 | [theme.breakpoints.down('sm')]: { | ||
222 | top: 6, | ||
223 | }, | ||
224 | }, | ||
210 | [`.cm-lint-marker-${severity}`]: { | 225 | [`.cm-lint-marker-${severity}`]: { |
211 | ...iconStyle, | 226 | ...iconStyle, |
212 | display: 'block', | 227 | display: 'block', |
213 | margin: '4px 0', | 228 | margin: '4px 0', |
214 | // Remove original CodeMirror icon. | 229 | // Remove original CodeMirror icon. |
215 | content: '""', | 230 | content: '""', |
231 | [theme.breakpoints.down('sm')]: { | ||
232 | margin: '2px 0', | ||
233 | }, | ||
216 | '::before': { | 234 | '::before': { |
217 | // Remove original CodeMirror icon. | 235 | // Remove original CodeMirror icon. |
218 | content: '""', | 236 | content: '""', |
@@ -247,13 +265,16 @@ export default styled('div', { | |||
247 | display: 'none', | 265 | display: 'none', |
248 | }, | 266 | }, |
249 | ul: { | 267 | ul: { |
250 | maxHeight: `max(${28 * 4}px, 20vh)`, | 268 | maxHeight: `max(${32 * 4}px, 20vh)`, |
251 | li: { | 269 | li: { |
252 | cursor: 'pointer', | 270 | cursor: 'pointer', |
253 | color: theme.palette.text.primary, | 271 | color: theme.palette.text.primary, |
254 | }, | 272 | }, |
255 | '.cm-diagnostic': { | 273 | '.cm-diagnostic': { |
256 | ...theme.typography.body2, | 274 | ...theme.typography.body1, |
275 | [theme.breakpoints.down('sm')]: { | ||
276 | ...theme.typography.body2, | ||
277 | }, | ||
257 | '&[aria-selected="true"]': { | 278 | '&[aria-selected="true"]': { |
258 | color: theme.palette.text.primary, | 279 | color: theme.palette.text.primary, |
259 | background: 'transparent', | 280 | background: 'transparent', |
@@ -264,6 +285,9 @@ export default styled('div', { | |||
264 | theme.palette.text.primary, | 285 | theme.palette.text.primary, |
265 | theme.palette.action.hoverOpacity, | 286 | theme.palette.action.hoverOpacity, |
266 | ), | 287 | ), |
288 | '@media (hover: none)': { | ||
289 | background: 'transparent', | ||
290 | }, | ||
267 | }, | 291 | }, |
268 | }, | 292 | }, |
269 | }, | 293 | }, |
@@ -301,12 +325,15 @@ export default styled('div', { | |||
301 | background: theme.palette.text.primary, | 325 | background: theme.palette.text.primary, |
302 | border: 'none', | 326 | border: 'none', |
303 | cursor: 'pointer', | 327 | cursor: 'pointer', |
328 | [theme.breakpoints.down('sm')]: { | ||
329 | margin: '2px 0', | ||
330 | }, | ||
304 | }, | 331 | }, |
305 | [`.${editorClassNames.foldMarkerClosed}`]: { | 332 | [`.${editorClassNames.foldMarkerClosed}`]: { |
306 | transform: 'rotate(-90deg)', | 333 | transform: 'rotate(-90deg)', |
307 | }, | 334 | }, |
308 | [`.${editorClassNames.foldPlaceholder}`]: { | 335 | [`.${editorClassNames.foldPlaceholder}`]: { |
309 | ...theme.typography.editor, | 336 | ...editorFontStyle, |
310 | padding: 0, | 337 | padding: 0, |
311 | fontFamily: 'inherit', | 338 | fontFamily: 'inherit', |
312 | background: 'transparent', | 339 | background: 'transparent', |
@@ -326,13 +353,16 @@ export default styled('div', { | |||
326 | theme.palette.highlight.foldPlaceholder, | 353 | theme.palette.highlight.foldPlaceholder, |
327 | theme.palette.action.hoverOpacity, | 354 | theme.palette.action.hoverOpacity, |
328 | ), | 355 | ), |
356 | '@media (hover: none)': { | ||
357 | backgroundColor: 'transparent', | ||
358 | }, | ||
329 | }, | 359 | }, |
330 | }, | 360 | }, |
331 | }; | 361 | }; |
332 | 362 | ||
333 | const completionStyle: CSSObject = { | 363 | const completionStyle: CSSObject = { |
334 | '.cm-tooltip.cm-tooltip-autocomplete': { | 364 | '.cm-tooltip.cm-tooltip-autocomplete': { |
335 | ...theme.typography.editor, | 365 | ...editorFontStyle, |
336 | background: theme.palette.background.paper, | 366 | background: theme.palette.background.paper, |
337 | borderRadius: theme.shape.borderRadius, | 367 | borderRadius: theme.shape.borderRadius, |
338 | overflow: 'hidden', | 368 | overflow: 'hidden', |
@@ -346,11 +376,11 @@ export default styled('div', { | |||
346 | color: theme.palette.text.secondary, | 376 | color: theme.palette.text.secondary, |
347 | }, | 377 | }, |
348 | '.cm-completionLabel': { | 378 | '.cm-completionLabel': { |
349 | ...theme.typography.editor, | 379 | ...editorFontStyle, |
350 | color: theme.palette.text.primary, | 380 | color: theme.palette.text.primary, |
351 | }, | 381 | }, |
352 | '.cm-completionDetail': { | 382 | '.cm-completionDetail': { |
353 | ...theme.typography.editor, | 383 | ...editorFontStyle, |
354 | color: theme.palette.text.secondary, | 384 | color: theme.palette.text.secondary, |
355 | fontStyle: 'normal', | 385 | fontStyle: 'normal', |
356 | }, | 386 | }, |