1200 lines
24 KiB
CSS
1200 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-title {
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|