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