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

Redesigned, more compact top toolbar on mobile

Browse source
This commit is contained in:
Niléane 2024-02-14 17:52:32 +01:00
parent e80654a5a7
commit a42bf987ba
No known key found for this signature in database
3 changed files with 57 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
TangerineUI-cherry.css
View file

@ -3089,15 +3089,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
background-color: transparent; background-color: transparent;
border-bottom: 0; border-bottom: 0;
} }
.app-body:not(.layout-multiple-columns) .ui__header__logo { .app-body:not(.layout-multiple-columns) .ui__header .ui__header__logo {
margin: 0;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.app-body:not(.layout-multiple-columns) .ui__header:has(.ui__header__links > a[href="/auth/sign_in"]) .ui__header__logo {
position: static;
transform: none;
margin-left: 3px; margin-left: 3px;
} }
.app-body:not(.layout-multiple-columns) .tabs-bar__wrapper { .app-body:not(.layout-multiple-columns) .tabs-bar__wrapper {
@ -3106,14 +3098,20 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
margin-bottom: -2px; margin-bottom: -2px;
border-radius: 0; border-radius: 0;
height: 45px; height: 45px;
border-bottom: 1px solid rgba(0, 0, 0, .1); border-bottom: 0;
} }
.app-body:not(.layout-multiple-columns) .tabs-bar__wrapper:has(> #tabs-bar__portal) { .app-body:not(.layout-multiple-columns) .tabs-bar__wrapper:has(> #tabs-bar__portal) {
display: none; display: none;
} }
.app-body:not(.layout-multiple-columns) .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-back-button), .app-body:not(.layout-multiple-columns) .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-back-button),
.app-body:not(.layout-multiple-columns) .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-header__wrapper) { /* Column header (2nd top bar) is displayed only if there's something inside */ .app-body:not(.layout-multiple-columns):has(.ui__header .ui__header__links .button.button-secondary[href="/publish"]) .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; display: block;
top: 0;
left: 40px;
right: 105px;
height: 55px;
position: fixed;
z-index: 3;
} }
.app-body:not(.layout-multiple-columns) .app-body:not(.layout-multiple-columns)
:is( :is(
@ -3123,31 +3121,31 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
.column-header__back-button .column-header__back-button
) { ) {
background-color: transparent; background-color: transparent;
height: 50px; height: 55px;
border: 0; border: 0;
margin: 0; margin: 0;
} }
.app-body .column-header__icon {
display: none;
}
.app-body:not(.layout-multiple-columns) .ui::after { /* Set a backdrop blur background to both top bars */ .app-body:not(.layout-multiple-columns) .ui::after { /* Set a backdrop blur background to both top bars */
-webkit-backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
background-color: rgba(255, 255, 255, 0.75); background-color: rgba(255, 255, 255, 0.75);
border-bottom: 1px solid var(--color-lines-translucent);
content: ""; content: "";
height: 100px; height: 55px;
left: 0; left: 0;
position: fixed; position: fixed;
top: 0; top: 0;
width: 100%; width: 100%;
z-index: 1; z-index: 1;
} }
.app-body:not(.layout-multiple-columns) .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal)::after {
height: 55px;
}
.app-body:not(.layout-multiple-columns) .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-back-button)::after,
.app-body:not(.layout-multiple-columns) .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;
}
.app-body:not(.layout-multiple-columns) .column-header__collapsible { /* Remove margin between column settings and column header */ .app-body:not(.layout-multiple-columns) .column-header__collapsible { /* Remove margin between column settings and column header */
margin-top: -4px; margin-top: 1px;
position: fixed;
left: 0;
right: 0;
} }
.app-body:not(.layout-multiple-columns) .column-header__collapsible:not(.collapsed) { .app-body:not(.layout-multiple-columns) .column-header__collapsible:not(.collapsed) {
border-bottom: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines);
@ -3403,10 +3401,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
} }
@media screen and (max-width:1174px) { @media screen and (max-width:1174px) {
.layout-single-column .ui__header__links .button.button-secondary[href="/publish"] {
position: absolute;
right: 12px;
}
.layout-single-column .ui__header__links { .layout-single-column .ui__header__links {
padding-left: 12px; padding-left: 12px;
} }

44
TangerineUI-purple.css
View file

@ -3089,15 +3089,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
background-color: transparent; background-color: transparent;
border-bottom: 0; border-bottom: 0;
} }
.app-body:not(.layout-multiple-columns) .ui__header__logo { .app-body:not(.layout-multiple-columns) .ui__header .ui__header__logo {
margin: 0;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.app-body:not(.layout-multiple-columns) .ui__header:has(.ui__header__links > a[href="/auth/sign_in"]) .ui__header__logo {
position: static;
transform: none;
margin-left: 3px; margin-left: 3px;
} }
.app-body:not(.layout-multiple-columns) .tabs-bar__wrapper { .app-body:not(.layout-multiple-columns) .tabs-bar__wrapper {
@ -3106,14 +3098,20 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
margin-bottom: -2px; margin-bottom: -2px;
border-radius: 0; border-radius: 0;
height: 45px; height: 45px;
border-bottom: 1px solid rgba(0, 0, 0, .1); border-bottom: 0;
} }
.app-body:not(.layout-multiple-columns) .tabs-bar__wrapper:has(> #tabs-bar__portal) { .app-body:not(.layout-multiple-columns) .tabs-bar__wrapper:has(> #tabs-bar__portal) {
display: none; display: none;
} }
.app-body:not(.layout-multiple-columns) .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-back-button), .app-body:not(.layout-multiple-columns) .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-back-button),
.app-body:not(.layout-multiple-columns) .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-header__wrapper) { /* Column header (2nd top bar) is displayed only if there's something inside */ .app-body:not(.layout-multiple-columns):has(.ui__header .ui__header__links .button.button-secondary[href="/publish"]) .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; display: block;
top: 0;
left: 40px;
right: 105px;
height: 55px;
position: fixed;
z-index: 3;
} }
.app-body:not(.layout-multiple-columns) .app-body:not(.layout-multiple-columns)
:is( :is(
@ -3123,31 +3121,31 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
.column-header__back-button .column-header__back-button
) { ) {
background-color: transparent; background-color: transparent;
height: 50px; height: 55px;
border: 0; border: 0;
margin: 0; margin: 0;
} }
.app-body .column-header__icon {
display: none;
}
.app-body:not(.layout-multiple-columns) .ui::after { /* Set a backdrop blur background to both top bars */ .app-body:not(.layout-multiple-columns) .ui::after { /* Set a backdrop blur background to both top bars */
-webkit-backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
background-color: rgba(255, 255, 255, 0.75); background-color: rgba(255, 255, 255, 0.75);
border-bottom: 1px solid var(--color-lines-translucent);
content: ""; content: "";
height: 100px; height: 55px;
left: 0; left: 0;
position: fixed; position: fixed;
top: 0; top: 0;
width: 100%; width: 100%;
z-index: 1; z-index: 1;
} }
.app-body:not(.layout-multiple-columns) .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal)::after {
height: 55px;
}
.app-body:not(.layout-multiple-columns) .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-back-button)::after,
.app-body:not(.layout-multiple-columns) .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;
}
.app-body:not(.layout-multiple-columns) .column-header__collapsible { /* Remove margin between column settings and column header */ .app-body:not(.layout-multiple-columns) .column-header__collapsible { /* Remove margin between column settings and column header */
margin-top: -4px; margin-top: 1px;
position: fixed;
left: 0;
right: 0;
} }
.app-body:not(.layout-multiple-columns) .column-header__collapsible:not(.collapsed) { .app-body:not(.layout-multiple-columns) .column-header__collapsible:not(.collapsed) {
border-bottom: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines);
@ -3403,10 +3401,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
} }
@media screen and (max-width:1174px) { @media screen and (max-width:1174px) {
.layout-single-column .ui__header__links .button.button-secondary[href="/publish"] {
position: absolute;
right: 12px;
}
.layout-single-column .ui__header__links { .layout-single-column .ui__header__links {
padding-left: 12px; padding-left: 12px;
} }

44
TangerineUI.css
View file

@ -3089,15 +3089,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
background-color: transparent; background-color: transparent;
border-bottom: 0; border-bottom: 0;
} }
.app-body:not(.layout-multiple-columns) .ui__header__logo { .app-body:not(.layout-multiple-columns) .ui__header .ui__header__logo {
margin: 0;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.app-body:not(.layout-multiple-columns) .ui__header:has(.ui__header__links > a[href="/auth/sign_in"]) .ui__header__logo {
position: static;
transform: none;
margin-left: 3px; margin-left: 3px;
} }
.app-body:not(.layout-multiple-columns) .tabs-bar__wrapper { .app-body:not(.layout-multiple-columns) .tabs-bar__wrapper {
@ -3106,14 +3098,20 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
margin-bottom: -2px; margin-bottom: -2px;
border-radius: 0; border-radius: 0;
height: 45px; height: 45px;
border-bottom: 1px solid rgba(0, 0, 0, .1); border-bottom: 0;
} }
.app-body:not(.layout-multiple-columns) .tabs-bar__wrapper:has(> #tabs-bar__portal) { .app-body:not(.layout-multiple-columns) .tabs-bar__wrapper:has(> #tabs-bar__portal) {
display: none; display: none;
} }
.app-body:not(.layout-multiple-columns) .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-back-button), .app-body:not(.layout-multiple-columns) .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-back-button),
.app-body:not(.layout-multiple-columns) .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-header__wrapper) { /* Column header (2nd top bar) is displayed only if there's something inside */ .app-body:not(.layout-multiple-columns):has(.ui__header .ui__header__links .button.button-secondary[href="/publish"]) .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; display: block;
top: 0;
left: 40px;
right: 105px;
height: 55px;
position: fixed;
z-index: 3;
} }
.app-body:not(.layout-multiple-columns) .app-body:not(.layout-multiple-columns)
:is( :is(
@ -3123,31 +3121,31 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
.column-header__back-button .column-header__back-button
) { ) {
background-color: transparent; background-color: transparent;
height: 50px; height: 55px;
border: 0; border: 0;
margin: 0; margin: 0;
} }
.app-body .column-header__icon {
display: none;
}
.app-body:not(.layout-multiple-columns) .ui::after { /* Set a backdrop blur background to both top bars */ .app-body:not(.layout-multiple-columns) .ui::after { /* Set a backdrop blur background to both top bars */
-webkit-backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
background-color: rgba(255, 255, 255, 0.75); background-color: rgba(255, 255, 255, 0.75);
border-bottom: 1px solid var(--color-lines-translucent);
content: ""; content: "";
height: 100px; height: 55px;
left: 0; left: 0;
position: fixed; position: fixed;
top: 0; top: 0;
width: 100%; width: 100%;
z-index: 1; z-index: 1;
} }
.app-body:not(.layout-multiple-columns) .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal)::after {
height: 55px;
}
.app-body:not(.layout-multiple-columns) .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-back-button)::after,
.app-body:not(.layout-multiple-columns) .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;
}
.app-body:not(.layout-multiple-columns) .column-header__collapsible { /* Remove margin between column settings and column header */ .app-body:not(.layout-multiple-columns) .column-header__collapsible { /* Remove margin between column settings and column header */
margin-top: -4px; margin-top: 1px;
position: fixed;
left: 0;
right: 0;
} }
.app-body:not(.layout-multiple-columns) .column-header__collapsible:not(.collapsed) { .app-body:not(.layout-multiple-columns) .column-header__collapsible:not(.collapsed) {
border-bottom: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines);
@ -3403,10 +3401,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
} }
@media screen and (max-width:1174px) { @media screen and (max-width:1174px) {
.layout-single-column .ui__header__links .button.button-secondary[href="/publish"] {
position: absolute;
right: 12px;
}
.layout-single-column .ui__header__links { .layout-single-column .ui__header__links {
padding-left: 12px; padding-left: 12px;
} }