/* ============================================================ Map Sidebar — filter panel overlaying the left side of the map. Used on LabelMap, Admin, and User Profile pages. ============================================================ */ .map-sidebar { position: absolute; top: 0; left: 0; bottom: 0; margin-top: 20px; width: 315px; background: #fefefe; box-shadow: 2px 0 6px rgba(0, 0, 0, 0.12); z-index: 10; overflow-y: auto; scrollbar-gutter: stable; padding: 40px 30px 30px 30px; font-family: 'Raleway', sans-serif; transition: transform 0.2s ease; } .map-sidebar--hidden { transform: translateX(-100%); } .map-sidebar--loading { pointer-events: none; } .map-sidebar--loading > * { opacity: 0.5; filter: grayscale(1); } /* Close button (top-right corner) */ .map-sidebar__close { position: absolute; top: 8px; right: 2px; background: none; border: none; padding: 4px; opacity: 0.75; } .map-sidebar__close:hover { opacity: 0.8; } .map-sidebar__close img { width: 24px; height: 24px; } /* Drag handle for resizing the sidebar width. Sits on the right edge of the sidebar. */ .map-sidebar__resize-handle { position: absolute; top: 20px; /* Matches .map-sidebar margin-top so the handle aligns with the visible edge. */ bottom: 0; left: 315px; /* Matches .map-sidebar default width; updated by JS on drag. */ width: 6px; cursor: col-resize; z-index: 11; background: transparent; transition: background 0.15s ease; touch-action: none; } .map-sidebar__resize-handle:hover, .map-sidebar__resize-handle--dragging { background: rgba(0, 0, 0, 0.15); } /* Applied to while dragging to suppress text selection and force the resize cursor. */ body.map-sidebar-resizing { user-select: none; cursor: col-resize; } /* Floating button to reopen the sidebar. */ .map-sidebar-open-btn { position: absolute; top: 12px; left: 12px; margin-top: 20px; z-index: 10; background: #ffffff; border: 1px solid #ccc; border-radius: 10px; padding: 6px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); display: none; } .map-sidebar-open-btn:hover { background: #f5f5f5; } .map-sidebar-open-btn img { width: 24px; height: 24px; } /* ---- Sections ---- */ .map-sidebar__section { margin-bottom: 25px; } .map-sidebar__section:last-child { margin-bottom: 0; } .map-sidebar__heading { font-family: 'Raleway', sans-serif; font-size: 16px; font-weight: 700; color: #000; margin: 0; line-height: normal; } .map-sidebar__heading-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .map-sidebar__deselect-all { background: none; border: none; color: #666; cursor: pointer; font-family: 'Roboto', sans-serif; font-size: 14px; padding: 0; text-decoration: underline; } .map-sidebar__deselect-all:hover { color: #333; } /* ---- Severity toggles ---- */ .map-sidebar__severity-toggles { display: inline-grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 8px; } .severity-toggle { display: flex; flex-direction: column; align-items: center; gap: 5px; background: none; border: none; padding: 4px; cursor: pointer; border-radius: 6px; } .severity-toggle:hover { background: #f0f0f0; } .severity-toggle img { width: 24px; height: 24px; } .severity-toggle span { font-family: 'Raleway', sans-serif; font-size: 11px; font-weight: 600; color: var(--color-asphalt-400); white-space: nowrap; } /* ---- Checkbox list items ---- */ .map-sidebar__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .map-sidebar__item { display: flex; align-items: center; gap: 9px; } .map-sidebar__item--expandable { flex-direction: column; align-items: stretch; } .map-sidebar__item-row { display: flex; align-items: center; gap: 9px; } .map-sidebar__item input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 12px; height: 12px; margin: 0; flex-shrink: 0; cursor: pointer; border: 1.5px solid #000; border-radius: 2px; background: #fff; } .map-sidebar__item input[type="checkbox"]:checked { background: #000; border-color: #000; } .map-sidebar__item input[type=checkbox]:focus { outline: unset; /* Removing some default styling from Bootstrap */ } .map-sidebar__item label { font-family: 'Raleway', sans-serif; font-size: 16px; font-weight: 500; color: #000; margin: 0; cursor: pointer; white-space: nowrap; line-height: normal; } /* Label type circle icons */ .map-sidebar__item .map-legend-circle-icon { flex-shrink: 0; } .map-sidebar__item .map-legend-circle-icon svg { width: 14px; height: 14px; display: block; } .map-sidebar__item .map-legend-circle-icon circle { cx: 7; cy: 7; } /* Validation icons */ .map-sidebar__item .map-sidebar__validation-icon { width: 22px; height: 22px; flex-shrink: 0; } .map-sidebar__item .map-sidebar__unvalidated-icon { width: 18px; /* Width needs to be smaller due to it having less space around the icon than the others. */ height: 18px; flex-shrink: 0; } /* Street line icons */ .map-sidebar__item .map-sidebar__street-icon { width: 17px; height: 14px; flex-shrink: 0; } .map-sidebar__item .map-sidebar__street-icon path { stroke-width: 3; stroke-linecap: round; } .map-sidebar__item .map-sidebar__street-icon--audited path { stroke: #000; } .map-sidebar__item .map-sidebar__street-icon--unaudited path { stroke: #b3b3b3; } /* ---- Tag expand/collapse toggle ---- */ .map-sidebar__tag-toggle { margin-left: auto; background: none; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; flex-shrink: 0; } .map-sidebar__tag-toggle img { width: 22px; height: 22px; } .map-sidebar__tag-toggle:hover { opacity: 0.7; } /* ---- Tag pills container (collapsible) ---- */ .map-sidebar__tag-pills { flex-wrap: wrap; gap: 4px; padding: 4px 0 8px 21px; } .map-sidebar__tag-pills[hidden] { display: none; } .map-sidebar__tag-pills:not([hidden]) { display: flex; } /* Gray checkbox when a label type is only partially filtered by tags. */ .map-sidebar__item input[type="checkbox"].checkbox--partial { background: #888; border-color: #888; }