clone

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

feat/atlas-next-horizon
atlas / internal / app / assets / css / map-pickers.css
map-pickers.css 2.4K
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:enabled {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/* A crumb with one option: still part of the trail, in the trail's own64 voice, but no chevron and nothing to press. */65.map-pickers select:disabled {66 padding-right: 8px;67 background-image: none;68 color: var(--text-strong);69 cursor: default;70 opacity: 1;71}7273#lens-field[hidden] {74 display: none;75}7677/* Adding a volume is beside the trail, not part of it: the button keeps to the78 far end of the row and speaks in the crumbs' own quiet register -- ghost79 until hovered, framed only then. */80.map-pickers .add-bundles {81 width: 30px;82 height: 30px;83 margin-left: auto;84 padding: 0;85 border: 0;86 border-radius: 7px;87 background: transparent;88 color: var(--muted);89 cursor: pointer;90}9192.map-pickers .add-bundles:hover {93 background: rgba(255, 255, 255, 0.05);94 color: var(--text-strong);95}9697.map-pickers .add-bundles:focus-visible {98 box-shadow: 0 0 0 2px rgba(58, 165, 201, 0.6);99 outline: none;100}101102.map-pickers .add-bundles svg {103 width: 14px;104 height: 14px;105}