randy
d9cc468478
A failed run showed "Failed — see server log" regardless of why — misleading, since a Plugins::RunError never actually reaches any log (app.rb turns it straight into a 502 JSON response). Found this the hard way debugging the p4n2gpx plugin, having to SSH in and reproduce the run by hand each time just to see why it failed. Now shows the response's actual error message (e.g. "plugin exited with status 1"), wrapping instead of overflowing the flyout for a longer one.
1508 lines
25 KiB
CSS
1508 lines
25 KiB
CSS
html, body {
|
|
height: 100%;
|
|
margin: 0;
|
|
font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
#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-size: 14px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: #fff;
|
|
}
|
|
|
|
.topbar__coords {
|
|
margin: 0 auto;
|
|
font-size: 12px;
|
|
font-variant-numeric: tabular-nums;
|
|
color: #bbb;
|
|
}
|
|
|
|
.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-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;
|
|
}
|
|
|
|
.basemap-panel {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 52px;
|
|
width: 260px;
|
|
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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.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;
|
|
}
|