From 3b9977c3d6fb22175df1ad9fd598462cc135c11d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Thu, 16 Nov 2023 01:20:16 +0100 Subject: [PATCH] Added background blur to column header --- TangerineUI-purple.css | 22 ++++++++++++++----- TangerineUI.css | 22 ++++++++++++++----- .../layout-single-column.scss | 22 ++++++++++++++----- .../tangerineui/layout-single-column.scss | 22 ++++++++++++++----- 4 files changed, 64 insertions(+), 24 deletions(-) diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index be8533c..21ebd70 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -1905,7 +1905,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } .layout-single-column .column-header, .layout-single-column .column-back-button { - background: var(--color-content-bg); + background-color: rgba(255, 255, 255, .75); color: var(--color-content-fg); border-top: 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; height: 50px; 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__back-button { - background-color: var(--color-content-bg); + background-color: transparent; border: 0; } .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 { display: none; } - .layout-single-column .column-header__button.active, - .layout-single-column .column-header__button.active:hover, - .layout-single-column .column-header__button:hover { + .layout-single-column .column-header__button:is(.active, .active:hover, :hover), + .layout-single-column .column-header, + .layout-single-column .column-back-button { 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); } .layout-single-column .tabs-bar__wrapper { - border-color: rgba(255, 255, 255, .1); + border-color: var(--color-lines); } } } diff --git a/TangerineUI.css b/TangerineUI.css index 4feb0bb..f671965 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -1905,7 +1905,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } .layout-single-column .column-header, .layout-single-column .column-back-button { - background: var(--color-content-bg); + background-color: rgba(255, 255, 255, .75); color: var(--color-content-fg); border-top: 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; height: 50px; 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__back-button { - background-color: var(--color-content-bg); + background-color: transparent; border: 0; } .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 { display: none; } - .layout-single-column .column-header__button.active, - .layout-single-column .column-header__button.active:hover, - .layout-single-column .column-header__button:hover { + .layout-single-column .column-header__button:is(.active, .active:hover, :hover), + .layout-single-column .column-header, + .layout-single-column .column-back-button { 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); } .layout-single-column .tabs-bar__wrapper { - border-color: rgba(255, 255, 255, .1); + border-color: var(--color-lines); } } } diff --git a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss index be8533c..21ebd70 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss @@ -1905,7 +1905,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } .layout-single-column .column-header, .layout-single-column .column-back-button { - background: var(--color-content-bg); + background-color: rgba(255, 255, 255, .75); color: var(--color-content-fg); border-top: 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; height: 50px; 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__back-button { - background-color: var(--color-content-bg); + background-color: transparent; border: 0; } .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 { display: none; } - .layout-single-column .column-header__button.active, - .layout-single-column .column-header__button.active:hover, - .layout-single-column .column-header__button:hover { + .layout-single-column .column-header__button:is(.active, .active:hover, :hover), + .layout-single-column .column-header, + .layout-single-column .column-back-button { 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); } .layout-single-column .tabs-bar__wrapper { - border-color: rgba(255, 255, 255, .1); + border-color: var(--color-lines); } } } diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss index 4feb0bb..f671965 100644 --- a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss @@ -1905,7 +1905,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } .layout-single-column .column-header, .layout-single-column .column-back-button { - background: var(--color-content-bg); + background-color: rgba(255, 255, 255, .75); color: var(--color-content-fg); border-top: 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; height: 50px; 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__back-button { - background-color: var(--color-content-bg); + background-color: transparent; border: 0; } .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 { display: none; } - .layout-single-column .column-header__button.active, - .layout-single-column .column-header__button.active:hover, - .layout-single-column .column-header__button:hover { + .layout-single-column .column-header__button:is(.active, .active:hover, :hover), + .layout-single-column .column-header, + .layout-single-column .column-back-button { 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); } .layout-single-column .tabs-bar__wrapper { - border-color: rgba(255, 255, 255, .1); + border-color: var(--color-lines); } } }