85 lines
8.0 KiB
CSS
85 lines
8.0 KiB
CSS
.planner-stage { display:grid; grid-template-columns:310px minmax(0,1fr); gap:20px; align-items:stretch; }
|
|
.planner-controls,.planner-detail,.planner-library,.planner-map-panel { background:var(--white); border:1px solid var(--line); border-radius:12px; }
|
|
.planner-controls { padding:22px; }
|
|
.planner-section-heading { display:flex; justify-content:space-between; align-items:center; }
|
|
.planner-section-heading .icon { color:var(--green); }
|
|
.planner-controls label,#save-route-form label { display:block; margin:15px 0 7px; font-size:12px; font-weight:500; }
|
|
.planner-controls input:not([type=checkbox]),.planner-controls select,#route-name { width:100%; padding:12px; border:1px solid #3c4447; border-radius:7px; background:var(--paper); color:var(--ink); font:inherit; }
|
|
.planner-controls input:focus,.planner-controls select:focus,#route-name:focus { outline:2px solid var(--green); outline-offset:2px; }
|
|
.planner-controls input::placeholder { color:var(--muted); font-size:12px; }
|
|
#route-planner [hidden] { display:none!important; }
|
|
.planner-fields { display:grid; grid-template-columns:1fr 1.2fr; gap:12px; }
|
|
.field-unit { color:var(--muted); float:right; }
|
|
.planner-controls hr { border:0; border-top:1px solid var(--line); margin:20px 0 0; }
|
|
.planner-controls .field-help { margin:10px 0; }
|
|
.planner-check { display:flex!important; gap:8px; align-items:center; }
|
|
.planner-controls input[type=checkbox] { accent-color:var(--green); width:16px; height:16px; }
|
|
.planner-preferences { margin:18px 0; }
|
|
.planner-preferences summary,.planner-quality-notes summary { color:var(--muted); font-size:12px; cursor:pointer; }
|
|
.planner-preferences[open] summary { color:var(--ink); }
|
|
.planner-link { display:flex; align-items:center; gap:6px; background:none; padding:4px 0; color:var(--muted); font-size:11px; margin-top:8px; }
|
|
.planner-link:hover,.planner-link[aria-pressed=true] { color:var(--green); }
|
|
.planner-link .icon { width:14px; height:14px; }
|
|
.loop-note { margin-top:14px; padding:9px 12px; border-radius:6px; background:#27322d; color:#b8cfc0; font-size:11px; }
|
|
.location-letter { display:inline-grid; place-items:center; width:19px; height:19px; border-radius:50%; margin-right:8px; font-size:10px; font-weight:600; color:#131918; background:#83c0a1; }
|
|
.location-letter.end { background:var(--green); }
|
|
.location-search { position:relative; }
|
|
.location-hint { font-size:10px; color:var(--muted); margin-top:7px; overflow-wrap:anywhere; }
|
|
.location-results { position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:1200; background:#242b2e; border:1px solid #485154; border-radius:8px; box-shadow:0 14px 30px #0006; padding:5px; }
|
|
.location-results button { display:block; width:100%; text-align:left; padding:11px 10px; border-radius:5px; color:var(--ink); background:transparent; font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
|
|
.location-results button:hover,.location-results button[aria-selected=true] { background:#384144; }
|
|
.planner-provider-note,.planner-attribution { font-size:10px; color:var(--muted); line-height:1.7; margin-top:12px; }
|
|
#generate-routes { width:100%; gap:10px; margin-top:4px; }
|
|
#generate-routes:disabled { opacity:.55; cursor:wait; }
|
|
.planner-map-panel { min-width:0; overflow:hidden; display:flex; flex-direction:column; }
|
|
.planner-map-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; }
|
|
.planner-map-heading .eyebrow { margin-bottom:5px; }
|
|
.planner-map-heading p { font-size:12px; color:var(--muted); }
|
|
.planner-map-heading button { padding:9px 12px; flex-shrink:0; }
|
|
#planner-map { min-height:470px; flex:1; z-index:0; background:var(--line); }
|
|
.planner-map-footer { display:flex; justify-content:space-between; gap:14px; padding:13px 20px; font-size:10px; color:var(--muted); flex-wrap:wrap; }
|
|
.legend-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin:0 5px 0 10px; background:#83c0a1; }
|
|
.legend-dot:first-child { margin-left:0; }
|
|
.legend-dot.end { background:var(--green); }
|
|
#planner-status { margin:18px 0; font-size:13px; color:var(--muted); min-height:22px; }
|
|
.planner-pin { background:transparent; border:0; }
|
|
.planner-pin span { display:grid; place-items:center; width:30px; height:30px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:#83c0a1; border:2px solid #f9f7f2; box-shadow:0 3px 10px #0008; color:#14251e; }
|
|
.planner-pin.end span { background:var(--green); color:#2c1912; }
|
|
.planner-pin b { transform:rotate(45deg); font:600 12px/1 system-ui; }
|
|
.planner-pin.loop span { border-radius:50%; }
|
|
.planner-pin.loop b { font-size:9px; }
|
|
.planner-results-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:24px 0 14px; }
|
|
.planner-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:22px; }
|
|
.planner-option { background:var(--white); color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:18px; text-align:left; }
|
|
.planner-option[aria-pressed=true] { border-color:var(--green); box-shadow:inset 0 0 0 1px var(--green); }
|
|
.planner-option-title { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:13px; }
|
|
.planner-option-tag { font-size:10px; color:var(--green); }
|
|
.planner-option-stats { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px; }
|
|
.planner-option-stats strong { display:block; font-size:18px; font-weight:500; letter-spacing:-.3px; }
|
|
.planner-option-stats small { display:block; font-size:10px; color:var(--muted); margin-top:3px; }
|
|
.planner-detail { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:32px; padding:26px; }
|
|
.planner-metrics { display:flex; gap:30px; flex-wrap:wrap; margin:20px 0; }
|
|
.planner-metrics strong { font-size:25px; font-weight:500; display:block; }
|
|
.planner-metrics small { display:block; font-size:10px; color:var(--muted); }
|
|
.planner-profile { height:190px; margin-top:20px; }
|
|
.planner-distance-note { font-size:12px; color:var(--muted); margin-top:14px; }
|
|
.planner-detail dl { margin:18px 0; }
|
|
.planner-detail dl>div { display:grid; grid-template-columns:1fr auto; gap:8px 16px; padding:10px 0; border-bottom:1px solid var(--line); }
|
|
.planner-detail dt { color:var(--muted); font-size:12px; }
|
|
.planner-detail dd { margin:0; font-size:12px; }
|
|
.quality-track { grid-column:1/-1; height:3px; background:#30383b; border-radius:3px; overflow:hidden; }
|
|
.quality-track i { display:block; height:100%; background:#748b82; }
|
|
.planner-quality-notes { margin:14px 0; }
|
|
.planner-quality-notes p { margin-top:8px; }
|
|
.planner-save-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
|
|
.planner-library { padding:24px; margin-top:24px; }
|
|
.planner-library .planner-results-heading { margin-top:0; }
|
|
#saved-routes { display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; }
|
|
#saved-routes .button { max-width:100%; white-space:normal; overflow-wrap:anywhere; }
|
|
#empty-saved { font-size:13px; color:var(--muted); padding:14px 0; }
|
|
.app-header .stats-nav { flex-shrink:0; color:var(--muted); font-size:13px; }
|
|
.app-header .stats-nav.active { color:var(--green); }
|
|
@media(max-width:1000px) { .planner-stage{grid-template-columns:280px minmax(0,1fr)} .planner-map-footer span:last-child{display:none} .planner-map-heading{flex-wrap:wrap} .planner-option-stats strong{font-size:16px} }
|
|
@media(max-width:760px) { .planner-stage{grid-template-columns:1fr} .planner-controls{padding:20px} .planner-options{grid-template-columns:1fr} .planner-option-stats{grid-template-columns:repeat(4,minmax(0,1fr))} .planner-detail{grid-template-columns:1fr;padding:20px} .planner-map-panel{min-height:400px} #planner-map{height:350px;min-height:350px;flex:auto} .planner-controls input,.planner-controls select,#route-name{font-size:16px} .planner-controls input::placeholder{font-size:14px} .planner-results-heading{align-items:start;flex-wrap:wrap} .location-hint{font-size:11px} .planner-library{padding:20px} }
|
|
@media(max-width:380px) { .planner-option-stats{grid-template-columns:1fr 1fr} .planner-map-heading{padding:16px} .planner-fields{grid-template-columns:1fr 1fr} }
|