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

Follow up on simplified selector logic for the bottom navigation bar

Browse source
This commit is contained in:
Niléane 2024-10-01 15:49:59 +02:00
parent 82b8c81fcd
commit e97cd1e541
No known key found for this signature in database
4 changed files with 40 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
TangerineUI-cherry.css
View file

@ -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,

30
TangerineUI-lagoon.css
View file

@ -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,

30
TangerineUI-purple.css
View file

@ -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,

30
TangerineUI.css
View file

@ -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,