From e97cd1e541fce5c1a795cd7c2e7d57c9b3280189 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nile=CC=81ane?= Date: Tue, 1 Oct 2024 15:49:59 +0200 Subject: [PATCH] Follow up on simplified selector logic for the bottom navigation bar --- TangerineUI-cherry.css | 30 ++++++++++-------------------- TangerineUI-lagoon.css | 30 ++++++++++-------------------- TangerineUI-purple.css | 30 ++++++++++-------------------- TangerineUI.css | 30 ++++++++++-------------------- 4 files changed, 40 insertions(+), 80 deletions(-) diff --git a/TangerineUI-cherry.css b/TangerineUI-cherry.css index e408835..a830537 100644 --- a/TangerineUI-cherry.css +++ b/TangerineUI-cherry.css @@ -3974,12 +3974,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu display: flex; flex-flow: column; } -@media screen and (max-width:1174px) { - .app-body .navigation-panel__menu { - flex-flow: row; - overflow-x: auto; - } -} .app-body .column-link--transparent { color: var(--color-fg); } @@ -4131,6 +4125,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } + .app-body .navigation-panel__menu { + flex-flow: row; + overflow-x: auto; + mask-image: linear-gradient(90deg, black 80%, transparent 96%); + } .app-body .navigation-panel :is(.column-link, .navigation-panel__legal), .app-body .navigation-panel .column-link:is(.active, .active:hover, :active), .app-body .navigation-panel .navigation-panel__menu::after { @@ -4150,16 +4149,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .navigation-panel .navigation-panel__menu::after { content: " "; } - .app-body .navigation-panel .navigation-panel__menu::before { - content: " "; - position: fixed; - right: 0; - bottom: 0; - width: 17vw; - height: calc(4.2em + var(--safe-area-bottom) - 1px); - background-image: linear-gradient(to right, transparent, var(--color-content-bg) 75.63%); - background-color: transparent; - z-index: 2; + .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(3)), + .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(4)), + .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(5)), + .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(6)) { + mask-image: none; } .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(3), .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(3) ~ *, @@ -4171,10 +4165,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(6) ~ * { flex: 50vw; } - .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(3))::before, - .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(4))::before, - .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(5))::before, - .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(6))::before, .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(3))::after, .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(4))::after, .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(5))::after, diff --git a/TangerineUI-lagoon.css b/TangerineUI-lagoon.css index a4adbf4..d9e667c 100644 --- a/TangerineUI-lagoon.css +++ b/TangerineUI-lagoon.css @@ -3974,12 +3974,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu display: flex; flex-flow: column; } -@media screen and (max-width:1174px) { - .app-body .navigation-panel__menu { - flex-flow: row; - overflow-x: auto; - } -} .app-body .column-link--transparent { color: var(--color-fg); } @@ -4131,6 +4125,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } + .app-body .navigation-panel__menu { + flex-flow: row; + overflow-x: auto; + mask-image: linear-gradient(90deg, black 80%, transparent 96%); + } .app-body .navigation-panel :is(.column-link, .navigation-panel__legal), .app-body .navigation-panel .column-link:is(.active, .active:hover, :active), .app-body .navigation-panel .navigation-panel__menu::after { @@ -4150,16 +4149,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .navigation-panel .navigation-panel__menu::after { content: " "; } - .app-body .navigation-panel .navigation-panel__menu::before { - content: " "; - position: fixed; - right: 0; - bottom: 0; - width: 17vw; - height: calc(4.2em + var(--safe-area-bottom) - 1px); - background-image: linear-gradient(to right, transparent, var(--color-content-bg) 75.63%); - background-color: transparent; - z-index: 2; + .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(3)), + .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(4)), + .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(5)), + .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(6)) { + mask-image: none; } .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(3), .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(3) ~ *, @@ -4171,10 +4165,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(6) ~ * { flex: 50vw; } - .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(3))::before, - .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(4))::before, - .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(5))::before, - .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(6))::before, .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(3))::after, .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(4))::after, .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(5))::after, diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index 02c281d..e637ed8 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -3974,12 +3974,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu display: flex; flex-flow: column; } -@media screen and (max-width:1174px) { - .app-body .navigation-panel__menu { - flex-flow: row; - overflow-x: auto; - } -} .app-body .column-link--transparent { color: var(--color-fg); } @@ -4131,6 +4125,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } + .app-body .navigation-panel__menu { + flex-flow: row; + overflow-x: auto; + mask-image: linear-gradient(90deg, black 80%, transparent 96%); + } .app-body .navigation-panel :is(.column-link, .navigation-panel__legal), .app-body .navigation-panel .column-link:is(.active, .active:hover, :active), .app-body .navigation-panel .navigation-panel__menu::after { @@ -4150,16 +4149,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .navigation-panel .navigation-panel__menu::after { content: " "; } - .app-body .navigation-panel .navigation-panel__menu::before { - content: " "; - position: fixed; - right: 0; - bottom: 0; - width: 17vw; - height: calc(4.2em + var(--safe-area-bottom) - 1px); - background-image: linear-gradient(to right, transparent, var(--color-content-bg) 75.63%); - background-color: transparent; - z-index: 2; + .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(3)), + .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(4)), + .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(5)), + .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(6)) { + mask-image: none; } .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(3), .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(3) ~ *, @@ -4171,10 +4165,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(6) ~ * { flex: 50vw; } - .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(3))::before, - .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(4))::before, - .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(5))::before, - .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(6))::before, .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(3))::after, .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(4))::after, .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(5))::after, diff --git a/TangerineUI.css b/TangerineUI.css index e2b1d59..c271f55 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -3974,12 +3974,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu display: flex; flex-flow: column; } -@media screen and (max-width:1174px) { - .app-body .navigation-panel__menu { - flex-flow: row; - overflow-x: auto; - } -} .app-body .column-link--transparent { color: var(--color-fg); } @@ -4131,6 +4125,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } + .app-body .navigation-panel__menu { + flex-flow: row; + overflow-x: auto; + mask-image: linear-gradient(90deg, black 80%, transparent 96%); + } .app-body .navigation-panel :is(.column-link, .navigation-panel__legal), .app-body .navigation-panel .column-link:is(.active, .active:hover, :active), .app-body .navigation-panel .navigation-panel__menu::after { @@ -4150,16 +4149,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .navigation-panel .navigation-panel__menu::after { content: " "; } - .app-body .navigation-panel .navigation-panel__menu::before { - content: " "; - position: fixed; - right: 0; - bottom: 0; - width: 17vw; - height: calc(4.2em + var(--safe-area-bottom) - 1px); - background-image: linear-gradient(to right, transparent, var(--color-content-bg) 75.63%); - background-color: transparent; - z-index: 2; + .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(3)), + .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(4)), + .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(5)), + .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(6)) { + mask-image: none; } .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(3), .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(3) ~ *, @@ -4171,10 +4165,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(6) ~ * { flex: 50vw; } - .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(3))::before, - .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(4))::before, - .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(5))::before, - .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(6))::before, .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(3))::after, .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(4))::after, .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(5))::after,