mirror of
https://github.com/FoggedLens/iD.git
synced 2026-02-13 09:12:52 +00:00
29dde3f217
- adding a temp wikipedia icon from http://upload.wikimedia.org/wikipedia/commons/4/45/Right-facing-Arrow-icon.jpg Making the click update and rotate an image marker on the map with comapss direction. Needs to be centered etc. now properly enabling/disabling the different Mapillary layers upon activation/deactivation Upgrade to faster Mapillary API better arrow icon, refactoring to have all single-image operations in the image-layer dist build adding mapillary translation adjusting image link trying to adjust the image link for github deploy better layout removing font-awesome, not needed. https for calls consistent quotes taking care of more translation, fix case of no images found on Mapillary more english translations - scoping image calls to selection. - .inspector-wrap and .panewrap are hard to scope, since they are outside the selection, same for the #mapillary-inspector. -scoping calls in sequences layer adding translation fixing jslint errors more jshint errors adding mapillary to tests trying to lay out single markers, please help with the geo translation, @jfirebaugh - adding the image layer to the active iD SVG instead of background - add a new mode for selecting Mapillary images - first stab of adding the image pane in the sidebar itself in order to contain the selections (needs to be layouted) cleaning trying to mark and keep selected image between mouseovers refactoring to contain mapillary into the iamge mode refactoring to contain mapillary into the iamge mode adding to test html cleaning up handling unset selected image cleanup better sidebar moving image into the lower right Minor visual adjustment mapillaryImage better no_image text and toggling of selected image handling of text disappearing intendation fixing test errors making sequences be below images open Mapillary links in new tabs better arrows and selectability on arrows as a workaround for real navigation in panos more contrast for the selected image adjusting image style - adjusting style, removing sequence lines - adding photos as a mode with shortcut 'm' - fix test errors moving switch back to right sidebar, keeping keyboard shortcut. cleanup file rename to avoid GIT mess with casing. - better scoping - removed unused hover function - making the checkbox follow mode changes removing unused icon handling automatic mode exit
1206 lines
25 KiB
CSS
1206 lines
25 KiB
CSS
/* tiles */
|
|
img.tile {
|
|
position:absolute;
|
|
transform-origin:0 0;
|
|
-ms-transform-origin:0 0;
|
|
-webkit-transform-origin:0 0;
|
|
-moz-transform-origin:0 0;
|
|
-o-transform-origin:0 0;
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transition: opacity 200ms linear;
|
|
transition: opacity 200ms linear;
|
|
-moz-transition: opacity 200ms linear;
|
|
}
|
|
|
|
img.tile-loaded {
|
|
opacity: 1;
|
|
}
|
|
img.tile-removing {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* base styles */
|
|
path {
|
|
fill: none;
|
|
}
|
|
|
|
use {
|
|
pointer-events: none;
|
|
}
|
|
|
|
g.point .shadow,
|
|
g.vertex .shadow,
|
|
g.midpoint .shadow {
|
|
pointer-events: all;
|
|
}
|
|
|
|
path.shadow {
|
|
pointer-events: stroke;
|
|
}
|
|
|
|
.shadow {
|
|
-webkit-transition: 200ms;
|
|
-moz-transition: 200ms;
|
|
transition: 200ms;
|
|
}
|
|
|
|
/* points */
|
|
|
|
g.point .stroke {
|
|
stroke: #444;
|
|
stroke-width: 1;
|
|
fill: #fff;
|
|
}
|
|
|
|
g.point .shadow {
|
|
fill: none;
|
|
stroke: #f6634f;
|
|
stroke-width: 8;
|
|
stroke-opacity: 0;
|
|
}
|
|
|
|
g.point.hover:not(.selected) .shadow {
|
|
stroke-opacity: 0.5;
|
|
}
|
|
|
|
g.point.selected .shadow {
|
|
stroke-opacity: 0.7;
|
|
}
|
|
|
|
g.point.active, g.point.active * {
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* vertices and midpoints */
|
|
|
|
g.vertex .fill {
|
|
fill: #000;
|
|
}
|
|
|
|
g.vertex .stroke {
|
|
stroke: #666;
|
|
stroke-width: 1;
|
|
fill: white;
|
|
}
|
|
|
|
g.vertex.shared .stroke {
|
|
fill: #aaa;
|
|
}
|
|
|
|
g.midpoint .fill {
|
|
fill: #eee;
|
|
stroke: #444;
|
|
stroke-opacity: .6;
|
|
opacity: .7;
|
|
}
|
|
|
|
g.midpoint.tag-highway-pedestrian .fill,
|
|
g.midpoint.tag-highway-steps .fill,
|
|
g.midpoint.tag-highway-path .fill,
|
|
g.midpoint.tag-highway-footway .fill,
|
|
g.midpoint.tag-highway-cycleway .fill,
|
|
g.midpoint.tag-highway-bridleway .fill {
|
|
fill: #fff;
|
|
stroke: #333;
|
|
stroke-opacity: .8;
|
|
opacity: .8;
|
|
}
|
|
|
|
g.vertex .shadow,
|
|
g.midpoint .shadow {
|
|
fill: #f6634f;
|
|
fill-opacity: 0;
|
|
}
|
|
|
|
g.vertex.vertex-hover {
|
|
display: none;
|
|
}
|
|
|
|
.mode-draw-area g.vertex.vertex-hover,
|
|
.mode-draw-line g.vertex.vertex-hover,
|
|
.mode-add-area g.vertex.vertex-hover,
|
|
.mode-add-line g.vertex.vertex-hover,
|
|
.mode-add-point g.vertex.vertex-hover,
|
|
.mode-drag-node g.vertex.vertex-hover {
|
|
display: block;
|
|
}
|
|
|
|
g.vertex.hover:not(.selected) .shadow,
|
|
g.midpoint.hover:not(.selected) .shadow {
|
|
fill-opacity: 0.3;
|
|
}
|
|
|
|
g.vertex.selected .shadow {
|
|
fill-opacity: 0.5;
|
|
}
|
|
|
|
.mode-draw-area g.midpoint,
|
|
.mode-draw-line g.midpoint,
|
|
.mode-add-area g.midpoint,
|
|
.mode-add-line g.midpoint,
|
|
.mode-add-point g.midpoint {
|
|
display: none;
|
|
}
|
|
|
|
/* lines */
|
|
|
|
path.line {
|
|
stroke-linecap: round;
|
|
stroke-linejoin: bevel;
|
|
}
|
|
|
|
path.stroke {
|
|
stroke: black;
|
|
stroke-width: 4;
|
|
}
|
|
|
|
path.shadow {
|
|
stroke: #f6634f;
|
|
stroke-width: 10;
|
|
stroke-opacity: 0;
|
|
}
|
|
|
|
path.shadow.hover:not(.selected) {
|
|
stroke-opacity: 0.3;
|
|
}
|
|
|
|
path.shadow.selected {
|
|
stroke-opacity: 0.7;
|
|
}
|
|
|
|
path.line.stroke {
|
|
stroke: white;
|
|
stroke-width: 2;
|
|
}
|
|
|
|
path.area.stroke {
|
|
stroke: white;
|
|
stroke-width: 1;
|
|
}
|
|
path.area.fill {
|
|
fill: rgba(255, 255, 255, 0.3);
|
|
fill-rule: evenodd;
|
|
}
|
|
.preset-icon-fill-area {
|
|
border: 1px solid rgb(170, 170, 170);
|
|
background-color: rgba(170, 170, 170, 0.3);
|
|
}
|
|
|
|
path.stroke.tag-natural {
|
|
stroke: rgb(182, 225, 153);
|
|
}
|
|
path.fill.tag-natural {
|
|
fill: rgba(182, 225, 153, 0.3);
|
|
}
|
|
.preset-icon-fill-area.tag-natural {
|
|
border-color: rgb(182, 225, 153);
|
|
background-color: rgba(182, 225, 153, 0.3);
|
|
}
|
|
|
|
path.stroke.tag-natural-water {
|
|
stroke: rgb(119, 211, 222);
|
|
}
|
|
path.fill.tag-natural-water {
|
|
fill: rgba(119, 211, 222, 0.3);
|
|
}
|
|
.preset-icon-fill-area.tag-natural-water {
|
|
border-color: rgb(119, 211, 222);
|
|
background-color: rgba(119, 211, 222, 0.3);
|
|
}
|
|
|
|
path.stroke.tag-amenity-childcare,
|
|
path.stroke.tag-amenity-kindergarten,
|
|
path.stroke.tag-amenity-school,
|
|
path.stroke.tag-amenity-college,
|
|
path.stroke.tag-amenity-university {
|
|
stroke: rgb(255, 255, 148);
|
|
}
|
|
path.fill.tag-amenity-childcare,
|
|
path.fill.tag-amenity-kindergarten,
|
|
path.fill.tag-amenity-school,
|
|
path.fill.tag-amenity-college,
|
|
path.fill.tag-amenity-university {
|
|
fill: rgba(255, 255, 148, 0.15);
|
|
}
|
|
.preset-icon-fill-area.tag-amenity-childcare,
|
|
.preset-icon-fill-area.tag-amenity-kindergarten,
|
|
.preset-icon-fill-area.tag-amenity-school,
|
|
.preset-icon-fill-area.tag-amenity-college,
|
|
.preset-icon-fill-area.tag-amenity-university {
|
|
border-color: rgb(255, 255, 148);
|
|
background-color: rgba(255, 255, 148, 0.15);
|
|
}
|
|
|
|
path.stroke.tag-landuse,
|
|
path.stroke.tag-natural-wood,
|
|
path.stroke.tag-natural-tree,
|
|
path.stroke.tag-natural-grassland,
|
|
path.stroke.tag-natural-grass,
|
|
path.stroke.tag-leisure-pitch,
|
|
path.stroke.tag-leisure-park {
|
|
stroke: rgb(140, 208, 95);
|
|
}
|
|
path.fill.tag-landuse,
|
|
path.fill.tag-natural-wood,
|
|
path.fill.tag-natural-tree,
|
|
path.fill.tag-natural-grassland,
|
|
path.fill.tag-natural-grass,
|
|
path.fill.tag-leisure-pitch,
|
|
path.fill.tag-leisure-park {
|
|
fill: rgba(140, 208, 95, 0.2);
|
|
}
|
|
.preset-icon-fill-area.tag-landuse,
|
|
.preset-icon-fill-area.tag-natural-wood,
|
|
.preset-icon-fill-area.tag-natural-tree,
|
|
.preset-icon-fill-area.tag-natural-grassland,
|
|
.preset-icon-fill-area.tag-natural-grass,
|
|
.preset-icon-fill-area.tag-leisure-pitch,
|
|
.preset-icon-fill-area.tag-leisure-park {
|
|
border-color: rgb(140, 208, 95);
|
|
background-color: rgba(140, 208, 95, 0.2);
|
|
}
|
|
|
|
path.fill.tag-landuse-residential,
|
|
path.fill.tag-landuse-retail,
|
|
path.fill.tag-landuse-commercial,
|
|
path.fill.tag-landuse-industrial {
|
|
fill: none;
|
|
stroke-width: 60px;
|
|
}
|
|
|
|
path.stroke.tag-landuse-residential {
|
|
stroke: rgb(196, 189, 25);
|
|
}
|
|
path.fill.tag-landuse-residential {
|
|
stroke: rgba(196, 189, 25, 0.3);
|
|
}
|
|
.preset-icon-fill-area.tag-landuse-residential {
|
|
border-color: rgb(196, 189, 25);
|
|
background: none;
|
|
box-shadow: inset 0 0 0 5px rgba(196, 189, 25, 0.3);
|
|
}
|
|
|
|
path.stroke.tag-landuse-retail,
|
|
path.stroke.tag-landuse-commercial {
|
|
stroke: rgb(214, 136, 26);
|
|
}
|
|
path.fill.tag-landuse-retail,
|
|
path.fill.tag-landuse-commercial {
|
|
stroke: rgba(214, 136, 26, 0.3);
|
|
}
|
|
.preset-icon-fill-area.tag-landuse-retail,
|
|
.preset-icon-fill-area.tag-landuse-commercial {
|
|
border-color: rgb(214, 136, 26);
|
|
background: none;
|
|
box-shadow: inset 0 0 0 5px rgba(214, 136, 26, 0.3);
|
|
}
|
|
|
|
path.stroke.tag-landuse-industrial {
|
|
stroke: rgb(228, 164, 245);
|
|
}
|
|
path.fill.tag-landuse-industrial {
|
|
stroke: rgba(228, 164, 245, 0.3);
|
|
}
|
|
.preset-icon-fill-area.tag-landuse-industrial {
|
|
border-color: rgb(228, 164, 245);
|
|
background: none;
|
|
box-shadow: inset 0 0 0 5px rgba(228, 164, 245, 0.3);
|
|
}
|
|
|
|
path.stroke.tag-landuse-basin,
|
|
path.stroke.tag-landuse-reservoir {
|
|
stroke: rgb(119, 211, 222);
|
|
}
|
|
path.fill.tag-landuse-basin,
|
|
path.fill.tag-landuse-reservoir {
|
|
fill: rgba(119, 211, 222, 0.3);
|
|
}
|
|
.preset-icon-fill-area.tag-landuse-basin,
|
|
.preset-icon-fill-area.tag-landuse-reservoir {
|
|
border-color: rgb(119, 211, 222);
|
|
background-color: rgba(119, 211, 222, 0.3);
|
|
}
|
|
|
|
path.stroke.tag-landuse-quarry {
|
|
stroke: rgb(166, 149, 123);
|
|
}
|
|
path.fill.tag-landuse-quarry {
|
|
fill: rgba(166, 149, 123, 0.2);
|
|
}
|
|
.preset-icon-fill-area.tag-landuse-quarry {
|
|
border-color: rgb(166, 149, 123);
|
|
background-color: rgba(166, 149, 123, 0.2);
|
|
}
|
|
|
|
path.stroke.tag-landuse-landfill {
|
|
stroke: rgb(255, 153, 51);
|
|
}
|
|
path.fill.tag-landuse-landfill {
|
|
fill: rgba(255, 153, 51, 0.2);
|
|
}
|
|
.preset-icon-fill-area.tag-landuse-landfill {
|
|
border-color: rgb(255, 153, 51);
|
|
background-color: rgba(255, 153, 51, 0.2);
|
|
}
|
|
|
|
path.stroke.tag-landuse-construction {
|
|
stroke: rgb(196, 189, 25);
|
|
}
|
|
.pattern-color-construction {
|
|
fill: rgba(196, 189, 25, 0.2);
|
|
}
|
|
.preset-icon-fill-area.tag-landuse-construction {
|
|
border-color: rgb(196, 189, 25);
|
|
background-color: rgba(196, 189, 25, 0.2);
|
|
}
|
|
|
|
path.stroke.tag-landuse-military {
|
|
stroke: rgb(214, 136, 26);
|
|
}
|
|
.preset-icon-fill-area.tag-landuse-military {
|
|
border-color: rgb(214, 136, 26);
|
|
background-color: rgba(214, 136, 26, 0.2);
|
|
}
|
|
|
|
path.stroke.tag-natural-wetland {
|
|
stroke: rgb(182, 225, 153);
|
|
}
|
|
.pattern-color-wetland {
|
|
fill: rgba(182, 225, 153, 0.2);
|
|
}
|
|
.preset-icon-fill-area.tag-natural-wetland {
|
|
border-color: rgb(182, 225, 153);
|
|
background-color: rgba(182, 225, 153, 0.2);
|
|
}
|
|
|
|
path.stroke.tag-landuse-meadow {
|
|
stroke: rgb(182, 225, 153);
|
|
}
|
|
.pattern-color-meadow {
|
|
fill: rgba(182, 225, 153, 0.2);
|
|
}
|
|
.preset-icon-fill-area.tag-landuse-meadow {
|
|
border-color: rgb(182, 225, 153);
|
|
background-color: rgba(182, 225, 153, 0.2);
|
|
}
|
|
|
|
path.stroke.tag-natural-beach {
|
|
stroke: rgb(255, 255, 126);
|
|
}
|
|
.pattern-color-beach {
|
|
fill: rgba(255, 255, 126, 0.2);
|
|
}
|
|
.preset-icon-fill-area.tag-natural-beach {
|
|
border-color: rgb(255, 255, 126);
|
|
background-color: rgba(255, 255, 126, 0.2);
|
|
}
|
|
|
|
path.stroke.tag-natural-scrub {
|
|
stroke: rgb(219, 240, 139);
|
|
}
|
|
.pattern-color-scrub {
|
|
fill: rgba(219, 240, 139, 0.2);
|
|
}
|
|
.preset-icon-fill-area.tag-natural-scrub {
|
|
border-color: rgb(219, 240, 139);
|
|
background-color: rgba(219, 240, 139, 0.2);
|
|
}
|
|
|
|
.pattern-color-farm,
|
|
.pattern-color-farmland {
|
|
fill: rgba(140, 208, 95, 0.2);
|
|
}
|
|
.preset-icon-fill-area.tag-landuse-farm,
|
|
.preset-icon-fill-area.tag-landuse-farmland {
|
|
background-color: rgba(140, 208, 95, 0.2);
|
|
}
|
|
|
|
.pattern-color-cemetery {
|
|
fill: rgba(140, 208, 95, 0.2)
|
|
}
|
|
.preset-icon-fill-area.tag-landuse-cemetery {
|
|
background-color: rgba(140, 208, 95, 0.2);
|
|
}
|
|
|
|
.pattern-color-orchard {
|
|
fill: rgba(140, 208, 95, 0.2)
|
|
}
|
|
.preset-icon-fill-area.tag-landuse-orchard {
|
|
background-color: rgba(140, 208, 95, 0.8);
|
|
}
|
|
|
|
path.stroke.tag-amenity-parking {
|
|
stroke: rgb(170, 170, 170);
|
|
}
|
|
path.fill.tag-amenity-parking {
|
|
fill: rgba(170, 170, 170, 0.3);
|
|
}
|
|
.preset-icon-fill-area.tag-amenity-parking {
|
|
border-color: rgb(170, 170, 170);
|
|
background-color: rgba(170, 170, 170, 0.3);
|
|
}
|
|
|
|
path.fill.tag-place,
|
|
path.fill.tag-boundary {
|
|
fill: none;
|
|
}
|
|
|
|
/* highways */
|
|
|
|
path.shadow.tag-highway {
|
|
stroke-width:16;
|
|
}
|
|
path.casing.tag-highway {
|
|
stroke:#444;
|
|
stroke-width:10;
|
|
}
|
|
path.stroke.tag-highway {
|
|
stroke:#ccc;
|
|
stroke-width:8;
|
|
}
|
|
|
|
.low-zoom path.shadow.tag-highway {
|
|
stroke-width:12;
|
|
}
|
|
.low-zoom path.casing.tag-highway {
|
|
stroke-width:6;
|
|
}
|
|
.low-zoom path.stroke.tag-highway {
|
|
stroke-width:4;
|
|
}
|
|
|
|
path.stroke.tag-highway-motorway,
|
|
path.stroke.tag-highway-motorway_link,
|
|
path.stroke.tag-construction-motorway {
|
|
stroke:#58a9ed;
|
|
}
|
|
|
|
path.casing.tag-highway-motorway,
|
|
path.casing.tag-highway-motorway_link,
|
|
path.casing.tag-construction-motorway {
|
|
stroke:#2c5476;
|
|
}
|
|
|
|
path.stroke.tag-highway-trunk,
|
|
path.stroke.tag-highway-trunk_link,
|
|
path.stroke.tag-construction-trunk {
|
|
stroke:#8cd05f;
|
|
}
|
|
path.casing.tag-highway-trunk,
|
|
path.casing.tag-highway-trunk_link,
|
|
path.casing.tag-construction-trunk {
|
|
stroke:#46682f;
|
|
}
|
|
|
|
path.stroke.tag-highway-primary,
|
|
path.stroke.tag-highway-primary_link,
|
|
path.stroke.tag-construction-primary {
|
|
stroke:#e06d5f;
|
|
}
|
|
path.casing.tag-highway-primary,
|
|
path.casing.tag-highway-primary_link,
|
|
path.casing.tag-construction-primary {
|
|
stroke:#70372f;
|
|
}
|
|
|
|
path.stroke.tag-highway-secondary,
|
|
path.stroke.tag-highway-secondary_link,
|
|
path.stroke.tag-construction-secondary {
|
|
stroke:#eab056;
|
|
}
|
|
path.casing.tag-highway-secondary,
|
|
path.casing.tag-highway-secondary_link,
|
|
path.casing.tag-construction-secondary {
|
|
stroke:#75582b;
|
|
}
|
|
|
|
path.stroke.tag-highway-tertiary,
|
|
path.stroke.tag-highway-tertiary_link,
|
|
path.stroke.tag-construction-tertiary {
|
|
stroke:#ffff7e;
|
|
}
|
|
path.casing.tag-highway-tertiary,
|
|
path.casing.tag-highway-tertiary_link,
|
|
path.casing.tag-construction-tertiary {
|
|
stroke:#7f7f3f;
|
|
}
|
|
|
|
path.stroke.tag-highway-unclassified,
|
|
path.stroke.tag-construction-unclassified {
|
|
stroke:#eaeaea;
|
|
}
|
|
path.casing.tag-highway-unclassified,
|
|
path.casing.tag-construction-unclassified {
|
|
stroke:#444;
|
|
}
|
|
|
|
path.stroke.tag-highway-residential,
|
|
path.stroke.tag-construction-residential {
|
|
stroke:#fff;
|
|
}
|
|
path.casing.tag-highway-residential,
|
|
path.casing.tag-construction-residential {
|
|
stroke:#444;
|
|
}
|
|
|
|
path.stroke.tag-highway-living_street {
|
|
stroke:#ccc;
|
|
stroke-width:4;
|
|
}
|
|
path.casing.tag-highway-living_street {
|
|
stroke:#fff;
|
|
stroke-width:6;
|
|
}
|
|
|
|
path.stroke.line.tag-highway-pedestrian {
|
|
stroke:#fff;
|
|
stroke-dasharray: 2, 8;
|
|
stroke-width:4 !important;
|
|
shapeRendering: auto;
|
|
}
|
|
path.casing.line.tag-highway-pedestrian {
|
|
stroke:#8cd05f;
|
|
stroke-width:6 !important;
|
|
}
|
|
path.stroke.area.tag-highway-pedestrian {
|
|
stroke:#fff;
|
|
stroke-width: 2;
|
|
}
|
|
|
|
path.stroke.tag-highway-service {
|
|
stroke:#fff;
|
|
stroke-width:4;
|
|
}
|
|
path.casing.tag-highway-service {
|
|
stroke:#666;
|
|
stroke-width:6;
|
|
}
|
|
.low-zoom path.stroke.tag-highway-service {
|
|
stroke-width:2;
|
|
}
|
|
.low-zoom path.casing.tag-highway-service {
|
|
stroke-width:4;
|
|
}
|
|
|
|
path.stroke.tag-highway-track {
|
|
stroke: #fff;
|
|
stroke-width: 4;
|
|
}
|
|
path.casing.tag-highway-track {
|
|
stroke: #996600;
|
|
stroke-width: 6;
|
|
stroke-linecap: butt;
|
|
stroke-dasharray: 6, 6;
|
|
}
|
|
.low-zoom path.stroke.tag-highway-track {
|
|
stroke-width:2;
|
|
}
|
|
.low-zoom path.casing.tag-highway-track {
|
|
stroke-width:4;
|
|
}
|
|
|
|
path.stroke.tag-highway-path {
|
|
stroke: #000;
|
|
stroke-width: 1 !important;
|
|
stroke-linecap: butt;
|
|
stroke-dasharray: 8, 4;
|
|
}
|
|
path.casing.tag-highway-path {
|
|
stroke-width: 1 !important;
|
|
stroke: #fff;
|
|
}
|
|
|
|
path.stroke.tag-highway-footway,
|
|
path.stroke.tag-highway-cycleway,
|
|
path.stroke.tag-highway-bridleway {
|
|
stroke-width: 4;
|
|
stroke-linecap: butt;
|
|
stroke-dasharray: 6, 6;
|
|
}
|
|
path.casing.tag-highway-footway,
|
|
path.casing.tag-highway-cycleway,
|
|
path.casing.tag-highway-bridleway {
|
|
stroke-width: 6;
|
|
stroke: #fff;
|
|
}
|
|
|
|
.low-zoom path.stroke.tag-highway-footway,
|
|
.low-zoom path.stroke.tag-highway-cycleway,
|
|
.low-zoom path.stroke.tag-highway-bridleway {
|
|
stroke-width: 2;
|
|
}
|
|
.low-zoom path.casing.tag-highway-footway,
|
|
.low-zoom path.casing.tag-highway-cycleway,
|
|
.low-zoom path.casing.tag-highway-bridleway {
|
|
stroke-width: 4;
|
|
}
|
|
|
|
path.stroke.tag-highway-footway {
|
|
stroke: #ae8681;
|
|
}
|
|
path.stroke.tag-highway-cycleway {
|
|
stroke: #58a9ed;
|
|
}
|
|
path.stroke.tag-highway-bridleway {
|
|
stroke: #e06d5f;
|
|
}
|
|
|
|
path.stroke.tag-highway-steps {
|
|
stroke: #81d25c;
|
|
stroke-width: 4;
|
|
stroke-linecap: butt;
|
|
stroke-dasharray: 3, 3;
|
|
}
|
|
path.casing.tag-highway-steps {
|
|
stroke-width: 6;
|
|
stroke: #fff;
|
|
}
|
|
|
|
/* aeroways */
|
|
|
|
path.stroke.tag-aeroway-taxiway {
|
|
stroke: #805C80;
|
|
stroke-width: 4;
|
|
}
|
|
path.shadow.tag-aeroway-runway {
|
|
stroke-width: 20;
|
|
}
|
|
path.stroke.tag-aeroway-runway {
|
|
stroke: #fff;
|
|
stroke-width: 2;
|
|
stroke-linecap: butt;
|
|
stroke-dasharray: 24, 48;
|
|
}
|
|
path.casing.tag-aeroway-runway {
|
|
stroke-width: 10;
|
|
stroke: #000;
|
|
stroke-linecap: square;
|
|
}
|
|
path.fill.tag-aeroway-runway {
|
|
fill: rgba(0, 0, 0, 0.6);
|
|
}
|
|
path.stroke.tag-aeroway-apron {
|
|
stroke: #805C80;
|
|
}
|
|
path.fill.tag-aeroway-apron {
|
|
fill: rgba(128, 92, 128, 0.2);
|
|
}
|
|
|
|
|
|
/* railways */
|
|
|
|
path.stroke.tag-railway {
|
|
stroke: #eee;
|
|
stroke-width: 2;
|
|
stroke-linecap: butt;
|
|
stroke-dasharray: 12,12;
|
|
}
|
|
|
|
path.casing.tag-railway {
|
|
stroke: #555;
|
|
stroke-width: 4;
|
|
}
|
|
|
|
path.stroke.tag-railway-abandoned {
|
|
stroke: #eee;
|
|
}
|
|
path.casing.tag-railway-abandoned {
|
|
stroke: #999;
|
|
}
|
|
|
|
path.stroke.tag-railway-subway {
|
|
stroke: #666;
|
|
}
|
|
path.casing.tag-railway-subway {
|
|
stroke: #222;
|
|
}
|
|
|
|
path.stroke.tag-railway-platform {
|
|
stroke: #999;
|
|
stroke-width: 4;
|
|
stroke-dasharray: none;
|
|
}
|
|
path.casing.tag-railway-platform {
|
|
stroke: none;
|
|
}
|
|
|
|
.area.stroke.tag-railway {
|
|
stroke: white;
|
|
stroke-width: 1;
|
|
stroke-dasharray: none;
|
|
}
|
|
.area.casing.tag-railway {
|
|
stroke: none;
|
|
}
|
|
|
|
/* waterways */
|
|
|
|
path.fill.tag-waterway {
|
|
fill: rgba(119, 211, 222, 0.3);
|
|
}
|
|
|
|
path.stroke.tag-waterway {
|
|
stroke: #77d3de;
|
|
stroke-width: 2;
|
|
}
|
|
path.casing.tag-waterway {
|
|
stroke: #77d3de;
|
|
stroke-width: 4;
|
|
}
|
|
|
|
path.stroke.tag-waterway-river {
|
|
stroke-width: 4;
|
|
}
|
|
path.casing.tag-waterway-river {
|
|
stroke-width: 6;
|
|
}
|
|
|
|
path.stroke.tag-waterway-ditch {
|
|
stroke: #6591ff;
|
|
stroke-width: 1;
|
|
}
|
|
path.casing.tag-waterway-ditch {
|
|
stroke: #6591ff;
|
|
stroke-width: 3;
|
|
}
|
|
|
|
/* power */
|
|
|
|
path.stroke.tag-power {
|
|
stroke: #939393;
|
|
stroke-width: 2;
|
|
}
|
|
path.casing.tag-power {
|
|
stroke: none;
|
|
}
|
|
|
|
/* boundary */
|
|
|
|
path.stroke.tag-boundary {
|
|
stroke: #fff;
|
|
stroke-width: 2;
|
|
stroke-linecap: butt;
|
|
stroke-dasharray: 20, 5, 5, 5;
|
|
}
|
|
path.casing.tag-boundary {
|
|
stroke: #82B5FE;
|
|
stroke-width: 6;
|
|
}
|
|
|
|
path.casing.tag-boundary-protected_area,
|
|
path.casing.tag-boundary-national_park {
|
|
stroke: #b0e298;
|
|
}
|
|
|
|
|
|
/* bridges */
|
|
|
|
path.casing.tag-bridge {
|
|
stroke-width: 16;
|
|
stroke-opacity: 0.6;
|
|
stroke: #000;
|
|
stroke-linecap: butt;
|
|
}
|
|
|
|
path.shadow.tag-bridge {
|
|
stroke-width: 22;
|
|
}
|
|
|
|
path.casing.line.tag-railway.tag-bridge,
|
|
path.casing.tag-highway-living_street.tag-bridge,
|
|
path.casing.tag-highway-path.tag-bridge,
|
|
path.casing.line.tag-highway-pedestrian.tag-bridge,
|
|
path.casing.tag-highway-service.tag-bridge,
|
|
path.casing.tag-highway-track.tag-bridge,
|
|
path.casing.tag-highway-steps.tag-bridge,
|
|
path.casing.tag-highway-footway.tag-bridge,
|
|
path.casing.tag-highway-cycleway.tag-bridge,
|
|
path.casing.tag-highway-bridleway.tag-bridge {
|
|
stroke-width: 10;
|
|
}
|
|
|
|
path.shadow.line.tag-railway.tag-bridge,
|
|
path.shadow.tag-highway-living_street.tag-bridge,
|
|
path.shadow.tag-highway-path.tag-bridge,
|
|
path.shadow.line.tag-highway-pedestrian.tag-bridge,
|
|
path.shadow.tag-highway-service.tag-bridge,
|
|
path.shadow.tag-highway-track.tag-bridge,
|
|
path.shadow.tag-highway-steps.tag-bridge,
|
|
path.shadow.tag-highway-footway.tag-bridge,
|
|
path.shadow.tag-highway-cycleway.tag-bridge,
|
|
path.shadow.tag-highway-bridleway.tag-bridge {
|
|
stroke-width: 17;
|
|
}
|
|
|
|
|
|
.low-zoom path.casing.tag-bridge {
|
|
stroke-width: 10;
|
|
stroke-opacity: 0.6;
|
|
stroke: #000;
|
|
stroke-linecap: butt;
|
|
}
|
|
|
|
.low-zoom path.shadow.tag-bridge {
|
|
stroke-width: 14;
|
|
}
|
|
|
|
.low-zoom path.casing.line.tag-railway.tag-bridge,
|
|
.low-zoom path.casing.tag-highway-living_street.tag-bridge,
|
|
.low-zoom path.casing.tag-highway-path.tag-bridge,
|
|
.low-zoom path.casing.line.tag-highway-pedestrian.tag-bridge,
|
|
.low-zoom path.casing.tag-highway-service.tag-bridge,
|
|
.low-zoom path.casing.tag-highway-track.tag-bridge,
|
|
.low-zoom path.casing.tag-highway-steps.tag-bridge,
|
|
.low-zoom path.casing.tag-highway-footway.tag-bridge,
|
|
.low-zoom path.casing.tag-highway-cycleway.tag-bridge,
|
|
.low-zoom path.casing.tag-highway-bridleway.tag-bridge {
|
|
stroke-width: 6;
|
|
}
|
|
|
|
.low-zoom path.shadow.line.tag-railway.tag-bridge,
|
|
.low-zoom path.shadow.tag-highway-living_street.tag-bridge,
|
|
.low-zoom path.shadow.tag-highway-path.tag-bridge,
|
|
.low-zoom path.shadow.line.tag-highway-pedestrian.tag-bridge,
|
|
.low-zoom path.shadow.tag-highway-service.tag-bridge,
|
|
.low-zoom path.shadow.tag-highway-track.tag-bridge,
|
|
.low-zoom path.shadow.tag-highway-steps.tag-bridge,
|
|
.low-zoom path.shadow.tag-highway-footway.tag-bridge,
|
|
.low-zoom path.shadow.tag-highway-cycleway.tag-bridge,
|
|
.low-zoom path.shadow.tag-highway-bridleway.tag-bridge {
|
|
stroke-width: 13;
|
|
}
|
|
|
|
|
|
|
|
/* tunnels */
|
|
|
|
path.stroke.tag-tunnel {
|
|
stroke-opacity: 0.3;
|
|
}
|
|
|
|
path.casing.tag-tunnel {
|
|
stroke-opacity: 0.5;
|
|
}
|
|
|
|
/* embankments / cuttings */
|
|
|
|
path.casing.tag-embankment,
|
|
path.casing.tag-cutting {
|
|
stroke-opacity: 0.5;
|
|
stroke: #000;
|
|
stroke-width: 22;
|
|
stroke-dasharray: 2, 4;
|
|
stroke-linecap: butt;
|
|
}
|
|
|
|
path.shadow.tag-embankment,
|
|
path.shadow.tag-cutting {
|
|
stroke-width: 28;
|
|
}
|
|
|
|
.low-zoom path.casing.tag-embankment,
|
|
.low-zoom path.casing.tag-cutting {
|
|
stroke-width: 10;
|
|
}
|
|
|
|
.low-zoom path.shadow.tag-embankment,
|
|
.low-zoom path.shadow.tag-cutting {
|
|
stroke-width: 14;
|
|
}
|
|
|
|
|
|
/* construction */
|
|
|
|
path.stroke.tag-highway-construction,
|
|
path.casing.tag-highway-construction {
|
|
stroke-linecap: butt;
|
|
stroke-dasharray: 7, 7;
|
|
}
|
|
|
|
.low-zoom path.stroke.tag-highway-construction,
|
|
.low-zoom path.casing.tag-highway-construction {
|
|
stroke-linecap: butt;
|
|
stroke-dasharray: 5, 5;
|
|
}
|
|
|
|
text {
|
|
font-size:10px;
|
|
pointer-events: none;
|
|
color: #222;
|
|
opacity: 1;
|
|
}
|
|
|
|
.oneway .textpath.tag-waterway {
|
|
fill: #002F35;
|
|
}
|
|
|
|
marker#oneway-marker path {
|
|
fill:#000;
|
|
opacity: .5;
|
|
}
|
|
|
|
path.oneway {
|
|
stroke-width: 6px;
|
|
}
|
|
|
|
/* Buildings */
|
|
|
|
path.stroke.tag-building,
|
|
path.stroke.tag-amenity-shelter {
|
|
stroke: rgb(224, 110, 95);
|
|
}
|
|
path.fill.tag-building,
|
|
path.fill.tag-amenity-shelter {
|
|
fill: rgba(224, 110, 95, 0.3);
|
|
}
|
|
.preset-icon-fill-area.tag-building,
|
|
.preset-icon-fill-area.tag-amenity-shelter {
|
|
border-color: rgb(224, 110, 95);
|
|
background-color: rgba(224, 110, 95, 0.3);
|
|
}
|
|
|
|
|
|
/*
|
|
* Labels
|
|
*/
|
|
|
|
text.arealabel-halo,
|
|
text.linelabel-halo,
|
|
text.pointlabel-halo,
|
|
text.arealabel,
|
|
text.linelabel,
|
|
text.pointlabel {
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
fill: #333;
|
|
text-anchor: middle;
|
|
pointer-events: none;
|
|
-webkit-transition: opacity 100ms linear;
|
|
transition: opacity 100ms linear;
|
|
-moz-transition: opacity 100ms linear;
|
|
}
|
|
|
|
.linelabel-halo .textpath,
|
|
.linelabel .textpath {
|
|
dominant-baseline: middle;
|
|
}
|
|
|
|
/* Opera doesn't support dominant-baseline. See #715 */
|
|
.opera .linelabel-halo .textpath,
|
|
.opera .linelabel .textpath {
|
|
baseline-shift: -33%;
|
|
dominant-baseline: auto;
|
|
}
|
|
|
|
.layer-halo text {
|
|
opacity: 0.7;
|
|
stroke: #fff;
|
|
stroke-width: 5px;
|
|
stroke-miterlimit: 1;
|
|
}
|
|
|
|
text.proximate {
|
|
opacity: 0;
|
|
}
|
|
|
|
text.point {
|
|
font-size: 10px;
|
|
}
|
|
|
|
/* Turns */
|
|
|
|
g.turn rect,
|
|
g.turn circle {
|
|
fill: none;
|
|
pointer-events: all;
|
|
}
|
|
|
|
.form-field-restrictions .vertex {
|
|
pointer-events: none;
|
|
cursor: auto !important;
|
|
}
|
|
|
|
/* Cursors */
|
|
|
|
#map {
|
|
cursor: auto; /* Opera */
|
|
cursor: url(img/cursor-grab.png) 9 9, auto; /* FF */
|
|
}
|
|
|
|
.mode-browse .point,
|
|
.mode-select .point {
|
|
cursor: pointer; /* Opera */
|
|
cursor: url(img/cursor-select-point.png), pointer; /* FF */
|
|
}
|
|
|
|
.mode-select .vertex,
|
|
.mode-browse .vertex {
|
|
cursor: pointer; /* Opera */
|
|
cursor: url(img/cursor-select-vertex.png), pointer; /* FF */
|
|
}
|
|
|
|
.mode-browse .line,
|
|
.mode-select .line {
|
|
cursor: pointer; /* Opera */
|
|
cursor: url(img/cursor-select-line.png), pointer; /* FF */
|
|
}
|
|
|
|
.mode-select .area,
|
|
.mode-browse .area {
|
|
cursor: pointer; /* Opera */
|
|
cursor: url(img/cursor-select-area.png), pointer; /* FF */
|
|
}
|
|
|
|
.mode-select .midpoint,
|
|
.mode-browse .midpoint {
|
|
cursor: pointer; /* Opera */
|
|
cursor: url(img/cursor-select-split.png), pointer; /* FF */
|
|
}
|
|
|
|
.mode-select .behavior-multiselect .point,
|
|
.mode-select .behavior-multiselect .vertex,
|
|
.mode-select .behavior-multiselect .line,
|
|
.mode-select .behavior-multiselect .area {
|
|
cursor: pointer; /* Opera */
|
|
cursor: url(img/cursor-select-add.png), pointer; /* FF */
|
|
}
|
|
|
|
.mode-select .behavior-multiselect .selected {
|
|
cursor: pointer; /* Opera */
|
|
cursor: url(img/cursor-select-remove.png), pointer; /* FF */
|
|
}
|
|
|
|
#map .point:active,
|
|
#map .vertex:active,
|
|
#map .line:active,
|
|
#map .area:active,
|
|
#map .midpoint:active,
|
|
#map .mode-select .selected {
|
|
cursor: pointer; /* Opera */
|
|
cursor: url(img/cursor-select-acting.png), pointer; /* FF */
|
|
}
|
|
|
|
.mode-draw-line #map,
|
|
.mode-draw-area #map,
|
|
.mode-add-line #map,
|
|
.mode-add-area #map,
|
|
.mode-drag-node #map {
|
|
cursor: crosshair; /* Opera */
|
|
cursor: url(img/cursor-draw.png) 9 9, crosshair; /* FF */
|
|
}
|
|
|
|
.mode-draw-line .way.hover,
|
|
.mode-draw-area .way.hover,
|
|
.mode-add-line .way.hover,
|
|
.mode-add-area .way.hover,
|
|
.mode-drag-node .way.hover {
|
|
cursor: crosshair; /* Opera */
|
|
cursor: url(img/cursor-draw-connect-line.png) 9 9, crosshair; /* FF */
|
|
}
|
|
|
|
.mode-draw-line .vertex.hover,
|
|
.mode-draw-area .vertex.hover,
|
|
.mode-add-line .vertex.hover,
|
|
.mode-add-area .vertex.hover,
|
|
.mode-drag-node .vertex.hover {
|
|
cursor: crosshair; /* Opera */
|
|
cursor: url(img/cursor-draw-connect-vertex.png) 9 9, crosshair; /* FF */
|
|
}
|
|
|
|
.mode-add-point #map,
|
|
.lasso #map,
|
|
.lasso .way,
|
|
.lasso .vertex {
|
|
cursor: crosshair; /* Opera */
|
|
cursor: url(img/cursor-draw.png) 9 9, crosshair; /* FF */
|
|
}
|
|
|
|
.turn rect,
|
|
.turn circle {
|
|
cursor: pointer; /* Opera */
|
|
cursor: url(img/cursor-pointer.png) 6 1, pointer; /* FF */
|
|
}
|
|
|
|
.lasso #map {
|
|
pointer-events: visibleStroke;
|
|
}
|
|
|
|
/* GPX Paths */
|
|
path.gpx {
|
|
stroke: #FF26D4;
|
|
stroke-width: 2;
|
|
fill: none;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* GPS Labels */
|
|
text.gpx {
|
|
fill:#FF26D4;
|
|
}
|
|
|
|
/* Mapillary Sequences */
|
|
.sequence {
|
|
stroke: red;
|
|
stroke-width: 4;
|
|
fill: none;
|
|
pointer-events: visibleStroke;
|
|
}
|
|
|
|
g.image.point.hover {
|
|
stroke-opacity: 0.3;
|
|
}
|
|
|
|
g.image.point{
|
|
stroke: orange;
|
|
stroke-width: 2;
|
|
fill: none;
|
|
cursor: pointer; /* Opera */
|
|
cursor: url(img/cursor-select-mapillary.png) 6 1, pointer; /* FF */
|
|
}
|
|
|
|
g.image.point path{
|
|
stroke-width: 3;
|
|
stroke: orange;
|
|
fill: orange;
|
|
/*marker-end:url(#mapillary_direction_arrow);*/
|
|
}
|
|
|
|
g.image.point circle{
|
|
fill: orange;
|
|
fill-opacity: 0.3;
|
|
}
|
|
g.image.point.selected circle{
|
|
fill: yellow;
|
|
fill-opacity: 0.9;
|
|
}
|
|
|
|
#mapillary_direction_arrow {
|
|
fill: orange;
|
|
}
|
|
|
|
/* Modes */
|
|
|
|
.mode-draw-line .vertex.active,
|
|
.mode-draw-area .vertex.active,
|
|
.mode-drag-node .vertex.active {
|
|
display: none;
|
|
}
|
|
|
|
.mode-draw-line .way.active,
|
|
.mode-draw-area .way.active,
|
|
.mode-drag-node .active {
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Ensure drawing doesn't interact with area fills. */
|
|
.mode-add-point .area.fill,
|
|
.mode-draw-line .area.fill,
|
|
.mode-draw-area .area.fill,
|
|
.mode-add-line .area.fill,
|
|
.mode-add-area .area.fill,
|
|
.mode-drag-node .area.fill {
|
|
pointer-events: none;
|
|
}
|