X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/3350bd9422c54746b5870375987837ccb880c8c8..190d5eec072109cb22e8f0c143cc3934340b7480:/vendor/assets/iD/iD.css.erb diff --git a/vendor/assets/iD/iD.css.erb b/vendor/assets/iD/iD.css.erb index ad817760e..4dd59ebf3 100644 --- a/vendor/assets/iD/iD.css.erb +++ b/vendor/assets/iD/iD.css.erb @@ -628,7 +628,11 @@ .ideditor path.stroke.tag-leisure-pitch, .ideditor path.stroke.tag-leisure-track, .ideditor path.stroke.tag-natural, -.ideditor path.stroke.tag-natural-wood { +.ideditor path.stroke.tag-natural-wood, +.ideditor path.stroke.tag-golf-tee, +.ideditor path.stroke.tag-golf-fairway, +.ideditor path.stroke.tag-golf-rough, +.ideditor path.stroke.tag-golf-green { stroke: rgb(140, 208, 95); } .ideditor path.fill.tag-barrier-hedge, @@ -644,7 +648,11 @@ .ideditor path.fill.tag-leisure-pitch, .ideditor path.fill.tag-leisure-track, .ideditor path.fill.tag-natural, -.ideditor path.fill.tag-natural-wood { +.ideditor path.fill.tag-natural-wood, +.ideditor path.fill.tag-golf-tee, +.ideditor path.fill.tag-golf-fairway, +.ideditor path.fill.tag-golf-rough, +.ideditor path.fill.tag-golf-green { stroke: rgba(140, 208, 95, 0.3); fill: rgba(140, 208, 95, 0.3); } @@ -662,12 +670,14 @@ .ideditor path.stroke.tag-amenity-fountain, .ideditor path.stroke.tag-leisure-swimming_pool, .ideditor path.stroke.tag-natural-bay, +.ideditor path.stroke.tag-natural-strait, .ideditor path.stroke.tag-natural-water { stroke: rgb(119, 211, 222); } .ideditor path.fill.tag-amenity-fountain, .ideditor path.fill.tag-leisure-swimming_pool, .ideditor path.fill.tag-natural-bay, +.ideditor path.fill.tag-natural-strait, .ideditor path.fill.tag-natural-water { stroke: rgba(119, 211, 222, 0.3); fill: rgba(119, 211, 222, 0.3); @@ -842,14 +852,17 @@ /* Tan things */ -.ideditor path.stroke.tag-landuse-farmyard { +.ideditor path.stroke.tag-landuse-farmyard, +.ideditor path.stroke.tag-leisure-horse_riding { stroke: rgb(245, 220, 186); } -.ideditor path.fill.tag-landuse-farmyard { +.ideditor path.fill.tag-landuse-farmyard, +.ideditor path.fill.tag-leisure-horse_riding { stroke: rgba(245, 220, 186, 0.3); fill: rgba(245, 220, 186, 0.3); } -.ideditor .preset-icon-fill path.area.stroke.tag-landuse-farmyard { +.ideditor .preset-icon-fill path.area.stroke.tag-landuse-farmyard +.preset-icon-fill path.area.stroke.tag-leisure-horse_riding { stroke: rgb(226, 177, 111); } .ideditor .pattern-color-farmyard { @@ -1385,6 +1398,7 @@ .ideditor path.line.stroke.tag-public_transport-platform, .ideditor path.line.stroke.tag-highway-platform, .ideditor path.line.stroke.tag-railway-platform, +.ideditor path.line.stroke.tag-railway-platform_edge, .ideditor path.line.stroke.tag-man_made-pier { stroke: #dca; } @@ -1542,14 +1556,12 @@ .ideditor path.line.stroke.tag-highway.tag-footway-access_aisle { stroke-dasharray: 4, 2; + stroke: #4c4444; } .ideditor .low-zoom path.line.stroke.tag-highway.tag-footway-access_aisle, .ideditor .preset-icon-container path.stroke.tag-highway.tag-footway-access_aisle { stroke-dasharray: 2.5, 1.5; } -.ideditor path.line.stroke.tag-highway.tag-footway-access_aisle { - stroke: #4c4444; -} .ideditor .preset-icon .icon.tag-highway.tag-footway-access_aisle { color: #4c4444; } @@ -1589,10 +1601,12 @@ } .ideditor path.line.casing.tag-aeroway-taxiway, .ideditor path.line.casing.tag-taxiway { + stroke: #666; stroke-width: 7; } .ideditor path.line.stroke.tag-aeroway-taxiway, .ideditor path.line.stroke.tag-taxiway { + stroke: #ff0; stroke-width: 5; } .ideditor .low-zoom path.line.shadow.tag-aeroway-taxiway, @@ -1608,15 +1622,6 @@ stroke-width: 3; } -.ideditor path.line.stroke.tag-aeroway-taxiway, -.ideditor path.line.stroke.tag-taxiway { - stroke: #ff0; -} -.ideditor path.line.casing.tag-aeroway-taxiway, -.ideditor path.line.casing.tag-taxiway { - stroke: #666; -} - /* wide aeroways (runway) */ .ideditor .preset-icon .icon.tag-aeroway-runway, .ideditor .preset-icon .icon.tag-runway { @@ -1672,7 +1677,7 @@ .ideditor path.line.stroke.tag-railway { stroke-width: 2; stroke-linecap: butt; - stroke-dasharray: 12,12; + stroke-dasharray: 12, 12; } .ideditor .low-zoom path.line.shadow.tag-railway { stroke-width: 12; @@ -1682,16 +1687,18 @@ } .ideditor .low-zoom path.line.stroke.tag-railway { stroke-width: 2; - stroke-dasharray: 6,6; + stroke-dasharray: 6, 6; } .ideditor .preset-icon-container path.line.stroke.tag-railway:not(.tag-status), .ideditor .preset-icon-container path.line.stroke.tag-railway.tag-status-disused { stroke-dasharray: 6; } +.ideditor path.line.casing.tag-railway.tag-railway-platform_edge, .ideditor path.line.casing.tag-railway.tag-railway-platform { stroke-width: 0; } +.ideditor path.line.stroke.tag-railway.tag-railway-platform_edge, .ideditor path.line.stroke.tag-railway.tag-railway-platform { stroke-dasharray: none; } @@ -1704,7 +1711,6 @@ stroke: #eee; } - .ideditor .preset-icon .icon.tag-railway.tag-status { color: #999; } @@ -1721,7 +1727,6 @@ stroke: #808080; } - .ideditor path.line.casing.tag-railway-subway { stroke: #222; } @@ -1893,6 +1898,7 @@ stroke-width: 16; } .ideditor path.line.stroke.tag-route-ferry { + stroke: #58a9ed; stroke-width: 3; stroke-linecap: butt; stroke-dasharray: 12,8; @@ -1905,9 +1911,6 @@ stroke-width: 2; stroke-dasharray: 6,4; } -.ideditor path.line.stroke.tag-route-ferry { - stroke: #58a9ed; -} .ideditor path.line.casing.tag-route-ferry { stroke: none; } @@ -2065,15 +2068,13 @@ .ideditor path.line.casing.tag-bridge { stroke-opacity: 0.6; stroke: #000 !important; + stroke-width: 16; stroke-linecap: butt; stroke-dasharray: none; } .ideditor path.line.shadow.tag-bridge { stroke-width: 24; } -.ideditor path.line.casing.tag-bridge { - stroke-width: 16; -} .ideditor .low-zoom path.line.shadow.tag-bridge { stroke-width: 16; } @@ -2252,6 +2253,62 @@ stroke-dasharray: 8, 8; } +/** Closed Paths */ +.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-path, +.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-footway, +.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-cycleway, +.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-bridleway, +.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-steps { + stroke-width: 15; +} +.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-path, +.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-footway, +.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-cycleway, +.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-bridleway, +.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-steps { + stroke-width: 5; + stroke-linecap: butt; + stroke-dasharray: none +} +.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-path, +.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-footway, +.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-cycleway, +.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-bridleway, +.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-steps { + stroke-width: 4; + stroke-linecap: butt; + stroke-dasharray: 10, 10; +} + +/** Proposed Paths */ +.ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-path, +.ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-footway, +.ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-cycleway, +.ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-bridleway, +.ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-steps { + stroke-width: 15; +} +.ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-path, +.ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-footway, +.ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-cycleway, +.ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-bridleway, +.ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-steps { + stroke-width: 4.5; +} +.ideditor path.line.casing.tag-highway.tag-bridge.tag-status.tag-status-proposed.tag-proposed-path, +.ideditor path.line.casing.tag-highway.tag-bridge.tag-status.tag-status-proposed.tag-proposed-footway, +.ideditor path.line.casing.tag-highway.tag-bridge.tag-status.tag-status-proposed.tag-proposed-cycleway, +.ideditor path.line.casing.tag-highway.tag-bridge.tag-status.tag-status-proposed.tag-proposed-bridleway, +.ideditor path.line.casing.tag-highway.tag-bridge.tag-status.tag-status-proposed.tag-proposed-steps { + stroke-width: 10; +} +.ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-path, +.ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-footway, +.ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-cycleway, +.ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-bridleway, +.ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-steps { + stroke-width: 3; +} /* Buildings */ .ideditor path.stroke.tag-building { @@ -2399,9 +2456,8 @@ /* photo viewer div */ .ideditor .photoviewer { position: relative; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; margin-bottom: 10px; width: 330px; height: 250px; @@ -2636,14 +2692,14 @@ } -/* OpenStreetCam Image Layer */ -.ideditor .layer-openstreetcam { +/* KartaView Image Layer */ +.ideditor .layer-kartaview { pointer-events: none; } -.ideditor .layer-openstreetcam .viewfield-group * { +.ideditor .layer-kartaview .viewfield-group * { fill: #20c4ff; } -.ideditor .layer-openstreetcam .sequence { +.ideditor .layer-kartaview .sequence { stroke: #20c4ff; } @@ -2654,20 +2710,16 @@ } .ideditor .ms-wrapper .photo-attribution .attribution-row { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: justify; - -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; - -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 0 5px; @@ -2723,22 +2775,18 @@ .ideditor .mly-wrapper .mapillary-attribution-container { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; - -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .ideditor .mly-wrapper .mapillary-attribution-container .mapillary-attribution-icon-container { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; - -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @@ -2751,8 +2799,8 @@ margin-right: 6px; } -/* OpenStreetCam viewer */ -.ideditor .osc-wrapper { +/* KartaView viewer */ +.ideditor .kartaview-wrapper { position: relative; background-color: #000; background-image: url(<%= asset_path("iD/img/loader-black.gif") %>); @@ -2760,16 +2808,16 @@ background-repeat: no-repeat; } -.ideditor .osc-wrapper .photo-attribution a:active { +.ideditor .kartaview-wrapper .photo-attribution a:active { color: #20c4ff; } @media (hover: hover) { - .ideditor .osc-wrapper .photo-attribution a:hover { + .ideditor .kartaview-wrapper .photo-attribution a:hover { color: #20c4ff; } } -.ideditor .osc-image-wrap { +.ideditor .kartaview-image-wrap { width: 100%; height: 100%; -webkit-transform-origin:0 0; @@ -2870,15 +2918,12 @@ } .ideditor .qa-header-icon { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; - -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; - -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } @@ -3094,6 +3139,59 @@ .ideditor.mode-select-note .fill-partial path.area.fill { pointer-events: visibleStroke; } +.ideditor svg.preset-icon-category-border path { + stroke-width: 1; + stroke: rgb(170, 170, 170); + fill: rgba(170, 170, 170, 0.3); +} + +.ideditor .preset-category-barrier svg.preset-icon-category-border path { + stroke: rgb(200, 144, 144); + fill: rgba(200, 144, 144, 0.3); +} + +.ideditor .preset-category-building svg.preset-icon-category-border path { + stroke: rgb(224, 110, 95); + fill: rgba(224, 110, 95, 0.3); +} + +.ideditor .preset-category-landuse svg.preset-icon-category-border path { + stroke: rgb(196, 189, 25); + fill: rgba(196, 189, 25, 0.3); +} + +.ideditor .preset-category-natural svg.preset-icon-category-border path, +.ideditor .preset-category-playground svg.preset-icon-category-border path, +.ideditor .preset-category-golf svg.preset-icon-category-border path { + stroke: rgb(140, 208, 95); + fill: rgba(140, 208, 95, 0.3); +} + +.ideditor .preset-category-water svg.preset-icon-category-border path, +.ideditor .preset-category-waterway svg.preset-icon-category-border path { + stroke: rgb(119, 211, 222); + fill: rgba(119, 211, 222, 0.3); +} + +.ideditor .preset-category-utility svg.preset-icon-category-border path { + stroke: rgb(125, 125, 125); + fill: rgba(219, 219, 125, 0.3); +} + +.ideditor .preset-category-path svg.preset-icon-category-border path { + stroke: rgb(221, 221, 204); + fill: rgba(221, 221, 204, 0.3); +} + +.ideditor .preset-category-road_service svg.preset-icon-category-border path, +.ideditor .preset-category-road_minor svg.preset-icon-category-border path, +.ideditor .preset-category-road_major svg.preset-icon-category-border path { + stroke: #999; +} + +.ideditor .preset-category-rail svg.preset-icon-category-border path { + stroke: #555; +} /* Basics ------------------------------------------------------- */ /* the root element of iD */ @@ -3133,12 +3231,10 @@ .ideditor .main-content { position: relative; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; - -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; overflow: hidden; @@ -3195,9 +3291,14 @@ font-weight: bold; margin-bottom: 20px; } +.ideditor .header h2 { + font-size: 20px; + line-height: 1.25; + font-weight: bold; + margin-bottom: 0px; +} .ideditor h3:last-child, -.ideditor h2:last-child, .ideditor h4:last-child { margin-bottom: 0;} .ideditor h3 { @@ -3325,7 +3426,8 @@ .ideditor input[type=url], .ideditor input[type=tel], .ideditor input[type=email], -.ideditor input[type=date] { +.ideditor input[type=date], +.ideditor input[type=color] { /* need this since line-height interpretation may vary by font or browser */ height: 2.585em; } @@ -3358,13 +3460,13 @@ .ideditor input[type="radio"] { width: 14px; height: 14px; - margin-right: 5px; + margin-right: 6px; cursor: pointer; vertical-align: middle; } .ideditor[dir='rtl'] input[type="checkbox"], .ideditor[dir='rtl'] input[type="radio"] { - margin-left: 5px; + margin-left: 6px; margin-right: 0; } @@ -3647,6 +3749,7 @@ .ideditor .icon-annotation { color: #333; + vertical-align: baseline; } @@ -3658,16 +3761,13 @@ } .ideditor .top-toolbar { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: justify; - -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; padding: 10px 0 0 0; @@ -3685,39 +3785,31 @@ } .ideditor .top-toolbar .toolbar-item { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; - -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-box-orient: vertical; -webkit-box-direction: normal; - -webkit-flex-flow: column wrap; -ms-flex-flow: column wrap; flex-flow: column wrap; -webkit-box-pack: center; - -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .ideditor .top-toolbar .toolbar-item .item-content { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; - -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: center; - -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; height: 40px; @@ -3749,19 +3841,16 @@ .ideditor .top-toolbar .toolbar-item.spacer { width: 100%; -webkit-box-flex: 2; - -webkit-flex-grow: 2; -ms-flex-positive: 2; flex-grow: 2; } .ideditor .top-toolbar .toolbar-item:first-child { -webkit-box-pack: start; - -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } .ideditor .top-toolbar .toolbar-item:last-child { -webkit-box-pack: end; - -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; } @@ -3770,36 +3859,30 @@ } .ideditor button.bar-button { -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; - -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 0 10px; min-width: 30px; white-space: nowrap; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; font-weight: bold; } .ideditor button.bar-button .icon { -webkit-box-flex: 0; - -webkit-flex: 0 0 20px; -ms-flex: 0 0 20px; flex: 0 0 20px; } .ideditor button.bar-button .label { -webkit-box-flex: 0; - -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; padding: 0 5px; @@ -3891,19 +3974,15 @@ padding: 20px 40px; position: relative; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; - -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; - -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } @@ -3982,27 +4061,22 @@ width: 100%; height: 2.5em; z-index: 1; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; -webkit-box-pack: justify; - -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; - -webkit-align-items: center; -ms-flex-align: center; align-items: center; list-style: none; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; } .ideditor .footer > a { -webkit-box-pack: center; - -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } @@ -4080,12 +4154,10 @@ bottom: 0; right: 0; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; - -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } @@ -4110,12 +4182,10 @@ top: 0; bottom: 2.5em; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; - -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } @@ -4129,12 +4199,10 @@ } .ideditor .feature-list-pane { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; - -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; height: 100%; @@ -4157,7 +4225,6 @@ position: relative; height: 100%; -webkit-box-flex: 1; - -webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; } @@ -4173,7 +4240,6 @@ position: relative; overflow: hidden; -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } @@ -4233,7 +4299,6 @@ .ideditor .feature-list-item { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; } @@ -4245,7 +4310,6 @@ text-overflow: ellipsis; overflow: hidden; -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; } @@ -4325,7 +4389,6 @@ .ideditor .preset-list-button-wrap { min-height: 62px; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; border: 1px solid #ccc; @@ -4337,11 +4400,9 @@ height: 100%; position: relative; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; - -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @@ -4356,19 +4417,15 @@ height: 60px; text-align: center; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; - -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; - -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } @@ -4376,7 +4433,6 @@ width: 40px; height: 40px; -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } @@ -4526,16 +4582,13 @@ .ideditor .preset-list-button .label { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-align: center; - -webkit-align-items: center; -ms-flex-align: center; align-items: center; background: #f6f6f6; @@ -4543,12 +4596,10 @@ padding: 5px 10px; border-left: 1px solid rgba(0, 0, 0, .1); -webkit-box-flex: 1; - -webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; - -webkit-align-self: stretch; - -ms-flex-item-align: stretch; - align-self: stretch; + -ms-flex-item-align: stretch; + align-self: stretch; } .ideditor[dir='rtl'] .preset-list-button .label { text-align: right; @@ -4601,7 +4652,6 @@ .ideditor .preset-list-button-wrap button.tag-reference-button { width: 32px; -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } @@ -4625,7 +4675,6 @@ } .ideditor .preset-list-button-wrap .accessory-buttons { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; } @@ -4678,16 +4727,13 @@ ------------------------------------------------------- */ .ideditor .quick-links { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: end; - -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; padding: 5px 0 0 0; @@ -4732,12 +4778,10 @@ .ideditor .form-field { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; margin-bottom: 10px; @@ -4755,16 +4799,13 @@ /* A `label` element that wraps the top section */ .ideditor .field-label { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-flex: 1; - -webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; position: relative; @@ -4780,7 +4821,6 @@ -o-text-overflow: ellipsis; text-overflow: ellipsis; -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 5px 0 4px 10px; @@ -4803,7 +4843,6 @@ .ideditor .field-label button { -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; border-left: 1px solid #ccc; @@ -4836,17 +4875,14 @@ /* A `div` element that wraps the bottom section */ .ideditor .form-field-input-wrap { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; width: 100%; -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; border-top: 0; @@ -4862,7 +4898,6 @@ .ideditor .form-field-input-wrap > textarea, .ideditor .form-field-input-wrap > ul.chiplist { -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; border: 1px solid #ccc; @@ -4878,7 +4913,6 @@ /* Buttons inside fields */ .ideditor .form-field-button { -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 32px; @@ -4907,6 +4941,38 @@ fill: #333; opacity: .5; } +.ideditor .form-field-button.colour-preview { + border-radius: 0 0 4px 0; +} +.ideditor .form-field-button.colour-preview > div.colour-box { + border: 3px solid #fff; + height: 100%; + border-radius: 8px; + cursor: pointer; + text-align: center; + line-height: 20px; + padding: 1px 0 0 1px; +} +.ideditor .inspector-hover .form-field-button.colour-preview > div.colour-box { + border-color: #ececec; +} +.ideditor .form-field-button.colour-preview:active > div.colour-box, +.ideditor .form-field-button.colour-preview:focus > div.colour-box { + border-color: #f1f1f1; +} +@media (hover: hover) { + .ideditor .form-field-button.colour-preview:hover > div.colour-box { + border-color: #f1f1f1; + } +} +.ideditor input.colour-selector { + visibility: hidden; + position: absolute; +} +.ideditor input.date-selector { + visibility: hidden; + position: absolute; +} /* round corners of first/last child elements */ @@ -4918,21 +4984,18 @@ } -/* Field - Access, Cycleway +/* Field - Access, DirectionalCombo ------------------------------------------------------- */ .ideditor .form-field-input-access, -.ideditor .form-field-input-cycleway { +.ideditor .form-field-input-directionalcombo { -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; } @@ -4941,7 +5004,6 @@ ------------------------------------------------------- */ .ideditor .form-field ul.rows { -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; border: 1px solid #ccc; @@ -4958,19 +5020,16 @@ } .ideditor .form-field ul.rows li { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .ideditor .form-field ul.rows li.labeled-input > span, .ideditor .form-field ul.rows li.labeled-input > div { -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; width: 100%; @@ -5043,16 +5102,13 @@ .ideditor .form-field-input-multicombo li { display: -webkit-inline-box; - display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; - -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-bottom: 3px; @@ -5101,7 +5157,6 @@ .ideditor .form-field-input-multicombo li.chip span { display: block; -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; overflow: hidden; @@ -5118,14 +5173,13 @@ display: block; text-align: center; -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } .ideditor .form-field-input-multicombo .input-wrap { border: 1px solid #ddd; - width: 100px; + width: 180px; } .ideditor .form-field-input-multicombo input { border: none; @@ -5143,15 +5197,50 @@ width: auto; } +.ideditor .form-field-input-combo .tag-value-icon { + display: inline-block; + position: relative; + height: 24px; + width: 30px; + margin-right: -30px; + -ms-flex-item-align: center; + align-self: center; + vertical-align: middle; + z-index: 1; + padding-left: 11px; +} +.ideditor[dir='rtl'] .form-field-input-combo .tag-value-icon { + margin-right: 0; + margin-left: -30px; + padding-left: 0; + padding-right: 11px; +} +.ideditor .tag-value-icon .icon { + width: 21px; + height: 21px; + margin: auto; +} +.ideditor[dir='ltr'] .form-field-input-combo .tag-value-icon + input { + padding-left: 40px; +} +.ideditor[dir='rtl'] .form-field-input-combo .tag-value-icon + input { + padding-right: 40px; +} +.ideditor .combobox-option .tag-value-icon { + display: inline-block; + width: 28px; +} + /* Field - Text / Numeric ------------------------------------------------------- */ -.ideditor .form-field-input-text > input:only-of-type, +.ideditor .form-field-input-text > input:only-child, .ideditor .form-field-input-tel > input:only-of-type, .ideditor .form-field-input-email > input:only-of-type, .ideditor .form-field-input-url > input:only-child { border-radius: 0 0 4px 4px; } +.ideditor .form-field-input-text > input:not(:only-child), .ideditor .form-field-input-url > input:not(:only-child) { border-radius: 0 0 0 4px; } @@ -5204,11 +5293,9 @@ ------------------------------------------------------- */ .ideditor .form-field-input-check { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; - -webkit-align-items: center; -ms-flex-align: center; align-items: center; background: #fff; @@ -5220,15 +5307,12 @@ } .ideditor .form-field-input-check > input[type="checkbox"] { -webkit-box-flex: 0; - -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; - width: 20px; margin-top: 0; } .ideditor .form-field-input-check > span { -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; } @@ -5237,7 +5321,6 @@ } .ideditor .form-field-input-check > .reverser { -webkit-box-flex: 0; - -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; background-color: #eff2f7; @@ -5285,35 +5368,28 @@ ------------------------------------------------------- */ .ideditor .form-field-input-radio { -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; } .ideditor .form-field-input-radio > label { -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; - -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 100%; @@ -5345,14 +5421,11 @@ } .ideditor .form-field-input-radio > label > input[type="radio"] { -webkit-box-flex: 0; - -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; - width: 20px; } .ideditor .form-field-input-radio > label > span { -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; overflow: hidden; @@ -5378,21 +5451,18 @@ .ideditor .form-field-input-roadheight input.roadheight-number, .ideditor .form-field-input-roadheight input.roadheight-secondary-number, .ideditor .form-field-input-roadspeed input.roadspeed-number { - -webkit-flex-basis: 0; - -ms-flex-preferred-size: 0; - flex-basis: 0; + -ms-flex-preferred-size: 0; + flex-basis: 0; } .ideditor .form-field-input-roadheight input.roadheight-unit, .ideditor .form-field-input-roadheight input.roadheight-secondary-unit { -webkit-box-flex: 0; - -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; width: 60px; } .ideditor .form-field-input-roadspeed input.roadspeed-unit { -webkit-box-flex: 0; - -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; width: 80px; @@ -5444,9 +5514,8 @@ /* nested subfields for name in different languages */ .ideditor .localized-multilingual { padding: 0 10px; - -webkit-flex-basis: 100%; - -ms-flex-preferred-size: 100%; - flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; } .ideditor .localized-multilingual .entry { position: relative; @@ -5483,16 +5552,13 @@ ------------------------------------------------------- */ .ideditor .form-field-input-address { -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; border: 1px solid #ccc; @@ -5501,11 +5567,9 @@ .ideditor .addr-row { -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; @@ -5513,7 +5577,6 @@ .ideditor .addr-row > input { -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; border-radius: 0; @@ -5552,16 +5615,13 @@ ------------------------------------------------------- */ .ideditor .form-field-input-wikipedia { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; } @@ -5569,16 +5629,13 @@ .ideditor .wiki-lang-container, .ideditor .wiki-title-container { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; width: 100%; @@ -5587,7 +5644,6 @@ .ideditor .wiki-lang-container > input.wiki-lang, .ideditor .wiki-title-container > input.wiki-title { -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; border-top: 0; @@ -5780,9 +5836,8 @@ height: 5px; width: 30px !important; margin-left: -30px; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; + -ms-flex-item-align: center; + align-self: center; vertical-align: middle; cursor: pointer; } @@ -5807,6 +5862,42 @@ color: #333; } +.ideditor .form-field-input-wrap { + position: relative; +} + +.ideditor .form-field-input-wrap span.length-indicator-wrap { + visibility: hidden; + position: absolute; + top: -5px; + left: 0; + right: 0; +} + +.ideditor .form-field-input-wrap input:focus + span.length-indicator-wrap, +.ideditor .form-field-input-wrap textarea:focus + span.length-indicator-wrap, +.ideditor .form-field-input-wrap input:focus + div.combobox-caret + span.length-indicator-wrap, +.ideditor .form-field-input-wrap textarea:focus + div.combobox-caret + span.length-indicator-wrap { + visibility: visible; +} + +.ideditor .form-field-input-wrap span.length-indicator { + display: block; + left: 0; + right: 0; + height: 4px; + background-color: #7092ff; + border-right-style: solid; + border-right-color: lightgray; +} + +.ideditor .form-field-input-wrap span.length-indicator.limit-reached { + border-right-color: red; +} + +.ideditor .tooltip.max-length-warning { + z-index: 10; +} /* Field Help ------------------------------------------------------- */ @@ -5927,20 +6018,16 @@ .ideditor .more-fields label { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: justify; - -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; - -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @@ -5948,7 +6035,6 @@ .ideditor .more-fields input { margin-left: 10px; -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; } @@ -5967,23 +6053,19 @@ ------------------------------------------------------- */ .ideditor .raw-tag-options { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: end; - -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; margin-top: -28px; } .ideditor button.raw-tag-option { -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; padding: 3px; @@ -6039,12 +6121,10 @@ } .ideditor .tag-row .inner-wrap { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; width: 100%; @@ -6053,7 +6133,6 @@ .ideditor .tag-row .key-wrap, .ideditor .tag-row .value-wrap { -webkit-box-flex: 1; - -webkit-flex: 1 1 50%; -ms-flex: 1 1 50%; flex: 1 1 50%; } @@ -6107,7 +6186,6 @@ } .ideditor .tag-row button { -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 32px; @@ -6171,7 +6249,6 @@ .ideditor .tag-reference-body { -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; width: 100%; @@ -6257,7 +6334,6 @@ .ideditor .member-row-new .member-entity-input { -webkit-box-flex: 1; - -webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; border-radius: 4px 4px 0 0; @@ -6275,13 +6351,11 @@ /* add tag, add relation buttons */ .ideditor .add-row { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } @@ -6289,13 +6363,11 @@ .ideditor .add-row .add-relation, .ideditor .add-row .space-value { -webkit-box-flex: 1; - -webkit-flex: 1 1 50%; -ms-flex: 1 1 50%; flex: 1 1 50%; } .ideditor .add-row .space-buttons { -webkit-box-flex: 0; - -webkit-flex: 0 0 62px; -ms-flex: 0 0 62px; flex: 0 0 62px; } @@ -6330,16 +6402,13 @@ border-radius: 5px; border: 1px solid #ccc; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; - -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @@ -6349,7 +6418,6 @@ background-color: #fff; padding: 10px; -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; position: relative; @@ -6386,7 +6454,6 @@ background-color: #f6f6f6; padding: 0 15px; -webkit-box-flex: 1; - -webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; font-size: 14px; @@ -6415,19 +6482,16 @@ border: 1px solid #ccc; margin: 10px auto; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .ideditor .comment-avatar { padding: 10px; -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } @@ -6442,12 +6506,10 @@ .ideditor .comment-main { padding: 10px 10px 10px 0; -webkit-box-flex: 1; - -webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; - -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; overflow: hidden; @@ -6460,11 +6522,9 @@ .ideditor .comment-metadata { -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: justify; - -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } @@ -6497,12 +6557,10 @@ border-radius: 4px; border: 1px solid #ccc; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; - -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } @@ -6547,16 +6605,13 @@ border-radius: 5px; border: 1px solid #ccc; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; - -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @@ -6565,7 +6620,6 @@ background-color: #fff; padding: 10px; -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; position: relative; @@ -6589,7 +6643,6 @@ background-color: #f6f6f6; padding: 0 15px; -webkit-box-flex: 1; - -webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; font-size: 14px; @@ -6615,16 +6668,13 @@ height: 100%; pointer-events: none; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; - -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-align: end; - -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; overflow: hidden; @@ -6642,29 +6692,37 @@ /* Map Controls ------------------------------------------------------- */ +.ideditor .map-controls-wrap { + position: absolute; + left: 0; + right: 0; + height: 100%; + z-index: 100; + display: block; + overflow-x: hidden; + overflow-y: auto; + pointer-events: none; + -ms-overflow-style: none; + scrollbar-width: none; +} +.ideditor .map-controls-wrap::-webkit-scrollbar { + display: none; +} .ideditor .map-controls { right: 0; top: 0; width: 40px; position: absolute; - z-index: 100; bottom: 0; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; - -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding: 5px 0; pointer-events: none; - overflow-x: hidden; - overflow-y: auto; -} -.ideditor .map-controls::-webkit-scrollbar { - display: none; } .ideditor .map-controls:before { content: ''; @@ -6674,7 +6732,6 @@ height: 100%; max-height: 70px; -webkit-box-flex: 0; - -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; } @@ -6686,12 +6743,10 @@ .ideditor .map-control { position: relative; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; - -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } @@ -6729,7 +6784,7 @@ /* Fullscreen Button (disabled) ------------------------------------------------------- */ .ideditor div.full-screen { - display: inline-block; + /*display: inline-block;*/ width: 40px; margin-right: 10px; display: none; @@ -6819,7 +6874,6 @@ color: #7092ff; position: relative; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; } @@ -6859,9 +6913,10 @@ .ideditor .layer-list li.best > div.best { padding: 5px; -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; + -ms-flex-item-align: center; + align-self: center; } .ideditor[dir='rtl'] .list-item-data-browse svg { @@ -6879,15 +6934,12 @@ padding: 5px 10px; cursor: pointer; -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; - -webkit-align-items: center; -ms-flex-align: center; align-items: center; overflow: hidden; @@ -6903,13 +6955,11 @@ .ideditor .layer-list label > span { display: block; overflow: hidden; - white-space: nowrap; - -o-text-overflow: ellipsis; - text-overflow: ellipsis; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; + width: calc(100% - 20px); /* Ensures radio input width within flexbox */ +} + +.ideditor .layer-list label span.localized-text { + line-height: 0.95rem; } .ideditor .layer-list input.list-item-input { @@ -6963,12 +7013,10 @@ .ideditor .issue-label .issue-text { width: 100%; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; cursor: pointer; @@ -6978,21 +7026,18 @@ .ideditor .issue-text .issue-icon { -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; padding: 2px 3px; } .ideditor .issue-text .issue-message { -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 4px 5px; } .ideditor .issue-label .issue-autofix { -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; padding: 5px 8px; @@ -7001,7 +7046,6 @@ height: unset; width: 32px; -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; border-left: 1px solid #ccc; @@ -7026,7 +7070,6 @@ .ideditor button.autofix.action { -webkit-box-flex: 0; - -webkit-flex: 0 0 20px; -ms-flex: 0 0 20px; flex: 0 0 20px; height: 20px; @@ -7048,16 +7091,13 @@ /* fix all */ .ideditor .autofix-all { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: end; - -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; margin-top: -25px; @@ -7215,16 +7255,13 @@ } .ideditor .section-footer { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: end; - -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; height: 30px; @@ -7239,7 +7276,6 @@ background: #c6ffca; padding: 5px !important; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; } @@ -7343,7 +7379,6 @@ .ideditor .issue-info { -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; width: 100%; @@ -7386,22 +7421,21 @@ padding: 10px; } -.ideditor .display-control h5 { +.ideditor .display-options-container label { padding-bottom: 0; padding-top: 10px; } -.ideditor .display-control h5 span { +.ideditor .display-options-container label span { + font-weight: bold; margin: 5px; } .ideditor .display-control .control-wrap { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; - -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 100%; @@ -7409,7 +7443,6 @@ .ideditor .display-control .display-option-input { height: 20px; -webkit-box-flex: 1; - -webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; } @@ -7422,7 +7455,6 @@ vertical-align: text-bottom; border-radius: 4px; -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } @@ -7453,15 +7485,12 @@ border-radius: 2px; padding: 20px 0; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; - -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; - -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin: 45px; @@ -7586,7 +7615,6 @@ ------------------------------------------------------- */ .ideditor .map-panes { -webkit-box-flex: 0; - -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; position: relative; @@ -7601,12 +7629,10 @@ height: 100%; z-index: 10; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; - -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } @@ -7617,21 +7643,17 @@ .ideditor .pane-heading { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: justify; - -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; border-bottom: 1px solid #ccc; -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } @@ -7790,10 +7812,10 @@ border: 1px solid #ccc; } -/* no scrollbars */ +/* scrollbars only when necessary*/ .ideditor .inspector-hover div { overflow-x: visible; - overflow-y: visible; + overflow-y: auto; } /* hide and remove from layout */ @@ -8121,16 +8143,13 @@ ------------------------------------------------------- */ .ideditor .info-panels { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row wrap-reverse; -ms-flex-flow: row wrap-reverse; flex-flow: row wrap-reverse; -webkit-box-pack: end; - -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; width: 100%; @@ -8157,7 +8176,6 @@ .ideditor .panel-container { -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; margin: 0 2px 2px 0; @@ -8176,11 +8194,9 @@ .ideditor .panel-title { padding: 5px 10px; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; - -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } @@ -8259,17 +8275,14 @@ border-radius: 0; pointer-events: none; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; - -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -ms-user-select: element; -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } @@ -8284,20 +8297,16 @@ .ideditor .main-footer-wrap, .ideditor .flash-wrap { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; - -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: justify; - -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; height: 100%; @@ -8329,15 +8338,12 @@ left: 5px; right: 5px; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; - -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; - -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; z-index: 0; @@ -8390,20 +8396,16 @@ ------------------------------------------------------- */ .ideditor .flash-content { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; - -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; - -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 2px; @@ -8411,7 +8413,6 @@ .ideditor .flash-icon { -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 20px; @@ -8438,7 +8439,6 @@ .ideditor .flash-text { -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; } @@ -8449,7 +8449,6 @@ vertical-align: bottom; width: 250px; -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; -webkit-user-select: none; @@ -8457,9 +8456,8 @@ -ms-user-select: none; user-select: none; height: 30px; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; + -ms-flex-item-align: center; + align-self: center; } .ideditor .scale-block .scale { @@ -8492,7 +8490,6 @@ ------------------------------------------------------- */ .ideditor .map-footer-bar .info-block { -webkit-box-flex: 1; - -webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; overflow: hidden; @@ -8500,17 +8497,14 @@ .ideditor .map-footer-list { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; height: 100%; -webkit-box-pack: end; - -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; } @@ -8518,11 +8512,9 @@ .ideditor .map-footer-list li { height: 100%; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; - -webkit-align-items: center; -ms-flex-align: center; align-items: center; white-space: nowrap; @@ -8583,7 +8575,6 @@ padding: 1px 10px; color: #eee; -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; } @@ -8615,12 +8606,16 @@ } } +.ideditor .local-storage-full { + display: block; + width: 100%; +} + /* Notification Badges ------------------------------------------------------- */ /* For an icon (e.g. new version) */ .ideditor .badge { display: -webkit-inline-box; - display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; background: #d32232; @@ -8628,11 +8623,9 @@ height: 21px; border-radius: 50%; -webkit-box-align: center; - -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; - -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } @@ -8648,7 +8641,6 @@ height: 11px; color: #fff; -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } @@ -8686,12 +8678,10 @@ min-width: 200px; max-width: 550px; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; - -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } @@ -8749,15 +8739,12 @@ .ideditor .save-section .buttons { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -webkit-justify-content: space-around; - -ms-flex-pack: distribute; - justify-content: space-around; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -ms-flex-pack: distribute; + justify-content: space-around; } .ideditor .save-section .buttons .action, @@ -8773,7 +8760,6 @@ } .ideditor .modal-actions { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; } @@ -8859,6 +8845,9 @@ .ideditor .save-success td.community-detail { padding-bottom: 15px; } +.ideditor .save-success .community-table h3 { + margin: 0; +} .ideditor .summary-view-on-osm, .ideditor .community-name { @@ -8917,6 +8906,14 @@ color: #7092ff; } +.ideditor .modal-splash .section-preferences-third-party { + margin-top: 20px; +} + +.ideditor .modal-splash .section-preferences-third-party .privacy-link { + display: none; +} + /* Shortcuts Modal ------------------------------------------------------- */ @@ -8962,17 +8959,14 @@ .ideditor .modal-shortcuts .shortcut-tab { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; - -webkit-justify-content: space-around; - -ms-flex-pack: distribute; - justify-content: space-around; + -ms-flex-pack: distribute; + justify-content: space-around; } .ideditor .modal-shortcuts .shortcut-column { @@ -8981,7 +8975,6 @@ .ideditor .modal-shortcuts .shortcut-tab-tools .shortcut-column { -webkit-box-flex: 1; - -webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; width: 100%; @@ -9072,13 +9065,16 @@ display: none; } -.ideditor .field-warning, .ideditor .changeset-info, .ideditor .request-review, .ideditor .commit-info { margin-bottom: 10px; } +.ideditor .field-warning { + margin-top: 10px; +} + .ideditor .request-review label { cursor: pointer; } @@ -9341,22 +9337,26 @@ /* dark tooltips for sidebar / panels */ .ideditor .tooltip.dark.top .popover-arrow, .ideditor .map-pane .tooltip.top .popover-arrow, -.ideditor .sidebar .tooltip.top .popover-arrow { +.ideditor .sidebar .tooltip.top .popover-arrow, +.ideditor .modal .tooltip.top .popover-arrow { border-top-color: #000; } .ideditor .tooltip.dark.bottom .popover-arrow, .ideditor .map-pane .tooltip.bottom .popover-arrow, -.ideditor .sidebar .tooltip.bottom .popover-arrow { +.ideditor .sidebar .tooltip.bottom .popover-arrow, +.ideditor .modal .tooltip.bottom .popover-arrow { border-bottom-color: #000; } .ideditor .tooltip.dark.left .popover-arrow, .ideditor .map-pane .tooltip.left .popover-arrow, -.ideditor .sidebar .tooltip.left .popover-arrow { +.ideditor .sidebar .tooltip.left .popover-arrow, +.ideditor .modal .tooltip.left .popover-arrow { border-left-color: #000; } .ideditor .tooltip.dark.right .popover-arrow, .ideditor .map-pane .tooltip.right .popover-arrow, -.ideditor .sidebar .tooltip.right .popover-arrow { +.ideditor .sidebar .tooltip.right .popover-arrow, +.ideditor .modal .tooltip.right .popover-arrow { border-right-color: #000; } .ideditor .tooltip.dark .popover-inner, @@ -9367,7 +9367,8 @@ .ideditor .map-pane .keyhint-wrap, .ideditor .sidebar .popover-inner, .ideditor .sidebar .tooltip-heading, -.ideditor .sidebar .keyhint-wrap { +.ideditor .sidebar .keyhint-wrap, +.ideditor .modal .popover-inner { background: #000; color: #ccc; } @@ -9416,12 +9417,10 @@ .ideditor .edit-menu { position: absolute; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; - -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; background: #fff; @@ -9435,11 +9434,9 @@ .ideditor .edit-menu-item { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; - -webkit-align-items: center; -ms-flex-align: center; align-items: center; border-radius: 0; @@ -9480,7 +9477,6 @@ height: 20px; overflow: visible; width: 10px; - background: #fff; border-left: 1px solid #DDD; } @@ -9524,12 +9520,10 @@ .ideditor .intro-nav-wrap { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; position: absolute; @@ -9542,7 +9536,6 @@ .ideditor .intro-nav-wrap .intro-nav-wrap-logo { -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; height: 40px; @@ -9554,23 +9547,19 @@ .ideditor .intro-nav-wrap .joined { -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .ideditor .intro-nav-wrap button.chapter { -webkit-box-flex: 1; - -webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; padding: 0px 5px;