X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/ea68ac865ba4df5686ac111d4bd8679dc2a643a8..e0f3fdbac7200c20b2323ef9a927710fb00ad9aa:/vendor/assets/iD/iD.css.erb diff --git a/vendor/assets/iD/iD.css.erb b/vendor/assets/iD/iD.css.erb index 03c942bb2..c9d34b827 100644 --- a/vendor/assets/iD/iD.css.erb +++ b/vendor/assets/iD/iD.css.erb @@ -168,7 +168,7 @@ input::-moz-focus-inner { /* IE/Edge needs these overrides for markers to show up */ .layer-osm path.oneway-marker-path { fill: #000; } -.layer-osm path.sided-marker-natural-path { fill: rgb(140, 208, 95); } +.layer-osm path.sided-marker-natural-path { fill: rgb(170, 170, 170); } .layer-osm path.sided-marker-coastline-path { fill: #77dede; } .layer-osm path.sided-marker-barrier-path { fill: #ddd; } .layer-osm path.sided-marker-man_made-path { fill: #fff; } @@ -449,11 +449,21 @@ text.point { /* Wikidata-tagged */ g.point.tag-wikidata path.stroke { - stroke-width: 3px; - stroke: #777; - fill: #ddd; + stroke-width: 2px; + stroke: #666; + fill: #eee; +} +g.point.tag-wikidata .icon { + color: #666; } +/* Selected Members */ +g.vertex.selected-member .shadow, +g.point.selected-member .shadow, +path.shadow.selected-member { + stroke-opacity: 0.95; + stroke: #FFDE70; +} /* Highlighting */ g.point.highlighted .shadow, @@ -500,6 +510,91 @@ g.vertex.highlighted .shadow { stroke: #68f; } +/* Visual Diffs +------------------ +`highlight-edited` - visual diff activated +`added` - entity was created by the user +`moved` - node has different coordinates +`geometry-edited` - way has different nodes +`segment-edited` - one or both adjacents nodes moved +`retagged` - some tagging change has occurred +*/ + +/* Vertex visual diffs */ +.highlight-edited g.points g.node.vertex.added > circle.shadow, +.highlight-edited g.points g.node.vertex.retagged > circle.shadow, +.highlight-edited g.points g.node.vertex.moved > circle.shadow { + fill-opacity: 0.8; +} +.highlight-edited g.points g.node.vertex.added > circle.shadow { + fill: rgb(133, 255, 103); +} +.highlight-edited g.points g.node.vertex.retagged > circle.shadow { + fill: #fcde5a; +} +.highlight-edited g.points g.node.vertex.moved > circle.shadow { + fill: rgb(255, 126, 46); +} + +/* Point visual diffs */ +.highlight-edited g.points g.node.point.added > path.shadow, +.highlight-edited g.points g.node.point.retagged > path.shadow, +.highlight-edited g.points g.node.point.moved > path.shadow { + stroke-opacity: 0.8; + stroke-width: 10; +} +.highlight-edited g.points g.node.point.added > path.shadow { + stroke: rgb(133, 255, 103); +} +.highlight-edited g.points g.node.point.retagged > path.shadow { + stroke: #fcde5a; +} +.highlight-edited g.points g.node.point.moved > path.shadow { + stroke: rgb(255, 126, 46); +} + +/* Line/area segment visual diffs +- segments are rendered on top of the ways for convenience and to differentiate + them from entire line diffs, so make them thin +*/ +.highlight-edited g.lines > path.line.segment-edited, +.highlight-edited g.areas > path.area.segment-edited { + stroke: rgb(255, 126, 46); + stroke-dasharray: 10, 3; + stroke-width: 1.5 !important; + stroke-opacity: 1; +} + +/* Entire line/area visual diffs */ +.highlight-edited path.line.shadow.added, +.highlight-edited path.line.shadow.retagged, +.highlight-edited path.line.shadow.geometry-edited, +.highlight-edited path.area.shadow.added, +.highlight-edited path.area.shadow.retagged, +.highlight-edited path.area.shadow.geometry-edited { + stroke-opacity: 0.6; +} +.highlight-edited.fill-wireframe path.line.shadow.added, +.highlight-edited.fill-wireframe path.line.shadow.retagged, +.highlight-edited.fill-wireframe path.line.shadow.geometry-edited, +.highlight-edited.fill-wireframe path.area.shadow.added, +.highlight-edited.fill-wireframe path.area.shadow.retagged, +.highlight-edited.fill-wireframe path.area.shadow.geometry-edited { + stroke-width: 3; +} +.highlight-edited path.line.shadow.added, +.highlight-edited path.area.shadow.added { + stroke: rgb(133, 255, 103); +} +.highlight-edited path.area.shadow.retagged, +.highlight-edited path.line.shadow.retagged { + stroke: #fcde5a; +} +.highlight-edited path.line.shadow.geometry-edited, +.highlight-edited path.area.shadow.geometry-edited { + stroke: rgb(255, 126, 46); +} + /* Default - light gray */ path.area.stroke { stroke: rgb(170, 170, 170); @@ -524,32 +619,36 @@ path.stroke.old-multipolygon { /* Green things */ -path.stroke.tag-natural, -path.stroke.tag-natural-wood, +path.stroke.tag-barrier-hedge, +path.stroke.tag-landuse-flowerbed, +path.stroke.tag-landuse-forest, +path.stroke.tag-landuse-grass, +path.stroke.tag-landuse-recreation_ground, +path.stroke.tag-landuse-village_green, +path.stroke.tag-leisure-garden, +path.stroke.tag-leisure-golf_course, path.stroke.tag-leisure-nature_reserve, +path.stroke.tag-leisure-park, path.stroke.tag-leisure-pitch, path.stroke.tag-leisure-track, -path.stroke.tag-leisure-golf_course, -path.stroke.tag-leisure-garden, -path.stroke.tag-leisure-park, -path.stroke.tag-landuse-recreation_ground, -path.stroke.tag-landuse-forest, -path.stroke.tag-landuse-grass, -path.stroke.tag-barrier-hedge { +path.stroke.tag-natural, +path.stroke.tag-natural-wood { stroke: rgb(140, 208, 95); } -path.fill.tag-natural, -path.fill.tag-natural-wood, +path.fill.tag-barrier-hedge, +path.fill.tag-landuse-flowerbed, +path.fill.tag-landuse-forest, +path.fill.tag-landuse-grass, +path.fill.tag-landuse-recreation_ground, +path.fill.tag-landuse-village_green, +path.fill.tag-leisure-garden, +path.fill.tag-leisure-golf_course, path.fill.tag-leisure-nature_reserve, +path.fill.tag-leisure-park, path.fill.tag-leisure-pitch, path.fill.tag-leisure-track, -path.fill.tag-leisure-golf_course, -path.fill.tag-leisure-garden, -path.fill.tag-leisure-park, -path.fill.tag-landuse-recreation_ground, -path.fill.tag-landuse-forest, -path.fill.tag-landuse-grass, -path.fill.tag-barrier-hedge { +path.fill.tag-natural, +path.fill.tag-natural-wood { stroke: rgba(140, 208, 95, 0.3); fill: rgba(140, 208, 95, 0.3); } @@ -596,7 +695,8 @@ path.stroke.tag-amenity-childcare, path.stroke.tag-amenity-kindergarten, path.stroke.tag-amenity-school, path.stroke.tag-amenity-college, -path.stroke.tag-amenity-university { +path.stroke.tag-amenity-university, +path.stroke.tag-amenity-research_institute { stroke: rgba(255, 255, 148, 0.75); } path.fill.tag-leisure-pitch.tag-sport-beachvolleyball, @@ -610,7 +710,8 @@ path.fill.tag-amenity-childcare, path.fill.tag-amenity-kindergarten, path.fill.tag-amenity-school, path.fill.tag-amenity-college, -path.fill.tag-amenity-university { +path.fill.tag-amenity-university, +path.fill.tag-amenity-research_institute { stroke: rgba(255, 255, 148, 0.25); fill: rgba(255, 255, 148, 0.25); } @@ -625,7 +726,8 @@ path.fill.tag-amenity-university { .preset-icon-fill path.area.stroke.tag-amenity-kindergarten, .preset-icon-fill path.area.stroke.tag-amenity-school, .preset-icon-fill path.area.stroke.tag-amenity-college, -.preset-icon-fill path.area.stroke.tag-amenity-university { +.preset-icon-fill path.area.stroke.tag-amenity-university, +.preset-icon-fill path.area.stroke.tag-amenity-research_institute { stroke: rgb(232, 232, 0); } .pattern-color-beach, @@ -640,7 +742,8 @@ path.stroke.tag-landuse-residential, path.stroke.tag-status-construction { stroke: rgb(196, 189, 25); } -path.fill.tag-landuse-residential { +path.fill.tag-landuse-residential, +path.fill.tag-status-construction { stroke: rgba(196, 189, 25, 0.3); fill: rgba(196, 189, 25, 0.3); } @@ -686,6 +789,10 @@ path.fill.tag-power-plant { path.stroke.tag-natural-wetland { stroke: rgb(153, 225, 170); } +path.fill.tag-natural-wetland { + stroke: rgba(153, 225, 170, 0.3); + fill: rgba(153, 225, 170, 0.3); +} .preset-icon-fill path.area.fill.tag-natural-wetland { fill: rgba(153, 225, 170, 0.2); } @@ -700,29 +807,41 @@ path.stroke.tag-natural-wetland { /* Light Green things */ path.stroke.tag-landuse-cemetery, -path.stroke.tag-landuse-orchard, -path.stroke.tag-landuse-vineyard, +path.stroke.tag-landuse-farmland, +path.stroke.tag-landuse-grass.tag-golf-green, path.stroke.tag-landuse-meadow, -path.stroke.tag-landuse-farmland { +path.stroke.tag-landuse-orchard, +path.stroke.tag-landuse-vineyard { stroke: rgb(191, 232, 63); } +path.fill.tag-landuse-cemetery, +path.fill.tag-landuse-farmland, +path.fill.tag-landuse-grass.tag-golf-green, +path.fill.tag-landuse-meadow, +path.fill.tag-landuse-orchard, +path.fill.tag-landuse-vineyard { + stroke: rgba(191, 232, 63, 0.3); + fill: rgba(191, 232, 63, 0.3); +} .preset-icon-fill path.area.fill.tag-landuse-cemetery, -.preset-icon-fill path.area.fill.tag-landuse-orchard, -.preset-icon-fill path.area.fill.tag-landuse-vineyard, +.preset-icon-fill path.area.fill.tag-landuse-farmland, +.preset-icon-fill path.area.fill.tag-landuse-grass.tag-golf-green, .preset-icon-fill path.area.fill.tag-landuse-meadow, -.preset-icon-fill path.area.fill.tag-landuse-farmland { - fill: rgba(191, 232, 63, 0.2); +.preset-icon-fill path.area.fill.tag-landuse-orchard, +.preset-icon-fill path.area.fill.tag-landuse-vineyard { + fill: rgba(191, 232, 63, 0.4); } .pattern-color-cemetery, -.pattern-color-cemetery_christian, .pattern-color-cemetery_buddhist, -.pattern-color-cemetery_muslim, +.pattern-color-cemetery_christian, .pattern-color-cemetery_jewish, -.pattern-color-orchard, -.pattern-color-vineyard, +.pattern-color-cemetery_muslim, +.pattern-color-farmland, +.pattern-color-golf_green, .pattern-color-meadow, -.pattern-color-farmland { - fill: rgba(191, 232, 63, 0.2); +.pattern-color-orchard, +.pattern-color-vineyard { + fill: rgba(191, 232, 63, 0.3); } @@ -1244,6 +1363,7 @@ path.line.stroke.tag-highway-bridleway { /* style for features that should have highway=footway but don't yet */ path.line.stroke.tag-crossing, +path.line.stroke.tag-footway-access_aisle, path.line.stroke.tag-public_transport-platform, path.line.stroke.tag-highway-platform, path.line.stroke.tag-railway-platform, @@ -1255,7 +1375,8 @@ path.line.casing.tag-highway-path, path.line.casing.tag-highway-path.tag-unpaved, path.line.casing.tag-highway-footway.tag-public_transport-platform, path.line.casing.tag-highway-footway.tag-man_made-pier, -path.line.casing.tag-highway.tag-crossing { +path.line.casing.tag-highway.tag-crossing, +path.line.casing.tag-highway.tag-footway-access_aisle { stroke: #dca; stroke-linecap: round; stroke-dasharray: none; @@ -1293,7 +1414,14 @@ path.line.stroke.tag-highway_bus_stop, .preset-icon-container path.casing.tag-highway-footway { stroke: #988; } -.preset-icon-container path.stroke.tag-highway-footway:not(.tag-crossing-marked):not(.tag-crossing-unmarked):not(.tag-man_made-pier):not(.tag-public_transport-platform) { +.preset-icon .icon.tag-highway-footway.tag-footway-sidewalk { + color: #d4b4b4; +} +path.stroke.tag-highway-footway.tag-footway-sidewalk, +.preset-icon-container path.casing.tag-highway-footway.tag-footway-sidewalk { + stroke: #d4b4b4; +} +.preset-icon-container path.stroke.tag-highway-footway:not(.tag-crossing-marked):not(.tag-crossing-unmarked):not(.tag-footway-access_aisle):not(.tag-man_made-pier):not(.tag-public_transport-platform) { stroke: #fff; } @@ -1396,6 +1524,20 @@ path.line.stroke.tag-highway-cycleway.tag-crossing-marked { color: #446077; } +path.line.stroke.tag-highway.tag-footway-access_aisle { + stroke-dasharray: 4, 2; +} +.low-zoom path.line.stroke.tag-highway.tag-footway-access_aisle, +.preset-icon-container path.stroke.tag-highway.tag-footway-access_aisle { + stroke-dasharray: 2.5, 1.5; +} +path.line.stroke.tag-highway.tag-footway-access_aisle { + stroke: #4c4444; +} +.preset-icon .icon.tag-highway.tag-footway-access_aisle { + color: #4c4444; +} + /* highway midpoints */ g.midpoint.tag-highway-corridor .fill, @@ -1581,8 +1723,8 @@ path.line.stroke.tag-railway-subway { color: #7dd; fill: #7dd; } -.preset-icon .icon.tag-type-waterway, -.preset-icon .icon.tag-waterway { +.preset-icon .icon.tag-type-waterway:not(.tag-waterway-dam), +.preset-icon .icon.tag-waterway:not(.tag-waterway-dam) { color: #7dd; fill: #fff; } @@ -1608,14 +1750,14 @@ path.area.fill.tag-waterway-fuel { } /* lines */ -path.line.fill.tag-waterway { +path.line.fill.tag-waterway:not(.tag-waterway-dam) { stroke: rgba(119, 211, 222, 0.3); fill: rgba(119, 211, 222, 0.3); } -path.line.casing.tag-waterway { +path.line.casing.tag-waterway:not(.tag-waterway-dam) { stroke: #444; } -path.line.stroke.tag-waterway { +path.line.stroke.tag-waterway:not(.tag-waterway-dam) { stroke: #7dd; } @@ -1860,26 +2002,26 @@ path.line.casing.tag-boundary-national_park { /* barriers and similar */ -path.line.stroke.tag-barrier:not(.tag-barrier-hedge) { +path.line.stroke.tag-barrier:not(.tag-barrier-hedge):not(.tag-waterway) { stroke: #ddd; } .preset-icon-container path.line.stroke.tag-barrier:not(.tag-barrier-hedge) { stroke: rgb(170, 170, 170); } path.line.casing.tag-natural, -path.line.casing.tag-barrier, +path.line.casing.tag-barrier:not(.tag-waterway), path.line.casing.tag-man_made-groyne, path.line.casing.tag-man_made-breakwater { stroke: none; } -path.line.stroke.tag-barrier, +path.line.stroke.tag-barrier:not(.tag-waterway), path.line.stroke.tag-man_made-groyne, path.line.stroke.tag-man_made-breakwater { stroke-width: 3px; stroke-linecap: round; stroke-dasharray: 15, 5, 1, 5; } -.low-zoom path.line.stroke.tag-barrier, +.low-zoom path.line.stroke.tag-barrier:not(.tag-waterway), .low-zoom path.line.stroke.tag-man_made-groyne, .low-zoom path.line.stroke.tag-man_made-breakwater { stroke-width: 2px; @@ -1891,6 +2033,20 @@ path.line.stroke.tag-man_made-breakwater { .preset-icon-container path.line.stroke.tag-man_made-breakwater { stroke-dasharray: 1, 4, 6, 4; } +path.line.stroke.tag-barrier.tag-barrier-wall, +path.line.stroke.tag-barrier.tag-barrier-retaining_wall, +path.line.stroke.tag-barrier.tag-barrier-city_wall { + stroke-linecap: butt; + stroke-dasharray: 16, 3, 9, 3; +} +.low-zoom path.line.stroke.tag-barrier.tag-barrier-wall, +.low-zoom path.line.stroke.tag-barrier.tag-barrier-retaining_wall, +.low-zoom path.line.stroke.tag-barrier.tag-barrier-city_wall, +.preset-icon-container path.line.stroke.tag-barrier.tag-barrier-wall, +.preset-icon-container path.line.stroke.tag-barrier.tag-barrier-retaining_wall, +.preset-icon-container path.line.stroke.tag-barrier.tag-barrier-city_wall { + stroke-dasharray: 8, 1, 4, 1; +} /* bridges */ @@ -2391,22 +2547,28 @@ path.fill.tag-building { } -/* Mapillary Sign Layer */ -.layer-mapillary-signs { +/* Mapillary Traffic Signs and Map Features Layers */ +.layer-mapillary-detections { pointer-events: none; } -.layer-mapillary-signs .icon-sign { +.layer-mapillary-detections .icon-detected { outline: 2px solid transparent; pointer-events: visible; cursor: pointer; + opacity: 0.75; } -.layer-mapillary-signs .icon-sign:hover { - outline: 5px solid #eebb00; - background-color: #eebb00; +.layer-mapillary-detections .icon-detected rect { + fill: none; +} +.layer-mapillary-detections .icon-detected:hover rect { + outline: 3px solid rgba(255, 238, 0, 0.6); } -.layer-mapillary-signs .icon-sign.currentView { - outline: 5px solid #ffee00; - background-color: #ffee00; +.layer-mapillary-detections .icon-detected.currentView rect { + outline: 3px solid rgba(255, 238, 0, 1); +} +.layer-mapillary-detections .icon-detected:hover, +.layer-mapillary-detections .icon-detected.currentView { + opacity: 1; } @@ -2959,6 +3121,21 @@ a:visited, a { a:hover { color: #597be7; } +kbd { + display: inline-block; + text-align: center; + padding: 3px 5px; + font-size: 11px; + line-height: 12px; + min-width: 12px; + vertical-align: baseline; + background-color: #fcfcfc; + border: solid 1px #ccc; + margin: 0 2px; + border-bottom-color: #bbb; + border-radius: 3px; + box-shadow: inset 0 -1px 0 #bbb; +} /* Forms ------------------------------------------------------- */ @@ -3250,34 +3427,53 @@ button[disabled].action:hover { /* Toolbar / Persistent UI Elements ------------------------------------------------------- */ -#bar { - display: flex; - flex-flow: row nowrap; - justify-content: space-between; +#bar-wrap { position: absolute; - padding: 10px 5px 0px 5px; left: 0; top: 0; right: 0; z-index: 101; } +#bar { + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + padding: 10px 0 0 0; + overflow-x: auto; + overflow-y: hidden; + height: 100%; + width: 100%; + + /* hide scrollbar but allow scrolling */ + scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; /* IE, Edge */ +} +#bar::-webkit-scrollbar { + display: none; /* Chrome, Safari, Opera */ +} #bar .toolbar-item { display: flex; flex: 0 1 auto; flex-flow: column wrap; justify-content: center; - position: relative; } #bar .toolbar-item .item-content { display: flex; flex: 0 1 auto; flex-flow: row nowrap; justify-content: center; - position: relative; height: 40px; width: auto; margin: 0 5px; } +[dir='ltr'] #bar .toolbar-item:last-child .item-content, +[dir='rtl'] #bar .toolbar-item:first-child .item-content { + margin-right: 10px; +} +[dir='ltr'] #bar .toolbar-item:first-child .item-content, +[dir='rtl'] #bar .toolbar-item:last-child .item-content { + margin-left: 10px; +} #bar .toolbar-item .item-label { text-align: center; font-size: 11px; @@ -3391,223 +3587,6 @@ button.add-note svg.icon { margin-left: 1px; } -/* Add a feature search bar -------------------------------------------------------- */ - -.search-add { - width: 200%; - justify-content: center; - position: relative; - min-width: 150px; - max-width: 325px; -} -.search-add .search-wrap { - position: relative; - width: 100%; -} -[dir='ltr'] .search-add .search-wrap { - border-radius: 20px 4px 4px 20px; -} -[dir='rtl'] .search-add .search-wrap { - border-radius: 4px 20px 20px 4px; -} -.search-add .search-wrap.focused .tooltip { - display: none; -} -.search-add .search-wrap:last-child { - border-radius: 20px; -} -.search-add input[type='search'] { - position: relative; - width: 100%; - height: 100%; - border: none; - font-size: 14px; - text-indent: 25px; - padding: 5px 10px; - border-radius: inherit; -} -.search-add input[type='search'][disabled] { - opacity: 0.25; - cursor: not-allowed; -} -.search-add .search-icon { - color: #333; - display: block; - position: absolute; - left: 10px; - top: 10px; - pointer-events: none; -} -[dir='rtl'] .search-add .search-icon { - left: auto; - right: 10px; -} -.search-add .popover { - border: none; - border-radius: 6px; - position: absolute; - max-height: 600px; - top: 44px; - width: 200%; - max-width: 325px; - margin: auto; - left: auto; - right: auto; - z-index: 300; -} -.search-add .popover .popover-content { - overflow-y: auto; - height: 100%; - max-height: 60vh; -} -.search-add .popover, -.search-add .popover .popover-content { - /* ensure corners are rounded in Chrome */ - -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); -} -.search-add .popover .popover-footer { - padding: 5px 10px 5px 10px; - background: #f6f6f6; - border-top: 1px solid #DCDCDC; - display: flex; -} -.search-add .popover .popover-footer .message { - color: #666666; - flex-grow: 1; -} -.search-add .popover .popover-footer button.filter { - height: 20px; - background: transparent; - color: #666; -} -.search-add .popover .popover-footer button.filter.active { - color: #7092ff; -} -.search-add .popover .popover-footer button.filter:hover { - color: #333; -} -.search-add .popover .popover-footer button.filter.active:hover { - color: #597be7; -} -.search-add .popover::-webkit-scrollbar { - /* don't overlap rounded corners */ - background: transparent; -} -.search-add .popover .list { - height: 100%; -} -.search-add .list-item > .row { - display: flex; - position: relative; - padding: 2px; -} -.search-add .list-item:not(:last-of-type) .row, -.search-add .subsection.subitems .list-item .row, -.search-add .subsection > .tag-reference-body { - border-bottom: 1px solid #DCDCDC; -} -.search-add .list-item .label { - font-weight: bold; - font-size: 12px; - padding-left: 2px; - top: 0; - bottom: 0; - position: relative; - display: flex; - align-items: center; - line-height: 1.3em; - width: 100%; -} -.search-add .list-item .label .namepart:nth-child(2) { - font-weight: normal; -} -.search-add .list-item.disabled .preset-icon-container, -.search-add .list-item.disabled .label { - opacity: 0.55; -} -[dir='ltr'] .search-add .list-item .label .icon.inline { - margin-left: 0; -} -[dir='rtl'] .search-add .list-item .label .icon.inline { - margin-right: 0; -} -.search-add .list-item .row > *:not(button) { - pointer-events: none; -} -.search-add .list-item button.choose { - position: absolute; - border-radius: 0; - height: 100%; - width: 100%; - top: 0; - left: 0; -} -.search-add .list-item button.choose:hover, -.search-add .list-item button.choose:focus { - background: #fff; -} -.search-add .list-item.focused:not(.disabled) button.choose { - background: #e8ebff; -} -.search-add .list-item button.choose.disabled { - background-color: #ececec; -} -.search-add .subsection .list-item button.choose { - opacity: 0.85; -} -.search-add .subsection .tag-reference-body { - background: rgba(255, 255, 255, 0.85); - padding: 10px; -} -.search-add .list-item button.accessory { - position: relative; - flex: 0 0 auto; - color: #808080; - background: transparent; - padding-right: 3px; - padding-left: 3px; -} -.search-add .list-item button.accessory:hover { - color: #666; -} -.search-add .list-item button.tag-reference-open path { - fill: #000; -} -.search-add .subsection { - background-color: #CBCBCB; -} -[dir='ltr'] .search-add .subitems { - padding-left: 6px; -} -[dir='rtl'] .search-add .subitems { - padding-right: 6px; -} - -/* Add a preset mode buttons -------------------------------------------------------- */ - -button.bar-button.add-preset { - border-radius: 4px; -} -[dir='ltr'] button.bar-button.add-preset { - margin-left: 1px; -} -[dir='rtl'] button.bar-button.add-preset { - margin-right: 1px; -} -[dir='ltr'] button.bar-button.add-preset.first-recent { - margin-left: 10px; -} -[dir='rtl'] button.bar-button.add-preset.first-recent { - margin-right: 10px; -} -button.bar-button.add-preset { - padding: 0; -} -button.add-preset.disabled .preset-icon-container { - opacity: 0.5; -} /* Header for modals / panes ------------------------------------------------------- */ .header { @@ -3971,10 +3950,10 @@ a.hide-toggle { .preset-list-item { margin-bottom: 10px; + position: static; } .preset-list-button-wrap { - position: relative; height: 62px; display: flex; border: 1px solid #ccc; @@ -4011,6 +3990,14 @@ a.hide-toggle { height: 50px; object-fit: contain; border-radius: 2px; + z-index: 2; + visibility: hidden; +} +.preset-icon-container.showing-img img.image-icon { + visibility: visible; +} +.preset-icon-container.showing-img *:not(.image-icon) { + visibility: hidden; } .preset-icon-point-border path { @@ -4158,18 +4145,15 @@ a.hide-toggle { background-color: #ececec; } -.preset-list-item button.preset-favorite-button, .preset-list-item button.tag-reference-button { height: 100%; width: 32px; flex: 0 0 auto; background: #f6f6f6; } -[dir='ltr'] .preset-list-item button.preset-favorite-button, [dir='ltr'] .preset-list-item button.tag-reference-button { border-left: 1px solid #ccc; } -[dir='rtl'] .preset-list-item button.preset-favorite-button, [dir='rtl'] .preset-list-item button.tag-reference-button { border-right: 1px solid #ccc; } @@ -4180,23 +4164,13 @@ a.hide-toggle { border-radius: 4px 0 0 4px; } -.preset-list-item button.preset-favorite-button:hover, .preset-list-item button.tag-reference-button:hover { background: #f1f1f1; } -.preset-list-item button.preset-favorite-button .icon, .preset-list-item button.tag-reference-button .icon { opacity: .5; } -button.preset-favorite-button .icon { - fill-opacity: 0; - stroke-width: 1; -} -button.preset-favorite-button.active .icon { - fill-opacity: inherit; -} - .current .preset-list-button, .current .preset-list-button .label { @@ -4636,6 +4610,17 @@ button.preset-favorite-button.active .icon { border-radius: 0 0 0 4px; } +[dir='ltr'] .form-field-input-identifier > input:last-child, +[dir='rtl'] .form-field-input-identifier > input:first-child, +[dir='ltr'] .form-field-input-identifier > button { + border-bottom-right-radius: 4px; +} +[dir='ltr'] .form-field-input-identifier > input:first-child, +[dir='rtl'] .form-field-input-identifier > input:last-child, +[dir='rtl'] .form-field-input-identifier > button { + border-bottom-left-radius: 4px; +} + /* draw the up/down on the buttons */ .form-field-input-number button.decrement::after, .form-field-input-number button.increment::after { @@ -4661,7 +4646,7 @@ button.preset-favorite-button.active .icon { ------------------------------------------------------- */ .form-field-input-check { display: flex; - align-items: end; + align-items: center; background: #fff; padding: 5px 10px; color: #7092ff; @@ -4673,6 +4658,7 @@ button.preset-favorite-button.active .icon { flex: 0 1 auto; min-height: 20px; width: 20px; + margin-top: 0; } .form-field-input-check > span { flex: 1 1 auto; @@ -4684,6 +4670,12 @@ button.preset-favorite-button.active .icon { border-radius: 2px; padding: 0px 8px; } +[dir='ltr'] .form-field-input-check > .reverser.button { + padding-right: 2px; +} +[dir='rtl'] .form-field-input-check > .reverser.button { + padding-left: 2px; +} .form-field-input-check > .reverser.button.hide { display: none; } @@ -5507,7 +5499,6 @@ img.tag-reference-wiki-image { box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3); */ } -.raw-member-editor .member-row.dragging /* preserve extra space at bottom of inspector to allow for dropdown options - #5280 */ .raw-membership-editor.inspector-inner { @@ -5795,7 +5786,8 @@ input.key-trap { border-radius: 0; } -.map-control > button:hover { +.map-control > button:not(.disabled):hover, +.map-control > button:not(.disabled):focus { background: rgba(0, 0, 0, .8); } @@ -5804,6 +5796,10 @@ input.key-trap { background: #7092ff; } +.map-control > button.disabled .icon { + color: rgba(255, 255, 255, 0.5); +} + /* Fullscreen Button (disabled) ------------------------------------------------------- */ @@ -5854,17 +5850,6 @@ div.full-screen > button:hover { /* Background / Map Data / Help Pane buttons ------------------------------------------------------- */ -.help-control > button { - border-radius: 0 0 0 4px; -} -[dir='rtl'] .help-control > button { - border-radius: 0 0 4px 0; -} - -.map-data-control button { - border-radius: 0; -} - .background-control > button { border-radius: 4px 0 0 0; } @@ -5872,6 +5857,13 @@ div.full-screen > button:hover { border-radius: 0 4px 0 0; } +.help-control > button { + border-radius: 0 0 0 4px; +} +[dir='rtl'] .help-control > button { + border-radius: 0 0 4px 0; +} + /* Background / Map Data Settings ------------------------------------------------------- */ @@ -5896,6 +5888,7 @@ div.full-screen > button:hover { background-color: #fff; color: #7092ff; position: relative; + display: flex; } .layer-list:empty { @@ -5926,9 +5919,8 @@ div.full-screen > button:hover { } .layer-list li.best > div.best { - display: inline-block; padding: 5px; - float: right; + flex: 0 0 auto; } [dir='rtl'] .list-item-data-browse svg { @@ -5937,14 +5929,14 @@ div.full-screen > button:hover { /* make sure tooltip fits in map-control panel */ /* if too wide, placement will be wrong the first time it displays */ -.layer-list li.best .tooltip-inner { +.layer-list li.best .popover-inner { max-width: 160px; } .layer-list label { - display: block; padding: 5px 10px; cursor: pointer; + flex: 1 1 auto; } [dir='ltr'] .layer-list .indented label { @@ -5963,7 +5955,6 @@ div.full-screen > button:hover { .map-data-pane .layer-list button, .background-pane .layer-list button { - float: right; height: 100%; border-left: 1px solid #ccc; border-radius: 0; @@ -5972,7 +5963,6 @@ div.full-screen > button:hover { } [dir='rtl'] .map-data-pane .layer-list button, [dir='rtl'] .background-pane .layer-list button { - float: left; border-left: none; border-right: 1px solid #ccc; } @@ -5982,12 +5972,12 @@ div.full-screen > button:hover { opacity: 0.5; } -.map-data-pane .layer-list button:first-of-type, -.background-pane .layer-list button:first-of-type { +.map-data-pane .layer-list button:last-of-type, +.background-pane .layer-list button:last-of-type { border-radius: 0 3px 3px 0; } -[dir='rtl'] .map-data-pane .layer-list button:first-of-type, -[dir='rtl'] .background-pane .layer-list button:first-of-type { +[dir='rtl'] .map-data-pane .layer-list button:last-of-type, +[dir='rtl'] .background-pane .layer-list button:last-of-type { border-radius: 3px 0 0 3px; } @@ -6033,7 +6023,7 @@ div.full-screen > button:hover { } [dir='rtl'] .issue-label .issue-info-button { border-left: 0; - border-right: 1px solid; + border-right: 1px solid #ccc; } .issue-container .issue-label .issue-info-button .icon { opacity: 0.5; @@ -6229,7 +6219,8 @@ button.autofix.action.active { } input.square-degrees-input { - padding: 2px; + padding: 2px !important; /* important needed for rtl */ + width: 40px; height: unset; text-align: center; background: rgba(0,0,0,0); @@ -6700,7 +6691,6 @@ li.issue-fix-item:not(.actionable) .fix-icon { /* hide and remove from layout */ .inspector-hidden, -.inspector-hover .preset-list-button-wrap .preset-favorite-button, .inspector-hover .preset-list-button-wrap .tag-reference-button, .inspector-hover label input[type="checkbox"], .inspector-hover label input[type="radio"], @@ -7343,6 +7333,9 @@ img.tile-debug { margin-right: 5px; padding: 5px 5px 5px 0; } +#about-list li:empty { + display: none; +} #about-list li:last-child { border-left: 0; @@ -7353,20 +7346,45 @@ img.tile-debug { border-right: none; } -.source-switch a { - padding: 2px 4px 4px 4px; +#about-list a.chip { + padding: 2px 4px 3px 4px; border-radius: 2px; + color: #eee; } -.source-switch a.live { +#about-list a.chip .icon { + width: 14px; + height: 14px; + margin-top: 3px; +} +[dir='ltr'] #about-list a.chip .icon, +[dir='ltr'] #about-list a.chip span { + margin-right: 3px; +} +[dir='rtl'] #about-list a.chip .icon, +[dir='rtl'] #about-list a.chip span { + margin-left: 3px; +} + +.source-switch a.chip.live { background: #d32232; color: #fff; } -.feature-warning a { +.feature-warning a.chip { background: #1e90ff; - padding: 2px 4px 4px 4px; - border-radius: 2px; - color: #eee; +} + +.issues-info a.chip.resolved-count { + background: #15911E; +} +.issues-info a.chip.warnings-count { + background: #DF8500; +} +[dir='ltr'] .issues-info a.chip:not(:last-child) { + margin-right: 5px; +} +[dir='rtl'] .issues-info a.chip:not(:last-child) { + margin-left: 5px; } .user-list a:not(:last-child):after { @@ -7375,7 +7393,7 @@ img.tile-debug { .api-status { text-align: right; - padding: 0px 10px; + padding: 1px 10px; color: #eee; flex: 1 1 auto; } @@ -7389,11 +7407,13 @@ img.tile-debug { background: #a22; } -.api-status-login { - color: #aaf; +.api-status a { + text-decoration: underline; + color: #ccc; + pointer-events: all; } -.api-status-login:hover { - color: #ccf; +.api-status a:hover { + color: inherit; } /* Notification Badges @@ -7488,6 +7508,9 @@ img.tile-debug { padding: 20px; border-bottom: 1px solid #ccc; } +.modal-section p:not(:last-of-type) { + padding-bottom: 20px; +} .modal-section.header h3 { padding: 0; } @@ -7710,7 +7733,7 @@ img.tile-debug { .modal-shortcuts .shortcut-tab { display: flex; flex-flow: row wrap; - justify-content: center; + justify-content: space-around; } .modal-shortcuts .shortcut-column { @@ -7741,20 +7764,7 @@ img.tile-debug { } .modal-shortcuts .shortcut-keys kbd { - display: inline-block; - text-align: center; - padding: 3px 5px; - font-size: 11px; - line-height: 12px; - min-width: 12px; color: #555; - vertical-align: baseline; - background-color: #fcfcfc; - border: solid 1px #ccc; - margin: 0 2px; - border-bottom-color: #bbb; - border-radius: 3px; - box-shadow: inset 0 -1px 0 #bbb; } svg.mouseclick use.left { @@ -7954,7 +7964,8 @@ svg.mouseclick use.right { border-radius: 8px; } -.notice .zoom-to:hover { +.notice .zoom-to:hover, +.notice .zoom-to:focus { background: rgba(0,0,0,0.6); } @@ -7972,9 +7983,11 @@ svg.mouseclick use.right { /* Tooltips ------------------------------------------------------- */ -.tooltip { +.popover { position: absolute; display: none; +} +.tooltip { color: #333; font-size: 12px; white-space: initial; @@ -7982,32 +7995,60 @@ svg.mouseclick use.right { .tooltip:not(.curtain-tooltip) { pointer-events: none; } -.tooltip.in { - opacity: 0.9; +.popover.in { z-index: 5000; height: auto; display: block; } +.tooltip.in { + opacity: 0.95; +} +.popover.top { + margin-top: -4px; +} +.popover.right { + margin-left: 4px; +} +.popover.bottom { + margin-top: 4px; +} +.popover.left { + margin-left: -4px; +} +.popover.arrowed.top { + margin-top: -10px; +} +.popover.arrowed.right { + margin-left: 10px; +} +.popover.arrowed.bottom { + margin-top: 10px; +} +.popover.arrowed.left { + margin-left: -10px; +} +.bar-button .tooltip.arrowed.bottom { + margin-top: 20px; +} .tooltip.top { - margin-top: -20px; text-align: center; } .tooltip.right { - margin-left: 20px; text-align: left; } .tooltip.bottom { - margin-top: 20px; text-align: center; } .tooltip.left { - margin-left: -20px; text-align: right; } -.tooltip-inner { - display: inline-block; - border-radius: 3px; +.popover-inner { + border-radius: inherit; +} + +.tooltip .popover-inner { + border-radius: 4px; max-width: 200px; min-width: 80px; padding: 10px; @@ -8062,42 +8103,44 @@ svg.mouseclick use.right { border-right-color: #fff; border-width: 5px 5px 5px 0; } - -.tooltip-arrow { +.popover-arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; } -.tooltip.top .tooltip-arrow { +.popover.top .popover-arrow { bottom: -5px; left: 50%; margin-left: -5px; border-top-color: #fff; border-width: 5px 5px 0; } -.tooltip.right .tooltip-arrow { +.popover.right .popover-arrow { top: 50%; left: -5px; margin-top: -5px; border-right-color: #fff; border-width: 5px 5px 5px 0; } -.tooltip.left .tooltip-arrow { +.popover.left .popover-arrow { top: 50%; right: -5px; margin-top: -5px; border-left-color: #fff; border-width: 5px 0 5px 5px; } -.tooltip.bottom .tooltip-arrow { +.popover.bottom .popover-arrow { top: -5px; left: 50%; margin-left: -5px; border-bottom-color: #fff; border-width: 0 5px 5px; } +.popover:not(.arrowed) .popover-arrow { + display: none; +} .tooltip-heading { font-weight: bold; @@ -8114,49 +8157,58 @@ svg.mouseclick use.right { margin: 10px -10px -10px -10px; border-radius: 0 0 3px 3px; } -.tooltip-inner .keyhint { +.popover-inner .shortcut { font-weight: bold; margin-left: 5px; } -[dir='rtl'] .tooltip-inner .keyhint { +[dir='rtl'] .popover-inner .shortcut { margin-left: 0; margin-right: 5px; } /* dark tooltips for sidebar / panels */ -.tooltip.dark.top .tooltip-arrow, -.map-pane .tooltip.top .tooltip-arrow, -#sidebar .tooltip.top .tooltip-arrow { +.tooltip.dark.top .popover-arrow, +.map-pane .tooltip.top .popover-arrow, +#sidebar .tooltip.top .popover-arrow { border-top-color: #000; } -.tooltip.dark.bottom .tooltip-arrow, -.map-pane .tooltip.bottom .tooltip-arrow, -#sidebar .tooltip.bottom .tooltip-arrow { +.tooltip.dark.bottom .popover-arrow, +.map-pane .tooltip.bottom .popover-arrow, +#sidebar .tooltip.bottom .popover-arrow { border-bottom-color: #000; } -.tooltip.dark.left .tooltip-arrow, -.map-pane .tooltip.left .tooltip-arrow, -#sidebar .tooltip.left .tooltip-arrow { +.tooltip.dark.left .popover-arrow, +.map-pane .tooltip.left .popover-arrow, +#sidebar .tooltip.left .popover-arrow { border-left-color: #000; } -.tooltip.dark.right .tooltip-arrow, -.map-pane .tooltip.right .tooltip-arrow, -#sidebar .tooltip.right .tooltip-arrow { +.tooltip.dark.right .popover-arrow, +.map-pane .tooltip.right .popover-arrow, +#sidebar .tooltip.right .popover-arrow { border-right-color: #000; } -.tooltip.dark .tooltip-inner, +.tooltip.dark .popover-inner, .tooltip.dark .tooltip-heading, .tooltip.dark .keyhint-wrap, -.map-pane .tooltip-inner, +.map-pane .popover-inner, .map-pane .tooltip-heading, .map-pane .keyhint-wrap, -#sidebar .tooltip-inner, +#sidebar .popover-inner, #sidebar .tooltip-heading, #sidebar .keyhint-wrap { background: #000; color: #ccc; } +.tooltip.dark kbd, +.map-pane .tooltip kbd, +#sidebar .tooltip kbd { + background-color: #666; + border: solid 1px #444; + border-bottom-color: #333; + box-shadow: inset 0 -1px 0 #333; + color: #eee; +} /* Exceptions for tooltip layouts */ @@ -8165,44 +8217,6 @@ svg.mouseclick use.right { margin-top: -5px; } -/* Uncramp map-control tooltips */ -.map-control .tooltip { - min-width: 160px; -} -.map-control .shortcuts .tooltip { - max-width: 160px; -} - -/* Move over tooltips that are near the edge of screen */ -[dir='ltr'] .sidebar-toggle .tooltip { - left: 0 !important; -} -[dir='rtl'] .sidebar-toggle .tooltip { - right: 0 !important; -} -[dir='ltr'] .sidebar-toggle .tooltip .tooltip-arrow { - left: 20px; -} -[dir='rtl'] .sidebar-toggle .tooltip .tooltip-arrow { - right: 20px; -} -[dir='ltr'] .save .tooltip { - left: auto !important; - right: 0 !important; -} -[dir='rtl'] .save .tooltip { - right: auto !important; - left: 0 !important; -} -[dir='ltr'] .save .tooltip .tooltip-arrow { - left: auto; - right: 36px; -} -[dir='rtl'] .save .tooltip .tooltip-arrow { - right: auto; - left: 36px; -} - li:first-of-type .badge .tooltip, li.hide + li.version .badge .tooltip { left: auto !important; @@ -8213,13 +8227,13 @@ li.hide + li.version .badge .tooltip { left: 5px !important; right: auto !important; } -li:first-of-type .badge .tooltip .tooltip-arrow, -li.hide + li.version .badge .tooltip .tooltip-arrow { +li:first-of-type .badge .tooltip .popover-arrow, +li.hide + li.version .badge .tooltip .popover-arrow { right: 15px !important; left: auto !important; } -[dir='rtl'] li:first-of-type .badge .tooltip .tooltip-arrow, -[dir='rtl'] li.hide + li.version .badge .tooltip .tooltip-arrow { +[dir='rtl'] li:first-of-type .badge .tooltip .popover-arrow, +[dir='rtl'] li.hide + li.version .badge .tooltip .popover-arrow { left: 15px !important; right: auto !important; } @@ -8268,8 +8282,6 @@ li.hide + li.version .badge .tooltip .tooltip-arrow { /* Contextual Edit Menu ------------------------------------------------------- */ .edit-menu-tooltip { - display: none; - position: absolute; width: 200px; } @@ -8419,14 +8431,14 @@ li.hide + li.version .badge .tooltip .tooltip-arrow { text-align: right; } -.curtain-tooltip .tooltip-inner { +.curtain-tooltip .popover-inner { font-size: 15px; position: relative; padding: 20px; } -.curtain-tooltip .tooltip-inner .button-section, -.curtain-tooltip .tooltip-inner .instruction { +.curtain-tooltip .popover-inner .button-section, +.curtain-tooltip .popover-inner .instruction { font-weight: bold; display: block; border-top: 1px solid #ccc; @@ -8436,17 +8448,17 @@ li.hide + li.version .badge .tooltip .tooltip-arrow { padding: 10px 20px 0 20px; } -.curtain-tooltip .tooltip-inner .button-section button { +.curtain-tooltip .popover-inner .button-section button { width: 66.6666%; } -.curtain-tooltip .tooltip-inner .instruction:only-child { +.curtain-tooltip .popover-inner .instruction:only-child { border: 0; padding: 0; margin: 0; } -.curtain-tooltip .tooltip-inner .icon.pre-text { +.curtain-tooltip .popover-inner .icon.pre-text { vertical-align: text-top; margin-right: 0; margin-left: 0; @@ -8509,3 +8521,12 @@ li.hide + li.version .badge .tooltip .tooltip-arrow { width: 100px; color: #7092ff; } + + +.list-item-photos.list-item-mapillary-map-features .request-data-link { + float: right; + margin-top: -20px; +} +[dir='rtl'] .list-item-photos.list-item-mapillary-map-features .request-data-link { + float: left; +}