Redesigned "boost", "replied to", "pinned" indicators above posts
This commit is contained in:
Niléane
parent
53b9933d86
commit
abc6bc7233
3 changed files with 187 additions and 100 deletions
|
|
@ -931,6 +931,9 @@ body.app-body {
|
|||
.app-body .media-modal__overlay :is(.icon-reply, .icon-reply-all) {
|
||||
background-image: var(--icon-reply-accent);
|
||||
}
|
||||
.app-body .status__prepend-icon.icon-reply {
|
||||
background-image: var(--icon-reply-accent);
|
||||
}
|
||||
/* Ellipsis */
|
||||
.app-body :is(.icon-ellipsis-h, .icon-ellipsis-v) {
|
||||
background-image: var(--icon-ellipsis-accent);
|
||||
|
|
@ -1621,7 +1624,7 @@ body.app-body {
|
|||
color: var(--color-content-fg);
|
||||
opacity: 0;
|
||||
font-size: 15px;
|
||||
font-weight: normal;
|
||||
font-weight: 500;
|
||||
transition:
|
||||
opacity .3s,
|
||||
margin-right .3s;
|
||||
|
|
@ -1692,7 +1695,7 @@ body.app-body {
|
|||
background-color: var(--color-accent-bg);
|
||||
}
|
||||
.app-body .compose-form:not(:has(.autosuggest-textarea__textarea:placeholder-shown)) .compose-form__submit {
|
||||
animation: bounce-sml .3s ease-out 1;
|
||||
animation: bounce-sml .2s ease-out 1;
|
||||
}
|
||||
|
||||
.app-body .upload-progress__tracker {
|
||||
|
|
@ -2267,6 +2270,20 @@ body.app-body {
|
|||
background-color: var(--color-post-bg);
|
||||
transition: outline .3s;
|
||||
}
|
||||
.app-body .status__prepend + .status .status__avatar .account__avatar-overlay-base .account__avatar {
|
||||
width: 46px !important;
|
||||
height: 46px !important;
|
||||
}
|
||||
.app-body .status__prepend + .status .status__avatar .account__avatar-overlay-overlay {
|
||||
position: absolute;
|
||||
top: -34px;
|
||||
right: -38px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.app-body .status__prepend + .status .status__avatar .account__avatar-overlay-overlay .account__avatar {
|
||||
width: 29px !important;
|
||||
height: 29px !important;
|
||||
}
|
||||
.app-body .reply-indicator__content,
|
||||
.app-body .status__content {
|
||||
line-height: 19px;
|
||||
|
|
@ -2289,7 +2306,7 @@ body.app-body {
|
|||
position: absolute;
|
||||
background-color: var(--color-lines);
|
||||
height: 1px;
|
||||
width: calc(100% - 77px);
|
||||
width: calc(100% - 78px);
|
||||
right: 0;
|
||||
top: -1px;
|
||||
content: "";
|
||||
|
|
@ -2560,16 +2577,24 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
/* Hashtag bar */
|
||||
.app-body .hashtag-bar a,
|
||||
.app-body .hashtag-bar .link-button {
|
||||
color: var(--color-fg-muted);
|
||||
color: var(--color-accent);
|
||||
font-size: 90%;
|
||||
transition: all .1s;
|
||||
}
|
||||
.app-body .hashtag-bar a {
|
||||
font-weight: 500;
|
||||
}
|
||||
.app-body .hashtag-bar .link-button {
|
||||
font-size: 80%;
|
||||
margin-left: 3px;
|
||||
}
|
||||
.app-body .hashtag-bar a {
|
||||
background-color: var(--color-content-secondary-bg);
|
||||
background-color:
|
||||
color-mix(
|
||||
in srgb,
|
||||
var(--color-accent),
|
||||
transparent 92%
|
||||
);
|
||||
transition: all .3s;
|
||||
padding: 3px 8px;
|
||||
border-radius: 8px;
|
||||
|
|
@ -2679,24 +2704,41 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
color: #ffb609;
|
||||
}
|
||||
.app-body .status__prepend {
|
||||
padding-top: 2px;
|
||||
padding-right: 0;
|
||||
padding-bottom: 1px;
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
height: 25px;
|
||||
padding: 0 10px;
|
||||
margin-top: 3px;
|
||||
margin-bottom: 5px;
|
||||
margin-left: 66px;
|
||||
height: 29px;
|
||||
gap: 5px;
|
||||
border-radius: 50px;
|
||||
align-items: center;
|
||||
background-color: var(--color-content-secondary-bg);
|
||||
color: var(--color-content-fg);
|
||||
font-size: 13px;
|
||||
}
|
||||
.app-body .status__prepend:has(.status__prepend-icon-wrapper .icon-retweet) {
|
||||
padding-left: 35px;
|
||||
}
|
||||
.app-body .status__prepend-icon-wrapper {
|
||||
width: 56px;
|
||||
height: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
.app-body .status__prepend .status__prepend-icon-wrapper:has(.icon-retweet) {
|
||||
order: 2;
|
||||
}
|
||||
.app-body .status__prepend-icon-wrapper .icon {
|
||||
transform: translateY(1px) scale(1.1);
|
||||
transform: scale(.9);
|
||||
}
|
||||
.app-body .detailed-status__wrapper .status__prepend-icon-wrapper {
|
||||
width: 46px;
|
||||
}
|
||||
.app-body .status__prepend > span {
|
||||
color: var(--color-fg-muted);
|
||||
}
|
||||
.app-body .status__prepend:has(.status__prepend-icon-wrapper > .icon-thumb-tack) > span {
|
||||
color: var(--color-content-fg);
|
||||
font-weight: 600;
|
||||
}
|
||||
.app-body .status__prepend .muted .emojione {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -3057,23 +3099,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
}
|
||||
|
||||
.app-body :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend {
|
||||
border-radius: 30px;
|
||||
padding: 2px 10px 2px 8px;
|
||||
background-color: var(--color-accent);
|
||||
margin-inline-start: 10px;
|
||||
margin-block-end: 4px;
|
||||
gap: 5px;
|
||||
align-items: center;
|
||||
transform: scale(.9);
|
||||
transform-origin: left center;
|
||||
z-index: 3;
|
||||
position: relative;
|
||||
outline: 5px solid var(--color-post-bg);
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
.app-body :is(.detailed-status__wrapper-direct) .status__prepend {
|
||||
margin-inline-start: 0;
|
||||
margin-block-end: 0;
|
||||
transform: scale(1);
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
|
|
@ -3086,7 +3122,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
padding-top: 40px;
|
||||
}
|
||||
.app-body :is(.status__wrapper-direct):not(:has(.status__line)) .status__prepend {
|
||||
margin-inline-start: 62px;
|
||||
margin-inline-start: 66px;
|
||||
}
|
||||
.app-body :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend .status__prepend-icon-wrapper {
|
||||
width: 20px;
|
||||
|
|
@ -3678,7 +3714,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
bottom: -14px;
|
||||
}
|
||||
.app-body .column-link--transparent:hover span::before {
|
||||
background-color: var(--color-accent-bg);
|
||||
background-color: color-mix(in srgb, var(--color-accent), transparent 85%);
|
||||
}
|
||||
.app-body .column-link--transparent:is(.active, .active:hover) span::before {
|
||||
background-color: transparent;
|
||||
|
|
@ -5741,7 +5777,8 @@ a:is(.active,
|
|||
font-size: 80%;
|
||||
}
|
||||
.app-body .server-banner__number {
|
||||
color: var(--color-content-fg-bold);
|
||||
color: var(--color-content-fg);
|
||||
font-size: 15px;
|
||||
}
|
||||
.app-body .server-banner__number-label {
|
||||
color: var(--color-content-fg);
|
||||
|
|
@ -5770,22 +5807,14 @@ a:is(.active,
|
|||
.app-body .button.button-secondary,
|
||||
.app-body .button.button-tertiary {
|
||||
border: 0;
|
||||
background-color: var(--color-accent-bg);
|
||||
background-color: color-mix(in srgb, var(--color-accent), transparent 82%);
|
||||
color: var(--color-accent);
|
||||
outline: 1px solid var(--color-accent-lines);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
.app-body .button:is(.button-secondary, .button-tertiary):hover {
|
||||
background-color: var(--color-accent-focus);
|
||||
color: var(--color-accent-fg);
|
||||
outline-color: var(--color-lines-translucent);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.app-body .button.button-secondary,
|
||||
.app-body .button.button-tertiary {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
.app-body .sign-in-banner .button,
|
||||
.app-body .button:is(.button-secondary, .button-tertiary) {
|
||||
padding: 10px 18px;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue