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