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 • 9.15 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-insertion: #00C85366;
15
--color-insertion-line-number: #00C853;
16
--color-insertion-text: currentColor;
17
--color-deletion: #D5000066;
18
--color-deletion-text: currentColor;
19
--color-deletion-line-number: #D50000;
20
--color-code-line-number: #455A64;
21
}
22
23
.big-button {
24
font-size: 1.5em;
25
}
26
27
.ripple-pad {
28
background: #ffffff99;
29
position: absolute;
30
opacity: 1;
31
transform: scale(0);
32
animation: RippleEffect 375ms cubic-bezier(0, 0.55, 0.45, 1) forwards;
33
}
34
35
@keyframes RippleEffect {
36
to {
37
transform: scale(1);
38
opacity: 0;
39
}
40
}
41
42
button, input, .button, select {
43
position: relative;
44
overflow: hidden;
45
}
46
47
.error-page-container {
48
align-items: center;
49
justify-content: center;
50
width: 100%;
51
height: 100%;
52
}
53
54
/*
55
@media screen and (max-width: 896px) {
56
.navbar {
57
flex-flow: column nowrap;
58
height: fit-content;
59
}
60
}
61
*/
62
63
@media screen and (max-width: 640px) {
64
#repo-table > * > tr > :is(td, th):is(:nth-child(3), :nth-child(4)) {
65
display: none;
66
}
67
68
.commit-message {
69
display: none !important;
70
}
71
}
72
73
/*
74
@media screen and (max-width: 544px) {
75
.navbar > ul {
76
flex-flow: row wrap;
77
justify-content: center;
78
}
79
#commit-dialog {
80
align-items: stretch;
81
}
82
}
83
@media screen and (max-width: 512px) {
84
.breadcrumbs {
85
flex-flow: column nowrap;
86
justify-content: center;
87
height: auto;
88
gap: 1em;
89
}
90
}
91
*/
92
93
.file-icon {
94
font-size: 1.25em;
95
}
96
97
.file-name, .commit-message {
98
display: inline-block;
99
white-space: nowrap;
100
overflow: hidden;
101
text-overflow: ellipsis;
102
}
103
104
.file-link {
105
text-decoration: none;
106
}
107
108
.button {
109
text-decoration: none;
110
}
111
112
.password-error {
113
background: var(--color-error);
114
color: var(--color-error-text);
115
padding: 8px;
116
gap: 4px;
117
border-radius: 2px;
118
}
119
120
#username p {
121
font-size: 1.5em;
122
font-weight: 300;
123
}
124
125
.box-center {
126
align-items: center;
127
}
128
129
#global-nav > x-hbox > a > x-hbox {
130
height: 100%;
131
}
132
133
footer {
134
background: var(--color-callout-1);
135
color: var(--color-callout-1-text);
136
padding: 16px;
137
}
138
footer a {
139
color: var(--color-callout-1-text) !important;
140
}
141
body {
142
display: flex;
143
flex-flow: column;
144
}
145
main {
146
flex: 1 0 auto;
147
}
148
body > footer hr {
149
border-color: #ffffff80;
150
margin: 8px 0;
151
}
152
153
.branch-icon {
154
width: 2em;
155
font-size: 32px;
156
align-items: center;
157
justify-content: center;
158
display: flex;
159
}
160
161
dd {
162
margin-left: 2em;
163
}
164
165
.navbar-mini {
166
--height-navbar: 48px;
167
}
168
169
.dialog-tools {
170
position: relative;
171
left: 8px;
172
}
173
174
.thumbnail-marquee {
175
height: 1.5em;
176
overflow: hidden;
177
position: relative;
178
}
179
180
.inner-thumbnail-marquee {
181
position: absolute;
182
width: 100%;
183
height: 100%;
184
overflow: visible;
185
text-align: center;
186
animation: marquee 3000ms linear infinite;
187
}
188
189
@keyframes marquee {
190
0% {
191
transform: translateX(200%);
192
}
193
100% {
194
transform: translateX(-200%);
195
}
196
}
197
198
@media screen and (min-width: 641px) {
199
#sidenav-trigger {
200
display: none;
201
}
202
#global-nav {
203
padding-left: 16px;
204
}
205
}
206
207
@media screen and (max-width: 640px) {
208
#navbar-separator ~ a {
209
display: none;
210
}
211
}
212
213
hr {
214
border-color: currentColor;
215
border-width: 1px;
216
margin: 1em 0;
217
opacity: 0.5;
218
}
219
220
.state-label {
221
writing-mode: vertical-lr;
222
text-transform: uppercase;
223
padding: 1em;
224
margin: 0;
225
}
226
227
.breadcrumbs > x-buttonbox iconify-icon {
228
font-size: 1.5rem;
229
}
230
231
.breadcrumbs > x-buttonbox > a {
232
display: flex;
233
align-items: center;
234
}
235
236
#repo-tabs > li > a {
237
display: flex;
238
flex-flow: row wrap;
239
gap: 0.5ch;
240
text-transform: uppercase;
241
position: relative;
242
overflow: hidden;
243
padding: 4px 16px;
244
}
245
246
#repo-tabs > li.selected > a {
247
box-shadow: inset 0 -0.25rem var(--color-accent);
248
}
249
250
#repo-nav {
251
padding-left: 0;
252
}
253
254
x-buttonbox.segmented {
255
box-shadow: var(--shadow-button);
256
padding: 0;
257
gap: 0;
258
overflow: hidden;
259
border-radius: var(--radius-button);
260
width: fit-content;
261
}
262
263
x-buttonbox.segmented > * {
264
border-radius: 0;
265
}
266
267
.vote-button:not(.selected) {
268
box-shadow: none !important;
269
color: inherit !important;
270
background: transparent !important;
271
outline: 0.1px solid #00000080;
272
}
273
274
.vote-button:not(.selected):hover {
275
background: var(--color-flat-button-hover) !important;
276
}
277
278
.vote-button {
279
padding: 4px;
280
}
281
282
.vote-score {
283
min-width: 3ch;
284
text-align: center;
285
}
286
287
.reply-area {
288
box-shadow: var(--shadow-card);
289
margin: var(--margin-card);
290
border-radius: var(--radius-card);
291
background: var(--color-card);
292
color: var(--color-card-text);
293
border: var(--border-card);
294
overflow: hidden; /* So rounded corners can cut through the content */
295
display: flex;
296
flex-flow: column nowrap;
297
height: 100%;
298
}
299
300
.reply-area > summary {
301
display: flex;
302
align-items: center;
303
cursor: pointer;
304
padding: var(--padding-card);
305
padding-top: var(--padding-card-top);
306
text-transform: uppercase;
307
font-weight: 500;
308
transition: box-shadow 250ms cubic-bezier(0.33, 1, 0.68, 1);
309
}
310
311
.reply-area > form {
312
padding: var(--padding-card);
313
padding-top: var(--padding-card-top);
314
}
315
316
.reply-area > summary::before {
317
content: " ";
318
background-image: url("/static/efficient-ui/icons/expand.svg");
319
transform: rotate(-90deg);
320
width: 1.5em;
321
height: 1.5em;
322
background-size: contain;
323
background-repeat: no-repeat;
324
transition: transform 250ms cubic-bezier(0.33, 1, 0.68, 1);
325
}
326
327
.reply-area[open] > summary::before {
328
transform: rotate(0);
329
}
330
331
.reply-area[open] > summary {
332
box-shadow: var(--shadow-card);
333
}
334
335
.post-author {
336
color: inherit;
337
text-decoration: inherit;
338
}
339
340
.post-details {
341
color: var(--color-caption-text);
342
}
343
344
#forum-banner {
345
background: var(--color-navbar);
346
color: #ffffff;
347
min-height: 56px;
348
position: sticky;
349
top: 0;
350
z-index: 1;
351
box-shadow: var(--shadow-navbar);
352
}
353
354
#forum-banner h1 {
355
font-size: 1rem;
356
font-weight: 600;
357
}
358
359
#forum-banner a, .nolink {
360
color: inherit;
361
text-decoration: none;
362
}
363
364
header {
365
z-index: 2;
366
}
367
368
.icon-button {
369
border-radius: 50%;
370
aspect-ratio: 1/1;
371
height: 3rem;
372
width: 3rem;
373
padding: 0;
374
font-size: 1.5rem;
375
background: transparent !important;
376
box-shadow: none !important;
377
}
378
379
#cookie-info {
380
background: var(--color-primary);
381
color: var(--color-primary-text);
382
align-items: center;
383
justify-content: space-between;
384
}
385
386
#cookie-info > p {
387
padding: 8px 1em;
388
}
389
390
.interrupt-top {
391
--mask: conic-gradient(from 135deg at top, #0000, #000 0 90deg,#0000 90deg) 50%/16px 100%;
392
padding-top: calc(var(--padding-code) + 8px);
393
-webkit-mask: var(--mask);
394
mask: var(--mask);
395
}
396
397
.diff-position {
398
width: 100%;
399
background: var(--color-code-line-number);
400
color: var(--color-code-text);
401
font: var(--mono-font);
402
font-size: 20px;
403
line-height: 24px;
404
padding: 8px;
405
}
406
407
.code-view {
408
white-space: normal;
409
padding: 0;
410
display: grid;
411
grid-template-columns: min-content min-content;
412
grid-auto-rows: min-content;
413
width: 100%;
414
overflow: auto;
415
}
416
417
.code-view :is(code, ins, del, x-codeline) {
418
white-space: pre;
419
font: inherit;
420
color: inherit;
421
background: inherit;
422
display: inline;
423
padding: 0;
424
margin: 0;
425
width: 100%;
426
padding-left: 1ch;
427
}
428
429
.code-view > .line-number:first-child,
430
.code-view > .line-number:first-child + :is(code, ins, del, x-codeline) {
431
padding-top: 1ch;
432
}
433
434
.code-view > .line-number:nth-last-child(2),
435
.code-view > :is(code, ins, del, x-codeline):last-child {
436
padding-bottom: 1ch;
437
}
438
439
.line-number {
440
display: inline-block;
441
box-sizing: content-box;
442
text-align: right;
443
padding: 0 1ch;
444
background: var(--color-code-line-number);
445
position: sticky;
446
left: 0;
447
user-select: none;
448
font-weight: 500;
449
}
450
451
.line-number:has(+ ins) {
452
background: var(--color-insertion-line-number);
453
}
454
455
.line-number:has(+ del) {
456
background: var(--color-deletion-line-number);
457
}
458
459
ins, .code-view > ins {
460
background: var(--color-insertion);
461
color: var(--color-insertion-text);
462
text-decoration: none;
463
}
464
465
del, .code-view > del {
466
background: var(--color-deletion);
467
color: var(--color-deletion-text);
468
text-decoration: none;
469
}
470
471
strong, em {
472
font: inherit;
473
}
474
475
.emphasis-1 {
476
font-style: italic;
477
}
478
479
.emphasis-2 {
480
font-weight: 700;
481
}
482
483
.emphasis-3 {
484
font-style: italic;
485
font-weight: 700;
486
}
487
488
.emphasis-4 {
489
text-decoration: underline;
490
}
491
492
.emphasis-5 {
493
text-decoration: underline;
494
font-style: italic;
495
}
496
497
.emphasis-6 {
498
text-decoration: underline;
499
font-weight: 700;
500
}
501
502
.emphasis-7 {
503
text-decoration: underline;
504
font-style: italic;
505
font-weight: 700;
506
}
507