Potentially fix unwieldy margins once and for all
This commit is contained in:
Lim Chee Aun
parent
3a3858bd72
commit
d59ee9169f
|
|
@ -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 <p> 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 <p> 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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue