style.css
| 1 | /* data-theme on <html> forces a theme. Without it the system setting decides. */ |
| 2 | :root { |
| 3 | color-scheme: light dark; |
| 4 | --bg: light-dark(#f9fafb, #111827); |
| 5 | --surface: light-dark(white, #1f2937); |
| 6 | --fg: light-dark(#1f2937, #e5e7eb); |
| 7 | --muted: light-dark(#6b7280, #9ca3af); |
| 8 | --border: light-dark(#d1d5db, #4b5563); |
| 9 | --line: light-dark(#e5e7eb, #374151); |
| 10 | --hover: light-dark(#f3f4f6, #374151); |
| 11 | --accent-bg: light-dark(#eff6ff, #1e3a8a); |
| 12 | --accent-fg: light-dark(#1d4ed8, #bfdbfe); |
| 13 | --error: light-dark(#b91c1c, #f87171); |
| 14 | } |
| 15 | :root[data-theme="light"] { color-scheme: light; } |
| 16 | :root[data-theme="dark"] { color-scheme: dark; } |
| 17 | |
| 18 | * { box-sizing: border-box; } |
| 19 | html, body { height: 100%; margin: 0; } |
| 20 | body { |
| 21 | font: 15px/1.4 system-ui, sans-serif; |
| 22 | color: var(--fg); |
| 23 | background: var(--bg); |
| 24 | display: flex; |
| 25 | flex-direction: column; |
| 26 | } |
| 27 | button, input, select { font: inherit; } |
| 28 | button { |
| 29 | padding: 0.35em 0.9em; |
| 30 | border: 1px solid var(--border); |
| 31 | border-radius: 6px; |
| 32 | background: var(--surface); |
| 33 | cursor: pointer; |
| 34 | } |
| 35 | button:hover { background: var(--hover); } |
| 36 | button.primary { background: #2563eb; border-color: #2563eb; color: white; } |
| 37 | button:disabled { opacity: 0.5; cursor: default; } |
| 38 | input, select { padding: 0.35em 0.6em; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--fg); } |
| 39 | .error { color: var(--error); } |
| 40 | .hint { color: var(--muted); font-size: 0.9em; } |
| 41 | code { background: var(--hover); padding: 0.1em 0.3em; border-radius: 4px; } |
| 42 | |
| 43 | header { |
| 44 | display: flex; |
| 45 | align-items: center; |
| 46 | gap: 0.75em; |
| 47 | padding: 0.5em 1em; |
| 48 | background: var(--surface); |
| 49 | border-bottom: 1px solid var(--line); |
| 50 | } |
| 51 | header .brand { display: block; margin-right: 0.5em; } |
| 52 | header > * { flex-shrink: 0; } |
| 53 | header button { white-space: nowrap; } |
| 54 | header nav { display: flex; gap: 0.25em; flex: 1 1 auto; } |
| 55 | header nav button { border-color: transparent; } |
| 56 | header nav button.active { background: var(--accent-bg); color: var(--accent-fg); } |
| 57 | header .user { color: var(--muted); } |
| 58 | main { flex: 1; min-height: 0; display: flex; } |
| 59 | |
| 60 | .login { |
| 61 | margin: 15vh auto; |
| 62 | width: min(320px, 90vw); |
| 63 | display: flex; |
| 64 | flex-direction: column; |
| 65 | gap: 0.75em; |
| 66 | } |
| 67 | .login label, .settings label { display: flex; flex-direction: column; gap: 0.2em; } |
| 68 | |
| 69 | .map-page { flex: 1; display: flex; min-height: 0; } |
| 70 | .map-page aside { |
| 71 | width: 300px; |
| 72 | overflow-y: auto; |
| 73 | padding: 0.75em; |
| 74 | background: var(--surface); |
| 75 | border-right: 1px solid var(--line); |
| 76 | } |
| 77 | .map-page .map { flex: 1; } |
| 78 | .people { list-style: none; margin: 0 0 1em; padding: 0; } |
| 79 | .people li { padding: 0.5em; border-radius: 6px; cursor: pointer; } |
| 80 | .people li:hover { background: var(--hover); } |
| 81 | .people li.selected { background: var(--accent-bg); } |
| 82 | .people .name { font-weight: 600; } |
| 83 | .people .dot { |
| 84 | display: inline-block; |
| 85 | width: 0.7em; |
| 86 | height: 0.7em; |
| 87 | border-radius: 50%; |
| 88 | margin-right: 0.4em; |
| 89 | } |
| 90 | |
| 91 | .settings { flex: 1; overflow-y: auto; padding: 1em; } |
| 92 | .settings section { |
| 93 | max-width: 640px; |
| 94 | margin: 0 auto 1.5em; |
| 95 | padding: 1em; |
| 96 | background: var(--surface); |
| 97 | border: 1px solid var(--line); |
| 98 | border-radius: 8px; |
| 99 | } |
| 100 | .settings h2 { margin-top: 0; font-size: 1.1em; } |
| 101 | .settings h3 { font-size: 1em; margin-bottom: 0.3em; } |
| 102 | .settings form { display: flex; flex-wrap: wrap; gap: 0.5em; align-items: end; } |
| 103 | .settings table { width: 100%; border-collapse: collapse; } |
| 104 | .settings td, .settings th { text-align: left; padding: 0.3em 0.5em 0.3em 0; } |
| 105 | .settings th { color: var(--muted); font-weight: normal; font-size: 0.9em; } |
| 106 | |
| 107 | @media (max-width: 700px) { |
| 108 | .map-page { flex-direction: column; } |
| 109 | .map-page aside { width: auto; max-height: 35vh; border-right: 0; border-bottom: 1px solid var(--line); } |
| 110 | header { gap: 0.5em; padding: 0.5em; } |
| 111 | header .user { display: none; } |
| 112 | } |
| 113 | |
| 114 | .settings .tabs { |
| 115 | display: flex; |
| 116 | flex-wrap: wrap; |
| 117 | gap: 0.25em; |
| 118 | max-width: 640px; |
| 119 | margin: 0 auto 1em; |
| 120 | } |
| 121 | .settings .tabs button { border-color: transparent; background: transparent; } |
| 122 | .settings .tabs button.active { background: var(--accent-bg); color: var(--accent-fg); } |
| 123 | .settings label.radio { flex-direction: row; align-items: center; gap: 0.4em; margin: 0.3em 0; } |
| 124 | .settings td.actions { text-align: right; white-space: nowrap; } |
| 125 | code.copy { word-break: break-all; user-select: all; } |
| 126 | .map-page aside label { display: flex; flex-direction: column; gap: 0.2em; margin-bottom: 0.5em; } |
| 127 | |
| 128 | button.theme { display: flex; align-items: center; padding: 0.4em; } |
| 129 | |
| 130 | /* The street maps only have light styles. Inverting them gives a usable dark map. */ |
| 131 | :root[data-theme="dark"] .leaflet-tile-pane .street { filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(0.9); } |
| 132 | @media (prefers-color-scheme: dark) { |
| 133 | :root:not([data-theme="light"]) .leaflet-tile-pane .street { filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(0.9); } |
| 134 | } |
| 135 | .leaflet-container .leaflet-bar a, |
| 136 | .leaflet-container .leaflet-control-attribution, |
| 137 | .leaflet-container .leaflet-control-layers, |
| 138 | .leaflet-tooltip { background: var(--surface); color: var(--fg); border-color: var(--line); } |
| 139 | .leaflet-container .leaflet-control-attribution a { color: var(--accent-fg); } |
| 140 | |
| 141 | .send-location { border-top: 1px solid var(--line); margin-top: 1em; padding-top: 0.5em; } |
| 142 | .send-location h3 { font-size: 1em; margin: 0.3em 0 0.6em; } |
| 143 | .send-location .auto-send { display: flex; align-items: center; gap: 0.4em; margin-top: 0.6em; } |
| 144 | .send-location .auto-send input[type="number"] { width: 5em; } |
| 145 | .map-page aside .send-location label.radio { flex-direction: row; align-items: center; gap: 0.4em; margin: 0; } |
| 146 | .settings fieldset { flex-basis: 100%; border: 1px solid var(--border); border-radius: 6px; margin: 0; padding: 0.3em 0.8em 0.5em; } |
| 147 | .settings fieldset legend { padding: 0 0.3em; } |
| 148 | .settings .device-choice { padding-left: 1.6em; } |
| 149 | .settings .device-choice label:has(input:disabled) { color: var(--muted); } |
| 150 | .guest-title { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
| 151 | /* Leaflet's own icon is an image file we do not ship. */ |
| 152 | .leaflet-container .leaflet-control-layers-toggle { |
| 153 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 8l10 5 10-5z'/%3E%3Cpath d='m2 13 10 5 10-5'/%3E%3C/svg%3E"); |
| 154 | background-size: 24px 24px; |
| 155 | } |
| 156 |