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); 401padding: 8px; 402} 403 404.code-view { 405white-space: normal; 406padding: 0; 407display: grid; 408grid-template-columns: min-content min-content; 409grid-auto-rows: min-content; 410width: 100%; 411overflow: auto; 412} 413 414.code-view :is(code, ins, del, x-codeline) { 415white-space: pre; 416font: inherit; 417color: inherit; 418background: inherit; 419display: inline; 420padding: 0; 421margin: 0; 422width: 100%; 423padding-left: 1ch; 424} 425 426.code-view > .line-number:first-child, 427.code-view > .line-number:first-child + :is(code, ins, del, x-codeline) { 428padding-top: 1ch; 429} 430 431.code-view > :is(code, ins, del, x-codeline):last-child { 432padding-bottom: 1ch; 433} 434 435.line-number { 436display: inline-block; 437width: 8ch; 438box-sizing: content-box; 439text-align: right; 440padding-right: 1ch; 441background: var(--color-code-line-number); 442position: sticky; 443left: 0; 444user-select: none; 445font-weight: 500; 446} 447 448.line-number:has(+ ins) { 449background: var(--color-insertion-line-number); 450} 451 452.line-number:has(+ del) { 453background: var(--color-deletion-line-number); 454} 455 456ins, .code-view > ins { 457background: var(--color-insertion); 458color: var(--color-insertion-text); 459text-decoration: none; 460} 461 462del, .code-view > del { 463background: var(--color-deletion); 464color: var(--color-deletion-text); 465text-decoration: none; 466} 467