X-Git-Url: https://git.openstreetmap.org/rails.git/blobdiff_plain/0cf41126ffb7662ec60ae10793be4890454d4fe9..c3df2a5180fe3821d3e45a11932068ef064a8eb0:/vendor/assets/iD/iD.css.erb diff --git a/vendor/assets/iD/iD.css.erb b/vendor/assets/iD/iD.css.erb index fbc19869e..9ce30a05b 100644 --- a/vendor/assets/iD/iD.css.erb +++ b/vendor/assets/iD/iD.css.erb @@ -1943,120 +1943,238 @@ path.fill.tag-amenity-shelter { .turn circle { cursor: pointer; } -/* Mapillary Image Layer */ +/* photo viewer div */ +#photoviewer { + position: absolute; + bottom: 30px; + width: 330px; + height: 250px; + padding: 5px; + background-color: #fff; +} -.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; +} + +/* 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; +.viewfield-group * { z-index: 50; } - -.layer-mapillary-images .viewfield-group:hover * { - stroke-width: 1; - stroke: #333; - fill: #ff9900; +.viewfield-group.selected * { + fill: #ffee00 !important; + z-index: 60; +} +.viewfield-group.hovered * { + fill: #eebb00 !important; + z-index: 70; +} +.viewfield-group.highlighted * { z-index: 60; } -.layer-mapillary-images .viewfield-group.selected * { +.viewfield-group circle { + stroke: #555; + stroke-width: 1; + stroke-opacity: 0.4; + fill-opacity: 0.4; +} +.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; top: -25px; } - #mly .domRenderer .Attribution { width: 100%; font-size: 10px; text-align: right; } -.mapillary-wrap { - position: absolute; - bottom: 30px; - width: 330px; - height: 250px; - padding: 5px; - background-color: #fff; -} -.mapillary-wrap.hidden { - visibility: hidden; +/* 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; } -.mapillary-wrap button.thumb-hide { - border-radius: 0; - padding: 5px; +.osc-wrapper .osc-attribution { + width: 100%; + font-size: 10px; + text-align: right; position: absolute; + bottom: 0; right: 0; - top: 0; - z-index: 500; + padding: 4px 2px; + z-index: 10; +} + +.osc-attribution a, +.osc-attribution a:visited, +.osc-attribution span { + padding: 4px 2px; + color: #fff; +} +.osc-attribution a:active, +.osc-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 */ @@ -5072,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; @@ -5770,8 +5893,7 @@ img.tile-removing { .notice { position: absolute; - top: 50%; - bottom: 50%; + top: 45px; left: 0; right: 0; text-align: center; @@ -5780,7 +5902,7 @@ img.tile-removing { .notice .zoom-to { margin: auto; width: 300px; - height: 80px; + height: 70px; font-size: 150%; border-radius: 8px; }