X-Git-Url: https://git.openstreetmap.org/rails.git/blobdiff_plain/366a9e9097e6b8ca19cd3ecb2b08db1fbc0e2274..ec45114f597ddf7bf7f14baae471434f93a0299f:/vendor/assets/iD/iD.css.erb diff --git a/vendor/assets/iD/iD.css.erb b/vendor/assets/iD/iD.css.erb index 4c0c6d97b..7473e0eb7 100644 --- a/vendor/assets/iD/iD.css.erb +++ b/vendor/assets/iD/iD.css.erb @@ -1539,6 +1539,7 @@ g.midpoint.tag-railway-platform .fill { } .preset-icon .icon.category-water, .preset-icon .icon.tag-route-ferry, +.preset-icon .icon.tag-type-waterway, .preset-icon .icon.tag-waterway { color: #77d3de; fill: #fff; @@ -1940,123 +1941,240 @@ path.fill.tag-amenity-shelter { .turn rect, .turn circle { - cursor: pointer; /* Opera */ - cursor: url(<%= asset_path("iD/img/cursor-pointer.png") %>) 6 1, pointer; /* FF */ + cursor: pointer; +} +/* photo viewer div */ +#photoviewer { + position: absolute; + bottom: 30px; + width: 330px; + height: 250px; + padding: 5px; + background-color: #fff; } -/* Mapillary Image Layer */ -.layer-mapillary-images { - pointer-events: none; +#photoviewer button.thumb-hide { + border-radius: 0; + padding: 5px; + position: absolute; + right: 0; + top: 0; + z-index: 500; } -.layer-mapillary-images .viewfield-group { +.photo-wrapper, +.photo-wrapper img { + width: 100%; + height: 100%; + overflow: hidden; +} + +.photo-wrapper .photo-attribution { + width: 100%; + font-size: 10px; + text-align: right; + position: absolute; + bottom: 0; + right: 0; + padding: 4px 2px; + z-index: 10; +} + +.photo-attribution a, +.photo-attribution a:visited, +.photo-attribution span { + padding: 4px 2px; + color: #fff; +} + +/* markers and sequences */ +.viewfield-group { pointer-events: visible; - cursor: pointer; /* Opera */ - cursor: url(<%= asset_path("iD/img/cursor-select-mapillary.png") %>) 6 1, pointer; /* FF */ + cursor: pointer; } -.layer-mapillary-images .viewfield-group * { - stroke-width: 1; - stroke: #444; - fill: #ffc600; - z-index: 50; +.viewfield-group.selected * { + fill: #ffee00 !important; +} +.viewfield-group.hovered * { + fill: #eebb00 !important; } -.layer-mapillary-images .viewfield-group:hover * { +.viewfield-group circle { + stroke: #555; stroke-width: 1; - stroke: #333; - fill: #ff9900; - z-index: 60; + stroke-opacity: 0.4; + fill-opacity: 0.4; } - -.layer-mapillary-images .viewfield-group.selected * { +.viewfield-group.highlighted circle { + stroke: #222; + stroke-opacity: 0.9; + fill-opacity: 0.9; +} +.viewfield-group.highlighted.hovered circle { + stroke: #222; stroke-width: 2; + stroke-opacity: 0.9; + fill-opacity: 0.9; +} +.viewfield-group.highlighted.selected circle { stroke: #222; - fill: #ff5800; - z-index: 60; + stroke-width: 2; + stroke-opacity: 1; + fill-opacity: 1; } -.layer-mapillary-images .viewfield-group:hover path.viewfield, -.layer-mapillary-images .viewfield-group.selected path.viewfield, -.layer-mapillary-images .viewfield-group path.viewfield { +.viewfield-group .viewfield { stroke-width: 0; - fill-opacity: 0.6; + stroke: #222; + fill-opacity: 0.4; +} +.viewfield-group.highlighted .viewfield { + stroke-width: 1; + fill-opacity: 0.8; +} +.viewfield-group.highlighted.hovered .viewfield { + stroke-width: 1; + fill-opacity: 0.8; +} +.viewfield-group.highlighted.selected .viewfield { + stroke-width: 1; + fill-opacity: 0.9; } -/* Mapillary Sign Layer */ +.viewfield-group.selected .viewfield-scale { + transform: scale(2,2); +} -.layer-mapillary-signs { +.sequence { + fill: none; + stroke-width: 2; + stroke-opacity: 0.4; +} +.sequence.highlighted, +.sequence.selected { + stroke-width: 4; + stroke-opacity: 1; +} + + +/* Mapillary Image Layer */ +.layer-mapillary-images { pointer-events: none; } +.layer-mapillary-images .viewfield-group * { + fill: #55ff22; +} +.layer-mapillary-images .sequence { + stroke: #55ff22; +} + +/* Mapillary Sign Layer */ +.layer-mapillary-signs { + pointer-events: none; +} .layer-mapillary-signs .icon-sign .icon-sign-body { min-width: 20px; height: 24px; width: 24px; outline: 2px solid transparent; pointer-events: visible; - cursor: pointer; /* Opera */ - cursor: url(<%= asset_path("iD/img/cursor-select-mapillary.png") %>) 6 1, pointer; /* FF */ - z-index: 70; + cursor: pointer; + z-index: 30; overflow: visible; } - .layer-mapillary-signs .icon-sign:hover .icon-sign-body { - outline: 2px solid rgba(255,198,0,0.8); - z-index: 80; + outline: 5px solid #eebb00; + background-color: #eebb00; + z-index: 70; } - .layer-mapillary-signs .icon-sign.selected .icon-sign-body { - outline: 2px solid rgba(255,0,0,0.8); - z-index: 80; + outline: 5px solid #ffee00; + background-color: #ffee00; + z-index: 40; +} + + +/* OpenStreetCam Image Layer */ +.layer-openstreetcam-images { + pointer-events: none; +} +.layer-openstreetcam-images .viewfield-group * { + fill: #77ddff; +} +.layer-openstreetcam-images .sequence { + stroke: #77ddff; } /* Mapillary viewer */ #mly .domRenderer .TagSymbol { font-size: 10px; - background-color: rgba(0, 0, 0, 0.4); + background-color: rgba(0,0,0,0.4); padding: 0 4px; border-radius: 4px; - transform: translate(-50%, -120%) !important; + top: -25px; } - #mly .domRenderer .Attribution { - width: 100%; - font-size: 10px; - text-align: right; + /* we will roll our own to avoid async update issues like #4526 */ + display: none; } -.mapillary-wrap { - position: absolute; - bottom: 30px; - width: 330px; - height: 250px; - padding: 5px; - background-color: #fff; +.mly-wrapper .photo-attribution a:active, +.mly-wrapper .photo-attribution a:hover { + color: #35af6d; } -.mapillary-wrap.hidden { - visibility: hidden; +.mly-wrapper .mapillary-js-dom { + z-index: 9; } -.mapillary-wrap button.thumb-hide { - border-radius: 0; - padding: 5px; - position: absolute; - right: 0; - top: 0; - z-index: 500; +/* OpenStreetCam viewer */ +.osc-wrapper { + position: relative; + background-color: #000; + background-image: url(<%= asset_path("iD/img/loader-black.gif") %>); + background-position: center; + background-repeat: no-repeat; +} + +.osc-wrapper .photo-attribution a:active, +.osc-wrapper .photo-attribution a:hover { + color: #77ddff; } -.mly-wrapper { - visibility: hidden; +.osc-controls-wrap { + text-align: center; + position: absolute; + top: 10px; width: 100%; - height: 100%; + z-index: 10; +} + +.osc-controls { + display: inline-block; + z-index: 10; } -.mly-wrapper.active { - visibility: visible; +.osc-controls button { + height: 18px; + width: 18px; + background: rgba(0,0,0,0.65); + color: #eee; + border-radius: 0; +} +.osc-controls button:first-of-type { + border-radius: 3px 0 0 3px; +} +.osc-controls button:last-of-type { + border-radius: 0 3px 3px 0; +} +.osc-controls button:hover, +.osc-controls button:active, +.osc-controls button:focus { + background: rgba(0,0,0,0.85); + color: #fff; } /* Fill Styles */ @@ -2177,6 +2295,22 @@ body { transition-duration: 200ms; } +/* Firefox has its own ideas about fixed positioning when a css filter is active - #4348 */ +/* https://stackoverflow.com/questions/37949942/firefox-position-bug-by-parent-with-filter */ +@-moz-document url-prefix() { + #content > #bar { + width: 100vw; + } + #content.inactive > #bar > .spacer.col4 { + width: 0px; + } + #content.active > #bar > .spacer.col4 { + width: 33.3333%; + transition-duration: 200ms; + transition-timing-function: step-end; + } +} + #defs { /* Can't be display: none or the clippaths are ignored. */ position: absolute; @@ -2237,8 +2371,7 @@ button, .checkselect label:hover, .opacity-options li, .radial-menu-item { - cursor: pointer; /* Opera */ - cursor: url(<%= asset_path("iD/img/cursor-pointer.png") %>) 6 1, pointer; /* FF */ + cursor: pointer; } h2 { @@ -3526,12 +3659,12 @@ button.save.has-count .count::before { /* preset form cycleway */ /* preset form structure extras */ -.form-field-structure .structure-extras-wrap li, +.structure-extras-wrap li, .form-field-cycleway .preset-input-wrap li, .form-field-access .preset-input-wrap li { border-bottom: 1px solid #ccc; } -.form-field-structure .structure-extras-wrap li:last-child, +.structure-extras-wrap li:last-child, .form-field-cycleway .preset-input-wrap li:last-child, .form-field-access .preset-input-wrap li:last-child { border-bottom: 0; @@ -3616,14 +3749,15 @@ button.save.has-count .count::before { } .form-field-multicombo li { + display: inline-flex; + flex-flow: row nowrap; + align-items: center; 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 { @@ -3641,6 +3775,7 @@ button.save.has-count .count::before { border: 1px solid #ddd; width: 100px; margin: 3px; + height: 31px; } .form-field-multicombo .combobox-caret { @@ -5055,8 +5190,13 @@ img.tile-removing { border-radius: 2px; padding: 0 4px; margin-top: 10px; + margin-right: 10px; color: white; } +[dir='rtl'] .panel-content .button { + margin-right: auto; + margin-left: 10px; +} .panel-content-history .links a { margin-left: 10px; @@ -5649,10 +5789,15 @@ img.tile-removing { margin-bottom: 10px; } +.mode-save .request-review label { + cursor: pointer; +} + .mode-save .changeset-list { border: 1px solid #ccc; border-radius: 4px; background: #fff; + margin-bottom: 10px; } .mode-save .warning-section { @@ -5748,30 +5893,28 @@ img.tile-removing { .notice { position: absolute; - top: 0; - bottom: 0; + top: 45px; left: 0; right: 0; text-align: center; - background: #fff; } .notice .zoom-to { margin: auto; - width: 80%; - height: 100px; - border-radius: 5px; - line-height: 40px; - color: #000; - opacity: 0.9; + width: 300px; + height: 70px; + font-size: 150%; + border-radius: 8px; } .notice .zoom-to:hover { - background: #d8e1ff; + background: rgba(0,0,0,0.6); } .notice .zoom-to .icon { - margin-top: 10px; + width: 30px; + height: 30px; + vertical-align: middle; margin-right: 10px; } [dir='rtl'] .notice .zoom-to .icon { @@ -6323,4 +6466,3 @@ li.hide + li.version .badge .tooltip .tooltip-arrow { width: 100px; color: #7092FF; } -