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