X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/bca801a226646050fea680a5151ce0bdc7fbca31..75bde83a138226179059551e386561640adc285d:/vendor/assets/iD/iD.css.erb diff --git a/vendor/assets/iD/iD.css.erb b/vendor/assets/iD/iD.css.erb index 39f6ea589..b1a0176ee 100644 --- a/vendor/assets/iD/iD.css.erb +++ b/vendor/assets/iD/iD.css.erb @@ -405,7 +405,6 @@ font-weight: bold; fill: #333; -webkit-transition: opacity 100ms linear; - -o-transition: opacity 100ms linear; transition: opacity 100ms linear; } @@ -628,7 +627,11 @@ .ideditor path.stroke.tag-leisure-pitch, .ideditor path.stroke.tag-leisure-track, .ideditor path.stroke.tag-natural, -.ideditor path.stroke.tag-natural-wood { +.ideditor path.stroke.tag-natural-wood, +.ideditor path.stroke.tag-golf-tee, +.ideditor path.stroke.tag-golf-fairway, +.ideditor path.stroke.tag-golf-rough, +.ideditor path.stroke.tag-golf-green { stroke: rgb(140, 208, 95); } .ideditor path.fill.tag-barrier-hedge, @@ -644,7 +647,11 @@ .ideditor path.fill.tag-leisure-pitch, .ideditor path.fill.tag-leisure-track, .ideditor path.fill.tag-natural, -.ideditor path.fill.tag-natural-wood { +.ideditor path.fill.tag-natural-wood, +.ideditor path.fill.tag-golf-tee, +.ideditor path.fill.tag-golf-fairway, +.ideditor path.fill.tag-golf-rough, +.ideditor path.fill.tag-golf-green { stroke: rgba(140, 208, 95, 0.3); fill: rgba(140, 208, 95, 0.3); } @@ -662,12 +669,14 @@ .ideditor path.stroke.tag-amenity-fountain, .ideditor path.stroke.tag-leisure-swimming_pool, .ideditor path.stroke.tag-natural-bay, +.ideditor path.stroke.tag-natural-strait, .ideditor path.stroke.tag-natural-water { stroke: rgb(119, 211, 222); } .ideditor path.fill.tag-amenity-fountain, .ideditor path.fill.tag-leisure-swimming_pool, .ideditor path.fill.tag-natural-bay, +.ideditor path.fill.tag-natural-strait, .ideditor path.fill.tag-natural-water { stroke: rgba(119, 211, 222, 0.3); fill: rgba(119, 211, 222, 0.3); @@ -842,14 +851,17 @@ /* Tan things */ -.ideditor path.stroke.tag-landuse-farmyard { +.ideditor path.stroke.tag-landuse-farmyard, +.ideditor path.stroke.tag-leisure-horse_riding { stroke: rgb(245, 220, 186); } -.ideditor path.fill.tag-landuse-farmyard { +.ideditor path.fill.tag-landuse-farmyard, +.ideditor path.fill.tag-leisure-horse_riding { stroke: rgba(245, 220, 186, 0.3); fill: rgba(245, 220, 186, 0.3); } -.ideditor .preset-icon-fill path.area.stroke.tag-landuse-farmyard { +.ideditor .preset-icon-fill path.area.stroke.tag-landuse-farmyard +.preset-icon-fill path.area.stroke.tag-leisure-horse_riding { stroke: rgb(226, 177, 111); } .ideditor .pattern-color-farmyard { @@ -1385,6 +1397,7 @@ .ideditor path.line.stroke.tag-public_transport-platform, .ideditor path.line.stroke.tag-highway-platform, .ideditor path.line.stroke.tag-railway-platform, +.ideditor path.line.stroke.tag-railway-platform_edge, .ideditor path.line.stroke.tag-man_made-pier { stroke: #dca; } @@ -1542,14 +1555,12 @@ .ideditor path.line.stroke.tag-highway.tag-footway-access_aisle { stroke-dasharray: 4, 2; + stroke: #4c4444; } .ideditor .low-zoom path.line.stroke.tag-highway.tag-footway-access_aisle, .ideditor .preset-icon-container path.stroke.tag-highway.tag-footway-access_aisle { stroke-dasharray: 2.5, 1.5; } -.ideditor path.line.stroke.tag-highway.tag-footway-access_aisle { - stroke: #4c4444; -} .ideditor .preset-icon .icon.tag-highway.tag-footway-access_aisle { color: #4c4444; } @@ -1589,10 +1600,12 @@ } .ideditor path.line.casing.tag-aeroway-taxiway, .ideditor path.line.casing.tag-taxiway { + stroke: #666; stroke-width: 7; } .ideditor path.line.stroke.tag-aeroway-taxiway, .ideditor path.line.stroke.tag-taxiway { + stroke: #ff0; stroke-width: 5; } .ideditor .low-zoom path.line.shadow.tag-aeroway-taxiway, @@ -1608,15 +1621,6 @@ stroke-width: 3; } -.ideditor path.line.stroke.tag-aeroway-taxiway, -.ideditor path.line.stroke.tag-taxiway { - stroke: #ff0; -} -.ideditor path.line.casing.tag-aeroway-taxiway, -.ideditor path.line.casing.tag-taxiway { - stroke: #666; -} - /* wide aeroways (runway) */ .ideditor .preset-icon .icon.tag-aeroway-runway, .ideditor .preset-icon .icon.tag-runway { @@ -1672,7 +1676,7 @@ .ideditor path.line.stroke.tag-railway { stroke-width: 2; stroke-linecap: butt; - stroke-dasharray: 12,12; + stroke-dasharray: 12, 12; } .ideditor .low-zoom path.line.shadow.tag-railway { stroke-width: 12; @@ -1682,16 +1686,18 @@ } .ideditor .low-zoom path.line.stroke.tag-railway { stroke-width: 2; - stroke-dasharray: 6,6; + stroke-dasharray: 6, 6; } .ideditor .preset-icon-container path.line.stroke.tag-railway:not(.tag-status), .ideditor .preset-icon-container path.line.stroke.tag-railway.tag-status-disused { stroke-dasharray: 6; } +.ideditor path.line.casing.tag-railway.tag-railway-platform_edge, .ideditor path.line.casing.tag-railway.tag-railway-platform { stroke-width: 0; } +.ideditor path.line.stroke.tag-railway.tag-railway-platform_edge, .ideditor path.line.stroke.tag-railway.tag-railway-platform { stroke-dasharray: none; } @@ -1704,7 +1710,6 @@ stroke: #eee; } - .ideditor .preset-icon .icon.tag-railway.tag-status { color: #999; } @@ -1721,7 +1726,6 @@ stroke: #808080; } - .ideditor path.line.casing.tag-railway-subway { stroke: #222; } @@ -1893,6 +1897,7 @@ stroke-width: 16; } .ideditor path.line.stroke.tag-route-ferry { + stroke: #58a9ed; stroke-width: 3; stroke-linecap: butt; stroke-dasharray: 12,8; @@ -1905,9 +1910,6 @@ stroke-width: 2; stroke-dasharray: 6,4; } -.ideditor path.line.stroke.tag-route-ferry { - stroke: #58a9ed; -} .ideditor path.line.casing.tag-route-ferry { stroke: none; } @@ -2065,15 +2067,13 @@ .ideditor path.line.casing.tag-bridge { stroke-opacity: 0.6; stroke: #000 !important; + stroke-width: 16; stroke-linecap: butt; stroke-dasharray: none; } .ideditor path.line.shadow.tag-bridge { stroke-width: 24; } -.ideditor path.line.casing.tag-bridge { - stroke-width: 16; -} .ideditor .low-zoom path.line.shadow.tag-bridge { stroke-width: 16; } @@ -2252,6 +2252,62 @@ stroke-dasharray: 8, 8; } +/** Closed Paths */ +.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-path, +.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 { + 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 { + stroke-width: 5; + stroke-linecap: butt; + stroke-dasharray: none +} +.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-path, +.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 { + stroke-width: 4; + stroke-linecap: butt; + stroke-dasharray: 10, 10; +} + +/** Proposed Paths */ +.ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-path, +.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 { + 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 { + 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 { + 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 { + stroke-width: 3; +} /* Buildings */ .ideditor path.stroke.tag-building { @@ -2467,13 +2523,10 @@ } -.ideditor .photo-wrapper, -.ideditor .photo-wrapper img { +.ideditor .photo-wrapper { width: 100%; height: 100%; overflow: hidden; - -o-object-fit: cover; - object-fit: cover; } .ideditor .photo-wrapper .photo-attribution { @@ -2587,6 +2640,18 @@ stroke-opacity: 0.85; /* bump opacity - only one per road */ } +/* Vegbilder Image Layer */ +.ideditor .layer-vegbilder { + pointer-events: none; +} +.ideditor .layer-vegbilder .viewfield-group * { + fill: #ed9300; +} +.ideditor .layer-vegbilder .sequence { + stroke: #ed9300; + stroke-opacity: 0.85; /* bump opacity - only one per road */ +} + /* Mapillary Image Layer */ .ideditor .layer-mapillary { @@ -2635,17 +2700,75 @@ } -/* OpenStreetCam Image Layer */ -.ideditor .layer-openstreetcam { +/* KartaView Image Layer */ +.ideditor .layer-kartaview { pointer-events: none; } -.ideditor .layer-openstreetcam .viewfield-group * { +.ideditor .layer-kartaview .viewfield-group * { fill: #20c4ff; } -.ideditor .layer-openstreetcam .sequence { +.ideditor .layer-kartaview .sequence { stroke: #20c4ff; } +/* Mapilio Image Layer */ +.ideditor .layer-mapilio { + pointer-events: none; +} +.ideditor .layer-mapilio .viewfield-group * { + fill: #0056f1; + stroke: #ffffff; + stroke-opacity: .6; + fill-opacity: .6; +} +.ideditor .layer-mapilio .sequence { + stroke: #0056f1; +} +.ideditor .photo-controls-mapilio { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + gap: 4px; +} + +.ideditor .photo-controls-mapilio button { + padding:0 6px; + pointer-events: initial; +} + +.ideditor .mapilio-wrapper { + position: relative; + background-color: #000; + background-image: url(<%= asset_path("iD/img/loader-black.gif") %>); + background-position: center; + background-repeat: no-repeat; +} + +.ideditor #ideditor-viewer-mapilio-simple-wrap { + height: 100%; +} + +.ideditor #ideditor-viewer-mapilio-simple { + width: 100%; + height: 100%; + -webkit-transform-origin: 0 0; + -ms-transform-origin: 0 0; + transform-origin: 0 0; +} + +.ideditor #ideditor-viewer-mapilio-simple img { + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover; + overflow: hidden +} /* Streetside Viewer (pannellum) */ .ideditor .ms-wrapper .photo-attribution .image-link { @@ -2684,7 +2807,8 @@ } } -.ideditor .ms-wrapper .pnlm-compass.pnlm-control { +.ideditor .ms-wrapper .pnlm-compass.pnlm-control, +.ideditor .vegbilder-wrapper .pnlm-compass.pnlm-control { width: 26px; height: 26px; left: 4px; @@ -2706,6 +2830,10 @@ margin: 0 5px; } +.ideditor .pnlm-zoom-controls { + margin-top: 6px; +} + /* Mapillary viewer */ .ideditor #ideditor-mly .domRenderer .TagSymbol { @@ -2716,20 +2844,34 @@ top: -25px; } -.ideditor .mly-wrapper .AttributionContainer .AttributionIconContainer .AttributionMapillaryLogo { - margin-top: 3px; +.ideditor .mly-wrapper .mapillary-attribution-container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } -.ideditor .mly-wrapper .AttributionContainer .AttributionImageContainer { - color: #fff; - font-size: 10px; - font-weight: 300; - overflow: hidden; +.ideditor .mly-wrapper .mapillary-attribution-container .mapillary-attribution-icon-container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } +.ideditor .mly-wrapper .mapillary-attribution-container .mapillary-attribution-username { + display: none; +} -/* OpenStreetCam viewer */ -.ideditor .osc-wrapper { +.ideditor .mly-wrapper .mapillary-attribution-container .mapillary-attribution-date { + margin-right: 6px; +} + +/* KartaView viewer */ +.ideditor .kartaview-wrapper { position: relative; background-color: #000; background-image: url(<%= asset_path("iD/img/loader-black.gif") %>); @@ -2737,23 +2879,53 @@ background-repeat: no-repeat; } -.ideditor .osc-wrapper .photo-attribution a:active { +.ideditor .kartaview-wrapper img { + width: 100%; + height: 100%; + overflow: hidden; + -o-object-fit: cover; + object-fit: cover; +} + +.ideditor .kartaview-wrapper .photo-attribution a:active { color: #20c4ff; } @media (hover: hover) { - .ideditor .osc-wrapper .photo-attribution a:hover { + .ideditor .kartaview-wrapper .photo-attribution a:hover { color: #20c4ff; } } -.ideditor .osc-image-wrap { +.ideditor .kartaview-image-wrap { width: 100%; height: 100%; - -webkit-transform-origin:0 0; - -ms-transform-origin:0 0; - transform-origin:0 0; + -webkit-transform-origin: 0 0; + -ms-transform-origin: 0 0; + transform-origin: 0 0; +} + +.ideditor .photo-wrapper { + position: relative; + background-color: #000; +} + +.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; } +.ideditor .photoviewer .plane-frame > img.plane-photo{ + width: auto; + height: 100%; + -webkit-transform-origin: 0 0; + -ms-transform-origin: 0 0; + transform-origin: 0 0; +} /* photo-controls (step forward, back, rotate) */ .ideditor .photo-controls-wrap { @@ -2775,6 +2947,7 @@ .ideditor .photo-controls button:focus { height: 18px; width: 18px; + line-height: 18px; background: rgba(0,0,0,0.65); color: #eee; border-radius: 0; @@ -2796,6 +2969,109 @@ } } +/* local georeferenced photos */ +.ideditor .layer-local-photos { + pointer-events: none; +} +.ideditor .layer-local-photos .viewfield-group * { + fill: #ed00d9; +} +.ideditor .local-photos { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.ideditor .local-photos > div { + width: 50%; +} +.ideditor .local-photos > div:first-child { + margin-right: 20px; +} + +.ideditor .list-local-photos { + max-height: 40vh; + overflow-y: scroll; + overflow-x: auto; + /* workaround for something like "overflow-x: visible" + see https://stackoverflow.com/a/39554003 */ + margin-left: -100px; + padding-left: 100px; +} +.ideditor .list-local-photos::-webkit-scrollbar { + border-left: none; +} +.ideditor .list-local-photos li { + list-style: none; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + height: 30px; +} +.ideditor .list-local-photos span.filename { + display: block; + width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + line-height: 30px; + padding-left: 8px; + border-bottom: 1px solid #ccc; + border-left: 1px solid #ccc; + border-right: 1px solid #ccc; +} +.ideditor .list-local-photos li:first-child span.filename { + border-top: 1px solid #ccc; + border-top-left-radius: 4px; +} +.ideditor .list-local-photos li:first-child button { + border-top: 1px solid #ccc; +} +.ideditor .list-local-photos li:first-child button.remove { + border-top-right-radius: 4px; +} +.ideditor .list-local-photos li:last-child span.filename { + border-bottom-left-radius: 4px; +} +.ideditor .list-local-photos li:last-child button.remove { + border-bottom-right-radius: 4px; +} +.ideditor .list-local-photos li.invalid span.filename { + color: #ccc; +} +.ideditor .list-local-photos li.invalid button.zoom-to-data { + display: none; +} +.ideditor .list-local-photos li button.no-geolocation { + display: none; +} +.ideditor .list-local-photos li.invalid button.no-geolocation { + display: block; +} +.ideditor .list-local-photos .placeholder div { + display: block; + height: 40px; + width: 40px; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + background-image: url(<%= asset_path("iD/img/loader-black.gif") %>); + -webkit-filter: invert(1); + filter: invert(1); +} +.ideditor .local-photos label.button { + background: #7092ff; + color: #fff; + font-weight: bold; + padding: 10px 25px; + text-align: center; + font-size: 12px; + display: inline-block; + border-radius: 4px; + cursor: pointer; +} /* OSM Notes and QA Layers */ .ideditor .qa-header-icon .qaItem-fill, @@ -3068,6 +3344,59 @@ .ideditor.mode-select-note .fill-partial path.area.fill { pointer-events: visibleStroke; } +.ideditor svg.preset-icon-category-border path { + stroke-width: 1; + stroke: rgb(170, 170, 170); + fill: rgba(170, 170, 170, 0.3); +} + +.ideditor .preset-category-barrier svg.preset-icon-category-border path { + stroke: rgb(200, 144, 144); + fill: rgba(200, 144, 144, 0.3); +} + +.ideditor .preset-category-building svg.preset-icon-category-border path { + stroke: rgb(224, 110, 95); + fill: rgba(224, 110, 95, 0.3); +} + +.ideditor .preset-category-landuse svg.preset-icon-category-border path { + stroke: rgb(196, 189, 25); + fill: rgba(196, 189, 25, 0.3); +} + +.ideditor .preset-category-natural svg.preset-icon-category-border path, +.ideditor .preset-category-playground svg.preset-icon-category-border path, +.ideditor .preset-category-golf svg.preset-icon-category-border path { + stroke: rgb(140, 208, 95); + fill: rgba(140, 208, 95, 0.3); +} + +.ideditor .preset-category-water svg.preset-icon-category-border path, +.ideditor .preset-category-waterway svg.preset-icon-category-border path { + stroke: rgb(119, 211, 222); + fill: rgba(119, 211, 222, 0.3); +} + +.ideditor .preset-category-utility svg.preset-icon-category-border path { + stroke: rgb(125, 125, 125); + fill: rgba(219, 219, 125, 0.3); +} + +.ideditor .preset-category-path svg.preset-icon-category-border path { + stroke: rgb(221, 221, 204); + fill: rgba(221, 221, 204, 0.3); +} + +.ideditor .preset-category-road_service svg.preset-icon-category-border path, +.ideditor .preset-category-road_minor svg.preset-icon-category-border path, +.ideditor .preset-category-road_major svg.preset-icon-category-border path { + stroke: #999; +} + +.ideditor .preset-category-rail svg.preset-icon-category-border path { + stroke: #555; +} /* Basics ------------------------------------------------------- */ /* the root element of iD */ @@ -3123,7 +3452,6 @@ -webkit-filter: none !important; filter: none !important; -webkit-transition-duration: 200ms; - -o-transition-duration: 200ms; transition-duration: 200ms; } @@ -3131,7 +3459,6 @@ -webkit-filter: grayscale(80%) brightness(80%); filter: grayscale(80%) brightness(80%); -webkit-transition-duration: 200ms; - -o-transition-duration: 200ms; transition-duration: 200ms; } @@ -3167,9 +3494,14 @@ font-weight: bold; margin-bottom: 20px; } +.ideditor .header h2 { + font-size: 20px; + line-height: 1.25; + font-weight: bold; + margin-bottom: 0px; +} .ideditor h3:last-child, -.ideditor h2:last-child, .ideditor h4:last-child { margin-bottom: 0;} .ideditor h3 { @@ -3287,8 +3619,7 @@ border: 1px solid #ccc; padding: 0px 10px 0px 10px; border-radius: 4px; - -o-text-overflow: ellipsis; - text-overflow: ellipsis; + text-overflow: ellipsis; overflow: auto; } .ideditor input[type=text], @@ -3297,7 +3628,8 @@ .ideditor input[type=url], .ideditor input[type=tel], .ideditor input[type=email], -.ideditor input[type=date] { +.ideditor input[type=date], +.ideditor input[type=color] { /* need this since line-height interpretation may vary by font or browser */ height: 2.585em; } @@ -3330,13 +3662,13 @@ .ideditor input[type="radio"] { width: 14px; height: 14px; - margin-right: 5px; + margin-right: 6px; cursor: pointer; vertical-align: middle; } .ideditor[dir='rtl'] input[type="checkbox"], .ideditor[dir='rtl'] input[type="radio"] { - margin-left: 5px; + margin-left: 6px; margin-right: 0; } @@ -3619,6 +3951,7 @@ .ideditor .icon-annotation { color: #333; + vertical-align: baseline; } @@ -3859,8 +4192,7 @@ .ideditor .header h3 { text-align: center; margin-bottom: 0; - -o-text-overflow: ellipsis; - text-overflow: ellipsis; + text-overflow: ellipsis; overflow: hidden; padding: 0; } @@ -4175,8 +4507,7 @@ text-align: left; padding: 10px; white-space: nowrap; - -o-text-overflow: ellipsis; - text-overflow: ellipsis; + text-overflow: ellipsis; overflow: hidden; -webkit-box-flex: 1; -ms-flex: 1 1 auto; @@ -4318,7 +4649,7 @@ visibility: visible; } .ideditor .preset-icon-container.showing-img *:not(.image-icon) { - visibility: hidden; + display: none; } .ideditor .preset-icon-point-border path { @@ -4327,6 +4658,15 @@ fill: transparent; } +.ideditor .preset-icon-category-border path { + stroke: #999; + stroke-width: 1px; + fill: transparent; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + vector-effect: non-scaling-stroke; +} + .ideditor .preset-icon-line { margin: auto; position: absolute; @@ -4411,7 +4751,7 @@ -ms-transform: scale(0.4); transform: scale(0.4); } -.ideditor .preset-icon.framed.line-geom .icon, +.ideditor .preset-icon.framed.line-geom:not(.category) .icon, .ideditor .preset-icon.framed.route-geom .icon { top: 20%; -webkit-transform: translateY(-30%) scale(0.4); @@ -4428,7 +4768,7 @@ -ms-transform: scale(0.74); transform: scale(0.74); } -.ideditor .preset-icon-iD.framed.line-geom .icon, +.ideditor .preset-icon-iD.framed.line-geom:not(.category) .icon, .ideditor .preset-icon-iD.framed.route-geom .icon { -webkit-transform: translateY(-30%) scale(0.74); -ms-transform: translateY(-30%) scale(0.74); @@ -4490,8 +4830,7 @@ line-height: 1.35em; } .ideditor .preset-list-button .label-inner .namepart { - -o-text-overflow: ellipsis; - text-overflow: ellipsis; + text-overflow: ellipsis; } .ideditor .preset-list-button .label-inner .namepart:nth-child(1) { font-weight: bold; @@ -4647,7 +4986,6 @@ margin-bottom: 10px; width: 100%; -webkit-transition: margin-bottom 200ms; - -o-transition: margin-bottom 200ms; transition: margin-bottom 200ms; } @@ -4678,8 +5016,7 @@ } .ideditor .field-label .label-text { overflow: hidden; - -o-text-overflow: ellipsis; - text-overflow: ellipsis; + text-overflow: ellipsis; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; @@ -4801,6 +5138,38 @@ fill: #333; opacity: .5; } +.ideditor .form-field-button.colour-preview { + border-radius: 0 0 4px 0; +} +.ideditor .form-field-button.colour-preview > div.colour-box { + border: 3px solid #fff; + height: 100%; + border-radius: 8px; + cursor: pointer; + text-align: center; + line-height: 20px; + padding: 1px 0 0 1px; +} +.ideditor .inspector-hover .form-field-button.colour-preview > div.colour-box { + border-color: #ececec; +} +.ideditor .form-field-button.colour-preview:active > div.colour-box, +.ideditor .form-field-button.colour-preview:focus > div.colour-box { + border-color: #f1f1f1; +} +@media (hover: hover) { + .ideditor .form-field-button.colour-preview:hover > div.colour-box { + border-color: #f1f1f1; + } +} +.ideditor input.colour-selector { + visibility: hidden; + position: absolute; +} +.ideditor input.date-selector { + visibility: hidden; + position: absolute; +} /* round corners of first/last child elements */ @@ -4812,10 +5181,10 @@ } -/* Field - Access, Cycleway +/* Field - Access, DirectionalCombo ------------------------------------------------------- */ .ideditor .form-field-input-access, -.ideditor .form-field-input-cycleway { +.ideditor .form-field-input-directionalcombo { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; @@ -4913,6 +5282,17 @@ display: none; } +.ideditor .form-field-input-combo input.raw-value, +.ideditor .form-field-input-semicombo input.raw-value, +.ideditor .form-field-input-multicombo input.raw-value { + font-family: monospace; +} +.ideditor .form-field-input-combo input.known-value, +.ideditor .form-field-input-semicombo input.known-value, +.ideditor .form-field-input-multicombo input.known-value { + color: #7092ff; +} + .ideditor .form-field-input-multicombo ul.chiplist { padding: 5px 8px 5px 8px; background: #fff; @@ -4947,6 +5327,13 @@ background-color: #eff2f7; border: 1px solid #ccd5e3; max-width: 100%; + color: #7092ff; +} +.ideditor .form-field-input-multicombo li.chip.negated span { + text-decoration: line-through; +} +.ideditor .form-field-input-multicombo li.chip input { + width: 1em; } .ideditor[dir='ltr'] .form-field-input-multicombo li.chip { padding: 2px 0px 2px 5px; @@ -4964,13 +5351,17 @@ cursor: -webkit-grabbing; cursor: grabbing; } +.ideditor .form-field-input-multicombo li.chip.raw-value { + font-family: monospace; + color: #333; +} .ideditor .form-field-input-multicombo li.mixed { border-color: #eff2f7; color: #888; font-style: italic; } -.ideditor .form-field-input-multicombo li.chip span { +.ideditor .form-field-input-multicombo li.chip > span { display: block; -webkit-box-flex: 1; -ms-flex: 1 1 auto; @@ -4995,7 +5386,7 @@ .ideditor .form-field-input-multicombo .input-wrap { border: 1px solid #ddd; - width: 100px; + width: 180px; } .ideditor .form-field-input-multicombo input { border: none; @@ -5013,15 +5404,71 @@ width: auto; } +.ideditor .form-field-input-combo .tag-value-icon, +.ideditor .form-field-input-semicombo .input-wrap .tag-value-icon, +.ideditor .form-field-input-multicombo .input-wrap .tag-value-icon { + display: inline-block; + position: relative; + height: 24px; + width: 30px; + margin-right: -30px; + -ms-flex-item-align: center; + align-self: center; + vertical-align: middle; + z-index: 1; + padding-left: 11px; +} +.ideditor[dir='rtl'] .form-field-input-combo .tag-value-icon, +.ideditor[dir='rtl'] .form-field-input-semicombo .input-wrap .tag-value-icon, +.ideditor[dir='rtl'] .form-field-input-multicombo .input-wrap .tag-value-icon { + margin-right: 0; + margin-left: -30px; + padding-left: 0; + padding-right: 11px; +} +.ideditor .tag-value-icon .icon { + width: 21px; + height: 21px; + margin: auto; +} +.ideditor[dir='ltr'] .form-field-input-combo .tag-value-icon + input, +.ideditor[dir='ltr'] .form-field-input-semicombo .input-wrap .tag-value-icon + input, +.ideditor[dir='ltr'] .form-field-input-multicombo .input-wrap .tag-value-icon + input { + padding-left: 40px; +} +.ideditor[dir='rtl'] .form-field-input-combo .tag-value-icon + input, +.ideditor[dir='rtl'] .form-field-input-semicombo .input-wrap .tag-value-icon + input, +.ideditor[dir='rtl'] .form-field-input-multicombo .input-wrap .tag-value-icon + input { + padding-right: 40px; +} +.ideditor .combobox-option .tag-value-icon { + display: inline-block; + width: 28px; +} +.ideditor .form-field-input-multicombo li.chip .tag-value-icon .icon { + margin: 0; + margin-right: 6px; + display: inline-block; + vertical-align: center; +} +.ideditor[dir='rtl'] .form-field-input-multicombo li.chip .tag-value-icon .icon { + margin-right: 6px; + margin-left: 0; +} + /* Field - Text / Numeric ------------------------------------------------------- */ -.ideditor .form-field-input-text > input:only-of-type, +.ideditor .form-field-input-text > input:only-child, .ideditor .form-field-input-tel > input:only-of-type, .ideditor .form-field-input-email > input:only-of-type, -.ideditor .form-field-input-url > input:only-of-type { +.ideditor .form-field-input-url > input:only-child { border-radius: 0 0 4px 4px; } +.ideditor .form-field-input-text > input:not(:only-child), +.ideditor .form-field-input-url > input:not(:only-child) { + border-radius: 0 0 0 4px; +} .ideditor .form-field-input-number > input:only-of-type { border-radius: 0 0 0 4px; } @@ -5087,7 +5534,6 @@ -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; - width: 20px; margin-top: 0; } .ideditor .form-field-input-check > span { @@ -5202,7 +5648,6 @@ -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; - width: 20px; } .ideditor .form-field-input-radio > label > span { -webkit-box-flex: 1; @@ -5210,8 +5655,7 @@ flex: 1 1 auto; overflow: hidden; white-space: nowrap; - -o-text-overflow: ellipsis; - text-overflow: ellipsis; + text-overflow: ellipsis; } /* Hide placeholder for radio buttons if another is active, or not in hover state */ @@ -5226,29 +5670,42 @@ } -/* Field - Maxspeed +/* Field - roadheight and roadspeed ------------------------------------------------------- */ -.ideditor .form-field-input-maxspeed input.maxspeed-number { +.ideditor .form-field-input-roadheight input.roadheight-number, +.ideditor .form-field-input-roadheight input.roadheight-secondary-number, +.ideditor .form-field-input-roadspeed input.roadspeed-number { -ms-flex-preferred-size: 0; flex-basis: 0; } -.ideditor .form-field-input-maxspeed input.maxspeed-unit { +.ideditor .form-field-input-roadheight input.roadheight-unit, +.ideditor .form-field-input-roadheight input.roadheight-secondary-unit { + -webkit-box-flex: 0; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + width: 60px; +} +.ideditor .form-field-input-roadspeed input.roadspeed-unit { -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; width: 80px; } -.ideditor[dir='ltr'] .form-field-input-maxspeed > input:first-of-type { +.ideditor[dir='ltr'] .form-field-input-roadheight > input:first-of-type, +.ideditor[dir='ltr'] .form-field-input-roadspeed > input:first-of-type { border-radius: 0 0 0 4px; } -.ideditor[dir='rtl'] .form-field-input-maxspeed > input:first-of-type { +.ideditor[dir='rtl'] .form-field-input-roadheight > input:first-of-type, +.ideditor[dir='rtl'] .form-field-input-roadspeed > input:first-of-type { border-radius: 0 0 4px 0; } -.ideditor[dir='ltr'] .form-field-input-maxspeed > input:last-of-type { +.ideditor[dir='ltr'] .form-field-input-roadheight > input:last-of-type, +.ideditor[dir='ltr'] .form-field-input-roadspeed > input:last-of-type { border-left: 0; border-radius: 0 0 4px 0; } -.ideditor[dir='rtl'] .form-field-input-maxspeed > input:last-of-type { +.ideditor[dir='rtl'] .form-field-input-roadheight > input:last-of-type, +.ideditor[dir='rtl'] .form-field-input-roadspeed > input:last-of-type { border-right: 0; border-radius: 0 0 0 4px; } @@ -5376,6 +5833,19 @@ .ideditor[dir='rtl'] .addr-row:last-of-type input:last-of-type { border-radius: 0 0 0 4px; } +.ideditor .combobox-address-street-place .combobox-option.address-street, +.ideditor .combobox-address-street-place .combobox-option.address-place { + padding-right: 20px; +} +.ideditor .combobox-address-street-place .combobox-option.address-street::after, +.ideditor .combobox-address-street-place .combobox-option.address-place::after { + position: absolute; + right: 2px; + opacity: 0.4; +} +.ideditor .combobox-address-street-place .combobox-option.address-place::after { + content: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMCIgeT0iMCIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiPg0KICAgIDxwYXRoIGQ9Ik0xMCwzIEM2LjY4NiwzIDQsNS42MTIgNCw4LjgzMyBDNCwxMi4wNTUgMTAsMTcgMTAsMTcgQzEwLDE3IDE2LDEyLjA1NSAxNiw4LjgzMyBDMTYsNS42MTIgMTMuMzE0LDMgMTAsMyB6IE0xMC4xODcsNi41IEMxMS41MTMsNi41IDEyLjU4Nyw3LjU0NSAxMi41ODcsOC44MzMgQzEyLjU4NywxMC4xMjIgMTEuNTEzLDExLjE2NyAxMC4xODcsMTEuMTY3IEM4Ljg2MiwxMS4xNjcgNy43ODcsMTAuMTIyIDcuNzg3LDguODMzIEM3Ljc4Nyw3LjU0NSA4Ljg2Miw2LjUgMTAuMTg3LDYuNSB6IiBmaWxsPSJjdXJyZW50Q29sb3IiLz4NCjwvc3ZnPg==); +} /* Field - Wikipedia @@ -5575,8 +6045,7 @@ display: block; padding: 5px 10px; border-top: 1px solid #ccc; - -o-text-overflow: ellipsis; - text-overflow: ellipsis; + text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } @@ -5624,6 +6093,47 @@ border-right: 5px solid transparent; } +.ideditor .combobox .combobox-option.raw-option { + font-family: monospace; + color: #333; +} + +.ideditor .form-field-input-wrap { + position: relative; +} + +.ideditor .form-field-input-wrap span.length-indicator-wrap { + visibility: hidden; + position: absolute; + top: -5px; + left: 0; + right: 0; +} + +.ideditor .form-field-input-wrap input:focus + span.length-indicator-wrap, +.ideditor .form-field-input-wrap textarea:focus + span.length-indicator-wrap, +.ideditor .form-field-input-wrap input:focus + div.combobox-caret + span.length-indicator-wrap, +.ideditor .form-field-input-wrap textarea:focus + div.combobox-caret + span.length-indicator-wrap { + visibility: visible; +} + +.ideditor .form-field-input-wrap span.length-indicator { + display: block; + left: 0; + right: 0; + height: 4px; + background-color: #7092ff; + border-right-style: solid; + border-right-color: lightgray; +} + +.ideditor .form-field-input-wrap span.length-indicator.limit-reached { + border-right-color: red; +} + +.ideditor .tooltip.max-length-warning { + z-index: 10; +} /* Field Help ------------------------------------------------------- */ @@ -5984,14 +6494,19 @@ } .ideditor .tag-reference-body.expanded { padding-bottom: 10px; - display: inline-block; + padding-left: 10px; + display: block; } -.ideditor .tag-reference-description { - +.ideditor[dir='rtl'] .tag-reference-body.expanded { + padding-left: 0; + padding-right: 10px; } .ideditor .tag-reference-link { display: block; } +.ideditor .tag-reference-link .icon:first-child { + margin-left: 0; +} .ideditor img.tag-reference-wiki-image { float: right; @@ -6418,12 +6933,27 @@ /* Map Controls ------------------------------------------------------- */ +.ideditor .map-controls-wrap { + position: absolute; + left: 0; + right: 0; + height: 100%; + z-index: 100; + display: block; + overflow-x: hidden; + overflow-y: auto; + pointer-events: none; + -ms-overflow-style: none; + scrollbar-width: none; +} +.ideditor .map-controls-wrap::-webkit-scrollbar { + display: none; +} .ideditor .map-controls { right: 0; top: 0; width: 40px; position: absolute; - z-index: 100; bottom: 0; display: -webkit-box; display: -ms-flexbox; @@ -6495,7 +7025,7 @@ /* Fullscreen Button (disabled) ------------------------------------------------------- */ .ideditor div.full-screen { - display: inline-block; + /*display: inline-block;*/ width: 40px; margin-right: 10px; display: none; @@ -6626,6 +7156,8 @@ -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; + -ms-flex-item-align: center; + align-self: center; } .ideditor[dir='rtl'] .list-item-data-browse svg { @@ -6664,12 +7196,11 @@ .ideditor .layer-list label > span { display: block; overflow: hidden; - white-space: nowrap; - -o-text-overflow: ellipsis; - text-overflow: ellipsis; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; + width: calc(100% - 20px); /* Ensures radio input width within flexbox */ +} + +.ideditor .layer-list label span.localized-text { + line-height: 0.95rem; } .ideditor .layer-list input.list-item-input { @@ -6738,13 +7269,13 @@ -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; - padding: 5px 7px; + padding: 2px 3px; } .ideditor .issue-text .issue-message { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; - padding: 5px 0; + padding: 4px 5px; } .ideditor .issue-label .issue-autofix { -webkit-box-flex: 0; @@ -7083,6 +7614,9 @@ .ideditor .issue-container:not(.active) ul.issue-fix-list { display: none; } +.ideditor .issue-container:not(.active) .issue-info { + display: none; +} .ideditor .issue-info { -webkit-box-flex: 1; @@ -7128,12 +7662,13 @@ padding: 10px; } -.ideditor .display-control h5 { +.ideditor .display-options-container label { padding-bottom: 0; padding-top: 10px; } -.ideditor .display-control h5 span { +.ideditor .display-options-container label span { + font-weight: bold; margin: 5px; } @@ -7518,10 +8053,10 @@ border: 1px solid #ccc; } -/* no scrollbars */ +/* scrollbars only when necessary*/ .ideditor .inspector-hover div { overflow-x: visible; - overflow-y: visible; + overflow-y: auto; } /* hide and remove from layout */ @@ -7659,8 +8194,6 @@ -webkit-transition: opacity 200ms linear; - -o-transition: opacity 200ms linear; - transition: opacity 200ms linear; } @@ -8024,14 +8557,12 @@ .ideditor .footer-show { bottom: 0px; -webkit-transition: bottom 75ms linear; - -o-transition: bottom 75ms linear; transition: bottom 75ms linear; } .ideditor .footer-hide { bottom: -100%; -webkit-transition: bottom 75ms linear; - -o-transition: bottom 75ms linear; transition: bottom 75ms linear; } @@ -8053,9 +8584,12 @@ -ms-flex-align: end; align-items: flex-end; z-index: 0; + pointer-events: none; } -.ideditor .attribution-wrap * { pointer-events: all; } +.ideditor .attribution-wrap > * { + pointer-events: auto; +} .ideditor .attribution-wrap .base-layer-attribution, .ideditor .attribution-wrap .overlay-layer-attribution { @@ -8309,6 +8843,11 @@ } } +.ideditor .local-storage-full { + display: block; + width: 100%; +} + /* Notification Badges ------------------------------------------------------- */ /* For an icon (e.g. new version) */ @@ -8543,6 +9082,9 @@ .ideditor .save-success td.community-detail { padding-bottom: 15px; } +.ideditor .save-success .community-table h3 { + margin: 0; +} .ideditor .summary-view-on-osm, .ideditor .community-name { @@ -8601,6 +9143,14 @@ color: #7092ff; } +.ideditor .modal-splash .section-preferences-third-party { + margin-top: 20px; +} + +.ideditor .modal-splash .section-preferences-third-party .privacy-link { + display: none; +} + /* Shortcuts Modal ------------------------------------------------------- */ @@ -8752,13 +9302,16 @@ display: none; } -.ideditor .field-warning, .ideditor .changeset-info, .ideditor .request-review, .ideditor .commit-info { margin-bottom: 10px; } +.ideditor .field-warning { + margin-top: 10px; +} + .ideditor .request-review label { cursor: pointer; } @@ -9021,22 +9574,26 @@ /* dark tooltips for sidebar / panels */ .ideditor .tooltip.dark.top .popover-arrow, .ideditor .map-pane .tooltip.top .popover-arrow, -.ideditor .sidebar .tooltip.top .popover-arrow { +.ideditor .sidebar .tooltip.top .popover-arrow, +.ideditor .modal .tooltip.top .popover-arrow { border-top-color: #000; } .ideditor .tooltip.dark.bottom .popover-arrow, .ideditor .map-pane .tooltip.bottom .popover-arrow, -.ideditor .sidebar .tooltip.bottom .popover-arrow { +.ideditor .sidebar .tooltip.bottom .popover-arrow, +.ideditor .modal .tooltip.bottom .popover-arrow { border-bottom-color: #000; } .ideditor .tooltip.dark.left .popover-arrow, .ideditor .map-pane .tooltip.left .popover-arrow, -.ideditor .sidebar .tooltip.left .popover-arrow { +.ideditor .sidebar .tooltip.left .popover-arrow, +.ideditor .modal .tooltip.left .popover-arrow { border-left-color: #000; } .ideditor .tooltip.dark.right .popover-arrow, .ideditor .map-pane .tooltip.right .popover-arrow, -.ideditor .sidebar .tooltip.right .popover-arrow { +.ideditor .sidebar .tooltip.right .popover-arrow, +.ideditor .modal .tooltip.right .popover-arrow { border-right-color: #000; } .ideditor .tooltip.dark .popover-inner, @@ -9047,7 +9604,8 @@ .ideditor .map-pane .keyhint-wrap, .ideditor .sidebar .popover-inner, .ideditor .sidebar .tooltip-heading, -.ideditor .sidebar .keyhint-wrap { +.ideditor .sidebar .keyhint-wrap, +.ideditor .modal .popover-inner { background: #000; color: #ccc; } @@ -9153,10 +9711,9 @@ /* Scrollbars ----------------------------------------------------- */ .ideditor ::-webkit-scrollbar { - height: 20px; + height: 10px; overflow: visible; width: 10px; - background: #fff; border-left: 1px solid #DDD; } @@ -9181,6 +9738,9 @@ background-color: rgba(0,0,0,.05); } } +body { + scrollbar-width: 10px; +} /* Intro walkthrough