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

Fixed #49: top bar wasn't displayed on Firefox for Android

Browse source
This commit is contained in:
Niléane 2023-07-31 19:18:38 +02:00
commit 0236ce5e46
No known key found for this signature in database
4 changed files with 60 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,5 @@
/* TangerineUI 🍊 for Mastodon ・ Purple variant 🪻
version: 1.8.1
version: 1.8.2
A Tangerine redesign for Mastodon's Web UI.
https://github.com/nileane/TangerineUI-for-Mastodon/
@ -1603,12 +1603,19 @@ body.layout-single-column {
}
.layout-single-column .tabs-bar__wrapper {
box-shadow: none;
display: none;
display: block;
margin-bottom: -2px;
border-radius: 0;
height: 45px;
border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.layout-single-column .tabs-bar__wrapper:has(> #tabs-bar__portal) {
display: none;
}
.layout-single-column .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-back-button),
.layout-single-column .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-header__wrapper) { /* Column header (2nd top bar) is displayed only if there's something inside */
display: block;
}
.layout-single-column .column-header,
.layout-single-column .column-back-button,
.layout-single-column .column-header__button,
@ -1622,20 +1629,19 @@ body.layout-single-column {
backdrop-filter: blur(20px);
background-color: rgba(242, 239, 245, .75);
content: "";
height: 55px;
height: 100px;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.layout-single-column .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-back-button):after,
.layout-single-column .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-header__wrapper):after { /* Backdrop blur has double the height only in cases where there's 2 top bars present */
height: 100px;
.layout-single-column .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal)::after {
height: 55px;
}
.layout-single-column .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-back-button),
.layout-single-column .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-header__wrapper) { /* Column header (2nd top bar) is displayed only if there's something inside */
display: block;
.layout-single-column .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-back-button)::after,
.layout-single-column .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-header__wrapper)::after { /* Backdrop blur has double the height only in cases where there's 2 top bars present */
height: 100px;
}
.layout-single-column .column-header__collapsible:not(.collapsed) { /* Remove margin between column settings and column header */
margin-top: 0;

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

@ -1,5 +1,5 @@
/* TangerineUI 🍊 for Mastodon
version: 1.8.1
version: 1.8.2
A Tangerine redesign for Mastodon's Web UI.
https://github.com/nileane/TangerineUI-for-Mastodon/
@ -1603,12 +1603,19 @@ body.layout-single-column {
}
.layout-single-column .tabs-bar__wrapper {
box-shadow: none;
display: none;
display: block;
margin-bottom: -2px;
border-radius: 0;
height: 45px;
border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.layout-single-column .tabs-bar__wrapper:has(> #tabs-bar__portal) {
display: none;
}
.layout-single-column .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-back-button),
.layout-single-column .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-header__wrapper) { /* Column header (2nd top bar) is displayed only if there's something inside */
display: block;
}
.layout-single-column .column-header,
.layout-single-column .column-back-button,
.layout-single-column .column-header__button,
@ -1622,20 +1629,19 @@ body.layout-single-column {
backdrop-filter: blur(20px);
background-color: rgba(245, 242, 239, 0.75);
content: "";
height: 55px;
height: 100px;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.layout-single-column .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-back-button):after,
.layout-single-column .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-header__wrapper):after { /* Backdrop blur has double the height only in cases where there's 2 top bars present */
height: 100px;
.layout-single-column .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal)::after {
height: 55px;
}
.layout-single-column .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-back-button),
.layout-single-column .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-header__wrapper) { /* Column header (2nd top bar) is displayed only if there's something inside */
display: block;
.layout-single-column .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-back-button)::after,
.layout-single-column .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-header__wrapper)::after { /* Backdrop blur has double the height only in cases where there's 2 top bars present */
height: 100px;
}
.layout-single-column .column-header__collapsible:not(.collapsed) { /* Remove margin between column settings and column header */
margin-top: 0;