X-Git-Url: https://git.openstreetmap.org/rails.git/blobdiff_plain/59a5b6d1c6ebdd82e3b9b73ca0eed89961e8093a..037585db3933a2954b43bd4b30ea5e30ade00be2:/vendor/assets/iD/iD.css.erb diff --git a/vendor/assets/iD/iD.css.erb b/vendor/assets/iD/iD.css.erb index 9e35dc634..3f733c3b4 100644 --- a/vendor/assets/iD/iD.css.erb +++ b/vendor/assets/iD/iD.css.erb @@ -966,6 +966,19 @@ path.casing.tag-boundary-national_park { stroke: #b0e298; } +/* barriers */ + +path.stroke.tag-barrier { + stroke: #ddd; + stroke-width: 3px; + stroke-linecap: round; + stroke-dasharray: 15, 5, 1, 5; +} +.low-zoom path.stroke.tag-barrier { + stroke-width: 2px; + stroke-linecap: butt; + stroke-dasharray: 8, 2, 2, 2; +} /* bridges */ @@ -1195,6 +1208,7 @@ g.turn circle { /* Cursors */ +.map-in-map, #map { cursor: auto; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-grab.png") %>) 9 9, auto; /* FF */ @@ -1281,9 +1295,14 @@ g.turn circle { } .mode-add-point #map, -.lasso #map, -.lasso .way, -.lasso .vertex { +.mode-browse.lasso #map, +.mode-browse.lasso .way, +.mode-browse.lasso .vertex, +.mode-browse.lasso .midpoint, +.mode-select.lasso #map, +.mode-select.lasso .way, +.mode-select.lasso .vertex, +.mode-select.lasso .midpoint { cursor: crosshair; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */ } @@ -1544,10 +1563,6 @@ strong { a:visited, a { color: #7092ff; - -webkit-transition: all 100ms; - -moz-transition: all 100ms; - -o-transition: all 100ms; - transition: all 100ms; } a:hover { @@ -1576,10 +1591,6 @@ input[type=email] { width: 100%; border-radius:4px; text-overflow: ellipsis; - -webkit-transition: all 200ms; - -moz-transition: all 200ms; - -o-transition: all 200ms; - transition: all 200ms; } textarea:focus, @@ -1651,9 +1662,6 @@ ul li { list-style: none;} background-color: white; color: #7092FF; cursor: pointer; - -moz-transition: all 100ms; - -o-transition: all 100ms; - transition: all 100ms; } .toggle-list > label:hover { @@ -1702,6 +1710,11 @@ ul li { list-style: none;} color: white; } +.fillD2 { + background:rgba(0,0,0,.75); + color: white; +} + .fl { float: left;} .fr { float: right;} @@ -1762,11 +1775,6 @@ button { display: inline-block; height:40px; border-radius:4px; - /* Crashes Safari: https://github.com/openstreetmap/iD/issues/1188 */ - /*-webkit-transition: all 100ms;*/ - -moz-transition: all 100ms; - -o-transition: all 100ms; - transition: all 100ms; } button:focus, @@ -1822,6 +1830,10 @@ button.minor:hover { border-right: 1px solid rgba(0,0,0,.5); } +.fillL .joined button { + border-right: 1px solid white; +} + .joined button:first-child { border-radius:4px 0 0 4px; } @@ -1833,6 +1845,13 @@ button.minor:hover { button.action { background: #7092ff; + color: white; +} + +button[disabled].action, +button[disabled].action:hover { + background: #cccccc; + color: #888; } button.action:focus, @@ -1840,6 +1859,15 @@ button.action:hover { background: #597BE7; } +button.secondary-action { + background: #ececec; +} + +button.secondary-action:focus, +button.secondary-action:hover { + background: #cccccc; +} + button.save.has-count { padding: 9px; } @@ -1969,13 +1997,13 @@ button[disabled] .icon.avatar { background-position: -320px -40px;} button[disabled] .icon.nearby { background-position: -340px -40px;} button[disabled] .icon.data { background-position: -600px -40px;} -.icon.point.deleted { background-position: -302px -80px;} -.icon.line.deleted { background-position: -320px -80px;} -.icon.area.deleted { background-position: -340px -80px;} +.icon.point.deleted { background-position: -480px -80px;} +.icon.line.deleted { background-position: -500px -80px;} +.icon.area.deleted { background-position: -520px -80px;} -.icon.point.created { background-position: -302px -100px;} -.icon.line.created { background-position: -320px -100px;} -.icon.area.created { background-position: -340px -100px;} +.icon.point.created { background-position: -480px -100px;} +.icon.line.created { background-position: -500px -100px;} +.icon.area.created { background-position: -520px -100px;} .icon.point.modified { background-position: -22px 0; } @@ -2009,7 +2037,7 @@ a:hover .icon.out-link { background-position: -500px -14px;} top:0; right:0; height:60px; - z-index: 1; + z-index: 9; min-width: 768px; } @@ -2023,7 +2051,7 @@ a:hover .icon.out-link { background-position: -500px -14px;} } .header h3 { - text-align: center; + text-align: left; margin-bottom: 0; white-space: nowrap; text-overflow: ellipsis; @@ -2055,13 +2083,13 @@ a:hover .icon.out-link { background-position: -500px -14px;} right: 0; top: 0; height: 59px; - z-index: 3; + z-index: 50; } .footer { position: absolute; bottom: 0; - padding: 5px 30px 5px 30px; + padding: 5px 20px 5px 20px; border-top: 1px solid #ccc; background-color: #fafafa; width: 100%; @@ -2083,7 +2111,7 @@ a:hover .icon.out-link { background-position: -500px -14px;} float: left; height: 100%; overflow: hidden; - z-index: 2; + z-index: 10; background: #f6f6f6; } @@ -2220,9 +2248,6 @@ a:hover .icon.out-link { background-position: -500px -14px;} text-overflow: ellipsis; overflow: hidden; border-left: 1px solid rgba(0, 0, 0, .1); - -moz-transition: all 100ms; - -o-transition: all 100ms; - transition: all 100ms; } .feature-list-item .label .icon { @@ -2302,9 +2327,6 @@ a:hover .icon.out-link { background-position: -500px -14px;} text-overflow: ellipsis; overflow: hidden; border-left: 1px solid rgba(0, 0, 0, .1); - -moz-transition: all 100ms; - -o-transition: all 100ms; - transition: all 100ms; border-radius: 0 3px 3px 0; } @@ -2455,6 +2477,10 @@ a:hover .icon.out-link { background-position: -500px -14px;} text-align: right; } +.form-label-button-wrap .tag-reference-button { + border-radius: 0 3px 0 0; +} + .form-label-button-wrap .icon { opacity: .5; } @@ -2541,7 +2567,7 @@ a:hover .icon.out-link { background-position: -500px -14px;} /* Styles for raw tag inspector on hover */ .inspector-hover .tag-row .key-wrap, -.inspector-hover .tag-row .input-wrap-position { +.inspector-hover .tag-row .form-field.input-wrap-position { width: 50%; } @@ -2594,69 +2620,6 @@ a:hover .icon.out-link { background-position: -500px -14px;} line-height: 0; display: block; overflow: hidden; - -webkit-transition: opacity 200ms, width 0 200ms, padding 0 200ms, line-height 0 200ms; - -moz-transition: opacity 200ms, width 0 200ms, padding 0 200ms, line-height 0 200ms; - -o-transition: opacity 200ms, width 0 200ms, padding 0 200ms, line-height 0 200ms; - transition: opacity 200ms, width 0 200ms, padding 0 200ms, line-height 0 200ms; -} - -/* first phase hover-to-active animations */ - -textarea, -.form-label, -.preset-input-wrap, -.preset-input-wrap .label { - -webkit-transition: all 200ms; - -moz-transition: all 200ms; - -o-transition: all 200ms; - transition: all 200ms; -} - -/* second phase hover-to-active animations */ - -input, -.checkselect label:last-of-type { - -webkit-transition: opacity 200ms 200ms, width 200ms 200ms, margin-right 200ms 200ms; - -moz-transition: opacity 200ms 200ms, width 200ms 200ms, margin-right 200ms 200ms; - -o-transition: opacity 200ms 200ms, width 200ms 200ms, margin-right 200ms 200ms; - transition: opacity 200ms 200ms, width 200ms 200ms, margin-right 200ms 200ms; -} - -.entity-editor-pane button.minor, -.combobox-caret, -.entity-editor-pane .header button, -.toggle-list label span, -.spin-control, -.more-fields, -.view-on-osm, -.hide-toggle:before, -.entity-editor-pane .toggle-list label::before, -.entity-editor-pane .toggle-list label.remove .icon { - -webkit-transition: opacity 200ms 200ms; - -moz-transition: opacity 200ms 200ms; - -o-transition: opacity 200ms 200ms; - transition: opacity 200ms 200ms; -} - -.entity-editor-pane a.hide-toggle { - -webkit-transition: padding-left 200ms 200ms, color 200ms 200ms; - -moz-transition: padding-left 200ms 200ms, color 200ms 200ms; - -o-transition: padding-left 200ms 200ms, color 200ms 200ms; - transition: padding-left 200ms 200ms, color 200ms 200ms; -} - -.entity-editor-pane .toggle-list label:not(.active) { - -webkit-transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms; - -moz-transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms; - -o-transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms; - transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms; -} - -.entity-editor-pane .toggle-list label { - -webkit-transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms; - -moz-transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms; - -o-transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms; - transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms; } /* adding additional preset fields */ @@ -2664,10 +2627,6 @@ input, .more-fields { padding: 0 20px 20px 20px; font-weight: bold; - -webkit-transition: padding 200ms 200ms, max-height 200ms 200ms; - -moz-transition: padding 200ms 200ms, max-height 200ms 200ms; - -o-transition: padding 200ms 200ms, max-height 200ms 200ms; - transition: padding 200ms 200ms, max-height 200ms 200ms; } .more-fields label { padding: 5px 10px 5px 0; } @@ -3005,10 +2964,6 @@ div.combobox { width: 40%; float: left; height: 30px; - -webkit-transition: width 200ms; - -moz-transition: width 200ms; - -o-transition: width 200ms; - transition: width 200ms; } .tag-row input.key { @@ -3577,6 +3532,84 @@ img.wiki-image { bottom: 0; } +/* Map-In-Map +------------------------------------------------------- */ + +.map-in-map { + position: absolute; + overflow: hidden; + top: 60px; + width: 200px; + height: 150px; + z-index: 5; + background: #000; + border: #aaa 1px solid; + box-shadow: 0 0 2em black; +} + +.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; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.map-in-map-svg { + position: relative; + overflow: hidden; + height: 100%; + width: 100%; +} + +.map-in-map-bbox { + fill: none; + stroke: rgba(255, 255, 0, 0.75); + stroke-width: 1; + shape-rendering: crispEdges; +} + +.map-in-map-bbox.thick { + stroke-width: 5; +} + +/* Info Box +------------------------------------------------------- */ +.infobox { + position: absolute; + z-index: 1; + right: 0; + bottom: 30px; + width: 240px; + border-radius: 4px 0 0 0; + border-bottom: 1px solid black; +} + +.infobox .selection-heading { + display: block; + border-radius: 4px 0 0 0; + padding: 5px 10px; + height: 30px; +} + +.infobox ul { + padding: 5px 10px; +} + +.infobox .button { + position: absolute; + background: #7092ff; + border-radius: 2px; + padding: 0 4px; + color: white; + top: 40px; + right: 10px; +} + /* About Section ------------------------------------------------------- */ @@ -3591,10 +3624,14 @@ img.wiki-image { #attrib { width: 100%; height: 20px; + margin-bottom: 5px; float: left; clear: both; + pointer-events: none; } +#attrib * { pointer-events: all; } + .base-layer-attribution, .overlay-layer-attribution { position: absolute; @@ -3702,7 +3739,7 @@ img.wiki-image { clear: both; text-align: right; width: 100%; - padding: 0px 5px; + padding: 0px 10px; } .api-status.offline, @@ -3715,12 +3752,15 @@ img.wiki-image { ------------------------------------------------------- */ .modal { + top: 40px; display: inline-block; position:absolute; + border-radius: 3px; + overflow: hidden; left: 0; right: 0; margin: auto; - z-index: 3; + z-index: 50; } .modal .loader { @@ -3732,7 +3772,7 @@ img.wiki-image { } .shaded { - z-index: 2; + z-index: 49; position: absolute; top: 0; bottom: 0; @@ -3753,8 +3793,19 @@ img.wiki-image { border-bottom: 1px solid #CCC; } -.modal-section:last-child { - border-bottom: 0; +.modal-section.header h3 { + padding: 0; +} + +.modal-section.buttons { + text-align: center; +} + +.modal-section.buttons .action { + display: inline-block; + margin: 0 10px; + text-align: center; + vertical-align: middle; } .loading-modal { @@ -3783,7 +3834,8 @@ img.wiki-image { display: block; content: ''; height: 100px; - width: 100px; + width: 100%; + max-width: 100px; margin: auto; margin-bottom: 10px; background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat 0 -220px; @@ -3793,6 +3845,10 @@ img.wiki-image { border-right: 1px solid #CCC; } +.modal-section:last-child { + border-bottom: 0; +} + /* Restore Modal ------------------------------------------------------- */ @@ -3862,14 +3918,6 @@ img.wiki-image { margin-bottom: 0; } -.mode-save button.action { - float: none; - margin: auto; - display: block; - color: white; - font-size: 14px; -} - .mode-save .user-info img { float: left; } @@ -3932,6 +3980,56 @@ img.wiki-image { .changeset-list li:first-child { border-top: 0;} +/* Conflict resolution +------------------------------------------------------- */ + +.conflicts-help { + padding: 20px; + background-color: #ffffbb; + border-bottom: 1px solid #ccc; +} + +.conflicts-buttons { + padding: 20px; +} + +.mode-save button.conflicts-button { + float: left; +} + +.conflict-container { + border-bottom: 1px solid #ccc; +} + +.conflict-description { + padding: 5px 20px; + display: block; +} + +.conflicts-done { + padding: 20px 20px 0 20px; +} + +.conflict-detail-container { + padding: 10px 20px; +} + +.conflict-count { + padding: 10px 20px; +} + +.conflict-choices { + margin-top: 10px; +} + +.conflict-nav-buttons { + padding: 10px 0 20px 0; +} + +.conflict-nav-button { + height: 30px; +} + /* Notices ------------------------------------------------------- */ @@ -4112,28 +4210,7 @@ img.wiki-image { } .tooltip-inner .keyhint { - font-size: 10px; - padding: 0 7px; font-weight: bold; - display: inline-block; - border-radius: 2px; - border: 1px solid #CCC; - position: relative; - z-index: 1; - text-align: left; -} - -.tooltip-inner .keyhint::after { - content: ""; - position: absolute; - border-radius: 2px; - height: 10px; - width: 100%; - z-index: 0; - bottom: -4px; - left: -1px; - border: 1px solid #CCC; - border-top: 0; } /* Exceptions for tooltip layouts */ @@ -4537,7 +4614,7 @@ img.wiki-image { .preset-icon-line.feature-pipeline{background-position:-2300px -25px;} .preset-icon-relation.feature-relation{background-position:-20px -25px;} .preset-icon-relation.feature-restriction{background-position:-80px -25px;} -.preset-icon-relation.feature-multipolygon{background-position:-140px -25px;} +.preset-icon-relation.feature-multipolygon{background-position:-141px -25px;} .preset-icon-relation.feature-boundary{background-position:-200px -25px;} .preset-icon-relation.feature-route{background-position:-260px -25px;} .preset-icon-relation.feature-route-road{background-position:-320px -25px;}