chinwag/ChinwagUI
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improved handling of status numbers

Browse source
This commit is contained in:
Niléane 2024-01-23 18:34:12 +01:00
commit 8c1dd70b8e
No known key found for this signature in database
3 changed files with 66 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

36
TangerineUI-cherry.css
View file

@ -705,7 +705,7 @@ body.app-body {
} }
.app-body .detailed-status__link .icon-star { .app-body .detailed-status__link .icon-star {
background-image: var(--icon-star); background-image: var(--icon-star);
margin: 0 4px -2px 0; margin: 0;
} }
.app-body .media-modal__overlay .icon-star { .app-body .media-modal__overlay .icon-star {
background-image: var(--icon-star-accent); background-image: var(--icon-star-accent);
@ -724,7 +724,7 @@ body.app-body {
} }
.app-body .detailed-status__link .icon-retweet { .app-body .detailed-status__link .icon-retweet {
background-image: var(--icon-boost); background-image: var(--icon-boost);
margin: 0 4px -2px 0; margin: 0;
} }
.app-body .app-body
button.icon-button:is( button.icon-button:is(
@ -1144,6 +1144,16 @@ body.app-body {
} }
.app-body .navigation-bar .account__display-name { .app-body .navigation-bar .account__display-name {
line-height: 20px; line-height: 20px;
overflow: visible;
}
.app-body :is(.navigation-bar, .reply-indicator) .account__avatar {
outline: 6px solid var(--color-content-bg);
border-radius: 8px;
position: relative;
z-index: 2;
}
.app-body .reply-indicator__line {
z-index: 1;
} }
.app-body .compose-form__highlightable { .app-body .compose-form__highlightable {
border-top: 0; border-top: 0;
@ -2162,14 +2172,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
padding-bottom: 12px; padding-bottom: 12px;
box-shadow: none; box-shadow: none;
} }
@media screen and (min-width:890px) and (max-width:1174px) {
.app-body .scrollable > div:first-child > .detailed-status__wrapper {
margin-top: 15px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-top: 1px solid var(--color-lines);
}
}
@media screen and (max-width:889px) { @media screen and (max-width:889px) {
.app-body .detailed-status { .app-body .detailed-status {
padding: 8px 8px 14px; padding: 8px 8px 14px;
@ -2204,6 +2206,10 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
.app-body .detailed-status__meta { .app-body .detailed-status__meta {
color: var(--color-content-fg); color: var(--color-content-fg);
opacity: .8; opacity: .8;
display: flex;
align-items: center;
flex-flow: row wrap;
gap: 4px;
} }
.app-body .detailed-status__action-bar { .app-body .detailed-status__action-bar {
padding: 0 16px; padding: 0 16px;
@ -2237,9 +2243,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
> .animated-number { > .animated-number {
color: #EBBB59; color: #EBBB59;
} }
.app-body .detailed-status__meta .animated-number {
transform: translate(0, -1px);
}
.app-body .dropdown-menu__text-button:has(.icon-caret-down) { .app-body .dropdown-menu__text-button:has(.icon-caret-down) {
padding: 2px 4px; padding: 2px 4px;
border: 1px solid var(--color-lines); border: 1px solid var(--color-lines);
@ -2274,8 +2277,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
border-top: 1px solid var(--color-lines); border-top: 1px solid var(--color-lines);
} }
.app-body .detailed-status__link { .app-body .detailed-status__link {
display: inline-block; display: inline-flex;
position: static; position: static;
gap: 4px;
}
.app-body :is(.detailed-status__favorites, .detailed-status__reblogs) {
height: 15px;
line-height: 15px;
} }
/* Hashtag bar */ /* Hashtag bar */

36
TangerineUI-purple.css
View file

@ -705,7 +705,7 @@ body.app-body {
} }
.app-body .detailed-status__link .icon-star { .app-body .detailed-status__link .icon-star {
background-image: var(--icon-star); background-image: var(--icon-star);
margin: 0 4px -2px 0; margin: 0;
} }
.app-body .media-modal__overlay .icon-star { .app-body .media-modal__overlay .icon-star {
background-image: var(--icon-star-accent); background-image: var(--icon-star-accent);
@ -724,7 +724,7 @@ body.app-body {
} }
.app-body .detailed-status__link .icon-retweet { .app-body .detailed-status__link .icon-retweet {
background-image: var(--icon-boost); background-image: var(--icon-boost);
margin: 0 4px -2px 0; margin: 0;
} }
.app-body .app-body
button.icon-button:is( button.icon-button:is(
@ -1144,6 +1144,16 @@ body.app-body {
} }
.app-body .navigation-bar .account__display-name { .app-body .navigation-bar .account__display-name {
line-height: 20px; line-height: 20px;
overflow: visible;
}
.app-body :is(.navigation-bar, .reply-indicator) .account__avatar {
outline: 6px solid var(--color-content-bg);
border-radius: 8px;
position: relative;
z-index: 2;
}
.app-body .reply-indicator__line {
z-index: 1;
} }
.app-body .compose-form__highlightable { .app-body .compose-form__highlightable {
border-top: 0; border-top: 0;
@ -2162,14 +2172,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
padding-bottom: 12px; padding-bottom: 12px;
box-shadow: none; box-shadow: none;
} }
@media screen and (min-width:890px) and (max-width:1174px) {
.app-body .scrollable > div:first-child > .detailed-status__wrapper {
margin-top: 15px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-top: 1px solid var(--color-lines);
}
}
@media screen and (max-width:889px) { @media screen and (max-width:889px) {
.app-body .detailed-status { .app-body .detailed-status {
padding: 8px 8px 14px; padding: 8px 8px 14px;
@ -2204,6 +2206,10 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
.app-body .detailed-status__meta { .app-body .detailed-status__meta {
color: var(--color-content-fg); color: var(--color-content-fg);
opacity: .8; opacity: .8;
display: flex;
align-items: center;
flex-flow: row wrap;
gap: 4px;
} }
.app-body .detailed-status__action-bar { .app-body .detailed-status__action-bar {
padding: 0 16px; padding: 0 16px;
@ -2237,9 +2243,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
> .animated-number { > .animated-number {
color: #EBBB59; color: #EBBB59;
} }
.app-body .detailed-status__meta .animated-number {
transform: translate(0, -1px);
}
.app-body .dropdown-menu__text-button:has(.icon-caret-down) { .app-body .dropdown-menu__text-button:has(.icon-caret-down) {
padding: 2px 4px; padding: 2px 4px;
border: 1px solid var(--color-lines); border: 1px solid var(--color-lines);
@ -2274,8 +2277,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
border-top: 1px solid var(--color-lines); border-top: 1px solid var(--color-lines);
} }
.app-body .detailed-status__link { .app-body .detailed-status__link {
display: inline-block; display: inline-flex;
position: static; position: static;
gap: 4px;
}
.app-body :is(.detailed-status__favorites, .detailed-status__reblogs) {
height: 15px;
line-height: 15px;
} }
/* Hashtag bar */ /* Hashtag bar */

36
TangerineUI.css
View file

@ -705,7 +705,7 @@ body.app-body {
} }
.app-body .detailed-status__link .icon-star { .app-body .detailed-status__link .icon-star {
background-image: var(--icon-star); background-image: var(--icon-star);
margin: 0 4px -2px 0; margin: 0;
} }
.app-body .media-modal__overlay .icon-star { .app-body .media-modal__overlay .icon-star {
background-image: var(--icon-star-accent); background-image: var(--icon-star-accent);
@ -724,7 +724,7 @@ body.app-body {
} }
.app-body .detailed-status__link .icon-retweet { .app-body .detailed-status__link .icon-retweet {
background-image: var(--icon-boost); background-image: var(--icon-boost);
margin: 0 4px -2px 0; margin: 0;
} }
.app-body .app-body
button.icon-button:is( button.icon-button:is(
@ -1144,6 +1144,16 @@ body.app-body {
} }
.app-body .navigation-bar .account__display-name { .app-body .navigation-bar .account__display-name {
line-height: 20px; line-height: 20px;
overflow: visible;
}
.app-body :is(.navigation-bar, .reply-indicator) .account__avatar {
outline: 6px solid var(--color-content-bg);
border-radius: 8px;
position: relative;
z-index: 2;
}
.app-body .reply-indicator__line {
z-index: 1;
} }
.app-body .compose-form__highlightable { .app-body .compose-form__highlightable {
border-top: 0; border-top: 0;
@ -2162,14 +2172,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
padding-bottom: 12px; padding-bottom: 12px;
box-shadow: none; box-shadow: none;
} }
@media screen and (min-width:890px) and (max-width:1174px) {
.app-body .scrollable > div:first-child > .detailed-status__wrapper {
margin-top: 15px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-top: 1px solid var(--color-lines);
}
}
@media screen and (max-width:889px) { @media screen and (max-width:889px) {
.app-body .detailed-status { .app-body .detailed-status {
padding: 8px 8px 14px; padding: 8px 8px 14px;
@ -2204,6 +2206,10 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
.app-body .detailed-status__meta { .app-body .detailed-status__meta {
color: var(--color-content-fg); color: var(--color-content-fg);
opacity: .8; opacity: .8;
display: flex;
align-items: center;
flex-flow: row wrap;
gap: 4px;
} }
.app-body .detailed-status__action-bar { .app-body .detailed-status__action-bar {
padding: 0 16px; padding: 0 16px;
@ -2237,9 +2243,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
> .animated-number { > .animated-number {
color: #EBBB59; color: #EBBB59;
} }
.app-body .detailed-status__meta .animated-number {
transform: translate(0, -1px);
}
.app-body .dropdown-menu__text-button:has(.icon-caret-down) { .app-body .dropdown-menu__text-button:has(.icon-caret-down) {
padding: 2px 4px; padding: 2px 4px;
border: 1px solid var(--color-lines); border: 1px solid var(--color-lines);
@ -2274,8 +2277,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
border-top: 1px solid var(--color-lines); border-top: 1px solid var(--color-lines);
} }
.app-body .detailed-status__link { .app-body .detailed-status__link {
display: inline-block; display: inline-flex;
position: static; position: static;
gap: 4px;
}
.app-body :is(.detailed-status__favorites, .detailed-status__reblogs) {
height: 15px;
line-height: 15px;
} }
/* Hashtag bar */ /* Hashtag bar */