app.css
1 @import url('@szhsin/react-menu/dist/core.css'); 2 @import url('toastify-js/src/toastify.css'); 3 4 html, 5 body { 6 margin: 0; 7 padding: 0; 8 background-color: var(--bg-color); 9 color: var(--text-color); 10 overflow-x: hidden; 11 } 12 body { 13 touch-action: pan-x pan-y; 14 } 15 16 #app { 17 min-height: 100vh; 18 min-height: 100dvh; 19 display: flex; 20 align-items: center; 21 justify-content: center; 22 } 23 #app-standalone { 24 background-color: var(--bg-faded-color); 25 } 26 27 /* MENTIONS */ 28 29 a.mention { 30 text-decoration-line: none; 31 } 32 a.mention span { 33 text-decoration-line: underline; 34 text-decoration-color: inherit; 35 text-decoration-thickness: 2px; 36 text-underline-offset: 2px; 37 } 38 /* a.mention:has(span).hashtag { 39 color: var(--link-light-color); 40 } */ 41 a.mention span { 42 color: var(--text-color); 43 } 44 a[href^='http'][rel*='nofollow']:visited:not(:has(div)) { 45 color: var(--link-visited-color); 46 text-decoration-color: var(--link-visited-color); 47 } 48 49 .deck-container { 50 width: 100%; 51 height: 100vh; 52 height: 100dvh; 53 overflow: auto; 54 overflow-x: hidden; 55 transition: opacity 0.1s ease-in-out; 56 overscroll-behavior: contain; 57 scroll-behavior: smooth; 58 background-color: var(--bg-color); 59 /* This `transform` fixes carousel blocking vertical scrolling for pointer devices on iPad */ 60 transform: translateZ(0); 61 } 62 63 @media (hover: hover) { 64 .deck-container { 65 overscroll-behavior: auto; 66 } 67 } 68 .deck-container[hidden] { 69 display: block; 70 position: absolute; 71 user-select: none; 72 pointer-events: none; 73 opacity: 0; 74 content-visibility: hidden; 75 } 76 77 .deck-container, 78 .deck.contained { 79 scroll-padding-top: 3em; 80 } 81 82 .deck { 83 min-height: 100vh; 84 min-height: 100dvh; 85 margin: auto; 86 width: var(--main-width); 87 max-width: 100%; 88 background-color: var(--bg-color); 89 } 90 .deck.contained { 91 overflow: auto; 92 overflow-x: hidden; 93 height: 100vh; 94 height: 100dvh; 95 overscroll-behavior: contain; 96 } 97 @media (hover: hover) { 98 .deck.contained { 99 overscroll-behavior: auto; 100 } 101 } 102 103 .deck > header { 104 position: sticky; 105 top: 0; 106 z-index: 1; 107 cursor: default; 108 z-index: 10; 109 user-select: none; 110 transition: transform 0.5s ease-in-out; 111 user-select: none; 112 } 113 .deck > header[hidden] { 114 display: block; 115 transform: translateY(-100%); 116 pointer-events: none; 117 user-select: none; 118 } 119 .deck > header .header-grid { 120 background-color: var(--bg-blur-color); 121 background-image: linear-gradient(to bottom, var(--bg-color), transparent); 122 backdrop-filter: saturate(180%) blur(20px); 123 border-bottom: var(--hairline-width) solid var(--divider-color); 124 min-height: 3em; 125 display: grid; 126 grid-template-columns: 1fr minmax(0, max-content) 1fr; 127 align-items: center; 128 white-space: nowrap; 129 } 130 .deck > header .header-grid > .header-side:last-of-type { 131 text-align: right; 132 grid-column: 3; 133 } 134 .deck > header .header-grid :is(button, .button).plain { 135 backdrop-filter: none; 136 } 137 .deck > header .header-grid h1 { 138 margin: 0 8px; 139 padding: 0; 140 font-size: 1.2em; 141 text-align: center; 142 overflow: hidden; 143 text-overflow: ellipsis; 144 white-space: nowrap; 145 } 146 .deck > header .header-grid.header-grid-2 { 147 grid-template-columns: 1fr max-content; 148 } 149 .deck > header .header-grid-2 h1 { 150 text-align: left; 151 padding-left: 8px; 152 } 153 .deck > header .header-grid h1:has(.ancestors-indicator) { 154 display: flex; 155 gap: 8px; 156 align-items: center; 157 max-width: fit-content; 158 } 159 .deck > header .header-grid h1:has(.ancestors-indicator) .hero-heading { 160 flex: 1; 161 overflow: hidden; 162 text-overflow: ellipsis; 163 white-space: nowrap; 164 } 165 .deck h2 { 166 font-size: 1.45em; 167 } 168 .deck.padded-bottom .timeline > li:last-child { 169 padding-bottom: 80vh !important; 170 padding-bottom: 80dvh !important; 171 } 172 173 @keyframes indeterminate-bar { 174 0% { 175 transform: translateX(-50%); 176 opacity: 0.25; 177 } 178 50% { 179 opacity: 1; 180 } 181 100% { 182 transform: translateX(50%); 183 opacity: 0.25; 184 } 185 } 186 .deck > header.loading:after { 187 pointer-events: none; 188 content: ''; 189 display: block; 190 height: 4px; 191 position: absolute; 192 bottom: 0; 193 width: 50%; 194 left: 25%; 195 background-image: radial-gradient( 196 farthest-side at bottom, 197 var(--link-color), 198 transparent 199 ); 200 animation: indeterminate-bar 1s ease-in-out infinite alternate; 201 } 202 @media (min-width: 40em) { 203 .deck > header.loading:after { 204 height: 8px; 205 } 206 } 207 208 .timeline { 209 margin: 10px auto 0 auto; 210 padding: 0 5px 0 5px; 211 } 212 .timeline.grow { 213 /* min-height: 100vh; 214 min-height: 100dvh; */ 215 padding-bottom: calc(env(safe-area-inset-bottom) + 16px); 216 } 217 .timeline > li { 218 list-style: none; 219 margin: 0; 220 padding: 0; 221 border-bottom: var(--hairline-width) solid var(--divider-color); 222 } 223 .timeline.flat > li { 224 border-bottom: none; 225 } 226 227 .timeline.contextual { 228 --thread-start: 40px; 229 --line-start: 40px; 230 --line-width: 3px; 231 --line-end: calc(var(--line-start) + var(--line-width)); 232 --line-margin-end: 16px; 233 --line-radius: 10px; 234 --line-diameter: calc(var(--line-radius) * 2); 235 --avatar-size: 50px; 236 --avatar-margin-start: 16px; 237 --avatar-margin-end: 12px; 238 } 239 .timeline.contextual > li { 240 background-image: linear-gradient( 241 to right, 242 transparent, 243 transparent var(--line-start), 244 var(--comment-line-color) var(--line-start), 245 var(--comment-line-color) var(--line-end), 246 transparent var(--line-end), 247 transparent 248 ); 249 background-repeat: no-repeat; 250 transition: opacity 0.3s ease-in-out; 251 } 252 .timeline.contextual > li:first-child { 253 background-position: 0 calc(16px + var(--avatar-size)); 254 } 255 .timeline.contextual > li:last-child { 256 background-size: 100% 20px; 257 } 258 .timeline.contextual > li:only-child { 259 background-image: none; 260 } 261 .timeline.contextual > li.descendant { 262 position: relative; 263 } 264 .timeline.contextual > li.descendant { 265 padding-bottom: 1em; 266 padding-right: 10px; 267 } 268 .timeline.contextual 269 > li.descendant:not(.thread) 270 > :is(.status-link, .status-focus) { 271 padding-left: 40px; 272 } 273 .timeline.contextual .replies[data-scroll-left]:not([data-scroll-left='0']) { 274 background-color: var(--bg-color); 275 box-shadow: inset 0 -3px var(--comment-line-color), 276 inset 0 3px var(--comment-line-color); 277 } 278 .timeline.contextual .replies[data-comments-level='4'] { 279 overflow-x: auto; 280 } 281 .timeline.contextual .replies[data-comments-level='4']:has(.replies) { 282 overflow-x: auto; 283 mask-image: linear-gradient(to left, transparent, black 32px); 284 } 285 .timeline.contextual 286 .replies[data-comments-level='4']:has(.replies) 287 > .replies-summary { 288 border-top: 2px dashed var(--divider-color); 289 } 290 .timeline.contextual 291 .replies[data-comments-level='4'] 292 .replies[data-comments-level-overflow='true'] 293 .status { 294 min-width: min(20em, 80vw); 295 } 296 .timeline.contextual 297 > li.descendant.thread 298 > :is(.status-link, .status-focus) 299 + .replies 300 .replies-summary { 301 margin-left: calc( 302 var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) + 303 (var(--line-margin-end) * (var(--comments-level) - 1)) 304 ); 305 } 306 .descendant.thread { 307 padding: 0 10px 0 10px; 308 } 309 .timeline.flat.contextual.grow > .ancestor { 310 margin-top: 10px; 311 } 312 .timeline.flat.contextual.grow { 313 padding: 0 !important; 314 margin-top: 0; 315 } 316 /* .timeline.contextual 317 > li.descendant.thread 318 > .status-link 319 + .replies 320 .replies 321 > .replies-summary { 322 margin-left: calc( 323 var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) + 324 var(--line-margin-end) 325 ); 326 } 327 .timeline.contextual 328 > li.descendant.thread 329 > .status-link 330 + .replies 331 .replies 332 .replies 333 > .replies-summary { 334 margin-left: calc( 335 var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) + 336 (var(--line-margin-end) * 2) 337 ); 338 } */ 339 .timeline.contextual 340 > li.descendant.thread 341 > :is(.status-link, .status-focus) 342 + .replies 343 :is(.status-link, .status-focus) { 344 padding-left: calc( 345 var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) + 346 (var(--line-margin-end) * (var(--comments-level) - 1)) 347 ); 348 margin-bottom: 7px; 349 margin-top: 15px; 350 } 351 /* .timeline.contextual 352 > li.descendant.thread 353 > .status-link 354 + .replies 355 .replies 356 .status-link { 357 padding-left: calc( 358 var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) + 359 var(--line-margin-end) 360 ); 361 } 362 .timeline.contextual 363 > li.descendant.thread 364 > .status-link 365 + .replies 366 .replies 367 .replies 368 .status-link { 369 padding-left: calc( 370 var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) + 371 (var(--line-margin-end) * 2) 372 ); 373 } */ 374 .timeline.contextual 375 > li.descendant:not(.thread) 376 > :is(.status-link, .status-focus) 377 + .replies 378 .replies-summary { 379 margin-left: calc( 380 var(--thread-start) + var(--line-margin-end) * var(--comments-level) 381 ); 382 } 383 /* .timeline.contextual 384 > li.descendant:not(.thread) 385 > .status-link 386 + .replies 387 .replies 388 > .replies-summary { 389 margin-left: calc( 390 var(--thread-start) + var(--line-margin-end) + var(--line-margin-end) 391 ); 392 } 393 .timeline.contextual 394 > li.descendant:not(.thread) 395 > .status-link 396 + .replies 397 .replies 398 .replies 399 > .replies-summary { 400 margin-left: calc( 401 var(--thread-start) + var(--line-margin-end) + (var(--line-margin-end) * 2) 402 ); 403 } */ 404 .timeline.contextual 405 > li.descendant:not(.thread) 406 > :is(.status-link, .status-focus) 407 + .replies 408 :is(.status-link, .status-focus) { 409 padding-left: calc( 410 var(--thread-start) + var(--line-margin-end) * var(--comments-level) 411 ); 412 margin-bottom: 7px; 413 margin-top: 15px; 414 } 415 .thread > .status-link { 416 margin-bottom: 7px; 417 margin-top: 15px; 418 } 419 420 /* .timeline.contextual 421 > li.descendant:not(.thread) 422 > .status-link 423 + .replies 424 .replies 425 .status-link { 426 padding-left: calc(var(--thread-start) + (var(--line-margin-end) * 2)); 427 } 428 .timeline.contextual 429 > li.descendant:not(.thread) 430 > .status-link 431 + .replies 432 .replies 433 .replies 434 .status-link { 435 padding-left: calc(var(--thread-start) + (var(--line-margin-end) * 3)); 436 } */ 437 .timeline.contextual > li.descendant:not(.thread):before { 438 content: ''; 439 position: absolute; 440 top: 10px; 441 left: var(--line-start); 442 width: var(--line-diameter); 443 height: var(--line-diameter); 444 border-radius: var(--line-radius); 445 border-style: solid; 446 border-width: var(--line-width); 447 border-color: transparent transparent var(--comment-line-color) transparent; 448 transform: rotate(45deg); 449 } 450 .timeline.contextual > li .replies-link { 451 color: var(--text-insignificant-color); 452 margin-left: 16px; 453 margin-top: -12px; 454 padding-bottom: 12px; 455 font-size: 90%; 456 } 457 .timeline.contextual > li.ancestor .replies-link { 458 margin-left: calc( 459 var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) 460 ); 461 } 462 .timeline.contextual 463 > li.thread 464 > :is(.status-link, .status-focus) 465 .replies-link { 466 margin-left: calc( 467 var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) 468 ); 469 } 470 .timeline.contextual > li .replies-link * { 471 vertical-align: middle; 472 } 473 .timeline.contextual > li .replies { 474 margin-top: 0px; 475 } 476 .timeline.contextual > li .replies :is(ul, li):not(.content *) { 477 margin: 0; 478 padding: 0; 479 list-style: none; 480 } 481 .timeline.contextual > li .replies > .replies-summary { 482 padding: 8px; 483 background-color: var(--bg-faded-color); 484 display: inline-block; 485 border-radius: 8px; 486 cursor: pointer; 487 text-transform: uppercase; 488 font-weight: 500; 489 font-size: 12px; 490 color: var(--text-insignificant-color); 491 user-select: none; 492 box-shadow: 0 0 0 2px var(--bg-color); 493 position: relative; 494 list-style: none; 495 white-space: nowrap; 496 } 497 .timeline.contextual > li .replies > .replies-summary::-webkit-details-marker { 498 display: none; 499 } 500 .timeline.contextual > li .replies > .replies-summary > * { 501 vertical-align: middle; 502 } 503 .timeline.contextual > li .replies > .replies-summary .avatars { 504 margin-right: 8px; 505 } 506 .timeline.contextual > li .replies > .replies-summary:active, 507 .timeline.contextual > li .replies[open] > .replies-summary { 508 color: var(--text-color); 509 background-color: var(--comment-line-color); 510 background-image: linear-gradient( 511 to top right, 512 var(--comment-line-color), 513 var(--bg-faded-color) 514 ); 515 } 516 .timeline.contextual > li .replies[open] > .replies-summary { 517 border-bottom-left-radius: 0; 518 } 519 .timeline.contextual > li .replies .replies-summary[hidden] { 520 display: none; 521 } 522 .timeline.contextual > li .replies li:not(.content li) { 523 position: relative; 524 } 525 .timeline.contextual > li .replies li:not(.content li) { 526 --line-start: calc( 527 var(--thread-start) + var(--line-margin-end) * var(--comments-level) 528 ); 529 --line-end: calc(var(--line-start) + var(--line-width)); 530 background-image: linear-gradient( 531 to right, 532 transparent, 533 transparent var(--line-start), 534 var(--comment-line-color) var(--line-start), 535 var(--comment-line-color) var(--line-end), 536 transparent var(--line-end), 537 transparent 538 ); 539 background-repeat: no-repeat; 540 } 541 /* .timeline.contextual > li .replies .replies li { 542 --line-start: calc(var(--thread-start) + (var(--line-margin-end) * 2)); 543 } 544 .timeline.contextual > li .replies .replies .replies li { 545 --line-start: calc(var(--thread-start) + (var(--line-margin-end) * 3)); 546 } */ 547 .timeline.contextual > li.thread .replies li:not(.content li) { 548 --line-start: calc( 549 var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) + 550 (var(--line-margin-end) * (var(--comments-level) - 1)) 551 ); 552 } 553 /* .timeline.contextual > li.thread .replies .replies li { 554 --line-start: calc( 555 var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) + 556 var(--line-margin-end) 557 ); 558 } 559 .timeline.contextual > li.thread .replies .replies .replies li { 560 --line-start: calc( 561 var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) + 562 (var(--line-margin-end) * 2) 563 ); 564 } */ 565 .timeline.contextual > li .replies li:not(.content li):last-child { 566 background-size: 100% 20px; 567 } 568 .timeline.contextual > li .replies li:not(.content li):before { 569 content: ''; 570 position: absolute; 571 top: 10px; 572 left: var(--line-start); 573 width: var(--line-diameter); 574 height: var(--line-diameter); 575 border-radius: var(--line-radius); 576 border-style: solid; 577 border-width: var(--line-width); 578 border-color: transparent transparent var(--comment-line-color) transparent; 579 transform: rotate(45deg); 580 } 581 /* .timeline.contextual > li .replies .replies li:before { 582 --line-start: calc( 583 var(--thread-start) + var(--line-margin-end) + var(--line-margin-end) 584 ); 585 } 586 .timeline.contextual > li .replies .replies .replies li:before { 587 --line-start: calc( 588 var(--thread-start) + var(--line-margin-end) + (var(--line-margin-end) * 2) 589 ); 590 } */ 591 .timeline.contextual > li.thread .replies li:not(.content li):before { 592 --line-start: calc( 593 var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) + 594 (var(--line-margin-end) * (var(--comments-level) - 1)) 595 ); 596 } 597 /* .timeline.contextual > li.thread .replies .replies li:before { 598 --line-start: calc( 599 var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) + 600 var(--line-margin-end) 601 ); 602 } 603 .timeline.contextual > li.thread .replies .replies .replies li:before { 604 --line-start: calc( 605 var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) + 606 (var(--line-margin-end) * 2) 607 ); 608 } */ 609 .timeline.contextual.loading > li:not(.hero) { 610 /* opacity: 0.5; */ 611 pointer-events: none; 612 } 613 614 .timeline-deck.compact .status { 615 max-height: max(25vh, 160px); 616 overflow: hidden; 617 mask-image: linear-gradient( 618 rgba(0, 0, 0, 1), 619 rgba(0, 0, 0, 1) 80%, 620 transparent 95% 621 ); 622 } 623 .timeline-deck.compact .status .meta ~ * { 624 pointer-events: none; 625 } 626 627 .timeline-header { 628 padding: 0 16px; 629 opacity: 0.75; 630 } 631 632 .timeline-empty { 633 color: var(--text-insignificant-color); 634 padding: 0 16px; 635 margin-bottom: 3em; 636 } 637 638 .timeline:not(.flat) > li.timeline-item-container { 639 --avatar-size: 50px; 640 --line-start: 40px; 641 --line-width: 3px; 642 --line-end: calc(var(--line-start) + var(--line-width)); 643 background-image: linear-gradient( 644 to right, 645 transparent, 646 transparent var(--line-start), 647 var(--comment-line-color) var(--line-start), 648 var(--comment-line-color) var(--line-end), 649 transparent var(--line-end), 650 transparent 651 ); 652 background-repeat: no-repeat; 653 } 654 .timeline:not(.flat) > li.timeline-item-container-start { 655 margin-bottom: 0; 656 border-bottom-left-radius: 0; 657 border-bottom-right-radius: 0; 658 border-bottom: 0; 659 background-position: 0 calc(16px + var(--avatar-size)); 660 } 661 .timeline:not(.flat) > li.timeline-item-container-middle { 662 margin-top: 0; 663 margin-bottom: 0; 664 border-radius: 0; 665 border-bottom: 0; 666 border-top: 0; 667 } 668 .timeline:not(.flat) > li.timeline-item-container-end { 669 margin-top: 0; 670 border-top-left-radius: 0; 671 border-top-right-radius: 0; 672 border-top: 0; 673 background-size: 100% 16px; 674 } 675 .timeline:not(.flat) 676 > li:is(.timeline-item-container-middle, .timeline-item-container-end) 677 .status-reply-to:not(.visibility-direct):not(.status-card) { 678 background-image: none; 679 } 680 .timeline:not(.flat) 681 > li.timeline-item-diff-author 682 > :is(.status-link, .status-focus) 683 > .status 684 > a 685 > .avatar { 686 transform: scale(0.8); 687 filter: drop-shadow(0 0 16px var(--bg-color)) 688 drop-shadow(0 0 8px var(--bg-color)) drop-shadow(0 0 8px var(--bg-color)); 689 } 690 691 .timeline .show-more { 692 padding-left: calc(var(--line-end) + var(--line-margin-end)) !important; 693 text-align: left; 694 background-color: transparent !important; 695 backdrop-filter: none !important; 696 position: relative; 697 border-radius: 0; 698 padding-block: 16px !important; 699 700 .avatars-bunch > .avatar:not(:first-child) { 701 margin-left: -4px; 702 } 703 } 704 .timeline .show-more:hover { 705 filter: none !important; 706 color: var(--text-color) !important; 707 background-color: var(--bg-faded-blur-color) !important; 708 } 709 .timeline .show-more:before { 710 content: ''; 711 position: absolute; 712 top: 10px; 713 left: var(--line-start); 714 width: var(--line-diameter); 715 height: var(--line-diameter); 716 border-radius: var(--line-radius); 717 border-style: solid; 718 border-width: var(--line-width); 719 border-color: transparent transparent var(--comment-line-color) transparent; 720 transform: rotate(45deg); 721 } 722 723 .status-loading { 724 text-align: center; 725 color: var(--text-insignificant-color); 726 max-width: var(--main-width); 727 } 728 .status-error { 729 text-align: center; 730 color: var(--text-insignificant-color); 731 max-width: var(--main-width); 732 } 733 734 .status-link { 735 display: block; 736 text-decoration-line: none; 737 color: inherit; 738 user-select: none; 739 transition: background-color 0.2s ease-out; 740 -webkit-tap-highlight-color: transparent; 741 animation: appear 0.2s ease-out; 742 -webkit-touch-callout: none; 743 border-radius: .75rem !important; 744 } 745 @media (pointer: coarse) { 746 .status-focus:not(.hero .status-focus) { 747 /* Only the hero doesn't have context menu */ 748 user-select: none; 749 -webkit-tap-highlight-color: transparent; 750 -webkit-touch-callout: none; 751 } 752 } 753 :is(.status-link, .status-focus):is(:focus, .is-active) { 754 background-color: var(--link-bg-hover-color); 755 outline-offset: -2px; 756 } 757 @media (hover: hover) { 758 .status-link:hover { 759 background-color: var(--link-bg-hover-color); 760 outline-offset: -2px; 761 } 762 } 763 .status-link:active:not(:has(:is(.media, button):active)) { 764 filter: brightness(0.95); 765 } 766 767 .status-carousel { 768 --carousel-faded-color: var(--bg-faded-color); 769 background: linear-gradient( 770 to bottom right, 771 var(--carousel-faded-color), 772 transparent 150% 773 ); 774 position: relative; 775 container-type: inline-size; 776 } 777 .status-carousel:after { 778 content: ''; 779 position: absolute; 780 inset: 0; 781 pointer-events: none; 782 background-image: radial-gradient( 783 ellipse 50% 32px at bottom center, 784 var(--carousel-faded-color), 785 transparent 786 ), 787 linear-gradient(to top, var(--bg-color), transparent 64px); 788 background-repeat: no-repeat; 789 background-position: bottom center; 790 } 791 .status-carousel header { 792 padding: 8px 16px 0; 793 display: flex; 794 justify-content: space-between; 795 align-items: center; 796 } 797 .status-carousel h3 { 798 margin: 0; 799 padding: 0; 800 font-size: 14px; 801 text-transform: uppercase; 802 color: var(--carousel-color); 803 text-shadow: 0 1px var(--bg-color); 804 } 805 .status-carousel > ul { 806 display: flex; 807 overflow-x: auto; 808 overflow-y: hidden; 809 scroll-snap-type: x mandatory; 810 scroll-behavior: smooth; 811 margin: 0; 812 padding: 8px 16px; 813 gap: 16px; 814 align-items: flex-start; 815 counter-reset: index; 816 min-height: 160px; 817 } 818 .status-carousel > ul > li { 819 scroll-snap-align: center; 820 scroll-snap-stop: always; 821 flex-shrink: 0; 822 display: flex; 823 width: 100%; 824 max-width: min(320px, calc(100% - 16px)); 825 list-style: none; 826 margin: 0; 827 padding: 0; 828 max-height: 65vh; 829 max-height: 65dvh; 830 counter-increment: index; 831 position: relative; 832 } 833 .status-carousel > ul > li:is(:empty, :has(> a:empty)) { 834 display: none; 835 } 836 /* 837 Assume that browsers that do support inline-size property also support container queries. 838 https://www.smashingmagazine.com/2021/05/css-container-queries-use-cases-migration-strategies/#progressive-enhancement-polyfills 839 */ 840 @supports not (contain: inline-size) { 841 @media (hover: hover) or (pointer: fine) or (min-width: 40em) { 842 .status-carousel > ul { 843 scroll-snap-type: none; 844 } 845 } 846 } 847 @container (min-width: 640px) { 848 .status-carousel > ul { 849 scroll-snap-type: none; 850 } 851 } 852 .status-carousel .content-container .content:only-child { 853 font-size: calc(100% + 25% * max(2 - var(--content-text-weight), 0)); 854 } 855 /* .status-carousel 856 .content-container[data-content-text-weight='1'] 857 .media-container.media-eq1 { 858 /* LOL, this is madness, reading a value from the style attribute * / 859 height: auto; 860 min-height: 160px; 861 max-height: max(160px, 50vh); 862 } */ 863 .status-carousel.boosts-carousel { 864 --carousel-color: var(--reblog-color); 865 --carousel-faded-color: var(--reblog-faded-color); 866 } 867 .status-carousel.boosts-carousel .status-reblog { 868 background-image: none; 869 } 870 .status-carousel.boosts-carousel > ul > li:before { 871 content: counter(index); 872 position: absolute; 873 left: 0; 874 font-size: 10px; 875 color: var(--carousel-color); 876 padding: 8px; 877 } 878 879 .ui-state { 880 padding: 16px; 881 text-align: center; 882 } 883 884 .status-carousel-link { 885 display: block; 886 width: 100%; 887 text-decoration-line: none; 888 color: inherit; 889 user-select: none; 890 transition: background-color 0.2s ease-out; 891 -webkit-tap-highlight-color: transparent; 892 animation: appear 0.2s ease-out; 893 border: 1px solid var(--outline-color); 894 background-color: var(--bg-blur-color); 895 border-radius: 8px; 896 overflow: hidden; 897 box-shadow: 0 1px var(--bg-color); 898 } 899 .status-carousel-link::focus { 900 background-color: var(--link-bg-hover-color); 901 } 902 @media (hover: hover) { 903 .status-carousel-link:hover { 904 background-color: var(--link-bg-hover-color); 905 } 906 } 907 .status-carousel-link:active:not(:has(:is(.media, button):active)) { 908 filter: brightness(0.95); 909 } 910 911 .deck-backdrop { 912 position: fixed; 913 top: 0; 914 right: 0; 915 height: 100%; 916 width: 100%; 917 z-index: 1000; 918 display: flex; 919 background-color: var(--backdrop-color); 920 animation: appear 0.2s ease-out; 921 } 922 .deck-backdrop > a { 923 flex-grow: 1; 924 /* backdrop-filter: saturate(0.75); */ 925 } 926 @keyframes slide-in { 927 0% { 928 transform: translate3d(100%, 0, 0); 929 } 930 100% { 931 transform: translate3d(0, 0, 0); 932 } 933 } 934 .deck-backdrop .deck { 935 width: var(--main-width); 936 max-width: 100vw; 937 background-color: var(--bg-color); 938 box-shadow: -1px 0 var(--bg-color); 939 } 940 .deck-backdrop .deck.slide-in:not(.deck-view-full) { 941 animation: slide-in 0.5s var(--timing-function); 942 } 943 .deck-backdrop .deck .status { 944 max-width: var(--main-width); 945 } 946 .deck-backdrop .deck .menu-switch-view { 947 display: none; 948 } 949 @media (min-width: 40em) { 950 .deck-backdrop .deck .menu-switch-view { 951 display: flex; 952 } 953 .deck-backdrop .deck.deck-view-full { 954 /* min-width: 100%; */ 955 width: 100%; 956 background-image: radial-gradient( 957 circle, 958 transparent 30em, 959 var(--bg-faded-color) 960 ); 961 } 962 .deck-backdrop .deck.deck-view-full > * { 963 max-width: calc(var(--main-width) + 32px); 964 margin: 0 auto; 965 } 966 .deck-backdrop .deck.deck-view-full .status { 967 max-width: 100%; 968 } 969 } 970 971 .deck-close { 972 color: var(--text-insignificant-color) !important; 973 } 974 .deck-close:is(:hover, :focus) { 975 color: var(--text-color) !important; 976 } 977 978 :is(button, .button).plain.has-badge:after { 979 content: ''; 980 display: inline-block; 981 position: absolute; 982 right: 13px; 983 width: 8px; 984 height: 8px; 985 border-radius: 50%; 986 background-color: rgb(255, 0, 0); 987 opacity: 0.5; 988 } 989 990 .has-badge-tab-bar:after { 991 content: ''; 992 display: inline-block; 993 position: absolute; 994 right: 30px; 995 width: 8px; 996 height: 8px; 997 border-radius: 50%; 998 background-color: rgb(255, 0, 0); 999 opacity: 0.5; 1000 } 1001 1002 @keyframes fade-from-top { 1003 0% { 1004 transform: translate(-50%, -200%); 1005 opacity: 0; 1006 } 1007 100% { 1008 transform: translate(-50%, 0); 1009 opacity: 1; 1010 } 1011 } 1012 .updates-button { 1013 position: absolute; 1014 z-index: 2; 1015 top: 3em; 1016 animation: fade-from-top 0.3s var(--timing-function); 1017 left: 50%; 1018 margin-top: 16px; 1019 transform: translate(-50%, 0); 1020 font-size: 90%; 1021 pointer-events: auto; 1022 } 1023 .updates-button .icon { 1024 vertical-align: top; 1025 } 1026 @media (pointer: coarse) { 1027 .updates-button:after { 1028 content: ''; 1029 position: absolute; 1030 inset: -16px; 1031 } 1032 } 1033 1034 /* BOX */ 1035 1036 .box { 1037 width: var(--main-width); 1038 max-width: 100vw; 1039 padding: 16px; 1040 } 1041 1042 /* CAROUSEL */ 1043 /* use snap, center children, max width viewport */ 1044 1045 .media-modal-container { 1046 position: relative; 1047 width: 70%; 1048 flex-grow: 1; 1049 background-color: var(--backdrop-solid-color); 1050 animation: appear 0.3s var(--timing-function) both; 1051 } 1052 .media-modal-container.loading { 1053 display: flex; 1054 justify-content: center; 1055 align-items: center; 1056 background-image: radial-gradient( 1057 closest-side, 1058 var(--bg-blur-color), 1059 transparent 1060 ); 1061 } 1062 1063 .carousel { 1064 display: flex; 1065 overflow-x: auto; 1066 scroll-snap-type: x mandatory; 1067 /* scroll-behavior: smooth; */ 1068 scrollbar-width: none; 1069 overscroll-behavior: contain; 1070 touch-action: pan-x; 1071 user-select: none; 1072 width: 100%; 1073 } 1074 .carousel::-webkit-scrollbar { 1075 display: none; 1076 } 1077 .carousel .carousel-item { 1078 scroll-snap-align: center; 1079 scroll-snap-stop: always; 1080 flex-shrink: 0; 1081 display: flex; 1082 justify-content: center; 1083 align-items: center; 1084 width: 100%; 1085 height: 100vh; 1086 height: 100dvh; 1087 background-color: var(--average-color-alpha); 1088 background-image: radial-gradient( 1089 closest-side, 1090 var(--average-color) 10%, 1091 var(--average-color-alpha) 40%, 1092 transparent 100% 1093 ); 1094 } 1095 .carousel .carousel-item :is(img, video) { 1096 width: auto; 1097 max-width: 100%; 1098 height: auto; 1099 max-height: 100vh; 1100 max-height: 100dvh; 1101 vertical-align: middle; 1102 } 1103 .carousel .carousel-item video { 1104 min-height: 80px; 1105 max-height: 80vh; /* prevent other UI elements from obscuring video */ 1106 } 1107 .carousel .carousel-item .media { 1108 background-size: contain; 1109 background-repeat: no-repeat; 1110 background-position: center; 1111 width: 100%; 1112 height: 100%; 1113 overflow: hidden; 1114 display: flex; 1115 justify-content: center; 1116 align-items: center; 1117 padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) 1118 env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0); 1119 background-origin: content-box; 1120 } 1121 1122 .carousel-top-controls { 1123 top: 0; 1124 top: env(safe-area-inset-top, 0); 1125 } 1126 :is(.carousel-top-controls, .carousel-controls) { 1127 /* mix-blend-mode: luminosity; */ 1128 position: absolute; 1129 left: 0; 1130 left: env(safe-area-inset-left, 0); 1131 right: 0; 1132 right: env(safe-area-inset-right, 0); 1133 padding: 16px; 1134 display: flex; 1135 gap: 8px; 1136 justify-content: space-between; 1137 text-align: center; 1138 pointer-events: none; 1139 } 1140 :is(.carousel-top-controls, .carousel-controls)[hidden] { 1141 opacity: 0; 1142 } 1143 .carousel-controls { 1144 top: 45%; 1145 } 1146 1147 :is(.button, button).carousel-button, 1148 button.carousel-dot { 1149 pointer-events: auto; 1150 font-weight: bold; 1151 color: var(--text-color); 1152 background-color: var(--bg-faded-blur-color); 1153 border: 1px solid var(--outline-color); 1154 box-shadow: 0 4px 32px var(--drop-shadow-color); 1155 transition: all 0.2s ease-out; 1156 } 1157 button.carousel-dot { 1158 background-color: transparent; 1159 } 1160 :is(.button, button).carousel-button { 1161 background-color: var(--bg-blur-color); 1162 } 1163 :is(.button, button).carousel-button:is(:hover, :focus):not(:active) { 1164 background-color: var(--bg-color); 1165 } 1166 .carousel-top-controls .szh-menu-container { 1167 pointer-events: auto; 1168 } 1169 :is(.button, button).carousel-button[hidden] { 1170 display: inline-block; 1171 opacity: 0; 1172 pointer-events: none; 1173 } 1174 .carousel-dots { 1175 border-radius: 999px; 1176 background-color: var(--bg-faded-blur-color); 1177 border: 1px solid var(--outline-color); 1178 box-shadow: 0 4px 32px var(--drop-shadow-color); 1179 /* backdrop-filter: blur(12px) invert(0.25); */ 1180 transition: background-color 0.2s ease-out; 1181 &:hover { 1182 background-color: var(--bg-color); 1183 } 1184 } 1185 button.carousel-dot { 1186 backdrop-filter: none !important; 1187 border: none; 1188 box-shadow: none; 1189 } 1190 /* button.carousel-dot[disabled] { 1191 pointer-events: none; 1192 } */ 1193 button.carousel-dot .icon { 1194 transition: all 0.2s; 1195 transform: scale(0.5); 1196 } 1197 button.carousel-dot:not(.active) .icon { 1198 opacity: 0.5; 1199 } 1200 button.carousel-dot:not(.active):is(:hover, :focus) .icon { 1201 opacity: 1; 1202 } 1203 button.carousel-dot:is(.active, [disabled].active) { 1204 opacity: 1; 1205 } 1206 button.carousel-dot:is(.active, [disabled].active) .icon { 1207 opacity: 1; 1208 transform: scale(1); 1209 } 1210 @media (hover: hover) { 1211 .carousel-top-controls { 1212 transform: translateY(-100%); 1213 transition: transform 0.2s ease-in-out; 1214 } 1215 .carousel-controls { 1216 transform: scale(0); 1217 /* transition: transform 0.2s ease-in-out; */ 1218 } 1219 .carousel-controls 1220 :is(.button, button).carousel-button:is(:hover, :focus):not(:active) { 1221 transform: scale(1.2); 1222 } 1223 .carousel-controls :is(.button, button).carousel-button:active { 1224 transition-duration: 0s; 1225 } 1226 1227 :is(.carousel-top-controls, .carousel-controls)[hidden] { 1228 opacity: 1; 1229 } 1230 .carousel:hover + .carousel-top-controls, 1231 .carousel:hover + .carousel-top-controls + .carousel-controls, 1232 .carousel-top-controls:hover, 1233 .carousel-controls:hover, 1234 .carousel-top-controls:focus-within, 1235 .carousel-controls:focus-within { 1236 transform: translateY(0); 1237 } 1238 } 1239 1240 /* CAROUSEL + STATUS PAGE COMBO */ 1241 1242 .media-post-link .button-label { 1243 display: none; 1244 } 1245 body:has(.status-deck) .media-post-link { 1246 display: none; 1247 } 1248 1249 /* ✨ New */ 1250 body:has(.media-modal-container + .status-deck) .media-post-link { 1251 display: inline-block; 1252 } 1253 .media-modal-container + .status-deck { 1254 /* display: none; */ 1255 position: absolute; 1256 z-index: -1; 1257 pointer-events: none; 1258 user-select: none; 1259 animation: none; 1260 } 1261 1262 @media (min-width: calc(40em + 350px)) { 1263 .media-post-link .button-label { 1264 display: inline; 1265 } 1266 #modal-container > div, 1267 .status-deck { 1268 transition: all 0.3s ease-in-out; 1269 } 1270 /* Don't do this if there's a modal sheet (.sheet) */ 1271 :has(#modal-container .carousel):has(.status-deck):not( 1272 :has(.sheet, #compose-container) 1273 ) 1274 .status-deck { 1275 width: 350px; 1276 min-width: 0; 1277 } 1278 :has(#modal-container .carousel):has(.status-deck):not( 1279 :has(.sheet, #compose-container) 1280 ) 1281 #modal-container 1282 > div { 1283 left: 0; 1284 right: 350px; 1285 width: auto; 1286 } 1287 /* ✨ New */ 1288 /* .deck-backdrop > a { 1289 width: 100%; 1290 flex-grow: 0; 1291 } */ 1292 .deck-backdrop .media-modal-container + .status-deck:not(.deck-view-full) { 1293 /* display: block; */ 1294 width: 30%; 1295 /* min-width: 350px; */ 1296 position: static; 1297 z-index: 1; 1298 pointer-events: auto; 1299 user-select: auto; 1300 } 1301 .deck-backdrop .media-modal-container + .status-deck:not(.slide-in) { 1302 animation: appear 0.3s ease-in-out; 1303 } 1304 body:has(.media-modal-container + .status-deck) .media-post-link { 1305 display: none; 1306 } 1307 } 1308 1309 /* COMPOSE BUTTON */ 1310 1311 #compose-button { 1312 bottom: calc(68px + env(safe-area-inset-bottom)) !important; 1313 position: fixed; 1314 bottom: 16px; 1315 bottom: max(16px, env(safe-area-inset-bottom)); 1316 right: 16px; 1317 right: max(16px, env(safe-area-inset-right)); 1318 padding: 16px; 1319 background-color: var(--button-bg-blur-color); 1320 backdrop-filter: blur(16px); 1321 z-index: 10; 1322 box-shadow: 0 3px 8px -1px var(--drop-shadow-color), 1323 0 10px 36px -4px var(--button-bg-blur-color); 1324 transition: all 0.3s ease-in-out; 1325 } 1326 .deck-container:has(header[hidden]) ~ #compose-button, 1327 #compose-button[hidden] { 1328 transform: translateY(200%); 1329 pointer-events: none; 1330 user-select: none; 1331 opacity: 0; 1332 } 1333 #compose-button .icon { 1334 transition: transform 0.3s ease-in-out; 1335 } 1336 #compose-button[hidden] .icon { 1337 transform: rotate3d(0, 0, 1, -25deg); 1338 } 1339 #compose-button:is(:hover, :focus) { 1340 background-color: var(--button-bg-color); 1341 filter: none; 1342 } 1343 #compose-button:active { 1344 transform: scale(0.95); 1345 transition: none; 1346 } 1347 #compose-button .icon { 1348 filter: drop-shadow(0 1px 2px var(--button-bg-color)); 1349 } 1350 @media (max-width: calc(40em - 1px)) { 1351 #app[data-shortcuts-view-mode='tab-menu-bar'] #compose-button { 1352 bottom: calc(16px + 52px); 1353 bottom: calc(16px + env(safe-area-inset-bottom) + 52px); 1354 } 1355 } 1356 1357 /* SHEET */ 1358 1359 .sheet { 1360 align-self: flex-end; 1361 display: flex; 1362 flex-direction: column; 1363 max-height: 90vh; 1364 max-height: 90dvh; 1365 /* overflow: hidden; */ 1366 background-color: var(--bg-color); 1367 width: 100%; 1368 max-width: calc(var(--main-width) - 50px - 16px); 1369 border-radius: 16px 16px 0 0; 1370 box-shadow: 0 -1px 32px var(--drop-shadow-color); 1371 animation: slide-up 0.3s var(--timing-function); 1372 /* border: 1px solid var(--outline-color); */ 1373 position: relative; 1374 } 1375 .sheet-max { 1376 max-width: none; 1377 height: 90vh; 1378 height: 90dvh; 1379 } 1380 @media (min-width: 40em) { 1381 .sheet { 1382 width: 90vw; 1383 width: 90dvw; 1384 } 1385 } 1386 .sheet .sheet-close { 1387 position: absolute; 1388 border-radius: 0; 1389 padding: 0; 1390 right: env(safe-area-inset-right); 1391 width: 44px; 1392 height: 44px; 1393 display: inline-flex; 1394 align-items: center; 1395 justify-content: center; 1396 z-index: 2; 1397 background-color: transparent; 1398 background-image: radial-gradient( 1399 circle, 1400 var(--close-button-bg-color) 0px 14px, 1401 transparent 14px 1402 ); 1403 color: var(--close-button-color); 1404 } 1405 .sheet .sheet-close.outer { 1406 margin-top: -44px; 1407 background-image: radial-gradient( 1408 circle, 1409 var(--bg-faded-color) 0px 13px, 1410 var(--outline-color) 13px 14px, 1411 transparent 14px 1412 ); 1413 } 1414 .sheet .sheet-close:is(:hover, :focus) { 1415 color: var(--close-button-hover-color); 1416 } 1417 .sheet .sheet-close:active { 1418 background-image: radial-gradient( 1419 circle, 1420 var(--close-button-bg-active-color) 0px 14px, 1421 transparent 14px 1422 ); 1423 } 1424 .sheet header { 1425 padding: 16px 16px 8px; 1426 padding-left: max(16px, env(safe-area-inset-left)); 1427 padding-right: max(16px, env(safe-area-inset-right)); 1428 user-select: none; 1429 } 1430 .sheet .sheet-close:not(.outer) + header { 1431 padding-right: max(44px, env(safe-area-inset-right)); 1432 } 1433 .sheet header :is(h1, h2, h3) { 1434 margin: 0; 1435 } 1436 .sheet header.header-grid { 1437 display: grid; 1438 grid-template-columns: 1fr auto; 1439 grid-gap: 8px; 1440 align-items: center; 1441 } 1442 .sheet main { 1443 overflow: auto; 1444 overflow-x: hidden; 1445 overscroll-behavior: contain; 1446 padding: 16px 16px; 1447 padding-left: max(16px, env(safe-area-inset-left)); 1448 padding-right: max(16px, env(safe-area-inset-right)); 1449 padding-bottom: max(16px, env(safe-area-inset-bottom)); 1450 } 1451 .sheet header + main { 1452 padding-top: 0; 1453 mask-image: linear-gradient(to bottom, transparent 0%, black 10px); 1454 } 1455 1456 /* ICON */ 1457 1458 .icon { 1459 flex-shrink: 0; 1460 display: inline-block; 1461 overflow: hidden; 1462 line-height: 0; 1463 1464 svg { 1465 contain: none; 1466 } 1467 } 1468 1469 /* TAG */ 1470 1471 .tag { 1472 font-size: smaller; 1473 color: var(--bg-faded-color); 1474 background-color: var(--text-insignificant-color); 1475 padding: 2px 4px; 1476 border-radius: 4px; 1477 display: inline-block; 1478 margin: 4px; 1479 align-self: center; 1480 text-align: center; 1481 1482 &.clickable { 1483 cursor: pointer; 1484 } 1485 } 1486 .tag .icon { 1487 vertical-align: middle; 1488 } 1489 .tag.collapsed { 1490 margin: 0; 1491 } 1492 .tag.insignificant { 1493 border: 1px solid var(--outline-color); 1494 color: var(--text-insignificant-color); 1495 background-color: var(--bg-faded-color); 1496 } 1497 .tag.danger { 1498 background-color: var(--red-color); 1499 } 1500 1501 /* MENU POPUP */ 1502 1503 .szh-menu-container { 1504 user-select: none; 1505 -webkit-touch-callout: none; 1506 -webkit-user-drag: none; 1507 } 1508 body > .szh-menu-container { 1509 position: fixed !important; 1510 z-index: 10; 1511 } 1512 .szh-menu-container:has(.szh-menu--state-open) { 1513 inset: 0; 1514 inset: env(safe-area-inset-top) env(safe-area-inset-right) 1515 env(safe-area-inset-bottom) env(safe-area-inset-left); 1516 } 1517 .szh-menu { 1518 padding: 8px 0; 1519 margin: 0; 1520 font-size: var(--text-size); 1521 background-color: var(--bg-color); 1522 border: 1px solid var(--outline-color); 1523 border-radius: 8px; 1524 box-shadow: 0 3px 16px -3px var(--drop-shadow-color); 1525 text-align: left; 1526 animation: appear-smooth 0.15s ease-in-out; 1527 width: 16em; 1528 max-width: 90vw; 1529 /* overflow: hidden; */ 1530 } 1531 .szh-menu[aria-label='Submenu'] { 1532 background-color: var(--bg-blur-color); 1533 backdrop-filter: blur(4px); 1534 box-shadow: 0 3px 24px -3px var(--drop-shadow-color); 1535 } 1536 .szh-menu__header { 1537 margin: -8px 0 8px; 1538 padding: 8px 16px; 1539 color: var(--text-insignificant-color); 1540 font-size: 90%; 1541 background-color: var(--bg-faded-color); 1542 /* background-image: linear-gradient(to top, var(--bg-faded-color), transparent); */ 1543 text-shadow: 0 1px 0 var(--bg-color); 1544 line-height: 1.2; 1545 /* border-bottom: 1px solid var(--outline-color); */ 1546 border-radius: 8px 8px 0 0; 1547 } 1548 .szh-menu__header.plain { 1549 margin-bottom: 0; 1550 background-color: transparent; 1551 } 1552 .szh-menu__header * { 1553 vertical-align: middle; 1554 } 1555 .szh-menu.menu-emphasized { 1556 border-color: var(--outline-hover-color); 1557 box-shadow: 0 3px 16px -3px var(--drop-shadow-color), 1558 0 3px 32px var(--drop-shadow-color), 0 3px 48px var(--drop-shadow-color); 1559 background-color: var(--bg-color); 1560 animation-duration: 0.3s; 1561 animation-timing-function: ease-in-out; 1562 width: auto; 1563 } 1564 .szh-menu .footer { 1565 margin: 8px 0 -8px; 1566 padding: 8px 16px; 1567 color: var(--text-insignificant-color); 1568 font-size: 90%; 1569 background-color: var(--bg-faded-color); 1570 text-shadow: 0 1px 0 var(--bg-color); 1571 line-height: 1.2; 1572 display: flex; 1573 gap: 8px; 1574 align-items: center; 1575 border-radius: 0 0 8px 8px; 1576 } 1577 .szh-menu .szh-menu__item { 1578 display: flex; 1579 gap: 8px; 1580 align-items: center; 1581 line-height: 1.1; 1582 padding: 8px 16px !important; 1583 transition: all 0.1s ease-in-out; 1584 text-decoration: none; 1585 white-space: nowrap; 1586 overflow: hidden; 1587 text-overflow: ellipsis; 1588 } 1589 .szh-menu .szh-menu__item--focusable { 1590 background-color: transparent; 1591 } 1592 .szh-menu .szh-menu__item span { 1593 white-space: nowrap; 1594 overflow: hidden; 1595 text-overflow: ellipsis; 1596 } 1597 /* .szh-menu .szh-menu__item * { 1598 vertical-align: middle; 1599 } */ 1600 .szh-menu .szh-menu__item a { 1601 flex: 1; 1602 overflow: hidden; 1603 text-overflow: ellipsis; 1604 display: flex; 1605 gap: 8px; 1606 color: inherit; 1607 text-decoration: none; 1608 padding: 8px 16px !important; 1609 margin: -8px -16px !important; 1610 align-items: center; 1611 user-select: none; 1612 -webkit-touch-callout: none; 1613 } 1614 .szh-menu .szh-menu__item a.is-active { 1615 font-weight: bold; 1616 } 1617 .szh-menu .szh-menu__item .icon { 1618 opacity: 0.5; 1619 } 1620 .szh-menu 1621 .szh-menu__item:not(.szh-menu__item--disabled, .szh-menu__item--hover) { 1622 color: var(--text-color); 1623 } 1624 .szh-menu .szh-menu__item--hover:not(.menu-field) { 1625 color: var(--button-text-color); 1626 background-color: var(--button-bg-color); 1627 } 1628 .szh-menu__divider { 1629 background-color: var(--divider-color); 1630 } 1631 .szh-menu .szh-menu__item .menu-grow { 1632 flex-grow: 1; 1633 text-overflow: ellipsis; 1634 overflow: hidden; 1635 } 1636 .szh-menu .menu-double-lines { 1637 white-space: normal !important; 1638 display: -webkit-box; 1639 -webkit-line-clamp: 2; 1640 -webkit-box-orient: vertical; 1641 overflow: hidden !important; 1642 } 1643 .szh-menu .menu-double-lines span { 1644 white-space: normal; 1645 line-height: inherit; 1646 font-size: inherit; 1647 } 1648 .szh-menu .menu-horizontal { 1649 display: grid; 1650 /* two columns only */ 1651 grid-template-columns: repeat(2, 1fr); 1652 } 1653 .szh-menu .menu-horizontal:has(> .szh-menu__item:only-child) { 1654 grid-template-columns: 1fr; 1655 } 1656 .szh-menu .menu-horizontal > .szh-menu__item:not(:only-child):first-child, 1657 .szh-menu .menu-horizontal > *:not(:only-child):first-child .szh-menu__item { 1658 padding-right: 4px !important; 1659 } 1660 .szh-menu 1661 .menu-horizontal 1662 > .szh-menu__item:not(:only-child):not(:first-child):not(:last-child), 1663 .szh-menu 1664 .menu-horizontal 1665 > *:not(:only-child):not(:first-child):not(:last-child) 1666 .szh-menu__item { 1667 padding-left: 8px !important; 1668 padding-right: 4px !important; 1669 } 1670 .szh-menu .menu-horizontal > .szh-menu__item:not(:only-child):last-child, 1671 .szh-menu .menu-horizontal > *:not(:only-child):last-child .szh-menu__item { 1672 padding-left: 8px !important; 1673 } 1674 .szh-menu .szh-menu__item .menu-shortcut { 1675 opacity: 0.5; 1676 font-weight: normal; 1677 } 1678 .szh-menu .szh-menu__item form { 1679 display: flex; 1680 flex: 1; 1681 gap: 8px; 1682 align-items: center; 1683 } 1684 .szh-menu .szh-menu__item form > input[type='text'] { 1685 flex-grow: 1; 1686 width: 100%; 1687 } 1688 .szh-menu .szh-menu__item--hover .danger-icon { 1689 color: var(--red-color); 1690 opacity: 1; 1691 } 1692 .szh-menu 1693 .szh-menu__item:not(.szh-menu__item--disabled):not( 1694 .szh-menu__item--hover 1695 ).danger { 1696 color: var(--red-color); 1697 } 1698 .szh-menu 1699 .szh-menu__item:not(.szh-menu__item--disabled):not( 1700 .szh-menu__item--hover 1701 ).danger 1702 .icon { 1703 opacity: 1; 1704 } 1705 1706 .szh-menu .menu-wrap { 1707 display: flex; 1708 flex-wrap: wrap; 1709 } 1710 .szh-menu .menu-wrap > * { 1711 flex-grow: 1; 1712 flex-basis: 50%; 1713 } 1714 1715 /* GLASS MENU */ 1716 1717 .glass-menu { 1718 background-color: var(--bg-blur-color); 1719 backdrop-filter: blur(8px) saturate(3); 1720 border: var(--hairline-width) solid var(--bg-color); 1721 box-shadow: 0 3px 8px -1px var(--drop-shadow-color); 1722 text-shadow: 0 var(--hairline-width) var(--bg-color), 0 0 8px var(--bg-color); 1723 } 1724 .glass-menu .szh-menu__item--hover { 1725 background-color: var(--button-bg-blur-color); 1726 text-shadow: none; 1727 } 1728 1729 /* DONUT METER */ 1730 1731 meter.donut { 1732 appearance: none; 1733 } 1734 1735 meter.donut::-webkit-meter-inner-element, 1736 meter.donut::-webkit-meter-bar, 1737 meter.donut::-webkit-meter-optimum-value, 1738 meter.donut::-webkit-meter-suboptimum-value, 1739 meter.donut::-webkit-meter-even-less-good-value { 1740 display: none; 1741 } 1742 1743 meter.donut::-moz-meter-bar { 1744 background: transparent; 1745 } 1746 1747 meter.donut { 1748 position: relative; 1749 --dimension: 24px; 1750 --border-width: 2px; 1751 --middle-circle-radius: calc(var(--dimension) / 2 - var(--border-width)); 1752 width: var(--dimension); 1753 height: var(--dimension); 1754 border-radius: 50%; 1755 --fill: calc(var(--percentage) * 1%); 1756 --color: var(--link-color); 1757 --middle-circle: radial-gradient( 1758 circle at 50% 50%, 1759 var(--bg-color) var(--middle-circle-radius), 1760 transparent var(--middle-circle-radius) 1761 ); 1762 background-image: var(--middle-circle), 1763 conic-gradient(var(--color) var(--fill), var(--outline-color) 0); 1764 transform: scale(0.7); 1765 transition: transform 0.2s ease-in-out; 1766 } 1767 meter.donut.warning { 1768 --color: var(--orange-color); 1769 transform: scale(1); 1770 } 1771 meter.donut.danger { 1772 --color: var(--red-color); 1773 transform: scale(1); 1774 } 1775 meter.donut.explode { 1776 background-image: none; 1777 transform: scale(1); 1778 } 1779 meter.donut:is(.warning, .danger, .explode):after { 1780 content: attr(data-left); 1781 position: absolute; 1782 top: 50%; 1783 left: 50%; 1784 transform: translate(-50%, -50%); 1785 font-size: 12px; 1786 color: var(--text-insignificant-color); 1787 } 1788 meter.donut:is(.danger, .explode):after { 1789 color: var(--red-color); 1790 } 1791 meter.donut[hidden] { 1792 display: inline-block; 1793 visibility: hidden; 1794 } 1795 1796 /* SHINY PILL */ 1797 1798 :is(.shiny-pill, :root .toastify.shiny-pill) { 1799 pointer-events: auto; 1800 color: var(--link-text-color); 1801 font-weight: 500; 1802 text-shadow: 0 1px var(--bg-color); 1803 background-color: var(--bg-color); 1804 border: 2px solid var(--link-faded-color); 1805 box-shadow: 0 3px 16px var(--drop-shadow-color), 1806 0 6px 16px -3px var(--drop-shadow-color); 1807 } 1808 :is(.shiny-pill, :root .toastify.shiny-pill):hover:not(:active) { 1809 color: var(--text-color); 1810 border-color: var(--link-color); 1811 filter: none !important; 1812 box-shadow: 0 3px 16px var(--drop-shadow-color), 1813 0 6px 16px -3px var(--drop-shadow-color), 1814 0 6px 16px var(--drop-shadow-color); 1815 } 1816 1817 /* TOAST */ 1818 1819 :root .toastify { 1820 user-select: none; 1821 padding: 8px 16px; 1822 border-radius: 999px; 1823 pointer-events: none; 1824 color: var(--button-text-color); 1825 text-shadow: 0 calc(var(--hairline-width) * -1) var(--drop-shadow-color); 1826 background-color: var(--button-bg-color); 1827 background-image: none; 1828 box-shadow: 0 3px 8px -1px var(--drop-shadow-color), 1829 0 10px 36px -4px var(--button-bg-blur-color); 1830 text-align: center; 1831 } 1832 .toastify-bottom { 1833 margin-bottom: env(safe-area-inset-bottom); 1834 } 1835 1836 /* TOAST - ALERT */ 1837 1838 :root .toastify.alert { 1839 z-index: 1001; 1840 box-shadow: 0 8px 32px var(--text-insignificant-color); 1841 background-color: var(--bg-color); 1842 color: var(--text-color); 1843 cursor: pointer; 1844 pointer-events: auto; 1845 padding: 16px 32px; 1846 font-size: max(calc(16px * 1.1), var(--text-size)); 1847 text-align: center; 1848 line-height: 1.25; 1849 } 1850 :root .toastify.alert:is(:hover, :active) { 1851 background-color: var(--bg-faded-color); 1852 } 1853 1854 /* AVATARS STACK */ 1855 1856 .avatars-stack { 1857 display: flex; 1858 flex-wrap: wrap; 1859 gap: 4px; 1860 } 1861 /* I'm just feeling bored, so having fun here */ 1862 @media (hover: hover) { 1863 .avatars-stack > * img { 1864 transition: transform 0.3s ease-in-out; 1865 } 1866 .avatars-stack:hover > *:nth-of-type(odd) img { 1867 transform: rotate(15deg); 1868 } 1869 .avatars-stack:hover > *:nth-of-type(even) img { 1870 transform: rotate(-15deg); 1871 } 1872 } 1873 1874 .deck-container { 1875 width: 100%; 1876 flex-grow: 1; 1877 } 1878 :is(#home-page, #welcome, #columns, #loader-root) ~ .deck-container { 1879 z-index: 10; 1880 position: fixed; 1881 inset: 0; 1882 } 1883 :is(#home-page, #welcome, #columns, #loader-root):has(~ .deck-container) { 1884 display: block; 1885 position: absolute; 1886 user-select: none; 1887 pointer-events: none; 1888 opacity: 0; 1889 /* This causes scrollTop to be reset to 0 when the page is hidden */ 1890 /* content-visibility: hidden; */ 1891 } 1892 1893 /* 404 */ 1894 1895 #not-found-page { 1896 display: flex; 1897 align-items: center; 1898 justify-content: center; 1899 text-align: center; 1900 overflow: hidden; 1901 cursor: default; 1902 color: var(--text-insignificant-color); 1903 background-image: radial-gradient( 1904 circle at 50% 50%, 1905 var(--bg-color) 25%, 1906 var(--bg-faded-color) 1907 ); 1908 text-shadow: 0 1px var(--bg-color); 1909 } 1910 1911 /* ACCOUNT STATUSES */ 1912 1913 .header-account { 1914 font-size: 90% !important; 1915 cursor: pointer; 1916 } 1917 .header-account div { 1918 font-weight: normal; 1919 color: var(--text-insignificant-color); 1920 } 1921 1922 /* LINK LISTS? */ 1923 1924 ul.link-list { 1925 list-style: none; 1926 padding: 16px; 1927 margin: 0; 1928 display: flex; 1929 flex-direction: column; 1930 gap: 1px; 1931 } 1932 ul.link-list li { 1933 padding: 0; 1934 margin: 0; 1935 } 1936 ul.link-list li a { 1937 --radius: 8px; 1938 display: block; 1939 background-color: var(--bg-faded-color); 1940 line-height: 1.25; 1941 padding: 12px; 1942 text-decoration: none; 1943 line-height: 1.4; 1944 font-weight: 500; 1945 display: flex; 1946 align-items: center; 1947 gap: 8px; 1948 } 1949 ul.link-list li:first-child a { 1950 border-top-left-radius: var(--radius); 1951 border-top-right-radius: var(--radius); 1952 } 1953 ul.link-list li:last-child a { 1954 border-bottom-left-radius: var(--radius); 1955 border-bottom-right-radius: var(--radius); 1956 } 1957 ul.link-list li a:is(:hover, :focus) { 1958 color: var(--text-color); 1959 } 1960 ul.link-list li a:active { 1961 filter: brightness(0.9); 1962 } 1963 ul.link-list li a * { 1964 vertical-align: middle; 1965 } 1966 ul.link-list li a .icon { 1967 flex-shrink: 0; 1968 } 1969 1970 @media (min-width: 40em) { 1971 ul.link-list li a { 1972 background-color: var(--bg-color); 1973 } 1974 } 1975 1976 /* NAV MENU BUTTON */ 1977 1978 .nav-menu-button.with-avatar { 1979 position: relative; 1980 } 1981 .nav-menu-button:is(:hover, :focus):not(:active) { 1982 filter: none !important; 1983 } 1984 .nav-menu-button .avatar { 1985 transition: box-shadow 0.3s ease-out; 1986 } 1987 .nav-menu-button:is(:hover, :focus, .active) .avatar { 1988 box-shadow: 0 0 0 2px var(--bg-color), 0 0 0 4px var(--link-light-color); 1989 } 1990 .nav-menu-button.with-avatar .icon { 1991 position: absolute; 1992 bottom: 4px; 1993 right: 8px; 1994 background-color: var(--bg-color); 1995 border-radius: 2px; 1996 } 1997 .nav-menu-button.with-avatar:hover:not(:active, .active) .icon { 1998 transform: translateY(-1px); 1999 } 2000 2001 /* COLUMNS */ 2002 2003 #columns { 2004 display: flex; 2005 width: 100vw; 2006 overflow-y: hidden; 2007 overflow-x: scroll; 2008 scroll-snap-type: x mandatory; 2009 scroll-behavior: smooth; 2010 /* scrollbar-width: none; */ 2011 overscroll-behavior: contain; 2012 overscroll-behavior-x: contain; 2013 /* This `transform` fixes horizontal scrolling for pointer devices on iPad */ 2014 transform: translateZ(0); 2015 } 2016 /* #columns::-webkit-scrollbar { 2017 display: none; 2018 } */ 2019 #columns > * { 2020 overscroll-behavior: auto; 2021 scroll-snap-align: left; 2022 scroll-snap-stop: always; 2023 overscroll-behavior: auto; 2024 flex-basis: min(100vw, 360px); 2025 flex-shrink: 0; 2026 box-shadow: -1px 0 var(--bg-color), -2px 0 var(--drop-shadow-color), 2027 -3px 0 var(--bg-color); 2028 } 2029 #columns:has(> :nth-child(3)) > *:nth-child(even), 2030 #columns:has(> :nth-child(3)) 2031 > *:nth-child(even) 2032 .timeline-deck 2033 > header 2034 .header-grid { 2035 background-color: var(--bg-blur-color); 2036 } 2037 #columns .header-grid input { 2038 pointer-events: none; 2039 } 2040 #columns 2041 .header-grid 2042 .header-side:first-of-type 2043 :is(button, .button) 2044 ~ :is(button, .button), 2045 #columns .deck-container:not(:first-of-type) .header-grid .header-side > * { 2046 display: none; 2047 } 2048 @media (min-width: 40em) { 2049 #columns { 2050 /* gap: 16px; */ 2051 /* padding: 0 16px; */ 2052 /* background-color: var(--bg-faded-color); */ 2053 height: 100vh; 2054 height: 100dvh; 2055 justify-content: stretch; 2056 align-items: stretch; 2057 } 2058 #columns > * { 2059 padding: 0 16px; 2060 border-inline: var(--hairline-width) solid var(--bg-faded-color); 2061 /* border-radius: 16px; */ 2062 /* box-shadow: -4px 0 16px -8px var(--drop-shadow-color); */ 2063 height: unset; 2064 /* background-color: var(--bg-faded-blur-color); */ 2065 /* backdrop-filter: blur(16px) saturate(3); */ 2066 /* background-image: linear-gradient( 2067 160deg, 2068 transparent 20%, 2069 var(--bg-color), 2070 transparent 75% 2071 ); */ 2072 /* position: sticky; 2073 left: 0; */ 2074 /* transition: all 0.3s ease-out; */ 2075 } 2076 /* #columns > *:nth-child(2) { 2077 left: 5%; 2078 } 2079 #columns > *:nth-child(3) { 2080 left: 10%; 2081 } 2082 #columns > *:nth-child(4) { 2083 left: 15%; 2084 } 2085 #columns > *:nth-child(5) { 2086 left: 20%; 2087 } 2088 #columns > *:nth-child(6) { 2089 left: 25%; 2090 } 2091 #columns > *:nth-child(7) { 2092 left: 30%; 2093 } 2094 #columns > *:nth-child(8) { 2095 left: 35%; 2096 } 2097 #columns > *:nth-child(9) { 2098 left: 40%; 2099 } 2100 #columns > *:nth-child(10) { 2101 left: 45%; 2102 } 2103 #columns > *:focus { 2104 z-index: 1; 2105 box-shadow: 0 0 32px var(--drop-shadow-color), 2106 0 0 32px var(--drop-shadow-color); 2107 } */ 2108 /* #columns:has(> *:focus) > *:not(:focus) > * { 2109 filter: opacity(0.8); 2110 } */ 2111 2112 #columns > *:focus-visible, 2113 #columns > *:has(:focus-visible) { 2114 /* box-shadow: 0 4px 16px var(--drop-shadow-color), 2115 0 4px 16px var(--drop-shadow-color); */ 2116 /* border-color: var(--outline-hover-color); */ 2117 z-index: 1; 2118 box-shadow: inset 0 0 0 1px var(--outline-hover-color); 2119 } 2120 #columns .timeline:not(.flat) > li:has(.status-link.is-active), 2121 #columns 2122 .timeline:not(.flat) 2123 > li:not(:has(.status-carousel)):has(+ li .status-link.is-active), 2124 #columns 2125 .timeline:not(.flat) 2126 > li:not(:has(.status-carousel)):has(.status-link.is-active) 2127 + li { 2128 transform: none; 2129 } 2130 #columns .timeline-deck > header { 2131 margin: 0; 2132 } 2133 #columns .timeline-deck > header[hidden] { 2134 transform: none; 2135 pointer-events: auto; 2136 } 2137 #columns li.timeline-item-carousel { 2138 width: auto; 2139 transform: none; 2140 } 2141 } 2142 2143 /* FILTER BAR */ 2144 2145 .filter-bar { 2146 padding: 8px 16px; 2147 background-color: var(--bg-faded-color); 2148 display: flex; 2149 gap: 8px; 2150 overflow-x: auto; 2151 mask-image: linear-gradient( 2152 to right, 2153 transparent, 2154 black 16px, 2155 black calc(100% - 16px), 2156 transparent 2157 ); 2158 align-items: center; 2159 transition: opacity 0.3s ease-out; 2160 2161 &.loading, 2162 .loading > & { 2163 pointer-events: none; 2164 opacity: 0.5; 2165 } 2166 2167 .filter-field { 2168 flex-shrink: 0; 2169 padding: 8px 16px; 2170 border-radius: 999px; 2171 color: var(--text-color); 2172 background-color: var(--bg-color); 2173 background-image: none; 2174 border: 2px solid transparent; 2175 margin: 0; 2176 /* appearance: none; */ 2177 line-height: 1; 2178 font-size: 90%; 2179 display: flex; 2180 gap: 8px; 2181 2182 > .icon { 2183 color: var(--link-color); 2184 } 2185 2186 &:placeholder-shown { 2187 color: var(--text-insignificant-color); 2188 } 2189 2190 &:is(:hover, :focus-visible) { 2191 border-color: var(--link-light-color); 2192 } 2193 &:focus { 2194 outline-color: var(--link-light-color); 2195 } 2196 &.is-active { 2197 border-color: var(--link-color); 2198 box-shadow: inset 0 0 8px var(--link-faded-color); 2199 } 2200 2201 :is(input, select) { 2202 background-color: transparent; 2203 background-image: none; 2204 border: 0; 2205 padding: 0; 2206 margin: 0; 2207 color: inherit; 2208 font-size: inherit; 2209 line-height: inherit; 2210 appearance: none; 2211 border-radius: 0; 2212 box-shadow: none; 2213 outline: none; 2214 } 2215 2216 input[type='month'] { 2217 min-width: 6em; 2218 2219 &::-webkit-calendar-picker-indicator { 2220 /* replace icon with triangle */ 2221 opacity: 0.5; 2222 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none"><path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'); 2223 } 2224 2225 @media (prefers-color-scheme: dark) { 2226 &::-webkit-calendar-picker-indicator { 2227 filter: invert(1); 2228 } 2229 } 2230 } 2231 } 2232 } 2233 .filter-bar.centered { 2234 justify-content: center; 2235 } 2236 @media (min-width: 40em) { 2237 .filter-bar { 2238 background-color: transparent; 2239 } 2240 } 2241 .filter-bar > a:not(.filter-clear) { 2242 padding: 8px 16px; 2243 border-radius: 999px; 2244 background-color: var(--bg-color); 2245 color: var(--link-color); 2246 text-decoration: none; 2247 white-space: nowrap; 2248 border: 2px solid transparent; 2249 transition: border-color 0.3s ease-out; 2250 display: inline-flex; 2251 align-items: center; 2252 gap: 8px; 2253 } 2254 .filter-bar > a:focus-visible { 2255 border-color: var(--link-light-color); 2256 } 2257 @media (hover: hover) { 2258 .filter-bar > a:hover { 2259 border-color: var(--link-light-color); 2260 } 2261 } 2262 .filter-bar > a > * { 2263 vertical-align: middle; 2264 } 2265 .filter-bar > a.is-active { 2266 border-color: var(--link-color); 2267 box-shadow: inset 0 0 8px var(--link-faded-color); 2268 } 2269 .filter-bar > a > .filter-count { 2270 font-size: 80%; 2271 display: inline-block; 2272 color: var(--text-insignificant-color); 2273 min-width: 16px; 2274 min-height: 16px; 2275 padding: 4px; 2276 margin: -4px -8px -4px 0; 2277 background-color: var(--bg-faded-color); 2278 border-radius: 999px; 2279 } 2280 2281 /* NOTIFICATION PEEK */ 2282 2283 .notification-peek .notification { 2284 padding-inline: 0 !important; 2285 } 2286 2287 /* OTHERS */ 2288 2289 @media (min-width: 40em) { 2290 html, 2291 body { 2292 background-color: var(--bg-faded-color); 2293 } 2294 .deck-container { 2295 background-color: var(--bg-faded-color); 2296 } 2297 #app { 2298 display: flex; 2299 } 2300 .deck-container { 2301 transition: transform 0.4s var(--timing-function); 2302 } 2303 .deck-container:has(~ .deck-backdrop .deck) { 2304 transition: transform 0.4s ease-out; 2305 transform: translate3d(-5vw, 0, 0); 2306 } 2307 .deck-backdrop .deck { 2308 /* width: 50%; 2309 min-width: var(--main-width); */ 2310 border-left: 1px solid var(--divider-color); 2311 } 2312 .timeline-deck { 2313 border: 0; 2314 background-color: transparent; 2315 } 2316 .timeline-deck > header { 2317 --margin-top: 8px; 2318 top: var(--margin-top); 2319 margin-inline: 8px; 2320 } 2321 .timeline-deck > header .header-grid { 2322 border-bottom: 0; 2323 border-radius: 16px; 2324 background-color: var(--bg-faded-blur-color); 2325 background-image: none; 2326 border-radius: 16px; 2327 min-height: 4em; 2328 } 2329 .timeline-deck > header[hidden] { 2330 transform: translate3d(0, calc((100% + var(--margin-top)) * -1), 0); 2331 } 2332 .deck > header { 2333 text-shadow: 0 1px var(--bg-color); 2334 2335 form { 2336 text-shadow: none; 2337 } 2338 } 2339 .deck > header h1 { 2340 font-size: 1.5em; 2341 } 2342 .updates-button { 2343 margin-top: 24px; 2344 } 2345 .timeline:not(.flat) > li { 2346 --item-radius: 16px; 2347 border: 1px solid var(--divider-color); 2348 margin: 16px 0; 2349 background-color: var(--bg-color); 2350 border-radius: var(--item-radius); 2351 overflow: hidden; 2352 box-shadow: 0px 1px var(--bg-blur-color); 2353 transition: transform 0.4s var(--timing-function); 2354 --back-transition: transform 0.4s ease-out; 2355 } 2356 .timeline:not(.flat) > li > a { 2357 border-radius: inherit; 2358 } 2359 .timeline:not(.flat) > li:not(:has(.status-carousel)) { 2360 transform: translate3d(0, 0, 0); 2361 } 2362 .timeline:not(.flat) 2363 > li:not(.timeline-item-container-end, .timeline-item-container-middle):has( 2364 .status-badge:not(:empty) 2365 ) { 2366 border-top-right-radius: 8px; 2367 } 2368 .timeline:not(.flat) > li:has(.status-link.is-active) { 2369 transition: var(--back-transition); 2370 transform: translate3d(-2.5vw, 0, 0); 2371 } 2372 .timeline:not(.flat) 2373 > li.timeline-item-container:has(.status-link.is-active) { 2374 border-top-left-radius: var(--item-radius); 2375 border-bottom-left-radius: var(--item-radius); 2376 } 2377 .timeline:not(.flat) 2378 > li:not(:has(.status-carousel)):has(+ li .status-link.is-active), 2379 .timeline:not(.flat) 2380 > li:not(:has(.status-carousel)):has(.status-link.is-active) 2381 + li { 2382 transition: var(--back-transition); 2383 transform: translate3d(-1.25vw, 0, 0); 2384 } 2385 .timeline:not(.flat) 2386 > li.timeline-item-container:not(:has(.status-carousel)):has( 2387 + li .status-link.is-active 2388 ) { 2389 border-top-left-radius: var(--item-radius); 2390 } 2391 .timeline:not(.flat) 2392 > li.timeline-item-container:not(:has(.status-carousel)):has( 2393 .status-link.is-active 2394 ) 2395 + li.timeline-item-container { 2396 border-bottom-left-radius: var(--item-radius); 2397 } 2398 .box { 2399 padding: 32px; 2400 } 2401 /* :is(.carousel-top-controls, .carousel-controls) { 2402 padding: 32px; 2403 } */ 2404 li.timeline-item-carousel { 2405 width: 95vw; 2406 max-width: calc(320px * 3.3); 2407 transform: translateX(calc(-50% + var(--main-width) / 2)); 2408 } 2409 } 2410 2411 .import-friends-block { 2412 list-style: none; 2413 margin-top: 10px; 2414 }