assembler source, ASCII text
1
@import url("/static/efficient-ui/MASTER.css");
2
: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-done: #607D8B;
15
--color-done-text: #ffffff;
16
--color-insertion: #00C85366;
17
--color-insertion-line-number: #00C853;
18
--color-insertion-text: currentColor;
19
--color-deletion: #D5000066;
20
--color-deletion-text: currentColor;
21
--color-deletion-line-number: #D50000;
22
--color-code-line-number: #455A64;
23
}
24
.big-button {
26
font-size: 1.5em;
27
}
28
.ripple-pad {
30
background: #ffffff99;
31
position: absolute;
32
opacity: 1;
33
transform: scale(0);
34
animation: RippleEffect 375ms cubic-bezier(0, 0.55, 0.45, 1) forwards;
35
}
36
@keyframes RippleEffect {
38
to {
39
transform: scale(1);
40
opacity: 0;
41
}
42
}
43
button, input, .button, select {
45
position: relative;
46
overflow: hidden;
47
}
48
.error-page-container {
50
align-items: center;
51
justify-content: center;
52
width: 100%;
53
height: 100%;
54
}
55
/*
57
@media screen and (max-width: 896px) {
58
.navbar {
59
flex-flow: column nowrap;
60
height: fit-content;
61
}
62
}
63
*/
64
@media screen and (max-width: 640px) {
66
#repo-table > * > tr > :is(td, th):is(:nth-child(3), :nth-child(4)) {
67
display: none;
68
}
69
.commit-message {
71
display: none !important;
72
}
73
}
74
/*
76
@media screen and (max-width: 544px) {
77
.navbar > ul {
78
flex-flow: row wrap;
79
justify-content: center;
80
}
81
#commit-dialog {
82
align-items: stretch;
83
}
84
}
85
@media screen and (max-width: 512px) {
86
.breadcrumbs {
87
flex-flow: column nowrap;
88
justify-content: center;
89
height: auto;
90
gap: 1em;
91
}
92
}
93
*/
94
.file-icon {
96
font-size: 1.25em;
97
}
98
.file-name, .commit-message {
100
display: inline-block;
101
white-space: nowrap;
102
overflow: hidden;
103
text-overflow: ellipsis;
104
}
105
.file-link {
107
text-decoration: none;
108
}
109
.button {
111
text-decoration: none;
112
}
113
.password-error {
115
background: var(--color-error);
116
color: var(--color-error-text);
117
padding: 8px;
118
gap: 4px;
119
border-radius: 2px;
120
}
121
#username p {
123
font-size: 1.5em;
124
font-weight: 300;
125
}
126
.box-center {
128
align-items: center;
129
}
130
#global-nav > x-hbox > a > x-hbox {
132
height: 100%;
133
}
134
footer {
136
background: var(--color-callout-1);
137
color: var(--color-callout-1-text);
138
padding: 16px;
139
}
140
footer a {
141
color: var(--color-callout-1-text) !important;
142
}
143
body {
144
display: flex;
145
flex-flow: column;
146
}
147
main {
148
flex: 1 0 auto;
149
}
150
body > footer hr {
151
border-color: #ffffff80;
152
margin: 8px 0;
153
}
154
.branch-icon {
156
width: 2em;
157
font-size: 32px;
158
align-items: center;
159
justify-content: center;
160
display: flex;
161
}
162
dd {
164
margin-left: 2em;
165
}
166
.navbar-mini {
168
--height-navbar: 48px;
169
}
170
.dialog-tools {
172
position: relative;
173
left: 8px;
174
}
175
.thumbnail-marquee {
177
height: 1.5em;
178
overflow: hidden;
179
position: relative;
180
}
181
.inner-thumbnail-marquee {
183
position: absolute;
184
width: 100%;
185
height: 100%;
186
overflow: visible;
187
text-align: center;
188
animation: marquee 3000ms linear infinite;
189
}
190
@keyframes marquee {
192
0% {
193
transform: translateX(200%);
194
}
195
100% {
196
transform: translateX(-200%);
197
}
198
}
199
#sidenav-trigger {
201
height: 32px;
202
aspect-ratio: 1/1;
203
display: flex;
204
align-items: center;
205
justify-content: center;
206
}
207
@media screen and (min-width: 577px) {
209
#sidenav-trigger {
210
display: none;
211
}
212
#global-nav {
213
padding-left: 1em;
214
}
215
}
216
@media screen and (max-width: 576px) {
218
#main-nav-links-desktop {
219
display: none;
220
}
221
#global-nav {
223
padding-left: 0.5em;
224
}
225
}
226
hr {
228
border-color: currentColor;
229
border-width: 1px;
230
margin: 1em 0;
231
opacity: 0.5;
232
}
233
.state-label {
235
writing-mode: vertical-lr;
236
text-transform: uppercase;
237
padding: 1em;
238
margin: 0;
239
}
240
.state-label-2 {
242
text-transform: uppercase;
243
padding: 0.5em;
244
margin: 0;
245
}
246
.breadcrumbs > x-buttonbox iconify-icon {
248
font-size: 1.5rem;
249
}
250
.breadcrumbs > x-buttonbox > a {
252
display: flex;
253
align-items: center;
254
}
255
#repo-tabs {
257
display: flex;
258
gap: 0;
259
flex-wrap: wrap;
260
}
261
#repo-tabs > li > a {
263
display: flex;
264
flex-flow: row wrap;
265
gap: 0.5ch;
266
text-transform: uppercase;
267
position: relative;
268
overflow: hidden;
269
padding: 4px 16px;
270
white-space: nowrap;
271
}
272
#repo-tabs > li.selected > a {
274
box-shadow: inset 0 -0.25rem var(--color-accent);
275
}
276
#repo-nav {
278
padding-left: 0;
279
}
280
x-buttonbox.segmented {
282
box-shadow: var(--shadow-button);
283
padding: 0;
284
gap: 0;
285
overflow: hidden;
286
border-radius: var(--radius-button);
287
width: fit-content;
288
}
289
x-buttonbox.segmented > * {
291
border-radius: 0;
292
}
293
.vote-button:not(.selected) {
295
box-shadow: none !important;
296
color: inherit !important;
297
background: transparent !important;
298
outline: 0.1px solid #00000080;
299
}
300
.vote-button:not(.selected):hover {
302
background: var(--color-flat-button-hover) !important;
303
}
304
.vote-button {
306
padding: 4px;
307
}
308
.vote-score {
310
min-width: 3ch;
311
text-align: center;
312
}
313
.reply-area, .resolved-comments {
315
box-shadow: var(--shadow-card);
316
margin: var(--margin-card);
317
border-radius: var(--radius-card);
318
background: var(--color-card);
319
color: var(--color-card-text);
320
border: var(--border-card);
321
overflow: hidden; /* So rounded corners can cut through the content */
322
display: flex;
323
flex-flow: column nowrap;
324
height: 100%;
325
}
326
.reply-area > summary, .resolved-comments > summary {
328
display: flex;
329
align-items: center;
330
cursor: pointer;
331
padding: var(--padding-card);
332
padding-top: var(--padding-card-top);
333
text-transform: uppercase;
334
font-weight: 500;
335
transition: box-shadow 250ms cubic-bezier(0.33, 1, 0.68, 1);
336
}
337
.reply-area > form {
339
padding: var(--padding-card);
340
padding-top: var(--padding-card-top);
341
}
342
.reply-area > summary::before, .resolved-comments > summary::before {
344
content: " ";
345
background-image: url("/static/efficient-ui/icons/expand.svg");
346
transform: rotate(-90deg);
347
width: 1.5em;
348
height: 1.5em;
349
background-size: contain;
350
background-repeat: no-repeat;
351
transition: transform 250ms cubic-bezier(0.33, 1, 0.68, 1);
352
}
353
.reply-area[open] > summary::before, .resolved-comments[open] > summary::before {
355
transform: rotate(0);
356
}
357
.reply-area[open] > summary {
359
box-shadow: var(--shadow-card);
360
}
361
.post-author {
363
color: inherit;
364
text-decoration: inherit;
365
}
366
.post-details {
368
color: var(--color-caption-text);
369
}
370
#forum-banner {
372
background: var(--color-navbar);
373
color: #ffffff;
374
min-height: 56px;
375
position: sticky;
376
top: 0;
377
z-index: 1;
378
box-shadow: var(--shadow-navbar);
379
}
380
#forum-banner h1 {
382
font-size: 1rem;
383
font-weight: 600;
384
}
385
#forum-banner a, .nolink {
387
color: inherit;
388
text-decoration: none;
389
}
390
header {
392
z-index: 2;
393
}
394
.icon-button {
396
border-radius: 50%;
397
aspect-ratio: 1/1;
398
height: 3rem;
399
width: 3rem;
400
padding: 0;
401
font-size: 1.5rem;
402
background: transparent !important;
403
box-shadow: none !important;
404
}
405
#cookie-info {
407
background: var(--color-primary);
408
color: var(--color-primary-text);
409
align-items: center;
410
justify-content: space-between;
411
}
412
#cookie-info > p {
414
padding: 8px 1em;
415
}
416
.interrupt-top {
418
--mask: conic-gradient(from 135deg at top, #0000, #000 0 90deg,#0000 90deg) 50%/16px 100%;
419
padding-top: calc(var(--padding-code) + 8px);
420
-webkit-mask: var(--mask);
421
mask: var(--mask);
422
}
423
.diff-position {
425
width: 100%;
426
background: var(--color-code-line-number);
427
color: var(--color-code-text);
428
font: var(--mono-font);
429
font-size: 20px;
430
line-height: 24px;
431
padding: 8px;
432
}
433
.code-view {
435
white-space: normal;
436
padding: 0;
437
display: grid;
438
grid-template-columns: min-content min-content;
439
grid-auto-rows: min-content;
440
width: 100%;
441
overflow: auto;
442
}
443
.code-view > :is(code, ins, del, x-codeline) {
445
white-space: pre;
446
font: inherit;
447
color: inherit;
448
background: inherit;
449
display: inline;
450
padding: 0;
451
margin: 0;
452
width: 100%;
453
padding-left: 1ch;
454
}
455
.code-view > .line-number:first-child,
457
.code-view > .line-number:first-child + :is(code, ins, del, x-codeline) {
458
padding-top: 1ch;
459
align-items: flex-end;
460
}
461
.code-view > .line-number:nth-last-child(2),
463
.code-view > :is(code, ins, del, x-codeline):last-child {
464
padding-bottom: 1ch;
465
align-items: flex-start;
466
}
467
.line-number {
469
display: inline-block;
470
box-sizing: border-box;
471
text-align: right;
472
padding: 0 1ch !important;
473
background: var(--color-code-line-number);
474
position: sticky;
475
left: 0;
476
user-select: none;
477
font-weight: 500;
478
font: var(--mono-font);
479
box-shadow: none;
480
width: 100%;
481
border-radius: 0;
482
min-height: 0;
483
cursor: cell;
484
}
485
.line-number:has(+ ins) {
487
background: var(--color-insertion-line-number);
488
}
489
.line-number:has(+ del) {
491
background: var(--color-deletion-line-number);
492
}
493
ins, .code-view > ins {
495
background: var(--color-insertion);
496
color: var(--color-insertion-text);
497
text-decoration: none;
498
}
499
del, .code-view > del {
501
background: var(--color-deletion);
502
color: var(--color-deletion-text);
503
text-decoration: none;
504
}
505
strong, em {
507
font: inherit;
508
}
509
.emphasis-1 {
511
font-style: italic;
512
}
513
.emphasis-2 {
515
font-weight: 700;
516
}
517
.emphasis-3 {
519
font-style: italic;
520
font-weight: 700;
521
}
522
.emphasis-4 {
524
text-decoration: underline;
525
}
526
.emphasis-5 {
528
text-decoration: underline;
529
font-style: italic;
530
}
531
.emphasis-6 {
533
text-decoration: underline;
534
font-weight: 700;
535
}
536
.emphasis-7 {
538
text-decoration: underline;
539
font-style: italic;
540
font-weight: 700;
541
}
542
#favourites-table {
544
width: 100%;
545
}
546
#favourites-table > thead > tr > th:nth-child(1) {
548
width: 100%;
549
}
550
#favourites-table > thead > tr > th:not(:nth-child(1)) {
552
writing-mode: vertical-lr;
553
}
554
#favourites-table > tbody > tr > td:not(:nth-child(1)) {
556
vertical-align: middle;
557
text-align: center;
558
}
559
#favourites-table > tbody > tr > td:not(:nth-child(1)) > input {
561
display: inline-flex;
562
margin: 0;
563
}
564
#change-avatar-label {
566
cursor: pointer;
567
position: relative;
568
width: max(25%, 128px);
569
aspect-ratio: 1/1;
570
border-radius: var(--radius-avatar);
571
overflow: hidden;
572
}
573
#change-avatar-label:hover::before {
575
position: absolute;
576
content: attr(data-change-label);
577
background: #00000080;
578
color: #ffffff;
579
width: 100%;
580
height: 100%;
581
display: flex;
582
align-items: center;
583
justify-content: center;
584
}
585
#pagination {
587
display: flex;
588
gap: 1em;
589
justify-content: center;
590
align-items: center;
591
font-size: 1.5em;
592
font-weight: 600;
593
flex: 1 0 auto;
594
}
595
#pagination > a {
597
text-decoration: none;
598
color: var(--color-accent-1);
599
}
600
#pagination-options {
602
justify-content: center;
603
align-items: space-between;
604
gap: 1em;
605
width: 100%;
606
}
607
.comment {
609
/* Span all columns */
610
grid-column: 1 / -1;
611
padding: 1em;
612
background: var(--color-card);
613
color: var(--color-card-text);
614
font: var(--body-font);
615
box-shadow: var(--shadow-card);
616
z-index: 2;
617
border-radius: var(--radius-card);
618
border: var(--border-card);
619
display: flex;
620
flex-flow: column nowrap;
621
}
622
.resolved-comments {
624
grid-column: 1 / -1;
625
font: var(--body-font);
626
}
627
small {
629
font-size: 1em; /* more like LARGE :D, <small> has another semantic meaning which remains valid */
630
}
631
#profile-avatar {
633
width: 128px;
634
height: 128px;
635
}
636
@media screen and (max-width: 640px) {
638
#profile-avatar {
639
width: 96px;
640
height: 96px;
641
}
642
}
643