Files
lingniu-vehicle-ingest/station-navigation/styles.css
T

155 lines
7.6 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 .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 .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;
gap: 6px;
padding: 5px;
border-radius: 14px;
}
.station-navigation-shell .locate-btn {
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 { order: 3; flex: 1 0 100%; max-width: none; padding-bottom: 1px; }
.station-navigation-shell .filter-chip-rail { order: 4; max-width: none; overflow: visible; }
.station-navigation-shell .map-filter-chip { min-height: 30px; padding: 0 10px; font-size: 10px; }
.station-navigation-shell .filter-result-meta { order: 5; padding-right: 5px; font-size: 9px; }
.station-navigation-shell .explore-suggestions {
width: calc(100vw - 32px);
max-height: min(300px, calc(100dvh - 248px));
border-radius: 14px;
}
.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; }
}
@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; }
}