X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/e5c4822d2cbae7ebd6efa9c10c2f09a63750aa61..79df0df8c62fa01ea4203f678441c09aaea0fbfb:/vendor/assets/iD/iD.css.erb?ds=sidebyside diff --git a/vendor/assets/iD/iD.css.erb b/vendor/assets/iD/iD.css.erb index 3a6602e30..da02a4086 100644 --- a/vendor/assets/iD/iD.css.erb +++ b/vendor/assets/iD/iD.css.erb @@ -187,11 +187,11 @@ img.tile-removing { use { pointer-events: none; } /* base styles */ -.layer path:not(.oneway) { fill: none; } /* IE needs :not(.oneway) */ +.layer-osm path:not(.oneway) { fill: none; } /* IE needs :not(.oneway) */ /* the above fill: none rule affects paths in shadow dom only in Firefox */ -.layer use.icon path { fill: #333; } /* FF svg Maki icons */ -.layer .turn use path { fill: #000; } /* FF turn restriction icons */ +.layer-osm use.icon path { fill: #333; } /* FF svg Maki icons */ +.layer-osm .turn use path { fill: #000; } /* FF turn restriction icons */ #turn-only-shape2, #turn-only-u-shape2 { fill: #7092FF; } /* FF turn-only, turn-only-u */ #turn-no-shape2, #turn-no-u-shape2 { fill: #E06D5F; } /* FF turn-no, turn-no-u */ #turn-yes-shape2, #turn-yes-u-shape2 { fill: #8CD05F; } /* FF turn-yes, turn-yes-u */ @@ -206,11 +206,6 @@ path.shadow { pointer-events: stroke; } -.shadow { - -webkit-transition: 200ms; - -moz-transition: 200ms; - transition: 200ms; -} /* points */ @@ -296,11 +291,11 @@ g.vertex.vertex-hover { g.vertex.hover:not(.selected) .shadow, g.midpoint.hover:not(.selected) .shadow { - fill-opacity: 0.3; + fill-opacity: 0.5; } g.vertex.selected .shadow { - fill-opacity: 0.5; + fill-opacity: 0.7; } .mode-draw-area g.midpoint, @@ -335,7 +330,7 @@ path.shadow { } path.shadow.hover:not(.selected) { - stroke-opacity: 0.3; + stroke-opacity: 0.4; } path.shadow.selected { @@ -407,17 +402,23 @@ path.fill.tag-leisure-park { 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-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-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-basin, .preset-icon-fill-area.tag-landuse-reservoir, .preset-icon-fill-area.tag-natural-water { @@ -815,19 +816,6 @@ path.casing.tag-tertiary { stroke:#7f7f3f; } -.preset-icon .icon.highway-unclassified { - color: #eaeaea; - fill: #444; -} -path.stroke.tag-highway-unclassified, -path.stroke.tag-unclassified { - stroke:#eaeaea; -} -path.casing.tag-highway-unclassified, -path.casing.tag-unclassified { - stroke:#444; -} - .preset-icon .icon.highway-residential { color: #fff; fill: #444; @@ -843,6 +831,7 @@ path.casing.tag-residential { /* narrow highways */ path.stroke.tag-highway-living_street, +path.stroke.tag-highway-unclassified, path.stroke.tag-highway-service, path.stroke.tag-highway-track, path.stroke.tag-highway-path, @@ -854,6 +843,7 @@ path.stroke.tag-highway-pedestrian, path.stroke.tag-highway-steps, path.stroke.tag-highway-road, path.stroke.tag-living_street, +path.stroke.tag-unclassified, path.stroke.tag-service, path.stroke.tag-track, path.stroke.tag-path, @@ -867,6 +857,7 @@ path.stroke.tag-road { stroke-width:4; } path.casing.tag-highway-living_street, +path.casing.tag-highway-unclassified, path.casing.tag-highway-service, path.casing.tag-highway-track, path.casing.tag-highway-path, @@ -878,6 +869,7 @@ path.casing.tag-highway-pedestrian, path.casing.tag-highway-steps, path.casing.tag-highway-road, path.casing.tag-living_street, +path.casing.tag-unclassified, path.casing.tag-service, path.casing.tag-track, path.casing.tag-path, @@ -892,6 +884,7 @@ path.casing.tag-road { } .low-zoom path.stroke.tag-highway-living_street, +.low-zoom path.stroke.tag-highway-unclassified, .low-zoom path.stroke.tag-highway-service, .low-zoom path.stroke.tag-highway-track, .low-zoom path.stroke.tag-highway-path, @@ -903,6 +896,7 @@ path.casing.tag-road { .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-unclassified, .low-zoom path.stroke.tag-service, .low-zoom path.stroke.tag-track, .low-zoom path.stroke.tag-path, @@ -916,6 +910,7 @@ path.casing.tag-road { stroke-width:2; } .low-zoom path.casing.tag-highway-living_street, +.low-zoom path.casing.tag-highway-unclassified, .low-zoom path.casing.tag-highway-service, .low-zoom path.casing.tag-highway-track, .low-zoom path.casing.tag-highway-path, @@ -927,6 +922,7 @@ path.casing.tag-road { .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-unclassified, .low-zoom path.casing.tag-service, .low-zoom path.casing.tag-track, .low-zoom path.casing.tag-path, @@ -953,7 +949,8 @@ path.casing.tag-living_street { stroke:#fff; } -.preset-icon .icon.highway-pedestrian { +.preset-icon .icon.highway-footway.tag-highway-corridor, +.preset-icon .icon.highway-footway.tag-highway-pedestrian { color: #8cd05f; fill: #fff; } @@ -977,6 +974,19 @@ path.casing.tag-pedestrian.tag-unpaved { stroke-dasharray: none; } +.preset-icon .icon.highway-unclassified { + color: #eee; + fill: #444; +} +path.stroke.tag-highway-unclassified, +path.stroke.tag-unclassified { + stroke:#eee; +} +path.casing.tag-highway-unclassified, +path.casing.tag-unclassified { + stroke:#444; +} + .preset-icon .icon.highway-road { color: #9e9e9e; fill: #666; @@ -1060,6 +1070,14 @@ 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; @@ -1232,13 +1250,20 @@ 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); @@ -1406,7 +1431,7 @@ path.shadow.tag-cutting { /* Surface - unpaved */ path.casing.tag-unpaved { - stroke: #eaeaea; + stroke: #ccc; stroke-linecap: butt; stroke-dasharray: 4, 3; } @@ -1638,7 +1663,7 @@ g.turn circle { } /* GPX Paths */ -div.layer-gpx { +.layer-gpx { pointer-events: none; } @@ -1652,43 +1677,84 @@ text.gpx { fill: #FF26D4; } -/* Mapillary Layer */ +/* Mapillary Image Layer */ -.layer-mapillary { +.layer-mapillary-images { pointer-events: none; } -.layer-mapillary g { +.layer-mapillary-images .viewfield-group { pointer-events: visible; cursor: pointer; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-select-mapillary.png") %>) 6 1, pointer; /* FF */ } -.layer-mapillary g * { +.layer-mapillary-images .viewfield-group * { stroke-width: 1; stroke: #444; fill: #ffc600; + z-index: 50; } -.layer-mapillary g:hover * { +.layer-mapillary-images .viewfield-group:hover * { stroke-width: 1; stroke: #333; fill: #ff9900; + z-index: 60; } -.layer-mapillary g.selected * { +.layer-mapillary-images .viewfield-group.selected * { stroke-width: 2; stroke: #222; fill: #ff5800; + z-index: 60; } -.layer-mapillary g:hover path.viewfield, -.layer-mapillary g.selected path.viewfield, -.layer-mapillary g path.viewfield { +.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 body { + min-width: 20px; + height: 28px; + width: 28px; + border: 2px solid transparent; + pointer-events: visible; + cursor: pointer; /* Opera */ + cursor: url(<%= asset_path("iD/img/cursor-select-mapillary.png") %>) 6 1, pointer; /* FF */ + z-index: 70; +} + +.layer-mapillary-signs .icon-sign:hover body { + border: 2px solid rgba(255,198,0,0.8); + z-index: 80; + } + +.layer-mapillary-signs .icon-sign.selected 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; + position: absolute; +} + +.layer-mapillary-signs .icon-sign:hover .t, +.layer-mapillary-signs .icon-sign.selected .t { + z-index: 80; +} + /* Modes */ .mode-draw-line .vertex.active, @@ -1729,10 +1795,10 @@ text.gpx { } .fill-wireframe path.shadow.hover:not(.selected) { - stroke-opacity: 0.2; + stroke-opacity: 0.4; } .fill-wireframe path.shadow.selected { - stroke-opacity: 0.4; + stroke-opacity: 0.6; } .fill-wireframe .point, @@ -2045,6 +2111,8 @@ ul li { list-style: none;} .fl { float: left;} .fr { float: right;} +.al { left: 0; } +.ar { right: 0; } div.hide, form.hide, @@ -2305,7 +2373,7 @@ button.save.has-count .count::before { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; - padding: 20px; + padding: 20px 20px 20px 40px; } .header button, @@ -2321,12 +2389,19 @@ button.save.has-count .count::before { height: 100%; } -.preset-list-pane .header button { +.entity-editor-pane .header button.preset-close, +.preset-list-pane .header button.preset-choose { position: absolute; right: 0; top: 0; } +.entity-editor-pane .header button.preset-choose { + position: absolute; + left: 0; + top: 0; +} + .preset-choose { font-size: 16px; line-height: 1.25; @@ -2398,7 +2473,6 @@ button.save.has-count .count::before { .mapillary-image { position: absolute; - right: 0; bottom: 30px; width: 330px; height: 250px; @@ -2412,7 +2486,6 @@ button.save.has-count .count::before { height: auto; background-color: rgba(0,0,0,.5); bottom: 0; - right: 0; padding: 5px 10px; } @@ -2591,6 +2664,18 @@ button.save.has-count .count::before { height: 60px; } +.preset-icon-44 { + position: absolute; + top: 9px; + left: 8px; + margin: auto; +} + +.preset-icon-44 .icon { + width: 44px; + height: 44px; +} + .preset-icon-32 { position: absolute; top: 14px; @@ -2689,6 +2774,11 @@ button.save.has-count .count::before { .inspector-preset { overflow: hidden; + padding-bottom: 10px; +} + +.inspector-preset a.hide-toggle { + margin: 0 20px 10px 20px; } .inspector-preset .preset-form { @@ -2697,25 +2787,10 @@ button.save.has-count .count::before { border-radius: 8px; } -.entity-editor-pane .preset-list-item::after { - content: ""; - position: absolute; - height: 0; - width: 0; - bottom: 0; - left: 0; - right: 0; - margin: auto; - border: solid rgba(0, 0, 0, 0); - border-width: 10px; - border-bottom-color: #ececec; -} - .entity-editor-pane .preset-list-item .preset-list-button-wrap { margin-bottom: 0; } - .form-field { margin-bottom: 10px; width: 100%; @@ -3512,6 +3587,10 @@ div.full-screen > button:hover { border: 1px solid #CCC; } +.imagery-faq { + margin-bottom: 10px; +} + .background-control .adjustments button:last-child { border: 0; } @@ -3534,6 +3613,10 @@ div.full-screen > button:hover { color: #7092FF; } +.layer-list:empty { + display: none; +} + .layer-list > li:first-child { border-radius: 3px 3px 0 0; } @@ -3558,6 +3641,18 @@ div.full-screen > button:hover { background: #E8EBFF; } +.layer-list li.best > div.best { + display: inline-block; + padding: 5px; + float: right; +} + +/* make sure tooltip fits in map-control panel */ +/* if too wide, placement will be wrong the first time it displays */ +.layer-list li.best .tooltip-inner { + max-width: 160px; +} + .layer-list label { display: block; padding: 5px 10px; @@ -3853,7 +3948,7 @@ div.full-screen > button:hover { user-select: none; } -#supersurface, .layer-layer { +#supersurface, .layer { position: absolute; top: 0; left: 0; @@ -3929,7 +4024,7 @@ div.full-screen > button:hover { border-bottom: 1px solid black; } -.infobox .selection-heading { +.infobox .infobox-heading { display: block; border-radius: 4px 0 0 0; padding: 5px 10px; @@ -4213,9 +4308,11 @@ div.full-screen > button:hover { ------------------------------------------------------- */ .save-success p { - padding: 15px; + padding: 15px 15px 0 15px; +} +.save-success a.details { + padding-left: 15px; } - .save-success .button { padding-top: 15px; }