jevstrudel.git / website / src / repl / Repl.css
Repl.cssannotatedRepl.csssource206 lines · 4.1 KB · raw
1.darken::before {
2  content: ' ';
3  position: fixed;
4  top: 0;
5  left: 0;
6  width: 100vw;
7  height: 100vh;
8  display: block;
9  background: black;
10  opacity: 0.5;
11}
12
13.code-container .cm-scroller {
14  padding-top: 10px !important;
15  height: 100%;
16  font-family: inherit;
17}
18.code-container .cm-content {
19  padding-bottom: 50vh;
20}
21.code-container .cm-line > * {
22  background: var(--lineBackground);
23}
24
25.code-container .cm-editor {
26  background-color: transparent !important;
27  height: 100%;
28  z-index: 11;
29}
30
31.code-container .cm-theme {
32  width: 100%;
33  height: 100%;
34}
35
36.code-container .cm-theme-light {
37  width: 100%;
38}
39
40.code-container .cm-cursorLayer {
41  animation-name: inherit !important;
42}
43
44.code-container .cm-cursor {
45  border-left: 2px solid currentcolor !important;
46}
47
48.code-container .cm-foldGutter {
49  display: none !important;
50}
51
52.code-container .cm-focused {
53  outline: none;
54}
55
56.code-container .cm-matchingBracket {
57  text-decoration: underline 0.18rem;
58  text-underline-offset: 0.22rem;
59}
60
61/* Override default styles from the codemirror inline css for autocomplete info tooltip*/
62.cm-tooltip.cm-completionInfo {
63  padding: 0 !important;
64  border: 1px solid var(--foreground) !important;
65  border-radius: 4px !important;
66  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
67  max-width: 500px !important;
68  min-width: 300px !important;
69  max-height: 400px !important;
70  background-color: var(--lineHighlight) !important;
71  overflow: auto;
72  background: var(--background) !important;
73}
74
75/* Main tooltip container */
76.autocomplete-info-container {
77  padding: 12px !important;
78  border-radius: 4px !important;
79  color: var(--foreground);
80  font-family: var(--font-family, 'SF Mono', 'Monaco', monospace);
81  font-size: var(--font-size, 13px);
82  line-height: 1.4;
83  max-width: 600px;
84  height: 100%;
85  min-width: 400px;
86  white-space: normal !important;
87  overflow-y: auto !important;
88}
89
90.autocomplete-info-tooltip {
91  overflow-y: auto !important;
92}
93
94.autocomplete-info-function-description {
95  white-space: pre-wrap !important;
96}
97
98.autocomplete-info-function-name {
99  font-size: 15px;
100  font-weight: 600;
101  color: var(--foreground);
102  margin: 0 0 8px 0;
103}
104
105.autocomplete-info-function-synonyms {
106  margin: 0 0 12px 0;
107  color: var(--foreground);
108  line-height: 1.5;
109  opacity: 0.8;
110}
111
112.autocomplete-info-function-description {
113  margin: 0 0 12px 0;
114  color: var(--foreground);
115  line-height: 1.5;
116  opacity: 0.8;
117}
118
119.autocomplete-info-section-title {
120  font-size: 12px;
121  font-weight: 600;
122  color: var(--foreground);
123  margin: 16px 0 6px 0;
124  text-transform: uppercase;
125  letter-spacing: 0.5px;
126}
127
128.autocomplete-info-section-title:first-child {
129  margin-top: 0;
130}
131
132.autocomplete-info-params-section {
133  margin-top: 12px;
134}
135
136.autocomplete-info-params-list {
137  list-style: none;
138  margin: 0;
139  padding: 0;
140}
141
142.autocomplete-info-param-item {
143  margin-bottom: 8px;
144  padding: 8px;
145  background-color: var(--lineBackground);
146  border-radius: 3px;
147  border-left: 2px solid var(--foreground, #555);
148}
149
150.autocomplete-info-param-item:last-child {
151  margin-bottom: 0;
152}
153
154.autocomplete-info-param-name {
155  font-weight: 600;
156  color: var(--variable, var(--foreground));
157  margin-right: 8px;
158}
159
160.autocomplete-info-param-type {
161  color: var(--comment);
162  font-size: 12px;
163  background-color: var(--gutterForeground);
164  padding: 1px 4px;
165  border-radius: 2px;
166}
167
168.autocomplete-info-param-desc {
169  color: var(--foreground);
170  font-size: 10px;
171  margin-top: 4px;
172  line-height: 1.4;
173  opacity: 0.7;
174}
175
176.autocomplete-info-examples-section {
177  margin-top: 12px;
178}
179
180.autocomplete-info-example-code {
181  background: var(--lineBackground);
182  color: var(--foreground);
183  padding: 8px;
184  border-radius: 3px;
185  font-family: var(--font-family, 'SF Mono', 'Monaco', monospace);
186  font-size: 12px;
187  line-height: 1.5;
188  margin: 4px 0;
189  overflow-x: auto;
190  white-space: pre;
191  border: 1px solid var(--foreground, #3a3a3a);
192}
193
194.autocomplete-info-tooltip::-webkit-scrollbar {
195  width: 4px;
196}
197
198.autocomplete-info-tooltip::-webkit-scrollbar-track {
199}
200
201.autocomplete-info-tooltip::-webkit-scrollbar-thumb {
202  border-radius: 2px;
203}
204
205.autocomplete-info-tooltip::-webkit-scrollbar-thumb:hover {
206}