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