a285751416
It shows the distribution of maximum speeds for all ways on the current route (if that data is available, otherwise it’s summed up under “unknown”). `maxspeed:forward` and `maxspeed:backward` is respected in conjunction with `reversedirection`. Hovering/clicking table rows to highlight matching segments on the route work the identical to the other analysis tables. Additionally, all tags in the analysis tab (way type, surface, smoothness) are translateable now. The values were added to `en.json`. Some HTML is rendered with template literals now, instead of concatenating strings. Variable declarations were changed from `var` to `const`/`let`.
1196 lines
24 KiB
CSS
1196 lines
24 KiB
CSS
html,
|
|
body,
|
|
#map {
|
|
height: 100%;
|
|
}
|
|
|
|
/* This is important so that bootstrap-select list goes over leaflet buttons
|
|
Since the list is in navbar and leaflet buttons within map, we create a
|
|
stacking context on their common ancestor */
|
|
body,
|
|
#content {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
#content {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.flexcolumn,
|
|
.leaflet-sidebar-pane.active,
|
|
.dataTables_wrapper,
|
|
.dataTables_scroll,
|
|
.dataTables_scrollBody {
|
|
display: flex;
|
|
|
|
flex-flow: column;
|
|
}
|
|
|
|
.flexrow {
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
}
|
|
|
|
.flexgrow {
|
|
flex: 1;
|
|
}
|
|
|
|
/* 'auto' (1 1 auto) instead of '1' (1 1 0) needed for DataTables tab in Firefox */
|
|
.dataTables_wrapper,
|
|
.dataTables_scroll,
|
|
.dataTables_scrollBody,
|
|
table.dataTable {
|
|
flex: auto;
|
|
}
|
|
|
|
/* reduce title font size in overpass popups */
|
|
.leaflet-popup-content h1 {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.overpass-tags th,
|
|
.overpass-tags td {
|
|
padding: 0.25em 0.5em;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.overpass-tags thead {
|
|
text-transform: uppercase;
|
|
color: #666;
|
|
}
|
|
|
|
.overpass-tags thead tr {
|
|
background-color: #ddd;
|
|
}
|
|
|
|
.overpass-tags thead th.overpass-label-key {
|
|
text-align: right;
|
|
}
|
|
|
|
.overpass-tags tbody tr:nth-child(even) {
|
|
background-color: #eee;
|
|
}
|
|
|
|
.overpass-tags tbody tr:last-child {
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.overpass-tags tbody th {
|
|
text-align: right;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.overpass-osm-link {
|
|
margin-top: 0.5rem;
|
|
text-align: right;
|
|
font-size: 80%;
|
|
}
|
|
.overpass-osm-link::before {
|
|
content: '🔎';
|
|
margin-right: 0.25em;
|
|
}
|
|
|
|
.overpass-layer-icon .sign > * {
|
|
position: absolute;
|
|
top: -34px;
|
|
margin: auto;
|
|
display: inline-block;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.overpass-layer-icon .icon-white {
|
|
color: white;
|
|
}
|
|
|
|
.overpass-layer-icon .icon-invert {
|
|
-webkit-filter: invert(1);
|
|
filter: invert(1);
|
|
}
|
|
|
|
.jstree-themeicon-custom {
|
|
background-size: 11px !important;
|
|
width: 15px !important;
|
|
}
|
|
|
|
/* wrap toolbar controls */
|
|
.leaflet-top.leaflet-left {
|
|
bottom: 0;
|
|
margin-bottom: 10px;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* bottom underneath top controls when overlapping */
|
|
.leaflet-bottom {
|
|
z-index: 999;
|
|
}
|
|
|
|
/* Ensure z-index layer order works for Maplibre overlays, otherwise gets below base map after switch */
|
|
.leaflet-gl-layer {
|
|
position: absolute;
|
|
}
|
|
|
|
.navbar {
|
|
/* align with leaflet-control */
|
|
padding: 0.5rem 10px;
|
|
}
|
|
.nav-link .fa {
|
|
margin-right: 0.2em;
|
|
}
|
|
.navbar-dark .navbar-toggler {
|
|
background-image: none;
|
|
}
|
|
|
|
/* disabled style for "Custom" option, but not for selected items */
|
|
.bootstrap-select.btn-group .dropdown-menu li.disabled:not(.selected) a {
|
|
color: #777;
|
|
}
|
|
|
|
footer {
|
|
flex: none;
|
|
background-color: #f7f7f9;
|
|
}
|
|
|
|
#stats-container {
|
|
display: none;
|
|
}
|
|
#stats-container[style*='display: block'] {
|
|
display: flex !important;
|
|
}
|
|
|
|
#stats-info {
|
|
align-items: center;
|
|
height: 46px;
|
|
display: flex;
|
|
}
|
|
#stats-info > div {
|
|
margin: auto;
|
|
}
|
|
#stats {
|
|
flex-grow: 1;
|
|
margin: 0;
|
|
padding: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
ul#stats {
|
|
display: flex;
|
|
align-items: stretch;
|
|
justify-content: space-around;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
#stats li {
|
|
display: inline-block;
|
|
flex: 0 1 auto;
|
|
list-style-type: none;
|
|
margin: 0 0.2em;
|
|
}
|
|
|
|
p.stats-label {
|
|
margin-bottom: 0.2em;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
#stats {
|
|
padding-top: 0.4em;
|
|
}
|
|
}
|
|
|
|
.stats-label {
|
|
word-break: break-all;
|
|
font-weight: bold;
|
|
}
|
|
.stats-label abbr[title],
|
|
.stats-label span[title] {
|
|
text-decoration: none;
|
|
border-bottom: 1px dotted #818a91;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
input#trackname:invalid,
|
|
input#trackname:focus:invalid {
|
|
border-color: orange;
|
|
}
|
|
:not(output):-moz-ui-invalid:not(:focus),
|
|
:not(output):-moz-ui-invalid:-moz-focusring:not(:focus) {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.validation-warning {
|
|
color: orange;
|
|
font-size: small;
|
|
}
|
|
|
|
/*
|
|
* elevation diagram
|
|
*/
|
|
|
|
.steelblue-theme.leaflet-control.elevation .background {
|
|
display: block;
|
|
font-size: 80%;
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* diagram colors lighter, less dominant */
|
|
.steelblue-theme.leaflet-control.elevation .background {
|
|
background-color: rgba(105, 155, 196, 0.2);
|
|
}
|
|
.steelblue-theme.leaflet-control.elevation .axis path,
|
|
.steelblue-theme.leaflet-control.elevation .axis line {
|
|
stroke: #8398aa;
|
|
shape-rendering: crispEdges;
|
|
}
|
|
.steelblue-theme.leaflet-control.elevation .axis text {
|
|
fill: #8398aa;
|
|
}
|
|
.steelblue-theme.leaflet-control.elevation .area {
|
|
fill: #699bc4;
|
|
}
|
|
|
|
#elevation-btn {
|
|
align-items: center;
|
|
margin-right: 0.5rem;
|
|
height: max-content;
|
|
align-self: center;
|
|
}
|
|
|
|
.routing-draw-enabled {
|
|
cursor: crosshair;
|
|
}
|
|
.pois-draw-enabled {
|
|
cursor: cell;
|
|
}
|
|
.circlego-draw-enabled {
|
|
cursor: pointer;
|
|
}
|
|
.circlego-outside {
|
|
cursor: not-allowed;
|
|
}
|
|
.leaflet-popup-content p {
|
|
margin: 0.5em 0;
|
|
}
|
|
|
|
#map {
|
|
/* center error message horizontally */
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
/* map click/drag selects text in controls in Firefox because of display flex */
|
|
-moz-user-select: none;
|
|
}
|
|
.leaflet-control-container {
|
|
-moz-user-select: text;
|
|
}
|
|
#notification_jar .alert {
|
|
-moz-user-select: text;
|
|
margin-bottom: 10px;
|
|
}
|
|
#notification_jar {
|
|
position: absolute;
|
|
margin: 10px 46px; /* 10 + 26 + 10 */
|
|
z-index: 3001;
|
|
font-size: 1rem;
|
|
cursor: auto;
|
|
}
|
|
#preview {
|
|
position: absolute;
|
|
top: 10px;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 4px;
|
|
z-index: 3000;
|
|
font-size: 1.5rem;
|
|
background-color: rgba(0, 116, 217, 0.6);
|
|
color: white;
|
|
}
|
|
|
|
/* Override Bootstrap tabs that set `display` from `none` to `block` when activating */
|
|
#profileEditorTabsContent.tab-content > .active {
|
|
display: flex;
|
|
}
|
|
|
|
/* track messages (data tab) */
|
|
#tab_data,
|
|
.CodeMirror {
|
|
font-size: x-small;
|
|
}
|
|
|
|
/* transit demo */
|
|
#itinerary pre {
|
|
font-size: small;
|
|
/* turn off bootstrap 'break-word' */
|
|
word-wrap: normal;
|
|
margin: 0;
|
|
}
|
|
|
|
table.dataTable.mini .track-analysis-header-distance {
|
|
text-align: right;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.track-analysis-table {
|
|
font-size: small;
|
|
padding-bottom: 0.5em;
|
|
}
|
|
|
|
table.dataTable.track-analysis-table tfoot td {
|
|
font-weight: bold;
|
|
text-align: right;
|
|
padding-right: 4px;
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.track-analysis-distance {
|
|
text-align: right;
|
|
}
|
|
|
|
.track-analysis-heading {
|
|
margin-top: 0.7em;
|
|
margin-bottom: 0.1em;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
/* dashed line animation, derived from Chris Coyier and others
|
|
https://css-tricks.com/svg-line-animation-works/
|
|
*/
|
|
.loading-trailer {
|
|
animation: dash 0.4s linear infinite;
|
|
}
|
|
@-webkit-keyframes dash {
|
|
from {
|
|
stroke-dashoffset: 20;
|
|
}
|
|
to {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
}
|
|
@keyframes dash {
|
|
from {
|
|
stroke-dashoffset: 20;
|
|
}
|
|
to {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* opacity slider control (seiyria-bootstrap-slider)
|
|
*/
|
|
|
|
.control-slider {
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.slider#overlay {
|
|
display: block;
|
|
}
|
|
|
|
.slider.slider-vertical {
|
|
height: 80px;
|
|
margin: 10px 0;
|
|
}
|
|
.slider.slider-horizontal {
|
|
width: 180px;
|
|
margin: 0 10px;
|
|
}
|
|
|
|
/* invert track and selection styles to get partial gradient for "selection" */
|
|
.slider.slider-vertical .slider-track {
|
|
width: 8px;
|
|
margin-left: 1px;
|
|
background-image: linear-gradient(to right, #f0f0f0 0%, #e9e9e9 100%);
|
|
box-shadow: inset -1px -0px 1px rgba(55, 55, 55, 0.3), inset 1px 0px 1px rgba(230, 230, 230, 1);
|
|
}
|
|
.slider.slider-horizontal .slider-track {
|
|
background-image: linear-gradient(to bottom, #f0f0f0 0%, #e9e9e9 100%);
|
|
box-shadow: inset -0px -1px 1px rgba(55, 55, 55, 0.3), inset 0px 1px 1px rgba(230, 230, 230, 1);
|
|
}
|
|
|
|
.control-slider:hover #route .slider-track,
|
|
.control-slider:active #route .slider-track {
|
|
background-image: linear-gradient(to bottom, magenta 0%, white 100%);
|
|
}
|
|
|
|
.slider-selection {
|
|
background-color: #c6c6c6;
|
|
background-image: none;
|
|
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
.slider.slider-vertical .slider-tick,
|
|
.slider.slider-vertical .slider-handle {
|
|
cursor: ns-resize;
|
|
}
|
|
|
|
.slider .slider-tick,
|
|
.slider .slider-handle {
|
|
cursor: ew-resize;
|
|
box-sizing: border-box;
|
|
background: none;
|
|
outline: none;
|
|
|
|
/* bootstrap .btn-secondary */
|
|
background-image: linear-gradient(to bottom, #fff 0, #e0e0e0 100%);
|
|
background-repeat: repeat-x;
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
|
|
border: 1px solid #adadad;
|
|
}
|
|
|
|
/* activated Font Awesome icon (for EasyButton add ' active' to icon class property) */
|
|
.fa.active {
|
|
/* use same color as leaflet-locatecontrol */
|
|
color: #2074b6;
|
|
}
|
|
/* Bootstrap button */
|
|
.btn-secondary:not(:disabled):not(.disabled).active,
|
|
.btn-secondary.active,
|
|
.btn-secondary:hover,
|
|
.btn-outline-secondary:not(:disabled):not(.disabled).active,
|
|
.btn-outline-secondary:hover {
|
|
/* use same color as leaflet-locatecontrol */
|
|
color: #2074b6;
|
|
background-color: #e6e6e6;
|
|
}
|
|
|
|
button.btn {
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.leaflet-bar button {
|
|
/* override button for horizontal fa center in Firefox */
|
|
padding: 0;
|
|
}
|
|
.leaflet-bar .fa {
|
|
font-size: 14px;
|
|
|
|
/* override fa with Leaflet button height for vertical center */
|
|
line-height: 26px;
|
|
}
|
|
.leaflet-touch .leaflet-bar .fa {
|
|
font-size: 16px;
|
|
line-height: 30px;
|
|
}
|
|
|
|
button.activate-beeline-active,
|
|
button.deactivate-beeline-active {
|
|
transition-duration: 0.3s;
|
|
}
|
|
button.activate-beeline-active.disabled,
|
|
button.deactivate-beeline-active.disabled {
|
|
height: 0;
|
|
border-bottom-width: 0px;
|
|
}
|
|
.mdi.active {
|
|
fill: #2074b6;
|
|
}
|
|
.mdi {
|
|
width: 18px;
|
|
}
|
|
|
|
/* smaller tab height */
|
|
.nav > li > a {
|
|
padding: 2px 15px;
|
|
}
|
|
|
|
#profile_message .alert {
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.alert {
|
|
margin-bottom: 0px;
|
|
padding-left: 35px;
|
|
}
|
|
.alert span.fa {
|
|
position: relative;
|
|
left: -23px;
|
|
margin-right: -1em;
|
|
}
|
|
|
|
/* about dialog */
|
|
#about-contact-language {
|
|
font-size: 0.9em;
|
|
margin: -6px 0 6px 20px;
|
|
}
|
|
|
|
/* help dialog */
|
|
|
|
ul.keyboard-shortcuts {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 1px solid #ccc;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
ul.keyboard-shortcuts li {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
padding: 0.4rem 1em;
|
|
font-size: 0.85rem;
|
|
border-top: 1px solid #ccc;
|
|
}
|
|
|
|
ul.keyboard-shortcuts li:first-of-type {
|
|
border-top: transparent;
|
|
}
|
|
|
|
.keyboard-shortcuts-key {
|
|
margin-left: 8px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
kbd {
|
|
display: inline-block;
|
|
padding: 3px 5px;
|
|
border: solid 1px rgba(175, 184, 193, 0.2);
|
|
border-radius: 6px;
|
|
line-height: 10px;
|
|
vertical-align: middle;
|
|
font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
|
|
color: #1f1f1f;
|
|
background-color: rgba(0, 123, 255, 0.07);
|
|
box-shadow: inset 0 -1px 0 rgba(175, 184, 193, 0.2);
|
|
}
|
|
|
|
/* Share Dialog */
|
|
|
|
#share-qrcode-img img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.btn-group-xs > .btn,
|
|
.btn-xs {
|
|
padding: 0.1rem 0.4rem;
|
|
font-size: 0.75rem;
|
|
line-height: 1.5;
|
|
border-radius: 0.2rem;
|
|
}
|
|
|
|
.btn-facebook {
|
|
background-color: #3b5998;
|
|
border-color: #3b5998;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-facebook:hover {
|
|
background-color: #2d4373;
|
|
border-color: #2d4373;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-whatsapp {
|
|
background-color: #25d366;
|
|
border-color: #25d366;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-whatsapp:hover {
|
|
background-color: #1da851;
|
|
border-color: #1da851;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-email {
|
|
background-color: #e74c3c;
|
|
border-color: #e74c3c;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-email:hover {
|
|
background-color: #c0392b;
|
|
border-color: #c0392b;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-mastodon {
|
|
background-color: #2b90d9;
|
|
border-color: #2b90d9;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-mastodon:hover {
|
|
background-color: #1d5bbf;
|
|
border-color: #1d5bbf;
|
|
color: #fff;
|
|
}
|
|
|
|
/* "What's new?" (Change Log) */
|
|
#whatsnew h2 {
|
|
margin: 2rem 0;
|
|
border-bottom: 1px solid #dee2e6;
|
|
padding-bottom: 0.5rem;
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
#whatsnew h3 {
|
|
margin-bottom: 1rem;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
/*
|
|
* DataTables
|
|
*/
|
|
|
|
table.dataTable {
|
|
/* avoid getting centered and header misaligned with flex row (sidebar) */
|
|
margin: 0;
|
|
}
|
|
|
|
table.dataTable.mini thead th,
|
|
table.dataTable.mini thead td {
|
|
padding: 3px 13px 3px 2px;
|
|
}
|
|
|
|
table.dataTable.mini tbody th,
|
|
table.dataTable.mini tbody td {
|
|
padding: 2px 2px;
|
|
white-space: nowrap;
|
|
}
|
|
table.dataTable thead .sorting_asc,
|
|
table.dataTable thead .sorting_desc,
|
|
table.dataTable thead .sorting {
|
|
background-position: center right -3px;
|
|
}
|
|
|
|
table.track-analysis-table tbody tr:hover,
|
|
table.dataTable.hover tbody tr:hover,
|
|
table.dataTable.hover tbody tr.hoverRoute,
|
|
table.dataTable.display tbody tr:hover {
|
|
background-color: rgba(255, 255, 0, 0.3);
|
|
}
|
|
table.dataTable.hover tbody tr:hover.selected,
|
|
table.dataTable.display tbody tr:hover.selected {
|
|
background-color: #bcc8b8;
|
|
}
|
|
|
|
/*
|
|
* No-go areas
|
|
*/
|
|
|
|
.nogo-delete-marker {
|
|
text-align: center;
|
|
line-height: 15px;
|
|
font-size: 11px;
|
|
border-radius: 8px;
|
|
}
|
|
.leaflet-touch .nogo-delete-marker {
|
|
border-radius: 12px;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.format-turns-enabled {
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
/* tooltip */
|
|
|
|
.editing-tooltip,
|
|
.editing-tooltip-create {
|
|
color: #fff;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
/* for direction arrows that inherit */
|
|
border-color: rgba(0, 0, 0, 0.7);
|
|
/* no border but still set a color for direction arrows */
|
|
border-width: 0px;
|
|
}
|
|
.editing-tooltip-create {
|
|
/* no (invisible) direction arrow for cursor tooltip */
|
|
border-color: transparent;
|
|
}
|
|
.leaflet-tooltip-bottom:before {
|
|
border-bottom-color: inherit;
|
|
}
|
|
.leaflet-tooltip-right:before {
|
|
border-right-color: inherit;
|
|
}
|
|
|
|
/*
|
|
* leaflet-sidebar-v2
|
|
*/
|
|
|
|
.leaflet-sidebar-pane#tab_profile,
|
|
.leaflet-sidebar-pane#tab_data,
|
|
.leaflet-sidebar-pane#tab_itinerary {
|
|
/* Full height for content with inner scrolling,
|
|
overrides scroll fix for long content in Firefox */
|
|
height: 100%;
|
|
}
|
|
|
|
#profile_params,
|
|
.CodeMirror {
|
|
/* auto instead of 1 to avoid overflow to content height in Firefox */
|
|
flex: auto;
|
|
/* override default 300px, behaves like min-height with flex auto */
|
|
height: 0;
|
|
}
|
|
|
|
#profile_params {
|
|
overflow-y: scroll;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.leaflet-sidebar-pane#tab_profile label {
|
|
font-weight: 700;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.leaflet-sidebar-pane#tab_profile input[type='checkbox'] {
|
|
margin-right: 5px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.leaflet-sidebar-pane#tab_profile .help-block {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.help-block {
|
|
color: #737373;
|
|
}
|
|
|
|
#profile-pinned {
|
|
margin-left: auto;
|
|
margin-right: 4px;
|
|
color: #777;
|
|
}
|
|
|
|
.leaflet-sidebar-content {
|
|
/* for optional-layers-tree */
|
|
overflow-x: auto;
|
|
}
|
|
|
|
/* layers control as sidebar tab */
|
|
#tab_layers_control,
|
|
#profile_params {
|
|
font-size: 0.9rem;
|
|
line-height: normal;
|
|
}
|
|
#layers-control-wrapper label {
|
|
/* override Bootstrap/Reboot label */
|
|
display: block;
|
|
margin-bottom: 0px;
|
|
/* normalize label height
|
|
| Firefox | Chrome |
|
|
Leaflet only | 21 | 20 |
|
|
Bootstrap | 23 | 22 |*/
|
|
height: 23px;
|
|
}
|
|
|
|
.custom_layers_url {
|
|
word-break: break-all;
|
|
font-family: monospace;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
#layers-button-group {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
#tree-button-group {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
#optional-layers {
|
|
margin-top: 5px;
|
|
}
|
|
#optional-layers .help-block {
|
|
font-style: italic;
|
|
margin-bottom: 0.3rem;
|
|
}
|
|
|
|
.tree-code {
|
|
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
|
|
/* fix 1px increased parent span height (hover inset box-shadow outside background) */
|
|
line-height: normal;
|
|
margin-right: 7px;
|
|
color: #666; /* like root nodes, jstree-disabled */
|
|
}
|
|
|
|
/* icon tooltips as hints and feedback for add/remove and preview actions of optional layer tree nodes */
|
|
|
|
.jstree-default .jstree-anchor {
|
|
padding: 0;
|
|
}
|
|
.jstree-default .jstree-checkbox,
|
|
.tree-text {
|
|
position: relative;
|
|
}
|
|
.jstree-default .jstree-checkbox {
|
|
padding-left: 1px;
|
|
}
|
|
.tree-text {
|
|
display: inline-block;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.jstree-default
|
|
.jstree-hovered:not(.jstree-checked):not(.jstree-disabled):not(.added):not(.removed)
|
|
.jstree-checkbox:hover::before,
|
|
.jstree-default
|
|
.jstree-hovered.jstree-checked:not(.jstree-disabled):not(.added):not(.removed)
|
|
.jstree-checkbox:hover::before,
|
|
.jstree-default .jstree-hovered:not(.jstree-disabled) .tree-text::after,
|
|
.jstree-default .jstree-clicked:not(.jstree-disabled) .tree-text::after,
|
|
.jstree-anchor.added .jstree-checkbox::before,
|
|
.jstree-anchor.removed .jstree-checkbox::before {
|
|
font-family: FontAwesome;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #bbb;
|
|
position: absolute;
|
|
}
|
|
|
|
.jstree-default
|
|
.jstree-hovered:not(.jstree-checked):not(.jstree-disabled):not(.added):not(.removed)
|
|
.jstree-checkbox:hover::before,
|
|
.jstree-default
|
|
.jstree-hovered.jstree-checked:not(.jstree-disabled):not(.added):not(.removed)
|
|
.jstree-checkbox:hover::before,
|
|
.jstree-anchor.added .jstree-checkbox::before,
|
|
.jstree-anchor.removed .jstree-checkbox::before {
|
|
left: -15px;
|
|
}
|
|
.jstree-default
|
|
.jstree-hovered:not(.jstree-checked):not(.jstree-disabled):not(.added):not(.removed)
|
|
.jstree-checkbox:hover::before,
|
|
.jstree-anchor.added .jstree-checkbox::before {
|
|
content: '\f067'; /* fa-plus */
|
|
}
|
|
.jstree-default
|
|
.jstree-hovered.jstree-checked:not(.jstree-disabled):not(.added):not(.removed)
|
|
.jstree-checkbox:hover::before,
|
|
.jstree-anchor.removed .jstree-checkbox::before {
|
|
content: '\f068'; /* fa-minus */
|
|
}
|
|
.jstree-anchor.added .jstree-checkbox::before,
|
|
.jstree-anchor.removed .jstree-checkbox::before {
|
|
animation: addremove 1s;
|
|
}
|
|
@keyframes addremove {
|
|
30% {
|
|
color: #0074d9;
|
|
font-weight: bold;
|
|
}
|
|
70% {
|
|
color: #0074d9;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.jstree-default .jstree-hovered:not(.jstree-disabled) .tree-text:hover::after,
|
|
.jstree-default .jstree-clicked:not(.jstree-disabled) .tree-text::after {
|
|
content: '\f06e'; /* fa-eye */
|
|
right: -17px;
|
|
}
|
|
.tree-text:hover {
|
|
box-shadow: inset 0 -1px rgba(224, 172, 104, 0.8);
|
|
}
|
|
|
|
.jstree-default .jstree-clicked:not(.jstree-disabled) .tree-text::after {
|
|
color: #0074d9;
|
|
}
|
|
|
|
.jstree-default .jstree-disabled > .jstree-icon {
|
|
opacity: 0.5;
|
|
cursor: default;
|
|
}
|
|
|
|
/* hide currently unused bottom tabs container because of touch border artefacts */
|
|
.leaflet-sidebar-tabs > ul:last-child {
|
|
display: none;
|
|
}
|
|
|
|
/* layers svg icon not properly centered */
|
|
.leaflet-sidebar-tabs > ul > li > a[href='#tab_layers_control'] {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* corresponding to leaflet-sidebar-expand/-close in leaflet-sidebar-v2 */
|
|
.sync-map {
|
|
float: right;
|
|
width: 36px;
|
|
height: 36px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
color: #333;
|
|
}
|
|
.sync-map.active {
|
|
color: #0074d9;
|
|
}
|
|
|
|
/*
|
|
* CodeMirror
|
|
*/
|
|
|
|
.CodeMirror {
|
|
border: 1px solid #ddd;
|
|
|
|
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
|
|
line-height: 1.2em;
|
|
}
|
|
|
|
#loadNogos fieldset {
|
|
display: block;
|
|
margin-left: 2px;
|
|
margin-right: 2px;
|
|
padding-top: 0.35em;
|
|
padding-bottom: 0.625em;
|
|
padding-left: 0.75em;
|
|
padding-right: 0.75em;
|
|
border: 2px groove;
|
|
}
|
|
|
|
#loadNogos legend {
|
|
display: block;
|
|
padding-left: 2px;
|
|
padding-right: 2px;
|
|
border: none;
|
|
}
|
|
|
|
.nav-link.disabled {
|
|
/* by default, even if disabled, modals are opened by disabled nav-link
|
|
so we ignore pointer events in this situation to avoid that*/
|
|
pointer-events: none;
|
|
}
|
|
|
|
/*
|
|
* Heightgraph customizations;
|
|
* since there's only the gradient layer, hide the layer selector.
|
|
*/
|
|
#selectionText {
|
|
display: none;
|
|
}
|
|
|
|
.version-new::after {
|
|
font-family: FontAwesome;
|
|
content: '\f06a'; /* fa-exclamation */
|
|
margin-left: 3px;
|
|
}
|
|
|
|
#elevation-chart {
|
|
position: relative;
|
|
}
|
|
|
|
#no-elevation-data {
|
|
z-index: 1000;
|
|
margin: 0;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
/* Gray out non selectable layers (zoom out of scope, etc.) */
|
|
.leaflet-control-layers-selector[disabled] ~ span {
|
|
color: #777;
|
|
}
|
|
|
|
/* make modals fullscreen on small devices (code from bootstrap 5) */
|
|
.modal-fullscreen {
|
|
width: 100vw;
|
|
max-width: none;
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
.modal-fullscreen .modal-content {
|
|
height: 100%;
|
|
border: 0;
|
|
border-radius: 0;
|
|
}
|
|
.modal-fullscreen .modal-header {
|
|
border-radius: 0;
|
|
}
|
|
.modal-fullscreen .modal-body {
|
|
overflow-y: auto;
|
|
}
|
|
.modal-fullscreen .modal-footer {
|
|
border-radius: 0;
|
|
}
|
|
|
|
/**
|
|
* Autocompleter styles
|
|
*/
|
|
.leaflet-control-geocoder-form.stayvisible {
|
|
display: inline-block;
|
|
}
|
|
.leaflet-control-geocoder-alternatives {
|
|
/* display: block; */
|
|
position: absolute;
|
|
background-color: white;
|
|
left: 2rem;
|
|
}
|
|
|
|
.leaflet-control-geocoder-alternatives {
|
|
background-color: rgb(255, 255, 255);
|
|
}
|
|
|
|
.autocomplete-container {
|
|
position: absolute;
|
|
left: 2rem;
|
|
width: calc(100% - 3rem);
|
|
z-index: 100;
|
|
}
|
|
|
|
.autocomplete-select-container {
|
|
max-height: 15vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.autocomplete-container .autocomplete-select button {
|
|
text-align: left;
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
width: 100%;
|
|
}
|
|
|
|
#search-fav-menu-toggle {
|
|
text-align: right;
|
|
padding-right: 2rem;
|
|
line-height: 100%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#search-fav-menu-toggle > span {
|
|
font-weight: bold;
|
|
line-height: 0;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.autocomplete-container.filtered .autocomplete-select button {
|
|
display: none;
|
|
}
|
|
.autocomplete-container.filtered .autocomplete-select button.match {
|
|
display: inherit;
|
|
}
|
|
|
|
@media (max-width: 320.98px) {
|
|
.leaflet-control-geocoder-form > input[type='text'] {
|
|
max-width: 50vw;
|
|
}
|
|
|
|
.leaflet-control-geocoder-alternatives {
|
|
max-width: 65vw;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 575.98px) {
|
|
.modal-fullscreen-sm-down {
|
|
width: 100vw;
|
|
max-width: none;
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
.modal-fullscreen-sm-down .modal-content {
|
|
height: 100%;
|
|
border: 0;
|
|
border-radius: 0;
|
|
}
|
|
.modal-fullscreen-sm-down .modal-header {
|
|
border-radius: 0;
|
|
}
|
|
.modal-fullscreen-sm-down .modal-body {
|
|
overflow-y: auto;
|
|
}
|
|
.modal-fullscreen-sm-down .modal-footer {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
@media (max-width: 767.98px) {
|
|
.modal-fullscreen-md-down {
|
|
width: 100vw;
|
|
max-width: none;
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
.modal-fullscreen-md-down .modal-content {
|
|
height: 100%;
|
|
border: 0;
|
|
border-radius: 0;
|
|
}
|
|
.modal-fullscreen-md-down .modal-header {
|
|
border-radius: 0;
|
|
}
|
|
.modal-fullscreen-md-down .modal-body {
|
|
overflow-y: auto;
|
|
}
|
|
.modal-fullscreen-md-down .modal-footer {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
@media (max-width: 991.98px) {
|
|
.modal-fullscreen-lg-down {
|
|
width: 100vw;
|
|
max-width: none;
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
.modal-fullscreen-lg-down .modal-content {
|
|
height: 100%;
|
|
border: 0;
|
|
border-radius: 0;
|
|
}
|
|
.modal-fullscreen-lg-down .modal-header {
|
|
border-radius: 0;
|
|
}
|
|
.modal-fullscreen-lg-down .modal-body {
|
|
overflow-y: auto;
|
|
}
|
|
.modal-fullscreen-lg-down .modal-footer {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
@media (max-width: 1199.98px) {
|
|
.modal-fullscreen-xl-down {
|
|
width: 100vw;
|
|
max-width: none;
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
.modal-fullscreen-xl-down .modal-content {
|
|
height: 100%;
|
|
border: 0;
|
|
border-radius: 0;
|
|
}
|
|
.modal-fullscreen-xl-down .modal-header {
|
|
border-radius: 0;
|
|
}
|
|
.modal-fullscreen-xl-down .modal-body {
|
|
overflow-y: auto;
|
|
}
|
|
.modal-fullscreen-xl-down .modal-footer {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
@media (max-width: 1399.98px) {
|
|
.modal-fullscreen-xxl-down {
|
|
width: 100vw;
|
|
max-width: none;
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
.modal-fullscreen-xxl-down .modal-content {
|
|
height: 100%;
|
|
border: 0;
|
|
border-radius: 0;
|
|
}
|
|
.modal-fullscreen-xxl-down .modal-header {
|
|
border-radius: 0;
|
|
}
|
|
.modal-fullscreen-xxl-down .modal-body {
|
|
overflow-y: auto;
|
|
}
|
|
.modal-fullscreen-xxl-down .modal-footer {
|
|
border-radius: 0;
|
|
}
|
|
}
|