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 / dock.css
dock.css 3.3K
1/* The right dock: a Google-Maps-style results shortlist that pushes into the2 location detail, folding away to a thin rail when the map deserves every3 pixel. It lives beside the map as a sibling column, so it can never paint4 over the overview the way the old floating toast did. */5.dock {6 display: flex;7 overflow: hidden;8 width: var(--dock);9 flex-direction: column;10 border-left: 1px solid var(--line);11 background: var(--panel);12 grid-column: 3;13 grid-row: 2;14 transition: width 200ms cubic-bezier(0.22, 0.61, 0.36, 1);15}1617.dock[hidden] {18 display: none;19}2021/* The whole header folds the dock, not the chevron alone: the bar carries a22 count and a flag, neither of which is anything to press, so a click anywhere23 along it can only mean the one thing. */24.dock-readout {25 display: flex;26 width: 100%;27 align-items: center;28 gap: 8px;29 padding: 12px 16px;30 border: 0;31 border-bottom: 1px solid var(--line);32 background: var(--panel-raised);33 cursor: pointer;34 color: var(--data);35 font-family: ui-monospace, SFMono-Regular, Menlo, monospace;36 font-size: 10px;37 font-weight: 600;38 letter-spacing: 0.1em;39 text-transform: uppercase;40 white-space: nowrap;41}4243.dock-flag {44 overflow: hidden;45 max-width: 130px;46 padding: 2px 7px;47 border-radius: 4px;48 background: var(--accent-wash-strong);49 color: var(--accent);50 text-overflow: ellipsis;51}5253.dock-flag[hidden] {54 display: none;55}5657.dock-readout:hover {58 background: #22262c;59}6061.dock-readout:focus-visible {62 outline: 1px solid var(--accent);63 outline-offset: -2px;64}6566.dock-fold {67 display: grid;68 width: 22px;69 height: 22px;70 margin-left: auto;71 border-radius: 5px;72 color: var(--muted);73 place-items: center;74}7576.dock-readout:hover .dock-fold {77 background: rgba(255, 255, 255, 0.06);78 color: var(--text);79}8081.dock-fold svg {82 width: 13px;83 height: 13px;84 fill: none;85 stroke: currentColor;86 stroke-width: 2;87}8889.dock-body {90 display: flex;91 min-height: 0;92 flex: 1;93 flex-direction: column;94}9596.dock-results {97 overflow: hidden auto;98 flex: 1;99 scrollbar-width: thin;100}101102.dock-results[hidden] {103 display: none;104}105106.dock-results .search-result.is-selected {107 background: var(--accent-wash);108 box-shadow: inset 3px 0 0 var(--accent);109}110111.dock-note {112 padding: 11px 16px;113 color: var(--muted);114 font-size: 10.5px;115}116117/* Folded: a labelled rail that keeps the way back on screen. */118.dock-rail-label {119 display: none;120}121122.dock.is-folded {123 width: 41px;124}125126.dock.is-folded .dock-readout {127 justify-content: center;128 padding: 12px 0;129}130131.dock.is-folded .dock-readout > :not(.dock-fold) {132 display: none;133}134135.dock.is-folded .dock-fold {136 margin-left: 0;137}138139.dock.is-folded .dock-fold svg {140 transform: rotate(180deg);141}142143.dock.is-folded .dock-body {144 display: none;145}146147.dock.is-folded .dock-rail-label {148 display: block;149 overflow: hidden;150 min-height: 0;151 margin: 14px auto 0;152 color: var(--muted);153 font-family: ui-monospace, SFMono-Regular, Menlo, monospace;154 font-size: 9.5px;155 font-weight: 700;156 letter-spacing: 0.18em;157 text-transform: uppercase;158 writing-mode: vertical-rl;159}160161/* The open location, in the accent the results list marks its selected row162 with, so the rail says the same thing the panel behind it would. */163.dock-rail-name {164 color: var(--accent);165}166167.dock-rail-name[hidden] {168 display: none;169}