From d59ee9169f19dd1aa4117af080e54aa93e5c1dbc Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Tue, 26 Dec 2023 16:00:39 +0800 Subject: [PATCH] Potentially fix unwieldy margins once and for all --- src/components/account-info.css | 172 +++++++++++++++++--------------- 1 file changed, 90 insertions(+), 82 deletions(-) diff --git a/src/components/account-info.css b/src/components/account-info.css index e480878d..b4e007a7 100644 --- a/src/components/account-info.css +++ b/src/components/account-info.css @@ -5,6 +5,95 @@ overflow-y: auto; max-width: 100%; --banner-overlap: 44px; + --posting-stats-size: 8px; + --original-color: var(--link-color); + + .note { + font-size: 95%; + line-height: 1.4; + text-wrap: pretty; + margin-bottom: 16px; + + > *:first-child { + margin-top: 0; + padding-top: 0; + } + > *:last-child { + margin-bottom: 0; + padding-bottom: 0; + } + + &:not(:has(p)):not(:empty) { + /* Some notes don't have

tags, so we need to add some padding */ + padding: 1em 0; + } + } + + .posting-stats { + font-size: 90%; + color: var(--text-insignificant-color); + background-color: var(--bg-faded-color); + padding: 8px 12px; + + &:is(:hover, :focus-within) { + background-color: var(--link-bg-hover-color); + } + } + + .posting-stats-bar { + --gap: 0.5px; + --gap-color: var(--outline-color); + height: var(--posting-stats-size); + border-radius: var(--posting-stats-size); + overflow: hidden; + margin: 8px 0; + box-shadow: inset 0 0 0 1px var(--outline-color), + inset 0 0 0 1.5px var(--bg-blur-color); + background-color: var(--bg-color); + background-repeat: no-repeat; + animation: swoosh-bg-image 0.3s ease-in-out 0.3s both; + background-image: linear-gradient( + to right, + var(--original-color) 0%, + var(--original-color) calc(var(--originals-percentage) - var(--gap)), + var(--gap-color) calc(var(--originals-percentage) - var(--gap)), + var(--gap-color) calc(var(--originals-percentage) + var(--gap)), + var(--reply-to-color) calc(var(--originals-percentage) + var(--gap)), + var(--reply-to-color) calc(var(--replies-percentage) - var(--gap)), + var(--gap-color) calc(var(--replies-percentage) - var(--gap)), + var(--gap-color) calc(var(--replies-percentage) + var(--gap)), + var(--reblog-color) calc(var(--replies-percentage) + var(--gap)), + var(--reblog-color) 100% + ); + } + + .posting-stats-legends { + font-size: 12px; + text-transform: uppercase; + } + + .posting-stats-legend-item { + display: inline-block; + width: var(--posting-stats-size); + height: var(--posting-stats-size); + border-radius: var(--posting-stats-size); + background-color: var(--text-insignificant-color); + vertical-align: middle; + margin: 0 4px 2px; + /* border: 1px solid var(--outline-color); */ + box-shadow: inset 0 0 0 1px var(--outline-color), + inset 0 0 0 1.5px var(--bg-blur-color); + + &.posting-stats-legend-item-originals { + background-color: var(--original-color); + } + &.posting-stats-legend-item-replies { + background-color: var(--reply-to-color); + } + &.posting-stats-legend-item-boosts { + background-color: var(--reblog-color); + } + } } .account-container.skeleton { @@ -252,16 +341,6 @@ } } -.account-container .note { - font-size: 95%; - line-height: 1.4; - text-wrap: pretty; -} -.account-container .note:not(:has(p)):not(:empty) { - /* Some notes don't have

tags, so we need to add some padding */ - padding: 1em 0; -} - .account-container .stats { display: flex; /* flex-wrap: wrap; */ @@ -521,7 +600,7 @@ } main { - margin-top: -8px; + /* margin-top: -8px; */ padding-top: 1px; padding-bottom: 16px; } @@ -606,77 +685,6 @@ } } -.account-container { - --posting-stats-size: 8px; - --original-color: var(--link-color); - - .posting-stats { - font-size: 90%; - color: var(--text-insignificant-color); - background-color: var(--bg-faded-color); - padding: 8px 12px; - - &:is(:hover, :focus-within) { - background-color: var(--link-bg-hover-color); - } - } - - .posting-stats-bar { - --gap: 0.5px; - --gap-color: var(--outline-color); - height: var(--posting-stats-size); - border-radius: var(--posting-stats-size); - overflow: hidden; - margin: 8px 0; - box-shadow: inset 0 0 0 1px var(--outline-color), - inset 0 0 0 1.5px var(--bg-blur-color); - background-color: var(--bg-color); - background-repeat: no-repeat; - animation: swoosh-bg-image 0.3s ease-in-out 0.3s both; - background-image: linear-gradient( - to right, - var(--original-color) 0%, - var(--original-color) calc(var(--originals-percentage) - var(--gap)), - var(--gap-color) calc(var(--originals-percentage) - var(--gap)), - var(--gap-color) calc(var(--originals-percentage) + var(--gap)), - var(--reply-to-color) calc(var(--originals-percentage) + var(--gap)), - var(--reply-to-color) calc(var(--replies-percentage) - var(--gap)), - var(--gap-color) calc(var(--replies-percentage) - var(--gap)), - var(--gap-color) calc(var(--replies-percentage) + var(--gap)), - var(--reblog-color) calc(var(--replies-percentage) + var(--gap)), - var(--reblog-color) 100% - ); - } - - .posting-stats-legends { - font-size: 12px; - text-transform: uppercase; - } - - .posting-stats-legend-item { - display: inline-block; - width: var(--posting-stats-size); - height: var(--posting-stats-size); - border-radius: var(--posting-stats-size); - background-color: var(--text-insignificant-color); - vertical-align: middle; - margin: 0 4px 2px; - /* border: 1px solid var(--outline-color); */ - box-shadow: inset 0 0 0 1px var(--outline-color), - inset 0 0 0 1.5px var(--bg-blur-color); - - &.posting-stats-legend-item-originals { - background-color: var(--original-color); - } - &.posting-stats-legend-item-replies { - background-color: var(--reply-to-color); - } - &.posting-stats-legend-item-boosts { - background-color: var(--reblog-color); - } - } -} - #list-add-remove-container .list-add-remove { display: flex; flex-direction: column;