style: update Tangerine UI
This commit is contained in:
parent
1e70b14213
commit
324c0b0033
GPG Key ID:
139D6573F92DA9F7
@ -8,7 +8,7 @@
|
||||
|
||||
/* 📄 Meta */
|
||||
:root {
|
||||
--version: "v2.0";
|
||||
--version: "v2.2";
|
||||
|
||||
--variant-name: "Cherry";
|
||||
--variant-emoji: "\1F352\00A0";
|
||||
@ -948,7 +948,7 @@ path {
|
||||
}
|
||||
.app-body button.icon-button.active .icon-retweet,
|
||||
.app-body .detailed-status__button button.icon-button.active:hover .icon-retweet {
|
||||
background-image: var(--icon-boost-active);
|
||||
background-image: var(--icon-boost-accent-active);
|
||||
}
|
||||
.app-body .status__prepend__icon .icon-retweet,
|
||||
.app-body .notification-group--reblog .icon-repeat {
|
||||
@ -2754,7 +2754,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||
:is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer)
|
||||
.active
|
||||
.icon-retweet + .icon-button__counter > .animated-number {
|
||||
color: #FF4014;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
.app-body
|
||||
:is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer)
|
||||
@ -2819,12 +2819,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||
.app-body .status__action-bar {
|
||||
justify-content: left;
|
||||
margin-top: 8px;
|
||||
gap: 22px;
|
||||
}
|
||||
@media screen and (max-width:550px) {
|
||||
.app-body .status__action-bar {
|
||||
gap: 10px;
|
||||
}
|
||||
gap: 9px;
|
||||
}
|
||||
.app-body .status__action-bar .status__action-bar__button-wrapper {
|
||||
flex-grow: 0;
|
||||
@ -2913,6 +2908,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||
align-items: center;
|
||||
background-color: var(--color-content-secondary-bg);
|
||||
color: var(--color-content-fg);
|
||||
outline: 1px solid color-mix(in srgb, var(--color-fg), transparent 95%);
|
||||
outline-offset: -1px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.app-body .status__prepend:has(.status__prepend__icon .icon-retweet) {
|
||||
@ -3083,8 +3080,10 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||
font-size: 12px;
|
||||
}
|
||||
.app-body .status-card:has(+ .more-from-author) {
|
||||
box-sizing: border-box;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.app-body .status-card + .more-from-author {
|
||||
background-color: var(--color-content-secondary-bg);
|
||||
@ -3093,10 +3092,19 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||
}
|
||||
.app-body .more-from-author {
|
||||
color: var(--color-content-fg);
|
||||
overflow: hidden;
|
||||
}
|
||||
.app-body .more-from-author .logo {
|
||||
color: var(--color-content-fg);
|
||||
width: 16px;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.app-body .more-from-author > span {
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
mask-image: linear-gradient(90deg, black 80%, transparent 96%);
|
||||
}
|
||||
.app-body .notification-ungrouped .more-from-author :is(.account__avatar) {
|
||||
width: 16px !important;
|
||||
@ -3493,11 +3501,25 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||
box-shadow: inset 0 10px var(--color-bg);
|
||||
}
|
||||
.app-body .column-header__wrapper.active:before {
|
||||
background: none;
|
||||
opacity: 40%;
|
||||
top: -17px;
|
||||
bottom: unset;
|
||||
opacity: 30%;
|
||||
height: 35px;
|
||||
width: 100%;
|
||||
background: radial-gradient(ellipse, var(--color-accent) 0, transparent 60%);
|
||||
}
|
||||
.app-body .column-header__wrapper.active {
|
||||
box-shadow: 0 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
@media screen and (min-width:1175px) {
|
||||
.app-body .column-header__wrapper.active:before {
|
||||
top: unset;
|
||||
bottom: -15px;
|
||||
border-top: 1px solid var(--color-lines-translucent);
|
||||
}
|
||||
.app-body .column-header__wrapper.active {
|
||||
box-shadow: 0 1px 0 var(--color-lines-translucent);
|
||||
}
|
||||
}
|
||||
.app-body .column-header {
|
||||
border-radius: 8px;
|
||||
@ -3784,13 +3806,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||
border-radius: 15px 15px 0 0;
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
.app-body.theme-system .ui::after {
|
||||
.app-body:is(.theme-system, .theme-mastodon-light) .ui::after {
|
||||
box-shadow: 0 -10px 0 10px #f3f5f7;
|
||||
border-radius: 15px 15px 0 0;
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.app-body.theme-system .ui::after {
|
||||
.app-body:is(.theme-system, .theme-default) .ui::after {
|
||||
box-shadow: 0 -10px 0 10px #191b22;
|
||||
border-radius: 15px 15px 0 0;
|
||||
}
|
||||
@ -5656,6 +5678,7 @@ button {
|
||||
width: 100%;
|
||||
border-bottom: 2px solid var(--color-content-secondary-separator);
|
||||
background-color: var(--color-content-bg);
|
||||
color: var(--color-content-fg);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.app-body .item-list .column-link:hover {
|
||||
@ -5686,10 +5709,25 @@ button {
|
||||
.app-body .list-adder .column-inline-form {
|
||||
border-radius: 0;
|
||||
}
|
||||
.list-adder .list {
|
||||
.app-body .list-adder .list {
|
||||
border-bottom: 2px solid var(--color-content-secondary-separator);
|
||||
}
|
||||
|
||||
.app-body .list-editor .drawer__pager {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
.app-body .list-editor .account__relationship .icon-button {
|
||||
border-color: var(--color-accent);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
.app-body .list-editor .search .search__input {
|
||||
border-top: 1px solid;
|
||||
border-bottom: 1px solid;
|
||||
border-color: var(--color-accent-lines);
|
||||
}
|
||||
.app-body .list-editor .search .search__input:focus {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* ➕ Follow requests */
|
||||
.app-body #Follow-requests {
|
||||
@ -6292,11 +6330,9 @@ button {
|
||||
color: var(--color-fg);
|
||||
}
|
||||
.app-body .interaction-modal__icon {
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
transform: scale(1.4) translateX(-2px);
|
||||
}
|
||||
.app-body .interaction-modal p {
|
||||
.app-body .interaction-modal :is(p, strong) {
|
||||
color: var(--color-content-fg);
|
||||
}
|
||||
.app-body .interaction-modal p.hint {
|
||||
@ -7464,7 +7500,7 @@ a:is(.active,
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.layout-multiple-columns .drawer__inner:not(:has(> .search-results))::after {
|
||||
.layout-multiple-columns .search + .drawer__pager .drawer__inner:has(.compose-form):not(:has(> .search-results))::after {
|
||||
content: var(--meta);
|
||||
color: var(--color-fg-muted);
|
||||
padding: 12px;
|
||||
@ -7477,6 +7513,10 @@ a:is(.active,
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layout-multiple-columns .list-editor__accounts + .drawer__inner.backdrop {
|
||||
background-color: var(--color-content-bg);
|
||||
}
|
||||
|
||||
@media screen and (min-width:630px) and (max-width:1174px) {
|
||||
.layout-multiple-columns
|
||||
:is(
|
||||
@ -7635,7 +7675,6 @@ a:is(.active,
|
||||
.app-body
|
||||
.trends__item:has(
|
||||
.trends__item__name a:is(
|
||||
[href*="gift" i],
|
||||
[href*="christmas" i],
|
||||
[href*="weihnachten" i],
|
||||
[href*="noel" i]
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
|
||||
/* 📄 Meta */
|
||||
:root {
|
||||
--version: "v2.0";
|
||||
--version: "v2.2";
|
||||
|
||||
--variant-name: "Lagoon";
|
||||
--variant-emoji: "\1F420\00A0";
|
||||
@ -948,7 +948,7 @@ path {
|
||||
}
|
||||
.app-body button.icon-button.active .icon-retweet,
|
||||
.app-body .detailed-status__button button.icon-button.active:hover .icon-retweet {
|
||||
background-image: var(--icon-boost-active);
|
||||
background-image: var(--icon-boost-accent-active);
|
||||
}
|
||||
.app-body .status__prepend__icon .icon-retweet,
|
||||
.app-body .notification-group--reblog .icon-repeat {
|
||||
@ -2754,7 +2754,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||
:is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer)
|
||||
.active
|
||||
.icon-retweet + .icon-button__counter > .animated-number {
|
||||
color: #FF4014;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
.app-body
|
||||
:is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer)
|
||||
@ -2819,12 +2819,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||
.app-body .status__action-bar {
|
||||
justify-content: left;
|
||||
margin-top: 8px;
|
||||
gap: 22px;
|
||||
}
|
||||
@media screen and (max-width:550px) {
|
||||
.app-body .status__action-bar {
|
||||
gap: 10px;
|
||||
}
|
||||
gap: 9px;
|
||||
}
|
||||
.app-body .status__action-bar .status__action-bar__button-wrapper {
|
||||
flex-grow: 0;
|
||||
@ -2913,6 +2908,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||
align-items: center;
|
||||
background-color: var(--color-content-secondary-bg);
|
||||
color: var(--color-content-fg);
|
||||
outline: 1px solid color-mix(in srgb, var(--color-fg), transparent 95%);
|
||||
outline-offset: -1px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.app-body .status__prepend:has(.status__prepend__icon .icon-retweet) {
|
||||
@ -3083,8 +3080,10 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||
font-size: 12px;
|
||||
}
|
||||
.app-body .status-card:has(+ .more-from-author) {
|
||||
box-sizing: border-box;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.app-body .status-card + .more-from-author {
|
||||
background-color: var(--color-content-secondary-bg);
|
||||
@ -3093,10 +3092,19 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||
}
|
||||
.app-body .more-from-author {
|
||||
color: var(--color-content-fg);
|
||||
overflow: hidden;
|
||||
}
|
||||
.app-body .more-from-author .logo {
|
||||
color: var(--color-content-fg);
|
||||
width: 16px;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.app-body .more-from-author > span {
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
mask-image: linear-gradient(90deg, black 80%, transparent 96%);
|
||||
}
|
||||
.app-body .notification-ungrouped .more-from-author :is(.account__avatar) {
|
||||
width: 16px !important;
|
||||
@ -3493,11 +3501,25 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||
box-shadow: inset 0 10px var(--color-bg);
|
||||
}
|
||||
.app-body .column-header__wrapper.active:before {
|
||||
background: none;
|
||||
opacity: 40%;
|
||||
top: -17px;
|
||||
bottom: unset;
|
||||
opacity: 30%;
|
||||
height: 35px;
|
||||
width: 100%;
|
||||
background: radial-gradient(ellipse, var(--color-accent) 0, transparent 60%);
|
||||
}
|
||||
.app-body .column-header__wrapper.active {
|
||||
box-shadow: 0 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
@media screen and (min-width:1175px) {
|
||||
.app-body .column-header__wrapper.active:before {
|
||||
top: unset;
|
||||
bottom: -15px;
|
||||
border-top: 1px solid var(--color-lines-translucent);
|
||||
}
|
||||
.app-body .column-header__wrapper.active {
|
||||
box-shadow: 0 1px 0 var(--color-lines-translucent);
|
||||
}
|
||||
}
|
||||
.app-body .column-header {
|
||||
border-radius: 8px;
|
||||
@ -3784,13 +3806,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||
border-radius: 15px 15px 0 0;
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
.app-body.theme-system .ui::after {
|
||||
.app-body:is(.theme-system, .theme-mastodon-light) .ui::after {
|
||||
box-shadow: 0 -10px 0 10px #f3f5f7;
|
||||
border-radius: 15px 15px 0 0;
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.app-body.theme-system .ui::after {
|
||||
.app-body:is(.theme-system, .theme-default) .ui::after {
|
||||
box-shadow: 0 -10px 0 10px #191b22;
|
||||
border-radius: 15px 15px 0 0;
|
||||
}
|
||||
@ -5656,6 +5678,7 @@ button {
|
||||
width: 100%;
|
||||
border-bottom: 2px solid var(--color-content-secondary-separator);
|
||||
background-color: var(--color-content-bg);
|
||||
color: var(--color-content-fg);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.app-body .item-list .column-link:hover {
|
||||
@ -5686,10 +5709,25 @@ button {
|
||||
.app-body .list-adder .column-inline-form {
|
||||
border-radius: 0;
|
||||
}
|
||||
.list-adder .list {
|
||||
.app-body .list-adder .list {
|
||||
border-bottom: 2px solid var(--color-content-secondary-separator);
|
||||
}
|
||||
|
||||
.app-body .list-editor .drawer__pager {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
.app-body .list-editor .account__relationship .icon-button {
|
||||
border-color: var(--color-accent);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
.app-body .list-editor .search .search__input {
|
||||
border-top: 1px solid;
|
||||
border-bottom: 1px solid;
|
||||
border-color: var(--color-accent-lines);
|
||||
}
|
||||
.app-body .list-editor .search .search__input:focus {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* ➕ Follow requests */
|
||||
.app-body #Follow-requests {
|
||||
@ -6292,11 +6330,9 @@ button {
|
||||
color: var(--color-fg);
|
||||
}
|
||||
.app-body .interaction-modal__icon {
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
transform: scale(1.4) translateX(-2px);
|
||||
}
|
||||
.app-body .interaction-modal p {
|
||||
.app-body .interaction-modal :is(p, strong) {
|
||||
color: var(--color-content-fg);
|
||||
}
|
||||
.app-body .interaction-modal p.hint {
|
||||
@ -7464,7 +7500,7 @@ a:is(.active,
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.layout-multiple-columns .drawer__inner:not(:has(> .search-results))::after {
|
||||
.layout-multiple-columns .search + .drawer__pager .drawer__inner:has(.compose-form):not(:has(> .search-results))::after {
|
||||
content: var(--meta);
|
||||
color: var(--color-fg-muted);
|
||||
padding: 12px;
|
||||
@ -7477,6 +7513,10 @@ a:is(.active,
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layout-multiple-columns .list-editor__accounts + .drawer__inner.backdrop {
|
||||
background-color: var(--color-content-bg);
|
||||
}
|
||||
|
||||
@media screen and (min-width:630px) and (max-width:1174px) {
|
||||
.layout-multiple-columns
|
||||
:is(
|
||||
@ -7635,7 +7675,6 @@ a:is(.active,
|
||||
.app-body
|
||||
.trends__item:has(
|
||||
.trends__item__name a:is(
|
||||
[href*="gift" i],
|
||||
[href*="christmas" i],
|
||||
[href*="weihnachten" i],
|
||||
[href*="noel" i]
|
||||
|
||||
Loading…
Reference in New Issue
Block a user