X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/ffda8d7ac5ca4f40a1211225dd3e1c898fc232a8..5d5d0beefad0436781e0813f9f97d6b3fc313c28:/vendor/assets/iD/iD.css.erb diff --git a/vendor/assets/iD/iD.css.erb b/vendor/assets/iD/iD.css.erb index 69cc3e983..f10dc9ba1 100644 --- a/vendor/assets/iD/iD.css.erb +++ b/vendor/assets/iD/iD.css.erb @@ -179,8 +179,7 @@ /* No interactivity except what we specifically allow */ .ideditor .data-layer.osm *, .ideditor .data-layer.notes *, -.ideditor .data-layer.keepRight *, -.ideditor .data-layer.improveOSM * { +.ideditor .data-layer.keepRight * { pointer-events: none; } @@ -440,12 +439,14 @@ /* Wikidata-tagged */ -.ideditor g.point.tag-wikidata path.stroke { +.ideditor g.point.tag-wikidata path.stroke, +.ideditor g.vertex.tag-wikidata circle.stroke { stroke-width: 2px; stroke: #666; fill: #eee; } -.ideditor g.point.tag-wikidata .icon { +.ideditor g.point.tag-wikidata .icon, +.ideditor g.vertex.tag-wikidata .icon { color: #666; } @@ -1181,6 +1182,7 @@ .ideditor path.line.shadow.tag-highway-cycleway, .ideditor path.line.shadow.tag-highway-bridleway, .ideditor path.line.shadow.tag-highway-corridor, +.ideditor path.line.shadow.tag-highway-ladder, .ideditor path.line.shadow.tag-highway-steps { stroke-width: 16; } @@ -1189,6 +1191,7 @@ .ideditor path.line.casing.tag-highway-cycleway, .ideditor path.line.casing.tag-highway-bridleway, .ideditor path.line.casing.tag-highway-corridor, +.ideditor path.line.casing.tag-highway-ladder, .ideditor path.line.casing.tag-highway-steps { stroke-width: 5; } @@ -1197,6 +1200,7 @@ .ideditor path.line.stroke.tag-highway-cycleway, .ideditor path.line.stroke.tag-highway-bridleway, .ideditor path.line.stroke.tag-highway-corridor, +.ideditor path.line.stroke.tag-highway-ladder, .ideditor path.line.stroke.tag-highway-steps { stroke-width: 3; } @@ -1234,6 +1238,7 @@ .ideditor .low-zoom path.line.shadow.tag-highway-cycleway, .ideditor .low-zoom path.line.shadow.tag-highway-bridleway, .ideditor .low-zoom path.line.shadow.tag-highway-corridor, +.ideditor .low-zoom path.line.shadow.tag-highway-ladder, .ideditor .low-zoom path.line.shadow.tag-highway-steps { stroke-width: 12; } @@ -1242,6 +1247,7 @@ .ideditor .low-zoom path.line.casing.tag-highway-cycleway, .ideditor .low-zoom path.line.casing.tag-highway-bridleway, .ideditor .low-zoom path.line.casing.tag-highway-corridor, +.ideditor .low-zoom path.line.casing.tag-highway-ladder, .ideditor .low-zoom path.line.casing.tag-highway-steps { stroke-width: 3; } @@ -1250,6 +1256,7 @@ .ideditor .low-zoom path.line.stroke.tag-highway-cycleway, .ideditor .low-zoom path.line.stroke.tag-highway-bridleway, .ideditor .low-zoom path.line.stroke.tag-highway-corridor, +.ideditor .low-zoom path.line.stroke.tag-highway-ladder, .ideditor .low-zoom path.line.stroke.tag-highway-steps { stroke-width: 1; } @@ -1330,25 +1337,21 @@ } /* service roads */ -.ideditor path.line.stroke.tag-highway-service, -.ideditor path.line.stroke.tag-service { +.ideditor path.line.stroke.tag-highway-service { stroke: #fff; } -.ideditor path.line.casing.tag-highway-service, -.ideditor path.line.casing.tag-service { +.ideditor path.line.casing.tag-highway-service { stroke: #666; } /* special service roads and bus guideways */ /* with `service=* tag` (e.g. parking_aisle, alley, drive-through) */ .ideditor path.line.stroke.tag-highway-bus_guideway, -.ideditor path.line.stroke.tag-highway-service.tag-service, -.ideditor path.line.stroke.tag-service.tag-service { +.ideditor path.line.stroke.tag-highway-service.tag-service { stroke: #dca; } .ideditor path.line.casing.tag-highway-bus_guideway, -.ideditor path.line.casing.tag-highway-service.tag-service, -.ideditor path.line.casing.tag-service.tag-service { +.ideditor path.line.casing.tag-highway-service.tag-service { stroke: #666; } @@ -1437,7 +1440,7 @@ fill: #fff; } .ideditor path.line.stroke.tag-highway-footway, -.ideditor path.line.stroke.tag-highway_bus_stop, +.ideditor path.line.stroke.tag-highway-bus_stop, .ideditor .preset-icon-container path.casing.tag-highway-footway { stroke: #988; } @@ -1493,27 +1496,34 @@ } /* steps */ -.ideditor .preset-icon .icon.tag-highway-steps { +.ideditor .preset-icon .icon.tag-highway-steps, +.ideditor .preset-icon .icon.tag-highway-ladder { color: #81d25c; fill: #fff; } -.ideditor path.line.stroke.tag-highway-steps { +.ideditor path.line.stroke.tag-highway-steps, +.ideditor path.line.stroke.tag-highway-ladder { stroke-linecap: butt; stroke-dasharray: 3, 3; } -.ideditor .low-zoom path.line.stroke.tag-highway-steps { +.ideditor .low-zoom path.line.stroke.tag-highway-steps, +.ideditor .low-zoom path.line.stroke.tag-highway-ladder { stroke-dasharray: 2, 2; } -.ideditor path.line.casing.tag-highway-steps { +.ideditor path.line.casing.tag-highway-steps, +.ideditor path.line.casing.tag-highway-ladder { stroke: #fff; stroke-linecap: round; stroke-dasharray: none; } .ideditor path.line.stroke.tag-highway-steps, -.ideditor .preset-icon-container path.line.casing.tag-highway-steps { +.ideditor path.line.stroke.tag-highway-ladder, +.ideditor .preset-icon-container path.line.casing.tag-highway-steps, +.ideditor .preset-icon-container path.line.casing.tag-highway-ladder { stroke: #81d25c; } -.ideditor .preset-icon-container path.line.stroke.tag-highway-steps { +.ideditor .preset-icon-container path.line.stroke.tag-highway-steps, +.ideditor .preset-icon-container path.line.stroke.tag-highway-ladder { stroke: #fff; } @@ -1566,6 +1576,7 @@ /* highway midpoints */ .ideditor g.midpoint.tag-highway-corridor .fill, .ideditor g.midpoint.tag-highway-steps .fill, +.ideditor g.midpoint.tag-highway-ladder .fill, .ideditor g.midpoint.tag-highway-path .fill, .ideditor g.midpoint.tag-highway-footway .fill, .ideditor g.midpoint.tag-highway-cycleway .fill, @@ -1729,7 +1740,14 @@ .ideditor path.line.stroke.tag-railway-subway { stroke: #bbb; } -/* waterways */ + +/* railways with `service=* tag` (e.g. sidings, crossovers, etc.) */ +.ideditor path.line.stroke.tag-railway.tag-service { + stroke: #dca; +} +.ideditor path.line.casing.tag-railway.tag-service { + stroke: #666; +}/* waterways */ /* defaults */ .ideditor .preset-icon .icon.tag-waterway.other-line { @@ -1798,26 +1816,39 @@ /* wide waterways (river) */ -.ideditor path.line.shadow.tag-waterway-river { +.ideditor path.line.shadow.tag-waterway-river, +.ideditor path.line.shadow.tag-waterway-flowline { stroke-width: 20; } -.ideditor path.line.casing.tag-waterway-river { +.ideditor path.line.casing.tag-waterway-river, +.ideditor path.line.casing.tag-waterway-flowline { stroke-width: 10; } -.ideditor path.line.stroke.tag-waterway-river { +.ideditor path.line.stroke.tag-waterway-river, +.ideditor path.line.stroke.tag-waterway-flowline { stroke-width: 8; } -.ideditor .low-zoom path.line.shadow.tag-waterway-river { +.ideditor .low-zoom path.line.shadow.tag-waterway-river, +.ideditor .low-zoom path.line.shadow.tag-waterway-flowline { stroke-width: 16; } -.ideditor .low-zoom path.line.casing.tag-waterway-river { +.ideditor .low-zoom path.line.casing.tag-waterway-river, +.ideditor .low-zoom path.line.casing.tag-waterway-flowline { stroke-width: 7; } -.ideditor .low-zoom path.line.stroke.tag-waterway-river { +.ideditor .low-zoom path.line.stroke.tag-waterway-river, +.ideditor .low-zoom path.line.stroke.tag-waterway-flowline { stroke-width: 5; } +.ideditor path.line.stroke.tag-waterway-flowline { + stroke-opacity: 0.5; +} +.ideditor path.line.casing.tag-waterway-flowline { + display: none; +} + /* ditch */ .ideditor .preset-icon .icon.tag-waterway-ditch { @@ -2115,6 +2146,7 @@ .ideditor path.line.shadow.tag-highway-service.tag-bridge, .ideditor path.line.shadow.tag-highway-track.tag-bridge, .ideditor path.line.shadow.tag-highway-steps.tag-bridge, +.ideditor path.line.shadow.tag-highway-ladder.tag-bridge, .ideditor path.line.shadow.tag-highway-footway.tag-bridge, .ideditor path.line.shadow.tag-highway-cycleway.tag-bridge, .ideditor path.line.shadow.tag-highway-bridleway.tag-bridge { @@ -2128,6 +2160,7 @@ .ideditor path.line.casing.tag-highway-service.tag-bridge, .ideditor path.line.casing.tag-highway-track.tag-bridge, .ideditor path.line.casing.tag-highway-steps.tag-bridge, +.ideditor path.line.casing.tag-highway-ladder.tag-bridge, .ideditor path.line.casing.tag-highway-footway.tag-bridge, .ideditor path.line.casing.tag-highway-cycleway.tag-bridge, .ideditor path.line.casing.tag-highway-bridleway.tag-bridge { @@ -2142,6 +2175,7 @@ .ideditor .low-zoom path.line.shadow.tag-highway-service.tag-bridge, .ideditor .low-zoom path.line.shadow.tag-highway-track.tag-bridge, .ideditor .low-zoom path.line.shadow.tag-highway-steps.tag-bridge, +.ideditor .low-zoom path.line.shadow.tag-highway-ladder.tag-bridge, .ideditor .low-zoom path.line.shadow.tag-highway-footway.tag-bridge, .ideditor .low-zoom path.line.shadow.tag-highway-cycleway.tag-bridge, .ideditor .low-zoom path.line.shadow.tag-highway-bridleway.tag-bridge { @@ -2155,6 +2189,7 @@ .ideditor .low-zoom path.line.casing.tag-highway-service.tag-bridge, .ideditor .low-zoom path.line.casing.tag-highway-track.tag-bridge, .ideditor .low-zoom path.line.casing.tag-highway-steps.tag-bridge, +.ideditor .low-zoom path.line.casing.tag-highway-ladder.tag-bridge, .ideditor .low-zoom path.line.casing.tag-highway-footway.tag-bridge, .ideditor .low-zoom path.line.casing.tag-highway-cycleway.tag-bridge, .ideditor .low-zoom path.line.casing.tag-highway-bridleway.tag-bridge { @@ -2170,7 +2205,7 @@ } .ideditor path.line.casing.tag-tunnel, .ideditor path.line.casing.tag-location-underground, -.ideditor path.line.stroke.tag-location-underwater { +.ideditor path.line.casing.tag-location-underwater { stroke-opacity: 0.5; stroke-linecap: butt; stroke-dasharray: none; @@ -2283,14 +2318,18 @@ .ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-footway, .ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-cycleway, .ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-bridleway, -.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-steps { +.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-corridor, +.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-steps, +.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-ladder { stroke-width: 15; } .ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-path, .ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-footway, .ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-cycleway, .ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-bridleway, -.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-steps { +.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-corridor, +.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-steps, +.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-ladder { stroke-width: 5; stroke-linecap: butt; stroke-dasharray: none @@ -2299,7 +2338,9 @@ .ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-footway, .ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-cycleway, .ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-bridleway, -.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-steps { +.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-corridor, +.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-steps, +.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-ladder { stroke-width: 4; stroke-linecap: butt; stroke-dasharray: 10, 10; @@ -2310,28 +2351,32 @@ .ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-footway, .ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-cycleway, .ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-bridleway, -.ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-steps { +.ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-steps, +.ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-ladder { stroke-width: 15; } .ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-path, .ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-footway, .ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-cycleway, .ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-bridleway, -.ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-steps { +.ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-steps, +.ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-ladder { stroke-width: 4.5; } .ideditor path.line.casing.tag-highway.tag-bridge.tag-status.tag-status-proposed.tag-proposed-path, .ideditor path.line.casing.tag-highway.tag-bridge.tag-status.tag-status-proposed.tag-proposed-footway, .ideditor path.line.casing.tag-highway.tag-bridge.tag-status.tag-status-proposed.tag-proposed-cycleway, .ideditor path.line.casing.tag-highway.tag-bridge.tag-status.tag-status-proposed.tag-proposed-bridleway, -.ideditor path.line.casing.tag-highway.tag-bridge.tag-status.tag-status-proposed.tag-proposed-steps { +.ideditor path.line.casing.tag-highway.tag-bridge.tag-status.tag-status-proposed.tag-proposed-steps, +.ideditor path.line.casing.tag-highway.tag-bridge.tag-status.tag-status-proposed.tag-proposed-ladder { stroke-width: 10; } .ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-path, .ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-footway, .ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-cycleway, .ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-bridleway, -.ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-steps { +.ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-steps, +.ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-ladder { stroke-width: 3; } @@ -2478,6 +2523,20 @@ .ideditor .turn circle { cursor: pointer; } +/* legend */ +.ideditor li.list-item-photos.active:after { + display: block; + content: ""; + height: 100%; + position: absolute; + right: 0; + width: 8px; +} +.ideditor[dir='rtl'] li.list-item-photos.active:after { + right: auto; + left: 0; +} + /* photo viewer div */ .ideditor .photoviewer { position: relative; @@ -2513,6 +2572,15 @@ z-index: 50; } +.ideditor .photoviewer button.set-photo-from-viewer { + border-radius: 0; + padding: 5px; + position: absolute; + left: 5px; + top: 5px; + z-index: 50; +} + .ideditor .photoviewer button.resize-handle-xy { border-radius: 0; position: absolute; @@ -2561,8 +2629,8 @@ width: 100%; font-size: 10px; text-align: right; - line-height: 1.1em; - padding: 4px 2px; + line-height: 150%; + padding: 4px 8px; z-index: 10; } .ideditor .photo-attribution-dual { @@ -2575,6 +2643,7 @@ .ideditor .photo-attribution span { padding: 4px 2px; color: #fff; + text-wrap: nowrap; } /* markers and sequences */ @@ -2646,7 +2715,7 @@ .ideditor .sequence { fill: none; stroke-width: 2; - stroke-opacity: 0.4; + stroke-opacity: 0.6; } .ideditor .sequence.highlighted, .ideditor .sequence.currentView { @@ -2656,6 +2725,9 @@ /* Streetside Image Layer */ +.ideditor li.list-item-photos.list-item-streetside.active:after { + background-color: #0fffc4; +} .ideditor .layer-streetside-images { pointer-events: none; } @@ -2668,19 +2740,25 @@ } /* Vegbilder Image Layer */ +.ideditor li.list-item-photos.list-item-vegbilder.active:after { + background-color: #ed1c2e; +} .ideditor .layer-vegbilder { pointer-events: none; } .ideditor .layer-vegbilder .viewfield-group * { - fill: #ed9300; + fill: #ed1c2e; } .ideditor .layer-vegbilder .sequence { - stroke: #ed9300; + stroke: #ed1c2e; stroke-opacity: 0.85; /* bump opacity - only one per road */ } /* Mapillary Image Layer */ +.ideditor li.list-item-photos.list-item-mapillary.active:after { + background-color: #55ff22; +} .ideditor .layer-mapillary { pointer-events: none; } @@ -2728,6 +2806,9 @@ /* KartaView Image Layer */ +.ideditor li.list-item-photos.list-item-kartaview.active:after { + background-color: #20c4ff; +} .ideditor .layer-kartaview { pointer-events: none; } @@ -2740,6 +2821,9 @@ /* Mapilio Image Layer */ +.ideditor li.list-item-photos.list-item-mapilio.active:after { + background-color: #0056f1; +} .ideditor .layer-mapilio { pointer-events: none; } @@ -2782,11 +2866,68 @@ height: 100%; -o-object-fit: cover; object-fit: cover; - overflow: hidden + overflow: hidden; +} + +/* panoramax Image Layer */ +.ideditor li.list-item-photos.list-item-panoramax.active:after { + background-color: #ff6f00; +} +.ideditor .layer-panoramax { + pointer-events: none; +} +.ideditor .layer-panoramax .viewfield-group * { + fill: #ff6f00; + stroke: #ffffff; + stroke-opacity: .6; + fill-opacity: .6; +} +.ideditor .layer-panoramax .sequence { + stroke: #ff6f00; +} +.ideditor .photo-controls-panoramax { + display: flex; + align-items: center; + justify-content: center; + gap: 4px; +} +.ideditor .photo-controls-panoramax button { + padding:0 6px; + pointer-events: initial; +} + +.ideditor label.panoramax-hd { + float: left; + cursor: pointer; +} +.ideditor .panoramax-hd span { + margin-top: 2px; +} +.ideditor .panoramax-hd input[type="checkbox"] { + width: 12px; + height: 12px; + margin: 0 2px; +} + +.ideditor .slider-wrap { + display: inline-block; +} + +.ideditor .year-datalist { + display: flex; + justify-content: space-between; +} + +.ideditor .list-option-date-slider{ + direction: rtl } /* Streetside Viewer (pannellum) */ +.ideditor .ms-wrapper .photo-attribution { + line-height: 1.1em; + padding: 4px 2px; +} .ideditor .ms-wrapper .photo-attribution .image-link { display: block; } @@ -2815,7 +2956,8 @@ } .ideditor .ms-wrapper .pnlm-compass.pnlm-control, -.ideditor .vegbilder-wrapper .pnlm-compass.pnlm-control { +.ideditor .vegbilder-wrapper .pnlm-compass.pnlm-control, +.ideditor .panoramax-wrapper .pnlm-compass.pnlm-control { width: 26px; height: 26px; left: 4px; @@ -2908,19 +3050,18 @@ .ideditor .photo-wrapper { position: relative; background-color: #000; + background-image: url(<%= asset_path("iD/img/loader-black.gif") %>); + background-position: center; + background-repeat: no-repeat; } .ideditor .photoviewer .plane-frame { - display: block; - overflow: hidden; height: 100%; width: 100%; - background-image: url(<%= asset_path("iD/img/loader-black.gif") %>); - background-position: center; - background-repeat: no-repeat; + transform-origin: 0 0; } -.ideditor .photoviewer .plane-frame > img.plane-photo{ +.ideditor .photoviewer .plane-frame > img.plane-photo { width: auto; height: 100%; transform-origin: 0 0; @@ -3066,11 +3207,11 @@ cursor: pointer; } + /* OSM Notes and QA Layers */ .ideditor .qa-header-icon .qaItem-fill, .ideditor .layer-keepRight .qaItem .qaItem-fill, -.ideditor .layer-improveOSM .qaItem .qaItem-fill, .ideditor .layer-osmose .qaItem .qaItem-fill { stroke: #333; stroke-width: 1.3px; /* NOTE: likely a better way to scale the icon stroke */ @@ -3194,30 +3335,6 @@ color: #c35; } -/* ImproveOSM Issues -------------------------------------------------------- */ - -.ideditor .improveOSM.itemType-ow { /* missing one way */ - color: #1E90FF; -} - -.ideditor .improveOSM.itemType-mr-road { /* missing road */ - color: #B452CD; -} -.ideditor .improveOSM.itemType-mr-path { /* missing path */ - color: #A0522D; -} -.ideditor .improveOSM.itemType-mr-parking { /* missing parking */ - color: #EEEE00; -} -.ideditor .improveOSM.itemType-mr-both { /* missing road+parking */ - color: #FFA500; -} - -.ideditor .improveOSM.itemType-tr { /* missing turn restriction */ - color: #EC1C24; -} - /* Custom Map Data (geojson, gpx, kml, vector tile) */ .ideditor .layer-mapdata { pointer-events: none; @@ -3325,6 +3442,9 @@ .ideditor .fill-partial path.area.fill.tag-indoor { stroke-width: 20px; } +.ideditor .fill-partial path.area.fill.tag-amenity-parking_space { + stroke-width: 30px; +} .ideditor.mode-browse .fill-partial path.area.fill, .ideditor.mode-select .fill-partial path.area.fill, .ideditor.mode-select-data .fill-partial path.area.fill, @@ -6474,6 +6594,7 @@ .ideditor .comment-date { color: #aaa; } +.ideditor .inspector-hover .comment-text, .ideditor .comment-text { color: #333; margin-top: 10px; @@ -7585,11 +7706,13 @@ .ideditor .help-pane .nav { position: relative; padding-bottom: 30px; + display: flex; + justify-content: space-between; + width: 100%; } .ideditor .help-pane .nav a { - float: left; - width: 50%; + flex: 0 0 50%; text-align: center; } @@ -7603,7 +7726,7 @@ } .ideditor .help-pane .nav a:only-child { - width: 100%; + flex: 0 0 100%; border-radius: 4px; } @@ -7639,10 +7762,10 @@ border: 1px solid #ccc; } -/* scrollbars only when necessary*/ +/* no scrollbars */ .ideditor .inspector-hover div { overflow-x: visible; - overflow-y: auto; + overflow-y: visible; } /* hide and remove from layout */ @@ -7772,17 +7895,34 @@ -webkit-user-drag: none; - opacity: 0; + opacity: 1; + transition: opacity 250ms linear; - transition: opacity 200ms linear; + /* prevent brief flickering of "broken image" on tile loading errors, see https://zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ */ + text-indent: 100%; + white-space: nowrap; + overflow: hidden; } -.ideditor img.tile-loaded { - opacity: 1; +/* Workaround to remove visible grid around tile borders on Chrome + Only works with browser zoom multiple of 25 (75%, 100%, 125%...) + Should be removed when https://issues.chromium.org/issues/40084005 is resolved. + See https://github.com/openstreetmap/iD/pull/10594 */ +@media (-webkit-device-pixel-ratio = 1) or (-webkit-device-pixel-ratio = 1.25) or (-webkit-device-pixel-ratio = 1.5) or (-webkit-device-pixel-ratio = 1.75) + or (-webkit-device-pixel-ratio = 2) or (-webkit-device-pixel-ratio = 2.25) or (-webkit-device-pixel-ratio = 2.5) or (-webkit-device-pixel-ratio = 2.75) + or (-webkit-device-pixel-ratio = 3) or (-webkit-device-pixel-ratio = 3.25) or (-webkit-device-pixel-ratio = 3.5) or (-webkit-device-pixel-ratio = 3.75) + or (-webkit-device-pixel-ratio = 4) or (-webkit-device-pixel-ratio = 4.25) or (-webkit-device-pixel-ratio = 4.5) or (-webkit-device-pixel-ratio = 4.75) + or (-webkit-device-pixel-ratio = 5) or (-webkit-device-pixel-ratio = 0.25) or (-webkit-device-pixel-ratio = 0.5) or (-webkit-device-pixel-ratio = 0.75) { + .ideditor .layer-background img.tile, + .ideditor .map-in-map-background img.tile { + mix-blend-mode: plus-lighter; + } } .ideditor img.tile-removing { opacity: 0; + z-index: 1; + mix-blend-mode: normal; } .ideditor .tile-label-debug { @@ -7857,6 +7997,7 @@ z-index: 2; background: #000; border: #aaa 1px solid; + border-radius: 4px; box-shadow: 0 0 2em black; } .ideditor[dir='ltr'] .map-in-map { @@ -9189,6 +9330,7 @@ border: solid transparent; border-width: 3px 3px 3px 4px; border-radius: 6px; + cursor: auto; } .ideditor ::-webkit-scrollbar-track:active { background-color: rgba(0,0,0,.05); @@ -9198,8 +9340,11 @@ background-color: rgba(0,0,0,.05); } } -body { - scrollbar-width: 10px; +/* Firefox */ +@-moz-document url-prefix() { + .ideditor * { + scrollbar-width: thin; + } }