/* The map page and the group page behind its Details buttons. Every colour here is a token from app.css, so both themes come out right without this file knowing which one is on. */ /* ------------------------------------------------------------- the panel */ /* The pairing between a circle and the rows it stands for is the whole point of the highlight, so it has to be visible at a glance without moving the row: a bar down the side and a lift out of the panel's background. */ .panel .list li.highlighted { background: var(--panel-2); border-left: 3px solid var(--accent); padding-left: 8px; margin-left: -11px; color: var(--ink); } .panel .list li .pill { margin-left: 4px; vertical-align: 1px; } /* How many of the ranked reports the list below is showing. A sentence about the list rather than a row in it, so it takes the heading's size and none of a row's border, and it sits tight under the heading it qualifies. Empty until the first feed lands, and empty again when nothing came back -- the list says "No reports in view." for itself -- so the margins come off when there is nothing to say, rather than leaving a gap that reads as a line that failed to load. */ .panel .list .hint { margin: -6px 0 8px; font-size: 12px; } .panel .list .hint:empty { margin: 0; } /* Why a row is near the top: the two stored signals the ranking leans on hardest, in the colours their circles are drawn in. Outlined rather than filled, which is how a repeat is drawn on the map and for the same reason -- these sit beside a status pill that is already a solid block of colour, and two of those on one row read as two statuses. It also keeps them legible in both themes: the tokens are chosen to be seen against the page, and a fixed ink over them would only be right in one of the two. */ .panel .list li .pill.repeat, .panel .list li .pill.hotspot { background: none; border: 1px solid currentColor; padding: 0 7px; } .panel .list li .pill.repeat { color: var(--repeat); } .panel .list li .pill.hotspot { color: var(--hotspot); } .panel .actions .hint a { color: var(--accent-2); } .photo-hint { margin: 4px 0 0; font-size: 12px; } /* ------------------------------------------------------- the detail panel */ /* What was clicked goes at the top of the panel's own contents rather than in place of them, so the filters, the four layer checkboxes and the two lists keep the listeners and the settings they were given when map.js loaded. What it does stand in for is the three sections that are about the viewport rather than about anything in it -- the stats, the filters and the buttons -- which is what the sibling combinator below says, and why #panelDetail comes first inside .panel-inner in src/Views/map.php. The two lists are deliberately not among them. Selecting a circle lights up the rows it stands for in Probably Still There and Most Reported Places, and a selection is the only thing that can light anything up, so a rule that put the lists away while a summary was on screen would be a rule that made the highlight unobservable in every state the page has. This used to be a Leaflet popup, and the whole of the vendored-popup re-theming that lived here went with it: a popup is white where the site is dark, it paints every anchor inside itself Leaflet blue, and it covers the map at the moment the reader most wants to see where the thing they clicked is. Out here the summary is inside .panel, which is the site's own furniture, so it is the site's own colours without a fight. */ .panel-detail { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.5; } .panel-detail[hidden] { display: none; } .panel-detail:not([hidden]) ~ section:not(.list) { display: none; } .panel-detail .dim { font-size: 12px; } .panel-detail code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--panel-2); border-radius: 4px; padding: 0 4px; } .panel-detail a.mono { color: var(--accent-2); } .detail-actions { margin: 8px 0 0; } /* The reports a summary carries, where the thing that was clicked has some -- a hot spot's own, so far. They are `.panel .list` rows out of app.css and not a second kind of row: a report inside a hot spot and a report in the panel's own list are the same thing said in the same place, they hover and fly the map the same way, and one stylesheet for both is what keeps them from drifting into two. What is left here is where the list sits -- inside the summary rather than beside it, so it opens under the line above it and closes on the link out below. */ .panel-detail .list { margin: 10px 0 0; } .panel-detail .list .empty { margin: 6px 0 0; font-size: 12px; } /* How much has been reported inside a zone's outline or a watched place's ring, which arrives a moment after the rest of that summary and so has to be an element of its own to be written into. A paragraph, because it is a line under the line above it rather than a clause of it -- and given its margins here, since nothing resets a

for the panel and the browser's own 1em would push the link out below it half a summary away. */ .panel-detail .zone-reports, .panel-detail .watch-reports { margin: 6px 0 0; } /* Out of the flow and up in the corner, so the summary starts at the top of the panel rather than under a button. */ .panel-close { float: right; margin-left: 8px; font-size: 16px; line-height: 1.2; } /* ------------------------------------------------- the locate button */ /* Leaflet's bar styles anchors and this is a real