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

Added background blur to column header

Browse source
This commit is contained in:
Niléane 2023-11-16 01:20:16 +01:00
commit 3b9977c3d6
No known key found for this signature in database
4 changed files with 64 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

22
TangerineUI-purple.css
View file

@ -1905,7 +1905,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
} }
.layout-single-column .column-header, .layout-single-column .column-header,
.layout-single-column .column-back-button { .layout-single-column .column-back-button {
background: var(--color-content-bg); background-color: rgba(255, 255, 255, .75);
color: var(--color-content-fg); color: var(--color-content-fg);
border-top: 1px solid var(--color-lines); border-top: 1px solid var(--color-lines);
border-right: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines);
@ -1916,10 +1916,18 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
font-weight: bold; font-weight: bold;
height: 50px; height: 50px;
box-sizing: border-box; box-sizing: border-box;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
@media (prefers-color-scheme: dark) {
.layout-single-column .column-header,
.layout-single-column .column-back-button {
background-color: rgba(3, 3, 3, .65);
}
} }
.layout-single-column .column-header__button, .layout-single-column .column-header__button,
.layout-single-column .column-header__back-button { .layout-single-column .column-header__back-button {
background-color: var(--color-content-bg); background-color: transparent;
border: 0; border: 0;
} }
.layout-single-column .column-header__button { .layout-single-column .column-header__button {
@ -1944,10 +1952,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
.layout-single-column .column-back-button::after { .layout-single-column .column-back-button::after {
display: none; display: none;
} }
.layout-single-column .column-header__button.active, .layout-single-column .column-header__button:is(.active, .active:hover, :hover),
.layout-single-column .column-header__button.active:hover, .layout-single-column .column-header,
.layout-single-column .column-header__button:hover { .layout-single-column .column-back-button {
background-color: transparent; background-color: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
} }
} }
@ -2064,7 +2074,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
background-color: rgba(3, 3, 3, .65); background-color: rgba(3, 3, 3, .65);
} }
.layout-single-column .tabs-bar__wrapper { .layout-single-column .tabs-bar__wrapper {
border-color: rgba(255, 255, 255, .1); border-color: var(--color-lines);
} }
} }
} }

22
TangerineUI.css
View file

@ -1905,7 +1905,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
} }
.layout-single-column .column-header, .layout-single-column .column-header,
.layout-single-column .column-back-button { .layout-single-column .column-back-button {
background: var(--color-content-bg); background-color: rgba(255, 255, 255, .75);
color: var(--color-content-fg); color: var(--color-content-fg);
border-top: 1px solid var(--color-lines); border-top: 1px solid var(--color-lines);
border-right: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines);
@ -1916,10 +1916,18 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
font-weight: bold; font-weight: bold;
height: 50px; height: 50px;
box-sizing: border-box; box-sizing: border-box;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
@media (prefers-color-scheme: dark) {
.layout-single-column .column-header,
.layout-single-column .column-back-button {
background-color: rgba(3, 3, 3, .65);
}
} }
.layout-single-column .column-header__button, .layout-single-column .column-header__button,
.layout-single-column .column-header__back-button { .layout-single-column .column-header__back-button {
background-color: var(--color-content-bg); background-color: transparent;
border: 0; border: 0;
} }
.layout-single-column .column-header__button { .layout-single-column .column-header__button {
@ -1944,10 +1952,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
.layout-single-column .column-back-button::after { .layout-single-column .column-back-button::after {
display: none; display: none;
} }
.layout-single-column .column-header__button.active, .layout-single-column .column-header__button:is(.active, .active:hover, :hover),
.layout-single-column .column-header__button.active:hover, .layout-single-column .column-header,
.layout-single-column .column-header__button:hover { .layout-single-column .column-back-button {
background-color: transparent; background-color: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
} }
} }
@ -2064,7 +2074,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
background-color: rgba(3, 3, 3, .65); background-color: rgba(3, 3, 3, .65);
} }
.layout-single-column .tabs-bar__wrapper { .layout-single-column .tabs-bar__wrapper {
border-color: rgba(255, 255, 255, .1); border-color: var(--color-lines);
} }
} }
} }

22
mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss
View file

@ -1905,7 +1905,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
} }
.layout-single-column .column-header, .layout-single-column .column-header,
.layout-single-column .column-back-button { .layout-single-column .column-back-button {
background: var(--color-content-bg); background-color: rgba(255, 255, 255, .75);
color: var(--color-content-fg); color: var(--color-content-fg);
border-top: 1px solid var(--color-lines); border-top: 1px solid var(--color-lines);
border-right: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines);
@ -1916,10 +1916,18 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
font-weight: bold; font-weight: bold;
height: 50px; height: 50px;
box-sizing: border-box; box-sizing: border-box;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
@media (prefers-color-scheme: dark) {
.layout-single-column .column-header,
.layout-single-column .column-back-button {
background-color: rgba(3, 3, 3, .65);
}
} }
.layout-single-column .column-header__button, .layout-single-column .column-header__button,
.layout-single-column .column-header__back-button { .layout-single-column .column-header__back-button {
background-color: var(--color-content-bg); background-color: transparent;
border: 0; border: 0;
} }
.layout-single-column .column-header__button { .layout-single-column .column-header__button {
@ -1944,10 +1952,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
.layout-single-column .column-back-button::after { .layout-single-column .column-back-button::after {
display: none; display: none;
} }
.layout-single-column .column-header__button.active, .layout-single-column .column-header__button:is(.active, .active:hover, :hover),
.layout-single-column .column-header__button.active:hover, .layout-single-column .column-header,
.layout-single-column .column-header__button:hover { .layout-single-column .column-back-button {
background-color: transparent; background-color: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
} }
} }
@ -2064,7 +2074,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
background-color: rgba(3, 3, 3, .65); background-color: rgba(3, 3, 3, .65);
} }
.layout-single-column .tabs-bar__wrapper { .layout-single-column .tabs-bar__wrapper {
border-color: rgba(255, 255, 255, .1); border-color: var(--color-lines);
} }
} }
} }

22
mastodon/app/javascript/styles/tangerineui/layout-single-column.scss
View file

@ -1905,7 +1905,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
} }
.layout-single-column .column-header, .layout-single-column .column-header,
.layout-single-column .column-back-button { .layout-single-column .column-back-button {
background: var(--color-content-bg); background-color: rgba(255, 255, 255, .75);
color: var(--color-content-fg); color: var(--color-content-fg);
border-top: 1px solid var(--color-lines); border-top: 1px solid var(--color-lines);
border-right: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines);
@ -1916,10 +1916,18 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
font-weight: bold; font-weight: bold;
height: 50px; height: 50px;
box-sizing: border-box; box-sizing: border-box;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
@media (prefers-color-scheme: dark) {
.layout-single-column .column-header,
.layout-single-column .column-back-button {
background-color: rgba(3, 3, 3, .65);
}
} }
.layout-single-column .column-header__button, .layout-single-column .column-header__button,
.layout-single-column .column-header__back-button { .layout-single-column .column-header__back-button {
background-color: var(--color-content-bg); background-color: transparent;
border: 0; border: 0;
} }
.layout-single-column .column-header__button { .layout-single-column .column-header__button {
@ -1944,10 +1952,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
.layout-single-column .column-back-button::after { .layout-single-column .column-back-button::after {
display: none; display: none;
} }
.layout-single-column .column-header__button.active, .layout-single-column .column-header__button:is(.active, .active:hover, :hover),
.layout-single-column .column-header__button.active:hover, .layout-single-column .column-header,
.layout-single-column .column-header__button:hover { .layout-single-column .column-back-button {
background-color: transparent; background-color: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
} }
} }
@ -2064,7 +2074,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
background-color: rgba(3, 3, 3, .65); background-color: rgba(3, 3, 3, .65);
} }
.layout-single-column .tabs-bar__wrapper { .layout-single-column .tabs-bar__wrapper {
border-color: rgba(255, 255, 255, .1); border-color: var(--color-lines);
} }
} }
} }