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: 641px) {
209
#sidenav-trigger {
210
display: none;
211
}
212
#global-nav {
213
padding-left: 1em;
214
}
215
}
216
@media screen and (max-width: 640px) {
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
overflow: visible;
261
}
262
#repo-tabs > li > a {
264
display: flex;
265
flex-flow: row wrap;
266
gap: 0.5ch;
267
text-transform: uppercase;
268
position: relative;
269
overflow: hidden;
270
padding: 4px 16px;
271
white-space: nowrap;
272
}
273
#repo-tabs > li.selected > a {
275
box-shadow: inset 0 -0.25rem var(--color-accent);
276
}
277
#repo-nav {
279
padding-left: 0;
280
height: unset;
281
padding-top: 0;
282
padding-bottom: 0;
283
min-height: var(--height-navbar);
284
}
285
x-buttonbox.segmented {
287
box-shadow: var(--shadow-button);
288
padding: 0;
289
gap: 0;
290
overflow: hidden;
291
border-radius: var(--radius-button);
292
width: fit-content;
293
}
294
x-buttonbox.segmented > * {
296
border-radius: 0;
297
}
298
.vote-button:not(.selected) {
300
box-shadow: none !important;
301
color: inherit !important;
302
background: transparent !important;
303
outline: 0.1px solid #00000080;
304
}
305
.vote-button:not(.selected):hover {
307
background: var(--color-flat-button-hover) !important;
308
}
309
.vote-button {
311
padding: 4px;
312
}
313
.vote-score {
315
min-width: 3ch;
316
text-align: center;
317
}
318
.reply-area, .resolved-comments {
320
box-shadow: var(--shadow-card);
321
margin: var(--margin-card);
322
border-radius: var(--radius-card);
323
background: var(--color-card);
324
color: var(--color-card-text);
325
border: var(--border-card);
326
overflow: hidden; /* So rounded corners can cut through the content */
327
display: flex;
328
flex-flow: column nowrap;
329
height: 100%;
330
}
331
.reply-area > summary, .resolved-comments > summary {
333
display: flex;
334
align-items: center;
335
cursor: pointer;
336
padding: var(--padding-card);
337
padding-top: var(--padding-card-top);
338
text-transform: uppercase;
339
font-weight: 500;
340
transition: box-shadow 250ms cubic-bezier(0.33, 1, 0.68, 1);
341
}
342
.reply-area > form {
344
padding: var(--padding-card);
345
padding-top: var(--padding-card-top);
346
}
347
.reply-area > summary::before, .resolved-comments > summary::before {
349
content: " ";
350
background-image: url("/static/efficient-ui/icons/expand.svg");
351
transform: rotate(-90deg);
352
width: 1.5em;
353
height: 1.5em;
354
background-size: contain;
355
background-repeat: no-repeat;
356
transition: transform 250ms cubic-bezier(0.33, 1, 0.68, 1);
357
}
358
.reply-area[open] > summary::before, .resolved-comments[open] > summary::before {
360
transform: rotate(0);
361
}
362
.reply-area[open] > summary {
364
box-shadow: var(--shadow-card);
365
}
366
.post-author {
368
color: inherit;
369
text-decoration: inherit;
370
}
371
.post-details {
373
color: var(--color-caption-text);
374
}
375
#forum-banner {
377
background: var(--color-navbar);
378
color: #ffffff;
379
min-height: 56px;
380
position: sticky;
381
top: 0;
382
z-index: 1;
383
box-shadow: var(--shadow-navbar);
384
}
385
#forum-banner h1 {
387
font-size: 1rem;
388
font-weight: 600;
389
}
390
#forum-banner a, .nolink {
392
color: inherit;
393
text-decoration: none;
394
}
395
header {
397
z-index: 2;
398
}
399
.icon-button {
401
border-radius: 50%;
402
aspect-ratio: 1/1;
403
height: 3rem;
404
width: 3rem;
405
padding: 0;
406
font-size: 1.5rem;
407
background: transparent !important;
408
box-shadow: none !important;
409
}
410
#cookie-info {
412
background: var(--color-primary);
413
color: var(--color-primary-text);
414
align-items: center;
415
justify-content: space-between;
416
}
417
#cookie-info > p {
419
padding: 8px 1em;
420
}
421
.interrupt-top {
423
--mask: conic-gradient(from 135deg at top, #0000, #000 0 90deg,#0000 90deg) 50%/16px 100%;
424
padding-top: calc(var(--padding-code) + 8px);
425
-webkit-mask: var(--mask);
426
mask: var(--mask);
427
}
428
.diff-position {
430
width: 100%;
431
background: var(--color-code-line-number);
432
color: var(--color-code-text);
433
font: var(--mono-font);
434
font-size: 20px;
435
line-height: 24px;
436
padding: 8px;
437
}
438
.code-view {
440
white-space: normal;
441
padding: 0;
442
display: grid;
443
grid-template-columns: min-content min-content;
444
grid-auto-rows: min-content;
445
width: 100%;
446
overflow: auto;
447
}
448
.code-view > :is(code, ins, del, x-codeline) {
450
white-space: pre;
451
font: inherit;
452
color: inherit;
453
background: inherit;
454
display: inline;
455
padding: 0;
456
margin: 0;
457
width: 100%;
458
padding-left: 1ch;
459
}
460
.code-view > .line-number:first-child,
462
.code-view > .line-number:first-child + :is(code, ins, del, x-codeline) {
463
padding-top: 1ch;
464
align-items: flex-end;
465
}
466
.code-view > .line-number:nth-last-child(2),
468
.code-view > :is(code, ins, del, x-codeline):last-child {
469
padding-bottom: 1ch;
470
align-items: flex-start;
471
}
472
.line-number {
474
display: inline-block;
475
box-sizing: border-box;
476
text-align: right;
477
padding: 0 1ch !important;
478
background: var(--color-code-line-number);
479
position: sticky;
480
left: 0;
481
user-select: none;
482
font-weight: 500;
483
font: var(--mono-font);
484
box-shadow: none;
485
width: 100%;
486
border-radius: 0;
487
min-height: 0;
488
cursor: cell;
489
}
490
.line-number:has(+ ins) {
492
background: var(--color-insertion-line-number);
493
}
494
.line-number:has(+ del) {
496
background: var(--color-deletion-line-number);
497
}
498
ins, .code-view > ins {
500
background: var(--color-insertion);
501
color: var(--color-insertion-text);
502
text-decoration: none;
503
}
504
del, .code-view > del {
506
background: var(--color-deletion);
507
color: var(--color-deletion-text);
508
text-decoration: none;
509
}
510
strong, em {
512
font: inherit;
513
}
514
.emphasis-1 {
516
font-style: italic;
517
}
518
.emphasis-2 {
520
font-weight: 700;
521
}
522
.emphasis-3 {
524
font-style: italic;
525
font-weight: 700;
526
}
527
.emphasis-4 {
529
text-decoration: underline;
530
}
531
.emphasis-5 {
533
text-decoration: underline;
534
font-style: italic;
535
}
536
.emphasis-6 {
538
text-decoration: underline;
539
font-weight: 700;
540
}
541
.emphasis-7 {
543
text-decoration: underline;
544
font-style: italic;
545
font-weight: 700;
546
}
547
#favourites-table {
549
width: 100%;
550
}
551
#favourites-table > thead > tr > th:nth-child(1) {
553
width: 100%;
554
}
555
#favourites-table > thead > tr > th:not(:nth-child(1)) {
557
writing-mode: vertical-lr;
558
}
559
#favourites-table > tbody > tr > td:not(:nth-child(1)) {
561
vertical-align: middle;
562
text-align: center;
563
}
564
#favourites-table > tbody > tr > td:not(:nth-child(1)) > input {
566
display: inline-flex;
567
margin: 0;
568
}
569
#change-avatar-label {
571
cursor: pointer;
572
position: relative;
573
width: max(25%, 128px);
574
aspect-ratio: 1/1;
575
border-radius: var(--radius-avatar);
576
overflow: hidden;
577
}
578
#change-avatar-label:hover::before {
580
position: absolute;
581
content: attr(data-change-label);
582
background: #00000080;
583
color: #ffffff;
584
width: 100%;
585
height: 100%;
586
display: flex;
587
align-items: center;
588
justify-content: center;
589
}
590
#pagination {
592
display: flex;
593
gap: 1em;
594
justify-content: center;
595
align-items: center;
596
font-size: 1.5em;
597
font-weight: 600;
598
flex: 1 0 auto;
599
}
600
#pagination > a {
602
text-decoration: none;
603
color: var(--color-accent-1);
604
}
605
#pagination-options {
607
justify-content: center;
608
align-items: space-between;
609
gap: 1em;
610
width: 100%;
611
}
612
.comment {
614
/* Span all columns */
615
grid-column: 1 / -1;
616
padding: 1em;
617
background: var(--color-card);
618
color: var(--color-card-text);
619
font: var(--body-font);
620
box-shadow: var(--shadow-card);
621
z-index: 2;
622
border-radius: var(--radius-card);
623
border: var(--border-card);
624
display: flex;
625
flex-flow: column nowrap;
626
}
627
.resolved-comments {
629
grid-column: 1 / -1;
630
font: var(--body-font);
631
}
632
small {
634
font-size: 1em; /* more like LARGE :D, <small> has another semantic meaning which remains valid */
635
}
636
#profile-avatar {
638
width: 128px;
639
height: 128px;
640
}
641
@media screen and (max-width: 640px) {
643
#profile-avatar {
644
width: 96px;
645
height: 96px;
646
}
647
#profile-header {
648
flex-flow: column nowrap;
649
align-items: center;
650
}
651
#profile-header #username {
652
text-align: center;
653
}
654
}
655
.breadcrumbs > ul {
657
white-space: nowrap;
658
}
659
@media screen and (max-width: 480px) {
661
.breadcrumbs > ul {
662
flex-flow: row nowrap;
663
overflow-y: scroll;
664
align-self: stretch;
665
align-items: center;
666
}
667
.breadcrumbs {
668
min-height: 64px;
669
padding: 4px;
670
}
671
}
672
#repo-tabs > li > a:hover {
674
background-color: var(--color-flat-button-hover);
675
transition: box-shadow 375ms cubic-bezier(0.5, 1, 0.89, 1), background 375ms cubic-bezier(0.5, 1, 0.89, 1), color 375ms cubic-bezier(0.5, 1, 0.89, 1);
676
}
677
.post-number {
679
font: var(--mono-font);
680
font-size: inherit;
681
font-weight: 150;
682
}
683
.post-label {
685
color: var(--color-primary-text);
686
text-shadow: 0.0625em 0.0625em #000000ff;
687
padding-inline: 0.375rem;
688
border-radius: 100vmax;
689
}
690
.post-label.removable {
692
cursor: pointer;
693
color: var(--color-primary-text);
694
text-decoration: none;
695
}
696
.post-label.removable:hover {
698
color: var(--color-primary-text);
699
text-decoration: line-through;
700
}
701
.post-label.editable {
703
cursor: pointer;
704
color: var(--color-primary-text);
705
text-decoration: none;
706
}
707
.post-label.editable:hover {
709
color: var(--color-primary-text);
710
text-decoration: underline;
711
}
712