X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/37911a5555bb26621b3d43b9ec89ef03b81ae1b5..d41737c6a0e4a639545268e09e438575f92e7709:/vendor/assets/iD/iD.css.erb?ds=sidebyside diff --git a/vendor/assets/iD/iD.css.erb b/vendor/assets/iD/iD.css.erb index 284cc036e..ed5e869b7 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; } /* @@ -92,7 +96,8 @@ display: none; .ideditor input[type="checkbox"], .ideditor input[type="radio"] { - box-sizing: border-box; /* 1 */ + -webkit-box-sizing: border-box; + box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } @@ -104,9 +109,8 @@ display: none; .ideditor input[type="search"] { -webkit-appearance: none; /* 1 */ - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; /* 2 */ - box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } /* @@ -182,14 +186,14 @@ display: none; pointer-events: none; } -.ideditor .lasso #map { +.ideditor .lasso .main-map { pointer-events: visibleStroke; } /* `.target` objects are interactive */ /* They can be picked up, clicked, hovered, or things can connect to them */ -.ideditor .qa_error.target, +.ideditor .qaItem.target, .ideditor .note.target, .ideditor .node.target, .ideditor .turn .target { @@ -209,6 +213,17 @@ display: none; stroke-linejoin: round; } +.ideditor[pointer='pen'] .way.target { + stroke-width: 18; +} +.ideditor[pointer='touch'] .way.target { + stroke-width: 32; +} +.ideditor[pointer='touch'] .node.vertex.target { + pointer-events: painted; + stroke: currentColor; + stroke-width: 10; +} /* `.target-nope` objects are explicitly forbidden to join to */ .ideditor .surface:not(.nope-disabled) .node.target.target-nope, @@ -227,7 +242,7 @@ display: none; /* points, notes & QA */ /* points, notes, markers */ -.ideditor g.qa_error .stroke, +.ideditor g.qaItem .stroke, .ideditor g.note .stroke { stroke: #222; stroke-width: 1; @@ -235,7 +250,7 @@ display: none; opacity: 0.6; } -.ideditor g.qa_error.active .stroke, +.ideditor g.qaItem.active .stroke, .ideditor g.note.active .stroke { stroke: #222; stroke-width: 1; @@ -250,7 +265,7 @@ display: none; } -.ideditor g.qa_error .shadow, +.ideditor g.qaItem .shadow, .ideditor g.point .shadow, .ideditor g.note .shadow { fill: none; @@ -259,14 +274,14 @@ display: none; stroke-opacity: 0; } -.ideditor g.qa_error.hover:not(.selected) .shadow, +.ideditor g.qaItem.hover:not(.selected) .shadow, .ideditor g.note.hover:not(.selected) .shadow, .ideditor g.point.related:not(.selected) .shadow, .ideditor g.point.hover:not(.selected) .shadow { stroke-opacity: 0.5; } -.ideditor g.qa_error.selected .shadow, +.ideditor g.qaItem.selected .shadow, .ideditor g.note.selected .shadow, .ideditor g.point.selected .shadow { stroke-opacity: 0.7; @@ -390,8 +405,8 @@ display: none; font-weight: bold; fill: #333; -webkit-transition: opacity 100ms linear; + -o-transition: opacity 100ms linear; transition: opacity 100ms linear; - -moz-transition: opacity 100ms linear; } /* Opera doesn't support dominant-baseline. See #715 */ @@ -1145,6 +1160,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, @@ -1192,6 +1213,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, @@ -1294,10 +1321,6 @@ display: none; } /* service roads */ -.ideditor .preset-icon .icon.tag-highway-service { - color: #fff; - fill: #666; -} .ideditor path.line.stroke.tag-highway-service, .ideditor path.line.stroke.tag-service { stroke: #fff; @@ -1320,6 +1343,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 { @@ -1793,7 +1826,7 @@ display: none; stroke: #39a; } -/* narrow width miscellanous things */ +/* narrow width miscellaneous things */ .ideditor path.line.shadow.tag-aerialway, .ideditor path.line.shadow.tag-attraction-summer_toboggan, .ideditor path.line.shadow.tag-attraction-water_slide, @@ -2236,37 +2269,52 @@ display: none; } .ideditor .map-in-map, -.ideditor #map { +.ideditor .main-map { cursor: auto; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-grab.png") %>) 9 9, auto; /* FF */ } .ideditor.mode-browse .point, -.ideditor.mode-select .point { +.ideditor.mode-select .point, +.ideditor.mode-select-data .point, +.ideditor.mode-select-error .point, +.ideditor.mode-select-note .point { cursor: pointer; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-select-point.png") %>), pointer; /* FF */ } +.ideditor.mode-browse .vertex, .ideditor.mode-select .vertex, -.ideditor.mode-browse .vertex { +.ideditor.mode-select-data .vertex, +.ideditor.mode-select-error .vertex, +.ideditor.mode-select-note .vertex { cursor: pointer; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-select-vertex.png") %>), pointer; /* FF */ } .ideditor.mode-browse .line, -.ideditor.mode-select .line { +.ideditor.mode-select .line, +.ideditor.mode-select-data .line, +.ideditor.mode-select-error .line, +.ideditor.mode-select-note .line { cursor: pointer; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-select-line.png") %>), pointer; /* FF */ } +.ideditor.mode-browse .area, .ideditor.mode-select .area, -.ideditor.mode-browse .area { +.ideditor.mode-select-data .area, +.ideditor.mode-select-error .area, +.ideditor.mode-select-note .area { cursor: pointer; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-select-area.png") %>), pointer; /* FF */ } +.ideditor.mode-browse .midpoint, .ideditor.mode-select .midpoint, -.ideditor.mode-browse .midpoint { +.ideditor.mode-select-data .midpoint, +.ideditor.mode-select-error .midpoint, +.ideditor.mode-select-note .midpoint { cursor: pointer; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-select-split.png") %>), pointer; /* FF */ } @@ -2284,13 +2332,13 @@ display: none; cursor: url(<%= asset_path("iD/img/cursor-select-remove.png") %>), pointer; /* FF */ } -.ideditor.mode-add-preset #map, -.ideditor.mode-draw-line #map, -.ideditor.mode-draw-area #map, -.ideditor.mode-add-line #map, -.ideditor.mode-add-area #map, -.ideditor.mode-drag-node #map, -.ideditor.mode-drag-note #map { +.ideditor.mode-add-preset .main-map, +.ideditor.mode-draw-line .main-map, +.ideditor.mode-draw-area .main-map, +.ideditor.mode-add-line .main-map, +.ideditor.mode-add-area .main-map, +.ideditor.mode-drag-node .main-map, +.ideditor.mode-drag-note .main-map { cursor: crosshair; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */ } @@ -2313,13 +2361,13 @@ display: none; cursor: url(<%= asset_path("iD/img/cursor-draw-connect-vertex.png") %>) 9 9, crosshair; /* FF */ } -.ideditor.mode-add-point #map, -.ideditor.mode-add-note #map, -.ideditor.mode-browse.lasso #map, +.ideditor.mode-add-point .main-map, +.ideditor.mode-add-note .main-map, +.ideditor.mode-browse.lasso .main-map, .ideditor.mode-browse.lasso .way, .ideditor.mode-browse.lasso .vertex, .ideditor.mode-browse.lasso .midpoint, -.ideditor.mode-select.lasso #map, +.ideditor.mode-select.lasso .main-map, .ideditor.mode-select.lasso .way, .ideditor.mode-select.lasso .vertex, .ideditor.mode-select.lasso .midpoint { @@ -2328,40 +2376,54 @@ display: none; } .ideditor.mode-browse .note, -.ideditor.mode-browse .qa_error, .ideditor.mode-select .note, -.ideditor.mode-select .qa_error, +.ideditor.mode-select-data .note, +.ideditor.mode-select-error .note, +.ideditor.mode-select-note .note { + cursor: pointer; +} + +.ideditor.mode-browse .qaItem, +.ideditor.mode-select .qaItem, +.ideditor.mode-select-data .qaItem, +.ideditor.mode-select-error .qaItem, +.ideditor.mode-select-note .qaItem { + cursor: pointer; +} + +/* turn restriction editor */ .ideditor .turn rect, .ideditor .turn circle { cursor: pointer; } /* photo viewer div */ -.ideditor #photoviewer { +.ideditor .photoviewer { position: relative; - flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; margin-bottom: 10px; width: 330px; height: 250px; padding: 5px; background-color: #fff; } -.ideditor[dir='ltr'] #photoviewer { +.ideditor[dir='ltr'] .photoviewer { margin-left: 10px; margin-right: 2px; } -.ideditor[dir='rtl'] #photoviewer { +.ideditor[dir='rtl'] .photoviewer { margin-right: 10px; margin-left: 2px; } @media screen and (min-width: 1600px) { - .ideditor #photoviewer { + .ideditor .photoviewer { width: 490px; height: 370px; } } -.ideditor #photoviewer button.thumb-hide { +.ideditor .photoviewer button.thumb-hide { border-radius: 0; padding: 5px; position: absolute; @@ -2370,7 +2432,7 @@ display: none; z-index: 50; } -.ideditor #photoviewer button.resize-handle-xy { +.ideditor .photoviewer button.resize-handle-xy { border-radius: 0; position: absolute; top: 0; @@ -2381,7 +2443,7 @@ display: none; width: 25px; } -.ideditor #photoviewer button.resize-handle-x { +.ideditor .photoviewer button.resize-handle-x { border-radius: 0; position: absolute; top: 0; @@ -2393,7 +2455,7 @@ display: none; width: 6px; } -.ideditor #photoviewer button.resize-handle-y { +.ideditor .photoviewer button.resize-handle-y { border-radius: 0; position: absolute; top: 0; @@ -2410,7 +2472,8 @@ display: none; width: 100%; height: 100%; overflow: hidden; - object-fit: cover; + -o-object-fit: cover; + object-fit: cover; } .ideditor .photo-wrapper .photo-attribution { @@ -2437,7 +2500,10 @@ display: none; pointer-events: none; } .ideditor.mode-browse .viewfield-group, -.ideditor.mode-select .viewfield-group { +.ideditor.mode-select .viewfield-group, +.ideditor.mode-select-data .viewfield-group, +.ideditor.mode-select-error .viewfield-group, +.ideditor.mode-select-note .viewfield-group { pointer-events: visible; cursor: pointer; } @@ -2492,7 +2558,9 @@ display: none; } .ideditor .viewfield-group.currentView .viewfield-scale { - transform: scale(2,2); + -webkit-transform: scale(2,2); + -ms-transform: scale(2,2); + transform: scale(2,2); } .ideditor .sequence { @@ -2545,16 +2613,26 @@ display: none; .ideditor .layer-mapillary-detections .icon-detected rect { fill: none; } -.ideditor .layer-mapillary-detections .icon-detected:hover rect { +.ideditor .layer-mapillary-detections .icon-detected:active { + opacity: 1; +} +.ideditor .layer-mapillary-detections .icon-detected:active rect { outline: 3px solid rgba(255, 238, 0, 0.6); } -.ideditor .layer-mapillary-detections .icon-detected.currentView rect { - outline: 3px solid rgba(255, 238, 0, 1); +@media (hover: hover) { + .ideditor .layer-mapillary-detections .icon-detected:hover { + opacity: 1; + } + .ideditor .layer-mapillary-detections .icon-detected:hover rect { + outline: 3px solid rgba(255, 238, 0, 0.6); + } } -.ideditor .layer-mapillary-detections .icon-detected:hover, .ideditor .layer-mapillary-detections .icon-detected.currentView { opacity: 1; } +.ideditor .layer-mapillary-detections .icon-detected.currentView rect { + outline: 3px solid rgba(255, 238, 0, 1); +} /* OpenStreetCam Image Layer */ @@ -2574,10 +2652,19 @@ display: none; display: block; } .ideditor .ms-wrapper .photo-attribution .attribution-row { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-flow: row nowrap; - justify-content: space-between; - align-items: center; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; padding: 0 5px; } .ideditor .ms-wrapper .photo-attribution .image-view-link { @@ -2588,10 +2675,14 @@ display: none; text-align: right; } -.ideditor .ms-wrapper .photo-attribution a:active, -.ideditor .ms-wrapper .photo-attribution a:hover { +.ideditor .ms-wrapper .photo-attribution a:active { color: #0fffc4; } +@media (hover: hover) { + .ideditor .ms-wrapper .photo-attribution a:hover { + color: #0fffc4; + } +} .ideditor .ms-wrapper .pnlm-compass.pnlm-control { width: 26px; @@ -2617,25 +2708,23 @@ display: none; /* Mapillary viewer */ -.ideditor #mly .domRenderer .TagSymbol { +.ideditor #ideditor-mly .domRenderer .TagSymbol { font-size: 10px; background-color: rgba(0,0,0,0.4); padding: 0 4px; border-radius: 4px; top: -25px; } -.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, -.ideditor .mly-wrapper .photo-attribution a:hover { - color: #35af6d; +.ideditor .mly-wrapper .AttributionContainer .AttributionIconContainer .AttributionMapillaryLogo { + margin-top: 3px; } -.ideditor .mly-wrapper .mapillary-js-dom { - z-index: 9; +.ideditor .mly-wrapper .AttributionContainer .AttributionImageContainer { + color: #fff; + font-size: 10px; + font-weight: 300; + overflow: hidden; } @@ -2648,19 +2737,21 @@ display: none; background-repeat: no-repeat; } -.ideditor .osc-wrapper .photo-attribution a:active, -.ideditor .osc-wrapper .photo-attribution a:hover { +.ideditor .osc-wrapper .photo-attribution a:active { color: #20c4ff; } +@media (hover: hover) { + .ideditor .osc-wrapper .photo-attribution a:hover { + color: #20c4ff; + } +} .ideditor .osc-image-wrap { width: 100%; height: 100%; - transform-origin:0 0; - -ms-transform-origin:0 0; -webkit-transform-origin:0 0; - -moz-transform-origin:0 0; - -o-transform-origin:0 0; + -ms-transform-origin:0 0; + transform-origin:0 0; } @@ -2671,11 +2762,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, @@ -2692,17 +2785,23 @@ display: none; .ideditor .photo-controls button:last-of-type { border-radius: 0 3px 3px 0; } -.ideditor .photo-controls button:hover, .ideditor .photo-controls button:active { background: rgba(0,0,0,0.85); color: #fff; } +@media (hover: hover) { + .ideditor .photo-controls button:hover { + background: rgba(0,0,0,0.85); + color: #fff; + } +} -/* OSM Notes and KeepRight Layers */ +/* OSM Notes and QA Layers */ -.ideditor .error-header-icon .qa_error-fill, -.ideditor .layer-keepRight .qa_error .qa_error-fill, -.ideditor .layer-improveOSM .qa_error .qa_error-fill { +.ideditor .qa-header-icon .qaItem-fill, +.ideditor .layer-keepRight .qaItem .qaItem-fill, +.ideditor .layer-improveOSM .qaItem .qaItem-fill, +.ideditor .layer-osmose .qaItem .qaItem-fill { stroke: #333; stroke-width: 1.3px; /* NOTE: likely a better way to scale the icon stroke */ } @@ -2741,117 +2840,120 @@ display: none; height: 15px; } -/* adjustment for error icon */ - -.ideditor .error-header-icon .preset-icon-28 { +/* adjustment to center QA icons */ +.ideditor .qa-header-icon .preset-icon-28 { top: auto; left: auto; } - -.ideditor .error-header-icon { +.ideditor .qa-header-icon { + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; - justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } -/* Keep Right Errors +/* Keep Right Issues ------------------------------------------------------- */ -.ideditor .keepRight.error_type-20, -.ideditor .keepRight.error_type-40, -.ideditor .keepRight.error_type-210, -.ideditor .keepRight.error_type-270, -.ideditor .keepRight.error_type-310, -.ideditor .keepRight.error_type-320, -.ideditor .keepRight.error_type-350 { /* improper bridge tag */ +.ideditor .keepRight.itemType-20, +.ideditor .keepRight.itemType-40, +.ideditor .keepRight.itemType-210, +.ideditor .keepRight.itemType-270, +.ideditor .keepRight.itemType-310, +.ideditor .keepRight.itemType-320, +.ideditor .keepRight.itemType-350 { /* improper bridge tag */ color: #ff9; } -.ideditor .keepRight.error_type-50 { /* almost junctions */ +.ideditor .keepRight.itemType-50 { /* almost junctions */ color: #88f; } -.ideditor .keepRight.error_type-60, -.ideditor .keepRight.error_type-70, -.ideditor .keepRight.error_type-90, -.ideditor .keepRight.error_type-100, -.ideditor .keepRight.error_type-110, -.ideditor .keepRight.error_type-150, -.ideditor .keepRight.error_type-220, -.ideditor .keepRight.error_type-380 { /* non-physical sport tag */ +.ideditor .keepRight.itemType-60, +.ideditor .keepRight.itemType-70, +.ideditor .keepRight.itemType-90, +.ideditor .keepRight.itemType-100, +.ideditor .keepRight.itemType-110, +.ideditor .keepRight.itemType-150, +.ideditor .keepRight.itemType-220, +.ideditor .keepRight.itemType-380 { /* non-physical sport tag */ color: #5d0; } -.ideditor .keepRight.error_type-130 { /* disconnected ways */ +.ideditor .keepRight.itemType-130 { /* disconnected ways */ color: #fa3; } -.ideditor .keepRight.error_type-170 { /* FIXME tag */ +.ideditor .keepRight.itemType-170 { /* FIXME tag */ color: #ff0; } -.ideditor .keepRight.error_type-190 { /* intersection without junction */ +.ideditor .keepRight.itemType-190 { /* intersection without junction */ color: #f33; } -.ideditor .keepRight.error_type-200 { /* overlapping ways */ +.ideditor .keepRight.itemType-200 { /* overlapping ways */ color: #fdbf6f; } -.ideditor .keepRight.error_type-160, -.ideditor .keepRight.error_type-230 { /* layer conflict */ +.ideditor .keepRight.itemType-160, +.ideditor .keepRight.itemType-230 { /* layer conflict */ color: #b60; } -.ideditor .keepRight.error_type-280 { /* boundary issues */ +.ideditor .keepRight.itemType-280 { /* boundary issues */ color: #5f47a0; } -.ideditor .keepRight.error_type-180, -.ideditor .keepRight.error_type-290 { /* turn restriction issues */ +.ideditor .keepRight.itemType-180, +.ideditor .keepRight.itemType-290 { /* turn restriction issues */ color: #ace; } -.ideditor .keepRight.error_type-300, -.ideditor .keepRight.error_type-390 { /* missing tracktype */ +.ideditor .keepRight.itemType-300, +.ideditor .keepRight.itemType-390 { /* missing tracktype */ color: #090; } -.ideditor .keepRight.error_type-360, -.ideditor .keepRight.error_type-370, -.ideditor .keepRight.error_type-410 { /* website issues */ +.ideditor .keepRight.itemType-360, +.ideditor .keepRight.itemType-370, +.ideditor .keepRight.itemType-410 { /* website issues */ color: #f9b; } -.ideditor .keepRight.error_type-120, -.ideditor .keepRight.error_type-400 { /* geometry / turn angles */ +.ideditor .keepRight.itemType-120, +.ideditor .keepRight.itemType-400 { /* geometry / turn angles */ color: #c35; } -/* ImproveOSM Errors +/* ImproveOSM Issues ------------------------------------------------------- */ -.ideditor .improveOSM.error_type-ow { /* missing one way */ +.ideditor .improveOSM.itemType-ow { /* missing one way */ color: #1E90FF; } -.ideditor .improveOSM.error_type-mr-road { /* missing road */ +.ideditor .improveOSM.itemType-mr-road { /* missing road */ color: #B452CD; } -.ideditor .improveOSM.error_type-mr-path { /* missing path */ +.ideditor .improveOSM.itemType-mr-path { /* missing path */ color: #A0522D; } -.ideditor .improveOSM.error_type-mr-parking { /* missing parking */ +.ideditor .improveOSM.itemType-mr-parking { /* missing parking */ color: #EEEE00; } -.ideditor .improveOSM.error_type-mr-both { /* missing road+parking */ +.ideditor .improveOSM.itemType-mr-both { /* missing road+parking */ color: #FFA500; } -.ideditor .improveOSM.error_type-tr { /* missing turn restriction */ +.ideditor .improveOSM.itemType-tr { /* missing turn restriction */ color: #EC1C24; } - /* Custom Map Data (geojson, gpx, kml, vector tile) */ .ideditor .layer-mapdata { pointer-events: none; @@ -2899,11 +3001,11 @@ 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; @@ -2960,7 +3062,10 @@ display: none; stroke-width: 20px; } .ideditor.mode-browse .fill-partial path.area.fill, -.ideditor.mode-select .fill-partial path.area.fill { +.ideditor.mode-select .fill-partial path.area.fill, +.ideditor.mode-select-data .fill-partial path.area.fill, +.ideditor.mode-select-error .fill-partial path.area.fill, +.ideditor.mode-select-note .fill-partial path.area.fill { pointer-events: visibleStroke; } /* Basics @@ -2974,44 +3079,63 @@ display: none; border: 0; overflow: hidden; - font: normal 12px/1.6667 "-apple-system", BlinkMacSystemFont, + /* Establish a local stacking context so all elements within iD are on the + same layer relative to elements outside iD - #7457. + https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context + */ + position: relative; + z-index: 0; + + font: normal 12px/1.6667 ui-sans-serif, "-apple-system", BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial", sans-serif; color: #333; + -ms-touch-action: none; + + touch-action: none; -ms-user-select: none; -ms-content-zooming: none; - - /* Establish a local stacking context so all elements within iD are on the - same layer relative to elements outside iD - #7457. - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context - */ - position: relative; - z-index: 0; +} +.ideditor div { + /* disable pinch-to-zoom of the UI on touch devices */ + -ms-touch-action: pan-x pan-y; + touch-action: pan-x pan-y; } -.ideditor #content { +.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; + touch-action: none; } -.ideditor #content.active { +.ideditor .main-content.active { -webkit-filter: none !important; - filter: none !important; - -webkit-duration: 200ms; - transition-duration: 200ms; + filter: none !important; + -webkit-transition-duration: 200ms; + -o-transition-duration: 200ms; + transition-duration: 200ms; } -.ideditor #content.inactive { +.ideditor .main-content.inactive { -webkit-filter: grayscale(80%) brightness(80%); - filter: grayscale(80%) brightness(80%); - -webkit-duration: 200ms; - transition-duration: 200ms; + filter: grayscale(80%) brightness(80%); + -webkit-transition-duration: 200ms; + -o-transition-duration: 200ms; + transition-duration: 200ms; } -.ideditor #defs { +.ideditor #ideditor-defs { /* Can't be display: none or the clippaths are ignored. */ position: absolute; width: 0; @@ -3019,9 +3143,8 @@ display: none; } .ideditor div, .ideditor textarea, .ideditor label, .ideditor input, .ideditor form, .ideditor span, .ideditor ul, .ideditor li, .ideditor ol, .ideditor a, .ideditor button, .ideditor h1, .ideditor h2, .ideditor h3, .ideditor h4, .ideditor h5, .ideditor p, .ideditor img { - -moz-box-sizing: border-box; -webkit-box-sizing: border-box; - box-sizing: border-box; + box-sizing: border-box; } .ideditor a, .ideditor button, .ideditor input, .ideditor textarea { @@ -3034,8 +3157,7 @@ display: none; } .ideditor a, -.ideditor button, -.ideditor .radial-menu-item { +.ideditor button { cursor: pointer; } @@ -3062,20 +3184,42 @@ 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; } -.ideditor ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ +.ideditor ::-webkit-input-placeholder { + color: #aaa; + opacity: 1; /* Firefox */ +} + +.ideditor ::-moz-placeholder { + color: #aaa; + opacity: 1; /* Firefox */ +} + +.ideditor :-ms-input-placeholder { color: #aaa; opacity: 1; /* Firefox */ } -.ideditor :-ms-input-placeholder { /* Internet Explorer 10-11 */ + +.ideditor ::-ms-input-placeholder { color: #aaa; + opacity: 1; /* Firefox */ } -.ideditor ::-ms-input-placeholder { /* Microsoft Edge */ + +.ideditor ::placeholder { color: #aaa; + opacity: 1; /* Firefox */ } .ideditor p { @@ -3092,63 +3236,84 @@ display: none; .ideditor strong { font-weight: bold; } -.ideditor a:visited, .ideditor a { +.ideditor a, +.ideditor a:visited, +.ideditor a:active { color: #7092ff; } -.ideditor a:hover { +.ideditor a:focus { color: #597be7; } +@media (hover: hover) { + .ideditor a:hover { + color: #597be7; + } +} .ideditor kbd { display: inline-block; 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; margin: 0 2px; border-bottom-color: #bbb; border-radius: 3px; - box-shadow: inset 0 -1px 0 #bbb; + -webkit-box-shadow: inset 0 -1px 0 #bbb; + box-shadow: inset 0 -1px 0 #bbb; } -/* 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 code { + font-family: ui-monospace, monospace, monospace; + background: rgba(174, 174, 174, 0.25); + padding: 1px 2px; } +/* Forms +------------------------------------------------------- */ .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; - text-overflow: ellipsis; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + overflow: auto; +} +.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] { + /* need this since line-height interpretation may vary by font or browser */ + height: 2.585em; } -.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 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, +.ideditor input:active, .ideditor textarea:focus, .ideditor input:focus { background-color: #f1f1f1; @@ -3163,20 +3328,48 @@ display: none; .ideditor input[type="checkbox"], .ideditor input[type="radio"] { - float: left; width: 14px; height: 14px; margin-right: 5px; - margin-top: 3px; cursor: pointer; + vertical-align: middle; } .ideditor[dir='rtl'] input[type="checkbox"], .ideditor[dir='rtl'] input[type="radio"] { - float: right; margin-left: 5px; margin-right: 0; } +.ideditor input.mixed::-webkit-input-placeholder, .ideditor textarea.mixed::-webkit-input-placeholder { + font-style: italic; +} + +.ideditor input.mixed::-moz-placeholder, .ideditor textarea.mixed::-moz-placeholder { + font-style: italic; +} + +.ideditor input.mixed:-ms-input-placeholder, .ideditor textarea.mixed:-ms-input-placeholder { + font-style: italic; +} + +.ideditor input.mixed::-ms-input-placeholder, .ideditor textarea.mixed::-ms-input-placeholder { + font-style: italic; +} + +.ideditor input.mixed::placeholder, +.ideditor textarea.mixed::placeholder { + 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; @@ -3245,7 +3438,8 @@ display: none; color: #a9a9a9; } .ideditor .content { - box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25); + -webkit-box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25); + box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25); } .ideditor .loading { background: url(<%= asset_path("iD/img/loader_bg.gif") %>); @@ -3257,21 +3451,24 @@ 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:hover { +.ideditor button:active, +.ideditor button.hover { background-color: #ececec; } +@media (hover: hover) { + .ideditor button:hover { + background-color: #ececec; + } +} .ideditor button.active { background: #7092ff; } @@ -3312,41 +3509,76 @@ display: none; .ideditor button.action { background: #7092ff; color: #fff; + font-weight: bold; } .ideditor button.action:focus, -.ideditor button.action:hover { +.ideditor button.action:active { background: #597be7; } .ideditor button.secondary-action { background: #ececec; + font-weight: bold; } .ideditor button.secondary-action:focus, -.ideditor button.secondary-action:hover { +.ideditor button.secondary-action:active { background: #cccccc; } .ideditor button.action.disabled, -.ideditor button.action.disabled:hover, -.ideditor button[disabled].action, -.ideditor button[disabled].action:hover { +.ideditor button[disabled].action { background: #cccccc; color: #888; cursor: not-allowed; } +.ideditor button.action, +.ideditor button.secondary-action { + padding: 10px 5px; +} + +@media (hover: hover) { + .ideditor button.action:hover { + background: #597be7; + } + .ideditor button.secondary-action:hover { + background: #cccccc; + } + .ideditor button.action.disabled:hover, + .ideditor button[disabled].action:hover { + background: #cccccc; + color: #888; + cursor: not-allowed; + } +} + /* Icons ------------------------------------------------------- */ .ideditor .icon { - vertical-align: top; + vertical-align: middle; width: 20px; height: 20px; } +.ideditor .icon.operation use { + fill: #222; + color: #79f; +} +.ideditor button.disabled .icon.operation use, +.ideditor .icon.operation.disabled use { + fill: rgba(32,32,32,.2); + color: rgba(40,40,40,.2); +} + +.ideditor .icon.monochrome use { + fill: currentColor; +} + .ideditor .icon.inline { vertical-align: text-top; - width: 14px; - height: 14px; + display: inline-block; + width: 1.17em; + height: 1.17em; margin: 0px 3px; } @@ -3365,6 +3597,7 @@ display: none; .ideditor .icon.light { color: #fff; + fill: currentColor; } .ideditor .icon.created { color: #00ca07; @@ -3388,33 +3621,24 @@ display: none; color: #333; } -.ideditor .notification-badge { - display: block; - position: absolute; - width: 10px; - height: 10px; - right: 7px; - top: 9px; -} - -.ideditor .notification-badge.hide { - display: none; -} - /* Toolbar / Persistent UI Elements ------------------------------------------------------- */ -.ideditor #bar-wrap { - position: absolute; - left: 0; - top: 0; - right: 0; +.ideditor .top-toolbar-wrap { + position: relative; z-index: 101; } -.ideditor #bar { +.ideditor .top-toolbar { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-flow: row nowrap; - justify-content: space-between; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; padding: 10px 0 0 0; overflow-x: auto; overflow-y: hidden; @@ -3425,65 +3649,111 @@ display: none; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE, Edge */ } -.ideditor #bar::-webkit-scrollbar { +.ideditor .top-toolbar::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } -.ideditor #bar .toolbar-item { +.ideditor .top-toolbar .toolbar-item { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex: 0 1 auto; - flex-flow: column wrap; - justify-content: center; -} -.ideditor #bar .toolbar-item .item-content { + -webkit-box-flex: 0; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-flow: column wrap; + flex-flow: column wrap; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} +.ideditor .top-toolbar .toolbar-item .item-content { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex: 0 1 auto; - flex-flow: row nowrap; - justify-content: center; + -webkit-box-flex: 0; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; height: 40px; width: auto; margin: 0 5px; } -.ideditor[dir='ltr'] #bar .toolbar-item:last-child .item-content, -.ideditor[dir='rtl'] #bar .toolbar-item:first-child .item-content { +.ideditor[dir='ltr'] .top-toolbar .toolbar-item:last-child .item-content, +.ideditor[dir='rtl'] .top-toolbar .toolbar-item:first-child .item-content { margin-right: 10px; } -.ideditor[dir='ltr'] #bar .toolbar-item:first-child .item-content, -.ideditor[dir='rtl'] #bar .toolbar-item:last-child .item-content { +.ideditor[dir='ltr'] .top-toolbar .toolbar-item:first-child .item-content, +.ideditor[dir='rtl'] .top-toolbar .toolbar-item:last-child .item-content { margin-left: 10px; } -.ideditor #bar .toolbar-item .item-label { +.ideditor[dir='ltr'] .top-toolbar .toolbar-item:last-child .item-label, +.ideditor[dir='rtl'] .top-toolbar .toolbar-item:first-child .item-label { + padding-right: 5px; +} +.ideditor[dir='ltr'] .top-toolbar .toolbar-item:first-child .item-label, +.ideditor[dir='rtl'] .top-toolbar .toolbar-item:last-child .item-label { + padding-left: 5px; +} +.ideditor .top-toolbar .toolbar-item .item-label { text-align: center; font-size: 11px; white-space: nowrap; margin: 1px 2px 2px 2px; } -.ideditor #bar .toolbar-item.spacer { +.ideditor .top-toolbar .toolbar-item.spacer { width: 100%; - flex-grow: 2; + -webkit-box-flex: 2; + -ms-flex-positive: 2; + flex-grow: 2; } -.ideditor #bar .toolbar-item:first-child { - justify-content: flex-start; +.ideditor .top-toolbar .toolbar-item:first-child { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; } -.ideditor #bar .toolbar-item:last-child { - justify-content: flex-end; +.ideditor .top-toolbar .toolbar-item:last-child { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; } -.ideditor #bar .toolbar-item:empty:not(.spacer) { +.ideditor .top-toolbar .toolbar-item:empty:not(.spacer) { display: none; } .ideditor button.bar-button { - flex: 0 0 auto; - flex-flow: row nowrap; - align-items: center; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; padding: 0 10px; min-width: 30px; white-space: nowrap; + display: -webkit-box; + display: -ms-flexbox; display: flex; + font-weight: bold; } .ideditor button.bar-button .icon { - flex: 0 0 20px; + -webkit-box-flex: 0; + -ms-flex: 0 0 20px; + flex: 0 0 20px; } .ideditor button.bar-button .label { - flex: 0 1 auto; + -webkit-box-flex: 0; + -ms-flex: 0 1 auto; + flex: 0 1 auto; padding: 0 5px; } @@ -3504,7 +3774,7 @@ display: none; text-align: center; } -.ideditor .help-wrap svg.icon.pre-text.add-note, +.ideditor .help-pane svg.icon.inline.add-note, .ideditor button.add-note svg.icon { height: 15px; width: 15px; @@ -3521,7 +3791,7 @@ display: none; margin-left: 4px; margin-right: unset; } -.ideditor .help-wrap svg.icon.pre-text.add-note { +.ideditor .help-pane svg.icon.inline.add-note { margin-left: 3px; margin-right: 3px; } @@ -3530,29 +3800,31 @@ 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%; } .ideditor[dir='rtl'] .spinner img { - -moz-transform: scaleX(-1); - -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); - transform: scaleX(-1); - filter: FlipH; + -ms-transform: scaleX(-1); + transform: scaleX(-1); + -webkit-filter: FlipH; + filter: FlipH; -ms-filter: "FlipH"; } -.ideditor #bar.narrow .spinner, -.ideditor #bar.narrow button.bar-button .label { +.ideditor .top-toolbar.narrow .spinner, +.ideditor .top-toolbar.narrow button.bar-button .label { display: none; } -.ideditor #bar.narrow button .count { +.ideditor .top-toolbar.narrow button .count { border-left-width: 0; border-right-width: 0; } @@ -3568,17 +3840,29 @@ display: none; ------------------------------------------------------- */ .ideditor .header { border-bottom: 1px solid #ccc; - height: 60px; + padding: 20px 40px; position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; } .ideditor .header h3 { text-align: center; margin-bottom: 0; - white-space: nowrap; - text-overflow: ellipsis; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; overflow: hidden; - padding: 20px; + padding: 0; } .ideditor .header button, @@ -3595,20 +3879,14 @@ display: none; } .ideditor .field-help-title button.close, -.ideditor .sidebar-component .header button.data-editor-close, -.ideditor .sidebar-component .header button.note-editor-close, -.ideditor .sidebar-component .header button.error-editor-close, -.ideditor .entity-editor-pane .header button.preset-close, +.ideditor .sidebar .header button.close, .ideditor .preset-list-pane .header button.preset-choose { position: absolute; right: 0; top: 0; } .ideditor[dir='rtl'] .field-help-title button.close, -.ideditor[dir='rtl'] .sidebar-component .header button.data-editor-close, -.ideditor[dir='rtl'] .sidebar-component .header button.note-editor-close, -.ideditor[dir='rtl'] .sidebar-component .header button.error-editor-close, -.ideditor[dir='rtl'] .entity-editor-pane .header button.preset-close, +.ideditor[dir='rtl'] .sidebar .header button.close, .ideditor[dir='rtl'] .preset-list-pane .header button.preset-choose { left: 0; right: auto; @@ -3646,46 +3924,39 @@ display: none; position: absolute; bottom: 0; margin: 0; - padding: 5px 20px 5px 20px; + padding: 0 15px; border-top: 1px solid #ccc; background-color: #f6f6f6; width: 100%; + height: 2.5em; z-index: 1; - flex-wrap: wrap; - justify-content: space-between; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; list-style: none; + display: -webkit-box; + display: -ms-flexbox; display: flex; } .ideditor .footer > a { - justify-content: center; -} - -.ideditor .header-container { - display: flex; - justify-content: space-between; -} - -.ideditor .header-block-outer { - width: 20%; -} - -.ideditor .header-block-close { - display: flex; - justify-content: flex-end; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } -/* Hide/Toggle collapsable sections (aka Disclosure) +/* 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, @@ -3693,13 +3964,13 @@ display: none; display: inline-block; font-size: 14px; font-weight: bold; - padding-bottom: 5px; + margin-bottom: 5px; } /* Sidebar / Inspector ------------------------------------------------------- */ -.ideditor #sidebar { +.ideditor .sidebar { position: relative; float: left; height: 100%; @@ -3709,31 +3980,36 @@ display: none; border: 0px solid #ccc; border-right-width: 1px; } -.ideditor[dir='rtl'] #sidebar { +.ideditor[dir='rtl'] .sidebar { float: right; border-right-width: 0px; border-left-width: 1px; } -.ideditor #sidebar-resizer { +.ideditor .sidebar-resizer { position: absolute; top: 0; - right: -6px; + right: -10px; + width: 10px; height: 100%; - width: 6px; cursor: col-resize; + /* disable drag-to-select */ + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } -.ideditor[dir='rtl'] #sidebar-resizer { +.ideditor[dir='rtl'] .sidebar-resizer { right: auto; left: -6px; } -.ideditor #sidebar.collapsed #sidebar-resizer { +.ideditor .sidebar.collapsed .sidebar-resizer { /* make target wider to avoid the user accidentally resizing window */ width: 10px; right: -10px; } -.ideditor[dir='rtl'] #sidebar.collapsed #sidebar-resizer { +.ideditor[dir='rtl'] .sidebar.collapsed .sidebar-resizer { left: -10px; } @@ -3743,14 +4019,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 { @@ -3764,7 +4046,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 { @@ -3774,6 +4063,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%; @@ -3789,44 +4088,43 @@ display: none; .ideditor .inspector-body { overflow-y: scroll; overflow-x: hidden; - position: absolute; - right: 0; - left: 0; - bottom: 0; + position: relative; + height: 100%; + -webkit-box-flex: 1; + -ms-flex: 1 1 100%; + flex: 1 1 100%; } - -.ideditor .feature-list-pane .inspector-body, -.ideditor .preset-list-pane .inspector-body { - top: 120px; +.ideditor .entity-editor { + padding: 20px; } -.ideditor .entity-editor-pane .inspector-body, -.ideditor .selection-list-pane .inspector-body { - top: 60px; +/* preserve extra space at bottom of inspector to allow for dropdown options - #5280 */ +.ideditor .entity-editor > div:last-child { + margin-bottom: 150px; } -.ideditor .inspector-inner { - padding: 20px 20px 5px 20px; +.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; +.ideditor .sidebar .search-header .icon { + display: inline-block; position: absolute; left: 10px; - top: 80px; + height: 100%; pointer-events: none; } -.ideditor[dir='rtl'] #sidebar .search-header .icon { +.ideditor[dir='rtl'] .sidebar .search-header .icon { left: auto; right: 10px; } -.ideditor #sidebar .search-header input { - position: absolute; - top: 60px; - height: 60px; +.ideditor .sidebar .search-header input { width: 100%; - padding: 5px 10px; + padding: 0 10px; + height: 3em; border-radius: 0; border-width: 0; border-bottom-width: 1px; @@ -3835,6 +4133,11 @@ display: none; font-weight: bold; } +.ideditor .section:not(:last-child), +.ideditor .map-pane .section { + margin-bottom: 30px; +} + /* Feature List / Search Results ------------------------------------------------------- */ @@ -3842,49 +4145,39 @@ display: none; width: 100%; } .ideditor .no-results-item, -.ideditor .geocode-item, .ideditor .feature-list-item { width: 100%; position: relative; border-bottom: 1px solid #ccc; border-radius: 0; } +.ideditor .no-results-item { + padding: 10px; + font-weight: bold; +} .ideditor .geocode-item { - width: 50%; - background-color: #ccc; - left: 25%; - margin-top: 30px; - border-radius: 2px; -} - -.ideditor[dir='rtl'] .geocode-item { - left: -25%; -} - -.ideditor .geocode-item:hover { - background-color: #aaa; + width: 100%; + max-width: 200px; + margin: 30px auto; + min-height: 40px; } .ideditor .feature-list-item { - background-color: #fff; - font-weight: bold; - height: 40px; - line-height: 20px; -} -.ideditor .feature-list-item:hover { - background-color: #ececec; -} -.ideditor .feature-list-item button { - background: transparent; + display: -webkit-box; + display: -ms-flexbox; + display: flex; } .ideditor .feature-list-item .label { text-align: left; - padding: 10px 10px; + padding: 10px; white-space: nowrap; - text-overflow: ellipsis; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; overflow: hidden; - border-left: 1px solid rgba(0, 0, 0, .1); + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; } .ideditor[dir='rtl'] .feature-list-item .label { text-align: right; @@ -3894,20 +4187,26 @@ display: none; opacity: .5; } .ideditor .feature-list-item .close { - float: right; padding: 10px; + } .ideditor .feature-list-item .close .icon { - opacity: 1; + opacity: 0.5; } .ideditor .feature-list-item .entity-type { color: #7092ff; + font-weight: bold; } -.ideditor .feature-list-item:hover .entity-type { +.ideditor .feature-list-item:active .entity-type, +.ideditor .feature-list-item:focus .entity-type { color: #597be7; } +@media (hover: hover) { + .ideditor .feature-list-item:hover .entity-type { + color: #597be7; + } +} .ideditor .feature-list-item .entity-name { - font-weight: normal; color: #666; padding-left: 10px; } @@ -3915,14 +4214,21 @@ display: none; padding-left: 0; padding-right: 10px; } - +.ideditor .section-selected-features .feature-list { + border: 1px solid #ccc; + border-radius: 4px; + overflow: hidden; + margin-top: 5px; +} +.ideditor .section-selected-features .feature-list-item:last-child { + border: none; +} /* Preset List and Icons ------------------------------------------------------- */ .ideditor .preset-list { width: 100%; padding: 20px 20px 10px 20px; - border-bottom: 1px solid #ccc; } .ideditor .preset-list-item { @@ -3931,7 +4237,9 @@ display: none; } .ideditor .preset-list-button-wrap { - height: 62px; + min-height: 62px; + display: -webkit-box; + display: -ms-flexbox; display: flex; border: 1px solid #ccc; border-radius: 4px; @@ -3941,7 +4249,12 @@ display: none; width: 100%; height: 100%; position: relative; + display: -webkit-box; + 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 { @@ -3953,19 +4266,31 @@ display: none; width: 60px; height: 60px; text-align: center; + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; - justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; } .ideditor .preset-icon-container.small { width: 40px; height: 40px; - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; } .ideditor .preset-icon-container img.image-icon { width: 50px; height: 50px; - object-fit: contain; + -o-object-fit: contain; + object-fit: contain; border-radius: 2px; z-index: 2; visibility: hidden; @@ -4031,7 +4356,8 @@ display: none; stroke-width: 1.5px; stroke: #333; fill: #efefef; - backface-visibility: hidden; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } .ideditor .preset-icon { @@ -4047,57 +4373,88 @@ display: none; right: 0; width: 100%; height: 100%; - transform: scale(0.48); + -webkit-transform: scale(0.48); + -ms-transform: scale(0.48); + transform: scale(0.48); } .ideditor .preset-icon-container.small .preset-icon.point-geom .icon { - transform: translateY(-7%) scale(0.27); + -webkit-transform: translateY(-7%) scale(0.27); + -ms-transform: translateY(-7%) scale(0.27); + transform: translateY(-7%) scale(0.27); } .ideditor .preset-icon-container.small .preset-icon.point-geom.preset-icon-iD .icon { - transform: translateY(-9%) scale(0.5); + -webkit-transform: translateY(-9%) scale(0.5); + -ms-transform: translateY(-9%) scale(0.5); + transform: translateY(-9%) scale(0.5); } .ideditor .preset-icon.framed .icon { - transform: scale(0.4); + -webkit-transform: scale(0.4); + -ms-transform: scale(0.4); + transform: scale(0.4); } .ideditor .preset-icon.framed.line-geom .icon, .ideditor .preset-icon.framed.route-geom .icon { top: 20%; - transform: translateY(-30%) scale(0.4); + -webkit-transform: translateY(-30%) scale(0.4); + -ms-transform: translateY(-30%) scale(0.4); + transform: translateY(-30%) scale(0.4); } .ideditor .preset-icon-iD .icon { - transform: scale(1); + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); } .ideditor .preset-icon-iD.framed .icon { - transform: scale(0.74); + -webkit-transform: scale(0.74); + -ms-transform: scale(0.74); + transform: scale(0.74); } .ideditor .preset-icon-iD.framed.line-geom .icon, .ideditor .preset-icon-iD.framed.route-geom .icon { - transform: translateY(-30%) scale(0.74); + -webkit-transform: translateY(-30%) scale(0.74); + -ms-transform: translateY(-30%) scale(0.74); + transform: translateY(-30%) scale(0.74); } .ideditor .preset-icon-container.fallback .preset-icon .icon { - transform: scale(0.5) !important; + -webkit-transform: scale(0.5) !important; + -ms-transform: scale(0.5) !important; + transform: scale(0.5) !important; } .ideditor .preset-list-button .label { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-flow: row wrap; - align-items: center; - background-color: #f6f6f6; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background: #f6f6f6; text-align: left; - position: absolute; - top: 0; - bottom: 0; - right: 0; padding: 5px 10px; - left: 60px; border-left: 1px solid rgba(0, 0, 0, .1); + -webkit-box-flex: 1; + -ms-flex: 1 1 100%; + flex: 1 1 100%; + -ms-flex-item-align: stretch; + align-self: stretch; } .ideditor[dir='rtl'] .preset-list-button .label { text-align: right; - left: 0; - right: 60px; border-left: none; border-right: 1px solid rgba(0, 0, 0, .1); } +.ideditor[dir='ltr'] .preset-list-item.mixed-types .preset-list-button .label { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; +} +.ideditor[dir='rtl'] .preset-list-item.mixed-types .preset-list-button .label { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; +} .ideditor[dir='ltr'] .category .preset-list-button .label { border-radius: 0px 4px 4px 0px; } @@ -4105,51 +4462,63 @@ display: none; border-radius: 4px 0px 0px 4px; } +.ideditor .preset-list-item.mixed-types .label { + font-style: italic; +} + .ideditor .preset-list-button .label-inner { width: 100%; + line-height: 1.35em; } .ideditor .preset-list-button .label-inner .namepart { - height: 17px; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; + -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:hover .label, .ideditor .preset-list-button:focus .label, +.ideditor .preset-list-button:active .label, .ideditor .preset-list-button.disabled, .ideditor .preset-list-button.disabled .label { background-color: #ececec; } +@media (hover: hover) { + .ideditor .preset-list-button:hover .label { + background-color: #ececec; + } +} -.ideditor .preset-list-item button.tag-reference-button { - height: 100%; +.ideditor .preset-list-button-wrap button.tag-reference-button { width: 32px; - flex: 0 0 auto; + -webkit-box-flex: 0; + -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-item button.tag-reference-button { +.ideditor[dir='ltr'] .preset-list-button-wrap button.tag-reference-button { border-left: 1px solid #ccc; } -.ideditor[dir='rtl'] .preset-list-item button.tag-reference-button { +.ideditor[dir='rtl'] .preset-list-button-wrap button.tag-reference-button { border-right: 1px solid #ccc; } -.ideditor[dir='ltr'] .preset-list-item button:last-child { +.ideditor[dir='ltr'] .preset-list-button-wrap:not(.category) button:last-child { border-radius: 0 4px 4px 0; } -.ideditor[dir='rtl'] .preset-list-item button:last-child { +.ideditor[dir='rtl'] .preset-list-button-wrap:not(.category) button:last-child { border-radius: 4px 0 0 4px; } - -.ideditor .preset-list-item button.tag-reference-button:hover { - background: #f1f1f1; -} -.ideditor .preset-list-item button.tag-reference-button .icon { +.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, @@ -4174,12 +4543,11 @@ display: none; } .ideditor .subgrid .preset-list { + width: auto; padding: 10px; - margin-top: 0; + margin: 0 -10px; border: 0; border-radius: 8px; - width: -webkit-calc(100% + 20px); - margin-left: -10px; } .ideditor .subgrid .preset-list > *:last-child { margin-bottom: 0; @@ -4192,54 +4560,41 @@ display: none; width: 0; height: 0; margin-left: 50%; - margin-left: -webkit-calc(50% - 10px); + margin-left: calc(50% - 10px); } /* Quick links ------------------------------------------------------- */ .ideditor .quick-links { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-flow: row wrap; - justify-content: flex-end; - padding: 0 20px; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + padding: 5px 0 0 0; } .ideditor .quick-link { margin: 0 5px; } -.ideditor .data-editor .quick-links, -.ideditor .error-editor .quick-links, -.ideditor .note-editor .quick-links { - padding: 5px 0 0 0; -} - /* Entity/Preset Editor ------------------------------------------------------- */ -.ideditor .entity-issues, -.ideditor .preset-editor { - overflow: hidden; - padding: 10px 0px 5px 0px; -} -.ideditor .entity-issues a.hide-toggle, -.ideditor .preset-editor a.hide-toggle { - margin: 0 20px 5px 20px; -} -.ideditor .entity-issues .disclosure-wrap-entity_issues, -.ideditor .preset-editor .form-fields-container { +.ideditor .section .grouped-items-area { padding: 10px; - margin: 0 10px 10px 10px; + margin: 0 -10px 10px -10px; border-radius: 8px; background: #ececec; } -.ideditor .entity-issues .disclosure-wrap-entity_issues:empty, -.ideditor .preset-editor .form-fields-container:empty { +.ideditor .section .grouped-items-area:empty { display: none; } -.ideditor .entity-editor-pane .preset-list-item { - margin-bottom: 0; -} /* The parts of a field: @@ -4263,14 +4618,18 @@ display: none; */ .ideditor .form-field { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-flow: row wrap; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row wrap; + flex-flow: row wrap; margin-bottom: 10px; width: 100%; -webkit-transition: margin-bottom 200ms; - -moz-transition: margin-bottom 200ms; - -o-transition: margin-bottom 200ms; - transition: margin-bottom 200ms; + -o-transition: margin-bottom 200ms; + transition: margin-bottom 200ms; } .ideditor .form-field.nowrap, @@ -4280,10 +4639,16 @@ display: none; /* A `label` element that wraps the top section */ .ideditor .field-label { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-flow: row nowrap; - flex: 1 1 100%; - height: 30px; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -webkit-box-flex: 1; + -ms-flex: 1 1 100%; + flex: 1 1 100%; position: relative; font-weight: bold; color: #333; @@ -4293,11 +4658,19 @@ display: none; overflow: hidden; } .ideditor .field-label .label-text { - flex: 1 1 auto; - padding: 5px 0 5px 10px; + overflow: hidden; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + 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; } .ideditor .label-text .label-textannotation svg.icon { @@ -4310,22 +4683,23 @@ display: none; } .ideditor .field-label button { - flex: 0 0 32px; + -webkit-box-flex: 0; + -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: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, @@ -4341,11 +4715,17 @@ display: none; /* A `div` element that wraps the bottom section */ .ideditor .form-field-input-wrap { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-flow: row nowrap; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; width: 100%; - flex: 1 1 auto; - min-height: 30px; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; border-top: 0; border-radius: 0 0 4px 4px; } @@ -4358,24 +4738,24 @@ display: none; .ideditor .form-field-input-wrap > label, .ideditor .form-field-input-wrap > textarea, .ideditor .form-field-input-wrap > ul.chiplist { - flex: 1 1 auto; - min-height: 30px; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; 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 { - flex: 0 0 auto; - height: 30px; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 32px; position: relative; background-color: #fff; @@ -4389,9 +4769,15 @@ display: none; border-left-width: 1px; border-right-width: 0; } -.ideditor .form-field-button:hover { +.ideditor .form-field-button:active, +.ideditor .form-field-button:focus { background-color: #f1f1f1; } +@media (hover: hover) { + .ideditor .form-field-button:hover { + background-color: #f1f1f1; + } +} .ideditor .form-field-button .icon { fill: #333; opacity: .5; @@ -4411,15 +4797,24 @@ display: none; ------------------------------------------------------- */ .ideditor .form-field-input-access, .ideditor .form-field-input-cycleway { - flex: 1 1 auto; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-flow: row wrap; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row wrap; + flex-flow: row wrap; } /* Field - lists with labeled input items ------------------------------------------------------- */ .ideditor .form-field ul.rows { - flex: 1 1 auto; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; border: 1px solid #ccc; border-top: 0; border-radius: 0 0 4px 4px; @@ -4433,12 +4828,19 @@ display: none; border-top: 0; } .ideditor .form-field ul.rows li { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-flow: row nowrap; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -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 { - flex: 1 1 auto; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; width: 100%; border-radius: 0; } @@ -4480,6 +4882,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 { @@ -4500,9 +4903,16 @@ display: none; } .ideditor .form-field-input-multicombo li { + display: -webkit-inline-box; + display: -ms-inline-flexbox; display: inline-flex; - flex-flow: row nowrap; - align-items: center; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; margin-bottom: 3px; margin-top: 3px; border-radius: 4px; @@ -4517,7 +4927,6 @@ display: none; .ideditor .form-field-input-multicombo li.chip { background-color: #eff2f7; border: 1px solid #ccd5e3; - line-height: 25px; max-width: 100%; } .ideditor[dir='ltr'] .form-field-input-multicombo li.chip { @@ -4527,17 +4936,26 @@ display: none; padding: 2px 5px 2px 0px; } .ideditor .form-field-input-multicombo li.chip.draggable { + cursor: -webkit-grab; cursor: grab; } .ideditor .form-field-input-multicombo li.chip.dragging { opacity: 0.75; z-index: 3000; + cursor: -webkit-grabbing; cursor: grabbing; } +.ideditor .form-field-input-multicombo li.mixed { + border-color: #eff2f7; + color: #888; + font-style: italic; +} .ideditor .form-field-input-multicombo li.chip span { display: block; - flex: 1 1 auto; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; overflow: hidden; word-wrap: break-word; } @@ -4551,18 +4969,18 @@ display: none; color: #a6b4ce; display: block; text-align: center; - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; } .ideditor .form-field-input-multicombo .input-wrap { border: 1px solid #ddd; width: 100px; - height: 31px; } .ideditor .form-field-input-multicombo input { border: none; width: 100%; - height: 100%; } .ideditor .form-field-input-multicombo input:focus { @@ -4633,8 +5051,12 @@ display: none; /* Field - Checkbox ------------------------------------------------------- */ .ideditor .form-field-input-check { + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; background: #fff; padding: 5px 10px; color: #7092ff; @@ -4643,34 +5065,48 @@ display: none; cursor: pointer; } .ideditor .form-field-input-check > input[type="checkbox"] { - flex: 0 1 auto; - min-height: 20px; + -webkit-box-flex: 0; + -ms-flex: 0 1 auto; + flex: 0 1 auto; width: 20px; margin-top: 0; } .ideditor .form-field-input-check > span { - flex: 1 1 auto; + -webkit-box-flex: 1; + -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 { - flex: 0 1 auto; +.ideditor .form-field-input-check > .reverser { + -webkit-box-flex: 0; + -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.hide { display: none; } - -.ideditor .form-field-input-check:hover { +.ideditor .form-field-input-check:active, +.ideditor .form-field-input-check:focus { background: #f1f1f1; } +@media (hover: hover) { + .ideditor .form-field-input-check:hover { + background: #f1f1f1; + } +} .ideditor .form-field-input-check .set { color: inherit; } @@ -4682,27 +5118,52 @@ display: none; /* Field - Radio button ------------------------------------------------------- */ .ideditor .form-field-input-radio { - flex: 1 1 auto; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-flow: row wrap; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row wrap; + flex-flow: row wrap; } .ideditor .form-field-input-radio > label { - flex: 1 1 auto; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-flow: row nowrap; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -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; } +.ideditor .form-field-input-radio > label.mixed { + font-style: italic; +} .ideditor .form-field-input-radio > label:last-child { border-radius: 0 0 4px 4px; } -.ideditor .form-field-input-radio > label:hover { +.ideditor .form-field-input-radio > label:active, +.ideditor .form-field-input-radio > label:focus { background-color: #ececec; } +@media (hover: hover) { + .ideditor .form-field-input-radio > label:hover { + background-color: #ececec; + } +} .ideditor .form-field-input-radio > label.active { background-color: #e8ebff; } @@ -4710,14 +5171,19 @@ display: none; border-bottom: 1px solid #ccc; } .ideditor .form-field-input-radio > label > input[type="radio"] { - flex: 0 1 auto; + -webkit-box-flex: 0; + -ms-flex: 0 1 auto; + flex: 0 1 auto; width: 20px; } .ideditor .form-field-input-radio > label > span { - flex: 1 1 auto; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; overflow: hidden; white-space: nowrap; - text-overflow: ellipsis; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; } /* Hide placeholder for radio buttons if another is active, or not in hover state */ @@ -4726,7 +5192,7 @@ display: none; padding: 0; opacity: 0; width: 0; - line-height: 0; + height: 0; display: block; overflow: hidden; } @@ -4734,15 +5200,23 @@ display: none; /* Field - Maxspeed ------------------------------------------------------- */ -.ideditor .form-field-input-maxspeed > input:first-of-type { +.ideditor .form-field-input-maxspeed input.maxspeed-number { + -ms-flex-preferred-size: 0; + flex-basis: 0; +} +.ideditor .form-field-input-maxspeed input.maxspeed-unit { + -webkit-box-flex: 0; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + width: 80px; +} +.ideditor[dir='ltr'] .form-field-input-maxspeed > input:first-of-type { border-radius: 0 0 0 4px; } .ideditor[dir='rtl'] .form-field-input-maxspeed > input:first-of-type { border-radius: 0 0 4px 0; } -.ideditor .form-field-input-maxspeed > input:last-of-type { /* unit field */ - flex: 0 1 80px; - width: 80px; +.ideditor[dir='ltr'] .form-field-input-maxspeed > input:last-of-type { border-left: 0; border-radius: 0 0 4px 0; } @@ -4779,7 +5253,8 @@ display: none; /* nested subfields for name in different languages */ .ideditor .localized-multilingual { padding: 0 10px; - flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; } .ideditor .localized-multilingual .entry { position: relative; @@ -4815,22 +5290,34 @@ display: none; /* Field - Address ------------------------------------------------------- */ .ideditor .form-field-input-address { - flex: 1 1 auto; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-flow: row wrap; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row wrap; + flex-flow: row wrap; border: 1px solid #ccc; border-top: 0px; } .ideditor .addr-row { - flex: 1 1 auto; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + display: -webkit-box; + display: -ms-flexbox; display: flex; width: 100%; - min-height: 30px; } .ideditor .addr-row > input { - flex: 1 1 auto; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; border-radius: 0; border-right: 0; border-bottom: 0; @@ -4866,22 +5353,38 @@ display: none; /* Field - Wikipedia ------------------------------------------------------- */ .ideditor .form-field-input-wikipedia { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-flow: row wrap; - flex: 1 1 auto; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; } .ideditor .wiki-lang-container, .ideditor .wiki-title-container { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-flow: row nowrap; - flex: 1 1 auto; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; width: 100%; } .ideditor .wiki-lang-container > input.wiki-lang, .ideditor .wiki-title-container > input.wiki-title { - flex: 1 1 auto; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; border-top: 0; border-radius: 0; } @@ -4920,10 +5423,10 @@ display: none; .ideditor .restriction-controls-container .restriction-controls { display: table; - -moz-user-select: none; -webkit-user-select: none; - -ms-user-select: none; - user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .ideditor .restriction-controls .restriction-control { @@ -4933,13 +5436,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; } @@ -4975,11 +5478,10 @@ display: none; color: #888; text-align: center; pointer-events: none; - - -moz-user-select: none; -webkit-user-select: none; - -ms-user-select: none; - user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .ideditor .restriction-help span { @@ -5017,10 +5519,21 @@ 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; - box-shadow: 0 4px 10px 1px rgba(0,0,0,.2); + -webkit-box-shadow: 0 4px 10px 1px rgba(0,0,0,.2); + box-shadow: 0 4px 10px 1px rgba(0,0,0,.2); margin-top: -1px; background: #fff; max-height: 245px; @@ -5034,15 +5547,22 @@ display: none; display: block; padding: 5px 10px; border-top: 1px solid #ccc; - text-overflow: ellipsis; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .ideditor .combobox a.selected, -.ideditor .combobox a:hover { +.ideditor .combobox a:active, +.ideditor .combobox a:focus { background: #ececec; } +@media (hover: hover) { + .ideditor .combobox a:hover { + background: #ececec; + } +} .ideditor .combobox a:first-child { border-top: 0; @@ -5052,10 +5572,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 { @@ -5090,7 +5612,8 @@ display: none; border-radius: 0 0 4px 4px; z-index: 20; background: rgba(255,255,255,0.95); - box-shadow: 0 0 30px 5px rgba(0,0,0,.4); + -webkit-box-shadow: 0 0 30px 5px rgba(0,0,0,.4); + box-shadow: 0 0 30px 5px rgba(0,0,0,.4); } .ideditor .field-help-title h2 { @@ -5119,10 +5642,17 @@ display: none; color: #7092ff; border-bottom: 2px solid; } -.ideditor .field-help-nav-item:hover { +.ideditor .field-help-nav-item:active, +.ideditor .field-help-nav-item:focus { color: #597be7; background-color: #efefef; } +@media (hover: hover) { + .ideditor .field-help-nav-item:hover { + color: #597be7; + background-color: #efefef; + } +} .ideditor .field-help-content { padding: 10px; @@ -5180,23 +5710,31 @@ display: none; /* More Fields dropdown ------------------------------------------------------- */ .ideditor .more-fields { - padding: 0 20px 20px 20px; + margin-top: 10px; font-weight: bold; } -.ideditor .changeset-editor .more-fields { - padding: 15px 20px 0 20px; -} .ideditor .more-fields label { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-flow: row nowrap; - justify-content: space-between; - align-items: center; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } .ideditor .more-fields input { margin-left: 10px; - flex: 1 1 50%; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; } .ideditor[dir='rtl'] .more-fields input { margin-left: auto; @@ -5204,7 +5742,6 @@ display: none; } .ideditor .form-field-input-wrap .label { - height: 30px; background: #f6f6f6; padding: 5px 10px; } @@ -5213,26 +5750,38 @@ display: none; /* Raw Tag Editor ------------------------------------------------------- */ .ideditor .raw-tag-options { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-flow: row nowrap; - flex-direction: row-reverse; - margin-top: -25px; - padding: 0 3px; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + margin-top: -28px; } .ideditor button.raw-tag-option { - flex: 0 0 20px; - height: 20px; - width: 20px; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding: 3px; background: #aaa; color: #eee; margin: 0 3px; } .ideditor button.raw-tag-option:focus, -.ideditor button.raw-tag-option:hover, .ideditor button.raw-tag-option.active { color: #fff; background: #597be7; } +@media (hover: hover) { + .ideditor button.raw-tag-option:hover { + color: #fff; + background: #597be7; + } +} .ideditor button.raw-tag-option.selected { color: #fff; background: #7092ff; @@ -5240,14 +5789,14 @@ 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 { - -moz-transform: scaleX(-1); - -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); - transform: scaleX(-1); - filter: FlipH; + -ms-transform: scaleX(-1); + transform: scaleX(-1); + -webkit-filter: FlipH; + filter: FlipH; -ms-filter: "FlipH"; } @@ -5255,6 +5804,7 @@ display: none; .ideditor .tag-text { width: 100%; height: 100%; + min-height: 32px; font-family: monospace; white-space: pre; } @@ -5268,14 +5818,21 @@ display: none; position: relative; } .ideditor .tag-row .inner-wrap { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-flow: row nowrap; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; width: 100%; position: relative; } .ideditor .tag-row .key-wrap, .ideditor .tag-row .value-wrap { - flex: 1 1 50%; + -webkit-box-flex: 1; + -ms-flex: 1 1 50%; + flex: 1 1 50%; } .ideditor .tag-text.readonly, @@ -5289,7 +5846,6 @@ display: none; } .ideditor .tag-row input { - height: 31px; border: 0; border-radius: 0; border-bottom: 1px solid #ccc; @@ -5327,8 +5883,9 @@ display: none; border-top: 1px solid #ccc; } .ideditor .tag-row button { - flex: 0 0 32px; - height: 31px; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 32px; border: 1px solid #ccc; border-top-width: 0; @@ -5339,9 +5896,15 @@ display: none; border-right-width: 0; } -.ideditor .tag-row button:hover { +.ideditor .tag-row button:active, +.ideditor .tag-row button:focus { background: #f1f1f1; } +@media (hover: hover) { + .ideditor .tag-row button:hover { + background: #f1f1f1; + } +} .ideditor .tag-row button .icon { opacity: .5; } @@ -5383,7 +5946,9 @@ display: none; } .ideditor .tag-reference-body { - flex: 1 1 auto; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; width: 100%; overflow: hidden; display: none; @@ -5432,98 +5997,91 @@ display: none; /* Raw Member / Membership Editor ------------------------------------------------------- */ +.ideditor .section-raw-member-editor .member-list:empty, +.ideditor .section-raw-membership-editor .member-list:empty { + display: none; +} -.ideditor .raw-member-editor .member-list, -.ideditor .raw-membership-editor .member-list { - padding-top: 10px; +.ideditor .section-raw-member-editor .member-list, +.ideditor .section-raw-membership-editor .member-list { + position: relative; /* required for drag-and-drop */ + padding-top: 5px; } -.ideditor .raw-member-editor .member-list li, -.ideditor .raw-membership-editor .member-list li { +.ideditor .section-raw-member-editor .member-list li, +.ideditor .section-raw-membership-editor .member-list li { position: relative; border-radius: 4px; margin: 0; padding-bottom: 10px; } -.ideditor .raw-member-editor .member-row .member-entity-name, -.ideditor .raw-membership-editor .member-row .member-entity-name { +.ideditor .section-raw-member-editor .member-row .member-entity-name, +.ideditor .section-raw-membership-editor .member-row .member-entity-name { font-weight: normal; padding-left: 10px; } -.ideditor[dir='rtl'] .raw-member-editor .member-row .member-entity-name, -.ideditor[dir='rtl'] .raw-membership-editor .member-row .member-entity-name { +.ideditor[dir='rtl'] .section-raw-member-editor .member-row .member-entity-name, +.ideditor[dir='rtl'] .section-raw-membership-editor .member-row .member-entity-name { padding-left:0; padding-right: 10px; } .ideditor .form-field-input-member > input.member-role { - border-radius: 0 0 0 4px; -} -.ideditor[dir='rtl'] .form-field-input-member > input.member-role { - border-radius: 0 0 4px 0; -} - -.ideditor .member-incomplete .form-field-input-member > input.member-role, -.ideditor[dir='rtl'] .member-incomplete .form-field-input-member > input.member-role { border-radius: 0 0 4px 4px; } -.ideditor .member-incomplete .member-delete { - display: none; -} - .ideditor .member-row-new .member-entity-input { - flex: 1 1 100%; + -webkit-box-flex: 1; + -ms-flex: 1 1 100%; + flex: 1 1 100%; border-radius: 4px 4px 0 0; border: 0; } -.ideditor .raw-member-editor .member-row.dragging { +.ideditor .section-raw-member-editor .member-row.dragging { opacity: 0.75; z-index: 3000; /* - -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3); - -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3); */ } -/* preserve extra space at bottom of inspector to allow for dropdown options - #5280 */ -.ideditor .raw-membership-editor.inspector-inner { - margin-bottom: 150px; -} - -/* 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: -ms-flexbox; display: flex; width: 100%; - flex-flow: row nowrap; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; } .ideditor .add-row .add-tag, .ideditor .add-row .add-relation, .ideditor .add-row .space-value { - flex: 1 1 50%; + -webkit-box-flex: 1; + -ms-flex: 1 1 50%; + flex: 1 1 50%; } .ideditor .add-row .space-buttons { - flex: 0 0 62px; + -webkit-box-flex: 0; + -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, -.ideditor .add-row button:hover { +.ideditor .add-row button:active { background: rgba(0,0,0,.8); } +@media (hover: hover) { + .ideditor .add-row button:hover { + background: rgba(0,0,0,.8); + } +} .ideditor .add-tag { border-radius: 0 0 4px 4px; @@ -5534,23 +6092,32 @@ display: none; } -/* OSM Note / KeepRight Editors +/* OSM Note / QA Editors ------------------------------------------------------- */ .ideditor .note-header, -.ideditor .error-header { +.ideditor .qa-header { background-color: #f6f6f6; border-radius: 5px; border: 1px solid #ccc; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-flow: row nowrap; - align-items: center; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } .ideditor .note-header-icon, -.ideditor .error-header-icon { +.ideditor .qa-header-icon { background-color: #fff; padding: 10px; - flex: 0 0 62px; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; position: relative; width: 60px; height: 60px; @@ -5558,14 +6125,14 @@ display: none; border-radius: 5px 0 0 5px; } .ideditor[dir='rtl'] .note-header-icon, -.ideditor[dir='rtl'] .error-header-icon { +.ideditor[dir='rtl'] .qa-header-icon { border-right: unset; border-left: 1px solid #ccc; border-radius: 0 5px 5px 0; } .ideditor .note-header-icon .icon-wrap, -.ideditor .error-header-icon .icon-wrap { +.ideditor .qa-header-icon .icon-wrap { position: absolute; top: 0px; } @@ -5581,16 +6148,18 @@ display: none; } .ideditor .note-header-label, -.ideditor .error-header-label { +.ideditor .qa-header-label { background-color: #f6f6f6; padding: 0 15px; - flex: 1 1 100%; + -webkit-box-flex: 1; + -ms-flex: 1 1 100%; + flex: 1 1 100%; font-size: 14px; font-weight: bold; border-radius: 0 5px 5px 0; } .ideditor[dir='rtl'] .note-header-label, -.ideditor[dir='rtl'] .error-header-label { +.ideditor[dir='rtl'] .qa-header-label { border-radius: 5px 0 0 5px; } @@ -5610,24 +6179,37 @@ display: none; border-radius: 5px; border: 1px solid #ccc; margin: 10px auto; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-flow: row nowrap; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; } .ideditor .comment-avatar { padding: 10px; - flex: 0 0 62px; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; } .ideditor .comment-avatar .icon.comment-avatar-icon { width: 40px; height: 40px; - object-fit: cover; + -o-object-fit: cover; + object-fit: cover; border: 1px solid #ccc; border-radius: 20px; } .ideditor .comment-main { padding: 10px 10px 10px 0; - flex: 1 1 100%; - flex-flow: column nowrap; + -webkit-box-flex: 1; + -ms-flex: 1 1 100%; + flex: 1 1 100%; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-flow: column nowrap; + flex-flow: column nowrap; overflow: hidden; overflow-wrap: break-word; } @@ -5636,8 +6218,13 @@ display: none; } .ideditor .comment-metadata { - flex-flow: row nowrap; - justify-content: space-between; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; } .ideditor .comment-author { font-weight: bold; @@ -5657,32 +6244,42 @@ display: none; } .ideditor .note-save, -.ideditor .error-save { +.ideditor .qa-save { padding-top: 20px; } -.ideditor .error-details { - padding: 10px; -} -.ideditor .error-details-container { +.ideditor .qa-details-container { background: #ececec; padding: 10px; margin-top: 20px; border-radius: 4px; border: 1px solid #ccc; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; } -.ideditor .error-details-description { - margin-bottom: 10px; -} -.ideditor .error-details-description-text::first-letter { +.ideditor .qa-details-description-text::first-letter { text-transform: capitalize; } -.ideditor[dir='rtl'] .error-details-description-text::first-letter { +.ideditor[dir='rtl'] .qa-details-description-text::first-letter { text-transform: none; /* #5877 */ } +.ideditor .qa-details-subsection h4 { + padding-bottom: 2px; +} +.ideditor .qa-details-subsection:not(:last-child) { + margin-bottom: 10px; +} +.ideditor .qa-details-subsection:empty { + display: none; +} .ideditor .note-save .new-comment-input, -.ideditor .error-save .new-comment-input { +.ideditor .qa-save .new-comment-input { width: 100%; height: 100px; max-height: 300px; @@ -5690,7 +6287,7 @@ display: none; } .ideditor .note-save .detail-section, -.ideditor .error-save .detail-section { +.ideditor .qa-save .detail-section { margin: 10px 0; } @@ -5705,15 +6302,24 @@ display: none; background-color: #f6f6f6; border-radius: 5px; border: 1px solid #ccc; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-flow: row nowrap; - align-items: center; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } .ideditor .data-header-icon { background-color: #fff; padding: 10px; - flex: 0 0 62px; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; position: relative; width: 60px; height: 60px; @@ -5734,7 +6340,9 @@ display: none; .ideditor .data-header-label { background-color: #f6f6f6; padding: 0 15px; - flex: 1 1 100%; + -webkit-box-flex: 1; + -ms-flex: 1 1 100%; + flex: 1 1 100%; font-size: 14px; font-weight: bold; border-radius: 0 5px 5px 0; @@ -5753,36 +6361,102 @@ display: none; } +.ideditor .over-map { + position: relative; + height: 100%; + pointer-events: none; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end; + overflow: hidden; +} +.ideditor .over-map > * { + pointer-events: auto; +} +/* offscreen this without hiding it */ +.ideditor .over-map .select-trap { + position: absolute; + right: -1000%; + opacity: 0; +} + /* Map Controls ------------------------------------------------------- */ .ideditor .map-controls { right: 0; - top: 141px; + top: 0; width: 40px; position: absolute; z-index: 100; + bottom: 0; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + padding: 5px 0; + pointer-events: none; +} +.ideditor .map-controls:before { + content: ''; + display: inline-block; + pointer-events: none; + width: 40px; + height: 100%; + max-height: 70px; + -webkit-box-flex: 0; + -ms-flex: 0 1 auto; + flex: 0 1 auto; } .ideditor[dir='rtl'] .map-controls { left: 0; 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; } -.ideditor .map-control > button:not(.disabled):hover, -.ideditor .map-control > button:not(.disabled):focus { +.ideditor .map-control > button:not(.disabled):focus, +.ideditor .map-control > button:not(.disabled):active { background: rgba(0, 0, 0, .8); } - .ideditor .map-control > button.active, -.ideditor .map-control > button.active:hover { +.ideditor .map-control > button.active:active { background: #7092ff; } +@media (hover: hover) { + .ideditor .map-control > button:not(.disabled):hover { + background: rgba(0, 0, 0, .8); + } + .ideditor .map-control > button.active:hover { + background: #7092ff; + } +} .ideditor .map-control > button.disabled .icon { color: rgba(255, 255, 255, 0.5); @@ -5807,14 +6481,21 @@ display: none; height: 40px; background: transparent; } - -.ideditor div.full-screen > button:hover { +.ideditor div.full-screen > button:active, +.ideditor div.full-screen > button:focus { background-color: rgba(0, 0, 0, .8); } +@media (hover: hover) { + .ideditor div.full-screen > button:hover { + background-color: rgba(0, 0, 0, .8); + } +} -/* Zoom Buttons +/* Map Controls ------------------------------------------------------- */ + +/* Zoom in/out buttons */ .ideditor .zoombuttons > button.zoom-in { border-radius: 4px 0 0 0; } @@ -5822,9 +6503,7 @@ display: none; border-radius: 0 4px 0 0; } - -/* Geolocate Button -------------------------------------------------------- */ +/* Geolocate button */ .ideditor .geolocate-control { margin-bottom: 10px; } @@ -5835,6 +6514,12 @@ display: none; border-radius: 0 0 4px 0; } +/* Zoom to selection button */ +.ideditor .zoom-to-selection-control .icon { + width: 22px; + height: 22px; +} + /* Background / Map Data / Help Pane buttons ------------------------------------------------------- */ @@ -5855,11 +6540,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; @@ -5872,10 +6552,11 @@ display: none; } .ideditor .layer-list > li { - height: 30px; background-color: #fff; color: #7092ff; position: relative; + display: -webkit-box; + display: -ms-flexbox; display: flex; } @@ -5895,9 +6576,14 @@ display: none; .ideditor .layer-list li:not(:last-child) { border-bottom: 1px solid #ccc; } -.ideditor .layer-list li:hover { +.ideditor .layer-list li:active { background-color: #ececec; } +@media (hover: hover) { + .ideditor .layer-list li:hover { + background-color: #ececec; + } +} .ideditor .layer-list li.active button, .ideditor .layer-list li.switch button, @@ -5908,11 +6594,14 @@ display: none; .ideditor .layer-list li.best > div.best { padding: 5px; - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; } .ideditor[dir='rtl'] .list-item-data-browse svg { - transform: rotateY(180deg); + -webkit-transform: rotateY(180deg); + transform: rotateY(180deg); } /* make sure tooltip fits in map-control panel */ @@ -5924,7 +6613,16 @@ display: none; .ideditor .layer-list label { padding: 5px 10px; cursor: pointer; - flex: 1 1 auto; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + overflow: hidden; } .ideditor[dir='ltr'] .layer-list .indented label { @@ -5938,12 +6636,22 @@ display: none; display: block; overflow: hidden; white-space: nowrap; - text-overflow: ellipsis; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.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; @@ -5985,27 +6693,42 @@ display: none; .ideditor .issue .issue-label, .ideditor .issue-label .issue-text { width: 100%; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-flow: row nowrap; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; cursor: pointer; + text-align: initial; + background: none; } .ideditor .issue-text .issue-icon { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; padding: 5px 7px; } .ideditor .issue-text .issue-message { - flex: 1 1 auto; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; padding: 5px 0; } .ideditor .issue-label .issue-autofix { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; padding: 5px 8px; } .ideditor .issue-label .issue-info-button { height: unset; width: 32px; - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; border-left: 1px solid #ccc; background-color: rgba(0,0,0,0); } @@ -6027,23 +6750,37 @@ display: none; } .ideditor button.autofix.action { - flex: 0 0 20px; + -webkit-box-flex: 0; + -ms-flex: 0 0 20px; + flex: 0 0 20px; height: 20px; width: 20px; background: #7092ff; color: #fff; } .ideditor button.autofix.action:focus, -.ideditor button.autofix.action:hover, +.ideditor button.autofix.action:active, .ideditor button.autofix.action.active { background: #597be7; } +@media (hover: hover) { + .ideditor button.autofix.action:hover { + background: #597be7; + } +} /* fix all */ .ideditor .autofix-all { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-flow: row nowrap; - flex-direction: row-reverse; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; margin-top: -25px; padding-bottom: 5px; } @@ -6069,7 +6806,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; } @@ -6077,32 +6814,38 @@ display: none; background: #ffa; } -.ideditor .warnings-list .issue.severity-warning .issue-label:hover, -.ideditor .issue.severity-warning .issue-fix-item.actionable:hover { - background: #ff8; -} - .ideditor .issue.severity-warning .issue-icon { 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; - /*color: #7092ff;*/ - /*fill: #7092ff;*/ } -.ideditor .issue.severity-warning .issue-fix-item.actionable:hover, -.ideditor .issue-container.active .issue.severity-warning .issue-info-button:hover { +.ideditor .warnings-list .issue.severity-warning .issue-label: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 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; - /*color: #597be7;*/ - /*fill: #597be7;*/ } - -.ideditor .notification-badge.warning { - color: #ffdf5c; +@media (hover: hover) { + .ideditor .warnings-list .issue.severity-warning .issue-label:hover, + .ideditor .issue.severity-warning .issue-fix-item button.actionable:hover { + background: #ff8; + } + .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; + } } @@ -6116,7 +6859,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; } @@ -6124,32 +6867,37 @@ display: none; background: #ffc6c6; } -.ideditor .errors-list .issue.severity-error .issue-label:hover, -.ideditor .issue.severity-error .issue-fix-item.actionable:hover { - background: #ffb6b6; +.ideditor .issue.severity-error .issue-fix-item button.actionable, +.ideditor .issue-container.active .issue.severity-error .issue-info-button { + color: #b91201; + fill: #b91201; } - .ideditor .issue.severity-error .issue-icon { color: #dd1400; } - -.ideditor .issue.severity-error .issue-fix-item.actionable, -.ideditor .issue-container.active .issue.severity-error .issue-info-button { - color: #b91201; - fill: #b91201; - /*color: #7092ff;*/ - /*fill: #7092ff;*/ +.ideditor .errors-list .issue.severity-error .issue-label: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:hover, -.ideditor .issue-container.active .issue.severity-error .issue-info-button:hover { +.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; - /*color: #597be7;*/ - /*fill: #597be7;*/ } - -.ideditor .notification-badge.error { - color: #ff0c05; +@media (hover: hover) { + .ideditor .errors-list .issue.severity-error .issue-label:hover, + .ideditor .issue.severity-error .issue-fix-item button.actionable:hover { + background: #ffb6b6; + } + .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; + } } @@ -6172,6 +6920,7 @@ display: none; .ideditor .issues-option label { display: table-cell; padding: 0 10px; + white-space: nowrap; } .ideditor .layer-list.issues-list li.issue { @@ -6186,30 +6935,39 @@ display: none; margin-bottom: 0; } .ideditor .section-footer { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-flow: row nowrap; - flex-direction: row-reverse; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; height: 30px; } .ideditor .section-footer a { padding: 5px; } -.ideditor .issues-none .box { +.ideditor .section-issues-status .box { border-radius: 4px; border: 1px solid #72d979; background: #c6ffca; padding: 5px !important; + display: -webkit-box; + display: -ms-flexbox; display: flex; } -.ideditor .issues-none .icon { +.ideditor .section-issues-status .icon { color: #05ac10; } .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; @@ -6217,66 +6975,78 @@ display: none; /* Entity Issues List */ -.ideditor .entity-issues .issue-container .issue { +.ideditor .section-entity-issues .issue-container .issue { border-radius: 4px; border: 1px solid #ccc; background: #f6f6f6; } -.ideditor .entity-issues .issue-container:not(.active) .issue-text:hover, -.ideditor .entity-issues .issue-container:not(.active) .issue-info-button:hover { +.ideditor .section-entity-issues .issue-container:not(.active) .issue-text: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; } -.ideditor .entity-issues .issue .issue-label .issue-text { +@media (hover: hover) { + .ideditor .section-entity-issues .issue-container:not(.active) .issue-text:hover, + .ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:hover { + background: #f1f1f1; + } +} +.ideditor .section-entity-issues .issue .issue-label .issue-text { padding-right: 10px; } -.ideditor[dir='rtl'] .entity-issues .issue .issue-label .issue-text { +.ideditor[dir='rtl'] .section-entity-issues .issue .issue-label .issue-text { padding-right: unset; padding-left: 10px; } -.ideditor .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 .entity-issues .issue-container:not(:last-of-type) { +.ideditor .section-entity-issues .issue-container:not(:last-of-type) { margin-bottom: 5px; } -.ideditor .entity-issues .issue-container.active:not(:first-of-type) { +.ideditor .section-entity-issues .issue-container.active:not(:first-of-type) { margin-top: 10px; } -.ideditor .entity-issues .issue-container.active:not(:last-of-type) { +.ideditor .section-entity-issues .issue-container.active:not(:last-of-type) { margin-bottom: 10px; } /* fixes */ -.ideditor .entity-issues .issue-fix-list { +.ideditor .section-entity-issues .issue-fix-list { border-top: 1px solid; border-color: inherit; } -.ideditor .entity-issues .issue-container.active .issue-fix-list:empty { +.ideditor .section-entity-issues .issue-container.active .issue-fix-list:empty { 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; } @@ -6286,7 +7056,9 @@ display: none; } .ideditor .issue-info { - flex: 1 1 auto; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; width: 100%; overflow: hidden; display: none; @@ -6336,9 +7108,20 @@ display: none; 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; + -webkit-box-flex: 1; + -ms-flex: 1 1 100%; + flex: 1 1 100%; } .ideditor .display-control button { @@ -6348,6 +7131,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; @@ -6361,10 +7147,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 { @@ -6372,13 +7161,26 @@ display: none; border: 1px solid #ccc; border-radius: 2px; padding: 20px 0; - width: 70%; + display: -webkit-box; + display: -ms-flexbox; display: flex; - justify-content: center; - align-items: center; - margin: 0 auto; - margin-top: 20px; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin: 45px; cursor: move; + /* prevent scrolling pane while dragging on touchscreen */ + -ms-touch-action: none; + touch-action: none; + /* disable drag-to-select */ + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + position: relative; } .ideditor .nudge-container .nudge-inner-rect { @@ -6401,7 +7203,7 @@ display: none; .ideditor .nudge-container input { width: 100%; - height: 20px; + padding: 2px; text-align: center; border: 0; } @@ -6412,39 +7214,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 { @@ -6486,30 +7291,48 @@ display: none; /* Side Panes - Background / Map Data / Help ------------------------------------------------------- */ .ideditor .map-panes { - flex: 0 1 auto; + -webkit-box-flex: 0; + -ms-flex: 0 1 auto; + flex: 0 1 auto; position: relative; height: 100%; + max-width: 100%; } .ideditor .map-pane { position: relative; top: 0; 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-wrap { +.ideditor .map-pane.help-pane { width: 600px; } .ideditor .pane-heading { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-flow: row nowrap; - justify-content: space-between; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -webkit-box-pack: justify; + -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 { @@ -6518,123 +7341,118 @@ display: none; .ideditor .pane-heading button { width: 40px; - height: 100%; border-radius: 0; } .ideditor .pane-content { height: 100%; - padding: 10px 40px 20px 20px; + padding: 10px 50px 20px 20px; overflow-x: hidden; overflow-y: scroll; position: relative; } .ideditor[dir='rtl'] .pane-content { - padding: 10px 20px 20px 40px; + padding: 10px 20px 20px 50px; } -.ideditor .pane-content > div { +.ideditor .help-pane .pane-content > div { padding-bottom: 15px; } /* Help ------------------------------------------------------- */ -.ideditor .help-wrap p { +.ideditor .help-pane p { font-size: 15px; margin-bottom: 20px; } -.ideditor .help-wrap .left-content .body p code { - padding: 3px 4px; - font-size: 12px; - color: #555; - vertical-align: baseline; - background-color: #f6f6f6; - border: solid 1px #ccc; - margin: 0 2px; - border-bottom-color: #bbb; - border-radius: 3px; - box-shadow: inset 0 -1px 0 #bbb; -} - -.ideditor .help-wrap .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-wrap .toc { - width: 40%; +.ideditor .help-pane .toc { + width: 100%; + max-width: 200px; float: right; margin-left: 20px; margin-bottom: 20px; padding-left: 5px; } -.ideditor .help-wrap .toc li a, -.ideditor .help-wrap .nav a { +.ideditor .help-pane .toc li a, +.ideditor .help-pane .nav a { display: block; border: 1px solid #ccc; padding: 5px 10px; } -.ideditor .help-wrap .toc li a { +.ideditor .help-pane .toc li a { border-bottom: 0; } - -.ideditor .help-wrap .toc li a:hover, -.ideditor .help-wrap .nav a:hover { +.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; } +@media (hover: hover) { + .ideditor .help-pane .toc li a:hover, + .ideditor .help-pane .nav a:hover { + background: #ececec; + } +} -.ideditor .help-wrap .toc li a.selected { +.ideditor .help-pane .toc li a.selected { background: #e8ebff; } -.ideditor .help-wrap .toc li:first-child a { +.ideditor .help-pane .toc li:first-child a { border-radius: 4px 4px 0 0; } -.ideditor .help-wrap .toc li:nth-last-child(3) a { +.ideditor .help-pane .toc li:nth-last-child(3) a { border-bottom: 1px solid #ccc; border-radius: 0 0 4px 4px } -.ideditor .help-wrap .toc li.shortcuts a, -.ideditor .help-wrap .toc li.walkthrough a { +.ideditor .help-pane .toc li.shortcuts a, +.ideditor .help-pane .toc li.walkthrough a { overflow: hidden; margin-top: 10px; border-bottom: 1px solid #ccc; border-radius: 4px; } -.ideditor .help-wrap .toc li.walkthrough a { +.ideditor .help-pane .toc li.walkthrough a { text-align: center; } -.ideditor .help-wrap .nav { +.ideditor .help-pane .nav { position: relative; padding-bottom: 30px; } -.ideditor .help-wrap .nav a { +.ideditor .help-pane .nav a { float: left; width: 50%; text-align: center; } -.ideditor .help-wrap .nav a:first-child { +.ideditor .help-pane .nav a:first-child { border-radius: 4px 0 0 4px; } -.ideditor .help-wrap .nav a:last-child:not(:only-child) { +.ideditor .help-pane .nav a:last-child:not(:only-child) { border-radius: 0 4px 4px 0; border-left: 0; } -.ideditor .help-wrap .nav a:only-child { +.ideditor .help-pane .nav a:only-child { width: 100%; border-radius: 4px; } @@ -6642,7 +7460,7 @@ display: none; /* Inspector (hover styles) ------------------------------------------------------- */ -.ideditor .inspector-hover .entity-issues .issue-container .issue .issue-label, +.ideditor .inspector-hover .section-entity-issues .issue-container .issue .issue-label, .ideditor .inspector-hover .form-field-input-wrap .label, .ideditor .inspector-hover .form-field-input-multicombo .chiplist, .ideditor .inspector-hover .form-field-button, @@ -6662,7 +7480,7 @@ display: none; .ideditor .inspector-hover a, .ideditor .inspector-hover .form-field-input-multicombo .chip, .ideditor .inspector-hover .form-field-input-check span, -.ideditor .inspector-hover .entity-issues .issue .icon { +.ideditor .inspector-hover .section-entity-issues .issue .icon { color: #666; } @@ -6673,8 +7491,8 @@ display: none; /* no scrollbars */ .ideditor .inspector-hover div { - overflow-x: hidden; - overflow-y: hidden; + overflow-x: visible; + overflow-y: visible; } /* hide and remove from layout */ @@ -6686,9 +7504,9 @@ display: none; .ideditor .inspector-hover .form-field-input-radio label, .ideditor .inspector-hover .form-field-input-radio label span, .ideditor .inspector-hover .form-field-input-radio label.remove .icon, -.ideditor .inspector-hover .inspector-inner .add-row, -.ideditor .inspector-hover .entity-issues .issue-container .issue-fix-list, -.ideditor .inspector-hover .entity-issues .issue-container .issue-info-button { +.ideditor .inspector-hover .add-row, +.ideditor .inspector-hover .section-entity-issues .issue-container .issue-fix-list, +.ideditor .inspector-hover .section-entity-issues .issue-container .issue-info-button { display: none; } @@ -6706,17 +7524,17 @@ display: none; } /* Unstyle the active entity issue on hover */ -.ideditor .inspector-hover .entity-issues .issue-container.active { +.ideditor .inspector-hover .section-entity-issues .issue-container.active { margin-top: 1px; margin-bottom: 1px; } -.ideditor .inspector-hover .entity-issues .issue-container * { +.ideditor .inspector-hover .section-entity-issues .issue-container * { border-color: #ccc !important; } -.ideditor .inspector-hover .entity-issues .issue-container.active .issue-label { +.ideditor .inspector-hover .section-entity-issues .issue-container.active .issue-label { border-bottom: 0; } -.ideditor .inspector-hover .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; } @@ -6779,8 +7597,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 { @@ -6792,21 +7610,28 @@ display: none; ------------------------------------------------------- */ .ideditor img.tile { position: absolute; - transform-origin: 0 0; - -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0; - -moz-transform-origin: 0 0; - -o-transform-origin: 0 0; + -ms-transform-origin: 0 0; + transform-origin: 0 0; - -moz-user-select: none; -webkit-user-select: none; - -ms-user-select: none; - user-select: none; + + -moz-user-select: none; + + -ms-user-select: none; + + user-select: none; + + pointer-events: none; + + -webkit-user-drag: none; opacity: 0; -webkit-transition: opacity 200ms linear; - -moz-transition: opacity 200ms linear; + + -o-transition: opacity 200ms linear; + transition: opacity 200ms linear; } @@ -6830,16 +7655,19 @@ display: none; margin-left: -70px; margin-top: -20px; - transform-origin: 0 0; - -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0; - -moz-transform-origin: 0 0; - -o-transform-origin: 0 0; - -moz-user-select: none; + -ms-transform-origin: 0 0; + + transform-origin: 0 0; + -webkit-user-select: none; - -ms-user-select: none; - user-select: none; + + -moz-user-select: none; + + -ms-user-select: none; + + user-select: none; } .ideditor img.tile-debug { @@ -6849,26 +7677,36 @@ display: none; /* Map ------------------------------------------------------- */ -.ideditor #map { - position: relative; +.ideditor .main-map { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; overflow: hidden; height: 100%; + width: 100%; background: #000; - -moz-user-select: none; -webkit-user-select: none; - -ms-user-select: none; - user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -ms-touch-action: none; + touch-action: none; + -webkit-touch-callout: none; +} +.ideditor .main-map * { + -ms-touch-action: none; + touch-action: none; } -.ideditor #supersurface { - transform-origin: 0 0; - -ms-transform-origin: 0 0; +.ideditor .supersurface { -webkit-transform-origin: 0 0; - -moz-transform-origin: 0 0; - -o-transform-origin: 0 0; + -ms-transform-origin: 0 0; + transform-origin: 0 0; } -.ideditor #supersurface, .ideditor .layer { +.ideditor .supersurface, .ideditor .layer { position: absolute; top: 0; left: 0; @@ -6888,7 +7726,8 @@ display: none; z-index: 5; background: #000; border: #aaa 1px solid; - box-shadow: 0 0 2em black; + -webkit-box-shadow: 0 0 2em black; + box-shadow: 0 0 2em black; } .ideditor[dir='ltr'] .map-in-map { left: 10px; @@ -6898,16 +7737,13 @@ display: none; } .ideditor .map-in-map-tiles { - transform-origin: 0 0; - -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0; - -moz-transform-origin: 0 0; - -o-transform-origin: 0 0; - - -moz-user-select: none; + -ms-transform-origin: 0 0; + transform-origin: 0 0; -webkit-user-select: none; - -ms-user-select: none; - user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .ideditor .map-in-map-viewport, @@ -6980,30 +7816,24 @@ display: none; } -.ideditor .over-map { - position: absolute; - left: 0; - right: 0; - top: 71px; - bottom: 30px; - pointer-events: none; - display: flex; - flex-direction: row-reverse; - align-items: flex-end; -} -.ideditor .over-map > * { - pointer-events: auto; -} - /* Information Panels ------------------------------------------------------- */ .ideditor .info-panels { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-flow: row-reverse wrap-reverse; + -webkit-box-orient: horizontal; + -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; pointer-events: none; + overflow: hidden; } .ideditor .panel-container h1, @@ -7022,12 +7852,15 @@ display: none; } .ideditor .panel-container { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; margin: 0 2px 2px 0; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.75); padding-bottom: 10px; width: 250px; + max-width: 100%; pointer-events: auto; } @@ -7037,21 +7870,31 @@ 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:hover { +.ideditor .panel-title button.close:focus, +.ideditor .panel-title button.close:active { color: #fff; } +@media (hover: hover) { + .ideditor .panel-title button.close:hover { + color: #fff; + } +} .ideditor .panel-title button.close .icon { height: 20px; width: 16px; @@ -7062,7 +7905,11 @@ display: none; position: relative; } -.ideditor .panel-content li span { +.ideditor .panel-content ul:empty { + display: none; +} + +.ideditor .panel-content li span:not(.localized-text) { display: inline-block; white-space: nowrap; margin: 0 8px; @@ -7097,97 +7944,150 @@ display: none; } -/* About Section, Attribution, Footer +/* Map Footer ------------------------------------------------------- */ -.ideditor #about { +.ideditor .map-footer { width: 100%; - position: absolute; - right: 0; - bottom: 0; + position: relative; border-radius: 0; pointer-events: none; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -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 #attrib { - width: 100%; - height: 20px; - margin-bottom: 5px; +.ideditor .map-footer-bar { + pointer-events: all; + display: block; + height: 2.5em; + position: relative; } -.ideditor #attrib * { pointer-events: all; } - -.ideditor .base-layer-attribution, -.ideditor .overlay-layer-attribution { +.ideditor .main-footer-wrap, +.ideditor .flash-wrap { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + height: 100%; position: absolute; - color: #ccc; - font-size: 10px; + right: 0; + left: 0; } -.ideditor .base-layer-attribution { - left: 10px; +.ideditor .footer-show { + bottom: 0px; + -webkit-transition: bottom 75ms linear; + -o-transition: bottom 75ms linear; + transition: bottom 75ms linear; } -.ideditor .overlay-layer-attribution { - right: 10px; +.ideditor .footer-hide { + bottom: -100%; + -webkit-transition: bottom 75ms linear; + -o-transition: bottom 75ms linear; + transition: bottom 75ms linear; +} + + +/* Attribution +------------------------------------------------------- */ +.ideditor .attribution-wrap { + 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; +} + +.ideditor .attribution-wrap * { pointer-events: all; } + +.ideditor .attribution-wrap .base-layer-attribution, +.ideditor .attribution-wrap .overlay-layer-attribution { + color: #ccc; + font-size: 10px; +} +.ideditor .attribution-wrap .overlay-layer-attribution { + text-align: right; } -.ideditor .overlay-layer-attribution .attribution:not(:last-child):after { +.ideditor .attribution-wrap .overlay-layer-attribution .attribution:not(:last-child):after { content: '; '; } -.ideditor .attribution a, -.ideditor .attribution a:visited { +.ideditor .attribution-wrap .attribution a, +.ideditor .attribution-wrap .attribution a:visited { color: #ccf; } - -.ideditor .attribution a:hover { +.ideditor .attribution-wrap .attribution a:focus, +.ideditor .attribution-wrap .attribution a:hover { color: #aaf; } +@media (hover: hover) { + .ideditor .attribution-wrap .attribution a:hover { + color: #aaf; + } +} -.ideditor .attribution .source-image { +.ideditor .attribution-wrap .attribution .source-image { height: 20px; vertical-align: middle; border-radius: 3px; } -.ideditor .attribution span { +.ideditor .attribution-wrap .attribution span { margin: 0 3px; } -.ideditor #footer { - pointer-events: all; - display: block; - height: 30px; -} - /* Footer - Flash messages ------------------------------------------------------- */ -.ideditor #flash-wrap { - display: flex; - flex: 0 0 100%; - flex-flow: row nowrap; - justify-content: space-between; - max-height: 30px; - position: absolute; - right: 0; - left: 0; -} - .ideditor .flash-content { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex: 1 0 auto; - flex-flow: row nowrap; - align-items: center; + -webkit-box-flex: 1; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; padding: 2px; - height: 30px; } .ideditor .flash-icon { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 20px; height: 20px; margin: 0 8px; @@ -7204,153 +8104,117 @@ display: none; .ideditor .flash-icon use { color: #222; } -.ideditor .flash-icon.disabled use { - color: rgba(32,32,32,0.7); -} - -.ideditor .flash-icon.operation use { - fill: #222; - color: #79f; -} +.ideditor .flash-icon.disabled use, .ideditor .flash-icon.operation.disabled use { fill: rgba(32,32,32,0.7); color: rgba(40,40,40,0.7); } .ideditor .flash-text { - flex: 1 1 auto; -} - -.ideditor #footer-wrap { - display: flex; - flex: 0 0 100%; - flex-flow: row nowrap; - justify-content: space-between; - max-height: 30px; - position: absolute; - right: 0; - left: 0; -} - -.ideditor .footer-show { - bottom: 0px; - transition: bottom 75ms linear; - -moz-transition: bottom 75ms linear; - -webkit-transition: bottom 75ms linear; -} - -.ideditor .footer-hide { - bottom: -35px; - transition: bottom 75ms linear; - -moz-transition: bottom 75ms linear; - -webkit-transition: bottom 75ms linear; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; } - -/* Footer - Scale bar, About, Source Switcher +/* Scale bar ------------------------------------------------------- */ -.ideditor #scale-block { +.ideditor .map-footer-bar .scale-block { vertical-align: bottom; width: 250px; - max-height: 30px; - flex: 0 0 250px; - -moz-user-select: none; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; -webkit-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.ideditor #info-block { - max-height: 30px; - flex: 1 1 auto; -} - -.ideditor #scale { + -moz-user-select: none; + -ms-user-select: none; + user-select: none; height: 30px; - width: 100%; -} -.ideditor[dir='rtl'] #scale { - transform: scaleX(-1); + -ms-flex-item-align: center; + align-self: center; } -.ideditor #scale:hover { +.ideditor .scale-block .scale { + height: 100%; + width: 100%; cursor: pointer; + display: block; } - -.ideditor #scale text { - font: 12px sans-serif; - stroke: none; - fill: #ccc; - text-anchor: start; +.ideditor[dir='rtl'] .scale-block .scale { + -webkit-transform: scaleX(-1); + -ms-transform: scaleX(-1); + transform: scaleX(-1); } -.ideditor[dir='rtl'] #scale text { - transform: scaleX(-1); + +.ideditor .scale-block .scale-text { + display: inline-block; + position: absolute; + color: #ccc; + top: 0.45em; } -.ideditor #scale path { +.ideditor .scale-block .scale path { fill: none; stroke: #ccc; stroke-width: 1; shape-rendering: crispEdges; } -.ideditor #about-list { - text-align: right; - margin-right: 10px; - clear: right; +/* Footer - About, Source Switcher +------------------------------------------------------- */ +.ideditor .map-footer-bar .info-block { + -webkit-box-flex: 1; + -ms-flex: 1 1 100%; + flex: 1 1 100%; overflow: hidden; } -.ideditor[dir='rtl'] #about-list { - text-align: left; - clear: left; - margin-left: 10px; - margin-right: 0; + +.ideditor .map-footer-list { + 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 #about-list li { - float: right; - border-left: 1px solid rgba(255,255,255,.5); - padding: 5px 0 5px 5px; - margin-left: 5px; +.ideditor .map-footer-list li { + 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'] #about-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 #about-list li:empty { - display: none; } - -.ideditor #about-list li:last-child { - border-left: 0; - margin-left: 0; - padding-left: 0; +.ideditor[dir='rtl'] .map-footer-list li:not(:last-child) { + border-left: 1px solid rgba(255,255,255,.5); } -.ideditor[dir='rtl'] #about-list li:last-child { - border-right: none; +.ideditor .map-footer-list li:empty { + display: none; } -.ideditor #about-list a.chip { - padding: 2px 4px 3px 4px; +.ideditor .map-footer-list a.chip { + padding: 1px 4px 1px 4px; border-radius: 2px; color: #eee; } -.ideditor #about-list a.chip .icon { +.ideditor .map-footer-list a.chip .icon { width: 14px; height: 14px; - margin-top: 3px; -} -.ideditor[dir='ltr'] #about-list a.chip .icon, -.ideditor[dir='ltr'] #about-list a.chip span { - margin-right: 3px; + margin-top: -2px; } -.ideditor[dir='rtl'] #about-list a.chip .icon, -.ideditor[dir='rtl'] #about-list a.chip span { - margin-left: 3px; +.ideditor .map-footer-list a.chip span.count { + margin: 0 3px; } .ideditor .source-switch a.chip.live { @@ -7383,11 +8247,16 @@ display: none; text-align: right; padding: 1px 10px; color: #eee; - flex: 1 1 auto; + -webkit-box-flex: 1; + -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, @@ -7400,9 +8269,15 @@ display: none; color: #ccc; pointer-events: all; } -.ideditor .api-status a:hover { +.ideditor .api-status a:focus, +.ideditor .api-status a:active { color: inherit; } +@media (hover: hover) { + .ideditor .api-status a:hover { + color: inherit; + } +} /* Notification Badges ------------------------------------------------------- */ @@ -7455,18 +8330,28 @@ display: none; /* Modals / Prompts ------------------------------------------------------- */ .ideditor .modal { - top: 40px; - display: inline-block; - position: absolute; + top: 5%; + max-height: 90%; + position: relative; border-radius: 3px; overflow: hidden; - left: 0; - right: 0; margin: auto; z-index: 50; - width: 50%; + width: 80%; min-width: 200px; - max-width: 600px; + max-width: 550px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} + +.ideditor .modal .content { + overflow-x: hidden; + overflow-y: auto; } .ideditor .modal .loader { @@ -7499,8 +8384,8 @@ display: none; .ideditor .modal-section p:not(:last-of-type) { padding-bottom: 20px; } -.ideditor .modal-section.header h3 { - padding: 0; +.ideditor .modal-section h4 { + padding-bottom: 0; } .ideditor .modal-section.buttons { text-align: center; @@ -7513,15 +8398,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: -ms-flexbox; display: flex; - flex-wrap: wrap; - justify-content: space-around; - margin-bottom: 30px; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -ms-flex-pack: distribute; + justify-content: space-around; } .ideditor .save-section .buttons .action, @@ -7536,20 +8422,18 @@ display: none; text-align: center; } .ideditor .modal-actions { + display: -webkit-box; + 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%; } -.ideditor .modal-actions button:hover { - background-color: #ececec; -} .ideditor .logo-small { height: 40px; @@ -7687,41 +8571,54 @@ display: none; ------------------------------------------------------- */ .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:hover { +.ideditor .modal-shortcuts a.tab:focus, +.ideditor .modal-shortcuts a.tab:active { color: #597be7; background-color: #efefef; } +@media (hover: hover) { + .ideditor .modal-shortcuts a.tab:hover { + color: #597be7; + background-color: #efefef; + } +} .ideditor .modal-shortcuts .shortcut-tab { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-flow: row wrap; - justify-content: space-around; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + -ms-flex-pack: distribute; + justify-content: space-around; } .ideditor .modal-shortcuts .shortcut-column { @@ -7729,7 +8626,9 @@ display: none; } .ideditor .modal-shortcuts .shortcut-tab-tools .shortcut-column { - flex: 1 1 100%; + -webkit-box-flex: 1; + -ms-flex: 1 1 100%; + flex: 1 1 100%; width: 100%; } @@ -7755,15 +8654,6 @@ display: none; color: #555; } -.ideditor svg.mouseclick use.left { - fill: rgba(112, 146, 255, 1); - color: rgba(112, 146, 255, 0); -} -.ideditor svg.mouseclick use.right { - fill: rgba(112, 146, 255, 0); - color: rgba(112, 146, 255, 1); -} - .ideditor .modal-shortcuts .shortcut-keys .gesture { color: #333; padding: 3px; @@ -7780,6 +8670,16 @@ display: none; .ideditor .settings-custom-background .instructions-template { margin-bottom: 20px; } +.ideditor .settings-custom-background .instructions-template p { + margin-bottom: 0; +} +.ideditor .settings-custom-background .instructions-template ul { + padding-bottom: 20px; +} +.ideditor .settings-custom-background .instructions-template ul li { + list-style-type: disc; + list-style-position: inside; +} .ideditor .settings-custom-data .instructions-url { margin-bottom: 10px; @@ -7792,34 +8692,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; @@ -7827,62 +8713,45 @@ 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 .field-warning, +.ideditor .changeset-info, +.ideditor .request-review, +.ideditor .commit-info { margin-bottom: 10px; } -.ideditor.mode-save .request-review label { +.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 .changeset-list li button { + padding: 5px 10px; + width: 100%; + border-radius: 0; + text-align: initial; } - -.ideditor.mode-save .changeset-list li { - position: relative; +.ideditor .changeset-list li { border-top: 1px solid #ccc; - padding: 5px 10px; - cursor: pointer; } - -.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.mode-save .commit-section .changeset-list button { - border-left: 1px solid #ccc; -} - -.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 ------------------------------------------------------- */ @@ -7896,7 +8765,7 @@ display: none; padding: 20px; } -.ideditor.mode-save button.conflicts-button { +.ideditor button.conflicts-button { float: left; } @@ -7947,15 +8816,21 @@ 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:hover, -.ideditor .notice .zoom-to:focus { +.ideditor .notice .zoom-to:focus, +.ideditor .notice .zoom-to:active { background: rgba(0,0,0,0.6); } +@media (hover: hover) { + .ideditor .notice .zoom-to:hover { + background: rgba(0,0,0,0.6); + } +} .ideditor .notice .zoom-to .icon { width: 30px; @@ -8044,53 +8919,6 @@ display: none; background-color: #fff; } -.ideditor .tail { - width: 200px; - height: 400px; - pointer-events: none; - opacity: .8; - margin-top: -200px; - position: absolute; - background: transparent; -} -.ideditor .tail::after { - content: ""; - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - top: 50%; - right: -5px; - margin-top: -5px; - border-left-color: #fff; - border-width: 5px 0 5px 5px; -} - -.ideditor .tail div { - border-radius: 3px; - padding: 10px; - background: #fff; - position: absolute; - top: 180px; - left: 0; - right: 0; - margin: auto; -} - -.ideditor .left.tail::after { - content: ""; - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - top: 50%; - left: -5px; - margin-top: -5px; - border-right-color: #fff; - border-width: 5px 5px 5px 0; -} .ideditor .popover-arrow { position: absolute; width: 0; @@ -8158,22 +8986,22 @@ 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 { 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 { 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 { 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 { border-right-color: #000; } .ideditor .tooltip.dark .popover-inner, @@ -8182,19 +9010,20 @@ display: none; .ideditor .map-pane .popover-inner, .ideditor .map-pane .tooltip-heading, .ideditor .map-pane .keyhint-wrap, -.ideditor #sidebar .popover-inner, -.ideditor #sidebar .tooltip-heading, -.ideditor #sidebar .keyhint-wrap { +.ideditor .sidebar .popover-inner, +.ideditor .sidebar .tooltip-heading, +.ideditor .sidebar .keyhint-wrap { background: #000; color: #ccc; } .ideditor .tooltip.dark kbd, .ideditor .map-pane .tooltip kbd, -.ideditor #sidebar .tooltip kbd { +.ideditor .sidebar .tooltip kbd { background-color: #666; border: solid 1px #444; border-bottom-color: #333; - box-shadow: inset 0 -1px 0 #333; + -webkit-box-shadow: inset 0 -1px 0 #333; + box-shadow: inset 0 -1px 0 #333; color: #eee; } @@ -8227,84 +9056,53 @@ display: none; } -/* Contextual Radial Menu (deprecated) -------------------------------------------------------- */ -.ideditor .radial-menu-tooltip { - opacity: 0.8; - display: none; - position: absolute; - width: 200px; -} - -.ideditor .radial-menu-background { - fill: none; - stroke: black; - stroke-opacity: 0.5; -} - -.ideditor .radial-menu-item circle { - fill: #eee; -} - -.ideditor .radial-menu-item circle:active, -.ideditor .radial-menu-item circle:hover { - fill: #fff; -} - -.ideditor .radial-menu-item.disabled circle { - cursor: auto; - fill: rgba(255,255,255,.5); -} - -.ideditor .radial-menu-item use { - fill: #222; - color: #79f; -} - -.ideditor .radial-menu-item.disabled use { - fill: rgba(32,32,32,.5); - color: rgba(40,40,40,.5); -} - - /* Contextual Edit Menu ------------------------------------------------------- */ -.ideditor .edit-menu-tooltip { - width: 200px; +.ideditor .edit-menu { + position: absolute; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + background: #fff; + border-radius: 4px; + /* padding is set in edit_menu.js */ } -.ideditor .edit-menu-background { - fill: #eee; +.ideditor .edit-menu .tooltip { + width: 200px; /* see also edit_menu.js */ } -.ideditor .edit-menu-item rect { - fill: #eee; - cursor: default; +.ideditor .edit-menu-item { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 0; + padding: 0 12px; + /* height is set in edit_menu.js */ } - -.ideditor .edit-menu-item rect:active, -.ideditor .edit-menu-item rect:hover { - fill: #ccc; +.ideditor .edit-menu-item .label { + max-width: 120px; + text-align: initial; + line-height: 1.1em; + font-weight: bold; } - -.ideditor .edit-menu-item.disabled rect { - cursor: not-allowed; +.ideditor[dir='ltr'] .edit-menu-item .label { + margin-left: 8px; } -.ideditor .edit-menu-item.disabled rect:hover { - cursor: not-allowed; - fill: #eee; +.ideditor[dir='rtl'] .edit-menu-item .label { + margin-right: 8px; } .ideditor .edit-menu-item use { - fill: #222; - color: #79f; pointer-events: none; } -.ideditor .edit-menu-item.disabled use { - fill: rgba(32,32,32,.2); - color: rgba(40,40,40,.2); -} - /* Lasso ------------------------------------------------------- */ @@ -8340,14 +9138,24 @@ display: none; border-width: 3px 3px 3px 4px; border-radius: 6px; } -.ideditor ::-webkit-scrollbar-track:hover, .ideditor ::-webkit-scrollbar-track:active { background-color: rgba(0,0,0,.05); } +@media (hover: hover) { + .ideditor ::-webkit-scrollbar-track:hover { + background-color: rgba(0,0,0,.05); + } +} /* Intro walkthrough ----------------------------------------------------- */ +.ideditor .curtain { + z-index: 1000; + pointer-events: none; + position: absolute; +} + .ideditor .curtain-darkness { pointer-events: all; fill-opacity: 0.7; @@ -8356,8 +9164,13 @@ display: none; } .ideditor .intro-nav-wrap { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: row; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; position: absolute; left: 0; right: 0; @@ -8367,7 +9180,9 @@ display: none; } .ideditor .intro-nav-wrap .intro-nav-wrap-logo { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; height: 40px; width: 40px; color: #fff; @@ -8376,21 +9191,39 @@ display: none; } .ideditor .intro-nav-wrap .joined { - flex: 1 1 auto; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: row; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; } .ideditor .intro-nav-wrap button.chapter { - flex: 1 1 100%; - padding: 0px 20px; + -webkit-box-flex: 1; + -ms-flex: 1 1 100%; + flex: 1 1 100%; + padding: 0px 5px; + font-weight: bold; } .ideditor .intro-nav-wrap button.chapter.next { - animation-duration: 1s; - animation-name: pulse; - animation-iteration-count: infinite; - animation-direction: alternate; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-name: pulse; + animation-name: pulse; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-direction: alternate; + animation-direction: alternate; +} +@-webkit-keyframes pulse { + from { background: #7092ff; } + to { background: #c6d4ff; } } @keyframes pulse { from { background: #7092ff; } @@ -8409,6 +9242,10 @@ display: none; display: inline-block; } +.ideditor .curtain-tooltip { + z-index: 1002; +} + .ideditor .curtain-tooltip.tooltip.in { opacity: 1; } @@ -8470,10 +9307,10 @@ display: none; } .ideditor .curtain-tooltip.intro-mouse { - -moz-user-select: none; -webkit-user-select: none; - -ms-user-select: none; - user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .ideditor .curtain-tooltip.intro-mouse .counter { @@ -8500,7 +9337,6 @@ display: none; .ideditor .huge-modal-button { width: 100%; - height: auto; padding: 20px; } @@ -8509,12 +9345,3 @@ display: none; width: 100px; color: #7092ff; } - - -.ideditor .list-item-photos.list-item-mapillary-map-features .request-data-link { - float: right; - margin-top: -20px; -} -.ideditor[dir='rtl'] .list-item-photos.list-item-mapillary-map-features .request-data-link { - float: left; -}