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
@media screen and (min-width: 641px) {
201
#sidenav-trigger {
202
display: none;
203
}
204
#global-nav {
205
padding-left: 16px;
206
}
207
}
208
@media screen and (max-width: 640px) {
210
#navbar-separator ~ a {
211
display: none;
212
}
213
}
214
hr {
216
border-color: currentColor;
217
border-width: 1px;
218
margin: 1em 0;
219
opacity: 0.5;
220
}
221
.state-label {
223
writing-mode: vertical-lr;
224
text-transform: uppercase;
225
padding: 1em;
226
margin: 0;
227
}
228
.state-label-2 {
230
text-transform: uppercase;
231
padding: 0.5em;
232
margin: 0;
233
}
234
.breadcrumbs > x-buttonbox iconify-icon {
236
font-size: 1.5rem;
237
}
238
.breadcrumbs > x-buttonbox > a {
240
display: flex;
241
align-items: center;
242
}
243
#repo-tabs > li > a {
245
display: flex;
246
flex-flow: row wrap;
247
gap: 0.5ch;
248
text-transform: uppercase;
249
position: relative;
250
overflow: hidden;
251
padding: 4px 16px;
252
}
253
#repo-tabs > li.selected > a {
255
box-shadow: inset 0 -0.25rem var(--color-accent);
256
}
257
#repo-nav {
259
padding-left: 0;
260
}
261
x-buttonbox.segmented {
263
box-shadow: var(--shadow-button);
264
padding: 0;
265
gap: 0;
266
overflow: hidden;
267
border-radius: var(--radius-button);
268
width: fit-content;
269
}
270
x-buttonbox.segmented > * {
272
border-radius: 0;
273
}
274
.vote-button:not(.selected) {
276
box-shadow: none !important;
277
color: inherit !important;
278
background: transparent !important;
279
outline: 0.1px solid #00000080;
280
}
281
.vote-button:not(.selected):hover {
283
background: var(--color-flat-button-hover) !important;
284
}
285
.vote-button {
287
padding: 4px;
288
}
289
.vote-score {
291
min-width: 3ch;
292
text-align: center;
293
}
294
.reply-area, .resolved-comments {
296
box-shadow: var(--shadow-card);
297
margin: var(--margin-card);
298
border-radius: var(--radius-card);
299
background: var(--color-card);
300
color: var(--color-card-text);
301
border: var(--border-card);
302
overflow: hidden; /* So rounded corners can cut through the content */
303
display: flex;
304
flex-flow: column nowrap;
305
height: 100%;
306
}
307
.reply-area > summary, .resolved-comments > summary {
309
display: flex;
310
align-items: center;
311
cursor: pointer;
312
padding: var(--padding-card);
313
padding-top: var(--padding-card-top);
314
text-transform: uppercase;
315
font-weight: 500;
316
transition: box-shadow 250ms cubic-bezier(0.33, 1, 0.68, 1);
317
}
318
.reply-area > form {
320
padding: var(--padding-card);
321
padding-top: var(--padding-card-top);
322
}
323
.reply-area > summary::before, .resolved-comments > summary::before {
325
content: " ";
326
background-image: url("/static/efficient-ui/icons/expand.svg");
327
transform: rotate(-90deg);
328
width: 1.5em;
329
height: 1.5em;
330
background-size: contain;
331
background-repeat: no-repeat;
332
transition: transform 250ms cubic-bezier(0.33, 1, 0.68, 1);
333
}
334
.reply-area[open] > summary::before, .resolved-comments[open] > summary::before {
336
transform: rotate(0);
337
}
338
.reply-area[open] > summary {
340
box-shadow: var(--shadow-card);
341
}
342
.post-author {
344
color: inherit;
345
text-decoration: inherit;
346
}
347
.post-details {
349
color: var(--color-caption-text);
350
}
351
#forum-banner {
353
background: var(--color-navbar);
354
color: #ffffff;
355
min-height: 56px;
356
position: sticky;
357
top: 0;
358
z-index: 1;
359
box-shadow: var(--shadow-navbar);
360
}
361
#forum-banner h1 {
363
font-size: 1rem;
364
font-weight: 600;
365
}
366
#forum-banner a, .nolink {
368
color: inherit;
369
text-decoration: none;
370
}
371
header {
373
z-index: 2;
374
}
375
.icon-button {
377
border-radius: 50%;
378
aspect-ratio: 1/1;
379
height: 3rem;
380
width: 3rem;
381
padding: 0;
382
font-size: 1.5rem;
383
background: transparent !important;
384
box-shadow: none !important;
385
}
386
#cookie-info {
388
background: var(--color-primary);
389
color: var(--color-primary-text);
390
align-items: center;
391
justify-content: space-between;
392
}
393
#cookie-info > p {
395
padding: 8px 1em;
396
}
397
.interrupt-top {
399
--mask: conic-gradient(from 135deg at top, #0000, #000 0 90deg,#0000 90deg) 50%/16px 100%;
400
padding-top: calc(var(--padding-code) + 8px);
401
-webkit-mask: var(--mask);
402
mask: var(--mask);
403
}
404
.diff-position {
406
width: 100%;
407
background: var(--color-code-line-number);
408
color: var(--color-code-text);
409
font: var(--mono-font);
410
font-size: 20px;
411
line-height: 24px;
412
padding: 8px;
413
}
414
.code-view {
416
white-space: normal;
417
padding: 0;
418
display: grid;
419
grid-template-columns: min-content min-content;
420
grid-auto-rows: min-content;
421
width: 100%;
422
overflow: auto;
423
}
424
.code-view > :is(code, ins, del, x-codeline) {
426
white-space: pre;
427
font: inherit;
428
color: inherit;
429
background: inherit;
430
display: inline;
431
padding: 0;
432
margin: 0;
433
width: 100%;
434
padding-left: 1ch;
435
}
436
.code-view > .line-number:first-child,
438
.code-view > .line-number:first-child + :is(code, ins, del, x-codeline) {
439
padding-top: 1ch;
440
align-items: flex-end;
441
}
442
.code-view > .line-number:nth-last-child(2),
444
.code-view > :is(code, ins, del, x-codeline):last-child {
445
padding-bottom: 1ch;
446
align-items: flex-start;
447
}
448
.line-number {
450
display: inline-block;
451
box-sizing: border-box;
452
text-align: right;
453
padding: 0 1ch !important;
454
background: var(--color-code-line-number);
455
position: sticky;
456
left: 0;
457
user-select: none;
458
font-weight: 500;
459
font: var(--mono-font);
460
box-shadow: none;
461
width: 100%;
462
border-radius: 0;
463
min-height: 0;
464
cursor: cell;
465
}
466
.line-number:has(+ ins) {
468
background: var(--color-insertion-line-number);
469
}
470
.line-number:has(+ del) {
472
background: var(--color-deletion-line-number);
473
}
474
ins, .code-view > ins {
476
background: var(--color-insertion);
477
color: var(--color-insertion-text);
478
text-decoration: none;
479
}
480
del, .code-view > del {
482
background: var(--color-deletion);
483
color: var(--color-deletion-text);
484
text-decoration: none;
485
}
486
strong, em {
488
font: inherit;
489
}
490
.emphasis-1 {
492
font-style: italic;
493
}
494
.emphasis-2 {
496
font-weight: 700;
497
}
498
.emphasis-3 {
500
font-style: italic;
501
font-weight: 700;
502
}
503
.emphasis-4 {
505
text-decoration: underline;
506
}
507
.emphasis-5 {
509
text-decoration: underline;
510
font-style: italic;
511
}
512
.emphasis-6 {
514
text-decoration: underline;
515
font-weight: 700;
516
}
517
.emphasis-7 {
519
text-decoration: underline;
520
font-style: italic;
521
font-weight: 700;
522
}
523
#favourites-table {
525
width: 100%;
526
}
527
#favourites-table > thead > tr > th:nth-child(1) {
529
width: 100%;
530
}
531
#favourites-table > thead > tr > th:not(:nth-child(1)) {
533
writing-mode: vertical-lr;
534
}
535
#favourites-table > tbody > tr > td:not(:nth-child(1)) {
537
vertical-align: middle;
538
text-align: center;
539
}
540
#favourites-table > tbody > tr > td:not(:nth-child(1)) > input {
542
display: inline-flex;
543
margin: 0;
544
}
545
#change-avatar-label {
547
cursor: pointer;
548
position: relative;
549
width: max(25%, 128px);
550
aspect-ratio: 1/1;
551
border-radius: var(--radius-avatar);
552
overflow: hidden;
553
}
554
#change-avatar-label:hover::before {
556
position: absolute;
557
content: attr(data-change-label);
558
background: #00000080;
559
color: #ffffff;
560
width: 100%;
561
height: 100%;
562
display: flex;
563
align-items: center;
564
justify-content: center;
565
}
566
#pagination {
568
display: flex;
569
gap: 1em;
570
justify-content: center;
571
align-items: center;
572
font-size: 1.5em;
573
font-weight: 600;
574
flex: 1 0 auto;
575
}
576
#pagination > a {
578
text-decoration: none;
579
color: var(--color-accent-1);
580
}
581
#pagination-options {
583
justify-content: center;
584
align-items: space-between;
585
gap: 1em;
586
width: 100%;
587
}
588
.comment {
590
/* Span all columns */
591
grid-column: 1 / -1;
592
padding: 1em;
593
background: var(--color-card);
594
color: var(--color-card-text);
595
font: var(--body-font);
596
box-shadow: var(--shadow-card);
597
z-index: 2;
598
border-radius: var(--radius-card);
599
border: var(--border-card);
600
display: flex;
601
flex-flow: column nowrap;
602
}
603
.resolved-comments {
605
grid-column: 1 / -1;
606
font: var(--body-font);
607
}
608
small {
610
font-size: 1em; /* more like LARGE :D, <small> has another semantic meaning which remains valid */
611
}
612