mirror of
https://github.com/firestar5683/StarPilot.git
synced 2026-11-13 07:53:45 +08:00
Prabhaav Pillai
21806fa504
Updated headers and descriptions across various pages to enhance user understanding. Added navigation and interaction improvements in the logs, longitudinal curves, and model laboratory sections. Enhanced error handling and user notifications in map operations and vehicle controls. Improved accessibility features, including ARIA labels and roles for better screen reader support. Consolidated and clarified messages related to software updates and branch selections. Streamlined the layout and organization of settings and configuration pages for better usability. Smoother Transitions
124 lines
10 KiB
CSS
124 lines
10 KiB
CSS
@import "./offline-road-maps.css";
|
|
|
|
/* A shared page shell keeps destination, maps, and setup in the same layout. */
|
|
.gx-navigation {--navigation-land:#191a1a;width:100%;max-width:1440px;margin:0 auto;min-width:0;padding-bottom:24px}
|
|
[data-theme="light"] .gx-navigation {--navigation-land:#f5f5f3}
|
|
.gx-navigation__workspace {display:grid;grid-template-columns:minmax(320px, .85fr) minmax(0,1.4fr);gap:16px;align-items:start}
|
|
.gx-navigation__panel {min-width:0;padding:18px;display:grid;gap:12px;align-content:start}
|
|
.gx-navigation__step {display:flex;gap:12px;align-items:flex-start;min-width:0}
|
|
.gx-navigation__step>div {min-width:0;flex:1}
|
|
.gx-navigation__preview-head>.gx-navigation__step {flex:1 1 220px}
|
|
.gx-navigation__step h3 {margin:0 0 4px;font-size:1.2rem}
|
|
.gx-navigation__step p {margin:0;color:var(--text-muted);font-size:.88rem;line-height:1.5}
|
|
.gx-navigation__preview {min-width:0;overflow:hidden;position:sticky;top:calc(88px + env(safe-area-inset-top,0px))}
|
|
.gx-navigation__preview-head {padding:16px 18px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
|
|
.gx-navigation__trip {padding:8px 12px;border-radius:20px;background:var(--glass-active-bg);font-size:.85rem;font-weight:650;color:var(--primary)}
|
|
.gx-navigation__preview .gx-navigation-map {margin:0;border-radius:0;background:var(--navigation-land)}
|
|
.gx-navigation__preview .gx-navigation-map canvas {height:clamp(320px,52vh,640px);background:var(--navigation-land)}
|
|
.gx-navigation__preview .gx-navigation-map>.gx-alert {position:absolute;left:8px;right:8px;bottom:36px;margin:0;padding:8px 10px;font-size:.8rem}
|
|
.gx-navigation__empty {display:grid;justify-items:center;text-align:center;align-content:center;min-height:340px;padding:32px;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--primary) 12%,transparent),transparent 70%)}
|
|
.gx-navigation__empty>i {font-size:3rem;color:var(--primary);margin-bottom:20px}
|
|
.gx-navigation__empty h3 {margin:0}
|
|
.gx-navigation__empty p {max-width:320px;color:var(--text-muted);line-height:1.6}
|
|
.gx-navigation .gx-btn {min-height:44px}
|
|
.gx-navigation button:focus-visible,.gx-navigation input:focus-visible {outline:2px solid var(--primary);outline-offset:3px}
|
|
.gx-navigation__section {min-width:0;overflow-wrap:anywhere}
|
|
.gx-navigation__panel>* {margin:0}
|
|
.gx-navigation__suggestions,.gx-navigation__field {background:var(--glass-bg);color:var(--glass-text);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
|
|
.gx-navigation__panel .gx-btn {border-radius:14px;font-size:.85rem;min-height:44px;padding:8px 16px}
|
|
.gx-navigation__search {display:flex;flex-wrap:nowrap;gap:8px}
|
|
.gx-navigation__panel .gx-navigation__search {margin:0}
|
|
.gx-navigation__field {flex:1;display:flex;align-items:center;gap:8px;min-width:0;height:50px;padding:0 6px 0 16px;border-radius:25px}
|
|
.gx-navigation__field>i {opacity:.6}
|
|
.gx-navigation__field input {flex:1;min-width:0;height:100%;border:0;background:none;color:inherit;font:inherit;font-size:1rem;outline:none}
|
|
.gx-navigation .gx-navigation__field input:focus-visible {outline:none;box-shadow:none}
|
|
.gx-navigation__field:focus-within {border-color:var(--glass-text);box-shadow:0 0 0 1px var(--glass-border)}
|
|
.gx-navigation__icon {display:inline-grid;place-items:center;flex:0 0 auto;width:44px;height:44px;border:0;border-radius:50%;background:none;color:inherit;font-size:1.05rem;cursor:pointer}
|
|
.gx-navigation__icon:hover:not(:disabled),.gx-navigation__icon:focus-visible {background:var(--glass-active-bg)}
|
|
.gx-navigation__icon:disabled {opacity:.45;cursor:default}
|
|
.gx-navigation__icon[aria-pressed="true"] .bi-star-fill,.gx-navigation__save--on {color:#f5b400}
|
|
.gx-navigation__suggestions {display:grid;gap:2px;padding:6px;border-radius:16px;max-height:55vh;overflow:auto}
|
|
.gx-navigation__row {display:flex;flex-wrap:wrap;align-items:center;gap:2px}
|
|
.gx-navigation__favorite-choices {display:flex;gap:6px;flex:1 1 100%;margin:4px 0}
|
|
.gx-navigation__favorite-choices .gx-btn {flex:1;min-width:0;padding:6px 10px;display:flex;align-items:center;justify-content:center;gap:6px}
|
|
.gx-navigation__suggestion {flex:1;display:flex;align-items:center;gap:12px;min-width:0;padding:10px 12px;border:0;border-radius:12px;background:none;color:inherit;text-align:left;cursor:pointer;font:inherit}
|
|
.gx-navigation__suggestion:hover:not(:disabled),.gx-navigation__suggestion:focus-visible {background:var(--glass-active-bg)}
|
|
.gx-navigation__suggestion i {color:var(--primary);font-size:1.05rem;flex:0 0 auto;width:20px;text-align:center}
|
|
.gx-navigation__suggestion .bi-star-fill {color:#f5b400}
|
|
.gx-navigation__suggestion span {display:grid;min-width:0}
|
|
.gx-navigation__suggestion strong {font-weight:600;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
.gx-navigation__suggestion small {opacity:.7;font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
.gx-navigation__group {display:flex;align-items:center;justify-content:space-between;padding:8px 12px 2px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
|
|
.gx-navigation__link {border:0;background:none;color:var(--primary);font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;padding:4px}
|
|
.gx-navigation__shortcuts {display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px}
|
|
.gx-navigation__shortcuts::-webkit-scrollbar {display:none}
|
|
.gx-navigation__chip {display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;min-height:40px;max-width:220px;padding:0 14px;border-radius:20px;border:1px solid var(--glass-border);background:var(--glass-bg);color:var(--glass-text);box-shadow:var(--glass-shadow);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
.gx-navigation__chip i {color:var(--primary)}
|
|
.gx-navigation__chip .bi-star-fill {color:#f5b400}
|
|
.gx-navigation__chip[aria-pressed="true"] {background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
|
|
.gx-navigation__chip[aria-pressed="true"] i {color:inherit}
|
|
.gx-navigation__chip:disabled {opacity:.55;cursor:default}
|
|
.gx-navigation__usage {display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:4px 0 0;font-size:.85rem}
|
|
.gx-navigation__usage dt {opacity:.7}
|
|
.gx-navigation__usage dd {margin:0}
|
|
.gx-navigation__heading {display:flex;align-items:flex-start;gap:8px}
|
|
.gx-navigation__heading>div {flex:1;min-width:0}
|
|
.gx-navigation__heading .gx-note {margin:2px 0 0;font-size:.8rem;overflow-wrap:anywhere}
|
|
.gx-navigation__summary-title {margin:0;font-size:1.15rem;line-height:1.25;overflow-wrap:anywhere}
|
|
.gx-navigation__summary>div {display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:8px 0 0;font-size:.9rem}
|
|
.gx-navigation__summary strong {font-size:1.35rem;color:var(--success)}
|
|
.gx-navigation__route-actions {display:flex;gap:8px;margin-top:10px;padding-bottom:0}
|
|
.gx-navigation__route-actions {flex-wrap:wrap}
|
|
.gx-navigation__route-actions .gx-btn {flex:1;font-weight:600}
|
|
.gx-navigation__panel .gx-navigation__instruction {font-size:1rem;font-weight:650;margin:8px 0 0}
|
|
.gx-navigation__panel .gx-note {font-size:.85rem}
|
|
.gx-navigation__busy {padding:8px 14px;border-radius:12px;background:var(--glass-bg);font-size:.85rem;justify-self:start}
|
|
.gx-navigation__places {gap:0}
|
|
.gx-navigation__places>li+li {border-top:1px solid var(--glass-border)}
|
|
.gx-navigation__suggestion .gx-navigation__start {color:var(--primary);opacity:1;margin-top:4px}
|
|
.gx-navigation__shortcuts .gx-navigation__chip {background:none;border:0;border-radius:8px;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
|
|
.gx-navigation__shortcuts .gx-navigation__chip:hover {background:var(--glass-active-bg)}
|
|
.gx-navigation__places>li {padding:6px 0;gap:8px;font-size:.88rem;flex-direction:row;flex-wrap:wrap;align-items:center}
|
|
.gx-navigation__places>li>span {display:grid}
|
|
.gx-navigation__places .gx-note {display:block;font-size:.76rem}
|
|
.gx-navigation__actions {gap:4px}
|
|
.gx-navigation__alternatives {display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
|
|
.gx-navigation__alternatives .gx-btn {min-height:38px;padding:6px 12px}
|
|
.gx-navigation-map__last {position:absolute;bottom:48px;right:16px;background:var(--glass-bg);color:var(--glass-text);border-radius:12px;padding:8px 12px;font-size:12px}
|
|
.gx-navigation-map__controls {flex-direction:column}
|
|
.gx-navigation-map__control {display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--glass-border);background:var(--glass-bg);color:var(--glass-text);box-shadow:var(--glass-shadow);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:1.1rem;cursor:pointer}
|
|
.gx-navigation-map__control--active {color:var(--primary)}
|
|
.gx-navigation-map > p {position:absolute;bottom:72px;right:16px;max-width:320px;background:var(--glass-bg);border-radius:12px;padding:12px;font-size:12px}
|
|
@media(max-width:1050px) {
|
|
.gx-navigation__workspace {grid-template-columns:minmax(0,1fr)}
|
|
.gx-navigation__preview {position:relative;top:auto}
|
|
.gx-navigation__preview .gx-navigation-map canvas {height:360px;height:clamp(260px,45svh,440px)}
|
|
}
|
|
@media(max-width:540px) {
|
|
.gx-navigation {padding-bottom:8px}
|
|
.gx-navigation__panel,.gx-navigation__preview-head {padding:12px}
|
|
.gx-navigation__panel {gap:8px}
|
|
.gx-navigation__workspace {gap:12px}
|
|
.gx-navigation__search {gap:6px}
|
|
.gx-navigation__panel .gx-navigation__search[role="search"] {flex-wrap:nowrap}
|
|
.gx-navigation__field {height:44px;padding-left:10px;border-radius:16px}
|
|
.gx-navigation__search[role="search"]>.gx-btn {width:auto;flex:none;padding-inline:10px}
|
|
.gx-navigation__search[role="search"]>.gx-btn>i {display:none}
|
|
.gx-navigation__search .gx-field {min-width:0;width:100%;flex-basis:100%}
|
|
.gx-navigation__places>li {flex-direction:row;align-items:center;padding:8px}
|
|
.gx-navigation__places>li>span {flex:1 1 100px}
|
|
.gx-navigation__places .gx-btn {padding-inline:10px}
|
|
.gx-navigation__actions {justify-content:flex-end}
|
|
.gx-navigation__route-actions {flex-direction:row}
|
|
.gx-navigation__route-actions .gx-btn {padding-inline:8px;font-size:.78rem}
|
|
.gx-navigation__route-actions .gx-btn>i {display:none}
|
|
.gx-navigation__usage {grid-template-columns:1fr}
|
|
.gx-navigation__usage dd {margin-bottom:8px}
|
|
.gx-navigation__suggestions {max-height:40svh;padding:4px}
|
|
.gx-navigation__suggestion {gap:8px;padding:6px 8px;min-height:44px}
|
|
.gx-navigation__preview .gx-navigation-map canvas {height:clamp(200px,32svh,300px)}
|
|
.gx-navigation__empty {min-height:180px;padding:16px}
|
|
}
|
|
|
|
.gx-navigation__token-link { display: inline-block; margin-bottom: var(--sp-4); }
|