253 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
}
98
99
.moonbase-update-divider {
100
margin: 32px 0;
101
}
102
103
/* Crash screen */
104
.moonbase-crash-wrapper > [class^="buttons_"] {
105
gap: 1rem;
106
}
107
108
.moonbase-crash-wrapper {
109
display: flex;
110
flex-direction: column;
111
align-items: center;
112
gap: 1rem;
113
height: 50%;
114
width: 50vw;
115
max-height: 50%;
116
max-width: 50vw;
117
}
118
119
.moonbase-crash-tabs {
120
width: 100%;
121
}
122
123
.moonbase-crash-details-wrapper {
124
overflow-y: scroll;
125
color: var(--text-normal);
126
background: var(--background-secondary);
127
border: 1px solid var(--background-tertiary);
128
border-radius: 4px;
129
padding: 0.5em;
130
131
&::-webkit-scrollbar {
132
width: 8px;
133
height: 8px;
134
}
135
136
&::-webkit-scrollbar-thumb {
137
background-clip: padding-box;
138
border: 2px solid transparent;
139
border-radius: 4px;
140
background-color: var(--scrollbar-thin-thumb);
141
min-height: 40px;
142
}
143
144
&::-webkit-scrollbar-track {
145
border: 2px solid var(--scrollbar-thin-track);
146
background-color: var(--scrollbar-thin-track);
147
border-color: var(--scrollbar-thin-track);
148
}
149
}
150
151
.moonbase-crash-details {
152
box-sizing: border-box;
153
padding: 0;
154
font-family: var(--font-code);
155
font-size: 0.75rem;
156
line-height: 1rem;
157
margin: 6px;
158
white-space: pre-wrap;
159
background-clip: border-box;
160
161
& > code {
162
font-size: 0.875rem;
163
line-height: 1.125rem;
164
text-indent: 0;
165
white-space: pre-wrap;
166
text-size-adjust: none;
167
display: block;
168
user-select: text;
169
}
170
}
171
172
.moonbase-crash-extensions {
173
overflow-y: scroll;
174
display: grid;
175
grid-auto-columns: 25vw;
176
gap: 8px;
177
178
&::-webkit-scrollbar {
179
width: 8px;
180
height: 8px;
181
}
182
183
&::-webkit-scrollbar-thumb {
184
background-clip: padding-box;
185
border: 2px solid transparent;
186
border-radius: 4px;
187
background-color: var(--scrollbar-thin-thumb);
188
min-height: 40px;
189
}
190
191
&::-webkit-scrollbar-track {
192
border: 2px solid var(--scrollbar-thin-track);
193
background-color: var(--scrollbar-thin-track);
194
border-color: var(--scrollbar-thin-track);
195
}
196
}
197
198
.moonbase-crash-extensionCard {
199
color: var(--text-normal);
200
background: var(--background-secondary);
201
border: 1px solid var(--background-tertiary);
202
border-radius: 4px;
203
padding: 0.5em;
204
display: flex;
205
}
206
207
.moonbase-crash-extensionCard-meta {
208
display: flex;
209
flex-direction: column;
210
flex-grow: 1;
211
}
212
213
.moonbase-crash-extensionCard-title {
214
color: var(--text-normal);
215
font-family: var(--font-primary);
216
font-size: 16px;
217
line-height: 1.25;
218
font-weight: 600;
219
}
220
221
.moonbase-crash-extensionCard-version {
222
color: var(--text-muted);
223
font-family: var(--font-primary);
224
font-size: 14px;
225
line-height: 1.286;
226
font-weight: 400;
227
}
228
229
/* About page */
230
.moonbase-wordmark {
231
width: 100%;
232
}
233
234
.moonbase-devs {
235
width: 100%;
236
display: flex;
237
justify-content: center;
238
gap: 0rem 0.5rem;
239
padding-top: 0.5rem;
240
}
241
242
.moonbase-dev-avatar {
243
width: 2rem;
244
border-radius: 50%;
245
}
246
247
.moonbase-gap {
248
gap: 0.5rem;
249
}
250
251
.moonbase-about-text {
252
padding-top: 0.5rem;
253
}
254