this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Potentially fix unwieldy margins once and for all

+90 -82
+90 -82
src/components/account-info.css
··· 5 5 overflow-y: auto; 6 6 max-width: 100%; 7 7 --banner-overlap: 44px; 8 + --posting-stats-size: 8px; 9 + --original-color: var(--link-color); 10 + 11 + .note { 12 + font-size: 95%; 13 + line-height: 1.4; 14 + text-wrap: pretty; 15 + margin-bottom: 16px; 16 + 17 + > *:first-child { 18 + margin-top: 0; 19 + padding-top: 0; 20 + } 21 + > *:last-child { 22 + margin-bottom: 0; 23 + padding-bottom: 0; 24 + } 25 + 26 + &:not(:has(p)):not(:empty) { 27 + /* Some notes don't have <p> tags, so we need to add some padding */ 28 + padding: 1em 0; 29 + } 30 + } 31 + 32 + .posting-stats { 33 + font-size: 90%; 34 + color: var(--text-insignificant-color); 35 + background-color: var(--bg-faded-color); 36 + padding: 8px 12px; 37 + 38 + &:is(:hover, :focus-within) { 39 + background-color: var(--link-bg-hover-color); 40 + } 41 + } 42 + 43 + .posting-stats-bar { 44 + --gap: 0.5px; 45 + --gap-color: var(--outline-color); 46 + height: var(--posting-stats-size); 47 + border-radius: var(--posting-stats-size); 48 + overflow: hidden; 49 + margin: 8px 0; 50 + box-shadow: inset 0 0 0 1px var(--outline-color), 51 + inset 0 0 0 1.5px var(--bg-blur-color); 52 + background-color: var(--bg-color); 53 + background-repeat: no-repeat; 54 + animation: swoosh-bg-image 0.3s ease-in-out 0.3s both; 55 + background-image: linear-gradient( 56 + to right, 57 + var(--original-color) 0%, 58 + var(--original-color) calc(var(--originals-percentage) - var(--gap)), 59 + var(--gap-color) calc(var(--originals-percentage) - var(--gap)), 60 + var(--gap-color) calc(var(--originals-percentage) + var(--gap)), 61 + var(--reply-to-color) calc(var(--originals-percentage) + var(--gap)), 62 + var(--reply-to-color) calc(var(--replies-percentage) - var(--gap)), 63 + var(--gap-color) calc(var(--replies-percentage) - var(--gap)), 64 + var(--gap-color) calc(var(--replies-percentage) + var(--gap)), 65 + var(--reblog-color) calc(var(--replies-percentage) + var(--gap)), 66 + var(--reblog-color) 100% 67 + ); 68 + } 69 + 70 + .posting-stats-legends { 71 + font-size: 12px; 72 + text-transform: uppercase; 73 + } 74 + 75 + .posting-stats-legend-item { 76 + display: inline-block; 77 + width: var(--posting-stats-size); 78 + height: var(--posting-stats-size); 79 + border-radius: var(--posting-stats-size); 80 + background-color: var(--text-insignificant-color); 81 + vertical-align: middle; 82 + margin: 0 4px 2px; 83 + /* border: 1px solid var(--outline-color); */ 84 + box-shadow: inset 0 0 0 1px var(--outline-color), 85 + inset 0 0 0 1.5px var(--bg-blur-color); 86 + 87 + &.posting-stats-legend-item-originals { 88 + background-color: var(--original-color); 89 + } 90 + &.posting-stats-legend-item-replies { 91 + background-color: var(--reply-to-color); 92 + } 93 + &.posting-stats-legend-item-boosts { 94 + background-color: var(--reblog-color); 95 + } 96 + } 8 97 } 9 98 10 99 .account-container.skeleton { ··· 252 341 } 253 342 } 254 343 255 - .account-container .note { 256 - font-size: 95%; 257 - line-height: 1.4; 258 - text-wrap: pretty; 259 - } 260 - .account-container .note:not(:has(p)):not(:empty) { 261 - /* Some notes don't have <p> tags, so we need to add some padding */ 262 - padding: 1em 0; 263 - } 264 - 265 344 .account-container .stats { 266 345 display: flex; 267 346 /* flex-wrap: wrap; */ ··· 521 600 } 522 601 523 602 main { 524 - margin-top: -8px; 603 + /* margin-top: -8px; */ 525 604 padding-top: 1px; 526 605 padding-bottom: 16px; 527 606 } ··· 603 682 604 683 &.loading { 605 684 animation: loading-spin 0.35s linear both infinite !important; 606 - } 607 - } 608 - 609 - .account-container { 610 - --posting-stats-size: 8px; 611 - --original-color: var(--link-color); 612 - 613 - .posting-stats { 614 - font-size: 90%; 615 - color: var(--text-insignificant-color); 616 - background-color: var(--bg-faded-color); 617 - padding: 8px 12px; 618 - 619 - &:is(:hover, :focus-within) { 620 - background-color: var(--link-bg-hover-color); 621 - } 622 - } 623 - 624 - .posting-stats-bar { 625 - --gap: 0.5px; 626 - --gap-color: var(--outline-color); 627 - height: var(--posting-stats-size); 628 - border-radius: var(--posting-stats-size); 629 - overflow: hidden; 630 - margin: 8px 0; 631 - box-shadow: inset 0 0 0 1px var(--outline-color), 632 - inset 0 0 0 1.5px var(--bg-blur-color); 633 - background-color: var(--bg-color); 634 - background-repeat: no-repeat; 635 - animation: swoosh-bg-image 0.3s ease-in-out 0.3s both; 636 - background-image: linear-gradient( 637 - to right, 638 - var(--original-color) 0%, 639 - var(--original-color) calc(var(--originals-percentage) - var(--gap)), 640 - var(--gap-color) calc(var(--originals-percentage) - var(--gap)), 641 - var(--gap-color) calc(var(--originals-percentage) + var(--gap)), 642 - var(--reply-to-color) calc(var(--originals-percentage) + var(--gap)), 643 - var(--reply-to-color) calc(var(--replies-percentage) - var(--gap)), 644 - var(--gap-color) calc(var(--replies-percentage) - var(--gap)), 645 - var(--gap-color) calc(var(--replies-percentage) + var(--gap)), 646 - var(--reblog-color) calc(var(--replies-percentage) + var(--gap)), 647 - var(--reblog-color) 100% 648 - ); 649 - } 650 - 651 - .posting-stats-legends { 652 - font-size: 12px; 653 - text-transform: uppercase; 654 - } 655 - 656 - .posting-stats-legend-item { 657 - display: inline-block; 658 - width: var(--posting-stats-size); 659 - height: var(--posting-stats-size); 660 - border-radius: var(--posting-stats-size); 661 - background-color: var(--text-insignificant-color); 662 - vertical-align: middle; 663 - margin: 0 4px 2px; 664 - /* border: 1px solid var(--outline-color); */ 665 - box-shadow: inset 0 0 0 1px var(--outline-color), 666 - inset 0 0 0 1.5px var(--bg-blur-color); 667 - 668 - &.posting-stats-legend-item-originals { 669 - background-color: var(--original-color); 670 - } 671 - &.posting-stats-legend-item-replies { 672 - background-color: var(--reply-to-color); 673 - } 674 - &.posting-stats-legend-item-boosts { 675 - background-color: var(--reblog-color); 676 - } 677 685 } 678 686 } 679 687