From b8791e62a98037fae3c873ab506d39eeec766aa0 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Mon, 20 Feb 2017 14:38:07 -0500 Subject: [PATCH 1/2] Split map.css into separate files --- css/aeroways.css | 66 +++ css/areas.css | 309 ++++++++++ css/cursors.css | 106 ++++ css/highways.css | 501 ++++++++++++++++ css/map.css | 1395 +-------------------------------------------- css/mapillary.css | 78 +++ css/misc.css | 206 +++++++ css/railways.css | 61 ++ css/waterways.css | 64 +++ 9 files changed, 1392 insertions(+), 1394 deletions(-) create mode 100644 css/aeroways.css create mode 100644 css/areas.css create mode 100644 css/cursors.css create mode 100644 css/highways.css create mode 100644 css/mapillary.css create mode 100644 css/misc.css create mode 100644 css/railways.css create mode 100644 css/waterways.css diff --git a/css/aeroways.css b/css/aeroways.css new file mode 100644 index 000000000..13f94f992 --- /dev/null +++ b/css/aeroways.css @@ -0,0 +1,66 @@ +/* aeroways */ + +/* areas */ +path.stroke.area.tag-aeroway { + stroke:#fff; + stroke-dasharray: none; + stroke-width: 2; +} + +/* lines */ +path.stroke.tag-aeroway-taxiway, +path.stroke.tag-taxiway { + stroke-width: 4; +} +path.casing.tag-aeroway-taxiway, +path.casing.tag-taxiway { + stroke-width: 6; +} + +.low-zoom path.stroke.tag-aeroway-taxiway, +.low-zoom path.stroke.tag-taxiway { + stroke-width: 2; +} +.low-zoom path.casing.tag-aeroway-taxiway, +.low-zoom path.casing.tag-taxiway { + stroke-width: 4; +} + +.preset-icon .icon.tag-aeroway-taxiway, +.preset-icon .icon.tag-taxiway { + color: #ff0; + fill: #666; +} +path.stroke.tag-aeroway-taxiway, +path.stroke.tag-taxiway { + stroke: #ff0; +} +path.casing.tag-aeroway-taxiway, +path.casing.tag-taxiway { + stroke: #666; +} + +.preset-icon .icon.tag-aeroway-runway, +.preset-icon .icon.tag-runway { + color: #444; + fill: #000; +} +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 { + stroke: rgba(0, 0, 0, 0.6); + fill: rgba(0, 0, 0, 0.6); +} + diff --git a/css/areas.css b/css/areas.css new file mode 100644 index 000000000..5d40ac8a9 --- /dev/null +++ b/css/areas.css @@ -0,0 +1,309 @@ + +path.area.stroke { + stroke: #fff; + stroke-width: 1; +} +path.area.fill { + stroke-width: 0; + stroke: rgba(255, 255, 255, 0.3); + 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 { + stroke: rgba(182, 225, 153, 0.3); + 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-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-nature_reserve, +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-nature_reserve, +path.fill.tag-leisure-pitch, +path.fill.tag-leisure-park { + stroke: rgba(140, 208, 95, 0.3); + fill: rgba(140, 208, 95, 0.3); +} +.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-nature_reserve, +.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.3); +} + +path.stroke.tag-amenity-swimming_pool, +path.stroke.tag-leisure-swimming_pool, +path.stroke.tag-natural-water, +path.stroke.tag-landuse-aquaculture, +path.stroke.tag-landuse-basin, +path.stroke.tag-landuse-reservoir { + stroke: rgb(119, 211, 222); +} +path.fill.tag-amenity-swimming_pool, +path.fill.tag-leisure-swimming_pool, +path.fill.tag-landuse-aquaculture, +path.fill.tag-landuse-basin, +path.fill.tag-landuse-reservoir, +path.fill.tag-natural-water { + stroke: rgba(119, 211, 222, 0.3); + fill: rgba(119, 211, 222, 0.3); +} +.preset-icon-fill-area.tag-amenity-swimming_pool, +.preset-icon-fill-area.tag-leisure-swimming_pool, +.preset-icon-fill-area.tag-landuse-aquaculture, +.preset-icon-fill-area.tag-landuse-basin, +.preset-icon-fill-area.tag-landuse-reservoir, +.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 { + stroke: rgba(255, 255, 148, 0.15); + 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(232, 232, 0); + background-color: rgba(255, 255, 148, 0.15); +} + +path.stroke.tag-landuse-residential { + stroke: rgb(196, 189, 25); +} +path.fill.tag-landuse-residential { + stroke: rgba(196, 189, 25, 0.3); + fill: rgba(196, 189, 25, 0.3); +} +.preset-icon-fill-area.tag-landuse-residential { + border-color: rgb(196, 189, 25); + background: 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); + fill: 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-color: rgba(214, 136, 26, 0.3); +} + +path.stroke.tag-landuse-industrial, +path.stroke.tag-power-plant { + stroke: rgb(228, 164, 245); +} +path.fill.tag-landuse-industrial, +path.fill.tag-power-plant { + stroke: rgba(228, 164, 245, 0.3); + fill: rgba(228, 164, 245, 0.3); +} +.preset-icon-fill-area.tag-landuse-industrial, +.preset-icon-fill-area.tag-power-plant { + border-color: rgb(228, 164, 245); + background-color: rgba(228, 164, 245, 0.3); +} + +path.stroke.tag-natural-bare_rock, +path.stroke.tag-natural-scree, +path.stroke.tag-landuse-quarry { + stroke: rgb(166, 149, 123); +} +path.fill.tag-natural-bare_rock, +path.fill.tag-natural-scree, +path.fill.tag-landuse-quarry { + stroke: rgba(166, 149, 123, 0.2); + fill: rgba(166, 149, 123, 0.2); +} +.preset-icon-fill-area.tag-natural-bare_rock, +.preset-icon-fill-area.tag-natural-scree, +.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 { + stroke: rgba(255, 153, 51, 0.2); + 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); +} + +.pattern-color-construction { + fill: rgba(196, 189, 25, 0.2); +} +path.stroke.tag-landuse.tag-status, +path.stroke.tag-landuse-construction { + stroke: rgb(196, 189, 25); +} +.preset-icon-fill-area.tag-landuse.tag-status, +.preset-icon-fill-area.tag-landuse-construction { + border-color: rgb(196, 189, 25); + background-color: rgba(196, 189, 25, 0.2); +} + +path.stroke.tag-military, +path.stroke.tag-landuse-military { + stroke: rgb(214, 136, 26); +} +path.fill.tag-military, +path.fill.tag-landuse-military { + stroke: rgba(214, 136, 26, 0.2); + fill: rgba(214, 136, 26, 0.2); +} +.preset-icon-fill-area.tag-military, +.preset-icon-fill-area.tag-landuse-military { + border-color: rgb(214, 136, 26); + background-color: rgba(214, 136, 26, 0.2); +} + +.pattern-color-wetland { + fill: rgba(182, 225, 153, 0.2); +} +path.stroke.tag-natural-wetland { + stroke: rgb(182, 225, 153); +} +.preset-icon-fill-area.tag-natural-wetland { + border-color: rgb(182, 225, 153); + background-color: rgba(182, 225, 153, 0.2); +} + +.pattern-color-meadow { + fill: rgba(182, 225, 153, 0.2); +} +path.stroke.tag-landuse-meadow { + stroke: rgb(182, 225, 153); +} +.preset-icon-fill-area.tag-landuse-meadow { + border-color: rgb(182, 225, 153); + background-color: rgba(182, 225, 153, 0.2); +} + +.pattern-color-beach, +.pattern-color-sand { + fill: rgba(255, 255, 126, 0.2); +} +path.stroke.tag-natural-beach, +path.stroke.tag-natural-sand { + stroke: rgb(255, 255, 126); +} +.preset-icon-fill-area.tag-natural-beach, +.preset-icon-fill-area.tag-natural-sand { + border-color: rgb(255, 255, 126); + background-color: rgba(255, 255, 126, 0.2); +} + +.pattern-color-scrub { + fill: rgba(219, 240, 139, 0.2); +} +path.stroke.tag-natural-scrub { + stroke: rgb(219, 240, 139); +} +.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); +} +path.stroke.tag-landuse-farm, +path.stroke.tag-landuse-farmland { + stroke: rgb(140, 208, 95); +} +.preset-icon-fill-area.tag-landuse-farm, +.preset-icon-fill-area.tag-landuse-farmland { + background-color: rgba(140, 208, 95, 0.2); +} + +path.stroke.tag-landuse-farmyard { + stroke: rgb(245, 220, 186); +} +path.fill.tag-landuse-farmyard { + stroke: rgba(245, 220, 186, 0.3); + fill: rgba(245, 220, 186, 0.3); +} +.preset-icon-fill-area.tag-landuse-farmyard { + border-color: rgb(245, 220, 186); + background: rgba(245, 220, 186, 0.3); +} + +.pattern-color-cemetery, +.pattern-color-orchard { + fill: rgba(140, 208, 95, 0.2); +} +path.stroke.tag-landuse-cemetery, +path.stroke.tag-landuse-orchard { + stroke: rgb(140, 208, 95); +} +.preset-icon-fill-area.tag-landuse-cemetery, +.preset-icon-fill-area.tag-landuse-orchard { + background-color: rgba(140, 208, 95, 0.2); +} + +path.stroke.tag-amenity-parking { + stroke: rgb(170, 170, 170); +} +path.fill.tag-amenity-parking { + stroke: rgba(170, 170, 170, 0.3); + 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); +} + diff --git a/css/cursors.css b/css/cursors.css new file mode 100644 index 000000000..6a1dcc46b --- /dev/null +++ b/css/cursors.css @@ -0,0 +1,106 @@ +/* Cursors */ + +.map-in-map, +#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, +.mode-browse.lasso #map, +.mode-browse.lasso .way, +.mode-browse.lasso .vertex, +.mode-browse.lasso .midpoint, +.mode-select.lasso #map, +.mode-select.lasso .way, +.mode-select.lasso .vertex, +.mode-select.lasso .midpoint { + 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 */ +} diff --git a/css/highways.css b/css/highways.css new file mode 100644 index 000000000..937dea366 --- /dev/null +++ b/css/highways.css @@ -0,0 +1,501 @@ +/* highways */ + +/* highway areas */ +path.stroke.area.tag-highway { + stroke:#fff; + stroke-dasharray: none; + stroke-width: 2; +} + +/* wide highways */ + +.preset-icon .icon.tag-highway.other-line { + color: #fff; + fill: #777; +} + +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; +} + +.preset-icon .icon.highway-motorway, +.preset-icon .icon.highway-motorway-link { + color: #CF2081; + fill: #70372f; +} +path.stroke.tag-highway-motorway, +path.stroke.tag-highway-motorway_link, +path.stroke.tag-motorway { + stroke:#CF2081; +} +path.casing.tag-highway-motorway, +path.casing.tag-highway-motorway_link, +path.casing.tag-motorway { + stroke:#70372f; +} + +.preset-icon .icon.highway-trunk, +.preset-icon .icon.highway-trunk-link { + color: #DD2F22; + fill: #70372f; +} +path.stroke.tag-highway-trunk, +path.stroke.tag-highway-trunk_link, +path.stroke.tag-trunk { + stroke:#DD2F22; +} +path.casing.tag-highway-trunk, +path.casing.tag-highway-trunk_link, +path.casing.tag-trunk { + stroke:#70372f; +} + +.preset-icon .icon.highway-primary, +.preset-icon .icon.highway-primary-link { + color: #F99806; + fill: #70372f; +} +path.stroke.tag-highway-primary, +path.stroke.tag-highway-primary_link, +path.stroke.tag-primary { + stroke:#F99806; +} +path.casing.tag-highway-primary, +path.casing.tag-highway-primary_link, +path.casing.tag-primary { + stroke:#70372f; +} + +.preset-icon .icon.highway-secondary, +.preset-icon .icon.highway-secondary-link { + color: #F3F312; + fill: #70372f; +} +path.stroke.tag-highway-secondary, +path.stroke.tag-highway-secondary_link, +path.stroke.tag-secondary { + stroke:#F3F312; +} +path.casing.tag-highway-secondary, +path.casing.tag-highway-secondary_link, +path.casing.tag-secondary { + stroke:#70372f; +} + +.preset-icon .icon.highway-tertiary, +.preset-icon .icon.highway-tertiary-link { + color: #FFF9B3; + fill: #70372f; +} +path.stroke.tag-highway-tertiary, +path.stroke.tag-highway-tertiary_link, +path.stroke.tag-tertiary { + stroke:#FFF9B3; +} +path.casing.tag-highway-tertiary, +path.casing.tag-highway-tertiary_link, +path.casing.tag-tertiary { + stroke:#70372f; +} + +.legacy-carto .preset-icon .icon.highway-motorway, +.legacy-carto .preset-icon .icon.highway-motorway-link { + color: #58a9ed; + fill: #2c5476; +} +.legacy-carto path.stroke.tag-highway-motorway, +.legacy-carto path.stroke.tag-highway-motorway_link, +.legacy-carto path.stroke.tag-motorway { + stroke:#58a9ed; +} +.legacy-carto path.casing.tag-highway-motorway, +.legacy-carto path.casing.tag-highway-motorway_link, +.legacy-carto path.casing.tag-motorway { + stroke:#2c5476; +} + +.legacy-carto .preset-icon .icon.highway-trunk, +.legacy-carto .preset-icon .icon.highway-trunk-link { + color: #8cd05f; + fill: #46682f; +} +.legacy-carto path.stroke.tag-highway-trunk, +.legacy-carto path.stroke.tag-highway-trunk_link, +.legacy-carto path.stroke.tag-trunk { + stroke:#8cd05f; +} +.legacy-carto path.casing.tag-highway-trunk, +.legacy-carto path.casing.tag-highway-trunk_link, +.legacy-carto path.casing.tag-trunk { + stroke:#46682f; +} + +.legacy-carto .preset-icon .icon.highway-primary, +.legacy-carto .preset-icon .icon.highway-primary-link { + color: #e06d5f; + fill: #70372f; +} +.legacy-carto path.stroke.tag-highway-primary, +.legacy-carto path.stroke.tag-highway-primary_link, +.legacy-carto path.stroke.tag-primary { + stroke:#e06d5f; +} +.legacy-carto path.casing.tag-highway-primary, +.legacy-carto path.casing.tag-highway-primary_link, +.legacy-carto path.casing.tag-primary { + stroke:#70372f; +} + +.legacy-carto .preset-icon .icon.highway-secondary, +.legacy-carto .preset-icon .icon.highway-secondary-link { + color: #eab056; + fill: #75582b; +} +.legacy-carto path.stroke.tag-highway-secondary, +.legacy-carto path.stroke.tag-highway-secondary_link, +.legacy-carto path.stroke.tag-secondary { + stroke:#eab056; +} +.legacy-carto path.casing.tag-highway-secondary, +.legacy-carto path.casing.tag-highway-secondary_link, +.legacy-carto path.casing.tag-secondary { + stroke:#75582b; +} + +.legacy-carto .preset-icon .icon.highway-tertiary, +.legacy-carto .preset-icon .icon.highway-tertiary-link { + color: #ffff7e; + fill: #7f7f3f; +} +.legacy-carto path.stroke.tag-highway-tertiary, +.legacy-carto path.stroke.tag-highway-tertiary_link, +.legacy-carto path.stroke.tag-tertiary { + stroke:#ffff7e; +} +.legacy-carto path.casing.tag-highway-tertiary, +.legacy-carto path.casing.tag-highway-tertiary_link, +.legacy-carto path.casing.tag-tertiary { + stroke:#7f7f3f; +} + +.preset-icon .icon.highway-residential { + color: #fff; + fill: #444; +} +path.stroke.tag-highway-residential, +path.stroke.tag-residential { + stroke:#fff; +} +path.casing.tag-highway-residential, +path.casing.tag-residential { + stroke:#444; +} + +.preset-icon .icon.highway-unclassified { + color: #dcd9b9; + fill: #444; +} +path.stroke.tag-highway-unclassified, +path.stroke.tag-unclassified { + stroke:#dcd9b9; +} +path.casing.tag-highway-unclassified, +path.casing.tag-unclassified { + stroke:#444; +} + + +/* narrow highways */ +path.stroke.tag-highway-living_street, +path.stroke.tag-highway-service, +path.stroke.tag-highway-track, +path.stroke.tag-highway-path, +path.stroke.tag-highway-footway, +path.stroke.tag-highway-cycleway, +path.stroke.tag-highway-bridleway, +path.stroke.tag-highway-corridor, +path.stroke.tag-highway-pedestrian, +path.stroke.tag-highway-steps, +path.stroke.tag-highway-road, +path.stroke.tag-living_street, +path.stroke.tag-service, +path.stroke.tag-track, +path.stroke.tag-path, +path.stroke.tag-footway, +path.stroke.tag-cycleway, +path.stroke.tag-bridleway, +path.stroke.tag-corridor, +path.stroke.tag-pedestrian, +path.stroke.tag-steps, +path.stroke.tag-road { + stroke-width:4; +} +path.casing.tag-highway-living_street, +path.casing.tag-highway-service, +path.casing.tag-highway-track, +path.casing.tag-highway-path, +path.casing.tag-highway-footway, +path.casing.tag-highway-cycleway, +path.casing.tag-highway-bridleway, +path.casing.tag-highway-corridor, +path.casing.tag-highway-pedestrian, +path.casing.tag-highway-steps, +path.casing.tag-highway-road, +path.casing.tag-living_street, +path.casing.tag-service, +path.casing.tag-track, +path.casing.tag-path, +path.casing.tag-footway, +path.casing.tag-cycleway, +path.casing.tag-bridleway, +path.casing.tag-corridor, +path.casing.tag-pedestrian, +path.casing.tag-steps, +path.casing.tag-road { + stroke-width:6; +} + +.low-zoom path.stroke.tag-highway-living_street, +.low-zoom path.stroke.tag-highway-service, +.low-zoom path.stroke.tag-highway-track, +.low-zoom path.stroke.tag-highway-path, +.low-zoom path.stroke.tag-highway-footway, +.low-zoom path.stroke.tag-highway-cycleway, +.low-zoom path.stroke.tag-highway-bridleway, +.low-zoom path.stroke.tag-highway-corridor, +.low-zoom path.stroke.tag-highway-pedestrian, +.low-zoom path.stroke.tag-highway-steps, +.low-zoom path.stroke.tag-highway-road, +.low-zoom path.stroke.tag-living_street, +.low-zoom path.stroke.tag-service, +.low-zoom path.stroke.tag-track, +.low-zoom path.stroke.tag-path, +.low-zoom path.stroke.tag-footway, +.low-zoom path.stroke.tag-cycleway, +.low-zoom path.stroke.tag-bridleway, +.low-zoom path.stroke.tag-corridor, +.low-zoom path.stroke.tag-pedestrian, +.low-zoom path.stroke.tag-steps, +.low-zoom path.stroke.tag-road { + stroke-width:2; +} +.low-zoom path.casing.tag-highway-living_street, +.low-zoom path.casing.tag-highway-service, +.low-zoom path.casing.tag-highway-track, +.low-zoom path.casing.tag-highway-path, +.low-zoom path.casing.tag-highway-footway, +.low-zoom path.casing.tag-highway-cycleway, +.low-zoom path.casing.tag-highway-bridleway, +.low-zoom path.casing.tag-highway-corridor, +.low-zoom path.casing.tag-highway-pedestrian, +.low-zoom path.casing.tag-highway-steps, +.low-zoom path.casing.tag-highway-road, +.low-zoom path.casing.tag-living_street, +.low-zoom path.casing.tag-service, +.low-zoom path.casing.tag-track, +.low-zoom path.casing.tag-path, +.low-zoom path.casing.tag-footway, +.low-zoom path.casing.tag-cycleway, +.low-zoom path.casing.tag-bridleway, +.low-zoom path.casing.tag-corridor, +.low-zoom path.casing.tag-pedestrian, +.low-zoom path.casing.tag-steps, +.low-zoom path.casing.tag-road { + stroke-width:4; +} + +.preset-icon .icon.highway-living-street { + color: #bbb; + fill: #ddd; +} +path.stroke.tag-highway-living_street, +path.stroke.tag-living_street { + stroke: #ccc; +} +path.casing.tag-highway-living_street, +path.casing.tag-living_street { + stroke: #fff; +} + +.preset-icon .icon.highway-footway.tag-highway-corridor, +.preset-icon .icon.highway-footway.tag-highway-pedestrian { + color: #8cd05f; + fill: #fff; +} +path.stroke.tag-highway-corridor, +path.stroke.tag-highway-pedestrian, +path.stroke.tag-corridor, +path.stroke.tag-pedestrian { + stroke:#fff; + stroke-dasharray: 2, 8; +} +path.casing.tag-highway-corridor, +path.casing.tag-highway-pedestrian, +path.casing.tag-corridor, +path.casing.tag-pedestrian, +path.casing.tag-highway-corridor.tag-unpaved, +path.casing.tag-highway-pedestrian.tag-unpaved, +path.casing.tag-corridor.tag-unpaved, +path.casing.tag-pedestrian.tag-unpaved { + stroke: #8cd05f; + stroke-linecap: round; + stroke-dasharray: none; +} + +.preset-icon .icon.highway-road { + color: #9e9e9e; + fill: #666; +} +path.stroke.tag-highway-road, +path.stroke.tag-road { + stroke:#9e9e9e; +} +path.casing.tag-highway-road, +path.casing.tag-road { + stroke:#666; +} + +.preset-icon .icon.highway-service { + color: #fff; + fill: #666; +} +path.stroke.tag-highway-service, +path.stroke.tag-service { + stroke:#fff; +} +path.casing.tag-highway-service, +path.casing.tag-service { + stroke:#666; +} + +.preset-icon .icon.highway-track { + color: #eaeaea; + fill: #c5b59f; +} +path.stroke.tag-highway-track, +path.stroke.tag-track { + stroke: #c5b59f; +} +path.casing.tag-highway-track, +path.casing.tag-track { + stroke: #746f6f; +} + +path.stroke.tag-highway-path, +path.stroke.tag-highway-footway, +path.stroke.tag-highway-cycleway, +path.stroke.tag-highway-bridleway { + stroke-linecap: butt; + stroke-dasharray: 6, 6; +} + +path.casing.tag-highway-path, +path.casing.tag-highway-path.tag-unpaved { + stroke: #c5b59f; + stroke-linecap: round; + stroke-dasharray: none; +} +path.casing.tag-highway-footway, +path.casing.tag-highway-cycleway, +path.casing.tag-highway-bridleway, +path.casing.tag-highway-footway.tag-unpaved, +path.casing.tag-highway-cycleway.tag-unpaved, +path.casing.tag-highway-bridleway.tag-unpaved { + stroke: #fff; + stroke-linecap: round; + stroke-dasharray: none; +} + +.preset-icon .icon.category-path, +.preset-icon .icon.highway-path { + color: #746f6f; + fill: #c5b59f; +} +path.stroke.tag-highway-path { + stroke: #746f6f; +} + +.preset-icon .icon.tag-route-foot, +.preset-icon .icon.tag-route-hiking, +.preset-icon .icon.highway-footway { + color: #ae8681; + fill: #fff; +} +path.stroke.tag-highway-footway { + stroke: #ae8681; +} + +.preset-icon .icon.highway-footway.tag-crossing { + color: #444; +} +path.stroke.tag-highway-footway.tag-crossing { + stroke: #444; + stroke-dasharray: 6, 4; +} + +.preset-icon .icon.tag-route-bicycle, +.preset-icon .icon.highway-cycleway { + color: #58a9ed; + fill: #fff; +} +path.stroke.tag-highway-cycleway { + stroke: #58a9ed; +} + +.preset-icon .icon.tag-route-horse, +.preset-icon .icon.highway-bridleway { + color: #e06d5f; + fill: #fff; +} +path.stroke.tag-highway-bridleway { + stroke: #e06d5f; +} + +.preset-icon .icon.highway-steps { + color: #81d25c; + fill: #fff; +} +path.stroke.tag-highway-steps { + stroke: #81d25c; + stroke-linecap: butt; + stroke-dasharray: 3, 3; +} +path.casing.tag-highway-steps, +path.casing.tag-highway-steps.tag-unpaved { + stroke: #fff; + stroke-linecap: round; + stroke-dasharray: none; +} + +/* highway midpoints */ + +g.midpoint.tag-highway-corridor .fill, +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; +} diff --git a/css/map.css b/css/map.css index 773f178f5..de5e9edda 100644 --- a/css/map.css +++ b/css/map.css @@ -21,7 +21,6 @@ path.shadow { pointer-events: stroke; } - /* points */ g.point .stroke { @@ -73,19 +72,6 @@ g.midpoint .fill { opacity: .7; } -g.midpoint.tag-highway-corridor .fill, -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; @@ -161,1201 +147,6 @@ path.line.stroke { stroke-width: 2; } -path.area.stroke { - stroke: #fff; - stroke-width: 1; -} -path.area.fill { - stroke-width: 0; - stroke: rgba(255, 255, 255, 0.3); - 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 { - stroke: rgba(182, 225, 153, 0.3); - 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-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-nature_reserve, -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-nature_reserve, -path.fill.tag-leisure-pitch, -path.fill.tag-leisure-park { - stroke: rgba(140, 208, 95, 0.3); - fill: rgba(140, 208, 95, 0.3); -} -.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-nature_reserve, -.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.3); -} - -path.stroke.tag-amenity-swimming_pool, -path.stroke.tag-leisure-swimming_pool, -path.stroke.tag-natural-water, -path.stroke.tag-landuse-aquaculture, -path.stroke.tag-landuse-basin, -path.stroke.tag-landuse-reservoir { - stroke: rgb(119, 211, 222); -} -path.fill.tag-amenity-swimming_pool, -path.fill.tag-leisure-swimming_pool, -path.fill.tag-landuse-aquaculture, -path.fill.tag-landuse-basin, -path.fill.tag-landuse-reservoir, -path.fill.tag-natural-water { - stroke: rgba(119, 211, 222, 0.3); - fill: rgba(119, 211, 222, 0.3); -} -.preset-icon-fill-area.tag-amenity-swimming_pool, -.preset-icon-fill-area.tag-leisure-swimming_pool, -.preset-icon-fill-area.tag-landuse-aquaculture, -.preset-icon-fill-area.tag-landuse-basin, -.preset-icon-fill-area.tag-landuse-reservoir, -.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 { - stroke: rgba(255, 255, 148, 0.15); - 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(232, 232, 0); - background-color: rgba(255, 255, 148, 0.15); -} - -path.stroke.tag-landuse-residential { - stroke: rgb(196, 189, 25); -} -path.fill.tag-landuse-residential { - stroke: rgba(196, 189, 25, 0.3); - fill: rgba(196, 189, 25, 0.3); -} -.preset-icon-fill-area.tag-landuse-residential { - border-color: rgb(196, 189, 25); - background: 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); - fill: 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-color: rgba(214, 136, 26, 0.3); -} - -path.stroke.tag-landuse-industrial, -path.stroke.tag-power-plant { - stroke: rgb(228, 164, 245); -} -path.fill.tag-landuse-industrial, -path.fill.tag-power-plant { - stroke: rgba(228, 164, 245, 0.3); - fill: rgba(228, 164, 245, 0.3); -} -.preset-icon-fill-area.tag-landuse-industrial, -.preset-icon-fill-area.tag-power-plant { - border-color: rgb(228, 164, 245); - background-color: rgba(228, 164, 245, 0.3); -} - -path.stroke.tag-natural-bare_rock, -path.stroke.tag-natural-scree, -path.stroke.tag-landuse-quarry { - stroke: rgb(166, 149, 123); -} -path.fill.tag-natural-bare_rock, -path.fill.tag-natural-scree, -path.fill.tag-landuse-quarry { - stroke: rgba(166, 149, 123, 0.2); - fill: rgba(166, 149, 123, 0.2); -} -.preset-icon-fill-area.tag-natural-bare_rock, -.preset-icon-fill-area.tag-natural-scree, -.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 { - stroke: rgba(255, 153, 51, 0.2); - 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); -} - -.pattern-color-construction { - fill: rgba(196, 189, 25, 0.2); -} -path.stroke.tag-landuse.tag-status, -path.stroke.tag-landuse-construction { - stroke: rgb(196, 189, 25); -} -.preset-icon-fill-area.tag-landuse.tag-status, -.preset-icon-fill-area.tag-landuse-construction { - border-color: rgb(196, 189, 25); - background-color: rgba(196, 189, 25, 0.2); -} - -path.stroke.tag-military, -path.stroke.tag-landuse-military { - stroke: rgb(214, 136, 26); -} -path.fill.tag-military, -path.fill.tag-landuse-military { - stroke: rgba(214, 136, 26, 0.2); - fill: rgba(214, 136, 26, 0.2); -} -.preset-icon-fill-area.tag-military, -.preset-icon-fill-area.tag-landuse-military { - border-color: rgb(214, 136, 26); - background-color: rgba(214, 136, 26, 0.2); -} - -.pattern-color-wetland { - fill: rgba(182, 225, 153, 0.2); -} -path.stroke.tag-natural-wetland { - stroke: rgb(182, 225, 153); -} -.preset-icon-fill-area.tag-natural-wetland { - border-color: rgb(182, 225, 153); - background-color: rgba(182, 225, 153, 0.2); -} - -.pattern-color-meadow { - fill: rgba(182, 225, 153, 0.2); -} -path.stroke.tag-landuse-meadow { - stroke: rgb(182, 225, 153); -} -.preset-icon-fill-area.tag-landuse-meadow { - border-color: rgb(182, 225, 153); - background-color: rgba(182, 225, 153, 0.2); -} - -.pattern-color-beach, -.pattern-color-sand { - fill: rgba(255, 255, 126, 0.2); -} -path.stroke.tag-natural-beach, -path.stroke.tag-natural-sand { - stroke: rgb(255, 255, 126); -} -.preset-icon-fill-area.tag-natural-beach, -.preset-icon-fill-area.tag-natural-sand { - border-color: rgb(255, 255, 126); - background-color: rgba(255, 255, 126, 0.2); -} - -.pattern-color-scrub { - fill: rgba(219, 240, 139, 0.2); -} -path.stroke.tag-natural-scrub { - stroke: rgb(219, 240, 139); -} -.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); -} -path.stroke.tag-landuse-farm, -path.stroke.tag-landuse-farmland { - stroke: rgb(140, 208, 95); -} -.preset-icon-fill-area.tag-landuse-farm, -.preset-icon-fill-area.tag-landuse-farmland { - background-color: rgba(140, 208, 95, 0.2); -} - -path.stroke.tag-landuse-farmyard { - stroke: rgb(245, 220, 186); -} -path.fill.tag-landuse-farmyard { - stroke: rgba(245, 220, 186, 0.3); - fill: rgba(245, 220, 186, 0.3); -} -.preset-icon-fill-area.tag-landuse-farmyard { - border-color: rgb(245, 220, 186); - background: rgba(245, 220, 186, 0.3); -} - -.pattern-color-cemetery, -.pattern-color-orchard { - fill: rgba(140, 208, 95, 0.2); -} -path.stroke.tag-landuse-cemetery, -path.stroke.tag-landuse-orchard { - stroke: rgb(140, 208, 95); -} -.preset-icon-fill-area.tag-landuse-cemetery, -.preset-icon-fill-area.tag-landuse-orchard { - background-color: rgba(140, 208, 95, 0.2); -} - -path.stroke.tag-amenity-parking { - stroke: rgb(170, 170, 170); -} -path.fill.tag-amenity-parking { - stroke: rgba(170, 170, 170, 0.3); - 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); -} - - -/* highway areas */ - -path.stroke.area.tag-highway { - stroke:#fff; - stroke-dasharray: none; - stroke-width: 2; -} - -/* wide highways */ - -.preset-icon .icon.tag-highway.other-line { - color: #fff; - fill: #777; -} - -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; -} - -.preset-icon .icon.highway-motorway, -.preset-icon .icon.highway-motorway-link { - color: #CF2081; - fill: #70372f; -} -path.stroke.tag-highway-motorway, -path.stroke.tag-highway-motorway_link, -path.stroke.tag-motorway { - stroke:#CF2081; -} -path.casing.tag-highway-motorway, -path.casing.tag-highway-motorway_link, -path.casing.tag-motorway { - stroke:#70372f; -} - -.preset-icon .icon.highway-trunk, -.preset-icon .icon.highway-trunk-link { - color: #DD2F22; - fill: #70372f; -} -path.stroke.tag-highway-trunk, -path.stroke.tag-highway-trunk_link, -path.stroke.tag-trunk { - stroke:#DD2F22; -} -path.casing.tag-highway-trunk, -path.casing.tag-highway-trunk_link, -path.casing.tag-trunk { - stroke:#70372f; -} - -.preset-icon .icon.highway-primary, -.preset-icon .icon.highway-primary-link { - color: #F99806; - fill: #70372f; -} -path.stroke.tag-highway-primary, -path.stroke.tag-highway-primary_link, -path.stroke.tag-primary { - stroke:#F99806; -} -path.casing.tag-highway-primary, -path.casing.tag-highway-primary_link, -path.casing.tag-primary { - stroke:#70372f; -} - -.preset-icon .icon.highway-secondary, -.preset-icon .icon.highway-secondary-link { - color: #F3F312; - fill: #70372f; -} -path.stroke.tag-highway-secondary, -path.stroke.tag-highway-secondary_link, -path.stroke.tag-secondary { - stroke:#F3F312; -} -path.casing.tag-highway-secondary, -path.casing.tag-highway-secondary_link, -path.casing.tag-secondary { - stroke:#70372f; -} - -.preset-icon .icon.highway-tertiary, -.preset-icon .icon.highway-tertiary-link { - color: #FFF9B3; - fill: #70372f; -} -path.stroke.tag-highway-tertiary, -path.stroke.tag-highway-tertiary_link, -path.stroke.tag-tertiary { - stroke:#FFF9B3; -} -path.casing.tag-highway-tertiary, -path.casing.tag-highway-tertiary_link, -path.casing.tag-tertiary { - stroke:#70372f; -} - -.legacy-carto .preset-icon .icon.highway-motorway, -.legacy-carto .preset-icon .icon.highway-motorway-link { - color: #58a9ed; - fill: #2c5476; -} -.legacy-carto path.stroke.tag-highway-motorway, -.legacy-carto path.stroke.tag-highway-motorway_link, -.legacy-carto path.stroke.tag-motorway { - stroke:#58a9ed; -} -.legacy-carto path.casing.tag-highway-motorway, -.legacy-carto path.casing.tag-highway-motorway_link, -.legacy-carto path.casing.tag-motorway { - stroke:#2c5476; -} - -.legacy-carto .preset-icon .icon.highway-trunk, -.legacy-carto .preset-icon .icon.highway-trunk-link { - color: #8cd05f; - fill: #46682f; -} -.legacy-carto path.stroke.tag-highway-trunk, -.legacy-carto path.stroke.tag-highway-trunk_link, -.legacy-carto path.stroke.tag-trunk { - stroke:#8cd05f; -} -.legacy-carto path.casing.tag-highway-trunk, -.legacy-carto path.casing.tag-highway-trunk_link, -.legacy-carto path.casing.tag-trunk { - stroke:#46682f; -} - -.legacy-carto .preset-icon .icon.highway-primary, -.legacy-carto .preset-icon .icon.highway-primary-link { - color: #e06d5f; - fill: #70372f; -} -.legacy-carto path.stroke.tag-highway-primary, -.legacy-carto path.stroke.tag-highway-primary_link, -.legacy-carto path.stroke.tag-primary { - stroke:#e06d5f; -} -.legacy-carto path.casing.tag-highway-primary, -.legacy-carto path.casing.tag-highway-primary_link, -.legacy-carto path.casing.tag-primary { - stroke:#70372f; -} - -.legacy-carto .preset-icon .icon.highway-secondary, -.legacy-carto .preset-icon .icon.highway-secondary-link { - color: #eab056; - fill: #75582b; -} -.legacy-carto path.stroke.tag-highway-secondary, -.legacy-carto path.stroke.tag-highway-secondary_link, -.legacy-carto path.stroke.tag-secondary { - stroke:#eab056; -} -.legacy-carto path.casing.tag-highway-secondary, -.legacy-carto path.casing.tag-highway-secondary_link, -.legacy-carto path.casing.tag-secondary { - stroke:#75582b; -} - -.legacy-carto .preset-icon .icon.highway-tertiary, -.legacy-carto .preset-icon .icon.highway-tertiary-link { - color: #ffff7e; - fill: #7f7f3f; -} -.legacy-carto path.stroke.tag-highway-tertiary, -.legacy-carto path.stroke.tag-highway-tertiary_link, -.legacy-carto path.stroke.tag-tertiary { - stroke:#ffff7e; -} -.legacy-carto path.casing.tag-highway-tertiary, -.legacy-carto path.casing.tag-highway-tertiary_link, -.legacy-carto path.casing.tag-tertiary { - stroke:#7f7f3f; -} - -.preset-icon .icon.highway-residential { - color: #fff; - fill: #444; -} -path.stroke.tag-highway-residential, -path.stroke.tag-residential { - stroke:#fff; -} -path.casing.tag-highway-residential, -path.casing.tag-residential { - stroke:#444; -} - -.preset-icon .icon.highway-unclassified { - color: #dcd9b9; - fill: #444; -} -path.stroke.tag-highway-unclassified, -path.stroke.tag-unclassified { - stroke:#dcd9b9; -} -path.casing.tag-highway-unclassified, -path.casing.tag-unclassified { - stroke:#444; -} - - -/* narrow highways */ -path.stroke.tag-highway-living_street, -path.stroke.tag-highway-service, -path.stroke.tag-highway-track, -path.stroke.tag-highway-path, -path.stroke.tag-highway-footway, -path.stroke.tag-highway-cycleway, -path.stroke.tag-highway-bridleway, -path.stroke.tag-highway-corridor, -path.stroke.tag-highway-pedestrian, -path.stroke.tag-highway-steps, -path.stroke.tag-highway-road, -path.stroke.tag-living_street, -path.stroke.tag-service, -path.stroke.tag-track, -path.stroke.tag-path, -path.stroke.tag-footway, -path.stroke.tag-cycleway, -path.stroke.tag-bridleway, -path.stroke.tag-corridor, -path.stroke.tag-pedestrian, -path.stroke.tag-steps, -path.stroke.tag-road { - stroke-width:4; -} -path.casing.tag-highway-living_street, -path.casing.tag-highway-service, -path.casing.tag-highway-track, -path.casing.tag-highway-path, -path.casing.tag-highway-footway, -path.casing.tag-highway-cycleway, -path.casing.tag-highway-bridleway, -path.casing.tag-highway-corridor, -path.casing.tag-highway-pedestrian, -path.casing.tag-highway-steps, -path.casing.tag-highway-road, -path.casing.tag-living_street, -path.casing.tag-service, -path.casing.tag-track, -path.casing.tag-path, -path.casing.tag-footway, -path.casing.tag-cycleway, -path.casing.tag-bridleway, -path.casing.tag-corridor, -path.casing.tag-pedestrian, -path.casing.tag-steps, -path.casing.tag-road { - stroke-width:6; -} - -.low-zoom path.stroke.tag-highway-living_street, -.low-zoom path.stroke.tag-highway-service, -.low-zoom path.stroke.tag-highway-track, -.low-zoom path.stroke.tag-highway-path, -.low-zoom path.stroke.tag-highway-footway, -.low-zoom path.stroke.tag-highway-cycleway, -.low-zoom path.stroke.tag-highway-bridleway, -.low-zoom path.stroke.tag-highway-corridor, -.low-zoom path.stroke.tag-highway-pedestrian, -.low-zoom path.stroke.tag-highway-steps, -.low-zoom path.stroke.tag-highway-road, -.low-zoom path.stroke.tag-living_street, -.low-zoom path.stroke.tag-service, -.low-zoom path.stroke.tag-track, -.low-zoom path.stroke.tag-path, -.low-zoom path.stroke.tag-footway, -.low-zoom path.stroke.tag-cycleway, -.low-zoom path.stroke.tag-bridleway, -.low-zoom path.stroke.tag-corridor, -.low-zoom path.stroke.tag-pedestrian, -.low-zoom path.stroke.tag-steps, -.low-zoom path.stroke.tag-road { - stroke-width:2; -} -.low-zoom path.casing.tag-highway-living_street, -.low-zoom path.casing.tag-highway-service, -.low-zoom path.casing.tag-highway-track, -.low-zoom path.casing.tag-highway-path, -.low-zoom path.casing.tag-highway-footway, -.low-zoom path.casing.tag-highway-cycleway, -.low-zoom path.casing.tag-highway-bridleway, -.low-zoom path.casing.tag-highway-corridor, -.low-zoom path.casing.tag-highway-pedestrian, -.low-zoom path.casing.tag-highway-steps, -.low-zoom path.casing.tag-highway-road, -.low-zoom path.casing.tag-living_street, -.low-zoom path.casing.tag-service, -.low-zoom path.casing.tag-track, -.low-zoom path.casing.tag-path, -.low-zoom path.casing.tag-footway, -.low-zoom path.casing.tag-cycleway, -.low-zoom path.casing.tag-bridleway, -.low-zoom path.casing.tag-corridor, -.low-zoom path.casing.tag-pedestrian, -.low-zoom path.casing.tag-steps, -.low-zoom path.casing.tag-road { - stroke-width:4; -} - -.preset-icon .icon.highway-living-street { - color: #bbb; - fill: #ddd; -} -path.stroke.tag-highway-living_street, -path.stroke.tag-living_street { - stroke: #ccc; -} -path.casing.tag-highway-living_street, -path.casing.tag-living_street { - stroke: #fff; -} - -.preset-icon .icon.highway-footway.tag-highway-corridor, -.preset-icon .icon.highway-footway.tag-highway-pedestrian { - color: #8cd05f; - fill: #fff; -} -path.stroke.tag-highway-corridor, -path.stroke.tag-highway-pedestrian, -path.stroke.tag-corridor, -path.stroke.tag-pedestrian { - stroke:#fff; - stroke-dasharray: 2, 8; -} -path.casing.tag-highway-corridor, -path.casing.tag-highway-pedestrian, -path.casing.tag-corridor, -path.casing.tag-pedestrian, -path.casing.tag-highway-corridor.tag-unpaved, -path.casing.tag-highway-pedestrian.tag-unpaved, -path.casing.tag-corridor.tag-unpaved, -path.casing.tag-pedestrian.tag-unpaved { - stroke: #8cd05f; - stroke-linecap: round; - stroke-dasharray: none; -} - -.preset-icon .icon.highway-road { - color: #9e9e9e; - fill: #666; -} -path.stroke.tag-highway-road, -path.stroke.tag-road { - stroke:#9e9e9e; -} -path.casing.tag-highway-road, -path.casing.tag-road { - stroke:#666; -} - -.preset-icon .icon.highway-service { - color: #fff; - fill: #666; -} -path.stroke.tag-highway-service, -path.stroke.tag-service { - stroke:#fff; -} -path.casing.tag-highway-service, -path.casing.tag-service { - stroke:#666; -} - -.preset-icon .icon.highway-track { - color: #eaeaea; - fill: #c5b59f; -} -path.stroke.tag-highway-track, -path.stroke.tag-track { - stroke: #c5b59f; -} -path.casing.tag-highway-track, -path.casing.tag-track { - stroke: #746f6f; -} - -path.stroke.tag-highway-path, -path.stroke.tag-highway-footway, -path.stroke.tag-highway-cycleway, -path.stroke.tag-highway-bridleway { - stroke-linecap: butt; - stroke-dasharray: 6, 6; -} - -path.casing.tag-highway-path, -path.casing.tag-highway-path.tag-unpaved { - stroke: #c5b59f; - stroke-linecap: round; - stroke-dasharray: none; -} -path.casing.tag-highway-footway, -path.casing.tag-highway-cycleway, -path.casing.tag-highway-bridleway, -path.casing.tag-highway-footway.tag-unpaved, -path.casing.tag-highway-cycleway.tag-unpaved, -path.casing.tag-highway-bridleway.tag-unpaved { - stroke: #fff; - stroke-linecap: round; - stroke-dasharray: none; -} - -.preset-icon .icon.category-path, -.preset-icon .icon.highway-path { - color: #746f6f; - fill: #c5b59f; -} -path.stroke.tag-highway-path { - stroke: #746f6f; -} - -.preset-icon .icon.tag-route-foot, -.preset-icon .icon.tag-route-hiking, -.preset-icon .icon.highway-footway { - color: #ae8681; - fill: #fff; -} -path.stroke.tag-highway-footway { - stroke: #ae8681; -} - -.preset-icon .icon.highway-footway.tag-crossing { - color: #444; -} -path.stroke.tag-highway-footway.tag-crossing { - stroke: #444; - stroke-dasharray: 6, 4; -} - -.preset-icon .icon.tag-route-bicycle, -.preset-icon .icon.highway-cycleway { - color: #58a9ed; - fill: #fff; -} -path.stroke.tag-highway-cycleway { - stroke: #58a9ed; -} - -.preset-icon .icon.tag-route-horse, -.preset-icon .icon.highway-bridleway { - color: #e06d5f; - fill: #fff; -} -path.stroke.tag-highway-bridleway { - stroke: #e06d5f; -} - -.preset-icon .icon.highway-steps { - color: #81d25c; - fill: #fff; -} -path.stroke.tag-highway-steps { - stroke: #81d25c; - stroke-linecap: butt; - stroke-dasharray: 3, 3; -} -path.casing.tag-highway-steps, -path.casing.tag-highway-steps.tag-unpaved { - stroke: #fff; - stroke-linecap: round; - stroke-dasharray: none; -} - - -/* aeroways */ - -/* areas */ -path.stroke.area.tag-aeroway { - stroke:#fff; - stroke-dasharray: none; - stroke-width: 2; -} - -/* lines */ -path.stroke.tag-aeroway-taxiway, -path.stroke.tag-taxiway { - stroke-width: 4; -} -path.casing.tag-aeroway-taxiway, -path.casing.tag-taxiway { - stroke-width: 6; -} - -.low-zoom path.stroke.tag-aeroway-taxiway, -.low-zoom path.stroke.tag-taxiway { - stroke-width: 2; -} -.low-zoom path.casing.tag-aeroway-taxiway, -.low-zoom path.casing.tag-taxiway { - stroke-width: 4; -} - -.preset-icon .icon.tag-aeroway-taxiway, -.preset-icon .icon.tag-taxiway { - color: #ff0; - fill: #666; -} -path.stroke.tag-aeroway-taxiway, -path.stroke.tag-taxiway { - stroke: #ff0; -} -path.casing.tag-aeroway-taxiway, -path.casing.tag-taxiway { - stroke: #666; -} - -.preset-icon .icon.tag-aeroway-runway, -.preset-icon .icon.tag-runway { - color: #444; - fill: #000; -} -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 { - stroke: rgba(0, 0, 0, 0.6); - fill: rgba(0, 0, 0, 0.6); -} - - -/* railways */ -.preset-icon .icon.tag-railway.other-line { - color: #fff; - fill: #777; -} -.preset-icon .icon.tag-railway { - color: #555; - fill: #eee; -} -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; -} - -.preset-icon .icon.tag-railway-disused, -.preset-icon .icon.tag-railway-abandoned { - color: #999; - fill: #eee; -} -path.stroke.tag-railway-abandoned { - stroke: #eee; -} -path.casing.tag-railway-abandoned { - stroke: #999; -} - -.preset-icon .icon.tag-railway-subway { - color: #222; - fill: #bbb; -} -path.stroke.tag-railway-subway { - stroke: #bbb; -} -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 */ -.preset-icon .icon.tag-waterway.other-line { - color: #77d3de; - fill: #77d3de; -} -.preset-icon .icon.category-water, -.preset-icon .icon.tag-route-ferry, -.preset-icon .icon.tag-waterway { - color: #77d3de; - fill: #fff; -} - -path.fill.tag-waterway { - stroke: rgba(119, 211, 222, 0.3); - 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; -} - -.preset-icon .icon.tag-waterway-ditch { - color: #6591ff; -} -path.stroke.tag-waterway-ditch { - stroke: #6591ff; - stroke-width: 1; -} -path.casing.tag-waterway-ditch { - stroke: #6591ff; - stroke-width: 3; -} - -path.area.stroke.tag-waterway-dock, -path.area.stroke.tag-waterway-boatyard, -path.area.stroke.tag-waterway-fuel { - stroke: white; - stroke-width: 1; -} -path.area.casing.tag-waterway-dock, -path.area.casing.tag-waterway-boatyard, -path.area.casing.tag-waterway-fuel { - stroke: none; -} -path.area.fill.tag-waterway-dock, -path.area.fill.tag-waterway-boatyard, -path.area.fill.tag-waterway-fuel { - stroke: rgba(255, 255, 255, 0.3); - fill: rgba(255, 255, 255, 0.3); -} - - -/* power */ -.preset-icon .icon.tag-man_made-pipeline, -.preset-icon .icon.tag-power { - color: #939393; - fill: #939393; -} - -path.stroke.tag-power { - stroke: #939393; - stroke-width: 2; -} -path.casing.tag-power { - stroke: none; -} - - -/* boundaries */ -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; -} - - -/* barriers */ -path.stroke.tag-barrier { - stroke: #ddd; - stroke-width: 3px; - stroke-linecap: round; - stroke-dasharray: 15, 5, 1, 5; -} -.low-zoom path.stroke.tag-barrier { - stroke-width: 2px; - stroke-linecap: butt; - stroke-dasharray: 8, 2, 2, 2; -} - - -/* bridges */ -path.casing.tag-bridge { - stroke-width: 16; - stroke-opacity: 0.6; - stroke: #000; - stroke-linecap: butt; - stroke-dasharray: none; -} - -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.tag-highway-corridor.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.tag-highway-corridor.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; -} -.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.tag-highway-corridor.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.tag-highway-corridor.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; - stroke-linecap: butt; - stroke-dasharray: none; -} - - -/* 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; -} - - -/* Surface - unpaved */ -path.casing.tag-unpaved { - stroke: #ccc; - stroke-linecap: butt; - stroke-dasharray: 4, 3; -} -.low-zoom path.casing.tag-unpaved { - stroke-dasharray: 3, 2; -} -path.casing.tag-bridge.tag-unpaved { - stroke: #000; - stroke-dasharray: 4, 3; -} -.low-zoom path.casing.tag-bridge.tag-unpaved { - stroke: #000; - stroke-dasharray: 3, 2; -} - - -/* Status (e.g. construction, proposed, abandoned) */ -path.stroke.tag-status, -path.casing.tag-status { - stroke-linecap: butt; - stroke-dasharray: 7, 3; -} -.low-zoom path.stroke.tag-status, -.low-zoom path.casing.tag-status { - stroke-dasharray: 5, 2; -} - - -/* Buildings */ -path.stroke.tag-building, -path.stroke.tag-amenity-shelter { - stroke: rgb(224, 110, 95); -} -path.fill.tag-building, -path.fill.tag-amenity-shelter { - stroke: rgba(224, 110, 95, 0.3); - 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 / Markers */ @@ -1441,118 +232,12 @@ g.turn circle { cursor: auto !important; } -/* Cursors */ - -.map-in-map, -#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, -.mode-browse.lasso #map, -.mode-browse.lasso .way, -.mode-browse.lasso .vertex, -.mode-browse.lasso .midpoint, -.mode-select.lasso #map, -.mode-select.lasso .way, -.mode-select.lasso .vertex, -.mode-select.lasso .midpoint { - 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 */ + .layer-gpx { pointer-events: none; } @@ -1567,84 +252,6 @@ text.gpx { fill: #FF26D4; } -/* Mapillary Image Layer */ - -.layer-mapillary-images { - pointer-events: none; -} - -.layer-mapillary-images .viewfield-group { - pointer-events: visible; - cursor: pointer; /* Opera */ - cursor: url(img/cursor-select-mapillary.png) 6 1, pointer; /* FF */ -} - -.layer-mapillary-images .viewfield-group * { - stroke-width: 1; - stroke: #444; - fill: #ffc600; - z-index: 50; -} - -.layer-mapillary-images .viewfield-group:hover * { - stroke-width: 1; - stroke: #333; - fill: #ff9900; - z-index: 60; -} - -.layer-mapillary-images .viewfield-group.selected * { - stroke-width: 2; - stroke: #222; - fill: #ff5800; - z-index: 60; -} - -.layer-mapillary-images .viewfield-group:hover path.viewfield, -.layer-mapillary-images .viewfield-group.selected path.viewfield, -.layer-mapillary-images .viewfield-group path.viewfield { - stroke-width: 0; - fill-opacity: 0.6; -} - -/* Mapillary Sign Layer */ - -.layer-mapillary-signs { - pointer-events: none; -} - -.layer-mapillary-signs .icon-sign .icon-sign-body { - min-width: 20px; - height: 28px; - width: 28px; - border: 2px solid transparent; - pointer-events: visible; - cursor: pointer; /* Opera */ - cursor: url(img/cursor-select-mapillary.png) 6 1, pointer; /* FF */ - z-index: 70; - overflow: visible; -} - -.layer-mapillary-signs .icon-sign:hover .icon-sign-body { - border: 2px solid rgba(255,198,0,0.8); - z-index: 80; - } - -.layer-mapillary-signs .icon-sign.selected .icon-sign-body { - border: 2px solid rgba(255,0,0,0.8); - z-index: 80; - } - -.layer-mapillary-signs .icon-sign .t { - font-size: 28px; - z-index: 70; -} - -.layer-mapillary-signs .icon-sign:hover .t, -.layer-mapillary-signs .icon-sign.selected .t { - z-index: 80; -} - /* Modes */ .mode-draw-line .vertex.active, diff --git a/css/mapillary.css b/css/mapillary.css new file mode 100644 index 000000000..b7e40dce3 --- /dev/null +++ b/css/mapillary.css @@ -0,0 +1,78 @@ + +/* Mapillary Image Layer */ + +.layer-mapillary-images { + pointer-events: none; +} + +.layer-mapillary-images .viewfield-group { + pointer-events: visible; + cursor: pointer; /* Opera */ + cursor: url(img/cursor-select-mapillary.png) 6 1, pointer; /* FF */ +} + +.layer-mapillary-images .viewfield-group * { + stroke-width: 1; + stroke: #444; + fill: #ffc600; + z-index: 50; +} + +.layer-mapillary-images .viewfield-group:hover * { + stroke-width: 1; + stroke: #333; + fill: #ff9900; + z-index: 60; +} + +.layer-mapillary-images .viewfield-group.selected * { + stroke-width: 2; + stroke: #222; + fill: #ff5800; + z-index: 60; +} + +.layer-mapillary-images .viewfield-group:hover path.viewfield, +.layer-mapillary-images .viewfield-group.selected path.viewfield, +.layer-mapillary-images .viewfield-group path.viewfield { + stroke-width: 0; + fill-opacity: 0.6; +} + +/* Mapillary Sign Layer */ + +.layer-mapillary-signs { + pointer-events: none; +} + +.layer-mapillary-signs .icon-sign .icon-sign-body { + min-width: 20px; + height: 28px; + width: 28px; + border: 2px solid transparent; + pointer-events: visible; + cursor: pointer; /* Opera */ + cursor: url(img/cursor-select-mapillary.png) 6 1, pointer; /* FF */ + z-index: 70; + overflow: visible; +} + +.layer-mapillary-signs .icon-sign:hover .icon-sign-body { + border: 2px solid rgba(255,198,0,0.8); + z-index: 80; + } + +.layer-mapillary-signs .icon-sign.selected .icon-sign-body { + border: 2px solid rgba(255,0,0,0.8); + z-index: 80; + } + +.layer-mapillary-signs .icon-sign .t { + font-size: 28px; + z-index: 70; +} + +.layer-mapillary-signs .icon-sign:hover .t, +.layer-mapillary-signs .icon-sign.selected .t { + z-index: 80; +} diff --git a/css/misc.css b/css/misc.css new file mode 100644 index 000000000..3f764a00f --- /dev/null +++ b/css/misc.css @@ -0,0 +1,206 @@ + +/* power */ +.preset-icon .icon.tag-man_made-pipeline, +.preset-icon .icon.tag-power { + color: #939393; + fill: #939393; +} + +path.stroke.tag-power { + stroke: #939393; + stroke-width: 2; +} +path.casing.tag-power { + stroke: none; +} + + +/* boundaries */ +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; +} + + +/* barriers */ +path.stroke.tag-barrier { + stroke: #ddd; + stroke-width: 3px; + stroke-linecap: round; + stroke-dasharray: 15, 5, 1, 5; +} +.low-zoom path.stroke.tag-barrier { + stroke-width: 2px; + stroke-linecap: butt; + stroke-dasharray: 8, 2, 2, 2; +} + + +/* bridges */ +path.casing.tag-bridge { + stroke-width: 16; + stroke-opacity: 0.6; + stroke: #000; + stroke-linecap: butt; + stroke-dasharray: none; +} + +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.tag-highway-corridor.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.tag-highway-corridor.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; +} +.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.tag-highway-corridor.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.tag-highway-corridor.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; + stroke-linecap: butt; + stroke-dasharray: none; +} + + +/* 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; +} + + +/* Surface - unpaved */ +path.casing.tag-unpaved { + stroke: #ccc; + stroke-linecap: butt; + stroke-dasharray: 4, 3; +} +.low-zoom path.casing.tag-unpaved { + stroke-dasharray: 3, 2; +} +path.casing.tag-bridge.tag-unpaved { + stroke: #000; + stroke-dasharray: 4, 3; +} +.low-zoom path.casing.tag-bridge.tag-unpaved { + stroke: #000; + stroke-dasharray: 3, 2; +} + + +/* Status (e.g. construction, proposed, abandoned) */ +path.stroke.tag-status, +path.casing.tag-status { + stroke-linecap: butt; + stroke-dasharray: 7, 3; +} +.low-zoom path.stroke.tag-status, +.low-zoom path.casing.tag-status { + stroke-dasharray: 5, 2; +} + + +/* Buildings */ +path.stroke.tag-building, +path.stroke.tag-amenity-shelter { + stroke: rgb(224, 110, 95); +} +path.fill.tag-building, +path.fill.tag-amenity-shelter { + stroke: rgba(224, 110, 95, 0.3); + 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); +} diff --git a/css/railways.css b/css/railways.css new file mode 100644 index 000000000..aaf62bf82 --- /dev/null +++ b/css/railways.css @@ -0,0 +1,61 @@ +/* railways */ + +.preset-icon .icon.tag-railway.other-line { + color: #fff; + fill: #777; +} +.preset-icon .icon.tag-railway { + color: #555; + fill: #eee; +} +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; +} + +.preset-icon .icon.tag-railway-disused, +.preset-icon .icon.tag-railway-abandoned { + color: #999; + fill: #eee; +} +path.stroke.tag-railway-abandoned { + stroke: #eee; +} +path.casing.tag-railway-abandoned { + stroke: #999; +} + +.preset-icon .icon.tag-railway-subway { + color: #222; + fill: #bbb; +} +path.stroke.tag-railway-subway { + stroke: #bbb; +} +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; +} diff --git a/css/waterways.css b/css/waterways.css new file mode 100644 index 000000000..ca51b1a7b --- /dev/null +++ b/css/waterways.css @@ -0,0 +1,64 @@ +/* waterways */ + +.preset-icon .icon.tag-waterway.other-line { + color: #77d3de; + fill: #77d3de; +} +.preset-icon .icon.category-water, +.preset-icon .icon.tag-route-ferry, +.preset-icon .icon.tag-waterway { + color: #77d3de; + fill: #fff; +} + +path.fill.tag-waterway { + stroke: rgba(119, 211, 222, 0.3); + 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; +} + +.preset-icon .icon.tag-waterway-ditch { + color: #6591ff; +} +path.stroke.tag-waterway-ditch { + stroke: #6591ff; + stroke-width: 1; +} +path.casing.tag-waterway-ditch { + stroke: #6591ff; + stroke-width: 3; +} + +path.area.stroke.tag-waterway-dock, +path.area.stroke.tag-waterway-boatyard, +path.area.stroke.tag-waterway-fuel { + stroke: white; + stroke-width: 1; +} +path.area.casing.tag-waterway-dock, +path.area.casing.tag-waterway-boatyard, +path.area.casing.tag-waterway-fuel { + stroke: none; +} +path.area.fill.tag-waterway-dock, +path.area.fill.tag-waterway-boatyard, +path.area.fill.tag-waterway-fuel { + stroke: rgba(255, 255, 255, 0.3); + fill: rgba(255, 255, 255, 0.3); +} + From 5c8bb43ec0e52b401eb33356bdcba3c081d2e5e2 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Mon, 20 Feb 2017 15:54:38 -0500 Subject: [PATCH 2/2] Combine all the css files into dist/iD.css --- css/{reset.css => 00_reset.css} | 0 css/{map.css => 20_map.css} | 2 +- css/{areas.css => 25_areas.css} | 0 css/{highways.css => 30_highways.css} | 0 css/{aeroways.css => 35_aeroways.css} | 0 css/{railways.css => 40_railways.css} | 0 css/{waterways.css => 45_waterways.css} | 0 css/{misc.css => 50_misc.css} | 1 - css/{cursors.css => 55_cursors.css} | 0 css/{mapillary.css => 60_mapillary.css} | 1 - css/{app.css => 80_app.css} | 0 index.html | 13 ++++--------- package.json | 2 +- 13 files changed, 6 insertions(+), 13 deletions(-) rename css/{reset.css => 00_reset.css} (100%) rename css/{map.css => 20_map.css} (99%) rename css/{areas.css => 25_areas.css} (100%) rename css/{highways.css => 30_highways.css} (100%) rename css/{aeroways.css => 35_aeroways.css} (100%) rename css/{railways.css => 40_railways.css} (100%) rename css/{waterways.css => 45_waterways.css} (100%) rename css/{misc.css => 50_misc.css} (99%) rename css/{cursors.css => 55_cursors.css} (100%) rename css/{mapillary.css => 60_mapillary.css} (99%) rename css/{app.css => 80_app.css} (100%) diff --git a/css/reset.css b/css/00_reset.css similarity index 100% rename from css/reset.css rename to css/00_reset.css diff --git a/css/map.css b/css/20_map.css similarity index 99% rename from css/map.css rename to css/20_map.css index de5e9edda..5823f3878 100644 --- a/css/map.css +++ b/css/20_map.css @@ -307,7 +307,7 @@ text.gpx { display: none; } -.fill-partial path.fill { +.fill-partial path.area.fill { fill-opacity: 0; stroke-width: 60px; pointer-events: visibleStroke; diff --git a/css/areas.css b/css/25_areas.css similarity index 100% rename from css/areas.css rename to css/25_areas.css diff --git a/css/highways.css b/css/30_highways.css similarity index 100% rename from css/highways.css rename to css/30_highways.css diff --git a/css/aeroways.css b/css/35_aeroways.css similarity index 100% rename from css/aeroways.css rename to css/35_aeroways.css diff --git a/css/railways.css b/css/40_railways.css similarity index 100% rename from css/railways.css rename to css/40_railways.css diff --git a/css/waterways.css b/css/45_waterways.css similarity index 100% rename from css/waterways.css rename to css/45_waterways.css diff --git a/css/misc.css b/css/50_misc.css similarity index 99% rename from css/misc.css rename to css/50_misc.css index 3f764a00f..fb1a9332c 100644 --- a/css/misc.css +++ b/css/50_misc.css @@ -1,4 +1,3 @@ - /* power */ .preset-icon .icon.tag-man_made-pipeline, .preset-icon .icon.tag-power { diff --git a/css/cursors.css b/css/55_cursors.css similarity index 100% rename from css/cursors.css rename to css/55_cursors.css diff --git a/css/mapillary.css b/css/60_mapillary.css similarity index 99% rename from css/mapillary.css rename to css/60_mapillary.css index b7e40dce3..578e96a9b 100644 --- a/css/mapillary.css +++ b/css/60_mapillary.css @@ -1,4 +1,3 @@ - /* Mapillary Image Layer */ .layer-mapillary-images { diff --git a/css/app.css b/css/80_app.css similarity index 100% rename from css/app.css rename to css/80_app.css diff --git a/index.html b/index.html index 7168ff60b..0892708df 100644 --- a/index.html +++ b/index.html @@ -3,15 +3,10 @@ iD - - - - - - - - - + + + + diff --git a/package.json b/package.json index 40f5695cd..dc78bd9c5 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "build": "node build.js && node development_server.js", "clean": "shx rm -f dist/*.js dist/*.map dist/*.css dist/img/*.svg", "dist": "npm-run-all -p dist:**", - "dist:css": "shx cat css/reset.css css/map.css css/app.css > dist/iD.css", + "dist:css": "shx cat css/*.css > dist/iD.css", "dist:mapillary": "shx mkdir -p dist/mapillary-js && shx cp -R node_modules/mapillary-js/dist/* dist/mapillary-js/", "dist:min": "uglifyjs dist/iD.js -c -m -o dist/iD.min.js", "dist:svg:maki": "svg-sprite --symbol --symbol-dest . --symbol-sprite dist/img/maki-sprite.svg node_modules/@mapbox/maki/icons/*.svg",