This commit is contained in:
+83
-63
@@ -19,7 +19,6 @@ body {
|
||||
color: var(--text);
|
||||
overscroll-behavior-y: contain;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
@@ -40,7 +39,6 @@ button,
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#app-shell,
|
||||
.app-page {
|
||||
min-height: 100dvh;
|
||||
@@ -49,7 +47,6 @@ button,
|
||||
.app-page {
|
||||
background: var(--page-background);
|
||||
}
|
||||
|
||||
#app-shell.has-navigation .app-page {
|
||||
padding-bottom: calc(var(--footer-height) + env(safe-area-inset-bottom));
|
||||
}
|
||||
@@ -67,7 +64,6 @@ button,
|
||||
color: #fff;
|
||||
box-shadow: 0 .15rem .5rem rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
.app-page > header.has-back-button {
|
||||
grid-template-columns: var(--icon-button-size) minmax(0, 1fr) var(--icon-button-size);
|
||||
gap: .5rem;
|
||||
@@ -88,7 +84,6 @@ button,
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.app-page > header .back-button.ui-button {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
@@ -108,7 +103,6 @@ button,
|
||||
height: 1.25rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: min(48rem, 100%);
|
||||
box-sizing: border-box;
|
||||
@@ -123,7 +117,6 @@ button,
|
||||
border-radius: .25rem;
|
||||
background: var(--notice);
|
||||
}
|
||||
|
||||
#routes-page .content > section + section {
|
||||
margin-top: 2rem;
|
||||
padding-top: 1.25rem;
|
||||
@@ -147,7 +140,6 @@ button,
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: .35rem;
|
||||
}
|
||||
|
||||
#route-search {
|
||||
width: 100%;
|
||||
min-height: 3rem;
|
||||
@@ -170,7 +162,6 @@ button,
|
||||
min-height: 3rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#all-routes-summary {
|
||||
margin: .75rem 0;
|
||||
color: var(--muted);
|
||||
@@ -189,7 +180,6 @@ button,
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.route-list button {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
@@ -214,7 +204,6 @@ button,
|
||||
.route-list button > small {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.route-list button > small {
|
||||
margin-top: .25rem;
|
||||
font-weight: 600;
|
||||
@@ -230,12 +219,10 @@ button,
|
||||
cursor: progress;
|
||||
opacity: .65;
|
||||
}
|
||||
|
||||
#poi-list button {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#poi-list button > strong,
|
||||
#poi-list button > span:not(.poi-proximity) {
|
||||
grid-column: 1;
|
||||
@@ -260,14 +247,12 @@ button,
|
||||
transition: transform 180ms linear;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.poi-proximity small {
|
||||
color: var(--text);
|
||||
font-size: .8rem;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#poi-list button[aria-current="step"] {
|
||||
border-color: var(--primary);
|
||||
background: #e7f1e9;
|
||||
@@ -288,7 +273,6 @@ button,
|
||||
background: var(--surface);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
#route-page dl {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
@@ -318,7 +302,6 @@ button,
|
||||
min-width: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#route-page fieldset {
|
||||
display: grid;
|
||||
padding: 0;
|
||||
@@ -340,7 +323,6 @@ button,
|
||||
cursor: pointer;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
#route-page fieldset button.ui-button:focus-visible {
|
||||
outline: .2rem solid var(--focus);
|
||||
outline-offset: .15rem;
|
||||
@@ -357,7 +339,6 @@ button,
|
||||
height: 2rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#route-page fieldset > legend,
|
||||
#slideshow > fieldset > legend {
|
||||
position: absolute;
|
||||
@@ -384,7 +365,6 @@ button,
|
||||
background: #9b2c2c;
|
||||
border-color: #701f1f;
|
||||
}
|
||||
|
||||
#slideshow {
|
||||
overflow: hidden;
|
||||
border-radius: .75rem;
|
||||
@@ -405,7 +385,6 @@ button,
|
||||
object-fit: contain;
|
||||
background: #111;
|
||||
}
|
||||
|
||||
#slideshow > fieldset {
|
||||
display: grid;
|
||||
grid-template-columns: var(--icon-button-size) minmax(0, 1fr) var(--icon-button-size);
|
||||
@@ -417,7 +396,6 @@ button,
|
||||
margin: 0;
|
||||
padding: .65rem;
|
||||
}
|
||||
|
||||
#slideshow > fieldset > button.ui-button {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
@@ -434,7 +412,6 @@ button,
|
||||
height: 1.2rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#slideshow > fieldset > div {
|
||||
display: flex;
|
||||
align-self: stretch;
|
||||
@@ -454,7 +431,6 @@ button,
|
||||
overflow-wrap: anywhere;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
#slide-position {
|
||||
display: block;
|
||||
margin-top: .15rem;
|
||||
@@ -473,7 +449,6 @@ button,
|
||||
#poi-audio[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#navigation-footer {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
@@ -493,7 +468,6 @@ button,
|
||||
box-shadow: 0 -.25rem .8rem rgba(0, 0, 0, .2);
|
||||
backdrop-filter: blur(.4rem);
|
||||
}
|
||||
|
||||
#navigation-arrow {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
@@ -516,7 +490,6 @@ button,
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#navigation-distance {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.1;
|
||||
@@ -535,7 +508,6 @@ button,
|
||||
background: var(--primary-dark);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#pause-route:not(:disabled):hover,
|
||||
#pause-route:not(:disabled):focus {
|
||||
background: #704a00;
|
||||
@@ -566,27 +538,37 @@ button,
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
scroll-behavior: auto !important;
|
||||
animation-duration: .01ms !important;
|
||||
transition-duration: .01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
.info-button {
|
||||
.info-control {
|
||||
position: fixed;
|
||||
top: calc(env(safe-area-inset-top) + .45rem);
|
||||
right: max(.65rem, env(safe-area-inset-right));
|
||||
z-index: 10001;
|
||||
display: grid;
|
||||
justify-items: end;
|
||||
gap: .45rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.info-control > * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.info-button {
|
||||
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: 2px solid rgba(255, 255, 255, .95);
|
||||
border-radius: 50%;
|
||||
background: var(--primary-dark);
|
||||
color: #fff;
|
||||
@@ -596,6 +578,7 @@ button,
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
touch-action: manipulation;
|
||||
transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
|
||||
}
|
||||
|
||||
.info-button:focus-visible {
|
||||
@@ -603,11 +586,60 @@ button,
|
||||
outline-offset: .15rem;
|
||||
}
|
||||
|
||||
.info-button[aria-expanded="true"] {
|
||||
background: var(--primary);
|
||||
box-shadow: 0 .22rem .7rem rgba(0, 0, 0, .34);
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
.info-dropdown {
|
||||
position: absolute;
|
||||
top: calc(var(--icon-button-size) + .45rem);
|
||||
right: 0;
|
||||
display: grid;
|
||||
width: min(18rem, calc(100vw - 1.25rem - env(safe-area-inset-left) - env(safe-area-inset-right)));
|
||||
box-sizing: border-box;
|
||||
gap: .35rem;
|
||||
padding: .45rem;
|
||||
border: 1px solid rgba(49, 93, 58, .24);
|
||||
border-radius: .8rem;
|
||||
background: rgba(255, 255, 255, .98);
|
||||
box-shadow: 0 .45rem 1.4rem rgba(0, 0, 0, .24);
|
||||
opacity: 0;
|
||||
transform: translateY(-.35rem) scale(.98);
|
||||
transform-origin: top right;
|
||||
transition: opacity 180ms ease, transform 180ms ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.info-dropdown.is-open {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.info-dropdown button {
|
||||
min-height: 3rem;
|
||||
padding: .75rem .85rem;
|
||||
border: 1px solid #aebcaf;
|
||||
border-radius: .6rem;
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
font-weight: 700;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.info-dropdown button:focus-visible {
|
||||
outline: .2rem solid var(--focus);
|
||||
outline-offset: .12rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
@@ -635,7 +667,6 @@ button,
|
||||
color: var(--muted);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.switch-row > input {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
@@ -654,7 +685,6 @@ button,
|
||||
background: #d9ded9;
|
||||
transition: background-color 160ms ease, border-color 160ms ease;
|
||||
}
|
||||
|
||||
.switch-track::after {
|
||||
position: absolute;
|
||||
top: .15rem;
|
||||
@@ -676,7 +706,6 @@ button,
|
||||
.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;
|
||||
@@ -690,7 +719,6 @@ button,
|
||||
.compact-switch {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.info-dialog {
|
||||
width: min(48rem, calc(100% - 1.5rem));
|
||||
max-width: 48rem;
|
||||
@@ -710,7 +738,6 @@ button,
|
||||
background: rgba(12, 20, 14, .72);
|
||||
backdrop-filter: blur(.15rem);
|
||||
}
|
||||
|
||||
.info-dialog-shell {
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
@@ -719,24 +746,22 @@ button,
|
||||
|
||||
.info-dialog-header {
|
||||
display: grid;
|
||||
grid-template-columns: var(--icon-button-size) minmax(0, 1fr) var(--icon-button-size);
|
||||
grid-template-columns: 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-align: left;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.info-dialog-header button {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
@@ -752,7 +777,6 @@ button,
|
||||
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));
|
||||
@@ -763,25 +787,6 @@ button,
|
||||
-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;
|
||||
@@ -795,7 +800,6 @@ button,
|
||||
.info-page h3:first-of-type {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
.info-page code {
|
||||
padding: .08rem .25rem;
|
||||
border-radius: .2rem;
|
||||
@@ -810,6 +814,22 @@ button,
|
||||
background: var(--notice);
|
||||
}
|
||||
|
||||
@keyframes info-dialog-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(.45rem) scale(.985);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.info-dialog[open] {
|
||||
animation: info-dialog-in 160ms ease-out;
|
||||
}
|
||||
|
||||
@media (max-width: 34rem) {
|
||||
.info-dialog {
|
||||
width: 100%;
|
||||
|
||||
Reference in New Issue
Block a user