extern/glance
1
0
Fork 0
mirror of https://github.com/glanceapp/glance.git synced 2024-12-24 16:09:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

Change implementation for the safe area

Browse Source
This commit is contained in:
Svilen Markov 2024-05-12 14:20:10 +01:00
parent 91c75518da
commit bc06578e53
1 changed files with 39 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
internal/assets/static/main.css
View File

@ -909,11 +909,15 @@ body {
.mobile-navigation {
display: block;
position: fixed;
height: var(--mobile-navigation-height);
bottom: 0;
transform: translateY(calc(100% - var(--mobile-navigation-height)));
left: var(--content-bounds-padding);
right: var(--content-bounds-padding);
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;
}
@ -923,50 +927,23 @@ body {
height: 2px;
}
.mobile-navigation:has(.mobile-navigation-page-links-input:checked) {
transform: translateY(0);
}
.mobile-navigation-page-links {
border-top: 1px solid var(--color-widget-content-border);
padding: 15px var(--content-bounds-padding);
display: flex;
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;
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 {
display: flex;
justify-content: space-around;
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),
@ -978,12 +955,13 @@ body {
.mobile-navigation-label {
display: flex;
flex: 1;
align-self: stretch;
max-width: 50px;
height: var(--mobile-navigation-height);
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 15px;
line-height: var(--mobile-navigation-height);
}
.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) {
:root {
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-h2 { font-size: var(--font-size-h2); }
.size-h3 { font-size: var(--font-size-h3); }