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

Using color-mix() instead of a seperate translucent color value (this time for column headers)

Browse source
This commit is contained in:
Niléane 2024-03-12 18:35:08 +01:00
commit e46bcad2ba
No known key found for this signature in database
3 changed files with 3 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

8
TangerineUI-cherry.css
View file

@ -3156,7 +3156,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
} }
.app-body .column-header, .app-body .column-header,
.app-body .column-back-button { .app-body .column-back-button {
background-color: rgba(255, 255, 255, .9); background-color: color-mix(in srgb, var(--color-content-bg), transparent 15%);
color: var(--color-content-fg); color: var(--color-content-fg);
border-right: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines);
border-left: 1px solid var(--color-lines); border-left: 1px solid var(--color-lines);
@ -3170,12 +3170,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
-webkit-backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
} }
@media (prefers-color-scheme: dark) {
.app-body .column-header,
.app-body .column-back-button {
background-color: rgba(3, 3, 3, .65);
}
}
.app-body .column-header__button, .app-body .column-header__button,
.app-body .column-header__back-button { .app-body .column-header__back-button {
background-color: transparent; background-color: transparent;

8
TangerineUI-purple.css
View file

@ -3156,7 +3156,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
} }
.app-body .column-header, .app-body .column-header,
.app-body .column-back-button { .app-body .column-back-button {
background-color: rgba(255, 255, 255, .9); background-color: color-mix(in srgb, var(--color-content-bg), transparent 15%);
color: var(--color-content-fg); color: var(--color-content-fg);
border-right: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines);
border-left: 1px solid var(--color-lines); border-left: 1px solid var(--color-lines);
@ -3170,12 +3170,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
-webkit-backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
} }
@media (prefers-color-scheme: dark) {
.app-body .column-header,
.app-body .column-back-button {
background-color: rgba(3, 3, 3, .65);
}
}
.app-body .column-header__button, .app-body .column-header__button,
.app-body .column-header__back-button { .app-body .column-header__back-button {
background-color: transparent; background-color: transparent;

8
TangerineUI.css
View file

@ -3156,7 +3156,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
} }
.app-body .column-header, .app-body .column-header,
.app-body .column-back-button { .app-body .column-back-button {
background-color: rgba(255, 255, 255, .9); background-color: color-mix(in srgb, var(--color-content-bg), transparent 15%);
color: var(--color-content-fg); color: var(--color-content-fg);
border-right: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines);
border-left: 1px solid var(--color-lines); border-left: 1px solid var(--color-lines);
@ -3170,12 +3170,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
-webkit-backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
} }
@media (prefers-color-scheme: dark) {
.app-body .column-header,
.app-body .column-back-button {
background-color: rgba(3, 3, 3, .65);
}
}
.app-body .column-header__button, .app-body .column-header__button,
.app-body .column-header__back-button { .app-body .column-header__back-button {
background-color: transparent; background-color: transparent;