X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/ddac660f3b7cc09a7718f20d1b857b0794d5a4ef..50fc6f1ed11213bfa672e86daab5cb18e7bb200a:/vendor/assets/iD/iD.css.erb diff --git a/vendor/assets/iD/iD.css.erb b/vendor/assets/iD/iD.css.erb index 4807a16ec..e5243c4e1 100644 --- a/vendor/assets/iD/iD.css.erb +++ b/vendor/assets/iD/iD.css.erb @@ -53,13 +53,17 @@ .ideditor button, .ideditor input { - line-height: normal; + line-height: inherit; + letter-spacing: inherit; } /* Hide default number spinner controls */ .ideditor input[type="number"]::-webkit-inner-spin-button, .ideditor input[type="number"]::-webkit-outer-spin-button { -display: none; + display: none; +} +.ideditor input[type=number] { + -moz-appearance: textfield; } /* @@ -624,7 +628,11 @@ display: none; .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, @@ -640,7 +648,11 @@ display: none; .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); } @@ -658,12 +670,14 @@ display: none; .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); @@ -838,14 +852,17 @@ display: none; /* 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 { @@ -1156,6 +1173,12 @@ display: none; .ideditor path.line.stroke.tag-highway-road { stroke-width: 5; } +.ideditor path.line.casing.tag-highway-service.tag-service-driveway { + stroke-width: 6.25; +} +.ideditor path.line.stroke.tag-highway-service.tag-service-driveway { + stroke-width: 4.25; +} .ideditor path.line.shadow.tag-highway-path, .ideditor path.line.shadow.tag-highway-footway, @@ -1203,6 +1226,12 @@ display: none; .ideditor .low-zoom path.line.stroke.tag-highway-road { stroke-width: 3; } +.ideditor .low-zoom path.line.casing.tag-highway-service.tag-service-driveway { + stroke-width: 4.25; +} +.ideditor .low-zoom path.line.stroke.tag-highway-service.tag-service-driveway { + stroke-width: 2.25; +} .ideditor .low-zoom path.line.shadow.tag-highway-path, .ideditor .low-zoom path.line.shadow.tag-highway-footway, @@ -1327,6 +1356,16 @@ display: none; stroke: #666; } +.ideditor path.line.stroke.tag-highway-service.tag-service-parking_aisle { + stroke: #cccac7; +} +.ideditor path.line.stroke.tag-highway-service.tag-service-driveway { + stroke: #fff6e4; +} +.ideditor path.line.stroke.tag-highway-service.tag-service-emergency_access { + stroke: #ddb2aa; +} + /* unmaintained track roads */ .ideditor path.line.stroke.tag-highway-track, .ideditor path.line.stroke.tag-track { @@ -1359,6 +1398,7 @@ display: none; .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; } @@ -1516,14 +1556,12 @@ display: none; .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; } @@ -1563,10 +1601,12 @@ display: none; } .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, @@ -1582,15 +1622,6 @@ display: none; 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 { @@ -1646,7 +1677,7 @@ display: none; .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; @@ -1656,16 +1687,18 @@ display: none; } .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; } @@ -1678,7 +1711,6 @@ display: none; stroke: #eee; } - .ideditor .preset-icon .icon.tag-railway.tag-status { color: #999; } @@ -1695,7 +1727,6 @@ display: none; stroke: #808080; } - .ideditor path.line.casing.tag-railway-subway { stroke: #222; } @@ -1867,6 +1898,7 @@ display: none; stroke-width: 16; } .ideditor path.line.stroke.tag-route-ferry { + stroke: #58a9ed; stroke-width: 3; stroke-linecap: butt; stroke-dasharray: 12,8; @@ -1879,9 +1911,6 @@ display: none; 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; } @@ -2039,15 +2068,13 @@ display: none; .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; } @@ -2226,6 +2253,62 @@ display: none; 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 { @@ -2373,9 +2456,8 @@ display: none; /* photo viewer div */ .ideditor .photoviewer { position: relative; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; margin-bottom: 10px; width: 330px; height: 250px; @@ -2610,14 +2692,14 @@ display: none; } -/* 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; } @@ -2628,20 +2710,16 @@ display: none; } .ideditor .ms-wrapper .photo-attribution .attribution-row { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: justify; - -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; - -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 0 5px; @@ -2694,27 +2772,35 @@ display: none; border-radius: 4px; top: -25px; } -.ideditor #ideditor-mly .domRenderer .Attribution { - /* we will roll our own to avoid async update issues like #4526 */ - display: none; -} -.ideditor .mly-wrapper .photo-attribution a:active { - color: #35af6d; +.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; } -@media (hover: hover) { - .ideditor .mly-wrapper .photo-attribution a:hover { - color: #35af6d; - } + +.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-js-dom { - z-index: 9; +.ideditor .mly-wrapper .mapillary-attribution-container .mapillary-attribution-username { + display: none; } +.ideditor .mly-wrapper .mapillary-attribution-container .mapillary-attribution-date { + margin-right: 6px; +} -/* OpenStreetCam viewer */ -.ideditor .osc-wrapper { +/* KartaView viewer */ +.ideditor .kartaview-wrapper { position: relative; background-color: #000; background-image: url(<%= asset_path("iD/img/loader-black.gif") %>); @@ -2722,16 +2808,16 @@ display: none; background-repeat: no-repeat; } -.ideditor .osc-wrapper .photo-attribution a:active { +.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; @@ -2747,11 +2833,13 @@ display: none; top: 10px; width: 100%; z-index: 10; + pointer-events: none; } .ideditor .photo-controls { display: inline-block; z-index: 10; + pointer-events: initial; } .ideditor .photo-controls button, @@ -2830,15 +2918,12 @@ display: none; } .ideditor .qa-header-icon { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; - -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; - -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } @@ -2987,18 +3072,19 @@ display: none; dominant-baseline: middle; } .ideditor .layer-mapdata text.label { - fill: #ff26d4; + fill: #ddd; } .ideditor .layer-mapdata text.label.hover, .ideditor .layer-mapdata text.label.selected { - fill: #f6634f; + fill: #fff; } .ideditor .layer-mapdata text.label-halo { opacity: 0.7; stroke: #000; stroke-width: 5px; stroke-miterlimit: 1; -}/* Fill Styles */ +} +/* Fill Styles */ .ideditor .low-zoom.fill-wireframe path.stroke, .ideditor .fill-wireframe path.stroke { @@ -3053,6 +3139,59 @@ display: none; .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 */ @@ -3091,6 +3230,13 @@ display: none; .ideditor .main-content { position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; overflow: hidden; height: 100%; -ms-touch-action: none; @@ -3145,9 +3291,14 @@ display: none; 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 { @@ -3162,7 +3313,15 @@ display: none; padding-bottom: 10px; } -.ideditor :focus { +.ideditor button:focus, +.ideditor textarea:focus, +.ideditor input[type=text]:focus, +.ideditor input[type=search]:focus, +.ideditor input[type=number]:focus, +.ideditor input[type=url]:focus, +.ideditor input[type=tel]:focus, +.ideditor input[type=email]:focus, +.ideditor input[type=date]:focus { outline-color: transparent; outline-style: none; } @@ -3211,6 +3370,9 @@ display: none; .ideditor a:active { color: #7092ff; } +.ideditor a:focus { + color: #597be7; +} @media (hover: hover) { .ideditor a:hover { color: #597be7; @@ -3221,8 +3383,8 @@ display: none; text-align: center; padding: 3px 5px; font-size: 11px; - line-height: 12px; - min-width: 12px; + line-height: 1.3; + min-width: 0.9em; vertical-align: baseline; background-color: #fcfcfc; border: solid 1px #ccc; @@ -3241,39 +3403,43 @@ display: none; /* Forms ------------------------------------------------------- */ -.ideditor textarea { - resize: vertical; - font:normal 12px/20px "-apple-system", BlinkMacSystemFont, - "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", - "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial", - sans-serif; -} - .ideditor textarea, .ideditor input[type=text], .ideditor input[type=search], .ideditor input[type=number], .ideditor input[type=url], .ideditor input[type=tel], -.ideditor input[type=email] { +.ideditor input[type=email], +.ideditor input[type=date] { background-color: #fff; color: #333; border: 1px solid #ccc; - padding: 5px 20px 5px 10px; - height: 30px; + padding: 0px 10px 0px 10px; border-radius: 4px; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: auto; } -.ideditor[dir='rtl'] textarea, -.ideditor[dir='rtl'] input[type=text], -.ideditor[dir='rtl'] input[type=search], -.ideditor[dir='rtl'] input[type=number], -.ideditor[dir='rtl'] input[type=url], -.ideditor[dir='rtl'] input[type=tel], -.ideditor[dir='rtl'] input[type=email] { - padding: 5px 10px 5px 20px; +.ideditor input[type=text], +.ideditor input[type=search], +.ideditor input[type=number], +.ideditor input[type=url], +.ideditor input[type=tel], +.ideditor input[type=email], +.ideditor input[type=date], +.ideditor input[type=color] { + /* need this since line-height interpretation may vary by font or browser */ + height: 2.585em; +} +.ideditor textarea { + min-height: 2em; + padding-top: 5px; + padding-bottom: 5px; + resize: vertical; + font:normal 12px/20px "-apple-system", BlinkMacSystemFont, + "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", + "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial", + sans-serif; } .ideditor textarea:active, @@ -3292,17 +3458,15 @@ display: none; .ideditor input[type="checkbox"], .ideditor input[type="radio"] { - float: left; width: 14px; height: 14px; - margin-right: 5px; - margin-top: 3px; + margin-right: 6px; cursor: pointer; + vertical-align: middle; } .ideditor[dir='rtl'] input[type="checkbox"], .ideditor[dir='rtl'] input[type="radio"] { - float: right; - margin-left: 5px; + margin-left: 6px; margin-right: 0; } @@ -3327,6 +3491,15 @@ display: none; font-style: italic; } +/* keytraps need to be invisible yet not be display:none or visibility:hidden */ +.ideditor .keytrap { + width: 0; + height: 0; + padding: 0; + margin: 0; + border: 0; +} + /* tables */ .ideditor table { background-color: #fff; @@ -3408,19 +3581,17 @@ display: none; ------------------------------------------------------- */ .ideditor button { text-align: center; - line-height: 20px; border: 0; background: #fff; - font-weight: bold; color: #333; font-size: 12px; display: inline-block; - height: 40px; border-radius: 4px; } .ideditor button:focus, -.ideditor button:active { +.ideditor button:active, +.ideditor button.hover { background-color: #ececec; } @media (hover: hover) { @@ -3468,6 +3639,7 @@ display: none; .ideditor button.action { background: #7092ff; color: #fff; + font-weight: bold; } .ideditor button.action:focus, .ideditor button.action:active { @@ -3475,6 +3647,7 @@ display: none; } .ideditor button.secondary-action { background: #ececec; + font-weight: bold; } .ideditor button.secondary-action:focus, .ideditor button.secondary-action:active { @@ -3488,6 +3661,11 @@ display: none; cursor: not-allowed; } +.ideditor button.action, +.ideditor button.secondary-action { + padding: 10px 5px; +} + @media (hover: hover) { .ideditor button.action:hover { background: #597be7; @@ -3507,7 +3685,7 @@ display: none; /* Icons ------------------------------------------------------- */ .ideditor .icon { - vertical-align: top; + vertical-align: middle; width: 20px; height: 20px; } @@ -3528,8 +3706,9 @@ display: none; .ideditor .icon.inline { vertical-align: text-top; - width: 14px; - height: 14px; + display: inline-block; + width: 1.17em; + height: 1.17em; margin: 0px 3px; } @@ -3570,30 +3749,25 @@ display: none; .ideditor .icon-annotation { color: #333; + vertical-align: baseline; } /* Toolbar / Persistent UI Elements ------------------------------------------------------- */ .ideditor .top-toolbar-wrap { - position: absolute; - left: 0; - top: 0; - right: 0; + position: relative; z-index: 101; } .ideditor .top-toolbar { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: justify; - -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; padding: 10px 0 0 0; @@ -3611,39 +3785,31 @@ display: none; } .ideditor .top-toolbar .toolbar-item { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; - -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-box-orient: vertical; -webkit-box-direction: normal; - -webkit-flex-flow: column wrap; -ms-flex-flow: column wrap; flex-flow: column wrap; -webkit-box-pack: center; - -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .ideditor .top-toolbar .toolbar-item .item-content { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; - -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: center; - -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; height: 40px; @@ -3675,19 +3841,16 @@ display: none; .ideditor .top-toolbar .toolbar-item.spacer { width: 100%; -webkit-box-flex: 2; - -webkit-flex-grow: 2; -ms-flex-positive: 2; flex-grow: 2; } .ideditor .top-toolbar .toolbar-item:first-child { -webkit-box-pack: start; - -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } .ideditor .top-toolbar .toolbar-item:last-child { -webkit-box-pack: end; - -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; } @@ -3696,35 +3859,30 @@ display: none; } .ideditor button.bar-button { -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; - -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 0 10px; min-width: 30px; white-space: nowrap; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; + font-weight: bold; } .ideditor button.bar-button .icon { -webkit-box-flex: 0; - -webkit-flex: 0 0 20px; -ms-flex: 0 0 20px; flex: 0 0 20px; } .ideditor button.bar-button .label { -webkit-box-flex: 0; - -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; padding: 0 5px; @@ -3747,7 +3905,7 @@ display: none; text-align: center; } -.ideditor .help-pane svg.icon.pre-text.add-note, +.ideditor .help-pane svg.icon.inline.add-note, .ideditor button.add-note svg.icon { height: 15px; width: 15px; @@ -3764,7 +3922,7 @@ display: none; margin-left: 4px; margin-right: unset; } -.ideditor .help-pane svg.icon.pre-text.add-note { +.ideditor .help-pane svg.icon.inline.add-note { margin-left: 3px; margin-right: 3px; } @@ -3773,11 +3931,13 @@ display: none; opacity: .5; position: absolute; right: 4px; - bottom: 26px; -} -.ideditor .spinner img { + bottom: 4px; height: 20px; width: 20px; +} +.ideditor .spinner img { + height: 100%; + width: 100%; background: transparent; border-radius: 100%; } @@ -3811,20 +3971,20 @@ display: none; ------------------------------------------------------- */ .ideditor .header { border-bottom: 1px solid #ccc; - height: 60px; + padding: 20px 40px; position: relative; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; - -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; - -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; } .ideditor .header h3 { @@ -3899,81 +4059,35 @@ display: none; border-top: 1px solid #ccc; background-color: #f6f6f6; width: 100%; - height: 30px; + height: 2.5em; z-index: 1; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; -webkit-box-pack: justify; - -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; - -webkit-align-items: center; -ms-flex-align: center; align-items: center; list-style: none; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; } .ideditor .footer > a { -webkit-box-pack: center; - -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } -.ideditor .header-container { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; -} - -.ideditor .header-block { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; -} -.ideditor .header-block-outer { - width: 20%; -} - -.ideditor .header-block-close { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: end; - -webkit-justify-content: flex-end; - -ms-flex-pack: end; - justify-content: flex-end; - height: 100%; -} - /* Hide/Toggle collapsible sections (aka Disclosure) ------------------------------------------------------- */ .ideditor .hide-toggle .icon.pre-text { - vertical-align: text-top; + vertical-align: middle; width: 16px; height: 16px; - margin-left: -3px; -} -.ideditor[dir='rtl'] .hide-toggle .icon.pre-text { - margin-left: 0; - margin-right: -3px; + margin-top: -3px; } .ideditor a:visited.hide-toggle, @@ -3981,7 +4095,7 @@ display: none; display: inline-block; font-size: 14px; font-weight: bold; - padding-bottom: 5px; + margin-bottom: 5px; } @@ -4021,6 +4135,9 @@ display: none; left: -6px; } +.ideditor .sidebar.collapsed > *:not(.sidebar-resizer) { + display: none; +} .ideditor .sidebar.collapsed .sidebar-resizer { /* make target wider to avoid the user accidentally resizing window */ width: 10px; @@ -4036,14 +4153,20 @@ display: none; left: 0; bottom: 0; right: 0; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; } .ideditor .sidebar-component .body { width: 100%; + height: 100%; overflow: auto; - top: 60px; - bottom: 0; - position: absolute; + position: relative; } .ideditor .panewrap { @@ -4057,7 +4180,14 @@ display: none; position: absolute; width: 50%; top: 0; - bottom: 30px; + bottom: 2.5em; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; } .ideditor .pane:first-child { @@ -4067,6 +4197,16 @@ display: none; .ideditor .pane:last-child { right: 0; } +.ideditor .feature-list-pane { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + height: 100%; +} .ideditor .inspector-wrap { width: 100%; @@ -4082,18 +4222,11 @@ display: none; .ideditor .inspector-body { overflow-y: scroll; overflow-x: hidden; - position: absolute; - right: 0; - left: 0; - bottom: 0; -} - -.ideditor .feature-list-pane .inspector-body, -.ideditor .preset-list-pane .inspector-body { - top: 120px; -} -.ideditor .entity-editor-pane .inspector-body { - top: 60px; + position: relative; + height: 100%; + -webkit-box-flex: 1; + -ms-flex: 1 1 100%; + flex: 1 1 100%; } .ideditor .entity-editor { padding: 20px; @@ -4103,11 +4236,18 @@ display: none; margin-bottom: 150px; } +.ideditor .sidebar .search-header { + position: relative; + overflow: hidden; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; +} .ideditor .sidebar .search-header .icon { - display: block; + display: inline-block; position: absolute; left: 10px; - top: 80px; + height: 100%; pointer-events: none; } .ideditor[dir='rtl'] .sidebar .search-header .icon { @@ -4116,11 +4256,9 @@ display: none; } .ideditor .sidebar .search-header input { - position: absolute; - top: 60px; - height: 60px; width: 100%; - padding: 5px 10px; + padding: 0 10px; + height: 3em; border-radius: 0; border-width: 0; border-bottom-width: 1px; @@ -4147,62 +4285,31 @@ display: none; border-bottom: 1px solid #ccc; border-radius: 0; } +.ideditor .no-results-item { + padding: 10px; + font-weight: bold; +} .ideditor .geocode-item { width: 100%; max-width: 200px; - background-color: #ccc; margin: 30px auto; - padding: 5px; - height: auto; min-height: 40px; } -.ideditor[dir='rtl'] .geocode-item { - left: -25%; -} -.ideditor .geocode-item:active { - background-color: #aaa; -} -@media (hover: hover) { - .ideditor .geocode-item:hover { - background-color: #aaa; - } -} - .ideditor .feature-list-item { - background-color: #fff; - font-weight: bold; - height: 40px; - line-height: 20px; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; } -.ideditor .feature-list-item:active { - background-color: #ececec; -} -@media (hover: hover) { - .ideditor .feature-list-item:hover { - background-color: #ececec; - } -} -.ideditor .feature-list-item.hover { - background-color: #ececec; -} -.ideditor .feature-list-item button { - background: transparent; -} .ideditor .feature-list-item .label { text-align: left; - padding: 10px 10px; + padding: 10px; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; } @@ -4222,8 +4329,10 @@ display: none; } .ideditor .feature-list-item .entity-type { color: #7092ff; + font-weight: bold; } -.ideditor .feature-list-item:active .entity-type { +.ideditor .feature-list-item:active .entity-type, +.ideditor .feature-list-item:focus .entity-type { color: #597be7; } @media (hover: hover) { @@ -4232,7 +4341,6 @@ display: none; } } .ideditor .feature-list-item .entity-name { - font-weight: normal; color: #666; padding-left: 10px; } @@ -4249,6 +4357,22 @@ display: none; .ideditor .section-selected-features .feature-list-item:last-child { border: none; } +.ideditor[dir='ltr'] .section-selected-features .feature-list-item > button:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.ideditor[dir='rtl'] .section-selected-features .feature-list-item > button:not(:last-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.ideditor[dir='ltr'] .section-selected-features .feature-list-item > button:not(:last-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.ideditor[dir='rtl'] .section-selected-features .feature-list-item > button:not(:last-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} /* Preset List and Icons ------------------------------------------------------- */ @@ -4263,9 +4387,8 @@ display: none; } .ideditor .preset-list-button-wrap { - height: 62px; + min-height: 62px; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; border: 1px solid #ccc; @@ -4277,9 +4400,11 @@ display: none; height: 100%; position: relative; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } .ideditor .preset-list.filtered .preset-list-item:first-child .preset-list-button { @@ -4292,19 +4417,15 @@ display: none; height: 60px; text-align: center; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; - -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; - -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } @@ -4312,7 +4433,6 @@ display: none; width: 40px; height: 40px; -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } @@ -4329,7 +4449,7 @@ display: none; visibility: visible; } .ideditor .preset-icon-container.showing-img *:not(.image-icon) { - visibility: hidden; + display: none; } .ideditor .preset-icon-point-border path { @@ -4338,6 +4458,15 @@ display: none; 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; @@ -4422,7 +4551,7 @@ display: none; -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); @@ -4439,7 +4568,7 @@ display: none; -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); @@ -4453,29 +4582,24 @@ display: none; .ideditor .preset-list-button .label { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-align: center; - -webkit-align-items: center; -ms-flex-align: center; align-items: center; - background-color: #f6f6f6; + background: #f6f6f6; text-align: left; padding: 5px 10px; border-left: 1px solid rgba(0, 0, 0, .1); -webkit-box-flex: 1; - -webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; - -webkit-align-self: stretch; - -ms-flex-item-align: stretch; - align-self: stretch; + -ms-flex-item-align: stretch; + align-self: stretch; } .ideditor[dir='rtl'] .preset-list-button .label { text-align: right; @@ -4509,8 +4633,8 @@ display: none; -o-text-overflow: ellipsis; text-overflow: ellipsis; } -.ideditor .preset-list-button .label-inner .namepart:nth-child(2) { - font-weight: normal; +.ideditor .preset-list-button .label-inner .namepart:nth-child(1) { + font-weight: bold; } .ideditor .preset-list-button:focus .label, @@ -4526,12 +4650,12 @@ display: none; } .ideditor .preset-list-button-wrap button.tag-reference-button { - height: 100%; width: 32px; -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; +} +.ideditor .preset-list-button-wrap button.tag-reference-button:not(:hover):not(:active):not(:focus) { background: #f6f6f6; } .ideditor[dir='ltr'] .preset-list-button-wrap button.tag-reference-button { @@ -4546,17 +4670,14 @@ display: none; .ideditor[dir='rtl'] .preset-list-button-wrap:not(.category) button:last-child { border-radius: 4px 0 0 4px; } -.ideditor .preset-list-button-wrap button.tag-reference-button:active { - background: #f1f1f1; -} -@media (hover: hover) { - .ideditor .preset-list-button-wrap button.tag-reference-button:hover { - background: #f1f1f1; - } -} .ideditor .preset-list-button-wrap button.tag-reference-button .icon { opacity: .5; } +.ideditor .preset-list-button-wrap .accessory-buttons { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} .ideditor .current .preset-list-button, @@ -4606,16 +4727,13 @@ display: none; ------------------------------------------------------- */ .ideditor .quick-links { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: end; - -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; padding: 5px 0 0 0; @@ -4660,12 +4778,10 @@ display: none; .ideditor .form-field { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; margin-bottom: 10px; @@ -4683,19 +4799,15 @@ display: none; /* A `label` element that wraps the top section */ .ideditor .field-label { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-flex: 1; - -webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; - height: 30px; position: relative; font-weight: bold; color: #333; @@ -4709,13 +4821,12 @@ display: none; -o-text-overflow: ellipsis; text-overflow: ellipsis; -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; - padding: 5px 0 5px 10px; + padding: 5px 0 4px 10px; } .ideditor[dir='rtl'] .field-label .label-text { - padding: 5px 10px 5px 0; + padding: 5px 10px 4px 0; } .ideditor .field-label .label-text span { white-space: nowrap; @@ -4732,29 +4843,22 @@ display: none; .ideditor .field-label button { -webkit-box-flex: 0; - -webkit-flex: 0 0 32px; - -ms-flex: 0 0 32px; - flex: 0 0 32px; + -ms-flex: 0 0 auto; + flex: 0 0 auto; border-left: 1px solid #ccc; width: 32px; - height: 100%; border-radius: 0; - background: #f6f6f6; } .ideditor[dir='rtl'] .field-label button { border-left: none; border-right: 1px solid #ccc; } -.ideditor .field-label button:active { - background: #f1f1f1; -} -@media (hover: hover) { - .ideditor .field-label button:hover { - background: #f1f1f1; - } +.ideditor .field-label button:not(:hover):not(:active):not(:focus) { + background: none; } .ideditor .field-label .icon { opacity: .5; + } .ideditor .field-label .modified-icon, @@ -4771,20 +4875,16 @@ display: none; /* A `div` element that wraps the bottom section */ .ideditor .form-field-input-wrap { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; width: 100%; -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; - min-height: 30px; border-top: 0; border-radius: 0 0 4px 4px; } @@ -4798,29 +4898,23 @@ display: none; .ideditor .form-field-input-wrap > textarea, .ideditor .form-field-input-wrap > ul.chiplist { -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; - min-height: 30px; border: 1px solid #ccc; border-top: 0; border-radius: 0; - overflow: hidden; position: relative; } .ideditor .form-field-input-wrap > textarea { height: 65px; border-radius: 0 0 4px 4px; - overflow: auto; } /* Buttons inside fields */ .ideditor .form-field-button { -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; - height: 30px; width: 32px; position: relative; background-color: #fff; @@ -4834,7 +4928,8 @@ display: none; border-left-width: 1px; border-right-width: 0; } -.ideditor .form-field-button:active { +.ideditor .form-field-button:active, +.ideditor .form-field-button:focus { background-color: #f1f1f1; } @media (hover: hover) { @@ -4846,6 +4941,34 @@ display: none; 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 .form-field-button.colour-selector { + visibility: hidden; + position: absolute; +} /* round corners of first/last child elements */ @@ -4857,21 +4980,18 @@ display: none; } -/* 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; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; } @@ -4880,7 +5000,6 @@ display: none; ------------------------------------------------------- */ .ideditor .form-field ul.rows { -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; border: 1px solid #ccc; @@ -4897,19 +5016,16 @@ display: none; } .ideditor .form-field ul.rows li { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .ideditor .form-field ul.rows li.labeled-input > span, .ideditor .form-field ul.rows li.labeled-input > div { -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; width: 100%; @@ -4953,6 +5069,7 @@ display: none; ------------------------------------------------------- */ .ideditor .form-field-input-combo > input:only-of-type { border-radius: 0 0 4px 4px; + width: 100%; } .ideditor .form-field-input-combo.empty-combobox input, .ideditor .form-field-input-multicombo .empty-combobox input { @@ -4964,6 +5081,13 @@ display: none; display: none; } +.ideditor .form-field-input-combo input.raw-value { + font-family: monospace; +} +.ideditor .form-field-input-combo input.known-value { + color: #7092ff; +} + .ideditor .form-field-input-multicombo ul.chiplist { padding: 5px 8px 5px 8px; background: #fff; @@ -4974,16 +5098,13 @@ display: none; .ideditor .form-field-input-multicombo li { display: -webkit-inline-box; - display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; - -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-bottom: 3px; @@ -5000,8 +5121,8 @@ display: none; .ideditor .form-field-input-multicombo li.chip { background-color: #eff2f7; border: 1px solid #ccd5e3; - line-height: 25px; max-width: 100%; + color: #7092ff; } .ideditor[dir='ltr'] .form-field-input-multicombo li.chip { padding: 2px 0px 2px 5px; @@ -5019,6 +5140,10 @@ display: none; 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; @@ -5028,7 +5153,6 @@ display: none; .ideditor .form-field-input-multicombo li.chip span { display: block; -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; overflow: hidden; @@ -5045,20 +5169,17 @@ display: none; display: block; text-align: center; -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } .ideditor .form-field-input-multicombo .input-wrap { border: 1px solid #ddd; - width: 100px; - height: 31px; + width: 180px; } .ideditor .form-field-input-multicombo input { border: none; width: 100%; - height: 100%; } .ideditor .form-field-input-multicombo input:focus { @@ -5072,15 +5193,53 @@ display: none; width: auto; } +.ideditor .form-field-input-combo .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 { + margin-right: 0; + margin-left: -30px; + padding-left: 0; + padding-right: 11px; +} +.ideditor .tag-value-icon .icon { + width: 11px; + height: 17px; + margin: auto; +} +.ideditor[dir='ltr'] .form-field-input-combo .tag-value-icon + input { + padding-left: 30px; +} +.ideditor[dir='rtl'] .form-field-input-combo .tag-value-icon + input { + padding-right: 30px; +} +.ideditor .combobox-option .tag-value-icon { + display: inline-block; + width: 18px; +} + /* 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; } @@ -5130,11 +5289,9 @@ display: none; ------------------------------------------------------- */ .ideditor .form-field-input-check { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; - -webkit-align-items: center; -ms-flex-align: center; align-items: center; background: #fff; @@ -5146,42 +5303,48 @@ display: none; } .ideditor .form-field-input-check > input[type="checkbox"] { -webkit-box-flex: 0; - -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; - min-height: 20px; - width: 20px; margin-top: 0; } .ideditor .form-field-input-check > span { -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; } .ideditor .form-field-input-check > span.mixed { font-style: italic; } -.ideditor .form-field-input-check > .reverser.button { +.ideditor .form-field-input-check > .reverser { -webkit-box-flex: 0; - -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; background-color: #eff2f7; border: 1px solid #ccd5e3; border-radius: 2px; padding: 0px 8px; + color: inherit; } -.ideditor[dir='ltr'] .form-field-input-check > .reverser.button { +.ideditor[dir='ltr'] .form-field-input-check > .reverser { padding-right: 2px; } -.ideditor[dir='rtl'] .form-field-input-check > .reverser.button { +.ideditor[dir='rtl'] .form-field-input-check > .reverser { padding-left: 2px; } -.ideditor .form-field-input-check > .reverser.button.hide { +.ideditor .form-field-input-check > .reverser:active, +.ideditor .form-field-input-check > .reverser:focus { + background: #e3e8ef; +} +@media (hover: hover) { + .ideditor .form-field-input-check > .reverser:hover { + background: #e3e8ef; + } +} +.ideditor .form-field-input-check > .reverser.hide { display: none; } -.ideditor .form-field-input-check:active { +.ideditor .form-field-input-check:active, +.ideditor .form-field-input-check:focus { background: #f1f1f1; } @media (hover: hover) { @@ -5201,36 +5364,32 @@ display: none; ------------------------------------------------------- */ .ideditor .form-field-input-radio { -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; } .ideditor .form-field-input-radio > label { -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; width: 100%; padding: 5px 10px; - height: 30px; background-color: #fff; color: #7092ff; cursor: pointer; @@ -5241,7 +5400,8 @@ display: none; .ideditor .form-field-input-radio > label:last-child { border-radius: 0 0 4px 4px; } -.ideditor .form-field-input-radio > label:active { +.ideditor .form-field-input-radio > label:active, +.ideditor .form-field-input-radio > label:focus { background-color: #ececec; } @media (hover: hover) { @@ -5257,14 +5417,11 @@ display: none; } .ideditor .form-field-input-radio > label > input[type="radio"] { -webkit-box-flex: 0; - -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; - width: 20px; } .ideditor .form-field-input-radio > label > span { -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; overflow: hidden; @@ -5279,37 +5436,48 @@ display: none; padding: 0; opacity: 0; width: 0; - line-height: 0; + height: 0; display: block; overflow: hidden; } -/* Field - Maxspeed +/* Field - roadheight and roadspeed ------------------------------------------------------- */ -.ideditor .form-field-input-maxspeed input.maxspeed-number { - -webkit-flex-basis: 0; - -ms-flex-preferred-size: 0; - flex-basis: 0; +.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-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-maxspeed input.maxspeed-unit { +.ideditor .form-field-input-roadspeed input.roadspeed-unit { -webkit-box-flex: 0; - -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; width: 80px; } -.ideditor .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 .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; } @@ -5342,9 +5510,8 @@ display: none; /* nested subfields for name in different languages */ .ideditor .localized-multilingual { padding: 0 10px; - -webkit-flex-basis: 100%; - -ms-flex-preferred-size: 100%; - flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; } .ideditor .localized-multilingual .entry { position: relative; @@ -5381,16 +5548,13 @@ display: none; ------------------------------------------------------- */ .ideditor .form-field-input-address { -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; border: 1px solid #ccc; @@ -5399,20 +5563,16 @@ display: none; .ideditor .addr-row { -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; - min-height: 30px; } .ideditor .addr-row > input { -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; border-radius: 0; @@ -5451,16 +5611,13 @@ display: none; ------------------------------------------------------- */ .ideditor .form-field-input-wikipedia { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; } @@ -5468,16 +5625,13 @@ display: none; .ideditor .wiki-lang-container, .ideditor .wiki-title-container { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; width: 100%; @@ -5486,7 +5640,6 @@ display: none; .ideditor .wiki-lang-container > input.wiki-lang, .ideditor .wiki-title-container > input.wiki-title { -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; border-top: 0; @@ -5540,13 +5693,13 @@ display: none; } .ideditor .restriction-control input, -.ideditor .restriction-control span { +.ideditor .restriction-control > span { display: table-cell; text-align: start; padding: 0px 5px; } -.ideditor .restriction-control span.restriction-control-label { +.ideditor .restriction-control > span.restriction-control-label { text-align: end; } @@ -5623,6 +5776,16 @@ display: none; /* Field - Combobox ------------------------------------------------------- */ +.ideditor[dir='ltr'] textarea.combobox-input, +.ideditor[dir='ltr'] input.combobox-input { + /* leave room for the caret */ + padding-right: 20px; +} +.ideditor[dir='rtl'] textarea.combobox-input, +.ideditor[dir='rtl'] input.combobox-input { + padding-left: 20px; +} + .ideditor div.combobox { z-index: 9999; display: none; @@ -5648,7 +5811,8 @@ display: none; } .ideditor .combobox a.selected, -.ideditor .combobox a:active { +.ideditor .combobox a:active, +.ideditor .combobox a:focus { background: #ececec; } @media (hover: hover) { @@ -5665,10 +5829,12 @@ display: none; .ideditor .combobox-caret { display: inline-block; position: relative; - height: 30px; + height: 5px; width: 30px !important; margin-left: -30px; - vertical-align: top; + -ms-flex-item-align: center; + align-self: center; + vertical-align: middle; cursor: pointer; } .ideditor[dir='rtl'] .combobox-caret { @@ -5687,6 +5853,47 @@ display: none; 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 ------------------------------------------------------- */ @@ -5733,7 +5940,8 @@ display: none; color: #7092ff; border-bottom: 2px solid; } -.ideditor .field-help-nav-item:active { +.ideditor .field-help-nav-item:active, +.ideditor .field-help-nav-item:focus { color: #597be7; background-color: #efefef; } @@ -5806,20 +6014,16 @@ display: none; .ideditor .more-fields label { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: justify; - -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; - -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @@ -5827,7 +6031,6 @@ display: none; .ideditor .more-fields input { margin-left: 10px; -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; } @@ -5837,7 +6040,6 @@ display: none; } .ideditor .form-field-input-wrap .label { - height: 30px; background: #f6f6f6; padding: 5px 10px; } @@ -5847,26 +6049,22 @@ display: none; ------------------------------------------------------- */ .ideditor .raw-tag-options { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; - -webkit-flex-direction: row-reverse; - -ms-flex-direction: row-reverse; - flex-direction: row-reverse; - margin-top: -25px; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + margin-top: -28px; } .ideditor button.raw-tag-option { -webkit-box-flex: 0; - -webkit-flex: 0 0 20px; - -ms-flex: 0 0 20px; - flex: 0 0 20px; - height: 20px; - width: 20px; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding: 3px; background: #aaa; color: #eee; margin: 0 3px; @@ -5889,7 +6087,7 @@ display: none; .ideditor button.raw-tag-option svg.icon { width: 14px; height: 14px; - vertical-align: text-bottom; + display: block; } .ideditor[dir='ltr'] button.raw-tag-option-list { -webkit-transform: scaleX(-1); @@ -5919,12 +6117,10 @@ display: none; } .ideditor .tag-row .inner-wrap { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; width: 100%; @@ -5933,7 +6129,6 @@ display: none; .ideditor .tag-row .key-wrap, .ideditor .tag-row .value-wrap { -webkit-box-flex: 1; - -webkit-flex: 1 1 50%; -ms-flex: 1 1 50%; flex: 1 1 50%; } @@ -5949,7 +6144,6 @@ display: none; } .ideditor .tag-row input { - height: 31px; border: 0; border-radius: 0; border-bottom: 1px solid #ccc; @@ -5988,10 +6182,8 @@ display: none; } .ideditor .tag-row button { -webkit-box-flex: 0; - -webkit-flex: 0 0 32px; - -ms-flex: 0 0 32px; - flex: 0 0 32px; - height: 31px; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 32px; border: 1px solid #ccc; border-top-width: 0; @@ -6002,7 +6194,8 @@ display: none; border-right-width: 0; } -.ideditor .tag-row button:active { +.ideditor .tag-row button:active, +.ideditor .tag-row button:focus { background: #f1f1f1; } @media (hover: hover) { @@ -6052,7 +6245,6 @@ display: none; .ideditor .tag-reference-body { -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; width: 100%; @@ -6138,7 +6330,6 @@ display: none; .ideditor .member-row-new .member-entity-input { -webkit-box-flex: 1; - -webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; border-radius: 4px 4px 0 0; @@ -6153,25 +6344,14 @@ display: none; */ } -/* hidden field to prevent user from tabbing out of the sidebar */ -.ideditor input.key-trap { - height: 0px; - width: 0px; - padding: 0px; - border: 1px solid rgba(0,0,0,0); -} - - /* add tag, add relation buttons */ .ideditor .add-row { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } @@ -6179,18 +6359,16 @@ display: none; .ideditor .add-row .add-relation, .ideditor .add-row .space-value { -webkit-box-flex: 1; - -webkit-flex: 1 1 50%; -ms-flex: 1 1 50%; flex: 1 1 50%; } .ideditor .add-row .space-buttons { -webkit-box-flex: 0; - -webkit-flex: 0 0 62px; -ms-flex: 0 0 62px; flex: 0 0 62px; } .ideditor .add-row button { - height: 30px; + padding: 5px; background: rgba(0,0,0,.5); } .ideditor .add-row button:focus, @@ -6220,16 +6398,13 @@ display: none; border-radius: 5px; border: 1px solid #ccc; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; - -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @@ -6239,9 +6414,8 @@ display: none; background-color: #fff; padding: 10px; -webkit-box-flex: 0; - -webkit-flex: 0 0 62px; - -ms-flex: 0 0 62px; - flex: 0 0 62px; + -ms-flex: 0 0 auto; + flex: 0 0 auto; position: relative; width: 60px; height: 60px; @@ -6276,7 +6450,6 @@ display: none; background-color: #f6f6f6; padding: 0 15px; -webkit-box-flex: 1; - -webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; font-size: 14px; @@ -6305,21 +6478,18 @@ display: none; border: 1px solid #ccc; margin: 10px auto; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .ideditor .comment-avatar { padding: 10px; -webkit-box-flex: 0; - -webkit-flex: 0 0 62px; - -ms-flex: 0 0 62px; - flex: 0 0 62px; + -ms-flex: 0 0 auto; + flex: 0 0 auto; } .ideditor .comment-avatar .icon.comment-avatar-icon { width: 40px; @@ -6332,12 +6502,10 @@ display: none; .ideditor .comment-main { padding: 10px 10px 10px 0; -webkit-box-flex: 1; - -webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; - -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; overflow: hidden; @@ -6350,11 +6518,9 @@ display: none; .ideditor .comment-metadata { -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: justify; - -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } @@ -6387,12 +6553,10 @@ display: none; border-radius: 4px; border: 1px solid #ccc; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; - -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } @@ -6437,16 +6601,13 @@ display: none; border-radius: 5px; border: 1px solid #ccc; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; - -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @@ -6455,9 +6616,8 @@ display: none; background-color: #fff; padding: 10px; -webkit-box-flex: 0; - -webkit-flex: 0 0 62px; - -ms-flex: 0 0 62px; - flex: 0 0 62px; + -ms-flex: 0 0 auto; + flex: 0 0 auto; position: relative; width: 60px; height: 60px; @@ -6479,7 +6639,6 @@ display: none; background-color: #f6f6f6; padding: 0 15px; -webkit-box-flex: 1; - -webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; font-size: 14px; @@ -6501,46 +6660,61 @@ display: none; .ideditor .over-map { - position: absolute; - left: 0; - right: 0; - top: 71px; - bottom: 30px; + position: relative; + height: 100%; pointer-events: none; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; - -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-align: end; - -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; + overflow: hidden; } .ideditor .over-map > * { pointer-events: auto; + z-index: 5; } - -/* Map Controls +/* offscreen this without hiding it */ +.ideditor .over-map .select-trap { + position: absolute; + right: -1000%; + opacity: 0; +} + +/* 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: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; - -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding: 5px 0; @@ -6554,7 +6728,6 @@ display: none; height: 100%; max-height: 70px; -webkit-box-flex: 0; - -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; } @@ -6563,9 +6736,20 @@ display: none; right: auto; } +.ideditor .map-control { + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} .ideditor .map-control > button { position: relative; width: 40px; + height: 40px; background: rgba(0,0,0,.5); border-radius: 0; pointer-events: auto; @@ -6596,7 +6780,7 @@ display: none; /* Fullscreen Button (disabled) ------------------------------------------------------- */ .ideditor div.full-screen { - display: inline-block; + /*display: inline-block;*/ width: 40px; margin-right: 10px; display: none; @@ -6611,7 +6795,8 @@ display: none; height: 40px; background: transparent; } -.ideditor div.full-screen > button:active { +.ideditor div.full-screen > button:active, +.ideditor div.full-screen > button:focus { background-color: rgba(0, 0, 0, .8); } @media (hover: hover) { @@ -6669,11 +6854,6 @@ display: none; /* Background / Map Data Settings ------------------------------------------------------- */ -.ideditor .map-data-control, -.ideditor .background-control { - position: relative; -} - .ideditor .imagery-faq { margin-bottom: 10px; white-space: nowrap; @@ -6686,12 +6866,10 @@ display: none; } .ideditor .layer-list > li { - height: 30px; background-color: #fff; color: #7092ff; position: relative; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; } @@ -6731,9 +6909,10 @@ display: none; .ideditor .layer-list li.best > div.best { padding: 5px; -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; -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 { @@ -6751,13 +6930,14 @@ display: none; padding: 5px 10px; cursor: pointer; -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; overflow: hidden; } @@ -6771,18 +6951,22 @@ display: none; .ideditor .layer-list label > span { display: block; overflow: hidden; - white-space: nowrap; - -o-text-overflow: ellipsis; - text-overflow: ellipsis; - -webkit-box-flex: 1; - -webkit-flex-grow: 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 { + height: 2.2em; + padding: 0px 4px; + width: 50%; + min-width: 160px; } .ideditor .map-data-pane .layer-list button, .ideditor .background-pane .layer-list button { - height: 100%; border-left: 1px solid #ccc; border-radius: 0; padding-left: 4px; @@ -6825,34 +7009,31 @@ display: none; .ideditor .issue-label .issue-text { width: 100%; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; cursor: pointer; + text-align: initial; + background: none; } .ideditor .issue-text .issue-icon { -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; - padding: 5px 7px; + padding: 2px 3px; } .ideditor .issue-text .issue-message { -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; - padding: 5px 0; + padding: 4px 5px; } .ideditor .issue-label .issue-autofix { -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; padding: 5px 8px; @@ -6861,7 +7042,6 @@ display: none; height: unset; width: 32px; -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; border-left: 1px solid #ccc; @@ -6886,7 +7066,6 @@ display: none; .ideditor button.autofix.action { -webkit-box-flex: 0; - -webkit-flex: 0 0 20px; -ms-flex: 0 0 20px; flex: 0 0 20px; height: 20px; @@ -6908,17 +7087,15 @@ display: none; /* fix all */ .ideditor .autofix-all { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; - -webkit-flex-direction: row-reverse; - -ms-flex-direction: row-reverse; - flex-direction: row-reverse; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; margin-top: -25px; padding-bottom: 5px; } @@ -6944,7 +7121,7 @@ display: none; .ideditor .warnings-list .issue.severity-warning .issue-label, .ideditor .issue.severity-warning .issue-fix-list, -.ideditor.mode-save .warning-section { +.ideditor .warning-section { background: #ffc; } @@ -6956,26 +7133,30 @@ display: none; color: #f90; } -.ideditor .issue.severity-warning .issue-fix-item.actionable, +.ideditor .issue.severity-warning .issue-fix-item button.actionable, .ideditor .issue-container.active .issue.severity-warning .issue-info-button { color: #b15500; fill: #b15500; } .ideditor .warnings-list .issue.severity-warning .issue-label:active, -.ideditor .issue.severity-warning .issue-fix-item.actionable:active { +.ideditor .warnings-list .issue.severity-warning .issue-label:focus, +.ideditor .issue.severity-warning .issue-fix-item button.actionable:active, +.ideditor .issue.severity-warning .issue-fix-item button.actionable:focus { background: #ff8; } -.ideditor .issue.severity-warning .issue-fix-item.actionable:active, -.ideditor .issue-container.active .issue.severity-warning .issue-info-button:active { +.ideditor .issue.severity-warning .issue-fix-item button.actionable:active, +.ideditor .issue.severity-warning .issue-fix-item button.actionable:focus, +.ideditor .issue-container.active .issue.severity-warning .issue-info-button:active, +.ideditor .issue-container.active .issue.severity-warning .issue-info-button:focus { color: #7f3d00; fill: #7f3d00; } @media (hover: hover) { .ideditor .warnings-list .issue.severity-warning .issue-label:hover, - .ideditor .issue.severity-warning .issue-fix-item.actionable:hover { + .ideditor .issue.severity-warning .issue-fix-item button.actionable:hover { background: #ff8; } - .ideditor .issue.severity-warning .issue-fix-item.actionable:hover, + .ideditor .issue.severity-warning .issue-fix-item button.actionable:hover, .ideditor .issue-container.active .issue.severity-warning .issue-info-button:hover { color: #7f3d00; fill: #7f3d00; @@ -6993,7 +7174,7 @@ display: none; .ideditor .errors-list .issue.severity-error .issue-label, .ideditor .issue.severity-error .issue-fix-list, -.ideditor.mode-save .error-section { +.ideditor .error-section { background: #ffd6d6; } @@ -7001,7 +7182,7 @@ display: none; background: #ffc6c6; } -.ideditor .issue.severity-error .issue-fix-item.actionable, +.ideditor .issue.severity-error .issue-fix-item button.actionable, .ideditor .issue-container.active .issue.severity-error .issue-info-button { color: #b91201; fill: #b91201; @@ -7010,20 +7191,24 @@ display: none; color: #dd1400; } .ideditor .errors-list .issue.severity-error .issue-label:active, -.ideditor .issue.severity-error .issue-fix-item.actionable:active { +.ideditor .errors-list .issue.severity-error .issue-label:focus, +.ideditor .issue.severity-error .issue-fix-item button.actionable:active, +.ideditor .issue.severity-error .issue-fix-item button.actionable:focus { background: #ffb6b6; } -.ideditor .issue.severity-error .issue-fix-item.actionable:active, -.ideditor .issue-container.active .issue.severity-error .issue-info-button:active { +.ideditor .issue.severity-error .issue-fix-item button.actionable:active, +.ideditor .issue.severity-error .issue-fix-item button.actionable:focus, +.ideditor .issue-container.active .issue.severity-error .issue-info-button:active, +.ideditor .issue-container.active .issue.severity-error .issue-info-button:focus { color: #840c00; fill: #840c00; } @media (hover: hover) { .ideditor .errors-list .issue.severity-error .issue-label:hover, - .ideditor .issue.severity-error .issue-fix-item.actionable:hover { + .ideditor .issue.severity-error .issue-fix-item button.actionable:hover { background: #ffb6b6; } - .ideditor .issue.severity-error .issue-fix-item.actionable:hover, + .ideditor .issue.severity-error .issue-fix-item button.actionable:hover, .ideditor .issue-container.active .issue.severity-error .issue-info-button:hover { color: #840c00; fill: #840c00; @@ -7050,6 +7235,7 @@ display: none; .ideditor .issues-option label { display: table-cell; padding: 0 10px; + white-space: nowrap; } .ideditor .layer-list.issues-list li.issue { @@ -7065,17 +7251,15 @@ display: none; } .ideditor .section-footer { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; - -webkit-flex-direction: row-reverse; - -ms-flex-direction: row-reverse; - flex-direction: row-reverse; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; height: 30px; } .ideditor .section-footer a { @@ -7088,7 +7272,6 @@ display: none; background: #c6ffca; padding: 5px !important; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; } @@ -7098,8 +7281,8 @@ display: none; .ideditor input.square-degrees-input { padding: 2px !important; /* important needed for rtl */ - width: 40px; - height: unset; + width: 3em; + height: 2em; text-align: center; background: rgba(0,0,0,0); color: currentColor; @@ -7113,7 +7296,9 @@ display: none; background: #f6f6f6; } .ideditor .section-entity-issues .issue-container:not(.active) .issue-text:active, -.ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:active { +.ideditor .section-entity-issues .issue-container:not(.active) .issue-text:focus, +.ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:active, +.ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:focus { background: #f1f1f1; } @media (hover: hover) { @@ -7130,7 +7315,7 @@ display: none; padding-left: 10px; } -.ideditor .section-entity-issues .issue-container.active .issue-label .issue-text { +.ideditor .section-entity-issues .issue-container.active .issue-label button.issue-text { font-weight: bold; } .ideditor .section-entity-issues .issue-container:not(:last-of-type) { @@ -7152,27 +7337,31 @@ display: none; display: none; } -.ideditor li.issue-fix-item { +.ideditor li.issue-fix-item button { padding: 2px 10px 2px 20px; + background: transparent; + width: 100%; + text-align: initial; } -.ideditor[dir='rtl'] li.issue-fix-item { +.ideditor[dir='rtl'] li.issue-fix-item button { padding: 2px 20px 2px 10px; } -.ideditor li.issue-fix-item:first-of-type { +.ideditor li.issue-fix-item:first-of-type button { padding-top: 5px; } -.ideditor li.issue-fix-item:last-of-type { +.ideditor li.issue-fix-item:last-of-type button { padding-bottom: 5px; } -.ideditor li.issue-fix-item .fix-message { +.ideditor li.issue-fix-item button .fix-message { padding: 0 10px; + vertical-align: middle; } -.ideditor li.issue-fix-item.actionable { +.ideditor li.issue-fix-item button.actionable { cursor: pointer; } -.ideditor li.issue-fix-item:not(.actionable) .fix-icon { +.ideditor li.issue-fix-item button:not(.actionable) .fix-icon { color: #555; fill: #555; } @@ -7180,10 +7369,12 @@ display: none; .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; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; width: 100%; @@ -7226,19 +7417,30 @@ display: none; 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; } +.ideditor .display-control .control-wrap { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: 100%; +} .ideditor .display-control .display-option-input { height: 20px; - width: 155px; - max-width: 100%; + -webkit-box-flex: 1; + -ms-flex: 1 1 100%; + flex: 1 1 100%; } .ideditor .display-control button { @@ -7248,6 +7450,9 @@ display: none; margin-right: 0px; vertical-align: text-bottom; border-radius: 4px; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; } .ideditor[dir='rtl'] .display-control button { margin-left: 0px; @@ -7261,10 +7466,13 @@ display: none; border: 1px solid #ccc; border-radius: 4px; padding: 10px; + position: relative; } -.ideditor .nudge-container .nudge-instructions { - padding-bottom: 15px; +.ideditor .nudge-container .nudge-controls-wrap { + position: relative; + width: 100%; + overflow: hidden; } .ideditor .nudge-container .nudge-outer-rect { @@ -7272,21 +7480,16 @@ display: none; border: 1px solid #ccc; border-radius: 2px; padding: 20px 0; - width: 70%; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; - -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; - -webkit-align-items: center; -ms-flex-align: center; align-items: center; - margin: 0 auto; - margin-top: 20px; + margin: 45px; cursor: move; /* prevent scrolling pane while dragging on touchscreen */ -ms-touch-action: none; @@ -7296,6 +7499,7 @@ display: none; -moz-user-select: none; -ms-user-select: none; user-select: none; + position: relative; } .ideditor .nudge-container .nudge-inner-rect { @@ -7318,7 +7522,7 @@ display: none; .ideditor .nudge-container input { width: 100%; - height: 20px; + padding: 2px; text-align: center; border: 0; } @@ -7329,39 +7533,42 @@ display: none; background: #ffb; } -.ideditor .nudge-container input:focus { - background-color: transparent; -} - .ideditor .nudge-container button { - float: left; - display: block; - width: 20%; - position: relative; - background-color: transparent; + position: absolute; + height: 40px; + width: 40px; +} +.ideditor .nudge-container button.right, +.ideditor .nudge-container button.left { + top: 0; + bottom: 0; + margin-top: auto; + margin-bottom: auto; + vertical-align: middle; } - .ideditor .nudge-container button.right { - top: -50px; - right: -85%; + right: 0; } - .ideditor .nudge-container button.left { - top: -50px; - right: 45%; + left: 0; +} +.ideditor .nudge-container button.top, +.ideditor .nudge-container button.bottom { + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; } - .ideditor .nudge-container button.top { - left: 20%; - top: -104px; + top: 0; } - .ideditor .nudge-container button.bottom { - left: -20%; + bottom: 0; } .ideditor .nudge-container button.nudge-reset { - right: -10px; + right: 0; + bottom: 0; } .ideditor .nudge-surface { @@ -7404,7 +7611,6 @@ display: none; ------------------------------------------------------- */ .ideditor .map-panes { -webkit-box-flex: 0; - -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; position: relative; @@ -7417,9 +7623,14 @@ display: none; width: 400px; max-width: 100%; height: 100%; - padding-bottom: 60px; - overflow: hidden; z-index: 10; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; } .ideditor .map-pane.help-pane { @@ -7428,20 +7639,19 @@ display: none; .ideditor .pane-heading { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: justify; - -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; border-bottom: 1px solid #ccc; - height: 60px; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; } .ideditor .pane-heading h2 { @@ -7450,7 +7660,6 @@ display: none; .ideditor .pane-heading button { width: 40px; - height: 100%; border-radius: 0; } @@ -7477,11 +7686,12 @@ display: none; margin-bottom: 20px; } -.ideditor .help-pane .left-content .icon.pre-text { - vertical-align: text-top; +.ideditor .help-pane .left-content .icon.inline, +.ideditor .curtain-tooltip .icon.inline { margin-right: 0; margin-left: 0; - display: inline-block; + height: 1.34em; + width: 1.34em; } .ideditor .help-pane .toc { @@ -7503,6 +7713,8 @@ display: none; .ideditor .help-pane .toc li a { border-bottom: 0; } +.ideditor .help-pane .toc li a:focus, +.ideditor .help-pane .nav a:focus, .ideditor .help-pane .toc li a:active, .ideditor .help-pane .nav a:active { background: #ececec; @@ -7596,10 +7808,10 @@ display: none; 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 */ @@ -7641,7 +7853,7 @@ display: none; .ideditor .inspector-hover .section-entity-issues .issue-container.active .issue-label { border-bottom: 0; } -.ideditor .inspector-hover .section-entity-issues .issue-container.active .issue-label .issue-text { +.ideditor .inspector-hover .section-entity-issues .issue-container.active .issue-label button.issue-text { font-weight: normal; } @@ -7704,8 +7916,8 @@ display: none; opacity: 1; color: #666; padding: 5px 10px; - line-height: 20px; width: 100%; + height: auto; border: 0; } .ideditor .inspector-hover .form-field-input-radio .structure-extras-wrap { @@ -7785,9 +7997,14 @@ display: none; /* Map ------------------------------------------------------- */ .ideditor .main-map { - position: relative; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; overflow: hidden; height: 100%; + width: 100%; background: #000; -webkit-user-select: none; -moz-user-select: none; @@ -7795,6 +8012,7 @@ display: none; user-select: none; -ms-touch-action: none; touch-action: none; + -webkit-touch-callout: none; } .ideditor .main-map * { -ms-touch-action: none; @@ -7824,7 +8042,7 @@ display: none; top: 10px; width: 200px; height: 150px; - z-index: 5; + z-index: 2; background: #000; border: #aaa 1px solid; -webkit-box-shadow: 0 0 2em black; @@ -7921,14 +8139,15 @@ display: none; ------------------------------------------------------- */ .ideditor .info-panels { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; - -webkit-box-direction: reverse; - -webkit-flex-flow: row-reverse wrap-reverse; - -ms-flex-flow: row-reverse wrap-reverse; - flex-flow: row-reverse wrap-reverse; + -webkit-box-direction: normal; + -ms-flex-flow: row wrap-reverse; + flex-flow: row wrap-reverse; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; width: 100%; z-index: 1; -ms-user-select: element; @@ -7953,7 +8172,6 @@ display: none; .ideditor .panel-container { -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; margin: 0 2px 2px 0; @@ -7971,17 +8189,23 @@ display: none; .ideditor .panel-title { padding: 5px 10px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; } .ideditor .panel-title button.close { - float: right; - height: 20px; + padding: 2px; background: none; color: #ddd; } .ideditor[dir='rtl'] .panel-title button.close { float: left; } +.ideditor .panel-title button.close:focus, .ideditor .panel-title button.close:active { color: #fff; } @@ -8004,7 +8228,7 @@ display: none; display: none; } -.ideditor .panel-content li span { +.ideditor .panel-content li span:not(.localized-text) { display: inline-block; white-space: nowrap; margin: 0 8px; @@ -8043,49 +8267,45 @@ display: none; ------------------------------------------------------- */ .ideditor .map-footer { width: 100%; - position: absolute; - right: 0; - bottom: 0; + position: relative; border-radius: 0; pointer-events: none; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; - -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -ms-user-select: element; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; } .ideditor .map-footer-bar { pointer-events: all; display: block; - height: 30px; + height: 2.5em; + position: relative; } .ideditor .main-footer-wrap, .ideditor .flash-wrap { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; - -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: justify; - -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; - max-height: 30px; + height: 100%; position: absolute; right: 0; left: 0; @@ -8099,7 +8319,7 @@ display: none; } .ideditor .footer-hide { - bottom: -35px; + bottom: -100%; -webkit-transition: bottom 75ms linear; -o-transition: bottom 75ms linear; transition: bottom 75ms linear; @@ -8109,26 +8329,34 @@ display: none; /* Attribution ------------------------------------------------------- */ .ideditor .attribution-wrap { - width: 100%; - height: 20px; - margin-bottom: 5px; + position: absolute; + bottom: 5px; + left: 5px; + right: 5px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: end; + -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 { - position: absolute; color: #ccc; font-size: 10px; } - -.ideditor .attribution-wrap .base-layer-attribution { - left: 10px; -} - .ideditor .attribution-wrap .overlay-layer-attribution { - right: 10px; + text-align: right; } .ideditor .attribution-wrap .overlay-layer-attribution .attribution:not(:last-child):after { @@ -8139,6 +8367,7 @@ display: none; .ideditor .attribution-wrap .attribution a:visited { color: #ccf; } +.ideditor .attribution-wrap .attribution a:focus, .ideditor .attribution-wrap .attribution a:hover { color: #aaf; } @@ -8163,29 +8392,23 @@ display: none; ------------------------------------------------------- */ .ideditor .flash-content { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; - -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; - -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 2px; - height: 30px; } .ideditor .flash-icon { -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 20px; @@ -8212,7 +8435,6 @@ display: none; .ideditor .flash-text { -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; } @@ -8222,21 +8444,23 @@ display: none; .ideditor .map-footer-bar .scale-block { vertical-align: bottom; width: 250px; - max-height: 30px; -webkit-box-flex: 0; - -webkit-flex: 0 0 250px; - -ms-flex: 0 0 250px; - flex: 0 0 250px; + -ms-flex: 0 0 auto; + flex: 0 0 auto; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; + height: 30px; + -ms-flex-item-align: center; + align-self: center; } .ideditor .scale-block .scale { - height: 30px; + height: 100%; width: 100%; cursor: pointer; + display: block; } .ideditor[dir='rtl'] .scale-block .scale { -webkit-transform: scaleX(-1); @@ -8244,16 +8468,11 @@ display: none; transform: scaleX(-1); } -.ideditor .scale-block .scale text { - font: 12px sans-serif; - stroke: none; - fill: #ccc; - text-anchor: start; -} -.ideditor[dir='rtl'] .scale-block .scale text { - -webkit-transform: scaleX(-1); - -ms-transform: scaleX(-1); - transform: scaleX(-1); +.ideditor .scale-block .scale-text { + display: inline-block; + position: absolute; + color: #ccc; + top: 0.45em; } .ideditor .scale-block .scale path { @@ -8266,70 +8485,59 @@ display: none; /* Footer - About, Source Switcher ------------------------------------------------------- */ .ideditor .map-footer-bar .info-block { - max-height: 30px; -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; - -ms-flex: 1 1 auto; - flex: 1 1 auto; + -ms-flex: 1 1 100%; + flex: 1 1 100%; + overflow: hidden; } .ideditor .map-footer-list { - text-align: right; - margin-right: 10px; - clear: right; - overflow: hidden; -} -.ideditor[dir='rtl'] .map-footer-list { - text-align: left; - clear: left; - margin-left: 10px; - margin-right: 0; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + height: 100%; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; } .ideditor .map-footer-list li { - float: right; - border-left: 1px solid rgba(255,255,255,.5); - padding: 5px 0 5px 5px; - margin-left: 5px; + height: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + white-space: nowrap; + padding: 5px; } -.ideditor[dir='rtl'] .map-footer-list li { - float: left; - border-left: none; +.ideditor[dir='ltr'] .map-footer-list li:not(:last-child) { border-right: 1px solid rgba(255,255,255,.5); - margin-left: 0; - margin-right: 5px; - padding: 5px 5px 5px 0; +} +.ideditor[dir='rtl'] .map-footer-list li:not(:last-child) { + border-left: 1px solid rgba(255,255,255,.5); } .ideditor .map-footer-list li:empty { display: none; } -.ideditor .map-footer-list li:last-child { - border-left: 0; - margin-left: 0; - padding-left: 0; -} -.ideditor[dir='rtl'] .map-footer-list li:last-child { - border-right: none; -} - .ideditor .map-footer-list a.chip { - padding: 2px 4px 3px 4px; + padding: 1px 4px 1px 4px; border-radius: 2px; color: #eee; } .ideditor .map-footer-list a.chip .icon { width: 14px; height: 14px; - margin-top: 3px; + margin-top: -2px; } -.ideditor[dir='ltr'] .map-footer-list a.chip .icon, -.ideditor[dir='ltr'] .map-footer-list a.chip span { - margin-right: 3px; -} -.ideditor[dir='rtl'] .map-footer-list a.chip .icon, -.ideditor[dir='rtl'] .map-footer-list a.chip span { - margin-left: 3px; +.ideditor .map-footer-list a.chip span.count { + margin: 0 3px; } .ideditor .source-switch a.chip.live { @@ -8363,13 +8571,15 @@ display: none; padding: 1px 10px; color: #eee; -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; } .ideditor[dir='rtl'] .api-status { text-align: left; } +.ideditor .api-status:empty { + display: none; +} .ideditor .api-status.offline, .ideditor .api-status.readonly, @@ -8382,6 +8592,7 @@ display: none; color: #ccc; pointer-events: all; } +.ideditor .api-status a:focus, .ideditor .api-status a:active { color: inherit; } @@ -8391,33 +8602,43 @@ display: none; } } +.ideditor .local-storage-full { + display: block; + width: 100%; +} + /* Notification Badges ------------------------------------------------------- */ /* For an icon (e.g. new version) */ .ideditor .badge { - display: inline-block; + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; background: #d32232; width: 21px; - height: 20px; - border-radius: 11px; + height: 21px; + border-radius: 50%; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} +.ideditor[dir='ltr'] .badge { margin-left: 6px; } .ideditor[dir='rtl'] .badge { - margin-left: 0; margin-right: 6px; } -.ideditor .badge a { - margin-right: 5px; -} -.ideditor[dir='rtl'] .badge a { - margin-right: 0; - margin-left: 5px; -} .ideditor .badge .icon { vertical-align: baseline; width: 11px; height: 11px; color: #fff; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; } /* For text (e.g. upcoming events) */ @@ -8453,12 +8674,10 @@ display: none; min-width: 200px; max-width: 550px; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; - -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } @@ -8512,21 +8731,16 @@ display: none; .ideditor .modal-section.buttons .action { display: inline-block; margin: 0 10px; - text-align: center; - vertical-align: middle; } .ideditor .save-section .buttons { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -webkit-justify-content: space-around; - -ms-flex-pack: distribute; - justify-content: space-around; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -ms-flex-pack: distribute; + justify-content: space-around; } .ideditor .save-section .buttons .action, @@ -8542,16 +8756,14 @@ display: none; } .ideditor .modal-actions { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; } .ideditor .modal-actions button { - font-weight: normal; color: #7092ff; border-bottom: 1px solid #ccc; border-radius: 0; - height: 160px; + min-height: 160px; text-align: center; width: 100%; } @@ -8629,6 +8841,9 @@ display: none; .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 { @@ -8687,43 +8902,52 @@ display: none; 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 ------------------------------------------------------- */ .ideditor .modal-shortcuts { width: 90%; - max-width: 950px; + max-width: 1050px; } .ideditor .modal-shortcuts .modal-section:last-child { - padding-top: 10px; + padding: 10px 15px 20px 15px; min-height: 275px; } .ideditor .modal-shortcuts .tabs-bar { - text-align: center; padding-bottom: 5px; - font-size: 16px; - font-weight: bold; + text-align: center; } -.ideditor .modal-shortcuts .tab { +.ideditor .modal-shortcuts a.tab { display: inline-block; padding: 5px 10px; margin: 0 5px; cursor: pointer; color: #666; + font-size: 16px; + font-weight: bold; } -.ideditor .modal-shortcuts .tab.active { +.ideditor .modal-shortcuts a.tab.active { color: #7092ff; border-bottom: 2px solid; } -.ideditor .modal-shortcuts .tab:active { +.ideditor .modal-shortcuts a.tab:focus, +.ideditor .modal-shortcuts a.tab:active { color: #597be7; background-color: #efefef; } @media (hover: hover) { - .ideditor .modal-shortcuts .tab:hover { + .ideditor .modal-shortcuts a.tab:hover { color: #597be7; background-color: #efefef; } @@ -8731,17 +8955,14 @@ display: none; .ideditor .modal-shortcuts .shortcut-tab { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; - -webkit-justify-content: space-around; - -ms-flex-pack: distribute; - justify-content: space-around; + -ms-flex-pack: distribute; + justify-content: space-around; } .ideditor .modal-shortcuts .shortcut-column { @@ -8750,7 +8971,6 @@ display: none; .ideditor .modal-shortcuts .shortcut-tab-tools .shortcut-column { -webkit-box-flex: 1; - -webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; width: 100%; @@ -8816,34 +9036,20 @@ display: none; /* Save Mode ------------------------------------------------------- */ -.ideditor.mode-save a.user-info { +.ideditor a.user-info { display: inline-block; } -.ideditor.mode-save .commit-form { +.ideditor .commit-form { margin-bottom: 0; } -.ideditor.mode-save .user-info img { - float: left; -} - -.ideditor.mode-save h3 small.count { - margin-right: 10px; - text-align: center; +.ideditor .user-info img { float: left; - height: 12px; - min-width: 12px; - font-size: 12px; - line-height: 12px; - border-radius: 24px; - padding: 5px; - background: #7092ff; - color: #fff; } .ideditor .note-save .field-warning, -.ideditor.mode-save .field-warning { +.ideditor .field-warning { background: #ffb; border: 1px solid #ccc; border-radius: 4px; @@ -8851,62 +9057,48 @@ display: none; } .ideditor .note-save .field-warning:empty, -.ideditor.mode-save .field-warning:empty { +.ideditor .field-warning:empty { display: none; } -.ideditor.mode-save .field-warning, -.ideditor.mode-save .changeset-info, -.ideditor.mode-save .request-review, -.ideditor.mode-save .commit-info { +.ideditor .changeset-info, +.ideditor .request-review, +.ideditor .commit-info { margin-bottom: 10px; } -.ideditor.mode-save .request-review label { +.ideditor .field-warning { + margin-top: 10px; +} + +.ideditor .request-review label { cursor: pointer; } -.ideditor.mode-save .changeset-list { +.ideditor .changeset-list { border: 1px solid #ccc; border-radius: 4px; background: #fff; margin-bottom: 10px; + overflow: hidden; } -.ideditor.mode-save .warning-section .changeset-list button { - border-left: 1px solid #ccc; -} - -.ideditor.mode-save .changeset-list li { - position: relative; - border-top: 1px solid #ccc; +.ideditor .changeset-list li button { padding: 5px 10px; - cursor: pointer; + width: 100%; + border-radius: 0; + text-align: initial; } -.ideditor.mode-save .changeset-list li:active { - background-color: #ececec; +.ideditor .changeset-list li { + border-top: 1px solid #ccc; } -@media (hover: hover) { - .ideditor.mode-save .changeset-list li:hover { - background-color: #ececec; - } +.ideditor .changeset-list li:first-child { + border-top: 0; } - -.ideditor.mode-save .changeset-list .alert { +.ideditor .changeset-list .alert { opacity: 0.5; } -.ideditor .changeset-list li span.count { - font-size: 10px; - color: #555; -} - -.ideditor .changeset-list li span.count:before { content: '('; } - -.ideditor .changeset-list li span.count:after { content: ')'; } - -.ideditor .changeset-list li:first-child { border-top: 0;} - /* Conflict resolution ------------------------------------------------------- */ @@ -8920,7 +9112,7 @@ display: none; padding: 20px; } -.ideditor.mode-save button.conflicts-button { +.ideditor button.conflicts-button { float: left; } @@ -8971,9 +9163,10 @@ display: none; .ideditor .notice .zoom-to { margin: auto; width: 300px; - height: 70px; + padding: 20px 5px; font-size: 150%; border-radius: 8px; + font-weight: bold; } .ideditor .notice .zoom-to:focus, @@ -9140,22 +9333,26 @@ display: none; /* 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, @@ -9166,7 +9363,8 @@ display: none; .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; } @@ -9215,12 +9413,10 @@ display: none; .ideditor .edit-menu { position: absolute; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; - -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; background: #fff; @@ -9234,11 +9430,9 @@ display: none; .ideditor .edit-menu-item { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; - -webkit-align-items: center; -ms-flex-align: center; align-items: center; border-radius: 0; @@ -9249,6 +9443,7 @@ display: none; max-width: 120px; text-align: initial; line-height: 1.1em; + font-weight: bold; } .ideditor[dir='ltr'] .edit-menu-item .label { margin-left: 8px; @@ -9278,7 +9473,6 @@ display: none; height: 20px; overflow: visible; width: 10px; - background: #fff; border-left: 1px solid #DDD; } @@ -9322,12 +9516,10 @@ display: none; .ideditor .intro-nav-wrap { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; position: absolute; @@ -9340,7 +9532,6 @@ display: none; .ideditor .intro-nav-wrap .intro-nav-wrap-logo { -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; height: 40px; @@ -9352,26 +9543,23 @@ display: none; .ideditor .intro-nav-wrap .joined { -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .ideditor .intro-nav-wrap button.chapter { -webkit-box-flex: 1; - -webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; padding: 0px 5px; + font-weight: bold; } .ideditor .intro-nav-wrap button.chapter.next { @@ -9500,7 +9688,6 @@ display: none; .ideditor .huge-modal-button { width: 100%; - height: auto; padding: 20px; }