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 / map-pickers.css
map-pickers.css 2.3K
1/* Game, map, and layer form a path, and the topbar sets them the way an IDE2 sets its breadcrumb or a design tool its team-project-file trail: plain3 crumbs separated by slashes, each one secretly a select. The captions stay4 for screen readers; sighted readers get the trail itself. */5.map-pickers {6 display: flex;7 align-items: center;8 min-width: 0;9 padding: 0 12px;10}1112.map-pickers label {13 display: flex;14 min-width: 0;15 align-items: center;16}1718.map-pickers label > span {19 position: absolute;20 overflow: hidden;21 width: 1px;22 height: 1px;23 clip-path: inset(50%);24 white-space: nowrap;25}2627.map-pickers label + label::before {28 padding: 0 10px;29 color: var(--muted);30 content: "/";31 font-size: 12px;32}3334.map-pickers select {35 max-width: 300px;36 height: 34px;37 padding: 0 21px 0 8px;38 border: 0;39 border-radius: 7px;40 outline: none;41 appearance: none;42 background: transparent no-repeat right 7px center;43 background-image:44 linear-gradient(45deg, transparent 50%, var(--muted) 50%),45 linear-gradient(135deg, var(--muted) 50%, transparent 50%);46 background-position: right 12px center, right 7px center;47 background-size: 5px 5px;48 color: var(--text-strong);49 font-size: 13px;50 font-weight: 600;51 text-overflow: ellipsis;52 white-space: nowrap;53}5455.map-pickers select:hover {56 background-color: rgba(255, 255, 255, 0.05);57}5859.map-pickers select:focus-visible {60 box-shadow: 0 0 0 2px rgba(58, 165, 201, 0.6);61}6263.map-pickers select:disabled {64 padding-right: 8px;65 background-image: none;66 color: var(--muted);67 cursor: default;68 opacity: 1;69}7071#lens-field[hidden] {72 display: none;73}7475/* Adding a volume is beside the trail, not part of it: the button keeps to the76 far end of the row and speaks in the crumbs' own quiet register -- ghost77 until hovered, framed only then. */78.map-pickers .add-bundles {79 width: 30px;80 height: 30px;81 margin-left: auto;82 padding: 0;83 border: 0;84 border-radius: 7px;85 background: transparent;86 color: var(--muted);87 cursor: pointer;88}8990.map-pickers .add-bundles:hover {91 background: rgba(255, 255, 255, 0.05);92 color: var(--text-strong);93}9495.map-pickers .add-bundles:focus-visible {96 box-shadow: 0 0 0 2px rgba(58, 165, 201, 0.6);97 outline: none;98}99100.map-pickers .add-bundles svg {101 width: 14px;102 height: 14px;103}