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 / search.css
search.css 1.8K
1.search-wrap {2 position: relative;3 display: flex;4 align-items: center;5 margin: 18px 17px 16px;6}78.search-wrap svg {9 position: absolute;10 left: 12px;11 width: 16px;12 fill: none;13 stroke: var(--muted);14 stroke-linecap: round;15 stroke-width: 1.7;16}1718.search-wrap input {19 width: 100%;20 height: 42px;21 padding: 0 45px 0 37px;22 border: 1px solid var(--line);23 border-radius: 8px;24 outline: none;25 background: #111318;26 color: var(--text);27 font-size: 13px;28}2930.search-wrap input::placeholder {31 color: #757064;32}3334.search-wrap input:focus {35 border-color: rgba(58, 165, 201, 0.5);36 box-shadow: 0 0 0 3px rgba(58, 165, 201, 0.06);37}3839.search-wrap kbd {40 position: absolute;41 right: 9px;42 padding: 3px 5px;43 border: 1px solid var(--line);44 border-radius: 4px;45 background: var(--panel-raised);46 color: var(--muted);47 font-family: inherit;48 font-size: 9px;49}5051.search-result {52 display: grid;53 width: 100%;54 grid-template-columns: 22px 1fr;55 gap: 10px;56 padding: 10px 11px;57 border: 0;58 border-bottom: 1px solid var(--line);59 background: transparent;60 text-align: left;61 cursor: pointer;62}6364.search-result:last-child {65 border-bottom: 0;66}6768.search-result:hover {69 background: rgba(255, 255, 255, 0.04);70}7172.search-result .result-dot {73 display: grid;74 width: 20px;75 height: 20px;76 margin-top: 1px;77 place-items: center;78 border-radius: 50%;79 background: var(--pin-color);80 box-shadow: 0 0 0 3px color-mix(in srgb, var(--pin-color) 18%, transparent);81 color: #fff;82 font-size: 7px;83 font-weight: 900;84}8586.search-result strong,87.search-result small {88 display: block;89}9091.search-result strong {92 overflow: hidden;93 font-size: 12px;94 text-overflow: ellipsis;95 white-space: nowrap;96}9798.search-result small,99.search-empty {100 margin-top: 3px;101 color: var(--muted);102 font-size: 10px;103}104105.search-empty {106 padding: 13px;107}108