X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/cdc4e3f8d1fd6071151327389c08db911de3bcf4..0814b4096c443e2ab3c09baa058aa81a00d205d1:/vendor/assets/iD/iD.css.erb?ds=sidebyside diff --git a/vendor/assets/iD/iD.css.erb b/vendor/assets/iD/iD.css.erb index f0a144132..758d1518c 100644 --- a/vendor/assets/iD/iD.css.erb +++ b/vendor/assets/iD/iD.css.erb @@ -200,6 +200,7 @@ g.point .shadow { stroke-opacity: 0; } +g.point.related:not(.selected) .shadow, g.point.hover:not(.selected) .shadow { stroke-opacity: 0.5; } @@ -267,7 +268,9 @@ g.vertex.vertex-hover { display: block; } +g.vertex.related:not(.selected) .shadow, g.vertex.hover:not(.selected) .shadow, +g.midpoint.related:not(.selected) .shadow, g.midpoint.hover:not(.selected) .shadow { fill-opacity: 0.5; } @@ -307,6 +310,7 @@ path.shadow { stroke-opacity: 0; } +path.shadow.related:not(.selected), path.shadow.hover:not(.selected) { stroke-opacity: 0.4; } @@ -424,7 +428,7 @@ path.fill.tag-amenity-university { .preset-icon-fill-area.tag-amenity-school, .preset-icon-fill-area.tag-amenity-college, .preset-icon-fill-area.tag-amenity-university { - border-color: rgb(255, 255, 148); + border-color: rgb(232, 232, 0); background-color: rgba(255, 255, 148, 0.15); } @@ -455,25 +459,34 @@ path.fill.tag-landuse-commercial { background-color: rgba(214, 136, 26, 0.3); } -path.stroke.tag-landuse-industrial { +path.stroke.tag-landuse-industrial, +path.stroke.tag-power-plant { stroke: rgb(228, 164, 245); } -path.fill.tag-landuse-industrial { +path.fill.tag-landuse-industrial, +path.fill.tag-power-plant { stroke: rgba(228, 164, 245, 0.3); fill: rgba(228, 164, 245, 0.3); } -.preset-icon-fill-area.tag-landuse-industrial { +.preset-icon-fill-area.tag-landuse-industrial, +.preset-icon-fill-area.tag-power-plant { border-color: rgb(228, 164, 245); background-color: rgba(228, 164, 245, 0.3); } +path.stroke.tag-natural-bare_rock, +path.stroke.tag-natural-scree, path.stroke.tag-landuse-quarry { stroke: rgb(166, 149, 123); } +path.fill.tag-natural-bare_rock, +path.fill.tag-natural-scree, path.fill.tag-landuse-quarry { stroke: rgba(166, 149, 123, 0.2); fill: rgba(166, 149, 123, 0.2); } +.preset-icon-fill-area.tag-natural-bare_rock, +.preset-icon-fill-area.tag-natural-scree, .preset-icon-fill-area.tag-landuse-quarry { border-color: rgb(166, 149, 123); background-color: rgba(166, 149, 123, 0.2); @@ -494,21 +507,26 @@ path.fill.tag-landuse-landfill { .pattern-color-construction { fill: rgba(196, 189, 25, 0.2); } -path.stroke.tag-landuse.tag-status { +path.stroke.tag-landuse.tag-status, +path.stroke.tag-landuse-construction { stroke: rgb(196, 189, 25); } -.preset-icon-fill-area.tag-landuse.tag-status { +.preset-icon-fill-area.tag-landuse.tag-status, +.preset-icon-fill-area.tag-landuse-construction { border-color: rgb(196, 189, 25); background-color: rgba(196, 189, 25, 0.2); } +path.stroke.tag-military, path.stroke.tag-landuse-military { stroke: rgb(214, 136, 26); } +path.fill.tag-military, path.fill.tag-landuse-military { stroke: rgba(214, 136, 26, 0.2); fill: rgba(214, 136, 26, 0.2); } +.preset-icon-fill-area.tag-military, .preset-icon-fill-area.tag-landuse-military { border-color: rgb(214, 136, 26); background-color: rgba(214, 136, 26, 0.2); @@ -536,13 +554,16 @@ path.stroke.tag-landuse-meadow { background-color: rgba(182, 225, 153, 0.2); } -.pattern-color-beach { +.pattern-color-beach, +.pattern-color-sand { fill: rgba(255, 255, 126, 0.2); } -path.stroke.tag-natural-beach { +path.stroke.tag-natural-beach, +path.stroke.tag-natural-sand { stroke: rgb(255, 255, 126); } -.preset-icon-fill-area.tag-natural-beach { +.preset-icon-fill-area.tag-natural-beach, +.preset-icon-fill-area.tag-natural-sand { border-color: rgb(255, 255, 126); background-color: rgba(255, 255, 126, 0.2); } @@ -571,6 +592,18 @@ path.stroke.tag-landuse-farmland { background-color: rgba(140, 208, 95, 0.2); } +path.stroke.tag-landuse-farmyard { + stroke: rgb(245, 220, 186); +} +path.fill.tag-landuse-farmyard { + stroke: rgba(245, 220, 186, 0.3); + fill: rgba(245, 220, 186, 0.3); +} +.preset-icon-fill-area.tag-landuse-farmyard { + border-color: rgb(245, 220, 186); + background: rgba(245, 220, 186, 0.3); +} + .pattern-color-cemetery, .pattern-color-orchard { fill: rgba(140, 208, 95, 0.2); @@ -1473,24 +1506,21 @@ text.pointlabel-halo, text.arealabel, text.linelabel, text.pointlabel { + dominant-baseline: middle; + text-anchor: middle; font-size: 12px; font-weight: bold; fill: #333; - text-anchor: middle; pointer-events: none; -webkit-transition: opacity 100ms linear; transition: opacity 100ms linear; -moz-transition: opacity 100ms linear; } +/* Opera doesn't support dominant-baseline. See #715 */ +/* Safari 10 seems to have regressed too */ .linelabel-halo .textpath, .linelabel .textpath { - dominant-baseline: middle; -} - -/* Opera doesn't support dominant-baseline. See #715 */ -.opera .linelabel-halo .textpath, -.opera .linelabel .textpath { baseline-shift: -33%; dominant-baseline: auto; } @@ -1507,9 +1537,22 @@ text.proximate { } text.point { - font-size: 10px; + font-size: 10px; +} + +.icon.areaicon-halo { + opacity: 0.6; + stroke: #999; + stroke-width: 2px; + stroke-miterlimit: 1; +} + +.icon.areaicon { + fill: #222; + opacity: 0.8; } + /* Turns */ g.turn rect, @@ -1695,7 +1738,7 @@ text.gpx { pointer-events: none; } -.layer-mapillary-signs .icon-sign body { +.layer-mapillary-signs .icon-sign .icon-sign-body { min-width: 20px; height: 28px; width: 28px; @@ -1704,14 +1747,15 @@ text.gpx { cursor: pointer; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-select-mapillary.png") %>) 6 1, pointer; /* FF */ z-index: 70; + overflow: visible; } -.layer-mapillary-signs .icon-sign:hover body { +.layer-mapillary-signs .icon-sign:hover .icon-sign-body { border: 2px solid rgba(255,198,0,0.8); z-index: 80; } -.layer-mapillary-signs .icon-sign.selected body { +.layer-mapillary-signs .icon-sign.selected .icon-sign-body { border: 2px solid rgba(255,0,0,0.8); z-index: 80; } @@ -1719,7 +1763,6 @@ text.gpx { .layer-mapillary-signs .icon-sign .t { font-size: 28px; z-index: 70; - position: absolute; } .layer-mapillary-signs .icon-sign:hover .t, @@ -1766,6 +1809,7 @@ text.gpx { stroke-width: 8; } +.fill-wireframe path.shadow.related:not(.selected), .fill-wireframe path.shadow.hover:not(.selected) { stroke-opacity: 0.4; } @@ -1799,7 +1843,10 @@ html, body { } body { - font:normal 12px/1.6667 'Helvetica Neue', Arial, sans-serif; + font: normal 12px/1.6667 -apple-system, BlinkMacSystemFont, + "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", + "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial", + sans-serif; margin:0; padding:0; min-width: 768px; @@ -1826,6 +1873,20 @@ body { height: 100%; } +#content.active { + -webkit-filter: none !important; + filter: none !important; + -webkit-duration: 200ms; + transition-duration: 200ms; +} + +#content.inactive { + -webkit-filter: grayscale(80%) brightness(80%); + filter: grayscale(80%) brightness(80%); + -webkit-duration: 200ms; + transition-duration: 200ms; +} + #defs { /* Can't be display: none or the clippaths are ignored. */ position: absolute; @@ -1936,7 +1997,10 @@ a:hover { textarea { resize: vertical; - font:normal 12px/20px 'Helvetica Neue', Arial, sans-serif; + font:normal 12px/20px -apple-system, BlinkMacSystemFont, + "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", + "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial", + sans-serif; } textarea, @@ -2238,10 +2302,6 @@ button.secondary-action:hover { background: #cccccc; } -button.save.has-count { - padding: 9px; -} - button.save .count { display: none; } @@ -2259,7 +2319,7 @@ button.save.has-count .count { line-height: 12px; border-radius: 4px; margin: auto; - margin-left: 8.3333%; + margin-left: 9.3333%; } button.save.has-count .count::before { @@ -2294,7 +2354,7 @@ button.save.has-count .count::before { } .icon.pre-text { - margin-right: 3px; + margin-right: 5px; } .icon.light { @@ -2510,9 +2570,24 @@ button.save.has-count .count::before { border-radius: 0; } +.feature-list-item { + background-color: white; + font-weight: bold; + height: 40px; + line-height: 20px; +} + +.feature-list-item:hover { + background-color: #ececec; +} + +.feature-list-item button { + background: transparent; +} + .feature-list-item .label { text-align: left; - padding: 5px 10px; + padding: 10px 10px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; @@ -2523,8 +2598,13 @@ button.save.has-count .count::before { opacity: .5; } -.feature-list-item:hover .label { - background-color: #ececec; +.feature-list-item .close { + float: right; + padding: 10px; +} + +.feature-list-item .close .icon { + opacity: 1; } .feature-list-item .entity-type { @@ -2617,16 +2697,28 @@ button.save.has-count .count::before { height: 44px; } -.preset-icon-32 { +.preset-icon-28 { position: absolute; - top: 14px; - left: 13px; /* Maki icons off center? */ + top: 16px; + left: 16px; margin: auto; } -.preset-icon-32 .icon { - width: 32px; - height: 32px; +.preset-icon-28 .icon { + width: 28px; + height: 28px; +} + +.preset-icon-24 { + position: absolute; + top: 18px; + left: 18px; + margin: auto; +} + +.preset-icon-24 .icon { + width: 24px; + height: 24px; } .preset-list-button .label { @@ -2931,8 +3023,10 @@ button.save.has-count .count::before { font-weight: bold; } -.more-fields label { padding: 5px 10px 5px 0; } -.more-fields input { width: 50%;} +.more-fields input { + margin-left: 10px; + width: 50%; +} /* preset form access */ @@ -4367,12 +4461,20 @@ img.tile-removing { text-align: right; width: 100%; padding: 0px 10px; + color: #eee; } .api-status.offline, .api-status.readonly, .api-status.error { - background: red; + background: #a22; +} + +.api-status-login { + color: #aaf; +} +.api-status-login:hover { + color: #ccf; } /* Modals @@ -5011,11 +5113,12 @@ img.tile-removing { background: #8cd05f; } -.intro-nav-wrap button.step .icon { +.intro-nav-wrap button.step .status { + margin-left: 3px; display: none; } -.intro-nav-wrap button.step.finished .icon { +.intro-nav-wrap button.step.finished .status { display: inline-block; } @@ -5083,8 +5186,6 @@ img.tile-removing { margin: auto; } -/* Mapillary -------------------------------------------------------- */ .mapillary-wrap { position: absolute; bottom: 30px; @@ -5098,15 +5199,6 @@ img.tile-removing { 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; @@ -5117,9 +5209,353 @@ img.tile-removing { } .mly-wrapper { - visibility: hidden; + visibility: hidden; + width: 100%; + height: 100%; } .mly-wrapper.active { - visibility: visible; + visibility: visible; +} + +/* Right-to-left localization settings */ + +[dir='rtl'] #sidebar { + float: right; +} + +[dir='rtl'] #sidebar .search-header .icon { + left: auto; + right: 10px; +} + +/* header */ +[dir='rtl'] .header h3 { + text-align: right; + padding: 20px 40px 20px 20px; +} + +[dir='rtl'] .entity-editor-pane .header button.preset-choose { + left: auto; + right: 0; +} + +[dir='rtl'] .entity-editor-pane .header button.preset-close, [dir='rtl'] .preset-list-pane .header button.preset-choose { + left: 0; + right: auto; +} + +[dir='rtl'] .preset-icon-fill-area { + left: auto; + right: 10px; +} + +[dir='rtl'] .map-data-control .layer-list button, [dir='rtl'] .background-control .layer-list button { + float: left; + border-left: none; + border-right: 1px solid #CCC; +} + +[dir='rtl'] .map-data-control .layer-list button:first-of-type, [dir='rtl'] .background-control .layer-list button:first-of-type { + border-radius: 3px 0 0 3px; +} + +/* search */ +[dir='rtl'] .feature-list-item .label { + text-align: right; +} + +[dir='rtl'] .feature-list-item .entity-name { + padding-left: 0; + padding-right: 10px; +} + +/* preset form */ +[dir='rtl'] .form-label { + padding: 5px 10px 5px 0; +} + +[dir='rtl'] .form-label button { + border-left: none; + border-right: 1px solid #CCC; +} + +[dir='rtl'] .more-fields label { + padding: 5px 0 5px 10px; +} + +[dir='rtl'] .form-label-button-wrap { + text-align: left; +} + +[dir='rtl'] button.minor { + left: 0; + right: auto; +} + +[dir='rtl'] .form-field .localized-main { + padding-left: 10%; + padding-right: 10px; +} + +[dir='rtl'] .combobox-caret { + margin-left: 0; + margin-right: -30px; +} + +[dir='rtl'] .form-field .button-input-action { + margin-left: 0; + margin-right: -10%; +} + +[dir='rtl'] .icon.pre-text { + margin-left: 5px; + margin-right: 0; +} + +[dir='rtl'] .notice .zoom-to .icon { + margin-left: 10px; + margin-right: 0; +} + +[dir='rtl'] .preset-list-button .label { + text-align: right; + left: 0; + right: 60px; + border-left: none; + border-right: 1px solid rgba(0, 0, 0, .1); + border-radius: 3px 0 0 3px; +} + +[dir='rtl'] .preset-icon-frame { + left: auto; + right: 7px; +} + +[dir='rtl'] .preset-list-item button.tag-reference-button { + left: 0; + right: auto; + border-radius: 3px 0 0 3px; +} + +[dir='rtl'] .preset-list-button-wrap .preset-icon { + left: auto; + right: auto; +} + +[dir='rtl'] .preset-list-button-wrap .preset-icon-28 { + right: 16px; +} + +[dir='rtl'] .preset-list-button-wrap .preset-icon-24 { + right: 18px; +} + +[dir='rtl'] .form-field .maxspeed-unit { + border-radius: 0 0 0 4px; +} + +[dir='rtl'] input[type="checkbox"], [dir='rtl'] input[type="radio"] { + float: right; + margin-left: 5px; + margin-right: 0; +} + +[dir='rtl'] .preset-input-wrap .col6 { + float: right; +} + +/* tags form */ +[dir='rtl'] .tag-row .key-wrap, +[dir='rtl'] .tag-row .input-wrap-position { + float: right; +} + +[dir='rtl'] .tag-row input { + border-left: none; + border-right: 1px solid #CCC; +} + +[dir='rtl'] .tag-row:first-child input.key { + border-top-left-radius: 0; + border-top-right-radius: 4px; +} + +[dir='rtl'] .tag-row button { + left: 10%; + border-left-width: 1px; +} + +[dir='rtl'] .tag-row .tag-reference-button { + left: auto; + right: auto; + margin-right: 35px; + border-left-width: 1px; + border-right-width: 0; +} + +[dir='rtl'] .tag-row:first-child .tag-reference-button { + border-top-left-radius: 4px; + border-top-right-radius: 0; +} + +[dir='rtl'] .tag-row:last-child .tag-reference-button { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 0; +} + +/* map control buttons */ +[dir='rtl'] .map-controls { + left: 0; + right: auto; +} + +[dir='rtl'] .background-control button, +[dir='rtl'] .zoombuttons button.zoom-in { + border-radius: 0 4px 0 0; +} + +[dir='rtl'] .help-control button, +[dir='rtl'] .geolocate-control button { + border-radius: 0 0 4px 0; +} + +[dir='rtl'] .list-item-gpx-browse svg { + transform: rotateY(180deg); +} + +/* map control button overlays */ +[dir='rtl'] .map-overlay { + padding: 20px 20px 20px 50px; + left: 0; + right: auto !important; +} + +[dir='rtl'] .opacity-options { + left: 50px; + right: auto; +} + +[dir='rtl'] .hide-toggle { + padding-left: 0; + padding-right: 12px; +} + +[dir='rtl'] .hide-toggle:before { + left: auto; + right: 0; + border-left: none; + border-right: 8px solid #7092ff; +} + +[dir='rtl'] .hide-toggle.expanded:before { + border-left: 4px solid transparent; + border-right: 4px solid transparent; +} + +/* navbar */ +[dir='rtl'] #bar .spacer, +[dir='rtl'] #bar .button-wrap, +[dir='rtl'] #bar .button-wrap button { + float: right; +} + +[dir='rtl'] .add-point .tooltip { + left: inherit !important; +} + +[dir='rtl'] .button-wrap:last-of-type { + padding-left: 0; + padding-right: 10px; +} + +[dir='rtl'] button.save.has-count .count { + margin-left: auto; + margin-right: 8%; +} + +[dir='rtl'] button.save.has-count .count::before { + border-left: 6px solid rgba(255,255,255,.5); + border-right: none; + left: auto; + right: -6px; +} + +[dir='rtl'] .joined button { + border-left: 1px solid rgba(0,0,0,.5); + border-right: none; +} + +[dir='rtl'] .joined button:first-child { + border-radius: 0 4px 4px 0; +} + +[dir='rtl'] .joined button:last-child { + border-radius: 4px 0 0 4px; +} + +[dir='rtl'] .spinner { + float: left; +} + +[dir='rtl'] .spinner img { + margin-left: 10px; + margin-right: auto; + -moz-transform: scaleX(-1); + -o-transform: scaleX(-1); + -webkit-transform: scaleX(-1); + transform: scaleX(-1); + filter: FlipH; + -ms-filter: "FlipH"; +} + +/* footer */ +[dir='rtl'] #scale-block { + float: right; + clear: right; +} + +[dir='rtl'] #info-block { + clear: left; +} + +[dir='rtl'] #about-list { + text-align: left; + clear: left; + margin-left: 10px; + margin-right: 0; +} + +[dir='rtl'] #about-list li { + float: left; + border-left: none; + border-right: 1px solid rgba(255,255,255,.5); + margin-left: 0; + margin-right: 5px; + padding: 5px 5px 5px 0; +} + +[dir='rtl'] #about-list li:last-child { + border-right: none; +} + +[dir='rtl'] #scale text { + text-anchor: end; +} + +/* increment / decrement control - code by Naoufel Razouane */ + +[dir='rtl'] .spin-control{ + margin-left: 0; + margin-right: -20%; +} +[dir='rtl'] .spin-control button{ + border-left: 0; + border-right: 1px solid #CCC; +} +[dir='rtl'] .spin-control button.decrement{ + border-bottom-right-radius: 0; +} +[dir='rtl'] .spin-control button.increment{ + border-bottom-left-radius: 3px; }