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