randy
4a3862189f
The .pmtiles files themselves carry no record of what upstream snapshot they came from — only a local mtime. Each successful build now writes a small sidecar (offline.pmtiles.meta.json: the Protomaps build date used; terrain.pmtiles.meta.json: the Mapterhorn source names/md5sums) recording that, surfaced in the panel next to the existing size/updated line. New GET .../check-update routes compare the recorded build against the live upstream index/manifest — true/false/null, null meaning "don't know" (no local build yet, or the check itself failed) rather than a false "no". Kept separate from the plain status endpoints (which map.js's own topbar dot hits on every page load) since this one reaches an external service; only called once when the Offline data panel is actually opened. Also: flag emoji next to each country in the picker (derived from the ISO code via Unicode regional indicators, no image assets needed).
1810 lines
30 KiB
CSS
1810 lines
30 KiB
CSS
html, body {
|
|
height: 100%;
|
|
margin: 0;
|
|
font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
/* Router-carved-signage display face (docs/nps-resources.adoc), used only
|
|
for the topbar wordmark below — a full body-text swap is a separate,
|
|
bigger decision this isn't. Bold is the only weight vendored since
|
|
.topbar__brand only ever renders at font-weight 700. */
|
|
@font-face {
|
|
font-family: "National Park";
|
|
src: url("/vendor/national-park-typeface/NationalPark-Bold.woff2") format("woff2");
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
#app {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.topbar {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 44px;
|
|
padding: 0 16px;
|
|
background: #1a1a1a;
|
|
}
|
|
|
|
.topbar__brand {
|
|
font-family: "National Park", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: #fff;
|
|
}
|
|
|
|
.topbar__center {
|
|
margin: 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
}
|
|
|
|
.topbar__coords,
|
|
.topbar__sun {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
font-size: 12px;
|
|
font-variant-numeric: tabular-nums;
|
|
color: #bbb;
|
|
}
|
|
|
|
.topbar__sun {
|
|
gap: 14px;
|
|
}
|
|
|
|
.topbar__group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.topbar__icon {
|
|
display: flex;
|
|
width: 13px;
|
|
height: 13px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.topbar__icon svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.topbar__coords {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.topbar__coords:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
.topbar__sun[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.topbar__offline-status {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: #666;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.topbar__offline-status--ready {
|
|
background: #2a9d8f;
|
|
}
|
|
|
|
.topbar__auth {
|
|
margin-left: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 13px;
|
|
color: #ccc;
|
|
}
|
|
|
|
.topbar__auth a {
|
|
color: #fff;
|
|
}
|
|
|
|
.app-body {
|
|
flex: 1;
|
|
display: flex;
|
|
min-height: 0;
|
|
}
|
|
|
|
.sidebar {
|
|
flex: 0 0 52px;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 8px 0;
|
|
background: #fff;
|
|
border-right: 1px solid #ddd;
|
|
/* No overflow-y:auto here: setting only one axis to a clipping value
|
|
forces the browser to compute the other axis as "auto" too (CSS
|
|
Overflow spec), which would clip the flyouts — they intentionally
|
|
poke out past the sidebar's own width via left:44px. */
|
|
}
|
|
|
|
.sidebar-item {
|
|
position: relative;
|
|
}
|
|
|
|
.sidebar-group-label {
|
|
width: 28px;
|
|
height: 1px;
|
|
margin: 4px 0;
|
|
background: #ddd;
|
|
}
|
|
|
|
.sidebar-group-label:first-child {
|
|
display: none;
|
|
}
|
|
|
|
.sidebar-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: none;
|
|
border-radius: 6px;
|
|
background: none;
|
|
color: #444;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sidebar-icon svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.sidebar-icon:hover {
|
|
background: #f0f0f0;
|
|
}
|
|
|
|
.sidebar-icon.active {
|
|
background: #dbe9ff;
|
|
color: #1a5fb4;
|
|
}
|
|
|
|
.sidebar-flyout {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 44px;
|
|
z-index: 20;
|
|
min-width: max-content;
|
|
background: #fff;
|
|
border: 1px solid #ddd;
|
|
border-radius: 6px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
padding: 6px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.sidebar-flyout[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.sidebar-flyout__option {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 6px 10px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
background: none;
|
|
font: inherit;
|
|
font-size: 13px;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sidebar-flyout__option:hover {
|
|
background: #f0f0f0;
|
|
}
|
|
|
|
.sidebar-flyout__option.active {
|
|
background: #dbe9ff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
#map {
|
|
flex: 1;
|
|
min-width: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.radar-control__playback {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.radar-control__play {
|
|
border: none;
|
|
background: none;
|
|
padding: 2px 4px;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.radar-control__scrub {
|
|
width: 110px;
|
|
}
|
|
|
|
.radar-control__time {
|
|
font-variant-numeric: tabular-nums;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.radar-control__forecast {
|
|
margin-top: 6px;
|
|
padding-top: 6px;
|
|
border-top: 1px solid #eee;
|
|
}
|
|
|
|
.radar-control__forecast-hours {
|
|
display: flex;
|
|
gap: 10px;
|
|
overflow-x: auto;
|
|
padding-bottom: 6px;
|
|
margin-bottom: 4px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.radar-control__forecast-hour {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 2px;
|
|
flex: 0 0 auto;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.radar-control__forecast-hour span:first-child {
|
|
color: #888;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.radar-control__forecast-day {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 2px 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.radar-control__forecast-day span:first-child {
|
|
width: 2.2em;
|
|
color: #888;
|
|
}
|
|
|
|
.radar-control__forecast-day span:nth-child(3) {
|
|
margin-left: auto;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.radar-control__forecast-stale {
|
|
margin: 4px 0 0;
|
|
color: #888;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.shadow-control__time {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.shadow-control__slider {
|
|
width: 110px;
|
|
}
|
|
|
|
.shadow-control__clock {
|
|
font-variant-numeric: tabular-nums;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.shadow-control__hint {
|
|
margin: 6px 0 0;
|
|
color: #888;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.basemap-panel {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 52px;
|
|
width: 300px;
|
|
max-width: 90vw;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #fff;
|
|
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
|
|
font-size: 13px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.basemap-panel[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.basemap-panel__header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 10px 12px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.basemap-panel__close {
|
|
border: none;
|
|
background: none;
|
|
font-size: 18px;
|
|
line-height: 1;
|
|
padding: 0 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.basemap-panel__list {
|
|
padding: 6px;
|
|
}
|
|
|
|
.basemap-panel__option {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
background: none;
|
|
font: inherit;
|
|
font-size: 14px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.basemap-panel__option:hover {
|
|
background: #f0f0f0;
|
|
}
|
|
|
|
.basemap-panel__option.active {
|
|
background: #dbe9ff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.basemap-panel__check {
|
|
color: #1a5fb4;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.basemap-panel__option.active .basemap-panel__check {
|
|
visibility: visible;
|
|
}
|
|
|
|
.offline-data-panel__body {
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
.offline-data-panel__regions-label {
|
|
margin: 0 0 4px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.offline-data-panel__region-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
max-height: 220px;
|
|
overflow-y: auto;
|
|
border: 1px solid #eee;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.offline-data-panel__region-list label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.offline-data-panel__region-list label:hover {
|
|
background: #f0f0f0;
|
|
}
|
|
|
|
.offline-data-panel__region-status {
|
|
padding: 6px 8px;
|
|
color: #888;
|
|
}
|
|
|
|
.offline-data-panel__apply {
|
|
margin-top: 8px;
|
|
width: 100%;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
background: #fff;
|
|
padding: 6px 8px;
|
|
font: inherit;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.offline-data-panel__apply:hover {
|
|
background: #f0f0f0;
|
|
}
|
|
|
|
.offline-data-panel__apply:disabled {
|
|
opacity: 0.5;
|
|
cursor: default;
|
|
}
|
|
|
|
.offline-data-panel__row {
|
|
margin-top: 14px;
|
|
padding-top: 10px;
|
|
border-top: 1px solid #eee;
|
|
}
|
|
|
|
.offline-data-panel__status {
|
|
margin: 6px 0 0;
|
|
color: #666;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.offline-data-panel__update-badge {
|
|
color: #b8860b;
|
|
}
|
|
|
|
.gpx-panel {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 52px;
|
|
width: 300px;
|
|
max-width: 90vw;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #fff;
|
|
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
|
|
font-size: 13px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.gpx-panel[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.gpx-panel__header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 10px 12px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.gpx-panel__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
}
|
|
|
|
.gpx-panel__action {
|
|
width: 30px;
|
|
height: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: none;
|
|
border-radius: 6px;
|
|
background: none;
|
|
color: #444;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* This class's own "display: flex" above otherwise wins over the browser
|
|
default "[hidden] { display: none }" — same specificity, but an author
|
|
rule always outranks a user-agent one — so GpxPanelControl#mount hiding
|
|
these (logged out: no upload/new-folder) had no visual effect at all. */
|
|
.gpx-panel__action[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.gpx-panel__action svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
.gpx-panel__action:hover {
|
|
background: #f0f0f0;
|
|
}
|
|
|
|
.gpx-panel__close {
|
|
border: none;
|
|
background: none;
|
|
font-size: 18px;
|
|
line-height: 1;
|
|
padding: 0 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.gpx-upload__status {
|
|
margin: 0 12px 10px;
|
|
color: #666;
|
|
}
|
|
|
|
.gpx-tree {
|
|
/* flex:1 (not just overflow-y) so the tree fills the rest of the panel
|
|
even when short/empty — otherwise the blank space below it wouldn't
|
|
be part of the drop target and dropping a file there would silently
|
|
do nothing. */
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
.gpx-tree ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding-left: 16px;
|
|
}
|
|
|
|
.gpx-tree > ul {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.gpx-tree summary {
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.gpx-tree__folder-row {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 4px;
|
|
width: calc(100% - 18px);
|
|
}
|
|
|
|
.gpx-tree summary.gpx-drop-hover {
|
|
background: #eef5fd;
|
|
outline: 1px dashed #4a90d9;
|
|
}
|
|
|
|
.gpx-tree__file {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 2px 0;
|
|
cursor: grab;
|
|
}
|
|
|
|
.gpx-tree__file label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
flex: 1;
|
|
min-width: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.gpx-tree__file-name {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.gpx-tree__file-name:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.gpx-tree__kind-icon {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
color: #999;
|
|
}
|
|
|
|
.gpx-tree__kind-icon svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.gpx-tree__download-wrapper {
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
}
|
|
|
|
.gpx-tree__download {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
border: none;
|
|
background: none;
|
|
color: #999;
|
|
padding: 0 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.gpx-tree__download svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.gpx-tree__download:hover {
|
|
color: #333;
|
|
}
|
|
|
|
.gpx-tree__download-menu {
|
|
position: absolute;
|
|
top: 100%;
|
|
right: 0;
|
|
z-index: 20;
|
|
min-width: max-content;
|
|
background: #fff;
|
|
border: 1px solid #ddd;
|
|
border-radius: 6px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
padding: 4px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.gpx-tree__download-menu[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.gpx-tree__download-menu-item {
|
|
display: block;
|
|
padding: 6px 10px;
|
|
border-radius: 4px;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.gpx-tree__download-menu-item:hover {
|
|
background: #f0f0f0;
|
|
}
|
|
|
|
.gpx-tree__delete {
|
|
flex-shrink: 0;
|
|
border: none;
|
|
background: none;
|
|
color: #999;
|
|
font-size: 14px;
|
|
line-height: 1;
|
|
padding: 0 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.gpx-tree__delete:hover {
|
|
color: #e63946;
|
|
}
|
|
|
|
.gpx-tree__empty {
|
|
color: #888;
|
|
font-style: italic;
|
|
}
|
|
|
|
.gpx-tree.gpx-drop-hover {
|
|
outline: 1px dashed #4a90d9;
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
.gpx-legend {
|
|
flex-shrink: 0;
|
|
max-height: 160px;
|
|
overflow-y: auto;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 2px 8px;
|
|
padding: 8px 12px;
|
|
border-top: 1px solid #1a1a1a;
|
|
}
|
|
|
|
.gpx-legend[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.gpx-legend__item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 3px 4px;
|
|
border: none;
|
|
border-radius: 3px;
|
|
background: none;
|
|
font: inherit;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
color: #1a1a1a;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.gpx-legend__item:hover {
|
|
background: #f0f0f0;
|
|
}
|
|
|
|
.gpx-legend__item--hidden {
|
|
opacity: 0.35;
|
|
}
|
|
|
|
.gpx-legend__label {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.gpx-legend__icon {
|
|
display: flex;
|
|
width: 14px;
|
|
height: 14px;
|
|
flex-shrink: 0;
|
|
color: #1a1a1a;
|
|
}
|
|
|
|
.gpx-legend__icon svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.gpx-legend__swatch {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
#map.gpx-drop-hover::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
outline: 3px dashed #4a90d9;
|
|
outline-offset: -3px;
|
|
background: rgba(74, 144, 217, 0.08);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.maplibregl-popup-content p {
|
|
margin: 4px 0 0;
|
|
}
|
|
|
|
.debug-popup .maplibregl-popup-content {
|
|
max-height: 320px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.debug-popup__feature {
|
|
font-size: 11px;
|
|
font-family: monospace;
|
|
}
|
|
|
|
.debug-popup__feature + .debug-popup__feature {
|
|
margin-top: 8px;
|
|
padding-top: 8px;
|
|
border-top: 1px solid #eee;
|
|
}
|
|
|
|
.debug-popup__feature table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
}
|
|
|
|
.debug-popup__feature th {
|
|
text-align: left;
|
|
color: #888;
|
|
font-weight: normal;
|
|
padding: 1px 6px 1px 0;
|
|
vertical-align: top;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.debug-popup__feature td {
|
|
word-break: break-word;
|
|
}
|
|
|
|
.maplibregl-ctrl-overview-map {
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.measure-ctrl {
|
|
position: relative;
|
|
}
|
|
|
|
.measure-ctrl__button svg {
|
|
display: block;
|
|
margin: 0 auto;
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
.measure-ctrl__button.active {
|
|
background: #dbe9ff;
|
|
}
|
|
|
|
.measure-panel {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 100%;
|
|
margin-left: 8px;
|
|
z-index: 20;
|
|
min-width: max-content;
|
|
background: #fff;
|
|
border: 1px solid #ddd;
|
|
border-radius: 6px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
padding: 6px 8px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.measure-panel[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.measure-panel__controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
/* Same "author display wins over the UA [hidden] rule" gotcha as
|
|
.gpx-panel__action[hidden]/.notes-panel__form[hidden] elsewhere in this
|
|
file — this sets its own "display" too. */
|
|
.measure-panel__controls[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.measure-panel .measure-panel__save {
|
|
width: auto;
|
|
height: auto;
|
|
display: inline-block;
|
|
border: none;
|
|
border-radius: 4px;
|
|
background: none;
|
|
font-size: 14px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
padding: 2px 4px;
|
|
}
|
|
|
|
.measure-panel__save:disabled {
|
|
opacity: 0.3;
|
|
cursor: default;
|
|
}
|
|
|
|
/* Same "author display wins over the UA [hidden] rule" gotcha as
|
|
.gpx-panel__action[hidden] elsewhere in this file. */
|
|
.measure-panel__save[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.measure-panel .notes-panel__form {
|
|
width: 200px;
|
|
}
|
|
|
|
/* ".measure-panel " prefix (not just ".measure-panel__mode") to outrank
|
|
".maplibregl-ctrl-group button" (higher specificity, since these buttons
|
|
sit inside a maplibregl-ctrl-group container for the ruler icon's own
|
|
sake) — its fixed 29x29 square + zero padding otherwise wins, clipping
|
|
"Distance"/"Area" into overlapping text instead of sizing to fit it. */
|
|
.measure-panel .measure-panel__mode {
|
|
width: auto;
|
|
height: auto;
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
padding: 4px 8px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
background: none;
|
|
font: inherit;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.measure-panel__mode:hover {
|
|
background: #f0f0f0;
|
|
}
|
|
|
|
.measure-panel__mode.active {
|
|
background: #dbe9ff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.measure-panel__result {
|
|
min-width: 4em;
|
|
color: #333;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.measure-panel .measure-panel__clear {
|
|
width: auto;
|
|
height: auto;
|
|
display: inline-block;
|
|
border: none;
|
|
background: none;
|
|
font-size: 16px;
|
|
line-height: 1;
|
|
color: #888;
|
|
cursor: pointer;
|
|
padding: 0 2px;
|
|
}
|
|
|
|
.measure-panel__clear:hover {
|
|
color: #333;
|
|
}
|
|
|
|
.search-ctrl {
|
|
position: relative;
|
|
}
|
|
|
|
.search-ctrl__button svg {
|
|
display: block;
|
|
margin: 0 auto;
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
.search-ctrl__button.active {
|
|
background: #dbe9ff;
|
|
}
|
|
|
|
.search-panel {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 100%;
|
|
margin-left: 8px;
|
|
z-index: 20;
|
|
width: 240px;
|
|
background: #fff;
|
|
border: 1px solid #ddd;
|
|
border-radius: 6px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
padding: 6px 8px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.search-panel[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.search-panel__input {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
padding: 5px 7px;
|
|
font: inherit;
|
|
}
|
|
|
|
.search-panel__results {
|
|
list-style: none;
|
|
margin: 6px 0 0;
|
|
padding: 0;
|
|
max-height: 220px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.search-panel__result {
|
|
padding: 6px 4px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.search-panel__result:hover {
|
|
background: #f0f0f0;
|
|
}
|
|
|
|
.search-panel__status {
|
|
padding: 6px 4px;
|
|
color: #888;
|
|
}
|
|
|
|
.notes-ctrl {
|
|
position: relative;
|
|
}
|
|
|
|
.notes-ctrl__button svg {
|
|
display: block;
|
|
margin: 0 auto;
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
.notes-ctrl__button.active {
|
|
background: #dbe9ff;
|
|
}
|
|
|
|
.notes-panel {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 100%;
|
|
margin-left: 8px;
|
|
z-index: 20;
|
|
width: 200px;
|
|
background: #fff;
|
|
border: 1px solid #ddd;
|
|
border-radius: 6px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
padding: 8px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.notes-panel[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.notes-panel__modes {
|
|
display: flex;
|
|
gap: 4px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.notes-panel__mode {
|
|
flex: 1;
|
|
width: auto;
|
|
height: auto;
|
|
padding: 4px 8px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
background: #f0f0f0;
|
|
font: inherit;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.notes-panel__mode.active {
|
|
background: #dbe9ff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.notes-panel__hint {
|
|
margin: 0 0 6px;
|
|
color: #888;
|
|
}
|
|
|
|
.notes-panel__finish {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
margin-bottom: 6px;
|
|
padding: 4px 8px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
background: #1a5fb4;
|
|
color: #fff;
|
|
font: inherit;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.notes-panel__form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
/* Same "author display wins over the UA [hidden] rule" gotcha as
|
|
.gpx-panel__action[hidden] above — both this and .notes-panel__modes set
|
|
their own "display", so hiding them needs an explicit override too. */
|
|
.notes-panel__form[hidden],
|
|
.notes-panel__modes[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.notes-panel__title,
|
|
.notes-panel__body {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
font: inherit;
|
|
font-size: 12px;
|
|
padding: 4px 6px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.notes-panel__title {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.notes-panel__body {
|
|
resize: vertical;
|
|
}
|
|
|
|
.notes-panel__icons {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
gap: 2px;
|
|
margin: 2px 0;
|
|
}
|
|
|
|
/* Same "author display wins over the UA [hidden] rule" gotcha as
|
|
.gpx-panel__action[hidden] elsewhere in this file. */
|
|
.notes-panel__icons[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.notes-panel__icon-option {
|
|
width: auto;
|
|
height: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 3px;
|
|
border: 1px solid transparent;
|
|
border-radius: 4px;
|
|
background: none;
|
|
color: #555;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.notes-panel__icon-option svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.notes-panel__icon-option:hover {
|
|
background: #f0f0f0;
|
|
}
|
|
|
|
.notes-panel__icon-option.active {
|
|
border-color: #1a5fb4;
|
|
color: #1a5fb4;
|
|
background: #dbe9ff;
|
|
}
|
|
|
|
/* The pending-note marker shown on the map while the save form is open —
|
|
updates live to whatever icon is picked (see notes.js's onIconChange). A
|
|
plain round badge (not a drop-pin shape) since MapLibre anchors a custom
|
|
marker element at its center, and a pin's usual tip-points-at-the-spot
|
|
shape needs a bottom anchor to line up correctly. */
|
|
.notes-panel__preview-marker {
|
|
width: 26px;
|
|
height: 26px;
|
|
border-radius: 50%;
|
|
background: #c0392b;
|
|
border: 2px solid #fff;
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
}
|
|
|
|
.notes-panel__preview-marker svg {
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
|
|
.notes-panel__target,
|
|
.notes-panel__new-name {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
font: inherit;
|
|
font-size: 12px;
|
|
padding: 4px 6px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.notes-panel__actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 6px;
|
|
}
|
|
|
|
.notes-panel__actions button {
|
|
/* Without this, some browsers (GTK-themed Chrome on Linux in
|
|
particular) paint their own native hover/active highlight over a
|
|
button's background instead of leaving a custom one alone — the
|
|
Save button visibly went white on hover because of exactly this. */
|
|
appearance: none;
|
|
width: auto;
|
|
height: auto;
|
|
padding: 4px 10px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
background: #f0f0f0;
|
|
font: inherit;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* ".notes-panel__actions " prefix (not just ".notes-panel__save") to
|
|
outrank ".notes-panel__actions button" — same class-count-vs-class+
|
|
element specificity trap as elsewhere in this file; without it this
|
|
lost and the Save button just looked like a second Cancel button. */
|
|
.notes-panel__actions .notes-panel__save {
|
|
background: #1a5fb4;
|
|
color: #fff;
|
|
}
|
|
|
|
.zoom-level-ctrl__value {
|
|
width: 29px;
|
|
height: 29px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
user-select: none;
|
|
}
|
|
|
|
.gpx-popup__header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
margin: -15px -10px 8px;
|
|
padding: 10px 12px;
|
|
background: #1a1a1a;
|
|
color: #fff;
|
|
}
|
|
|
|
.gpx-popup__header-icon {
|
|
flex-shrink: 0;
|
|
width: 18px;
|
|
height: 18px;
|
|
color: #fff;
|
|
}
|
|
|
|
.gpx-popup__header-icon svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.gpx-popup__time {
|
|
color: #888;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.gpx-popup__wiki {
|
|
margin-top: 6px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.gpx-popup__category {
|
|
color: #888;
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.gpx-popup__description {
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.gpx-popup__photos {
|
|
display: flex;
|
|
gap: 4px;
|
|
margin: 4px 0;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.gpx-popup__photo {
|
|
width: 64px;
|
|
height: 64px;
|
|
flex-shrink: 0;
|
|
object-fit: cover;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.gpx-popup__meta {
|
|
margin-top: 8px;
|
|
padding-top: 6px;
|
|
border-top: 1px solid #eee;
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.gpx-popup__meta-row + .gpx-popup__meta-row {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.gpx-popup__meta-label {
|
|
color: #888;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.gpx-popup__tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px 10px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.gpx-popup__tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
}
|
|
|
|
.gpx-popup__tag-icon {
|
|
display: flex;
|
|
width: 13px;
|
|
height: 13px;
|
|
color: #555;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.gpx-popup__tag-icon svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.gpx-popup__link {
|
|
margin-top: 6px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.gpx-popup__note-actions,
|
|
.gpx-popup__edit-actions {
|
|
display: flex;
|
|
gap: 6px;
|
|
margin-top: 8px;
|
|
padding-top: 6px;
|
|
border-top: 1px solid #eee;
|
|
}
|
|
|
|
.gpx-popup__note-actions button,
|
|
.gpx-popup__edit-actions button {
|
|
border: none;
|
|
border-radius: 4px;
|
|
background: #f0f0f0;
|
|
padding: 3px 8px;
|
|
font: inherit;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.gpx-popup__edit-actions .gpx-popup__edit-save {
|
|
background: #1a5fb4;
|
|
color: #fff;
|
|
}
|
|
|
|
.gpx-popup__edit-title,
|
|
.gpx-popup__edit-body {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
font: inherit;
|
|
font-size: 13px;
|
|
padding: 4px 6px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.gpx-popup__edit-title {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.gpx-popup__edit-body {
|
|
resize: vertical;
|
|
}
|
|
|
|
.gnss-control__status {
|
|
color: #888;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.gnss-marker {
|
|
width: 14px;
|
|
height: 14px;
|
|
border: 2px solid #fff;
|
|
border-radius: 50%;
|
|
background: #2a9d8f;
|
|
box-shadow: 0 0 0 2px rgba(42, 157, 143, 0.4);
|
|
}
|
|
|
|
.overlays-panel__list {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
.overlays-panel__item label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 4px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.overlays-panel__item label:hover {
|
|
background: #f0f0f0;
|
|
}
|
|
|
|
.overlays-panel__icon {
|
|
display: flex;
|
|
width: 16px;
|
|
height: 16px;
|
|
flex-shrink: 0;
|
|
color: #555;
|
|
}
|
|
|
|
.overlays-panel__icon svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.overlays-panel__row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 4px;
|
|
}
|
|
|
|
.overlays-panel__name {
|
|
border: none;
|
|
background: none;
|
|
padding: 0;
|
|
font: inherit;
|
|
color: inherit;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.overlays-panel__name:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.overlays-panel__details {
|
|
margin: 0 4px 6px 26px;
|
|
padding-top: 6px;
|
|
border-top: 1px solid #eee;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.livetrack-panel__list {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
.livetrack-panel__item {
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.livetrack-panel__row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
width: 100%;
|
|
padding: 6px 4px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
background: none;
|
|
font: inherit;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.livetrack-panel__row:hover {
|
|
background: #f0f0f0;
|
|
}
|
|
|
|
.livetrack-panel__row.active {
|
|
background: #f1e6fb;
|
|
}
|
|
|
|
.livetrack-panel__row.loading {
|
|
opacity: 0.6;
|
|
cursor: wait;
|
|
}
|
|
|
|
.livetrack-panel__row:disabled {
|
|
opacity: 0.5;
|
|
cursor: default;
|
|
}
|
|
|
|
.livetrack-panel__label {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.livetrack-panel__label--id {
|
|
font-family: monospace;
|
|
}
|
|
|
|
.livetrack-badge {
|
|
flex-shrink: 0;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
background: #e5e5e5;
|
|
color: #666;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.livetrack-badge--live {
|
|
background: #d7f3e3;
|
|
color: #1b7a43;
|
|
}
|
|
|
|
.livetrack-panel__time {
|
|
flex-shrink: 0;
|
|
color: #888;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.profile-panel {
|
|
position: fixed;
|
|
left: 52px;
|
|
right: 0;
|
|
bottom: 0;
|
|
max-height: 45vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #fcfcfb;
|
|
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
|
|
z-index: 10;
|
|
}
|
|
|
|
.profile-panel[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.profile-panel__header {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
padding: 10px 14px;
|
|
border-bottom: 1px solid #e1e0d9;
|
|
}
|
|
|
|
.profile-panel__title {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.profile-panel__stats {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
color: #52514e;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.profile-panel__close {
|
|
border: none;
|
|
background: none;
|
|
font-size: 18px;
|
|
line-height: 1;
|
|
padding: 0 4px;
|
|
cursor: pointer;
|
|
color: #898781;
|
|
}
|
|
|
|
.profile-panel__charts {
|
|
position: relative;
|
|
overflow-y: auto;
|
|
padding: 8px 14px 14px;
|
|
}
|
|
|
|
.profile-chart {
|
|
padding-top: 8px;
|
|
}
|
|
|
|
.profile-chart + .profile-chart {
|
|
border-top: 1px solid #e1e0d9;
|
|
}
|
|
|
|
.profile-chart__label {
|
|
font-size: 11px;
|
|
color: #898781;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.profile-chart__unit {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.profile-chart__plot {
|
|
position: relative;
|
|
}
|
|
|
|
.profile-chart__svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
cursor: crosshair;
|
|
}
|
|
|
|
.profile-chart__crosshair {
|
|
stroke: #898781;
|
|
stroke-width: 1;
|
|
vector-effect: non-scaling-stroke;
|
|
}
|
|
|
|
/* Overlaid as plain HTML, not SVG text: the chart's viewBox scales width
|
|
and height independently (preserveAspectRatio="none", so the line fills
|
|
a responsive width at a fixed pixel height) — text drawn inside that
|
|
coordinate space would get stretched by the same mismatched factor. */
|
|
.profile-chart__axis-value {
|
|
position: absolute;
|
|
left: 4px;
|
|
color: #898781;
|
|
font-size: 10px;
|
|
line-height: 1;
|
|
background: rgba(252, 252, 251, 0.75);
|
|
padding: 1px 3px;
|
|
border-radius: 2px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.profile-chart__axis-value--max {
|
|
top: 2px;
|
|
}
|
|
|
|
.profile-chart__axis-value--min {
|
|
bottom: 2px;
|
|
}
|
|
|
|
.profile-panel__xaxis-toggle {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 4px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.profile-panel__xaxis-toggle-btn {
|
|
border: 1px solid #e1e0d9;
|
|
background: #fcfcfb;
|
|
color: #52514e;
|
|
font-size: 11px;
|
|
padding: 2px 8px;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.profile-panel__xaxis-toggle-btn.active {
|
|
background: #0b0b0b;
|
|
border-color: #0b0b0b;
|
|
color: #fff;
|
|
}
|
|
|
|
.profile-panel__xaxis {
|
|
position: relative;
|
|
height: 14px;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.profile-panel__xaxis-tick {
|
|
position: absolute;
|
|
top: 0;
|
|
transform: translateX(-50%);
|
|
font-size: 10px;
|
|
color: #898781;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.profile-panel__xaxis-tick:first-child {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.profile-panel__xaxis-tick:last-child {
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
.profile-panel__tooltip {
|
|
position: absolute;
|
|
top: 0;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
background: #0b0b0b;
|
|
color: #fff;
|
|
border-radius: 4px;
|
|
padding: 6px 8px;
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.profile-panel__tooltip[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.profile-panel__tooltip-distance {
|
|
font-weight: 600;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.profile-panel__tooltip-label {
|
|
color: #c3c2b7;
|
|
}
|
|
|
|
.plugins-panel__hint {
|
|
margin: 0 0 6px;
|
|
max-width: 200px;
|
|
color: #888;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.plugins-panel__list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.plugins-panel__item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 4px 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.plugins-panel__label {
|
|
flex: 1;
|
|
}
|
|
|
|
.plugins-panel__run {
|
|
/* See .notes-panel__actions button's own comment — without this some
|
|
browsers paint their own hover/active highlight over a custom
|
|
background. */
|
|
appearance: none;
|
|
padding: 4px 10px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
background: #1a5fb4;
|
|
color: #fff;
|
|
font: inherit;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.plugins-panel__run:disabled {
|
|
opacity: 0.6;
|
|
cursor: default;
|
|
}
|
|
|
|
.plugins-panel__status {
|
|
min-width: 3.5em;
|
|
max-width: 200px;
|
|
color: #888;
|
|
font-size: 11px;
|
|
/* Overrides the parent's nowrap: "Running…"/"Done" never wrap either
|
|
way, but a real RunError message (e.g. "plugin exited with status 1")
|
|
needs to, or it just overflows the flyout unreadably. */
|
|
white-space: normal;
|
|
}
|
|
|
|
.plugins-panel__status--error {
|
|
color: #c62828;
|
|
}
|
|
|
|
.plugins-panel__empty {
|
|
color: #888;
|
|
white-space: normal;
|
|
max-width: 200px;
|
|
}
|