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 • 10.36 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-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
25
.big-button {
26
font-size: 1.5em;
27
}
28
29
.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
37
@keyframes RippleEffect {
38
to {
39
transform: scale(1);
40
opacity: 0;
41
}
42
}
43
44
button, input, .button, select {
45
position: relative;
46
overflow: hidden;
47
}
48
49
.error-page-container {
50
align-items: center;
51
justify-content: center;
52
width: 100%;
53
height: 100%;
54
}
55
56
/*
57
@media screen and (max-width: 896px) {
58
.navbar {
59
flex-flow: column nowrap;
60
height: fit-content;
61
}
62
}
63
*/
64
65
@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
70
.commit-message {
71
display: none !important;
72
}
73
}
74
75
/*
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
95
.file-icon {
96
font-size: 1.25em;
97
}
98
99
.file-name, .commit-message {
100
display: inline-block;
101
white-space: nowrap;
102
overflow: hidden;
103
text-overflow: ellipsis;
104
}
105
106
.file-link {
107
text-decoration: none;
108
}
109
110
.button {
111
text-decoration: none;
112
}
113
114
.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
122
#username p {
123
font-size: 1.5em;
124
font-weight: 300;
125
}
126
127
.box-center {
128
align-items: center;
129
}
130
131
#global-nav > x-hbox > a > x-hbox {
132
height: 100%;
133
}
134
135
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
155
.branch-icon {
156
width: 2em;
157
font-size: 32px;
158
align-items: center;
159
justify-content: center;
160
display: flex;
161
}
162
163
dd {
164
margin-left: 2em;
165
}
166
167
.navbar-mini {
168
--height-navbar: 48px;
169
}
170
171
.dialog-tools {
172
position: relative;
173
left: 8px;
174
}
175
176
.thumbnail-marquee {
177
height: 1.5em;
178
overflow: hidden;
179
position: relative;
180
}
181
182
.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
191
@keyframes marquee {
192
0% {
193
transform: translateX(200%);
194
}
195
100% {
196
transform: translateX(-200%);
197
}
198
}
199
200
@media screen and (min-width: 641px) {
201
#sidenav-trigger {
202
display: none;
203
}
204
#global-nav {
205
padding-left: 16px;
206
}
207
}
208
209
@media screen and (max-width: 640px) {
210
#navbar-separator ~ a {
211
display: none;
212
}
213
}
214
215
hr {
216
border-color: currentColor;
217
border-width: 1px;
218
margin: 1em 0;
219
opacity: 0.5;
220
}
221
222
.state-label {
223
writing-mode: vertical-lr;
224
text-transform: uppercase;
225
padding: 1em;
226
margin: 0;
227
}
228
229
.state-label-2 {
230
text-transform: uppercase;
231
padding: 0.5em;
232
margin: 0;
233
}
234
235
.breadcrumbs > x-buttonbox iconify-icon {
236
font-size: 1.5rem;
237
}
238
239
.breadcrumbs > x-buttonbox > a {
240
display: flex;
241
align-items: center;
242
}
243
244
#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
254
#repo-tabs > li.selected > a {
255
box-shadow: inset 0 -0.25rem var(--color-accent);
256
}
257
258
#repo-nav {
259
padding-left: 0;
260
}
261
262
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
271
x-buttonbox.segmented > * {
272
border-radius: 0;
273
}
274
275
.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
282
.vote-button:not(.selected):hover {
283
background: var(--color-flat-button-hover) !important;
284
}
285
286
.vote-button {
287
padding: 4px;
288
}
289
290
.vote-score {
291
min-width: 3ch;
292
text-align: center;
293
}
294
295
.reply-area {
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
308
.reply-area > 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
319
.reply-area > form {
320
padding: var(--padding-card);
321
padding-top: var(--padding-card-top);
322
}
323
324
.reply-area > 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
335
.reply-area[open] > summary::before {
336
transform: rotate(0);
337
}
338
339
.reply-area[open] > summary {
340
box-shadow: var(--shadow-card);
341
}
342
343
.post-author {
344
color: inherit;
345
text-decoration: inherit;
346
}
347
348
.post-details {
349
color: var(--color-caption-text);
350
}
351
352
#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
362
#forum-banner h1 {
363
font-size: 1rem;
364
font-weight: 600;
365
}
366
367
#forum-banner a, .nolink {
368
color: inherit;
369
text-decoration: none;
370
}
371
372
header {
373
z-index: 2;
374
}
375
376
.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
387
#cookie-info {
388
background: var(--color-primary);
389
color: var(--color-primary-text);
390
align-items: center;
391
justify-content: space-between;
392
}
393
394
#cookie-info > p {
395
padding: 8px 1em;
396
}
397
398
.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
405
.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
415
.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
425
.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
437
.code-view > .line-number:first-child,
438
.code-view > .line-number:first-child + :is(code, ins, del, x-codeline) {
439
padding-top: 1ch;
440
}
441
442
.code-view > .line-number:nth-last-child(2),
443
.code-view > :is(code, ins, del, x-codeline):last-child {
444
padding-bottom: 1ch;
445
}
446
447
.line-number {
448
display: inline-block;
449
box-sizing: content-box;
450
text-align: right;
451
padding: 0 1ch;
452
background: var(--color-code-line-number);
453
position: sticky;
454
left: 0;
455
user-select: none;
456
font-weight: 500;
457
}
458
459
.line-number:has(+ ins) {
460
background: var(--color-insertion-line-number);
461
}
462
463
.line-number:has(+ del) {
464
background: var(--color-deletion-line-number);
465
}
466
467
ins, .code-view > ins {
468
background: var(--color-insertion);
469
color: var(--color-insertion-text);
470
text-decoration: none;
471
}
472
473
del, .code-view > del {
474
background: var(--color-deletion);
475
color: var(--color-deletion-text);
476
text-decoration: none;
477
}
478
479
strong, em {
480
font: inherit;
481
}
482
483
.emphasis-1 {
484
font-style: italic;
485
}
486
487
.emphasis-2 {
488
font-weight: 700;
489
}
490
491
.emphasis-3 {
492
font-style: italic;
493
font-weight: 700;
494
}
495
496
.emphasis-4 {
497
text-decoration: underline;
498
}
499
500
.emphasis-5 {
501
text-decoration: underline;
502
font-style: italic;
503
}
504
505
.emphasis-6 {
506
text-decoration: underline;
507
font-weight: 700;
508
}
509
510
.emphasis-7 {
511
text-decoration: underline;
512
font-style: italic;
513
font-weight: 700;
514
}
515
516
#favourites-table {
517
width: 100%;
518
}
519
520
#favourites-table > thead > tr > th:nth-child(1) {
521
width: 100%;
522
}
523
524
#favourites-table > thead > tr > th:not(:nth-child(1)) {
525
writing-mode: vertical-lr;
526
}
527
528
#favourites-table > tbody > tr > td:not(:nth-child(1)) {
529
vertical-align: middle;
530
text-align: center;
531
}
532
533
#favourites-table > tbody > tr > td:not(:nth-child(1)) > input {
534
display: inline-flex;
535
margin: 0;
536
}
537
538
#change-avatar-label {
539
cursor: pointer;
540
position: relative;
541
width: max(25%, 128px);
542
aspect-ratio: 1/1;
543
border-radius: var(--radius-avatar);
544
overflow: hidden;
545
}
546
547
#change-avatar-label:hover::before {
548
position: absolute;
549
content: attr(data-change-label);
550
background: #00000080;
551
color: #ffffff;
552
width: 100%;
553
height: 100%;
554
display: flex;
555
align-items: center;
556
justify-content: center;
557
}
558
559
#pagination {
560
display: flex;
561
gap: 1em;
562
justify-content: center;
563
align-items: center;
564
font-size: 1.5em;
565
font-weight: 600;
566
}
567
568
#pagination > a {
569
text-decoration: none;
570
color: var(--color-accent-1);
571
}
572