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 > li > a {
257
display: flex;
258
flex-flow: row wrap;
259
gap: 0.5ch;
260
text-transform: uppercase;
261
position: relative;
262
overflow: hidden;
263
padding: 4px 16px;
264
}
265
#repo-tabs > li.selected > a {
267
box-shadow: inset 0 -0.25rem var(--color-accent);
268
}
269
#repo-nav {
271
padding-left: 0;
272
}
273
x-buttonbox.segmented {
275
box-shadow: var(--shadow-button);
276
padding: 0;
277
gap: 0;
278
overflow: hidden;
279
border-radius: var(--radius-button);
280
width: fit-content;
281
}
282
x-buttonbox.segmented > * {
284
border-radius: 0;
285
}
286
.vote-button:not(.selected) {
288
box-shadow: none !important;
289
color: inherit !important;
290
background: transparent !important;
291
outline: 0.1px solid #00000080;
292
}
293
.vote-button:not(.selected):hover {
295
background: var(--color-flat-button-hover) !important;
296
}
297
.vote-button {
299
padding: 4px;
300
}
301
.vote-score {
303
min-width: 3ch;
304
text-align: center;
305
}
306
.reply-area, .resolved-comments {
308
box-shadow: var(--shadow-card);
309
margin: var(--margin-card);
310
border-radius: var(--radius-card);
311
background: var(--color-card);
312
color: var(--color-card-text);
313
border: var(--border-card);
314
overflow: hidden; /* So rounded corners can cut through the content */
315
display: flex;
316
flex-flow: column nowrap;
317
height: 100%;
318
}
319
.reply-area > summary, .resolved-comments > summary {
321
display: flex;
322
align-items: center;
323
cursor: pointer;
324
padding: var(--padding-card);
325
padding-top: var(--padding-card-top);
326
text-transform: uppercase;
327
font-weight: 500;
328
transition: box-shadow 250ms cubic-bezier(0.33, 1, 0.68, 1);
329
}
330
.reply-area > form {
332
padding: var(--padding-card);
333
padding-top: var(--padding-card-top);
334
}
335
.reply-area > summary::before, .resolved-comments > summary::before {
337
content: " ";
338
background-image: url("/static/efficient-ui/icons/expand.svg");
339
transform: rotate(-90deg);
340
width: 1.5em;
341
height: 1.5em;
342
background-size: contain;
343
background-repeat: no-repeat;
344
transition: transform 250ms cubic-bezier(0.33, 1, 0.68, 1);
345
}
346
.reply-area[open] > summary::before, .resolved-comments[open] > summary::before {
348
transform: rotate(0);
349
}
350
.reply-area[open] > summary {
352
box-shadow: var(--shadow-card);
353
}
354
.post-author {
356
color: inherit;
357
text-decoration: inherit;
358
}
359
.post-details {
361
color: var(--color-caption-text);
362
}
363
#forum-banner {
365
background: var(--color-navbar);
366
color: #ffffff;
367
min-height: 56px;
368
position: sticky;
369
top: 0;
370
z-index: 1;
371
box-shadow: var(--shadow-navbar);
372
}
373
#forum-banner h1 {
375
font-size: 1rem;
376
font-weight: 600;
377
}
378
#forum-banner a, .nolink {
380
color: inherit;
381
text-decoration: none;
382
}
383
header {
385
z-index: 2;
386
}
387
.icon-button {
389
border-radius: 50%;
390
aspect-ratio: 1/1;
391
height: 3rem;
392
width: 3rem;
393
padding: 0;
394
font-size: 1.5rem;
395
background: transparent !important;
396
box-shadow: none !important;
397
}
398
#cookie-info {
400
background: var(--color-primary);
401
color: var(--color-primary-text);
402
align-items: center;
403
justify-content: space-between;
404
}
405
#cookie-info > p {
407
padding: 8px 1em;
408
}
409
.interrupt-top {
411
--mask: conic-gradient(from 135deg at top, #0000, #000 0 90deg,#0000 90deg) 50%/16px 100%;
412
padding-top: calc(var(--padding-code) + 8px);
413
-webkit-mask: var(--mask);
414
mask: var(--mask);
415
}
416
.diff-position {
418
width: 100%;
419
background: var(--color-code-line-number);
420
color: var(--color-code-text);
421
font: var(--mono-font);
422
font-size: 20px;
423
line-height: 24px;
424
padding: 8px;
425
}
426
.code-view {
428
white-space: normal;
429
padding: 0;
430
display: grid;
431
grid-template-columns: min-content min-content;
432
grid-auto-rows: min-content;
433
width: 100%;
434
overflow: auto;
435
}
436
.code-view > :is(code, ins, del, x-codeline) {
438
white-space: pre;
439
font: inherit;
440
color: inherit;
441
background: inherit;
442
display: inline;
443
padding: 0;
444
margin: 0;
445
width: 100%;
446
padding-left: 1ch;
447
}
448
.code-view > .line-number:first-child,
450
.code-view > .line-number:first-child + :is(code, ins, del, x-codeline) {
451
padding-top: 1ch;
452
align-items: flex-end;
453
}
454
.code-view > .line-number:nth-last-child(2),
456
.code-view > :is(code, ins, del, x-codeline):last-child {
457
padding-bottom: 1ch;
458
align-items: flex-start;
459
}
460
.line-number {
462
display: inline-block;
463
box-sizing: border-box;
464
text-align: right;
465
padding: 0 1ch !important;
466
background: var(--color-code-line-number);
467
position: sticky;
468
left: 0;
469
user-select: none;
470
font-weight: 500;
471
font: var(--mono-font);
472
box-shadow: none;
473
width: 100%;
474
border-radius: 0;
475
min-height: 0;
476
cursor: cell;
477
}
478
.line-number:has(+ ins) {
480
background: var(--color-insertion-line-number);
481
}
482
.line-number:has(+ del) {
484
background: var(--color-deletion-line-number);
485
}
486
ins, .code-view > ins {
488
background: var(--color-insertion);
489
color: var(--color-insertion-text);
490
text-decoration: none;
491
}
492
del, .code-view > del {
494
background: var(--color-deletion);
495
color: var(--color-deletion-text);
496
text-decoration: none;
497
}
498
strong, em {
500
font: inherit;
501
}
502
.emphasis-1 {
504
font-style: italic;
505
}
506
.emphasis-2 {
508
font-weight: 700;
509
}
510
.emphasis-3 {
512
font-style: italic;
513
font-weight: 700;
514
}
515
.emphasis-4 {
517
text-decoration: underline;
518
}
519
.emphasis-5 {
521
text-decoration: underline;
522
font-style: italic;
523
}
524
.emphasis-6 {
526
text-decoration: underline;
527
font-weight: 700;
528
}
529
.emphasis-7 {
531
text-decoration: underline;
532
font-style: italic;
533
font-weight: 700;
534
}
535
#favourites-table {
537
width: 100%;
538
}
539
#favourites-table > thead > tr > th:nth-child(1) {
541
width: 100%;
542
}
543
#favourites-table > thead > tr > th:not(:nth-child(1)) {
545
writing-mode: vertical-lr;
546
}
547
#favourites-table > tbody > tr > td:not(:nth-child(1)) {
549
vertical-align: middle;
550
text-align: center;
551
}
552
#favourites-table > tbody > tr > td:not(:nth-child(1)) > input {
554
display: inline-flex;
555
margin: 0;
556
}
557
#change-avatar-label {
559
cursor: pointer;
560
position: relative;
561
width: max(25%, 128px);
562
aspect-ratio: 1/1;
563
border-radius: var(--radius-avatar);
564
overflow: hidden;
565
}
566
#change-avatar-label:hover::before {
568
position: absolute;
569
content: attr(data-change-label);
570
background: #00000080;
571
color: #ffffff;
572
width: 100%;
573
height: 100%;
574
display: flex;
575
align-items: center;
576
justify-content: center;
577
}
578
#pagination {
580
display: flex;
581
gap: 1em;
582
justify-content: center;
583
align-items: center;
584
font-size: 1.5em;
585
font-weight: 600;
586
flex: 1 0 auto;
587
}
588
#pagination > a {
590
text-decoration: none;
591
color: var(--color-accent-1);
592
}
593
#pagination-options {
595
justify-content: center;
596
align-items: space-between;
597
gap: 1em;
598
width: 100%;
599
}
600
.comment {
602
/* Span all columns */
603
grid-column: 1 / -1;
604
padding: 1em;
605
background: var(--color-card);
606
color: var(--color-card-text);
607
font: var(--body-font);
608
box-shadow: var(--shadow-card);
609
z-index: 2;
610
border-radius: var(--radius-card);
611
border: var(--border-card);
612
display: flex;
613
flex-flow: column nowrap;
614
}
615
.resolved-comments {
617
grid-column: 1 / -1;
618
font: var(--body-font);
619
}
620
small {
622
font-size: 1em; /* more like LARGE :D, <small> has another semantic meaning which remains valid */
623
}
624
#profile-avatar {
626
width: 128px;
627
height: 128px;
628
}
629
@media screen and (max-width: 640px) {
631
#profile-avatar {
632
width: 96px;
633
height: 96px;
634
}
635
}
636