diff options
author | 2021-10-30 18:14:11 +0200 | |
---|---|---|
committer | 2021-10-31 19:26:14 +0100 | |
commit | aaa6fc289e49d715b71c908aefd156ee8c19491f (patch) | |
tree | bfe7685018adec576267c2d80f703135e5b552e0 /language-web/src/main/js/editor/EditorParent.ts | |
parent | feat(web): use theme colors in error markers (diff) | |
download | refinery-aaa6fc289e49d715b71c908aefd156ee8c19491f.tar.gz refinery-aaa6fc289e49d715b71c908aefd156ee8c19491f.tar.zst refinery-aaa6fc289e49d715b71c908aefd156ee8c19491f.zip |
fix(web): make lint panel readable
Diffstat (limited to 'language-web/src/main/js/editor/EditorParent.ts')
-rw-r--r-- | language-web/src/main/js/editor/EditorParent.ts | 47 |
1 files changed, 47 insertions, 0 deletions
diff --git a/language-web/src/main/js/editor/EditorParent.ts b/language-web/src/main/js/editor/EditorParent.ts index 240c73e9..a19759a4 100644 --- a/language-web/src/main/js/editor/EditorParent.ts +++ b/language-web/src/main/js/editor/EditorParent.ts | |||
@@ -77,13 +77,38 @@ export const EditorParent = styled('div')(({ theme }) => { | |||
77 | color: theme.palette.text.secondary, | 77 | color: theme.palette.text.secondary, |
78 | }, | 78 | }, |
79 | '.cm-panel': { | 79 | '.cm-panel': { |
80 | '&, & button, & input': { | ||
81 | fontFamily: '"Roboto","Helvetica","Arial",sans-serif', | ||
82 | }, | ||
80 | background: theme.palette.background.paper, | 83 | background: theme.palette.background.paper, |
81 | borderTop: `1px solid ${theme.palette.divider}`, | 84 | borderTop: `1px solid ${theme.palette.divider}`, |
82 | 'button[name="close"]': { | 85 | 'button[name="close"]': { |
86 | background: 'transparent', | ||
83 | color: theme.palette.text.secondary, | 87 | color: theme.palette.text.secondary, |
84 | cursor: 'pointer', | 88 | cursor: 'pointer', |
85 | }, | 89 | }, |
86 | }, | 90 | }, |
91 | '.cm-panel.cm-panel-lint': { | ||
92 | 'button[name="close"]': { | ||
93 | // Close button interferes with scrollbar, so we better hide it. | ||
94 | // The panel can still be closed from the toolbar. | ||
95 | display: 'none', | ||
96 | }, | ||
97 | ul: { | ||
98 | li: { | ||
99 | borderBottom: `1px solid ${theme.palette.divider}`, | ||
100 | cursor: 'pointer', | ||
101 | }, | ||
102 | '[aria-selected]': { | ||
103 | background: '#3e4453', | ||
104 | color: theme.palette.text.primary, | ||
105 | }, | ||
106 | '&:focus [aria-selected]': { | ||
107 | background: theme.palette.primary.main, | ||
108 | color: theme.palette.primary.contrastText, | ||
109 | }, | ||
110 | }, | ||
111 | }, | ||
87 | '.cm-foldPlaceholder': { | 112 | '.cm-foldPlaceholder': { |
88 | background: theme.palette.background.paper, | 113 | background: theme.palette.background.paper, |
89 | borderColor: theme.palette.text.disabled, | 114 | borderColor: theme.palette.text.disabled, |
@@ -108,6 +133,28 @@ export const EditorParent = styled('div')(({ theme }) => { | |||
108 | '.cmt-variableName': { | 133 | '.cmt-variableName': { |
109 | color: '#c8ae9d', | 134 | color: '#c8ae9d', |
110 | }, | 135 | }, |
136 | '.cm-tooltip-autocomplete': { | ||
137 | background: theme.palette.background.paper, | ||
138 | boxShadow: `0px 2px 4px -1px rgb(0 0 0 / 20%), | ||
139 | 0px 4px 5px 0px rgb(0 0 0 / 14%), | ||
140 | 0px 1px 10px 0px rgb(0 0 0 / 12%)`, | ||
141 | '.cm-completionIcon': { | ||
142 | color: theme.palette.text.secondary, | ||
143 | }, | ||
144 | '.cm-completionLabel': { | ||
145 | color: theme.palette.text.primary, | ||
146 | }, | ||
147 | '.cm-completionDetail': { | ||
148 | color: theme.palette.text.secondary, | ||
149 | fontStyle: 'normal', | ||
150 | }, | ||
151 | '[aria-selected]': { | ||
152 | background: `${theme.palette.primary.main} !important`, | ||
153 | '.cm-completionIcon, .cm-completionLabel, .cm-completionDetail': { | ||
154 | color: theme.palette.primary.contrastText, | ||
155 | }, | ||
156 | }, | ||
157 | }, | ||
111 | '.cm-completionIcon': { | 158 | '.cm-completionIcon': { |
112 | width: 16, | 159 | width: 16, |
113 | padding: 0, | 160 | padding: 0, |