mirror/Tangerine-UI
1
0
Fork 0
mirror of https://github.com/nileane/TangerineUI-for-Mastodon synced 2024-11-30 15:58:07 +09:00
Code

Improved load gap look

Browse Source
This commit is contained in:
Niléane 2024-08-26 16:35:48 +02:00
parent 4de003306c
commit 31afa3bd94
No known key found for this signature in database
4 changed files with 24 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
TangerineUI-cherry.css
View File

@ -3518,16 +3518,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
transform: scale(.9); transform: scale(.9);
} }
.app-body .load-gap, .app-body :is(.load-gap, .load-more) {
.app-body .load-more { background-color: var(--color-content-secondary-bg);
background-color: var(--color-accent-bg);
color: var(--color-accent); color: var(--color-accent);
border-bottom: 0; border-bottom: 0;
} }
.app-body .load-gap:hover, .app-body :is(.load-gap, .load-more):is(:active, :hover) {
.app-body .load-more:hover {
background-color: var(--color-accent-lines); background-color: var(--color-accent-lines);
} }
.app-body :is(.load-gap, .load-more) .icon-ellipsis-h {
background-image: var(--icon-ellipsis-column-link-active-accent);
}
.app-body .column-header__collapsible { .app-body .column-header__collapsible {
background-color: color-mix(in srgb, var(--color-content-secondary-bg), transparent 15%); background-color: color-mix(in srgb, var(--color-content-secondary-bg), transparent 15%);

11
TangerineUI-lagoon.css
View File

@ -3518,16 +3518,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
transform: scale(.9); transform: scale(.9);
} }
.app-body .load-gap, .app-body :is(.load-gap, .load-more) {
.app-body .load-more { background-color: var(--color-content-secondary-bg);
background-color: var(--color-accent-bg);
color: var(--color-accent); color: var(--color-accent);
border-bottom: 0; border-bottom: 0;
} }
.app-body .load-gap:hover, .app-body :is(.load-gap, .load-more):is(:active, :hover) {
.app-body .load-more:hover {
background-color: var(--color-accent-lines); background-color: var(--color-accent-lines);
} }
.app-body :is(.load-gap, .load-more) .icon-ellipsis-h {
background-image: var(--icon-ellipsis-column-link-active-accent);
}
.app-body .column-header__collapsible { .app-body .column-header__collapsible {
background-color: color-mix(in srgb, var(--color-content-secondary-bg), transparent 15%); background-color: color-mix(in srgb, var(--color-content-secondary-bg), transparent 15%);

11
TangerineUI-purple.css
View File

@ -3518,16 +3518,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
transform: scale(.9); transform: scale(.9);
} }
.app-body .load-gap, .app-body :is(.load-gap, .load-more) {
.app-body .load-more { background-color: var(--color-content-secondary-bg);
background-color: var(--color-accent-bg);
color: var(--color-accent); color: var(--color-accent);
border-bottom: 0; border-bottom: 0;
} }
.app-body .load-gap:hover, .app-body :is(.load-gap, .load-more):is(:active, :hover) {
.app-body .load-more:hover {
background-color: var(--color-accent-lines); background-color: var(--color-accent-lines);
} }
.app-body :is(.load-gap, .load-more) .icon-ellipsis-h {
background-image: var(--icon-ellipsis-column-link-active-accent);
}
.app-body .column-header__collapsible { .app-body .column-header__collapsible {
background-color: color-mix(in srgb, var(--color-content-secondary-bg), transparent 15%); background-color: color-mix(in srgb, var(--color-content-secondary-bg), transparent 15%);

11
TangerineUI.css
View File

@ -3518,16 +3518,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
transform: scale(.9); transform: scale(.9);
} }
.app-body .load-gap, .app-body :is(.load-gap, .load-more) {
.app-body .load-more { background-color: var(--color-content-secondary-bg);
background-color: var(--color-accent-bg);
color: var(--color-accent); color: var(--color-accent);
border-bottom: 0; border-bottom: 0;
} }
.app-body .load-gap:hover, .app-body :is(.load-gap, .load-more):is(:active, :hover) {
.app-body .load-more:hover {
background-color: var(--color-accent-lines); background-color: var(--color-accent-lines);
} }
.app-body :is(.load-gap, .load-more) .icon-ellipsis-h {
background-image: var(--icon-ellipsis-column-link-active-accent);
}
.app-body .column-header__collapsible { .app-body .column-header__collapsible {
background-color: color-mix(in srgb, var(--color-content-secondary-bg), transparent 15%); background-color: color-mix(in srgb, var(--color-content-secondary-bg), transparent 15%);