brouter-web/css/style.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;
}

/* 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;
}

.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],
#distance {
    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;
}

#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,
#message .alert {
    -moz-user-select: text;
}
#message {
    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;
}

#profile_buttons {
    padding-top: 4px;
}

/* 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;
}

/* 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;
}

/*
* 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.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;
}

/* 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;
}

#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;
}