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; 440} 441 442.code-view > .line-number:nth-last-child(2), 443.code-view > :is(code, ins, del, x-codeline):last-child { 444padding-bottom: 1ch; 445} 446 447.line-number { 448display: inline-block; 449box-sizing: content-box; 450text-align: right; 451padding: 0 1ch; 452background: var(--color-code-line-number); 453position: sticky; 454left: 0; 455user-select: none; 456font-weight: 500; 457} 458 459.line-number:has(+ ins) { 460background: var(--color-insertion-line-number); 461} 462 463.line-number:has(+ del) { 464background: var(--color-deletion-line-number); 465} 466 467ins, .code-view > ins { 468background: var(--color-insertion); 469color: var(--color-insertion-text); 470text-decoration: none; 471} 472 473del, .code-view > del { 474background: var(--color-deletion); 475color: var(--color-deletion-text); 476text-decoration: none; 477} 478 479strong, em { 480font: inherit; 481} 482 483.emphasis-1 { 484font-style: italic; 485} 486 487.emphasis-2 { 488font-weight: 700; 489} 490 491.emphasis-3 { 492font-style: italic; 493font-weight: 700; 494} 495 496.emphasis-4 { 497text-decoration: underline; 498} 499 500.emphasis-5 { 501text-decoration: underline; 502font-style: italic; 503} 504 505.emphasis-6 { 506text-decoration: underline; 507font-weight: 700; 508} 509 510.emphasis-7 { 511text-decoration: underline; 512font-style: italic; 513font-weight: 700; 514} 515 516#favourites-table { 517width: 100%; 518} 519 520#favourites-table > thead > tr > th:nth-child(1) { 521width: 100%; 522} 523 524#favourites-table > thead > tr > th:not(:nth-child(1)) { 525writing-mode: vertical-lr; 526} 527 528#favourites-table > tbody > tr > td:not(:nth-child(1)) { 529vertical-align: middle; 530text-align: center; 531} 532 533#favourites-table > tbody > tr > td:not(:nth-child(1)) > input { 534display: inline-flex; 535margin: 0; 536} 537 538#change-avatar-label { 539cursor: pointer; 540position: relative; 541width: max(25%, 128px); 542aspect-ratio: 1/1; 543border-radius: var(--radius-avatar); 544overflow: hidden; 545} 546 547#change-avatar-label:hover::before { 548position: absolute; 549content: attr(data-change-label); 550background: #00000080; 551color: #ffffff; 552width: 100%; 553height: 100%; 554display: flex; 555align-items: center; 556justify-content: center; 557} 558 559#pagination { 560display: flex; 561gap: 1em; 562justify-content: center; 563align-items: center; 564font-size: 1.5em; 565font-weight: 600; 566} 567 568#pagination > a { 569text-decoration: none; 570color: var(--color-accent-1); 571} 572