X-Git-Url: https://git.openstreetmap.org/rails.git/blobdiff_plain/d83954a8d10cbfc50a2d4f47e8ceb8f33801feb8..90175c3bdbc1b25eab177dc2d019b86d2854f9a7:/vendor/assets/iD/iD.css.erb diff --git a/vendor/assets/iD/iD.css.erb b/vendor/assets/iD/iD.css.erb index 0a926963e..f0a144132 100644 --- a/vendor/assets/iD/iD.css.erb +++ b/vendor/assets/iD/iD.css.erb @@ -161,28 +161,6 @@ input::-moz-focus-inner { .cf:after { clear: both; } -/* tiles */ -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; - - opacity: 0; - - -webkit-transition: opacity 200ms linear; - transition: opacity 200ms linear; - -moz-transition: opacity 200ms linear; -} - -img.tile-loaded { - opacity: 1; -} -img.tile-removing { - opacity: 0; -} use { pointer-events: none; } @@ -1080,6 +1058,7 @@ path.stroke.tag-highway-cycleway { stroke: #58a9ed; } +.preset-icon .icon.tag-route-horse, .preset-icon .icon.highway-bridleway { color: #e06d5f; fill: #fff; @@ -1968,6 +1947,7 @@ input[type=url], input[type=tel], input[type=email] { background-color: white; + color: #333; border:1px solid #ccc; padding:5px 10px; height:30px; @@ -2107,6 +2087,7 @@ ul li { list-style: none;} .al { left: 0; } .ar { right: 0; } +input.hide, div.hide, form.hide, button.hide, @@ -2269,7 +2250,9 @@ button.save.has-count .count { display: block; position: absolute; top: 5px; - background: rgba(255, 255, 255, .5); + background: #fff; + border-color: #fff; + opacity: 0.5; color: #333; padding: 10px; height: 30px; @@ -2290,7 +2273,9 @@ button.save.has-count .count::before { bottom: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; - border-right: 6px solid rgba(255,255,255,.5); + border-right-width: 6px; + border-right-style: solid; + border-right-color: inherit; } /* Icons */ @@ -2464,45 +2449,8 @@ button.save.has-count .count::before { bottom: 0; } -.mapillary-image { - position: absolute; - bottom: 30px; - width: 330px; - height: 250px; - padding: 5px; - background-color: #fff; -} - -.mapillary-image a { - display: block; - position: absolute; - height: auto; - background-color: rgba(0,0,0,.5); - bottom: 0; - padding: 5px 10px; -} - -.mapillary-image img { - width: 100%; - height: auto; - display: block; -} - -.mapillary-image.hidden { - visibility: hidden; -} -.mapillary-image.temp button { - display: none; -} -.mapillary-image button { - border-radius: 0; - padding: 5px; - position: absolute; - right: 0; - top: 0; -} .feature-list-pane .inspector-body { top: 120px; @@ -2827,7 +2775,7 @@ button.save.has-count .count::before { } .form-label button { - border-left: 1px solid #CCC; + border-left: 1px solid #ccc; width: 10%; height: 100%; border-radius: 0; @@ -2850,7 +2798,7 @@ button.save.has-count .count::before { .form-field > input, .form-field > textarea, .form-field .preset-input-wrap { - border: 1px solid #CCC; + border: 1px solid #ccc; min-height: 30px; border-top: 0; border-radius: 0 0 4px 4px; @@ -2862,23 +2810,30 @@ button.save.has-count .count::before { } .inspector-border { - border-bottom: 1px solid #CCC + border-bottom: 1px solid #ccc } /* Preset form (hover mode) */ .inspector-hover .checkselect label:last-of-type, .inspector-hover .preset-input-wrap .label, +.inspector-hover .form-field-multicombo, .inspector-hover input, .inspector-hover label { background: #ececec; } .inspector-hover a, +.inspector-hover .form-field-multicombo .chips, .inspector-hover .checkselect label:last-of-type { color: #666; } +.inspector-hover .form-field-multicombo .chips { + background: #eee; + border: 1px solid #ccc; +} + /* hide and remove from layout */ .inspector-hidden, .inspector-hover label input[type="checkbox"], @@ -2887,6 +2842,7 @@ button.save.has-count .count::before { .inspector-hover .toggle-list label span, .inspector-hover .inspector-inner .add-tag, .inspector-hover .inspector-inner .add-relation, +.inspector-hover .form-field-multicombo .combobox-input, .inspector-hover .toggle-list label.remove .icon { height: 0; width: 0; @@ -2902,6 +2858,7 @@ button.save.has-count .count::before { .inspector-hover .combobox-caret, .inspector-hover .entity-editor-pane .header button, .inspector-hover .spin-control, +.inspector-hover .form-field-multicombo .chips .remove, .inspector-hover .hide-toggle:before, .inspector-hover .more-fields, .inspector-hover .form-label-button-wrap, @@ -3002,6 +2959,63 @@ button.save.has-count .count::before { border-bottom-right-radius: 4px; } +/* preset form multicombo */ + +.form-field-multicombo { + border: 1px solid #cfcfcf; + border-top: 0px; + padding: 5px 0 5px 10px; + background: #fff; + display: block; + border-radius: 0 0 4px 4px; + overflow: hidden; +} + +.form-field-multicombo:focus { + border-bottom: 0px; +} + +.form-field-multicombo.active { + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; +} + +.form-field-multicombo li { + background-color: #eff2f7; + border: 1px solid #ccd5e3; + border-radius: 4px; + line-height: 25px; + display: inline-block; + padding: 2px 5px; + margin: 3px; + height: 30px; +} + +.form-field-multicombo a { + font-family: Arial, Helvetica, sans-serif !important; + font-size: 16px !important; + line-height: 24px; + float: right; + margin: 1px 0 0 5px; + padding: 0; + cursor: pointer; + color: #a6b4ce; +} + +.form-field-multicombo input { + border: 1px solid #ddd; + width: 100px; + margin: 3px; +} + +.form-field-multicombo .combobox-caret { + margin: 3px 3px 3px -30px; +} + +.form-field-multicombo input:focus { + border-radius: 4px !important; +} + /* preset form cycleway */ .form-field-cycleway .preset-input-wrap li { @@ -3621,7 +3635,8 @@ div.full-screen > button:hover { background-color: #ececec; } -.layer-list li.active { +.layer-list li.active, +.layer-list li.switch { background: #E8EBFF; } @@ -3784,6 +3799,17 @@ div.full-screen > button:hover { right: -10px; } +.nudge-surface { + position: absolute; + z-index: 5000; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: transparent; + cursor: move; +} + .background-control .nudge.right::after { border-top: 5px solid transparent; border-bottom: 5px solid transparent; @@ -3921,7 +3947,7 @@ div.full-screen > button:hover { float:right; margin-left: 20px; margin-bottom: 20px; - padding-left: 5px + padding-left: 5px; } .help-wrap .toc li a, @@ -3984,6 +4010,64 @@ div.full-screen > button:hover { border-radius: 4px; } + +/* Tiles +------------------------------------------------------- */ + +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; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + + opacity: 0; + + -webkit-transition: opacity 200ms linear; + transition: opacity 200ms linear; + -moz-transition: opacity 200ms linear; +} + +.tile-label-debug { + background: rgba(0, 0, 0, 0.7); + color: #fff; + position: absolute; + text-align: center; + width: 128px; + border-radius: 3px; + z-index: 2; + + 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; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +img.tile-debug { + border: 1px solid red; +} + +img.tile-loaded { + opacity: 1; +} + +img.tile-removing { + opacity: 0; +} + + /* Map ------------------------------------------------------- */ @@ -4000,6 +4084,7 @@ div.full-screen > button:hover { -webkit-transform-origin:0 0; -moz-transform-origin:0 0; -o-transform-origin:0 0; + -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; @@ -4016,7 +4101,6 @@ div.full-screen > button:hover { /* Map-In-Map ------------------------------------------------------- */ - .map-in-map { position: absolute; overflow: hidden; @@ -4035,14 +4119,15 @@ div.full-screen > button:hover { -webkit-transform-origin:0 0; -moz-transform-origin:0 0; -o-transform-origin:0 0; + -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } -.map-in-map-svg, -.map-in-map-gpx { +.map-in-map-viewport, +.map-in-map-data { top: 0; left: 0; overflow: hidden; @@ -4050,16 +4135,15 @@ div.full-screen > button:hover { width: 100%; } -.map-in-map-svg { +.map-in-map-viewport { position: absolute; } -.map-in-map-gpx { +.map-in-map-data { position: relative; z-index: 10; } -.bbox, .map-in-map-bbox { fill: none; stroke: rgba(255, 255, 0, 0.75); @@ -4071,6 +4155,45 @@ div.full-screen > button:hover { stroke-width: 5; } + +/* Debug +------------------------------------------------------- */ +.debug { + stroke: currentColor; + fill: none; + stroke-width: 2; +} +.map-in-map-data .debug { + stroke-width: 1; +} + +.red { color: rgba(255, 0, 0, 0.75); } +.green { color: rgba(0, 255, 0, 0.75); } +.blue { color: rgba(0, 0, 255, 0.75); } +.yellow { color: rgba(255, 255, 0, 0.75); } +.cyan { color: rgba(0, 255, 255, 0.75); } +.magenta { color: rgba(255, 0, 255, 0.75); } +.orange { color: rgba(255, 153, 0, 0.75); } +.pink { color: rgba(255, 0, 153, 0.75); } +.purple { color: rgba(153, 0, 255, 0.75); } + +.debug-legend { + position: absolute; + top: 70px; + right: 80px; + padding: 5px; + border-radius: 4px; + pointer-events: none; +} + +.debug-legend-item { + padding-right: 5px; +} +.debug-legend-item:before { + content: "\25A0"; + padding: 0 5px; +} + /* Info Box ------------------------------------------------------- */ .infobox { @@ -4164,6 +4287,10 @@ div.full-screen > button:hover { max-height: 30px; float: left; clear: left; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; } #info-block { @@ -4176,6 +4303,10 @@ div.full-screen > button:hover { width: 100%; } +#scale:hover { + cursor: pointer; +} + #scale text { font: 12px sans-serif; stroke: none; @@ -4951,3 +5082,44 @@ div.full-screen > button:hover { background: rgba(0, 0, 0, 0) url(<%= asset_path("iD/img/iD-sprite.svg") %>) no-repeat -300px -460px; margin: auto; } + +/* Mapillary +------------------------------------------------------- */ +.mapillary-wrap { + position: absolute; + bottom: 30px; + width: 330px; + height: 250px; + padding: 5px; + background-color: #fff; +} + +.mapillary-wrap.hidden { + visibility: hidden; +} + +.mapillary-wrap .uil-ripple-css { + top: -9px; + left: -15px; +} + +.mapillary-wrap .uil-ripple-css div { + top: 38px; +} + +.mapillary-wrap button.thumb-hide { + border-radius: 0; + padding: 5px; + position: absolute; + right: 0; + top: 0; + z-index: 500; +} + +.mly-wrapper { + visibility: hidden; +} + +.mly-wrapper.active { + visibility: visible; +}