X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/424b6ef1cf760c4a3e27ac1e6f612ae42a9cd493..7dbf8d83369cb73929080c4ba23fdd7dcd0184df:/vendor/assets/iD/iD.css.erb diff --git a/vendor/assets/iD/iD.css.erb b/vendor/assets/iD/iD.css.erb index 75ea2d0ac..7fbfed2c4 100644 --- a/vendor/assets/iD/iD.css.erb +++ b/vendor/assets/iD/iD.css.erb @@ -189,6 +189,11 @@ input::-moz-focus-inner { pointer-events: none; } +.lasso #map { + pointer-events: visibleStroke; +} + + /* `.target` objects are interactive */ /* They can be picked up, clicked, hovered, or things can connect to them */ .node.target { @@ -405,7 +410,7 @@ text.point { } -/* Turns */ +/* Turn Restrictions */ g.turn rect, g.turn circle { @@ -418,10 +423,34 @@ g.turn circle { pointer-events: none; } -.lasso #map { - pointer-events: visibleStroke; +/* Turn restriction paths and vertices */ +.surface.tr .way.target, +.surface.tr path.shadow.selected, +.surface.tr path.shadow.related { + stroke-width: 25px; } +.surface.tr path.shadow.selected, +.surface.tr path.shadow.related, +.surface.tr g.vertex.selected .shadow, +.surface.tr g.vertex.related .shadow { + stroke-opacity: 0.7; + stroke: #777; +} +.surface.tr path.shadow.related.allow, +.surface.tr g.vertex.related.allow .shadow { + stroke: #5b3; +} +.surface.tr path.shadow.related.restrict, +.surface.tr g.vertex.related.restrict .shadow { + stroke: #d53; +} +.surface.tr path.shadow.related.only, +.surface.tr g.vertex.related.only .shadow { + stroke: #68f; +} + + /* GPX Paths */ .layer-gpx { @@ -1696,6 +1725,28 @@ path.casing.tag-boundary-national_park { } +/* Tree Rows */ +path.shadow.tag-natural-tree_row { + stroke-width: 16; +} +path.casing.tag-natural-tree_row { + stroke-width: 7; +} +path.stroke.tag-natural-tree_row { + stroke-width: 5; +} + +.low-zoom path.shadow.tag-natural-tree_row { + stroke-width: 12; +} +.low-zoom path.casing.tag-natural-tree_row { + stroke-width: 5; +} +.low-zoom path.stroke.tag-natural-tree_row { + stroke-width: 3; +} + + /* barriers */ path.stroke.tag-barrier { stroke: #ddd; @@ -2933,12 +2984,14 @@ button.save.has-count .count::before { height: 100%; } +.field-help-title button.close, .entity-editor-pane .header button.preset-close, .preset-list-pane .header button.preset-choose { position: absolute; right: 0; top: 0; } +[dir='rtl'] .field-help-title button.close, [dir='rtl'] .entity-editor-pane .header button.preset-close, [dir='rtl'] .preset-list-pane .header button.preset-choose { left: 0; @@ -3518,6 +3571,7 @@ a.hide-toggle { border-top: 0; border-radius: 0 0 4px 4px; overflow: hidden; + position: relative; } .form-field textarea { @@ -4086,9 +4140,48 @@ input[type=number] { /* Restrictions editor */ -.form-field-restrictions .preset-input-wrap { +.form-field-restrictions .restriction-controls-container { + background-color: #fff; + border-top: 1px solid #ccc; + width: 100%; + padding: 5px; +} + +.restriction-controls-container .restriction-controls { + display: table; +} + +.restriction-controls .restriction-control { + display: table-row; + padding: 5px 10px; + height: 25px; +} + +.restriction-control input, +.restriction-control span { + display: table-cell; + text-align: start; + padding: 0px 5px; +} + +.restriction-control span.restriction-control-label { + text-align: end; +} + +.restriction-control input { + width: 60px; + padding: 0; + margin: 0px 5px; + vertical-align: middle; +} + +.form-field-restrictions .restriction-container { position: relative; - height: 300px; + height: 370px; +} +/* zero width space, so container takes up space */ +.form-field-restrictions .restriction-container:after { + content: '\200b'; } .form-field-restrictions svg.surface { @@ -4096,7 +4189,7 @@ input[type=number] { height: 100%; } -.form-field-restrictions .restriction-help { +.restriction-container .restriction-help { z-index: 1; position: absolute; top: 0; @@ -4104,8 +4197,32 @@ input[type=number] { right: 0; padding: 2px 6px; background-color: rgba(255, 255, 255, .8); - color: #999; + color: #888; text-align: center; + pointer-events: none; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.restriction-help span { + margin: 2px; +} + +.restriction-help .qualifier { + color: #666; + font-weight: bold; +} +.restriction-help .qualifier.allow { + color: #8b5; +} +.restriction-help .qualifier.restrict { + color: #d53; +} +.restriction-help .qualifier.only { + color: #78f; } /* Changeset editor while comment text is empty */ @@ -4135,10 +4252,10 @@ input[type=number] { div.combobox { z-index: 9999; display: none; - box-shadow: 0 0 10px 0 rgba(0,0,0,.1); + box-shadow: 0 4px 10px 1px rgba(0,0,0,.2); margin-top: -1px; background: white; - max-height: 120px; + max-height: 245px; overflow-y: auto; overflow-x: hidden; border: 1px solid #ccc; @@ -4148,7 +4265,7 @@ div.combobox { .combobox a { display: block; padding: 5px 10px; - border-top:1px solid #ccc; + border-top: 1px solid #ccc; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; @@ -4161,6 +4278,7 @@ div.combobox { .combobox a:first-child { border-top: 0; + padding: 4px 10px; } .combobox-caret { @@ -4177,7 +4295,7 @@ div.combobox { } .combobox-caret::after { - content:""; + content: ""; height: 0; width: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; @@ -4187,6 +4305,107 @@ div.combobox { border-right: 5px solid transparent; } +/* Field Help */ + +.field-help-body { + display: block; + position: absolute; + top: 0; + left: 20px; + right: 20px; + margin: 5px; + padding: 8px; + border: 1px solid #ccc; + border-top: 0; + border-radius: 0 0 4px 4px; + z-index: 20; + background: rgba(255,255,255,0.95); + box-shadow: 0 0 30px 5px rgba(0,0,0,.4); +} + +.field-help-title h2 { + padding: 10px; + margin-bottom: 0px; + font-size: 17px; +} +.field-help-title button { + width: 45px; + height: 55px; + border-radius: 0; +} + +.field-help-nav { + font-size: 13px; + font-weight: bold; + margin-bottom: 10px; +} +.field-help-nav-item { + display: inline-block; + padding: 5px 10px; + cursor: pointer; + color: #666; +} +.field-help-nav-item.active { + color: #7092ff; +} +.field-help-nav-item:hover { + color: #597be7; + background-color: #efefef; +} + +.field-help-content { + padding: 10px; + overflow-y: auto; + overflow-x: hidden; +} +.field-help-content h3 { + font-size: 12px; + margin-bottom: 5px; +} +.field-help-content p { + margin-bottom: 15px; +} +.field-help-content ul li { + list-style: inside; + margin-bottom: 5px; +} + +.field-help-content .field-help-image { + width: 100%; + margin-bottom: 15px; +} + +.field-help-content svg.turn { + width: 40px; + height: 20px; +} +.field-help-content svg.shadow { + opacity: 0.7; + width: 60px; + height: 20px; +} +.field-help-content svg.from { + color: #777; +} +.field-help-content svg.allow { + color: #5b3; +} +.field-help-content svg.restrict { + color: #d53; +} +.field-help-content svg.only { + color: #68f; +} + +.field-help-content p.from_shadow, +.field-help-content p.allow_shadow, +.field-help-content p.restrict_shadow, +.field-help-content p.allow_turn, +.field-help-content p.restrict_turn { + margin-bottom: 5px; +} + + /* Raw Tag Editor */ .tag-list { @@ -4877,7 +5096,7 @@ div.full-screen > button:hover { } .help-wrap .toc li a:hover, -.help-wrap .nav a:hover { +.help-wrap .nav a:hover { background: #ececec; }