added privacy switches and documents, assets and local storage for already visited POIs
This commit is contained in:
Florian Zumpe
@@ -575,3 +575,252 @@ button,
|
||||
transition-duration: .01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
.info-button {
|
||||
position: fixed;
|
||||
top: calc(env(safe-area-inset-top) + .45rem);
|
||||
right: max(.65rem, env(safe-area-inset-right));
|
||||
z-index: 10001;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: var(--icon-button-size);
|
||||
height: var(--icon-button-size);
|
||||
padding: 0;
|
||||
border: 2px solid rgba(255, 255, 255, .9);
|
||||
border-radius: 50%;
|
||||
background: var(--primary-dark);
|
||||
color: #fff;
|
||||
box-shadow: 0 .15rem .55rem rgba(0, 0, 0, .28);
|
||||
font-size: 1.45rem;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.info-button:focus-visible {
|
||||
outline: .2rem solid #fff;
|
||||
outline-offset: .15rem;
|
||||
}
|
||||
|
||||
.app-page > header:not(.has-back-button) h1 {
|
||||
padding-right: calc(var(--icon-button-size) + 1rem);
|
||||
padding-left: calc(var(--icon-button-size) + 1rem);
|
||||
}
|
||||
|
||||
.switch-row {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: .85rem;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: .75rem;
|
||||
border: 1px solid #c8d3ca;
|
||||
border-radius: .65rem;
|
||||
background: #fff;
|
||||
color: var(--text);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.switch-row > span:first-child {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: .2rem;
|
||||
}
|
||||
|
||||
.switch-row small {
|
||||
color: var(--muted);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.switch-row > input {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.switch-track {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 3.25rem;
|
||||
height: 1.8rem;
|
||||
border: 2px solid #6b786e;
|
||||
border-radius: 999px;
|
||||
background: #d9ded9;
|
||||
transition: background-color 160ms ease, border-color 160ms ease;
|
||||
}
|
||||
|
||||
.switch-track::after {
|
||||
position: absolute;
|
||||
top: .15rem;
|
||||
left: .15rem;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
box-shadow: 0 .08rem .2rem rgba(0, 0, 0, .35);
|
||||
content: "";
|
||||
transition: transform 160ms ease;
|
||||
}
|
||||
|
||||
.switch-row > input:checked + .switch-track {
|
||||
border-color: var(--primary-dark);
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
.switch-row > input:checked + .switch-track::after {
|
||||
transform: translateX(1.45rem);
|
||||
}
|
||||
|
||||
.switch-row > input:focus-visible + .switch-track {
|
||||
outline: .2rem solid var(--focus);
|
||||
outline-offset: .15rem;
|
||||
}
|
||||
|
||||
.switch-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .72;
|
||||
}
|
||||
|
||||
.compact-switch {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.info-dialog {
|
||||
width: min(48rem, calc(100% - 1.5rem));
|
||||
max-width: 48rem;
|
||||
height: min(48rem, calc(100dvh - 1.5rem));
|
||||
max-height: calc(100dvh - 1.5rem);
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
border-radius: .85rem;
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
box-shadow: 0 .8rem 2.5rem rgba(0, 0, 0, .35);
|
||||
}
|
||||
|
||||
.info-dialog::backdrop {
|
||||
background: rgba(12, 20, 14, .72);
|
||||
backdrop-filter: blur(.15rem);
|
||||
}
|
||||
|
||||
.info-dialog-shell {
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.info-dialog-header {
|
||||
display: grid;
|
||||
grid-template-columns: var(--icon-button-size) minmax(0, 1fr) var(--icon-button-size);
|
||||
align-items: center;
|
||||
gap: .4rem;
|
||||
padding: max(.4rem, env(safe-area-inset-top)) .5rem .4rem;
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.info-dialog-header h2 {
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-size: 1.15rem;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.info-dialog-header button {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: var(--icon-button-size);
|
||||
height: var(--icon-button-size);
|
||||
padding: 0;
|
||||
border: 1px solid rgba(255, 255, 255, .55);
|
||||
border-radius: .45rem;
|
||||
background: var(--primary-dark);
|
||||
color: #fff;
|
||||
font-size: 1.8rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.info-dialog-content {
|
||||
min-height: 0;
|
||||
padding: 1rem max(1rem, env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
touch-action: pan-y;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.info-menu {
|
||||
display: grid;
|
||||
gap: .75rem;
|
||||
}
|
||||
|
||||
.info-menu button {
|
||||
min-height: 3.5rem;
|
||||
padding: .85rem 1rem;
|
||||
border: 1px solid #aebcaf;
|
||||
border-radius: .65rem;
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
box-shadow: 0 .12rem .35rem rgba(0, 0, 0, .08);
|
||||
font-weight: 700;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.info-page {
|
||||
line-height: 1.55;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.info-page h3 {
|
||||
margin: 1.4rem 0 .45rem;
|
||||
color: var(--primary-dark);
|
||||
}
|
||||
|
||||
.info-page h3:first-of-type {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
.info-page code {
|
||||
padding: .08rem .25rem;
|
||||
border-radius: .2rem;
|
||||
background: #e8eee7;
|
||||
}
|
||||
|
||||
.legal-warning {
|
||||
margin: 0 0 1rem;
|
||||
padding: .8rem;
|
||||
border-left: .35rem solid var(--notice-border);
|
||||
border-radius: .25rem;
|
||||
background: var(--notice);
|
||||
}
|
||||
|
||||
@media (max-width: 34rem) {
|
||||
.info-dialog {
|
||||
width: 100%;
|
||||
height: 100dvh;
|
||||
max-height: 100dvh;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.switch-row {
|
||||
gap: .55rem;
|
||||
padding: .65rem;
|
||||
}
|
||||
}
|
||||
|
||||
Vendored
+56
@@ -55,3 +55,59 @@ body {
|
||||
background: #fee;
|
||||
color: #701010;
|
||||
}
|
||||
|
||||
#bootstrap-screen {
|
||||
align-items: start;
|
||||
overflow-y: auto;
|
||||
padding-top: calc(1rem + env(safe-area-inset-top));
|
||||
padding-bottom: calc(1rem + env(safe-area-inset-bottom));
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
#bootstrap-screen.ready {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#bootstrap-screen > section {
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
.privacy-summary {
|
||||
display: grid;
|
||||
gap: .65rem;
|
||||
margin: 1rem 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.privacy-summary > p {
|
||||
margin: 0;
|
||||
padding: .7rem;
|
||||
border-left: .35rem solid #315d3a;
|
||||
border-radius: .25rem;
|
||||
background: #eef4e9;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.storage-cleanup-status,
|
||||
.bootstrap-ready {
|
||||
margin: .85rem 0;
|
||||
padding: .75rem;
|
||||
border-radius: .5rem;
|
||||
background: #fff8d6;
|
||||
color: #493700;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.bootstrap-ready {
|
||||
border: 2px solid #315d3a;
|
||||
background: #eef4e9;
|
||||
color: #1f3022;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#bootstrap-enter,
|
||||
#bootstrap-retry {
|
||||
min-height: 3rem;
|
||||
margin: .35rem;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user