clone

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

main
atlas / internal / app / assets / css / pin-detail.css
pin-detail.css 2.7K
1/* The location detail is a pane of the dock rather than a floating card: it2 replaces the results list when a pin is open and hands back to it when3 closed. */4.pin-detail {5 overflow: hidden auto;6 flex: 1;7 padding: 14px 18px 18px;8 -webkit-user-select: text;9 user-select: text;10 scrollbar-width: thin;11}1213.pin-detail[hidden] {14 display: none;15}1617/* The results pane yields while a detail is open. */18.dock-body:has(.pin-detail:not([hidden])) .dock-results {19 display: none;20}2122.detail-back {23 display: inline-flex;24 align-items: center;25 gap: 6px;26 margin-bottom: 14px;27 padding: 0;28 border: 0;29 background: none;30 color: var(--accent);31 font-size: 11px;32 font-weight: 700;33 letter-spacing: 0.04em;34 cursor: pointer;35}3637.detail-back:hover {38 color: var(--text);39}4041.detail-back svg {42 width: 11px;43 height: 11px;44 fill: none;45 stroke: currentColor;46 stroke-width: 2.4;47}4849.detail-category {50 display: flex;51 align-items: center;52 gap: 7px;53 color: var(--muted);54 font-size: 9px;55 font-weight: 800;56 letter-spacing: 0.12em;57 text-transform: uppercase;58}5960.detail-category #detail-dot {61 display: grid;62 width: 20px;63 height: 20px;64 flex: 0 0 20px;65 place-items: center;66 border-radius: 50%;67 background: var(--pin-color);68 color: #fff;69 font-size: 7px;70 letter-spacing: 0;71}7273#detail-dot.has-source-icon::before {74 width: 16px;75 height: 16px;76}7778.pin-detail h2 {79 margin: 10px 0 11px;80 font-family: "Arial Narrow", "Roboto Condensed", sans-serif;81 font-size: 24px;82 line-height: 1.1;83 color: var(--text-strong);84}8586.pin-detail > p {87 margin: 0;88 color: #b9b3a5;89 font-size: 12px;90 line-height: 1.55;91 white-space: pre-line;92}9394.detail-links {95 display: flex;96 flex-wrap: wrap;97 gap: 4px 14px;98 margin-top: 12px;99}100101.detail-links[hidden] {102 display: none;103}104105.detail-link {106 overflow: hidden;107 max-width: 100%;108 padding: 0;109 border: 0;110 background: none;111 color: var(--accent);112 font-size: 11px;113 font-weight: 600;114 text-decoration: underline;115 text-overflow: ellipsis;116 text-underline-offset: 3px;117 white-space: nowrap;118 cursor: pointer;119}120121.detail-link:hover {122 color: var(--text);123}124125.pin-detail dl {126 display: grid;127 grid-template-columns: 1fr 1fr;128 gap: 8px;129 margin: 17px 0 0;130 padding: 13px;131 border: 1px solid var(--line);132 border-radius: 8px;133 background: var(--panel-raised);134}135136.pin-detail dl div {137 min-width: 0;138}139140.pin-detail dt {141 color: #716c60;142 font-size: 8px;143 font-weight: 800;144 letter-spacing: 0.1em;145 text-transform: uppercase;146}147148.pin-detail dd {149 overflow: hidden;150 margin: 4px 0 0;151 color: var(--data);152 font-family: ui-monospace, SFMono-Regular, Menlo, monospace;153 font-size: 9px;154 text-overflow: ellipsis;155 white-space: nowrap;156}