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