. These match the 40px iconSize atlasmap.js buildCluster() asks for, which in turn matches MarkerCluster.Default.css geometry. Every length here used to be `calc(Npx * var(--ds, 1))`, where --ds was the `?scale=N` kiosk multiplier that map-init.js published on ; that param is gone (issue #45). */ html .leaflet-marker-icon.marker-cluster { border-radius: 20px !important; } html .leaflet-marker-icon.marker-cluster div { border-radius: 15px !important; font-size: 12px !important; height: 30px !important; margin-left: 5px !important; margin-top: 5px !important; width: 30px !important; } html .leaflet-marker-icon.marker-cluster span { line-height: 30px !important; } /* Fixed 2px black ring on the point markers (towns/dams/artifacts) — the comp shows an outline on every marker (issue #26). Uses `outline`, not `border`: outline is drawn OUTSIDE the box and doesn't consume space, so the SVG keeps its full iconSize (a border shrank the art and made small markers hard to read). Constant px so it doesn't scale with marker size; border-radius makes the outline follow the circular art. Clusters keep their own styling. */ img.leaflet-marker-icon { border-radius: 50%; outline: 2px solid #000; } .leaflet-div-icon p { color: black; font-size: 1rem; font-weight: 700; text-shadow: -1px 0 0.05em white, 0 1px white, 1px 0 white, 0 -1px white; /* text-shadow: white 0.1em 0.1em 0.05em */ } .leaflet-popup-tip-container { display: none; } /* The pane used to carry a `transform: translateY(72px)` that nudged every popup down, clear of the #boxbox controls (reset / help / zoom) when they sat at the top centre. Issue #68 moved those controls to the left edge, where they no longer cross the panel at any viewport width, so the nudge had nothing left to dodge — it was only pushing panels down into the year slider. Placement is popup-panel.js's job now. */ path.leaflet-interactive { outline: none; } #main { /* transition: margin-left .5s; height: 50%; position: relative; */ display: flex; flex-direction: column; } /* Adjustments for wider screens */ @media only screen and (width >= 768px) { #main { flex-direction: row; } } /* Base styles are for mobile-first design, so the default styles without media queries will be for mobile views */ /* Adjustments for larger screens/tablets, typically above 768px */ @media only screen and (width >= 768px) { #map { margin: auto; width: 80%; /* Adjust map width or other properties if necessary */ } } /* Adjustments for larger screens/desktops, typically above 992px */ @media only screen and (width >= 992px) { #map { width: 90%; /* Adjust map width or other properties if necessary */ } } /* Adjustments for extra large screens/large desktops, typically above 1200px */ @media only screen and (width >= 1200px) { #map { width: 95%; /* Adjust map width or other properties if necessary */ } } #map { color: #323232; display: block; height: 100dvh; /* top: 0; */ left: 0; margin: 0 auto; max-height: 100%; max-width: 100%; position: fixed; width: 100vw; } .zoom { background-color: black; display: inline-block; left: 60px; position: relative; top: 10px; transition: 0.5s; /* height: 50px; */ width: 250px; z-index: -1; } .zoomlvl { color: white; display: none; font-size: 26px; left: 30px; position: relative; text-align: left; top: 10px; z-index: 999; } /* Default inset for the +/− control. The open-drawer offset is the `.lside-open` override down in the Map Navbar section, next to the #boxbox rule it has to stay in step with (issue #65). */ .leaflet-control-zoom { left: 1em; transition: left 0.1s var(--transition-timing); } /* --------- ========================= Left and right drawers ========================= --------- */ /* 1. Above Leaflet map panes / controls (~400–1000) so drawer buttons receive clicks */ /* 2. Width animates 0 <-> --filter-drawer-width as a plain length. It must NOT be `width: 100%` + a `max-width` that only exists in the open state: on close the max-width snaps from 288px to `none` (not interpolable) while width is still mid-transition at 100%, so the drawer flashes to the full viewport width for the length of the animation. On #rside, which is anchored right, that threw the panel to the left edge of the screen and swept it back across. The constant `max-width: 100%` keeps narrow viewports covered without re-introducing a snapping value. */ .lside, .rside { align-items: center; display: flex; flex-direction: row; height: stretch; max-width: 100%; /* 2 */ position: fixed; transition: width 0.5s; width: 0; z-index: 1100; /* 1 */ } /* 3. Fill the drawer's height rather than being centred in it. The parent centres so the .lbtn tab sits mid-height, but that also centred this panel — and its content is taller than the map area, so it overflowed equally off the top and the bottom: the first filter row was cut off above the viewport, the tail pushed the page 400px taller, and `overflow-y: auto` below never got the chance to scroll because the element was never constrained. Stretching gives it a definite height so the internal scroll works as intended. */ /* 4. Take the width from the drawer, not from the content. With the default `flex: 0 1 auto` this panel sized itself to its widest child, so anything that changed the content — e.g. selecting a locale, which fills in the Overlays panels — moved the drawer's own edge. `flex: 1` claims the space #lside allocates (--filter-drawer-width, less the .lbtn tab) and holds it steady. `min-width: 0` is required with it: a flex item's default `min-width: auto` is its content-based minimum, which would stop the panel collapsing to 0 when the drawer closes. */ .lside__inner, .rside__inner { align-items: flex-start; align-self: stretch; /* 3 */ background: var(--color-white); color: var(--color-brand-black); display: flex; flex: 1; /* 4 */ flex-direction: column; min-width: 0; /* 4 */ overflow-x: hidden; overflow-y: auto; } .lside__inner { border-right: var(--border-width-lg) solid var(--color-brand-orange); } .rside__inner { border-left: var(--border-width-lg) solid var(--color-brand-orange); } /* A collapsed flex item can't shrink below its own border, so the closed drawer still renders a 3px sliver of .rside__inner's border-left. #rside is pinned to right: 0, which puts that sliver 3px past the right edge of the viewport and gives the whole page a horizontal scrollbar until the drawer is opened. `clip` rather than `hidden` so the vertical axis stays `visible` (`hidden` on one axis forces the other to `auto`, adding a scrollbar of its own). #lside is deliberately NOT clipped: its .lbtn tab overflows the collapsed drawer on purpose and has to stay visible and clickable. */ .rside { overflow-x: clip; } .scroll-content { /* Fill the drawer's width rather than sizing to content. Its parent (.lside__inner) sets align-items: flex-start, which leaves this item content-sized on the cross axis — and because it also scrolls vertically, a classic scrollbar gets ADDED to that content-derived width instead of being taken out of the content box. In Firefox that pushed this box ~15px wider than the drawer, dragging the sections inside it (most visibly Search) past the right edge once the Overlays panels had grown tall enough to need the scrollbar. macOS Chromium never showed it: overlay scrollbars occupy no layout width. Stretching pins the width to the drawer, so the scrollbar comes out of the content box in every engine. (PR #76 review) */ align-self: stretch; flex: 1; overflow-y: auto; } .lbtn { border-bottom-right-radius: var(--map-btn-border-radius); border-top-right-radius: var(--map-btn-border-radius); writing-mode: vertical-rl; } /* When open, #lside is a full-height box wider than the panel + tab actually drawn inside it (--filter-drawer-width vs --dropdown-menu-width). Combined with its z-index above the Leaflet control panes, that invisible remainder sat over the map and swallowed every click aimed at the +/− and globe controls beneath it — they rendered on top but were not clickable. Ignore pointer events on the container and re-enable them on the two children that are really there, so only the visible chrome is interactive. Predates this PR (the +/− were unreachable before #64; the globe joined them in #64 when #boxbox moved beside the drawer), but #68 is what puts the controls in their final spot, so the two changes belong together. */ .lside { pointer-events: none; } .lside__inner, .lbtn { pointer-events: auto; } /* Single arrow icon points right (">", "open") when the drawer is closed and rotates to point left ("<", "collapse") when open. lsidebtn() flips the button's value attribute (OFF/ON), which this reflects. */ .lbtn-arrow { display: inline-block; fill: currentColor; flex: 0 0 auto; height: 1em; left: -0.25em; max-width: none; position: relative; stroke: currentColor; stroke-width: 0; transition: transform var(--transition-duration) var(--transition-timing); vertical-align: middle; width: 1em; } .lbtn[value='ON'] { left: var(--filter-drawer-width); } .lbtn[value='ON'] .lbtn-arrow { transform: rotate(180deg); } .lside-section { display: block; padding: 1em; width: 100%; ul { list-style: none; margin: 0; padding: 0; } li { align-items: flex-start; column-gap: 0.5em; display: flex; } li + li { margin-top: 0.75em; } label { font-weight: 300; } } .lside-section + .lside-section { border-top: var(--border-width-md) solid var(--color-brand-black); } /* Toggle labels are dark; only genuine links (e.g. overlay archive links) get link styling. */ .lside a { color: var(--color-brand-black); display: block; text-decoration: none; &:hover { color: var(--currentcolor-70); } } /* A `.lside-native a` rule used to style the native-land.ca link inline in this row. #39 moved that link into the "ⓘ" tooltip, which Bootstrap appends to — outside .lside — so the rule was dead. It now lives with the other tooltip styles under .legend-info below. */ /* Overlay row labels are white by default (overlay.css) — dark on the white drawer. */ .lside .ovlabel { color: var(--color-brand-black); } .symbol-row-inner { align-items: center; display: flex; gap: 0.5em; } .symbol-icon { flex-shrink: 0; height: 2em; width: 2em; } .symbol-label { flex: 1; } .symbol-divider { border-top: var(--border-width-md) solid var(--color-brand-black); margin-block: 0.5em; } .symbol-heading { cursor: text; font-size: 1.1rem; margin-inline-start: 1em; text-align: center; } /* Per-type "ⓘ" info button in the left-drawer legend (issue #26). Muted by default, full-strength on hover/focus. In the flex "Show" rows the label (flex:1) pushes it to the right edge; in the Native Homelands row it sits inline after the label. */ .legend-info { background: transparent; color: inherit; cursor: pointer; display: inline-flex; line-height: 0; padding: 2px; } button.legend-info:hover, button.legend-info:active, button.legend-info:focus { background: transparent; box-shadow: none; color: inherit; } .legend-info-icon { height: 14px; opacity: 0.55; width: 14px; } .legend-info:hover .legend-info-icon, .legend-info:focus .legend-info-icon { opacity: 1; } /* The drawer's "ⓘ" tooltips stay open while the pointer is over them, so their link is clickable (drawer-tooltips.js). Popper leaves a 6px gap between the icon and the tooltip, though, and a mouse crossing that gap is over neither one — on a diagonal path it can slip out sideways and dismiss the tooltip before arriving. So bridge the gap with a transparent strip along whichever edge faces the icon, making the two a single continuous hover target. The strip sits OUTSIDE the tooltip box (`top: 100%` pins it to the far edge) rather than being inset padding, so it never overlaps the tooltip's own content and can't intercept a click meant for the link. */ .drawer-tooltip::before { --drawer-tooltip-bridge: 10px; content: ''; position: absolute; } /* Popper reports where the tooltip actually landed, which is the side the icon is on: `top` means the tooltip is above the icon, so the strip hangs below it. */ .drawer-tooltip[data-popper-placement^='top']::before { inset: 100% 0 calc(-1 * var(--drawer-tooltip-bridge)); } .drawer-tooltip[data-popper-placement^='bottom']::before { inset: calc(-1 * var(--drawer-tooltip-bridge)) 0 100%; } .drawer-tooltip[data-popper-placement^='left']::before { inset: 0 calc(-1 * var(--drawer-tooltip-bridge)) 0 100%; } .drawer-tooltip[data-popper-placement^='right']::before { inset: 0 100% 0 calc(-1 * var(--drawer-tooltip-bridge)); } /* Bootstrap appends tooltips to , so the link in the Native Homelands "ⓘ" tooltip sits outside .lside and inherits the global site link color — a mid-dark blue meant for white pages, at ~3.5:1 on the tooltip's near-black background (PR #101 review). Take the tooltip's own white and let the underline carry the affordance, as .info-footnote a and .leaflet-bottom a already do. */ .tooltip-inner a { color: inherit; text-decoration: underline; } /* Explicit because reset.css darkens links on hover, which moves the wrong way on a dark surface (same reason .leaflet-bottom a:hover exists below). */ .tooltip-inner a:hover, .tooltip-inner a:focus { color: inherit; } .lside-search { display: flex; flex-direction: column; gap: 0.5em; } /* --------- ========================= headings ========================= --------- */ /* --------- ========================= lside headings ========================= --------- */ .ltext h4 { color: #6c6a48; font-size: 30px; margin: 5px 0 0; } .ltext h5 { font-family: revert; font-size: 15px; margin: 5px 0 35px; } /* --------- ========================= Right side obj ========================= --------- */ .rside { right: 0; } .rside-section { flex: 0 0 auto; padding: 1em; ul { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; row-gap: 0.5em; } } .infoconfig li:first-of-type { font-size: 1.2em; } .rbtn { background-color: var(--color-white); border: 1px #c0bd95 solid; border-bottom-left-radius: 30px; border-top-left-radius: 30px; /* Button holds only the icon; this sets its currentColor. */ color: #080808; cursor: pointer; font-size: 20px; padding: 6px 12px; padding-left: 14px; position: fixed; right: 0; /* border-radius: 50% 0% 0% 50%; */ top: 50%; transition: 0.5s; z-index: 99; } .rbtn:hover { border: 3px #e8d20e solid; } /* The lightbulb drawer trigger is replaced by the top-right "i" button (#infoBtn) in the redesign (issue #26). #rBtn stays in the DOM because the drawer open/close logic (rsidebtn/openrside/closerside) reads and writes its value/position, but it is no longer shown. */ .rbtn-hidden { display: none; } /* Top-right circular Information trigger (comp). Positioned within #main (the map region wrapper, position:relative) so it rides the top-right of the map area without depending on header/nav height. */ .info-btn { position: absolute; /* rem so the inset matches the drawer's regardless of this button's own 1.2em font-size (see the note on --dropdown-menu-width). */ right: 1rem; top: 1em; /* `right` slides with the drawer (matches .rside's 0.5s); */ transition: right 0.5s ease; z-index: 1000; } /* Slide the button left of the open drawer, off the same --filter-drawer-width the drawer itself uses. openrside()/closerside() used to compute this into a --info-btn-right custom property, hardcoding `clamp(100px, 25vw, 249px)` — a second copy of the drawer's old width that this PR's resize left behind, so the button ended up 23px underneath the drawer's edge (issue #65). */ html.rside-open .info-btn { right: calc(var(--filter-drawer-width) + 1rem); } /* --------- ========================= rside headings ========================= --------- */ .rtext { font-size: 1.2em; font-weight: 700; margin-bottom: 0.5em; } .rtext h4 { color: #6c6a48; font-size: 30px; margin: 5px 0 0; } .rtext h5 { font-family: revert; font-size: 15px; margin: 5px 0 0; } /* hide the heading if the section is empty */ .rtext:has(+ .panelconfig > ul:empty) { display: none; } #information { color: var(--color-brand-black); font-size: 16px; font-weight: 700; } #information h3 { font-family: Lexend, sans-serif; font-size: 35px; font-weight: bold; padding-left: 10px; padding-top: 10px; } #noinformation::after { background-color: #db932f; /* Color of the line */ content: ''; /* Creates an empty box */ display: block; /* Makes it a block level element */ height: 10px; /* Desired height */ width: 100%; /* Full width of the parent */ } /* --------- ========================= lside headings ========================= --------- */ #navigation { border-bottom: 5px solid #b7b071; color: #ddd9cb; /* font-size: 40px; */ text-align: center; } .accordion-button { background-color: #dc932f; /* border-bottom-left-radius: 15px !important; */ /* border-bottom-right-radius: 15px !important; */ border-color: #dc932f; border-width: 0; color: var(--color-white); display: grid; font-family: Lexend, sans-serif; font-size: 16px; font-style: normal; font-weight: 700; margin-top: 1em; padding-bottom: 10px; padding-top: 10px; position: relative; text-align: center; /* border-radius: 0px 0px 19px 19px !important; */ } .accordion-button::after { display: none; } .arrow-icon { position: absolute; right: 24px; top: 10px; transition: all 0.5s; } .accordion-button > .arrow-icon { transform: rotateX(180deg); } .accordion-button:not(.collapsed) { background-color: #d7902d; color: #f1f2d8; } .accordion-button:not(.collapsed) > .arrow-icon { transform: rotate(0deg); } /* .accordion-button:is(.collapsed) { } */ .accordion-item { background-color: transparent; /* border: 8px solid red; */ box-sizing: border-box; /* border: none; display: flex; flex-direction: column; border: 8px solid red; */ min-height: 0; width: 100%; } .accordion { --bs-accordion-border-color: transparent; display: flex; flex-direction: column; /* heightstyle: "content"; */ height: 100%; width: 100%; /* border: 8px solid blue; */ } .accordion-header { } .accordion-body { display: flex; flex-direction: column; height: 100%; max-height: 100%; min-height: 0; overflow: hidden; padding: 0 1rem; transition: max-height 0.3s ease; /* border: 8px solid green; */ } .accordion-collapse { height: 100%; min-height: 0; } /* --------- ========================= Slider ========================= --------- */ .range { background: var(--color-white); border-radius: calc(var(--map-btn-border-radius) * 2); bottom: 1em; box-shadow: var(--box-shadow-default); left: 50vw; margin-inline: auto; max-width: 30em; padding: 1.6em 1em; position: absolute; transform: translateX(-50%); width: 90%; } /* The escape hatch for very short viewports: when reserving room for the slider would leave a detail panel too short to read, popup-panel.js hides the slider for as long as that panel is open and gives the panel the full map height. `visibility`, not `display`: popupPanelSliderTop() keeps measuring this strip while it is hidden, so the panel knows how much room it reclaimed. */ html.popup-panel-hides-slider .range { pointer-events: none; visibility: hidden; } .range .sliderValue { position: relative; width: 100%; } /* slider value appears when slider button is moved */ .range .sliderValue span { color: var( --color-brand-black ); /* color of the slider value inside the bubble */ font-size: var(--text-sm); font-weight: 700; height: 25px; /* year-slider.js positions the value bubble under the thumb via this prop. */ left: var(--bubble-left, 0); line-height: 45px; margin-top: -120px; opacity: 0.7; padding: 0; position: absolute; text-align: center; top: 55px; transform: scale(0); transform-origin: bottom; transition: opacity var(--transition-duration) var(--transition-timing); width: 50px; } .range .sliderValue span.hover, .range .sliderValue span.hover::after { opacity: 1; /* Full opacity on hover */ } /* slider value background appears when slider button is moved */ .range .sliderValue span::after { background: var(--color-brand-green); border: var(--border-width-lg) solid var(--color-brand-black); border-bottom-left-radius: 50%; border-top-left-radius: 50%; border-top-right-radius: 50%; content: ''; height: 3.5em; left: 50%; opacity: 0.7; position: absolute; transform: translateX(-50%) rotate(45deg); width: 3.5em; z-index: -1; } .range .sliderValue span.show { transform: scale(1); } .range .field { align-items: center; background-color: rgb(255 255 255 / 0.7); border-radius: 10px; display: flex; height: 30%; justify-content: center; opacity: 0.9; position: relative; transition: opacity 0.2s ease-in-out; z-index: -3; } .range:hover .field:hover { opacity: 1; } .field input[type='range'] { appearance: none; background: var(--color-brand-black); border-radius: 3px; height: 6px; max-height: 6px; outline: none; transition: opacity 0.2s; width: 100%; } .field input[type='range']::-moz-range-thumb { background: url('../img/slider.svg') no-repeat center; background-size: contain; border: 0; cursor: pointer; height: 40px; width: 40px; } .field input[type='range']::-webkit-slider-runnable-track { appearance: none; border-radius: 10px; /* Rounded corners */ cursor: pointer; height: 5px; margin-top: 0; width: 100%; } .field input[type='range']::-webkit-slider-thumb { appearance: none; background: transparent; background: url('../img/slider.svg') no-repeat center; cursor: pointer; height: 40px; margin-top: -20px; width: 40px; } .field .ticks { bottom: 0; display: block; height: 10px; left: 0; padding: 0; pointer-events: none; position: absolute; width: 100%; } .field .ticks .tick { background-color: var(--color-brand-black); height: 10px; /* year-slider.js positions each tick along the track via this prop. */ left: var(--tick-left, 0); position: absolute; transform: translateX(-50%); width: 2px; } .field .ticks .tick::before { bottom: -19px; content: attr(data-year); font-size: clamp(10px, 1vw, 14px); font-weight: 650; left: 50%; position: absolute; transform: translateX(-50%); } .field .ticks .tick:first-child::before { transform: translateX(-50%); } .field .ticks .tick:last-child::before { transform: translateX(-50%); } .hide-tick-text::before { display: none; /* Hide the content */ } /* .bubble { margin-top: 30px; background: #c0bd95;; color: white; padding: 4px 12px; position: absolute; border-radius: 4px; left: 50%; transform: translateX(-50%); } .bubble::after { content: ""; position: absolute; width: 2px; height: 2px; background: #c0bd95; top: -1px; left: 50%; } */ /* .chck { z-index: 999; position: absolute; top: 850px; left: 125px; font-size: 25px; } .slidecontainer { z-index: 9; position: relative; top: 800px; left: 15%; width: 70%; } .slidecontainer p { text-align-last: center; font-size: 31px; margin: 6px; font-weight: bold; } .slider { -webkit-appearance: none; appearance: none; width: 100%; height: 15px; border-radius: 5px; background: #6d6c6c; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s; } .slider:hover { opacity: 1; } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 25px; height: 25px; border-radius: 50%; background: #193027; cursor: pointer; } .slider::-moz-range-thumb { width: 25px; height: 25px; border-radius: 50%; background: #04AA6D; cursor: pointer; } */ /* --------- ========================= Drop Down Menu ========================= --------- */ .special-dropdown .dropdown-toggle { background-color: #c0bd95; border: 1px #c0bd95 solid; color: white; font-size: 10px; padding: 10px 15px; transition: 0.5s; } #special-dropdown .btn.btn-secondary.dropdown-toggle { border-radius: 15px; } .special-dropdown .dropdown-toggle:hover, .special-dropdown .dropdown-toggle:focus { background-color: #444; border: 1px #444 solid; color: white; } /* --------- ========================= Icons ========================= --------- */ .rbtn img { background-color: var(--color-white); } .lbtn img { height: 50px; margin: 0; width: 50px; } .modal-header img { height: 75px; width: 85px; } .modal-paragraph { font-size: clamp(8px, 1.2vw, 12px); margin-bottom: 0.5vh; padding-left: 0.2vw; padding-right: 0.2vw; } /* --------- ========================= Other ========================= --------- */ .container-fluid { font-size: x-large; height: 100%; } .navbar-brand { border: 0; height: 90%; /* padding-top: 10px; */ /* padding-bottom: 0.625rem; */ margin-left: 1rem; padding: 0; padding-left: 0; padding-right: 0; } .navbar-brand a { border: 0; margin: 0; padding: 0; } /* --------- ========================= Modal ========================= --------- */ /* General Modal Content Styling */ .modal-content { animation-duration: 0.4s; animation-name: animatetop; background-color: #faf8f8; border: 1px solid lightgreen; border-radius: 15px; /* height: auto; allowing the height to adjust based on content */ box-shadow: 0 4px 8px 0 rgb(0 0 0 / 0.2), 0 6px 20px 0 rgb(0 0 0 / 0.19); box-shadow: 0 0 0 3px white, 0 0 0 5px lightblue; /* This creates the second border effect */ font-size: 1rem; /* I changed font to font-size assuming you intended to specify the size */ left: -20px; margin: 1vh auto; max-width: 50vw; /* setting a max-width to ensure it's not too wide on large screens */ overflow: hidden; padding: 5px; position: relative; transform: rotateX(15deg) translateY(250px) scale(1.5); transition: all 0.3s; width: 38vw; /* updated to 80% for better mobile view */ } /* Media query for smaller screens */ @media (width <= 768px) { .modal-content { font-size: 0.9rem; /* adjust font size on smaller screens */ } } /* Remove separation lines */ .modal-header { height: 30%; overflow: clip; } .modal-footer { border: none; font-size: 0.5rem; height: 35%; overflow: hidden; } /* Modal Button General Styling */ .modal-button { border-radius: 15px; font-family: Lexend, sans-serif; padding: 10px 20px; /* adding some padding for better aesthetics */ } /* Specific Button Styling */ .custom-skip { background-color: #c0bd95; color: white; } .custom-start { background-color: var(--color-brand-black); color: white; } .custom-next { background-color: #c0bd95; color: white; } .custom-exit { background-color: #c0bd95; color: white; } /* Position 'Skip' button to the bottom left corner */ .modal-footer { display: flex; justify-content: space-between; } .single-button { justify-content: flex-end; } .modal-backdrop { display: none !important; z-index: 998 !important; } .modal { /* z-index: 999 !important; */ position: fixed; width: 100%; /* occupies 90% of the screen width */ } .modal-header { text-align: center; } .imodal-body { text-align: center; } .modal-body img { padding-bottom: 10px; } /* --------- ========================= Bandaids ========================= --------- */ .corner-image { height: auto; left: -10px; position: absolute; top: -10px; width: 45px; z-index: 10; } /* --------- ========================= Modal Box 3 ========================= --------- */ .modal-content-wrapper { align-items: center; /* Vertically center the items */ display: flex; } .modal-image { margin-left: 20px; margin-right: 20px; } .symbolconfig { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; /* display: inline; */ padding-top: 10px; width: 100%; } .overlayconfig { height: 100%; margin-left: -15px; margin-right: 0; padding: 0; /* background-color:#CCC; */ /* overflow-y:auto; */ /* float: left; */ position: inline-block; width: 118%; /* border: 2px solid black; */ } .oul { padding: 0; width: 100%; } .navtreeconfig { /* background-color:#CCC; */ /* overflow-y:auto; */ float: left; height: auto; margin-left: -5px; position: relative; width: 250px; /* border: 2px solid black; */ } /* Data-completeness note under the stats list (issue #72). A for the small-print semantics, so `display: block` is needed for it to lay out under the list and honour the top margin. An explicit font-size rather than relying on the UA's default shrink, so it doesn't compound if this ever nests. Quieter than the figures above it so it reads as a caveat, not another statistic. */ .info-footnote { color: #5c5c4a; display: block; font-size: 0.8rem; line-height: 1.4; margin: 0.75em 0 0; } .info-footnote a { color: inherit; text-decoration: underline; } .infopanel-label { color: #454628; font-family: Lexend, sans-serif; font-size: 22px; font-style: normal; font-weight: 700; line-height: 120%; } /* --------- ========================= Map Navbar ========================= --------- */ #boxbox { height: 3em; margin: 6.5em 0 0 1em; transition: margin-left 0.1s var(--transition-timing); } /* The +/− control and #boxbox both dodge the open filter drawer, so the two offsets sit together and are driven by the same --dropdown-menu-width the drawer itself uses. The zoom control used to be re-homed to a different Leaflet corner from lsidebtn() in map.js, which guessed at the drawer width in vw units and drifted once the drawer got a max-width; that JS is gone (issue #65). */ .lside-open #boxbox { margin-left: calc(var(--filter-drawer-width) - 2.5em); } .lside-open .leaflet-control-zoom { left: calc(var(--filter-drawer-width) - 2.5em); } .leaflet-control-container, .leaflet-container { font-size: 1em; } .leaflet-touch .leaflet-bar { border: 0; } /* Shapes the stacked +/− bar. The attribution control is exempt: it's a run of inline links, and turning it into a flex column put every "© Provider" on its own line in the bottom-right corner (issue #65). */ .leaflet-control:not(.leaflet-control-attribution) { align-items: stretch; display: flex; flex-direction: column; float: none; gap: var(--border-width-lg); } /* Ditto for the type scale: .leaflet-control-container is set to 1em above so the +/− bar can size in em, which also bumped the attribution from Leaflet's 12px to 16px. Put it back rather than un-scaling the whole container. */ .leaflet-control-attribution { font-size: 0.75em; } .leaflet-left .leaflet-control { margin-left: 0; } .leaflet-top .leaflet-control { margin-top: 1em; } .leaflet-touch .leaflet-bar a, .leaflet-bar a, .leaflet-control-zoom-in, .leaflet-control-zoom-out { background: var(--color-brand-black); border: 0; color: color-mix(in sRGB, var(--color-white), transparent 10%); cursor: pointer; font-family: inherit; font-size: 1rem; font-weight: 700; height: 2.25em; line-height: 2.25em; padding: 0; text-align: center; text-decoration: none; text-indent: 0; text-transform: uppercase; transition: background-color var(--transition-duration) var(--transition-timing), color var(--transition-duration) var(--transition-timing); width: 2.25em; } .leaflet-touch .leaflet-bar a:first-child { border-top-left-radius: 50%; border-top-right-radius: 50%; } .leaflet-touch .leaflet-bar a:last-child { border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; } #help-button { background-color: var(--color-white); border: none; border-radius: 9999px; border-radius: 50%; /* Makes the button perfectly circular */ color: #db932f; cursor: pointer; display: grid; display: inline-block; font-size: 20px; height: 50px; left: 50vw; line-height: 20px; /* Vertically centers the icon in the button */ margin-top: 15px; padding: 10px; place-items: center; position: static; text-align: center; /* Horizontally centers the icon in the button */ transition: box-shadow 0.3s ease, transform 0.3s ease; width: 50px; /* Equal width and height will ensure it stays circular */ } #help-showme { /* float: right; */ background-color: var(--color-white); border: solid; border-radius: 9999px; border-radius: 50%; /* Makes the button perfectly circular */ color: #db932f; cursor: pointer; font-size: 20px; height: 50px; line-height: 20px; /* Vertically centers the icon in the button */ padding: 10px; place-items: center; position: inline; text-align: center; /* Horizontally centers the icon in the button */ transition: box-shadow 0.3s ease, transform 0.3s ease; width: 50px; /* Equal width and height will ensure it stays circular */ } .leaflet-mytop { left: 80%; padding-top: 10px; pointer-events: none; position: absolute; top: 1%; /* possible because the placeholder's parent is the map */ transform: translateY(-5%); /* using the CSS3 Transform technique */ z-index: 1000; } .leaflet-mytop .leaflet-control { margin-bottom: 10px; } /* * NOTE: do NOT override `.leaflet-bottom` here. It's Leaflet's built-in * container for the attribution control (bottom-right), which we must keep * visible for Stadia/OSM license compliance. A previous rule set `top: 85vh` * (copied from the custom `.leaflet-mytop` placeholder above), which pushed the * attribution offscreen. Custom bottom placeholders, if ever needed, should use * their own class (see controls.js createCorner), not this. */ /* De-emphasize attribution links: inherit text color, faint underline. */ .leaflet-bottom a { color: currentColor; text-decoration: underline; text-decoration-color: var(--currentcolor-30); } /* Keep the link in the text color on hover/focus (overrides the global brand-color link hover). */ .leaflet-bottom a:hover, .leaflet-bottom a:focus { color: currentColor; } .leaflet-center { left: 25%; transform: translate(-50%, 0%); } .townpopup { background-color: rgb(200 200 200); border: solid black 1px; display: none; font-size: 12px; /* previewPane.js positions the popup at the click point via these props. */ left: var(--townpop-left, 100px); padding: 10px; position: absolute; text-align: justify; top: var(--townpop-top, 50px); width: 80vw; } /* previewPane.js opens the town popup; demo-data.js closeMe() closes it (issue #31). */ .townpopup.is-open { display: block; } .story-list-item { color: var(--color-brand-blue-deeper); cursor: pointer; display: block; text-decoration: underline; text-decoration-color: var(--currentcolor-50); text-underline-offset: 0.125em; &:hover, &:focus { color: color-mix(in sRGB, var(--color-brand-blue-deeper), black 20%); } } /* demo-data.js: populateZoomToList() builds a plain white link list. */ .zoom-to-list { list-style-type: none; } .zoom-to-list li, .zoom-to-list a { color: white; } /* searchlist.js: searchPlace() hides non-matching

s in the header locale menus. * Qualified with `li` on purpose: the menu items navpanelID.js builds carry the * .dropnav/.dropcol classes, so a bare `.search-hidden` (0-1-0) loses to * `.dropdown-menu .dropcol { display: block }` (0-2-0) above and the filtered-out * items stay visible — i.e. typing in the Basin/Dam/Town search does nothing. */ .dropdown-menu li.search-hidden { display: none; } /* See note 2 on `.lside, .rside`: a plain length, not 100% + a max-width that disappears when the drawer closes. */ html.lside-open #lside, html.rside-open #rside { width: var(--filter-drawer-width); } /* map.js: per-locale outline panes get a depth-based stacking order (issue #31). */ .locale-pane { z-index: var(--pane-z); } /* filter-menu.js: openMenu() slides the mobile filter list in and out. */ #filter-map.filter-closed { display: none; left: 1px; position: relative; } #filter-map.filter-open { display: block; left: 200px; position: absolute; }