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

Added translucency to mobile bottom toolbar

Browse source
This commit is contained in:
Niléane 2024-02-19 15:32:27 +01:00
commit 9b63e9a82e
No known key found for this signature in database
3 changed files with 33 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

14
TangerineUI-cherry.css
View file

@ -3648,9 +3648,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
padding-bottom: env(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
flex-direction: row; flex-direction: row;
overflow-x: auto; overflow-x: auto;
background-color: var(--color-content-bg); background-color: rgba(255, 255, 255, 0.75);
border-top: 1px solid var(--color-lines); border-top: 1px solid var(--color-lines-translucent);
border-left: 0; border-left: 0;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
} }
.app-body .columns-area__panels__pane--navigational .navigation-panel::before { .app-body .columns-area__panels__pane--navigational .navigation-panel::before {
content: " "; content: " ";
@ -3763,7 +3765,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
margin-left: -55px; margin-left: -55px;
} }
} }
@media screen and (max-width:1174px) {
@media (prefers-color-scheme: dark) {
.app-body .columns-area__panels__pane--navigational .navigation-panel {
background-color: rgba(3, 3, 3, .65);
}
}
}
/* "Trending Now" block at the bottom of the navigation panel */ /* "Trending Now" block at the bottom of the navigation panel */
.app-body .getting-started__trends { .app-body .getting-started__trends {
padding: 0; padding: 0;

14
TangerineUI-purple.css
View file

@ -3648,9 +3648,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
padding-bottom: env(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
flex-direction: row; flex-direction: row;
overflow-x: auto; overflow-x: auto;
background-color: var(--color-content-bg); background-color: rgba(255, 255, 255, 0.75);
border-top: 1px solid var(--color-lines); border-top: 1px solid var(--color-lines-translucent);
border-left: 0; border-left: 0;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
} }
.app-body .columns-area__panels__pane--navigational .navigation-panel::before { .app-body .columns-area__panels__pane--navigational .navigation-panel::before {
content: " "; content: " ";
@ -3763,7 +3765,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
margin-left: -55px; margin-left: -55px;
} }
} }
@media screen and (max-width:1174px) {
@media (prefers-color-scheme: dark) {
.app-body .columns-area__panels__pane--navigational .navigation-panel {
background-color: rgba(3, 3, 3, .65);
}
}
}
/* "Trending Now" block at the bottom of the navigation panel */ /* "Trending Now" block at the bottom of the navigation panel */
.app-body .getting-started__trends { .app-body .getting-started__trends {
padding: 0; padding: 0;

14
TangerineUI.css
View file

@ -3648,9 +3648,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
padding-bottom: env(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
flex-direction: row; flex-direction: row;
overflow-x: auto; overflow-x: auto;
background-color: var(--color-content-bg); background-color: rgba(255, 255, 255, 0.75);
border-top: 1px solid var(--color-lines); border-top: 1px solid var(--color-lines-translucent);
border-left: 0; border-left: 0;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
} }
.app-body .columns-area__panels__pane--navigational .navigation-panel::before { .app-body .columns-area__panels__pane--navigational .navigation-panel::before {
content: " "; content: " ";
@ -3763,7 +3765,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
margin-left: -55px; margin-left: -55px;
} }
} }
@media screen and (max-width:1174px) {
@media (prefers-color-scheme: dark) {
.app-body .columns-area__panels__pane--navigational .navigation-panel {
background-color: rgba(3, 3, 3, .65);
}
}
}
/* "Trending Now" block at the bottom of the navigation panel */ /* "Trending Now" block at the bottom of the navigation panel */
.app-body .getting-started__trends { .app-body .getting-started__trends {
padding: 0; padding: 0;