226 lines
16 KiB
CSS
226 lines
16 KiB
CSS
/* Keep the public service visually identical to the main map shell. */
|
|
.station-navigation-shell .station-summary-strip { display: none; }
|
|
.station-navigation-shell .station-summary-strip .panel-header { margin-bottom: 8px; }
|
|
.station-navigation-shell .station-summary-strip .status-glass-grid3 { margin-bottom: 7px; }
|
|
.station-navigation-shell .station-summary-strip .glass-cell { padding: 6px 9px; }
|
|
.station-navigation-shell .map-filter-chip { min-height: 27px; padding: 0 9px; border: 1px solid var(--glass-border); border-radius: 8px; background: var(--pill-bg); color: var(--text-muted); font-size: 10px; font-weight: 700; cursor: pointer; }
|
|
.station-navigation-shell .map-filter-chip.is-active { border-color: rgba(0,113,67,.24); background: rgba(0,113,67,.1); color: var(--accent-primary); }
|
|
.station-navigation-shell .filter-chip-rail { display: flex; gap: 6px; }
|
|
.station-navigation-shell .region-picker-trigger { display: inline-flex; align-items: center; gap: 5px; min-height: 29px; padding: 0 9px; border: 1px solid var(--glass-border); border-radius: 9px; background: var(--pill-bg); color: var(--text-main); font-size: 10px; font-weight: 700; white-space: nowrap; cursor: pointer; }
|
|
.station-navigation-shell .region-picker-trigger:hover { border-color: rgba(0,113,67,.32); color: var(--accent-primary); }
|
|
.station-navigation-shell .region-picker-trigger-icon { color: var(--accent-primary); font-size: 14px; line-height: 1; }
|
|
.station-navigation-shell .region-picker-trigger b { display: grid; min-width: 15px; height: 15px; place-items: center; border-radius: 99px; background: var(--accent-primary); color: #fff; font-size: 9px; }
|
|
.region-picker-backdrop { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(15,23,42,.38); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
|
|
.region-picker-backdrop[hidden] { display: none; }
|
|
.region-picker-dialog { display: flex; width: min(500px, 100%); max-height: min(720px, calc(100dvh - 40px)); flex-direction: column; overflow: hidden; border: 1px solid var(--glass-border); border-radius: 18px; background: var(--glass-bg); box-shadow: 0 28px 70px rgba(15,23,42,.28); }
|
|
.region-picker-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 17px 12px; border-bottom: 1px solid var(--glass-border); }
|
|
.region-picker-eyebrow { display: block; margin-bottom: 3px; color: var(--text-muted); font-size: 9px; font-weight: 700; letter-spacing: .07em; }
|
|
.region-picker-header h2 { margin: 0; color: var(--text-main); font-size: 16px; letter-spacing: -.02em; }
|
|
.region-picker-header h2 em { margin-left: 5px; color: var(--accent-primary); font-size: 11px; font-style: normal; font-weight: 700; }
|
|
.region-picker-close { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border: 1px solid var(--glass-border); border-radius: 9px; background: var(--pill-bg); color: var(--text-muted); font: 400 20px/1 -apple-system, BlinkMacSystemFont, sans-serif; cursor: pointer; }
|
|
.region-picker-selected { display: flex; min-height: 38px; align-items: center; gap: 6px; overflow-x: auto; padding: 8px 17px; border-bottom: 1px solid var(--glass-border); scrollbar-width: none; }
|
|
.region-picker-selected::-webkit-scrollbar { display: none; }
|
|
.region-picker-selected-label { flex: 0 0 auto; color: var(--text-muted); font-size: 10px; font-weight: 700; }
|
|
.region-picker-selected-placeholder { color: var(--text-muted); font-size: 11px; }
|
|
.region-picker-selected-chip { display: inline-flex; min-height: 25px; flex: 0 0 auto; align-items: center; gap: 6px; padding: 0 8px; border: 1px solid rgba(0,113,67,.2); border-radius: 99px; background: rgba(0,113,67,.09); color: var(--accent-primary); font-size: 10px; font-weight: 700; cursor: pointer; }
|
|
.region-picker-selected-chip b { font: 700 14px/1 -apple-system, BlinkMacSystemFont, sans-serif; }
|
|
.region-picker-search { display: flex; height: 37px; align-items: center; gap: 8px; margin: 12px 17px 9px; padding: 0 10px; border: 1px solid var(--glass-border); border-radius: 10px; background: var(--pill-bg); color: var(--text-muted); }
|
|
.region-picker-search span { font-size: 17px; line-height: 1; }
|
|
.region-picker-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text-main); font: 11px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
|
|
.region-picker-search button { display: grid; width: 19px; height: 19px; place-items: center; border: 0; border-radius: 50%; background: var(--segmented-bg); color: var(--text-muted); font-size: 14px; cursor: pointer; }
|
|
.region-picker-search button[hidden] { display: none; }
|
|
.region-picker-path { display: flex; min-height: 28px; align-items: center; gap: 6px; padding: 0 17px 7px; color: var(--text-muted); font-size: 10px; }
|
|
.region-picker-path button { padding: 0; border: 0; background: transparent; color: var(--text-muted); font-size: inherit; cursor: pointer; }
|
|
.region-picker-path button.is-current { color: var(--text-main); font-weight: 700; cursor: default; }
|
|
.region-picker-path i { color: var(--text-sub); font-style: normal; }
|
|
.region-picker-list { min-height: 240px; flex: 1 1 auto; overflow-y: auto; padding: 2px 9px 10px; }
|
|
.region-picker-row { display: grid; grid-template-columns: 31px minmax(0, 1fr) 32px; min-height: 54px; align-items: center; border-bottom: 1px solid color-mix(in srgb, var(--glass-border) 72%, transparent); }
|
|
.region-picker-row.is-selected { background: rgba(0,113,67,.045); }
|
|
.region-picker-check { display: grid; width: 19px; height: 19px; margin-left: 6px; place-items: center; border: 1px solid var(--glass-border); border-radius: 5px; background: var(--pill-bg); color: #fff; font-size: 12px; cursor: pointer; }
|
|
.region-picker-row.is-selected .region-picker-check { border-color: var(--accent-primary); background: var(--accent-primary); }
|
|
.region-picker-row-main { min-width: 0; padding: 8px 3px; border: 0; background: transparent; color: var(--text-main); text-align: left; cursor: pointer; }
|
|
.region-picker-row-main strong { display: block; overflow: hidden; font-size: 12px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
|
|
.region-picker-row-main small { display: block; overflow: hidden; margin-top: 2px; color: var(--text-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
|
|
.region-picker-next { display: grid; width: 30px; height: 30px; place-items: center; border: 0; background: transparent; color: var(--text-muted); font: 400 22px/1 -apple-system, BlinkMacSystemFont, sans-serif; cursor: pointer; }
|
|
.region-picker-next:hover { color: var(--accent-primary); }
|
|
.region-picker-next.is-empty { visibility: hidden; }
|
|
.region-picker-empty { display: grid; min-height: 170px; place-items: center; color: var(--text-muted); font-size: 11px; }
|
|
.region-picker-footer { display: flex; min-height: 60px; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 17px; border-top: 1px solid var(--glass-border); }
|
|
.region-picker-footer > span { color: var(--text-muted); font-size: 11px; }
|
|
.region-picker-footer > div { display: flex; align-items: center; gap: 8px; }
|
|
.region-picker-text-button, .region-picker-confirm { min-height: 32px; padding: 0 12px; border-radius: 8px; font-size: 11px; font-weight: 700; cursor: pointer; }
|
|
.region-picker-text-button { border: 1px solid var(--glass-border); background: var(--pill-bg); color: var(--text-muted); }
|
|
.region-picker-confirm { border: 1px solid var(--accent-primary); background: var(--accent-primary); color: #fff; }
|
|
.station-navigation-shell .selected-location-filter-rail { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: min(360px, 30vw); overflow-x: auto; scrollbar-width: none; }
|
|
.station-navigation-shell .selected-location-filter-rail::-webkit-scrollbar { display: none; }
|
|
.station-navigation-shell .selected-location-filter-rail[hidden] { display: none; }
|
|
.station-navigation-shell .selected-location-filter-chip { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; min-height: 29px; max-width: 132px; padding: 0 8px 0 10px; border: 1px solid rgba(0,113,67,.22); border-radius: 999px; background: rgba(0,113,67,.09); color: var(--accent-primary); font-size: 10px; font-weight: 700; cursor: pointer; }
|
|
.station-navigation-shell .selected-location-filter-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.station-navigation-shell .selected-location-filter-chip b { font: 700 15px/1 -apple-system, BlinkMacSystemFont, sans-serif; }
|
|
.station-navigation-shell .province-info-card.is-station-point { min-width: 92px; }
|
|
.station-navigation-shell .province-info-card.is-station-point .p-total { color: var(--accent-primary); }
|
|
.station-navigation-shell .province-info-card.is-external .p-total { color: var(--text-muted); }
|
|
.station-navigation-shell .rank-glass-row { cursor: pointer; }
|
|
.station-navigation-shell .rank-glass-row.is-selected { background: rgba(0,113,67,.09); border-color: rgba(0,113,67,.2); }
|
|
.station-navigation-shell .r-name { display: flex; min-width: 0; align-items: flex-start; gap: 5px; line-height: 1.35; }
|
|
.station-navigation-shell .station-list-name { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
|
|
.station-navigation-shell .station-list-partner-tag { flex: 0 0 30px; min-width: 30px; margin-top: 1px; padding: 2px 5px; border-radius: 4px; background: rgba(0,113,67,.1); color: var(--accent-primary); font-size: 9px; font-weight: 700; line-height: 1; text-align: center; }
|
|
.station-navigation-shell .station-list-partner-tag.is-placeholder { visibility: hidden; }
|
|
.station-navigation-shell .r-value-stack { display: flex; flex: 0 0 auto; align-items: flex-end; gap: 4px; margin-left: auto; }
|
|
.station-navigation-shell .station-list-price { color: var(--accent-primary); font: 700 9px/1 'JetBrains Mono', monospace; letter-spacing: -.03em; white-space: nowrap; }
|
|
.station-navigation-shell .detail-phone-link { color: var(--accent-primary); font: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent-primary) 35%, transparent); text-underline-offset: 2px; }
|
|
.station-navigation-shell .rank-empty { display: grid; min-height: 160px; place-items: center; color: var(--text-muted); font-size: 12px; text-align: center; }
|
|
.station-navigation-shell .map-detail-card .detail-grid { margin-bottom: 0; }
|
|
@media (max-width: 760px) {
|
|
/* Mobile is navigation-first: keep the first screen focused on map,
|
|
search and the next action, rather than dashboard chrome. */
|
|
.station-navigation-shell .liquid-header {
|
|
position: relative;
|
|
padding: 9px 10px 10px;
|
|
gap: 8px;
|
|
}
|
|
|
|
.station-navigation-shell .header-left {
|
|
width: calc(100% - 78px);
|
|
gap: 8px;
|
|
}
|
|
|
|
.station-navigation-shell .brand-block { flex-basis: 118px; min-width: 96px; }
|
|
.station-navigation-shell .brand-logo-svg { max-width: 118px; }
|
|
.station-navigation-shell .brand-divider { height: 18px; }
|
|
.station-navigation-shell .cockpit-title { font-size: 14px; }
|
|
|
|
.station-navigation-shell .header-controls {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
width: auto;
|
|
order: initial;
|
|
}
|
|
|
|
.station-navigation-shell .theme-switcher-bw { padding: 2px; border-radius: 9px; }
|
|
.station-navigation-shell .theme-switcher-bw .bw-btn { display: grid; width: 31px; min-height: 28px; padding: 4px; place-items: center; }
|
|
.station-navigation-shell .theme-switcher-bw .bw-btn span { display: none; }
|
|
.station-navigation-shell .header-kpi-group,
|
|
.station-navigation-shell .station-status-card { display: none; }
|
|
.station-navigation-shell .station-summary-strip { display: block; padding: 9px 11px; border-radius: 14px; flex: 0 0 auto; }
|
|
.station-navigation-shell .station-summary-strip .panel-header { margin-bottom: 7px; padding-bottom: 5px; }
|
|
.station-navigation-shell .station-summary-strip .status-glass-grid3 { gap: 5px; margin-bottom: 6px; }
|
|
.station-navigation-shell .station-summary-strip .glass-cell { padding: 6px; }
|
|
|
|
.station-navigation-shell .map-spatial-container {
|
|
height: clamp(430px, 58dvh, 540px);
|
|
min-height: clamp(430px, 58dvh, 540px);
|
|
}
|
|
|
|
.station-navigation-shell .map-top-bar { display: none; }
|
|
|
|
.station-navigation-shell .map-explore-toolbar {
|
|
top: 8px;
|
|
left: 8px;
|
|
right: 8px;
|
|
display: grid;
|
|
grid-template-columns: 36px max-content minmax(0, 1fr);
|
|
gap: 6px;
|
|
padding: 5px;
|
|
border-radius: 14px;
|
|
}
|
|
|
|
.station-navigation-shell .region-picker-trigger { grid-column: 1 / 3; grid-row: 2; min-height: 30px; padding: 0 9px; border-radius: 9px; }
|
|
.station-navigation-shell .explore-search-shell { grid-column: 2 / -1; grid-row: 1; min-width: 0; }
|
|
|
|
.station-navigation-shell .locate-btn {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
flex-basis: 36px;
|
|
width: 36px;
|
|
min-height: 36px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.station-navigation-shell .entity-search-field {
|
|
height: 36px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.station-navigation-shell .entity-search-field input { font-size: 12px; }
|
|
.station-navigation-shell .selected-location-filter-rail { grid-column: 1 / -1; grid-row: 3; max-width: none; padding: 1px 0 0; }
|
|
.station-navigation-shell .filter-chip-rail { grid-column: 3; grid-row: 2; min-width: 0; max-width: none; overflow-x: auto; }
|
|
.station-navigation-shell .map-filter-chip { min-height: 30px; padding: 0 8px; font-size: 10px; }
|
|
.station-navigation-shell .filter-result-meta { display: none; }
|
|
|
|
.region-picker-backdrop { align-items: end; padding: 0; }
|
|
.region-picker-dialog { width: 100%; max-height: min(82dvh, 700px); border-radius: 20px 20px 0 0; }
|
|
.region-picker-header { padding: 14px 15px 10px; }
|
|
.region-picker-selected { padding: 8px 15px; }
|
|
.region-picker-search { margin: 10px 15px 7px; }
|
|
.region-picker-path { padding: 0 15px 6px; }
|
|
.region-picker-footer { padding: 10px 15px calc(10px + env(safe-area-inset-bottom)); }
|
|
|
|
.station-navigation-shell .explore-suggestions {
|
|
top: calc(100% + 43px);
|
|
left: -42px;
|
|
width: calc(100vw - 32px);
|
|
max-height: min(280px, calc(100dvh - 250px));
|
|
border-radius: 14px;
|
|
}
|
|
|
|
.station-navigation-shell .map-explore-toolbar:has(.selected-location-filter-rail:not([hidden])) .explore-suggestions {
|
|
top: calc(100% + 79px);
|
|
}
|
|
|
|
.station-navigation-shell .map-action-controls {
|
|
right: 8px;
|
|
bottom: 31px;
|
|
}
|
|
|
|
.station-navigation-shell .map-action-controls .glass-btn:nth-child(1),
|
|
.station-navigation-shell .map-action-controls .glass-btn:nth-child(2) { display: none; }
|
|
|
|
.station-navigation-shell .map-action-controls .glass-btn {
|
|
min-height: 32px;
|
|
padding: 6px 10px;
|
|
border-radius: 10px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.station-navigation-shell .map-detail-card {
|
|
bottom: 46px;
|
|
max-height: min(42dvh, 300px);
|
|
padding: 12px;
|
|
border-radius: 17px;
|
|
}
|
|
|
|
.station-navigation-shell .detail-title-wrap h2 {
|
|
display: -webkit-box;
|
|
overflow: hidden;
|
|
white-space: normal;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
}
|
|
|
|
.station-navigation-shell .detail-navigate-btn,
|
|
.station-navigation-shell .detail-close-btn {
|
|
width: 32px;
|
|
height: 32px;
|
|
flex-basis: 32px;
|
|
}
|
|
|
|
.station-navigation-shell .detail-navigate-btn svg { width: 15px; height: 15px; }
|
|
.station-navigation-shell .sidebar-operations { gap: 8px; }
|
|
.station-navigation-shell .sidebar-card { padding: 10px 11px; border-radius: 14px; }
|
|
.station-navigation-shell .status-glass-grid3 { gap: 5px; margin-bottom: 7px; }
|
|
.station-navigation-shell .glass-cell { padding: 6px; }
|
|
.station-navigation-shell .rank-glass-row { min-height: 42px; padding: 7px 8px; }
|
|
.station-navigation-shell .r-value-stack { flex-direction: column; align-items: flex-end; gap: 3px; }
|
|
.station-navigation-shell .station-list-price { font-size: 8px; }
|
|
}
|
|
|
|
@media (max-width: 390px) {
|
|
.station-navigation-shell .header-left { width: calc(100% - 76px); }
|
|
.station-navigation-shell .brand-block { flex-basis: 104px; min-width: 88px; }
|
|
.station-navigation-shell .brand-logo-svg { max-width: 104px; }
|
|
.station-navigation-shell .cockpit-title { font-size: 13px; }
|
|
.station-navigation-shell .brand-divider { margin-left: -2px; }
|
|
}
|