mirror of
https://github.com/glanceapp/glance.git
synced 2024-12-25 00:19:24 +01:00
Change implementation for the safe area
This commit is contained in:
parent
91c75518da
commit
bc06578e53
@ -909,11 +909,15 @@ body {
|
|||||||
.mobile-navigation {
|
.mobile-navigation {
|
||||||
display: block;
|
display: block;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
height: var(--mobile-navigation-height);
|
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
transform: translateY(calc(100% - var(--mobile-navigation-height)));
|
||||||
left: var(--content-bounds-padding);
|
left: var(--content-bounds-padding);
|
||||||
right: var(--content-bounds-padding);
|
right: var(--content-bounds-padding);
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
|
background-color: var(--color-widget-background);
|
||||||
|
border: 1px solid var(--color-widget-content-border);
|
||||||
|
border-bottom: 0;
|
||||||
|
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
||||||
transition: transform .3s;
|
transition: transform .3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -923,50 +927,23 @@ body {
|
|||||||
height: 2px;
|
height: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mobile-navigation:has(.mobile-navigation-page-links-input:checked) {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
.mobile-navigation-page-links {
|
.mobile-navigation-page-links {
|
||||||
|
border-top: 1px solid var(--color-widget-content-border);
|
||||||
|
padding: 15px var(--content-bounds-padding);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
background-color: var(--color-widget-background);
|
|
||||||
border: 1px solid transparent;
|
|
||||||
border-top: 0;
|
|
||||||
border-bottom: 0;
|
|
||||||
padding: 0 var(--content-bounds-padding);
|
|
||||||
overflow-x: scroll;
|
overflow-x: scroll;
|
||||||
gap: 2.5rem;
|
gap: 2.5rem;
|
||||||
transition: border-color 0s .2s, transform .3s;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-navigation:has(.mobile-navigation-page-links-input:checked) .mobile-navigation-page-links {
|
|
||||||
border-color: var(--color-widget-content-border);
|
|
||||||
transition: transform .3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-navigation-page-links .nav-item {
|
|
||||||
line-height: var(--mobile-navigation-height);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile-navigation-icons {
|
.mobile-navigation-icons {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: var(--color-widget-background);
|
|
||||||
border: 1px solid var(--color-widget-content-border);
|
|
||||||
border-bottom-color: transparent;
|
|
||||||
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
|
||||||
transition: border .3s, border-radius .3s, transform .3s;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-navigation:has(.mobile-navigation-page-links-input:checked) .mobile-navigation-icons {
|
|
||||||
border-bottom-color: var(--color-widget-content-border);
|
|
||||||
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
|
||||||
transform: translateY(-100%);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body:has(.mobile-navigation-input[value="0"]:checked) .page-columns > :nth-child(1),
|
body:has(.mobile-navigation-input[value="0"]:checked) .page-columns > :nth-child(1),
|
||||||
@ -978,12 +955,13 @@ body {
|
|||||||
.mobile-navigation-label {
|
.mobile-navigation-label {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
align-self: stretch;
|
|
||||||
max-width: 50px;
|
max-width: 50px;
|
||||||
|
height: var(--mobile-navigation-height);
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
|
line-height: var(--mobile-navigation-height);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile-navigation-pill {
|
.mobile-navigation-pill {
|
||||||
@ -1026,6 +1004,32 @@ body {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1190px) and (display-mode: standalone) {
|
||||||
|
:root {
|
||||||
|
--safe-area-inset-bottom: env(safe-area-inset-bottom, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-navigation {
|
||||||
|
transform: translateY(calc(100% - var(--mobile-navigation-height) - var(--safe-area-inset-bottom)));
|
||||||
|
padding-bottom: var(--safe-area-inset-bottom);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-navigation-icons {
|
||||||
|
padding-bottom: var(--safe-area-inset-bottom);
|
||||||
|
transition: padding-bottom .3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-navigation-icons:has(.mobile-navigation-page-links-input:checked) {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (display-mode: standalone) {
|
||||||
|
body {
|
||||||
|
padding-top: env(safe-area-inset-top, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 550px) {
|
@media (max-width: 550px) {
|
||||||
:root {
|
:root {
|
||||||
font-size: 9px;
|
font-size: 9px;
|
||||||
@ -1044,29 +1048,6 @@ body {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (display-mode: standalone) {
|
|
||||||
body {
|
|
||||||
padding-top: env(safe-area-inset-top, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-navigation {
|
|
||||||
bottom: env(safe-area-inset-bottom, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-navigation::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
background: var(--color-widget-background);
|
|
||||||
height: calc(var(--mobile-navigation-height) + env(safe-area-inset-bottom, 0));
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
border: 1px solid var(--color-widget-content-border);
|
|
||||||
border-bottom: 0;
|
|
||||||
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.size-h1 { font-size: var(--font-size-h1); }
|
.size-h1 { font-size: var(--font-size-h1); }
|
||||||
.size-h2 { font-size: var(--font-size-h2); }
|
.size-h2 { font-size: var(--font-size-h2); }
|
||||||
.size-h3 { font-size: var(--font-size-h3); }
|
.size-h3 { font-size: var(--font-size-h3); }
|
||||||
|
Loading…
Reference in New Issue
Block a user