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