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