clone

an offline map explorer where each world, from a game map to a city's open data, ships as one .atlas file

archive/golden-reference
atlas / frontend / css / globe.css
globe.css 1.6K
1/* The globe pane sits exactly where the chart does, one toggle apart. The2 canvas inside is sized by the renderer, so the pane only has to hold the3 space and stay dark to its edges. */4.globe {5 position: absolute;6 inset: 0;7 background: #0b0e12;8 overflow: hidden;9}1011.globe[hidden] {12 display: none;13}1415/* The toggle keeps to the far end of the row with the add button, and16 speaks in its same quiet register: ghost until hovered, colored only17 while the planet is turned. */18/* The author display beats the browser's [hidden] rule, so hiding must be19 said again at author strength -- without this, a chart-only game keeps20 a dead globe button in its bar. */21.map-pickers .globe-toggle[hidden] {22 display: none;23}2425.map-pickers .globe-toggle {26 display: grid;27 width: 30px;28 height: 30px;29 margin-left: auto;30 padding: 0;31 place-items: center;32 border: 0;33 border-radius: 7px;34 background: transparent;35 color: var(--muted);36 cursor: pointer;37}3839.map-pickers .globe-toggle svg {40 width: 15px;41 height: 15px;42 fill: none;43 stroke: currentColor;44 stroke-linecap: round;45 stroke-width: 1.8;46}4748.map-pickers .globe-toggle:hover {49 background: rgba(255, 255, 255, 0.05);50 color: var(--text-strong);51}5253.map-pickers .globe-toggle:focus-visible {54 box-shadow: 0 0 0 2px rgba(58, 165, 201, 0.6);55 outline: none;56}5758.map-pickers .globe-toggle[aria-pressed="true"] {59 background: var(--accent-wash);60 color: var(--accent);61}6263/* When the toggle is present it carries the push to the right, and the add64 button follows one step behind it instead of bringing its own. */65.map-pickers .globe-toggle:not([hidden]) ~ .add-bundles {66 margin-left: 6px;67}