By using this site, you agree to have cookies stored on your device, strictly for functional purposes, such as storing your session and preferences.

Dismiss

 style.css

View raw Download
text/x-asm • 8.6 kiB
assembler source, ASCII text
        
            
1
@import url("/static/efficient-ui/MASTER.css");
2
3
:root {
4
--color-branch: var(--color-primary-1);
5
--color-branch-text: var(--color-primary-1-text);
6
--color-tag: var(--color-accent-1);
7
--color-tag-text: var(--color-accent-1-text);
8
--color-pending: #4caf50;
9
--color-pending-text: #ffffff;
10
--color-rejected: #ff9800;
11
--color-rejected-text: #ffffff;
12
--color-merged: #9c27b0;
13
--color-merged-text: #ffffff;
14
--color-insertion: #00C85366;
15
--color-insertion-line-number: #00C853;
16
--color-insertion-text: currentColor;
17
--color-deletion: #D5000066;
18
--color-deletion-text: currentColor;
19
--color-deletion-line-number: #D50000;
20
--color-code-line-number: #455A64;
21
}
22
23
.big-button {
24
font-size: 1.5em;
25
}
26
27
.ripple-pad {
28
background: #ffffff99;
29
position: absolute;
30
opacity: 1;
31
transform: scale(0);
32
animation: RippleEffect 375ms cubic-bezier(0, 0.55, 0.45, 1) forwards;
33
}
34
35
@keyframes RippleEffect {
36
to {
37
transform: scale(1);
38
opacity: 0;
39
}
40
}
41
42
button, input, .button, select {
43
position: relative;
44
overflow: hidden;
45
}
46
47
.error-page-container {
48
align-items: center;
49
justify-content: center;
50
width: 100%;
51
height: 100%;
52
}
53
54
/*
55
@media screen and (max-width: 896px) {
56
.navbar {
57
flex-flow: column nowrap;
58
height: fit-content;
59
}
60
}
61
*/
62
63
@media screen and (max-width: 640px) {
64
#repo-table > * > tr > :is(td, th):is(:nth-child(3), :nth-child(4)) {
65
display: none;
66
}
67
68
.commit-message {
69
display: none !important;
70
}
71
}
72
73
/*
74
@media screen and (max-width: 544px) {
75
.navbar > ul {
76
flex-flow: row wrap;
77
justify-content: center;
78
}
79
#commit-dialog {
80
align-items: stretch;
81
}
82
}
83
@media screen and (max-width: 512px) {
84
.breadcrumbs {
85
flex-flow: column nowrap;
86
justify-content: center;
87
height: auto;
88
gap: 1em;
89
}
90
}
91
*/
92
93
.file-icon {
94
font-size: 1.25em;
95
}
96
97
.file-name, .commit-message {
98
display: inline-block;
99
white-space: nowrap;
100
overflow: hidden;
101
text-overflow: ellipsis;
102
}
103
104
.file-link {
105
text-decoration: none;
106
}
107
108
.button {
109
text-decoration: none;
110
}
111
112
.password-error {
113
background: var(--color-error);
114
color: var(--color-error-text);
115
padding: 8px;
116
gap: 4px;
117
border-radius: 2px;
118
}
119
120
#username p {
121
font-size: 1.5em;
122
font-weight: 300;
123
}
124
125
.box-center {
126
align-items: center;
127
}
128
129
#global-nav > x-hbox > a > x-hbox {
130
height: 100%;
131
}
132
133
footer {
134
background: var(--color-callout-1);
135
color: var(--color-callout-1-text);
136
padding: 16px;
137
}
138
footer a {
139
color: var(--color-callout-1-text) !important;
140
}
141
body {
142
display: flex;
143
flex-flow: column;
144
}
145
main {
146
flex: 1 0 auto;
147
}
148
body > footer hr {
149
border-color: #ffffff80;
150
margin: 8px 0;
151
}
152
153
.branch-icon {
154
width: 2em;
155
font-size: 32px;
156
align-items: center;
157
justify-content: center;
158
display: flex;
159
}
160
161
dd {
162
margin-left: 2em;
163
}
164
165
.navbar-mini {
166
--height-navbar: 48px;
167
}
168
169
.dialog-tools {
170
position: relative;
171
left: 8px;
172
}
173
174
.thumbnail-marquee {
175
height: 1.5em;
176
overflow: hidden;
177
position: relative;
178
}
179
180
.inner-thumbnail-marquee {
181
position: absolute;
182
width: 100%;
183
height: 100%;
184
overflow: visible;
185
text-align: center;
186
animation: marquee 3000ms linear infinite;
187
}
188
189
@keyframes marquee {
190
0% {
191
transform: translateX(200%);
192
}
193
100% {
194
transform: translateX(-200%);
195
}
196
}
197
198
@media screen and (min-width: 641px) {
199
#sidenav-trigger {
200
display: none;
201
}
202
#global-nav {
203
padding-left: 16px;
204
}
205
}
206
207
@media screen and (max-width: 640px) {
208
#navbar-separator ~ a {
209
display: none;
210
}
211
}
212
213
hr {
214
border-color: currentColor;
215
border-width: 1px;
216
margin: 1em 0;
217
opacity: 0.5;
218
}
219
220
.state-label {
221
writing-mode: vertical-lr;
222
text-transform: uppercase;
223
padding: 1em;
224
margin: 0;
225
}
226
227
.breadcrumbs > x-buttonbox iconify-icon {
228
font-size: 1.5rem;
229
}
230
231
.breadcrumbs > x-buttonbox > a {
232
display: flex;
233
align-items: center;
234
}
235
236
#repo-tabs > li > a {
237
display: flex;
238
flex-flow: row wrap;
239
gap: 0.5ch;
240
text-transform: uppercase;
241
position: relative;
242
overflow: hidden;
243
padding: 4px 16px;
244
}
245
246
#repo-tabs > li.selected > a {
247
box-shadow: inset 0 -0.25rem var(--color-accent);
248
}
249
250
#repo-nav {
251
padding-left: 0;
252
}
253
254
x-buttonbox.segmented {
255
box-shadow: var(--shadow-button);
256
padding: 0;
257
gap: 0;
258
overflow: hidden;
259
border-radius: var(--radius-button);
260
width: fit-content;
261
}
262
263
x-buttonbox.segmented > * {
264
border-radius: 0;
265
}
266
267
.vote-button:not(.selected) {
268
box-shadow: none !important;
269
color: inherit !important;
270
background: transparent !important;
271
outline: 0.1px solid #00000080;
272
}
273
274
.vote-button:not(.selected):hover {
275
background: var(--color-flat-button-hover) !important;
276
}
277
278
.vote-button {
279
padding: 4px;
280
}
281
282
.vote-score {
283
min-width: 3ch;
284
text-align: center;
285
}
286
287
.reply-area {
288
box-shadow: var(--shadow-card);
289
margin: var(--margin-card);
290
border-radius: var(--radius-card);
291
background: var(--color-card);
292
color: var(--color-card-text);
293
border: var(--border-card);
294
overflow: hidden; /* So rounded corners can cut through the content */
295
display: flex;
296
flex-flow: column nowrap;
297
height: 100%;
298
}
299
300
.reply-area > summary {
301
display: flex;
302
align-items: center;
303
cursor: pointer;
304
padding: var(--padding-card);
305
padding-top: var(--padding-card-top);
306
text-transform: uppercase;
307
font-weight: 500;
308
transition: box-shadow 250ms cubic-bezier(0.33, 1, 0.68, 1);
309
}
310
311
.reply-area > form {
312
padding: var(--padding-card);
313
padding-top: var(--padding-card-top);
314
}
315
316
.reply-area > summary::before {
317
content: " ";
318
background-image: url("/static/efficient-ui/icons/expand.svg");
319
transform: rotate(-90deg);
320
width: 1.5em;
321
height: 1.5em;
322
background-size: contain;
323
background-repeat: no-repeat;
324
transition: transform 250ms cubic-bezier(0.33, 1, 0.68, 1);
325
}
326
327
.reply-area[open] > summary::before {
328
transform: rotate(0);
329
}
330
331
.reply-area[open] > summary {
332
box-shadow: var(--shadow-card);
333
}
334
335
.post-author {
336
color: inherit;
337
text-decoration: inherit;
338
}
339
340
.post-details {
341
color: var(--color-caption-text);
342
}
343
344
#forum-banner {
345
background: var(--color-navbar);
346
color: #ffffff;
347
min-height: 56px;
348
position: sticky;
349
top: 0;
350
z-index: 1;
351
box-shadow: var(--shadow-navbar);
352
}
353
354
#forum-banner h1 {
355
font-size: 1rem;
356
font-weight: 600;
357
}
358
359
#forum-banner a, .nolink {
360
color: inherit;
361
text-decoration: none;
362
}
363
364
header {
365
z-index: 2;
366
}
367
368
.icon-button {
369
border-radius: 50%;
370
aspect-ratio: 1/1;
371
height: 3rem;
372
width: 3rem;
373
padding: 0;
374
font-size: 1.5rem;
375
background: transparent !important;
376
box-shadow: none !important;
377
}
378
379
#cookie-info {
380
background: var(--color-primary);
381
color: var(--color-primary-text);
382
align-items: center;
383
justify-content: space-between;
384
}
385
386
#cookie-info > p {
387
padding: 8px 1em;
388
}
389
390
.interrupt-top {
391
--mask: conic-gradient(from 135deg at top, #0000, #000 0 90deg,#0000 90deg) 50%/16px 100%;
392
padding-top: calc(var(--padding-code) + 8px);
393
-webkit-mask: var(--mask);
394
mask: var(--mask);
395
}
396
397
.diff-position {
398
width: 100%;
399
background: var(--color-code-line-number);
400
color: var(--color-code-text);
401
padding: 8px;
402
}
403
404
.code-view {
405
white-space: normal;
406
padding: 0;
407
display: grid;
408
grid-template-columns: min-content min-content;
409
grid-auto-rows: min-content;
410
width: 100%;
411
overflow: auto;
412
}
413
414
.code-view :is(code, ins, del, x-codeline) {
415
white-space: pre;
416
font: inherit;
417
color: inherit;
418
background: inherit;
419
display: inline;
420
padding: 0;
421
margin: 0;
422
width: 100%;
423
padding-left: 1ch;
424
}
425
426
.code-view > .line-number:first-child,
427
.code-view > .line-number:first-child + :is(code, ins, del, x-codeline) {
428
padding-top: 1ch;
429
}
430
431
.code-view > :is(code, ins, del, x-codeline):last-child {
432
padding-bottom: 1ch;
433
}
434
435
.line-number {
436
display: inline-block;
437
width: 8ch;
438
box-sizing: content-box;
439
text-align: right;
440
padding-right: 1ch;
441
background: var(--color-code-line-number);
442
position: sticky;
443
left: 0;
444
user-select: none;
445
font-weight: 500;
446
}
447
448
.line-number:has(+ ins) {
449
background: var(--color-insertion-line-number);
450
}
451
452
.line-number:has(+ del) {
453
background: var(--color-deletion-line-number);
454
}
455
456
ins, .code-view > ins {
457
background: var(--color-insertion);
458
color: var(--color-insertion-text);
459
text-decoration: none;
460
}
461
462
del, .code-view > del {
463
background: var(--color-deletion);
464
color: var(--color-deletion-text);
465
text-decoration: none;
466
}
467