232 lines
4.4 kB
1
:root {
2
--moonbase-bg: #222034;
3
--moonbase-fg: #fffba6;
4
}
5
6
.moonbase-settings > :first-child {
7
margin-top: 0px;
8
}
9
10
.moonbase-retry-button {
11
padding: 8px;
12
margin-right: 8px;
13
}
14
15
textarea.moonbase-resizeable {
16
resize: vertical;
17
}
18
19
/* Update notice at the top of the client */
20
.moonbase-updates-notice {
21
background-color: var(--moonbase-bg);
22
color: var(--moonbase-fg);
23
--custom-notice-text: var(--moonbase-fg);
24
line-height: unset;
25
height: 36px;
26
}
27
28
.moonbase-updates-notice button {
29
color: var(--moonbase-fg);
30
border-color: var(--moonbase-fg);
31
}
32
33
.moonbase-updates-notice_text-wrapper {
34
display: inline-flex;
35
align-items: center;
36
line-height: 36px;
37
gap: 2px;
38
}
39
40
/* Help messages in Moonbase UI */
41
.moonbase-help-message {
42
display: flex;
43
flex-direction: row;
44
justify-content: space-between;
45
}
46
47
.moonbase-help-message-sticky {
48
position: sticky;
49
top: 24px;
50
z-index: 10;
51
background-color: var(--background-primary);
52
}
53
54
.moonbase-extension-update-section {
55
margin-top: 15px;
56
}
57
58
.moonbase-update-section {
59
background-color: var(--moonbase-bg);
60
--info-help-foreground: var(--moonbase-fg);
61
border: none !important;
62
color: var(--moonbase-fg);
63
}
64
65
.moonbase-update-section button {
66
--info-help-foreground: var(--moonbase-fg);
67
color: var(--moonbase-fg);
68
background-color: transparent;
69
border-color: var(--moonbase-fg);
70
}
71
72
.moonbase-help-message-buttons {
73
display: flex;
74
flex-direction: row;
75
gap: 8px;
76
}
77
78
.moonbase-update-divider {
79
margin: 32px 0;
80
}
81
82
/* Crash screen */
83
.moonbase-crash-wrapper > [class^="buttons_"] {
84
gap: 1rem;
85
}
86
87
.moonbase-crash-wrapper {
88
display: flex;
89
flex-direction: column;
90
align-items: center;
91
gap: 1rem;
92
height: 50%;
93
width: 50vw;
94
max-height: 50%;
95
max-width: 50vw;
96
}
97
98
.moonbase-crash-tabs {
99
width: 100%;
100
}
101
102
.moonbase-crash-details-wrapper {
103
overflow-y: scroll;
104
color: var(--text-normal);
105
background: var(--background-secondary);
106
border: 1px solid var(--background-tertiary);
107
border-radius: 4px;
108
padding: 0.5em;
109
110
&::-webkit-scrollbar {
111
width: 8px;
112
height: 8px;
113
}
114
115
&::-webkit-scrollbar-thumb {
116
background-clip: padding-box;
117
border: 2px solid transparent;
118
border-radius: 4px;
119
background-color: var(--scrollbar-thin-thumb);
120
min-height: 40px;
121
}
122
123
&::-webkit-scrollbar-track {
124
border: 2px solid var(--scrollbar-thin-track);
125
background-color: var(--scrollbar-thin-track);
126
border-color: var(--scrollbar-thin-track);
127
}
128
}
129
130
.moonbase-crash-details {
131
box-sizing: border-box;
132
padding: 0;
133
font-family: var(--font-code);
134
font-size: 0.75rem;
135
line-height: 1rem;
136
margin: 6px;
137
white-space: pre-wrap;
138
background-clip: border-box;
139
140
& > code {
141
font-size: 0.875rem;
142
line-height: 1.125rem;
143
text-indent: 0;
144
white-space: pre-wrap;
145
text-size-adjust: none;
146
display: block;
147
user-select: text;
148
}
149
}
150
151
.moonbase-crash-extensions {
152
overflow-y: scroll;
153
display: grid;
154
grid-auto-columns: 25vw;
155
gap: 8px;
156
157
&::-webkit-scrollbar {
158
width: 8px;
159
height: 8px;
160
}
161
162
&::-webkit-scrollbar-thumb {
163
background-clip: padding-box;
164
border: 2px solid transparent;
165
border-radius: 4px;
166
background-color: var(--scrollbar-thin-thumb);
167
min-height: 40px;
168
}
169
170
&::-webkit-scrollbar-track {
171
border: 2px solid var(--scrollbar-thin-track);
172
background-color: var(--scrollbar-thin-track);
173
border-color: var(--scrollbar-thin-track);
174
}
175
}
176
177
.moonbase-crash-extensionCard {
178
color: var(--text-normal);
179
background: var(--background-secondary);
180
border: 1px solid var(--background-tertiary);
181
border-radius: 4px;
182
padding: 0.5em;
183
display: flex;
184
}
185
186
.moonbase-crash-extensionCard-meta {
187
display: flex;
188
flex-direction: column;
189
flex-grow: 1;
190
}
191
192
.moonbase-crash-extensionCard-title {
193
color: var(--text-normal);
194
font-family: var(--font-primary);
195
font-size: 16px;
196
line-height: 1.25;
197
font-weight: 600;
198
}
199
200
.moonbase-crash-extensionCard-version {
201
color: var(--text-muted);
202
font-family: var(--font-primary);
203
font-size: 14px;
204
line-height: 1.286;
205
font-weight: 400;
206
}
207
208
/* About page */
209
.moonbase-wordmark {
210
width: 100%;
211
}
212
213
.moonbase-devs {
214
width: 100%;
215
display: flex;
216
justify-content: center;
217
gap: 0rem 0.5rem;
218
padding-top: 0.5rem;
219
}
220
221
.moonbase-dev-avatar {
222
width: 2rem;
223
border-radius: 50%;
224
}
225
226
.moonbase-gap {
227
gap: 0.5rem;
228
}
229
230
.moonbase-about-text {
231
padding-top: 0.5rem;
232
}
233