License: none (public domain)
*/
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
+.ideditor div, .ideditor span, .ideditor applet, .ideditor object, .ideditor iframe, .ideditor h1, .ideditor h2, .ideditor h3, .ideditor h4, .ideditor h5, .ideditor h6, .ideditor p, .ideditor blockquote, .ideditor pre, .ideditor a, .ideditor abbr, .ideditor acronym, .ideditor address, .ideditor big, .ideditor cite, .ideditor code, .ideditor del, .ideditor dfn, .ideditor em, .ideditor img, .ideditor ins, .ideditor kbd, .ideditor q, .ideditor s, .ideditor samp, .ideditor small, .ideditor strike, .ideditor strong, .ideditor sub, .ideditor sup, .ideditor tt, .ideditor var, .ideditor b, .ideditor u, .ideditor i, .ideditor center, .ideditor dl, .ideditor dt, .ideditor dd, .ideditor ol, .ideditor ul, .ideditor li, .ideditor fieldset, .ideditor form, .ideditor label, .ideditor legend, .ideditor table, .ideditor caption, .ideditor tbody, .ideditor tfoot, .ideditor thead, .ideditor tr, .ideditor th, .ideditor td, .ideditor article, .ideditor aside, .ideditor canvas, .ideditor details, .ideditor embed, .ideditor figure, .ideditor figcaption, .ideditor footer, .ideditor header, .ideditor hgroup, .ideditor menu, .ideditor nav, .ideditor output, .ideditor ruby, .ideditor section, .ideditor summary, .ideditor time, .ideditor mark, .ideditor audio, .ideditor video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
+.ideditor article, .ideditor aside, .ideditor details, .ideditor figcaption, .ideditor figure, .ideditor footer, .ideditor header, .ideditor hgroup, .ideditor menu, .ideditor nav, .ideditor section {
display: block;
}
-body {
- line-height: 1;
-}
-ol, ul {
+.ideditor ol, .ideditor ul {
list-style: none;
}
-blockquote, q {
+.ideditor blockquote, .ideditor q {
quotes: none;
}
-blockquote:before, blockquote:after,
-q:before, q:after {
+.ideditor blockquote:before, .ideditor blockquote:after, .ideditor q:before, .ideditor q:after {
content: '';
content: none;
}
-table {
+.ideditor table {
border-collapse: collapse;
border-spacing: 0;
}
-a { text-decoration: none;}
+.ideditor a { text-decoration: none;}
/*
* 1. Corrects font family not being inherited in all browsers.
* 2. Corrects font size not being inherited in all browsers.
* 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
*/
-button,
-input,
-select,
-textarea {
+.ideditor button,
+.ideditor input,
+.ideditor select,
+.ideditor textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 2 */
margin: 0; /* 3 */
* the UA stylesheet.
*/
-button,
-input {
- line-height: normal;
+.ideditor button,
+.ideditor input {
+ line-height: inherit;
+ letter-spacing: inherit;
}
/* Hide default number spinner controls */
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-display: none;
+.ideditor input[type="number"]::-webkit-inner-spin-button,
+.ideditor input[type="number"]::-webkit-outer-spin-button {
+ display: none;
+}
+.ideditor input[type=number] {
+ -moz-appearance: textfield;
}
/*
- * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
- * and `video` controls.
- * 2. Corrects inability to style clickable `input` types in iOS.
- * 3. Improves usability and consistency of cursor style between image-type
+ * 1. Corrects inability to style clickable `input` types in iOS.
+ * 2. Improves usability and consistency of cursor style between image-type
* `input` and others.
*/
-button,
-html input[type="button"], /* 1 */
-input[type="reset"],
-input[type="submit"] {
- -webkit-appearance: button; /* 2 */
- cursor: pointer; /* 3 */
+.ideditor button,
+.ideditor input[type="button"],
+.ideditor input[type="reset"],
+.ideditor input[type="submit"] {
+ -webkit-appearance: button; /* 1 */
+ cursor: pointer; /* 2 */
}
/*
* Re-set default cursor for disabled elements.
*/
-button[disabled],
-input[disabled] {
+.ideditor button[disabled],
+.ideditor input[disabled] {
cursor: default;
}
* 2. Removes excess padding in IE 8/9.
*/
-input[type="checkbox"],
-input[type="radio"] {
- box-sizing: border-box; /* 1 */
+.ideditor input[type="checkbox"],
+.ideditor input[type="radio"] {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
* (include `-moz` to future-proof).
*/
-input[type="search"] {
- -webkit-appearance: textfield; /* 1 */
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box; /* 2 */
- box-sizing: border-box;
+.ideditor input[type="search"] {
+ -webkit-appearance: none; /* 1 */
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
}
/*
* on OS X.
*/
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
+.ideditor input[type="search"]::-webkit-search-cancel-button,
+.ideditor input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
* Removes inner padding and border in Firefox 4+.
*/
-button::-moz-focus-inner,
-input::-moz-focus-inner {
+.ideditor button::-moz-focus-inner,
+.ideditor input::-moz-focus-inner {
border: 0;
padding: 0;
}
** Markup free clearing
** Details: http://www.positioniseverything.net/easyclearing.html
*/
-.cf:before,
-.cf:after {
+.ideditor .cf:before,
+.ideditor .cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
-.cf:after {
+.ideditor .cf:after {
clear: both;
}
+/* base styles */
+.ideditor .layer-osm path {
+ fill: none;
+}
-use { pointer-events: none; }
+/* IE/Edge needs these overrides for markers to show up */
+.ideditor .layer-osm path.oneway-marker-path { fill: #000; }
+.ideditor .layer-osm path.sided-marker-natural-path { fill: rgb(170, 170, 170); }
+.ideditor .layer-osm path.sided-marker-coastline-path { fill: #77dede; }
+.ideditor .layer-osm path.sided-marker-barrier-path { fill: #ddd; }
+.ideditor .layer-osm path.sided-marker-man_made-path { fill: #fff; }
-/* base styles */
-.layer-osm path:not(.oneway) { fill: none; } /* IE needs :not(.oneway) */
+/* IE/Edge rule for <use> marker style */
+.ideditor .layer-osm path.viewfield-marker-path {
+ fill: #333;
+ fill-opacity: 0.75;
+ stroke: #fff;
+ stroke-width: 0.5px;
+ stroke-opacity: 0.75;
+}
+.ideditor .fill-wireframe .layer-osm path.viewfield-marker-path { /* IE/Edge rule for <use> marker style */
+ fill: none;
+}
/* the above fill: none rule affects paths in <use> shadow dom only in Firefox */
-.layer-osm use.icon path { fill: #333; } /* FF svg Maki icons */
-.layer-osm .turn use path { fill: #000; } /* FF turn restriction icons */
-#turn-only-shape2, #turn-only-u-shape2 { fill: #7092FF; } /* FF turn-only, turn-only-u */
-#turn-no-shape2, #turn-no-u-shape2 { fill: #E06D5F; } /* FF turn-no, turn-no-u */
-#turn-yes-shape2, #turn-yes-u-shape2 { fill: #8CD05F; } /* FF turn-yes, turn-yes-u */
-
-g.point .shadow,
-g.vertex .shadow,
-g.midpoint .shadow {
- pointer-events: all;
+.ideditor .layer-osm use.icon path { fill: #333; } /* FF svg Maki icons */
+.ideditor .layer-osm .turn use path { fill: #000; } /* FF turn restriction icons */
+.ideditor #turn-only-shape2, .ideditor #turn-only-u-shape2 { fill: #7092ff; } /* FF turn-only, turn-only-u */
+.ideditor #turn-no-shape2, .ideditor #turn-no-u-shape2 { fill: #e06d5f; } /* FF turn-no, turn-no-u */
+.ideditor #turn-yes-shape2, .ideditor #turn-yes-u-shape2 { fill: #8cd05f; } /* FF turn-yes, turn-yes-u */
+
+
+/* No interactivity except what we specifically allow */
+.ideditor .data-layer.osm *,
+.ideditor .data-layer.notes *,
+.ideditor .data-layer.keepRight *,
+.ideditor .data-layer.improveOSM * {
+ pointer-events: none;
+}
+
+.ideditor .lasso .main-map {
+ pointer-events: visibleStroke;
+}
+
+
+/* `.target` objects are interactive */
+/* They can be picked up, clicked, hovered, or things can connect to them */
+.ideditor .qaItem.target,
+.ideditor .note.target,
+.ideditor .node.target,
+.ideditor .turn .target {
+ pointer-events: fill;
+ fill-opacity: 0.8;
+ fill: currentColor;
+ stroke: none;
}
-path.shadow {
+.ideditor .way.target {
pointer-events: stroke;
+ fill: none;
+ stroke-width: 12;
+ stroke-opacity: 0.8;
+ stroke: currentColor;
+ stroke-linecap: round;
+ stroke-linejoin: round;
+}
+
+.ideditor[pointer='pen'] .way.target {
+ stroke-width: 18;
+}
+.ideditor[pointer='touch'] .way.target {
+ stroke-width: 32;
+}
+.ideditor[pointer='touch'] .node.vertex.target {
+ pointer-events: painted;
+ stroke: currentColor;
+ stroke-width: 10;
+}
+
+/* `.target-nope` objects are explicitly forbidden to join to */
+.ideditor .surface:not(.nope-disabled) .node.target.target-nope,
+.ideditor .surface:not(.nope-disabled) .way.target.target-nope {
+ cursor: not-allowed;
+}
+
+
+/* `.active` objects (currently being drawn or dragged) are not interactive */
+/* This is important to allow the events to drop through to whatever is */
+/* below them on the map, so you can still hover and connect to other things. */
+.ideditor .layer-osm .active {
+ pointer-events: none !important;
+}
+
+/* points, notes & QA */
+
+/* points, notes, markers */
+.ideditor g.qaItem .stroke,
+.ideditor g.note .stroke {
+ stroke: #222;
+ stroke-width: 1;
+ fill: #222;
+ opacity: 0.6;
}
-/* points */
+.ideditor g.qaItem.active .stroke,
+.ideditor g.note.active .stroke {
+ stroke: #222;
+ stroke-width: 1;
+ fill: #222;
+ opacity: 0.8;
+}
-g.point .stroke {
+.ideditor g.point .stroke {
stroke: #444;
stroke-width: 1;
fill: #fff;
}
-g.point .shadow {
+
+.ideditor g.qaItem .shadow,
+.ideditor g.point .shadow,
+.ideditor g.note .shadow {
fill: none;
stroke: #f6634f;
stroke-width: 16;
stroke-opacity: 0;
}
-g.point.related:not(.selected) .shadow,
-g.point.hover:not(.selected) .shadow {
+.ideditor g.qaItem.hover:not(.selected) .shadow,
+.ideditor g.note.hover:not(.selected) .shadow,
+.ideditor g.point.related:not(.selected) .shadow,
+.ideditor g.point.hover:not(.selected) .shadow {
stroke-opacity: 0.5;
}
-g.point.selected .shadow {
+.ideditor g.qaItem.selected .shadow,
+.ideditor g.note.selected .shadow,
+.ideditor g.point.selected .shadow {
stroke-opacity: 0.7;
}
-g.point.active, g.point.active * {
- pointer-events: none;
-}
-
-g.point ellipse.stroke {
+/* g.note ellipse.stroke, */
+.ideditor g.point ellipse.stroke {
display: none;
}
-
-.mode-drag-node g.point.active ellipse.stroke {
+.ideditor.mode-drag-note g.note.active ellipse.stroke,
+.ideditor.mode-drag-node g.point.active ellipse.stroke {
display: block;
}
/* vertices and midpoints */
-
-g.vertex .fill {
+.ideditor g.vertex .fill {
fill: #000;
}
-
-g.vertex .stroke {
+.ideditor g.vertex .stroke {
stroke: #666;
stroke-width: 1;
fill: white;
}
-
-g.vertex.shared .stroke {
+.ideditor g.vertex.shared .stroke {
fill: #bbb;
}
-
-g.midpoint .fill {
+.ideditor g.midpoint .fill {
fill: #eee;
stroke: #444;
stroke-opacity: .6;
opacity: .7;
}
-g.vertex .shadow,
-g.midpoint .shadow {
+.ideditor g.vertex .shadow,
+.ideditor g.midpoint .shadow {
stroke-width: 6;
fill: #f6634f;
fill-opacity: 0;
}
-g.vertex.vertex-hover {
- display: none;
-}
-
-.mode-draw-area g.vertex.vertex-hover,
-.mode-draw-line g.vertex.vertex-hover,
-.mode-add-area g.vertex.vertex-hover,
-.mode-add-line g.vertex.vertex-hover,
-.mode-add-point g.vertex.vertex-hover,
-.mode-drag-node g.vertex.vertex-hover {
- display: block;
-}
-
-.mode-draw-area .hover-disabled g.vertex.vertex-hover,
-.mode-draw-line .hover-disabled g.vertex.vertex-hover,
-.mode-add-area .hover-disabled g.vertex.vertex-hover,
-.mode-add-line .hover-disabled g.vertex.vertex-hover,
-.mode-add-point .hover-disabled g.vertex.vertex-hover,
-.mode-drag-node .hover-disabled g.vertex.vertex-hover {
- display: none;
-}
-
-g.vertex.related:not(.selected) .shadow,
-g.vertex.hover:not(.selected) .shadow,
-g.midpoint.related:not(.selected) .shadow,
-g.midpoint.hover:not(.selected) .shadow {
+.ideditor g.vertex.related:not(.selected) .shadow,
+.ideditor g.vertex.hover:not(.selected) .shadow,
+.ideditor g.midpoint.related:not(.selected) .shadow,
+.ideditor g.midpoint.hover:not(.selected) .shadow {
fill-opacity: 0.5;
}
-g.vertex.selected .shadow {
+.ideditor g.vertex.selected .shadow {
fill-opacity: 0.7;
}
-.mode-draw-area g.midpoint,
-.mode-draw-line g.midpoint,
-.mode-add-area g.midpoint,
-.mode-add-line g.midpoint,
-.mode-add-point g.midpoint {
- display: none;
-}
/* lines */
-
-.preset-icon .icon.other-line {
- color: #fff;
- fill: #777;
+.ideditor .preset-icon .icon.iD-other-line {
+ color: #989898;
+}
+.ideditor .preset-icon-container path.line.casing {
+ stroke: #afafaf;
}
-path.line {
+.ideditor path.line {
stroke-linecap: round;
- stroke-linejoin: bevel;
+ stroke-linejoin: round;
}
-path.stroke {
+.ideditor path.stroke {
stroke: #000;
stroke-width: 4;
}
-path.shadow {
+.ideditor path.shadow {
stroke: #f6634f;
stroke-width: 16;
stroke-opacity: 0;
+ stroke-linecap: round;
+ stroke-linejoin: round;
}
-path.shadow.related:not(.selected),
-path.shadow.hover:not(.selected) {
+.ideditor path.shadow.related:not(.selected),
+.ideditor path.shadow.hover:not(.selected) {
stroke-opacity: 0.4;
}
-path.shadow.selected {
+.ideditor path.shadow.selected {
stroke-opacity: 0.7;
}
-path.line.stroke {
+.ideditor path.line.stroke {
stroke: #fff;
stroke-width: 2;
}
/* Labels / Markers */
-
-text {
- font-size:10px;
- pointer-events: none;
+.ideditor text {
+ font-size: 10px;
color: #222;
opacity: 1;
}
-.oneway .textpath.tag-waterway {
+.ideditor .oneway .textpath.tag-waterway {
fill: #002F35;
}
-path.oneway {
+.ideditor .onewaygroup path.oneway,
+.ideditor .viewfieldgroup path.viewfield,
+.ideditor .sidedgroup path.sided {
stroke-width: 6px;
}
-
-text.arealabel-halo,
-text.linelabel-halo,
-text.pointlabel-halo,
-text.arealabel,
-text.linelabel,
-text.pointlabel {
+.ideditor text.arealabel-halo,
+.ideditor text.linelabel-halo,
+.ideditor text.pointlabel-halo,
+.ideditor text.arealabel,
+.ideditor text.linelabel,
+.ideditor text.pointlabel {
dominant-baseline: middle;
text-anchor: middle;
font-size: 12px;
font-weight: bold;
fill: #333;
- pointer-events: none;
-webkit-transition: opacity 100ms linear;
+ -o-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 {
+.ideditor .linelabel-halo .textpath,
+.ideditor .linelabel .textpath {
baseline-shift: -33%;
dominant-baseline: auto;
}
-.layer-halo text {
+.ideditor .labels-group.halo text {
opacity: 0.7;
stroke: #fff;
stroke-width: 5px;
stroke-miterlimit: 1;
}
-text.proximate {
- opacity: 0;
+.ideditor text.nolabel {
+ opacity: 0 !important;
}
-
-text.point {
+.ideditor text.point {
font-size: 10px;
}
-.icon.areaicon-halo {
+.ideditor .icon.areaicon-halo {
opacity: 0.6;
stroke: #999;
stroke-width: 2px;
stroke-miterlimit: 1;
}
-
-.icon.areaicon {
+.ideditor .icon.areaicon {
fill: #222;
opacity: 0.8;
}
-/* Turns */
-
-g.turn rect,
-g.turn circle {
- fill: none;
- pointer-events: all;
+/* Wikidata-tagged */
+.ideditor g.point.tag-wikidata path.stroke {
+ stroke-width: 2px;
+ stroke: #666;
+ fill: #eee;
}
-
-.form-field-restrictions .vertex {
- pointer-events: none;
- cursor: auto !important;
+.ideditor g.point.tag-wikidata .icon {
+ color: #666;
}
-.lasso #map {
- pointer-events: visibleStroke;
+/* Selected Members */
+.ideditor g.vertex.selected-member .shadow,
+.ideditor g.point.selected-member .shadow,
+.ideditor path.shadow.selected-member {
+ stroke-opacity: 0.95;
+ stroke: #FFDE70;
}
-/* GPX Paths */
-
-.layer-gpx {
- pointer-events: none;
+/* Highlighting */
+.ideditor g.point.highlighted .shadow,
+.ideditor path.shadow.highlighted {
+ stroke-opacity: 0.95;
+ stroke: #7092ff;
+}
+.ideditor g.vertex.highlighted .shadow {
+ stroke-width: 7;
+ stroke-opacity: 0.95;
+ stroke: #7092ff;
}
-path.gpx {
- stroke: #FF26D4;
- stroke-width: 2;
+/* Turn Restrictions */
+.ideditor .points-group.turns g.turn rect,
+.ideditor .points-group.turns g.turn circle {
fill: none;
}
-text.gpx {
- fill: #FF26D4;
+/* Turn restriction paths and vertices */
+.ideditor .surface.tr .way.target,
+.ideditor .surface.tr path.shadow.selected,
+.ideditor .surface.tr path.shadow.related {
+ stroke-width: 25px;
}
-path.area.stroke {
- stroke: #fff;
- stroke-width: 1;
+.ideditor .surface.tr path.shadow.selected,
+.ideditor .surface.tr path.shadow.related,
+.ideditor .surface.tr g.vertex.selected .shadow,
+.ideditor .surface.tr g.vertex.related .shadow {
+ stroke-opacity: 0.7;
+ stroke: #777;
}
-path.area.fill {
- stroke-width: 0;
- stroke: rgba(255, 255, 255, 0.3);
- fill: rgba(255, 255, 255, 0.3);
- fill-rule: evenodd;
+.ideditor .surface.tr path.shadow.related.allow,
+.ideditor .surface.tr g.vertex.related.allow .shadow {
+ stroke: #5b3;
}
-.preset-icon-fill-area {
- border: 1px solid rgb(170, 170, 170);
- background-color: rgba(170, 170, 170, 0.3);
+.ideditor .surface.tr path.shadow.related.restrict,
+.ideditor .surface.tr g.vertex.related.restrict .shadow {
+ stroke: #d53;
}
-
-path.shadow.old-multipolygon,
-path.stroke.old-multipolygon {
- stroke-dasharray: 100, 5;
- stroke-linecap: butt;
+.ideditor .surface.tr path.shadow.related.only,
+.ideditor .surface.tr g.vertex.related.only .shadow {
+ stroke: #68f;
}
-path.stroke.tag-natural {
- stroke: rgb(182, 225, 153);
-}
-path.fill.tag-natural {
- stroke: rgba(182, 225, 153, 0.3);
- fill: rgba(182, 225, 153, 0.3);
-}
-.preset-icon-fill-area.tag-natural {
- border-color: rgb(182, 225, 153);
- background-color: rgba(182, 225, 153, 0.3);
-}
+/* 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
+*/
-path.stroke.tag-landuse,
-path.stroke.tag-natural-wood,
-path.stroke.tag-natural-tree,
-path.stroke.tag-natural-grassland,
-path.stroke.tag-natural-grass,
-path.stroke.tag-leisure-nature_reserve,
-path.stroke.tag-leisure-pitch,
-path.stroke.tag-leisure-park {
- stroke: rgb(140, 208, 95);
-}
-path.fill.tag-landuse,
-path.fill.tag-natural-wood,
-path.fill.tag-natural-tree,
-path.fill.tag-natural-grassland,
-path.fill.tag-natural-grass,
-path.fill.tag-leisure-nature_reserve,
-path.fill.tag-leisure-pitch,
-path.fill.tag-leisure-park {
- stroke: rgba(140, 208, 95, 0.3);
- fill: rgba(140, 208, 95, 0.3);
-}
-.preset-icon-fill-area.tag-landuse,
-.preset-icon-fill-area.tag-natural-wood,
-.preset-icon-fill-area.tag-natural-tree,
-.preset-icon-fill-area.tag-natural-grassland,
-.preset-icon-fill-area.tag-natural-grass,
-.preset-icon-fill-area.tag-leisure-nature_reserve,
-.preset-icon-fill-area.tag-leisure-pitch,
-.preset-icon-fill-area.tag-leisure-park {
- border-color: rgb(140, 208, 95);
- background-color: rgba(140, 208, 95, 0.3);
-}
-
-path.stroke.tag-amenity-swimming_pool,
-path.stroke.tag-leisure-swimming_pool,
-path.stroke.tag-natural-water,
-path.stroke.tag-landuse-aquaculture,
-path.stroke.tag-landuse-basin,
-path.stroke.tag-landuse-harbour,
-path.stroke.tag-landuse-reservoir {
- stroke: rgb(119, 211, 222);
-}
-path.fill.tag-amenity-swimming_pool,
-path.fill.tag-leisure-swimming_pool,
-path.fill.tag-landuse-aquaculture,
-path.fill.tag-landuse-basin,
-path.fill.tag-landuse-harbour,
-path.fill.tag-landuse-reservoir,
-path.fill.tag-natural-water {
- stroke: rgba(119, 211, 222, 0.3);
- fill: rgba(119, 211, 222, 0.3);
+/* Vertex visual diffs */
+.ideditor .highlight-edited g.points g.node.vertex.added > circle.shadow,
+.ideditor .highlight-edited g.points g.node.vertex.retagged > circle.shadow,
+.ideditor .highlight-edited g.points g.node.vertex.moved > circle.shadow {
+ fill-opacity: 0.8;
}
-.preset-icon-fill-area.tag-amenity-swimming_pool,
-.preset-icon-fill-area.tag-leisure-swimming_pool,
-.preset-icon-fill-area.tag-landuse-aquaculture,
-.preset-icon-fill-area.tag-landuse-basin,
-.preset-icon-fill-area.tag-landuse-harbour,
-.preset-icon-fill-area.tag-landuse-reservoir,
-.preset-icon-fill-area.tag-natural-water {
- border-color: rgb(119, 211, 222);
- background-color: rgba(119, 211, 222, 0.3);
-}
-
-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 {
- stroke: rgb(255, 255, 148);
-}
-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 {
- stroke: rgba(255, 255, 148, 0.15);
- fill: rgba(255, 255, 148, 0.15);
-}
-.preset-icon-fill-area.tag-amenity-childcare,
-.preset-icon-fill-area.tag-amenity-kindergarten,
-.preset-icon-fill-area.tag-amenity-school,
-.preset-icon-fill-area.tag-amenity-college,
-.preset-icon-fill-area.tag-amenity-university {
- border-color: rgb(232, 232, 0);
- background-color: rgba(255, 255, 148, 0.15);
-}
-
-path.stroke.tag-landuse-residential {
- stroke: rgb(196, 189, 25);
+.ideditor .highlight-edited g.points g.node.vertex.added > circle.shadow {
+ fill: rgb(133, 255, 103);
}
-path.fill.tag-landuse-residential {
- stroke: rgba(196, 189, 25, 0.3);
- fill: rgba(196, 189, 25, 0.3);
+.ideditor .highlight-edited g.points g.node.vertex.retagged > circle.shadow {
+ fill: #fcde5a;
}
-.preset-icon-fill-area.tag-landuse-residential {
- border-color: rgb(196, 189, 25);
- background: rgba(196, 189, 25, 0.3);
+.ideditor .highlight-edited g.points g.node.vertex.moved > circle.shadow {
+ fill: rgb(255, 126, 46);
}
-path.stroke.tag-landuse-retail,
-path.stroke.tag-landuse-commercial {
- stroke: rgb(214, 136, 26);
-}
-path.fill.tag-landuse-retail,
-path.fill.tag-landuse-commercial {
- stroke: rgba(214, 136, 26, 0.3);
- fill: rgba(214, 136, 26, 0.3);
-}
-.preset-icon-fill-area.tag-landuse-retail,
-.preset-icon-fill-area.tag-landuse-commercial {
- border-color: rgb(214, 136, 26);
- background-color: rgba(214, 136, 26, 0.3);
+/* Point visual diffs */
+.ideditor .highlight-edited g.points g.node.point.added > path.shadow,
+.ideditor .highlight-edited g.points g.node.point.retagged > path.shadow,
+.ideditor .highlight-edited g.points g.node.point.moved > path.shadow {
+ stroke-opacity: 0.8;
+ stroke-width: 10;
}
-
-path.stroke.tag-landuse-industrial,
-path.stroke.tag-power-plant {
- stroke: rgb(228, 164, 245);
+.ideditor .highlight-edited g.points g.node.point.added > path.shadow {
+ stroke: rgb(133, 255, 103);
}
-path.fill.tag-landuse-industrial,
-path.fill.tag-power-plant {
- stroke: rgba(228, 164, 245, 0.3);
- fill: rgba(228, 164, 245, 0.3);
+.ideditor .highlight-edited g.points g.node.point.retagged > path.shadow {
+ stroke: #fcde5a;
}
-.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);
+.ideditor .highlight-edited g.points g.node.point.moved > path.shadow {
+ stroke: rgb(255, 126, 46);
}
-path.stroke.tag-natural-bare_rock,
-path.stroke.tag-natural-scree,
-path.stroke.tag-landuse-railway,
-path.stroke.tag-landuse-quarry {
- stroke: rgb(166, 149, 123);
+/* 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
+*/
+.ideditor .highlight-edited g.lines > path.line.segment-edited,
+.ideditor .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;
}
-path.fill.tag-natural-bare_rock,
-path.fill.tag-natural-scree,
-path.fill.tag-landuse-railway,
-path.fill.tag-landuse-quarry {
- stroke: rgba(166, 149, 123, 0.2);
- fill: rgba(166, 149, 123, 0.2);
+
+/* Entire line/area visual diffs */
+.ideditor .highlight-edited path.line.shadow.added,
+.ideditor .highlight-edited path.line.shadow.retagged,
+.ideditor .highlight-edited path.line.shadow.geometry-edited,
+.ideditor .highlight-edited path.area.shadow.added,
+.ideditor .highlight-edited path.area.shadow.retagged,
+.ideditor .highlight-edited path.area.shadow.geometry-edited {
+ stroke-opacity: 0.6;
}
-.preset-icon-fill-area.tag-natural-bare_rock,
-.preset-icon-fill-area.tag-natural-scree,
-.preset-icon-fill-area.tag-landuse-railway,
-.preset-icon-fill-area.tag-landuse-quarry {
- border-color: rgb(166, 149, 123);
- background-color: rgba(166, 149, 123, 0.2);
+.ideditor .highlight-edited.fill-wireframe path.line.shadow.added,
+.ideditor .highlight-edited.fill-wireframe path.line.shadow.retagged,
+.ideditor .highlight-edited.fill-wireframe path.line.shadow.geometry-edited,
+.ideditor .highlight-edited.fill-wireframe path.area.shadow.added,
+.ideditor .highlight-edited.fill-wireframe path.area.shadow.retagged,
+.ideditor .highlight-edited.fill-wireframe path.area.shadow.geometry-edited {
+ stroke-width: 3;
}
-
-path.stroke.tag-landuse-landfill {
- stroke: rgb(255, 153, 51);
+.ideditor .highlight-edited path.line.shadow.added,
+.ideditor .highlight-edited path.area.shadow.added {
+ stroke: rgb(133, 255, 103);
}
-path.fill.tag-landuse-landfill {
- stroke: rgba(255, 153, 51, 0.2);
- fill: rgba(255, 153, 51, 0.2);
+.ideditor .highlight-edited path.area.shadow.retagged,
+.ideditor .highlight-edited path.line.shadow.retagged {
+ stroke: #fcde5a;
}
-.preset-icon-fill-area.tag-landuse-landfill {
- border-color: rgb(255, 153, 51);
- background-color: rgba(255, 153, 51, 0.2);
+.ideditor .highlight-edited path.line.shadow.geometry-edited,
+.ideditor .highlight-edited path.area.shadow.geometry-edited {
+ stroke: rgb(255, 126, 46);
}
-.pattern-color-construction {
- fill: rgba(196, 189, 25, 0.2);
+/* Default - light gray */
+.ideditor path.area.stroke {
+ stroke: rgb(170, 170, 170);
+ stroke-width: 1;
}
-path.stroke.tag-landuse.tag-status,
-path.stroke.tag-landuse-construction {
- stroke: rgb(196, 189, 25);
+.ideditor path.area.fill {
+ stroke-width: 0;
+ stroke: rgba(255, 255, 255, 0.3);
+ fill: rgba(255, 255, 255, 0.3);
+ fill-rule: evenodd;
}
-.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);
+.ideditor .preset-icon-fill path.fill {
+ stroke: rgb(170, 170, 170);
+ fill: rgba(170, 170, 170, 0.3);
}
-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);
+.ideditor path.shadow.old-multipolygon,
+.ideditor path.stroke.old-multipolygon {
+ stroke-dasharray: 100, 5;
+ stroke-linecap: butt;
}
-.pattern-color-wetland {
- fill: rgba(182, 225, 153, 0.2);
+
+/* Green things */
+.ideditor path.stroke.tag-barrier-hedge,
+.ideditor path.stroke.tag-landuse-flowerbed,
+.ideditor path.stroke.tag-landuse-forest,
+.ideditor path.stroke.tag-landuse-grass,
+.ideditor path.stroke.tag-landuse-recreation_ground,
+.ideditor path.stroke.tag-landuse-village_green,
+.ideditor path.stroke.tag-leisure-garden,
+.ideditor path.stroke.tag-leisure-golf_course,
+.ideditor path.stroke.tag-leisure-nature_reserve,
+.ideditor path.stroke.tag-leisure-park,
+.ideditor path.stroke.tag-leisure-pitch,
+.ideditor path.stroke.tag-leisure-track,
+.ideditor path.stroke.tag-natural,
+.ideditor path.stroke.tag-natural-wood {
+ stroke: rgb(140, 208, 95);
}
-path.stroke.tag-natural-wetland {
- stroke: rgb(182, 225, 153);
+.ideditor path.fill.tag-barrier-hedge,
+.ideditor path.fill.tag-landuse-flowerbed,
+.ideditor path.fill.tag-landuse-forest,
+.ideditor path.fill.tag-landuse-grass,
+.ideditor path.fill.tag-landuse-recreation_ground,
+.ideditor path.fill.tag-landuse-village_green,
+.ideditor path.fill.tag-leisure-garden,
+.ideditor path.fill.tag-leisure-golf_course,
+.ideditor path.fill.tag-leisure-nature_reserve,
+.ideditor path.fill.tag-leisure-park,
+.ideditor path.fill.tag-leisure-pitch,
+.ideditor path.fill.tag-leisure-track,
+.ideditor path.fill.tag-natural,
+.ideditor path.fill.tag-natural-wood {
+ stroke: rgba(140, 208, 95, 0.3);
+ fill: rgba(140, 208, 95, 0.3);
}
-.preset-icon-fill-area.tag-natural-wetland {
- border-color: rgb(182, 225, 153);
- background-color: rgba(182, 225, 153, 0.2);
+.ideditor .pattern-color-forest,
+.ideditor .pattern-color-forest_broadleaved,
+.ideditor .pattern-color-forest_needleleaved,
+.ideditor .pattern-color-forest_leafless,
+.ideditor .pattern-color-wood,
+.ideditor .pattern-color-grass {
+ fill: rgba(140, 208, 95, 0.3);
}
-.pattern-color-meadow {
- fill: rgba(182, 225, 153, 0.2);
+
+/* Blue things */
+.ideditor path.stroke.tag-amenity-fountain,
+.ideditor path.stroke.tag-leisure-swimming_pool,
+.ideditor path.stroke.tag-natural-bay,
+.ideditor path.stroke.tag-natural-water {
+ stroke: rgb(119, 211, 222);
}
-path.stroke.tag-landuse-meadow {
- stroke: rgb(182, 225, 153);
+.ideditor path.fill.tag-amenity-fountain,
+.ideditor path.fill.tag-leisure-swimming_pool,
+.ideditor path.fill.tag-natural-bay,
+.ideditor path.fill.tag-natural-water {
+ stroke: rgba(119, 211, 222, 0.3);
+ fill: rgba(119, 211, 222, 0.3);
}
-.preset-icon-fill-area.tag-landuse-meadow {
- border-color: rgb(182, 225, 153);
- background-color: rgba(182, 225, 153, 0.2);
+.ideditor .pattern-color-waves,
+.ideditor .pattern-color-water_standing,
+.ideditor .pattern-color-pond {
+ fill: rgba(119, 211, 222, 0.3);
}
-.pattern-color-beach,
-.pattern-color-sand {
- fill: rgba(255, 255, 126, 0.2);
+
+/* Yellow things */
+.ideditor path.stroke.tag-leisure-pitch.tag-sport-beachvolleyball,
+.ideditor path.stroke.tag-leisure-pitch.tag-sport-baseball,
+.ideditor path.stroke.tag-leisure-pitch.tag-sport-softball,
+.ideditor path.stroke.tag-leisure-track,
+.ideditor path.stroke.tag-natural-beach,
+.ideditor path.stroke.tag-natural-sand,
+.ideditor path.stroke.tag-natural-scrub,
+.ideditor path.stroke.tag-amenity-childcare,
+.ideditor path.stroke.tag-amenity-kindergarten,
+.ideditor path.stroke.tag-amenity-school,
+.ideditor path.stroke.tag-amenity-college,
+.ideditor path.stroke.tag-amenity-university,
+.ideditor path.stroke.tag-amenity-research_institute {
+ stroke: rgba(255, 255, 148, 0.75);
+}
+.ideditor path.fill.tag-leisure-pitch.tag-sport-beachvolleyball,
+.ideditor path.fill.tag-leisure-pitch.tag-sport-baseball,
+.ideditor path.fill.tag-leisure-pitch.tag-sport-softball,
+.ideditor path.fill.tag-leisure-track,
+.ideditor path.fill.tag-natural-beach,
+.ideditor path.fill.tag-natural-sand,
+.ideditor path.fill.tag-natural-scrub,
+.ideditor path.fill.tag-amenity-childcare,
+.ideditor path.fill.tag-amenity-kindergarten,
+.ideditor path.fill.tag-amenity-school,
+.ideditor path.fill.tag-amenity-college,
+.ideditor path.fill.tag-amenity-university,
+.ideditor path.fill.tag-amenity-research_institute {
+ stroke: rgba(255, 255, 148, 0.25);
+ fill: rgba(255, 255, 148, 0.25);
+}
+.ideditor .preset-icon-fill path.area.stroke.tag-leisure-pitch.tag-sport-beachvolleyball,
+.ideditor .preset-icon-fill path.area.stroke.tag-leisure-pitch.tag-sport-baseball,
+.ideditor .preset-icon-fill path.area.stroke.tag-leisure-pitch.tag-sport-softball,
+.ideditor .preset-icon-fill path.area.stroke.tag-leisure-track,
+.ideditor .preset-icon-fill path.area.stroke.tag-natural-beach,
+.ideditor .preset-icon-fill path.area.stroke.tag-natural-sand,
+.ideditor .preset-icon-fill path.area.stroke.tag-natural-scrub,
+.ideditor .preset-icon-fill path.area.stroke.tag-amenity-childcare,
+.ideditor .preset-icon-fill path.area.stroke.tag-amenity-kindergarten,
+.ideditor .preset-icon-fill path.area.stroke.tag-amenity-school,
+.ideditor .preset-icon-fill path.area.stroke.tag-amenity-college,
+.ideditor .preset-icon-fill path.area.stroke.tag-amenity-university,
+.ideditor .preset-icon-fill path.area.stroke.tag-amenity-research_institute {
+ stroke: rgb(232, 232, 0);
+}
+.ideditor .pattern-color-beach,
+.ideditor .pattern-color-sand,
+.ideditor .pattern-color-scrub {
+ fill: rgba(255, 255, 148, 0.2);
+}
+
+
+/* Gold things */
+.ideditor path.stroke.tag-landuse-residential,
+.ideditor path.stroke.tag-status-construction {
+ stroke: rgb(196, 189, 25);
}
-path.stroke.tag-natural-beach,
-path.stroke.tag-natural-sand {
- stroke: rgb(255, 255, 126);
+.ideditor path.fill.tag-landuse-residential,
+.ideditor path.fill.tag-status-construction {
+ stroke: rgba(196, 189, 25, 0.3);
+ fill: rgba(196, 189, 25, 0.3);
}
-.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);
+.ideditor .pattern-color-construction {
+ fill: rgba(196, 189, 25, 0.3);
}
-.pattern-color-scrub {
- fill: rgba(219, 240, 139, 0.2);
+
+/* Orange things */
+.ideditor path.stroke.tag-landuse-retail,
+.ideditor path.stroke.tag-landuse-commercial,
+.ideditor path.stroke.tag-landuse-landfill,
+.ideditor path.stroke.tag-military,
+.ideditor path.stroke.tag-landuse-military {
+ stroke: rgb(214, 136, 26);
}
-path.stroke.tag-natural-scrub {
- stroke: rgb(219, 240, 139);
+.ideditor path.fill.tag-landuse-retail,
+.ideditor path.fill.tag-landuse-commercial,
+.ideditor path.fill.tag-landuse-landfill,
+.ideditor path.fill.tag-military,
+.ideditor path.fill.tag-landuse-military {
+ stroke: rgba(214, 136, 26, 0.3);
+ fill: rgba(214, 136, 26, 0.3);
}
-.preset-icon-fill-area.tag-natural-scrub {
- border-color: rgb(219, 240, 139);
- background-color: rgba(219, 240, 139, 0.2);
+.ideditor .pattern-color-landfill {
+ fill: rgba(214, 136, 26, 0.3);
}
-.pattern-color-farm,
-.pattern-color-farmland {
- fill: rgba(140, 208, 95, 0.2);
-}
-path.stroke.tag-landuse-farm,
-path.stroke.tag-landuse-farmland {
- stroke: rgb(140, 208, 95);
+
+/* Pink things */
+.ideditor path.stroke.tag-landuse-industrial,
+.ideditor path.stroke.tag-power-plant {
+ stroke: rgb(228, 164, 245);
}
-.preset-icon-fill-area.tag-landuse-farm,
-.preset-icon-fill-area.tag-landuse-farmland {
- background-color: rgba(140, 208, 95, 0.2);
+.ideditor path.fill.tag-landuse-industrial,
+.ideditor path.fill.tag-power-plant {
+ stroke: rgba(228, 164, 245, 0.3);
+ fill: rgba(228, 164, 245, 0.3);
}
-path.stroke.tag-landuse-farmyard {
+
+/* Teal things */
+.ideditor path.stroke.tag-natural-wetland {
+ stroke: rgb(153, 225, 170);
+}
+.ideditor path.fill.tag-natural-wetland {
+ stroke: rgba(153, 225, 170, 0.3);
+ fill: rgba(153, 225, 170, 0.3);
+}
+.ideditor .preset-icon-fill path.area.fill.tag-natural-wetland {
+ fill: rgba(153, 225, 170, 0.2);
+}
+.ideditor .pattern-color-wetland,
+.ideditor .pattern-color-wetland_marsh,
+.ideditor .pattern-color-wetland_swamp,
+.ideditor .pattern-color-wetland_bog,
+.ideditor .pattern-color-wetland_reedbed {
+ fill: rgba(153, 225, 170, 0.3);
+}
+
+
+/* Light Green things */
+.ideditor path.stroke.tag-landuse-cemetery,
+.ideditor path.stroke.tag-landuse-farmland,
+.ideditor path.stroke.tag-landuse-grass.tag-golf-green,
+.ideditor path.stroke.tag-landuse-meadow,
+.ideditor path.stroke.tag-landuse-orchard,
+.ideditor path.stroke.tag-landuse-vineyard {
+ stroke: rgb(191, 232, 63);
+}
+.ideditor path.fill.tag-landuse-cemetery,
+.ideditor path.fill.tag-landuse-farmland,
+.ideditor path.fill.tag-landuse-grass.tag-golf-green,
+.ideditor path.fill.tag-landuse-meadow,
+.ideditor path.fill.tag-landuse-orchard,
+.ideditor path.fill.tag-landuse-vineyard {
+ stroke: rgba(191, 232, 63, 0.3);
+ fill: rgba(191, 232, 63, 0.3);
+}
+.ideditor .preset-icon-fill path.area.fill.tag-landuse-cemetery,
+.ideditor .preset-icon-fill path.area.fill.tag-landuse-farmland,
+.ideditor .preset-icon-fill path.area.fill.tag-landuse-grass.tag-golf-green,
+.ideditor .preset-icon-fill path.area.fill.tag-landuse-meadow,
+.ideditor .preset-icon-fill path.area.fill.tag-landuse-orchard,
+.ideditor .preset-icon-fill path.area.fill.tag-landuse-vineyard {
+ fill: rgba(191, 232, 63, 0.4);
+}
+.ideditor .pattern-color-cemetery,
+.ideditor .pattern-color-cemetery_buddhist,
+.ideditor .pattern-color-cemetery_christian,
+.ideditor .pattern-color-cemetery_jewish,
+.ideditor .pattern-color-cemetery_muslim,
+.ideditor .pattern-color-farmland,
+.ideditor .pattern-color-golf_green,
+.ideditor .pattern-color-meadow,
+.ideditor .pattern-color-orchard,
+.ideditor .pattern-color-vineyard {
+ fill: rgba(191, 232, 63, 0.3);
+}
+
+
+/* Tan things */
+.ideditor path.stroke.tag-landuse-farmyard {
stroke: rgb(245, 220, 186);
}
-path.fill.tag-landuse-farmyard {
+.ideditor 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(226, 177, 111);
- background: rgba(245, 220, 186, 0.3);
+.ideditor .preset-icon-fill path.area.stroke.tag-landuse-farmyard {
+ stroke: rgb(226, 177, 111);
+}
+.ideditor .pattern-color-farmyard {
+ fill: rgba(245, 220, 186, 0.3);
}
-.pattern-color-cemetery,
-.pattern-color-orchard {
- fill: rgba(140, 208, 95, 0.2);
+
+/* Dark Gray things */
+.ideditor path.stroke.tag-amenity-parking,
+.ideditor path.stroke.tag-landuse-railway,
+.ideditor path.stroke.tag-landuse-quarry,
+.ideditor path.stroke.tag-leisure-pitch.tag-sport-basketball,
+.ideditor path.stroke.tag-leisure-pitch.tag-sport-skateboard,
+.ideditor path.stroke.tag-man_made-adit,
+.ideditor path.stroke.tag-man_made-groyne,
+.ideditor path.stroke.tag-man_made-breakwater,
+.ideditor path.stroke.tag-natural-bare_rock,
+.ideditor path.stroke.tag-natural-cave_entrance,
+.ideditor path.stroke.tag-natural-cliff,
+.ideditor path.stroke.tag-natural-rock,
+.ideditor path.stroke.tag-natural-scree,
+.ideditor path.stroke.tag-natural-stone,
+.ideditor path.stroke.tag-natural-shingle,
+.ideditor path.stroke.tag-waterway-dam,
+.ideditor path.stroke.tag-waterway-weir {
+ stroke: rgb(170, 170, 170);
}
-path.stroke.tag-landuse-cemetery,
-path.stroke.tag-landuse-orchard {
- stroke: rgb(140, 208, 95);
+.ideditor path.fill.tag-amenity-parking,
+.ideditor path.fill.tag-landuse-railway,
+.ideditor path.fill.tag-landuse-quarry,
+.ideditor path.fill.tag-leisure-pitch.tag-sport-basketball,
+.ideditor path.fill.tag-leisure-pitch.tag-sport-skateboard,
+.ideditor path.fill.tag-man_made-adit,
+.ideditor path.fill.tag-man_made-groyne,
+.ideditor path.fill.tag-man_made-breakwater,
+.ideditor path.fill.tag-natural-bare_rock,
+.ideditor path.fill.tag-natural-cliff,
+.ideditor path.fill.tag-natural-cave_entrance,
+.ideditor path.fill.tag-natural-rock,
+.ideditor path.fill.tag-natural-scree,
+.ideditor path.fill.tag-natural-stone,
+.ideditor path.fill.tag-natural-shingle,
+.ideditor path.fill.tag-waterway-dam,
+.ideditor path.fill.tag-waterway-weir {
+ stroke: rgba(140, 140, 140, 0.5);
+ fill: rgba(140, 140, 140, 0.5);
+}
+.ideditor .pattern-color-quarry {
+ fill: rgba(140, 140, 140, 0.5);
+}
+
+
+/* Light gray overrides */
+.ideditor path.stroke.tag-natural-cave_entrance,
+.ideditor path.stroke.tag-natural-glacier {
+ stroke: rgb(170, 170, 170);
}
-.preset-icon-fill-area.tag-landuse-cemetery,
-.preset-icon-fill-area.tag-landuse-orchard {
- background-color: rgba(140, 208, 95, 0.2);
+.ideditor path.fill.tag-natural-cave_entrance,
+.ideditor path.fill.tag-natural-glacier {
+ stroke: rgba(255, 255, 255, 0.3);
+ fill: rgba(255, 255, 255, 0.3);
}
-
-path.stroke.tag-amenity-parking {
+.ideditor .preset-icon-fill path.fill.tag-natural-cave_entrance,
+.ideditor .preset-icon-fill path.fill.tag-natural-glacier {
stroke: rgb(170, 170, 170);
-}
-path.fill.tag-amenity-parking {
- stroke: rgba(170, 170, 170, 0.3);
fill: rgba(170, 170, 170, 0.3);
}
-.preset-icon-fill-area.tag-amenity-parking {
- border-color: rgb(170, 170, 170);
- background-color: rgba(170, 170, 170, 0.3);
-}
+.ideditor preset-icon-container
-/* highways */
.preset-icon .icon.tag-highway.other-line {
color: #fff;
fill: #777;
}
-path.casing.tag-highway {
+.ideditor path.line.casing.tag-highway {
stroke: #444;
}
-path.stroke.tag-highway {
+.ideditor path.line.stroke.tag-highway {
stroke: #ccc;
}
-/* highway areas */
-
-path.stroke.area.tag-highway {
- stroke: #fff;
- stroke-dasharray: none;
- stroke-width: 2;
-}
-
/* wide highways */
-
-path.shadow.tag-highway {
+.ideditor path.line.shadow.tag-highway {
stroke-width: 20;
}
-path.casing.tag-highway {
+.ideditor path.line.casing.tag-highway {
stroke-width: 10;
}
-path.stroke.tag-highway {
+.ideditor path.line.stroke.tag-highway {
stroke-width: 8;
}
-
-.low-zoom path.shadow.tag-highway {
+.ideditor .low-zoom path.line.shadow.tag-highway {
stroke-width: 16;
}
-.low-zoom path.casing.tag-highway {
+.ideditor .low-zoom path.line.casing.tag-highway {
stroke-width: 7;
}
-.low-zoom path.stroke.tag-highway {
+.ideditor .low-zoom path.line.stroke.tag-highway {
stroke-width: 5;
}
-.preset-icon .icon.highway-motorway,
-.preset-icon .icon.highway-motorway-link {
+.ideditor .preset-icon .icon.tag-highway-motorway,
+.ideditor .preset-icon .icon.tag-highway-motorway_link {
color: #CF2081;
fill: #70372f;
}
-path.stroke.tag-highway-motorway,
-path.stroke.tag-highway-motorway_link,
-path.stroke.tag-motorway {
- stroke:#CF2081;
+.ideditor path.line.stroke.tag-highway-motorway,
+.ideditor path.line.stroke.tag-highway-motorway_link,
+.ideditor path.line.stroke.tag-motorway {
+ stroke: #CF2081;
}
-path.casing.tag-highway-motorway,
-path.casing.tag-highway-motorway_link,
-path.casing.tag-motorway {
- stroke:#70372f;
+.ideditor path.line.casing.tag-highway-motorway,
+.ideditor path.line.casing.tag-highway-motorway_link,
+.ideditor path.line.casing.tag-motorway {
+ stroke: #70372f;
}
-.preset-icon .icon.highway-trunk,
-.preset-icon .icon.highway-trunk-link {
+.ideditor .preset-icon .icon.tag-highway-trunk,
+.ideditor .preset-icon .icon.tag-highway-trunk_link {
color: #DD2F22;
fill: #70372f;
}
-path.stroke.tag-highway-trunk,
-path.stroke.tag-highway-trunk_link,
-path.stroke.tag-trunk {
- stroke:#DD2F22;
+.ideditor path.line.stroke.tag-highway-trunk,
+.ideditor path.line.stroke.tag-highway-trunk_link,
+.ideditor path.line.stroke.tag-trunk {
+ stroke: #DD2F22;
}
-path.casing.tag-highway-trunk,
-path.casing.tag-highway-trunk_link,
-path.casing.tag-trunk {
- stroke:#70372f;
+.ideditor path.line.casing.tag-highway-trunk,
+.ideditor path.line.casing.tag-highway-trunk_link,
+.ideditor path.line.casing.tag-trunk {
+ stroke: #70372f;
}
-.preset-icon .icon.highway-primary,
-.preset-icon .icon.highway-primary-link {
+.ideditor .preset-icon .icon.tag-highway-primary,
+.ideditor .preset-icon .icon.tag-highway-primary_link {
color: #F99806;
fill: #70372f;
}
-path.stroke.tag-highway-primary,
-path.stroke.tag-highway-primary_link,
-path.stroke.tag-primary {
- stroke:#F99806;
+.ideditor path.line.stroke.tag-highway-primary,
+.ideditor path.line.stroke.tag-highway-primary_link,
+.ideditor path.line.stroke.tag-primary {
+ stroke: #F99806;
}
-path.casing.tag-highway-primary,
-path.casing.tag-highway-primary_link,
-path.casing.tag-primary {
- stroke:#70372f;
+.ideditor path.line.casing.tag-highway-primary,
+.ideditor path.line.casing.tag-highway-primary_link,
+.ideditor path.line.casing.tag-primary {
+ stroke: #70372f;
}
-.preset-icon .icon.highway-secondary,
-.preset-icon .icon.highway-secondary-link {
+.ideditor .preset-icon .icon.tag-highway-secondary,
+.ideditor .preset-icon .icon.tag-highway-secondary_link {
color: #F3F312;
fill: #70372f;
}
-path.stroke.tag-highway-secondary,
-path.stroke.tag-highway-secondary_link,
-path.stroke.tag-secondary {
- stroke:#F3F312;
+.ideditor path.line.stroke.tag-highway-secondary,
+.ideditor path.line.stroke.tag-highway-secondary_link,
+.ideditor path.line.stroke.tag-secondary {
+ stroke: #F3F312;
}
-path.casing.tag-highway-secondary,
-path.casing.tag-highway-secondary_link,
-path.casing.tag-secondary {
- stroke:#70372f;
+.ideditor path.line.casing.tag-highway-secondary,
+.ideditor path.line.casing.tag-highway-secondary_link,
+.ideditor path.line.casing.tag-secondary {
+ stroke: #70372f;
}
-.preset-icon .icon.highway-tertiary,
-.preset-icon .icon.highway-tertiary-link {
+.ideditor .preset-icon .icon.tag-highway-tertiary,
+.ideditor .preset-icon .icon.tag-highway-tertiary_link {
color: #FFF9B3;
fill: #70372f;
}
-path.stroke.tag-highway-tertiary,
-path.stroke.tag-highway-tertiary_link,
-path.stroke.tag-tertiary {
- stroke:#FFF9B3;
+.ideditor path.line.stroke.tag-highway-tertiary,
+.ideditor path.line.stroke.tag-highway-tertiary_link,
+.ideditor path.line.stroke.tag-tertiary {
+ stroke: #FFF9B3;
}
-path.casing.tag-highway-tertiary,
-path.casing.tag-highway-tertiary_link,
-path.casing.tag-tertiary {
- stroke:#70372f;
+.ideditor path.line.casing.tag-highway-tertiary,
+.ideditor path.line.casing.tag-highway-tertiary_link,
+.ideditor path.line.casing.tag-tertiary {
+ stroke: #70372f;
}
-.legacy-carto .preset-icon .icon.highway-motorway,
-.legacy-carto .preset-icon .icon.highway-motorway-link {
+.ideditor .legacy-carto .preset-icon .icon.tag-highway-motorway,
+.ideditor .legacy-carto .preset-icon .icon.tag-highway-motorway_link {
color: #58a9ed;
fill: #2c5476;
}
-.legacy-carto path.stroke.tag-highway-motorway,
-.legacy-carto path.stroke.tag-highway-motorway_link,
-.legacy-carto path.stroke.tag-motorway {
- stroke:#58a9ed;
+.ideditor .legacy-carto path.line.stroke.tag-highway-motorway,
+.ideditor .legacy-carto path.line.stroke.tag-highway-motorway_link,
+.ideditor .legacy-carto path.line.stroke.tag-motorway {
+ stroke: #58a9ed;
}
-.legacy-carto path.casing.tag-highway-motorway,
-.legacy-carto path.casing.tag-highway-motorway_link,
-.legacy-carto path.casing.tag-motorway {
- stroke:#2c5476;
+.ideditor .legacy-carto path.line.casing.tag-highway-motorway,
+.ideditor .legacy-carto path.line.casing.tag-highway-motorway_link,
+.ideditor .legacy-carto path.line.casing.tag-motorway {
+ stroke: #2c5476;
}
-.legacy-carto .preset-icon .icon.highway-trunk,
-.legacy-carto .preset-icon .icon.highway-trunk-link {
+.ideditor .legacy-carto .preset-icon .icon.tag-highway-trunk,
+.ideditor .legacy-carto .preset-icon .icon.tag-highway-trunk_link {
color: #8cd05f;
fill: #46682f;
}
-.legacy-carto path.stroke.tag-highway-trunk,
-.legacy-carto path.stroke.tag-highway-trunk_link,
-.legacy-carto path.stroke.tag-trunk {
- stroke:#8cd05f;
+.ideditor .legacy-carto path.line.stroke.tag-highway-trunk,
+.ideditor .legacy-carto path.line.stroke.tag-highway-trunk_link,
+.ideditor .legacy-carto path.line.stroke.tag-trunk {
+ stroke: #8cd05f;
}
-.legacy-carto path.casing.tag-highway-trunk,
-.legacy-carto path.casing.tag-highway-trunk_link,
-.legacy-carto path.casing.tag-trunk {
- stroke:#46682f;
+.ideditor .legacy-carto path.line.casing.tag-highway-trunk,
+.ideditor .legacy-carto path.line.casing.tag-highway-trunk_link,
+.ideditor .legacy-carto path.line.casing.tag-trunk {
+ stroke: #46682f;
}
-.legacy-carto .preset-icon .icon.highway-primary,
-.legacy-carto .preset-icon .icon.highway-primary-link {
+.ideditor .legacy-carto .preset-icon .icon.tag-highway-primary,
+.ideditor .legacy-carto .preset-icon .icon.tag-highway-primary_link {
color: #e06d5f;
fill: #70372f;
}
-.legacy-carto path.stroke.tag-highway-primary,
-.legacy-carto path.stroke.tag-highway-primary_link,
-.legacy-carto path.stroke.tag-primary {
- stroke:#e06d5f;
+.ideditor .legacy-carto path.line.stroke.tag-highway-primary,
+.ideditor .legacy-carto path.line.stroke.tag-highway-primary_link,
+.ideditor .legacy-carto path.line.stroke.tag-primary {
+ stroke: #e06d5f;
}
-.legacy-carto path.casing.tag-highway-primary,
-.legacy-carto path.casing.tag-highway-primary_link,
-.legacy-carto path.casing.tag-primary {
- stroke:#70372f;
+.ideditor .legacy-carto path.line.casing.tag-highway-primary,
+.ideditor .legacy-carto path.line.casing.tag-highway-primary_link,
+.ideditor .legacy-carto path.line.casing.tag-primary {
+ stroke: #70372f;
}
-.legacy-carto .preset-icon .icon.highway-secondary,
-.legacy-carto .preset-icon .icon.highway-secondary-link {
+.ideditor .legacy-carto .preset-icon .icon.tag-highway-secondary,
+.ideditor .legacy-carto .preset-icon .icon.tag-highway-secondary_link {
color: #eab056;
fill: #75582b;
}
-.legacy-carto path.stroke.tag-highway-secondary,
-.legacy-carto path.stroke.tag-highway-secondary_link,
-.legacy-carto path.stroke.tag-secondary {
- stroke:#eab056;
+.ideditor .legacy-carto path.line.stroke.tag-highway-secondary,
+.ideditor .legacy-carto path.line.stroke.tag-highway-secondary_link,
+.ideditor .legacy-carto path.line.stroke.tag-secondary {
+ stroke: #eab056;
}
-.legacy-carto path.casing.tag-highway-secondary,
-.legacy-carto path.casing.tag-highway-secondary_link,
-.legacy-carto path.casing.tag-secondary {
- stroke:#75582b;
+.ideditor .legacy-carto path.line.casing.tag-highway-secondary,
+.ideditor .legacy-carto path.line.casing.tag-highway-secondary_link,
+.ideditor .legacy-carto path.line.casing.tag-secondary {
+ stroke: #75582b;
}
-.legacy-carto .preset-icon .icon.highway-tertiary,
-.legacy-carto .preset-icon .icon.highway-tertiary-link {
+.ideditor .legacy-carto .preset-icon .icon.tag-highway-tertiary,
+.ideditor .legacy-carto .preset-icon .icon.tag-highway-tertiary_link {
color: #ffff7e;
fill: #7f7f3f;
}
-.legacy-carto path.stroke.tag-highway-tertiary,
-.legacy-carto path.stroke.tag-highway-tertiary_link,
-.legacy-carto path.stroke.tag-tertiary {
- stroke:#ffff7e;
+.ideditor .legacy-carto path.line.stroke.tag-highway-tertiary,
+.ideditor .legacy-carto path.line.stroke.tag-highway-tertiary_link,
+.ideditor .legacy-carto path.line.stroke.tag-tertiary {
+ stroke: #ffff7e;
}
-.legacy-carto path.casing.tag-highway-tertiary,
-.legacy-carto path.casing.tag-highway-tertiary_link,
-.legacy-carto path.casing.tag-tertiary {
- stroke:#7f7f3f;
+.ideditor .legacy-carto path.line.casing.tag-highway-tertiary,
+.ideditor .legacy-carto path.line.casing.tag-highway-tertiary_link,
+.ideditor .legacy-carto path.line.casing.tag-tertiary {
+ stroke: #7f7f3f;
}
-.preset-icon .icon.highway-residential {
+.ideditor .preset-icon .icon.tag-highway-residential {
color: #fff;
fill: #444;
}
-path.stroke.tag-highway-residential,
-path.stroke.tag-residential {
- stroke:#fff;
+.ideditor path.line.stroke.tag-highway-residential,
+.ideditor path.line.stroke.tag-residential {
+ stroke: #fff;
}
-path.casing.tag-highway-residential,
-path.casing.tag-residential {
- stroke:#444;
+.ideditor path.line.casing.tag-highway-residential,
+.ideditor path.line.casing.tag-residential {
+ stroke: #444;
}
-.preset-icon .icon.highway-unclassified {
- color: #dcd9b9;
+.ideditor .preset-icon .icon.tag-highway-unclassified {
+ color: #dca;
fill: #444;
}
-path.stroke.tag-highway-unclassified,
-path.stroke.tag-unclassified {
- stroke:#dcd9b9;
+.ideditor path.line.stroke.tag-highway-unclassified,
+.ideditor path.line.stroke.tag-unclassified {
+ stroke: #dca;
}
-path.casing.tag-highway-unclassified,
-path.casing.tag-unclassified {
- stroke:#444;
+.ideditor path.line.casing.tag-highway-unclassified,
+.ideditor path.line.casing.tag-unclassified {
+ stroke: #444;
}
/* narrow highways */
-
-path.shadow.tag-highway-living_street,
-path.shadow.tag-highway-service,
-path.shadow.tag-highway-track,
-path.shadow.tag-highway-road,
-path.shadow.tag-living_street,
-path.shadow.tag-service,
-path.shadow.tag-track,
-path.shadow.tag-road {
+.ideditor path.line.shadow.tag-highway-living_street,
+.ideditor path.line.shadow.tag-highway-bus_guideway,
+.ideditor path.line.shadow.tag-highway-service,
+.ideditor path.line.shadow.tag-highway-track,
+.ideditor path.line.shadow.tag-highway-road {
stroke-width: 16;
}
-path.casing.tag-highway-living_street,
-path.casing.tag-highway-service,
-path.casing.tag-highway-track,
-path.casing.tag-highway-road,
-path.casing.tag-living_street,
-path.casing.tag-service,
-path.casing.tag-track,
-path.casing.tag-road {
+.ideditor path.line.casing.tag-highway-living_street,
+.ideditor path.line.casing.tag-highway-bus_guideway,
+.ideditor path.line.casing.tag-highway-service,
+.ideditor path.line.casing.tag-highway-track,
+.ideditor path.line.casing.tag-highway-road {
stroke-width: 7;
}
-path.stroke.tag-highway-living_street,
-path.stroke.tag-highway-service,
-path.stroke.tag-highway-track,
-path.stroke.tag-highway-road,
-path.stroke.tag-living_street,
-path.stroke.tag-service,
-path.stroke.tag-track,
-path.stroke.tag-road {
+.ideditor path.line.stroke.tag-highway-living_street,
+.ideditor path.line.stroke.tag-highway-bus_guideway,
+.ideditor path.line.stroke.tag-highway-service,
+.ideditor path.line.stroke.tag-highway-track,
+.ideditor path.line.stroke.tag-highway-road {
stroke-width: 5;
}
+.ideditor path.line.casing.tag-highway-service.tag-service-driveway {
+ stroke-width: 6.25;
+}
+.ideditor path.line.stroke.tag-highway-service.tag-service-driveway {
+ stroke-width: 4.25;
+}
-path.shadow.tag-highway-path,
-path.shadow.tag-highway-footway,
-path.shadow.tag-highway-cycleway,
-path.shadow.tag-highway-bridleway,
-path.shadow.tag-highway-corridor,
-path.shadow.tag-highway-pedestrian,
-path.shadow.tag-highway-steps,
-path.shadow.tag-path,
-path.shadow.tag-footway,
-path.shadow.tag-cycleway,
-path.shadow.tag-bridleway,
-path.shadow.tag-corridor,
-path.shadow.tag-pedestrian,
-path.shadow.tag-steps {
+.ideditor path.line.shadow.tag-highway-path,
+.ideditor path.line.shadow.tag-highway-footway,
+.ideditor path.line.shadow.tag-highway-cycleway,
+.ideditor path.line.shadow.tag-highway-bridleway,
+.ideditor path.line.shadow.tag-highway-corridor,
+.ideditor path.line.shadow.tag-highway-steps {
stroke-width: 16;
}
-path.casing.tag-highway-path,
-path.casing.tag-highway-footway,
-path.casing.tag-highway-cycleway,
-path.casing.tag-highway-bridleway,
-path.casing.tag-highway-corridor,
-path.casing.tag-highway-pedestrian,
-path.casing.tag-highway-steps,
-path.casing.tag-path,
-path.casing.tag-footway,
-path.casing.tag-cycleway,
-path.casing.tag-bridleway,
-path.casing.tag-corridor,
-path.casing.tag-pedestrian,
-path.casing.tag-steps {
+.ideditor path.line.casing.tag-highway-path,
+.ideditor path.line.casing.tag-highway-footway,
+.ideditor path.line.casing.tag-highway-cycleway,
+.ideditor path.line.casing.tag-highway-bridleway,
+.ideditor path.line.casing.tag-highway-corridor,
+.ideditor path.line.casing.tag-highway-steps {
stroke-width: 5;
}
-path.stroke.tag-highway-path,
-path.stroke.tag-highway-footway,
-path.stroke.tag-highway-cycleway,
-path.stroke.tag-highway-bridleway,
-path.stroke.tag-highway-corridor,
-path.stroke.tag-highway-pedestrian,
-path.stroke.tag-highway-steps,
-path.stroke.tag-path,
-path.stroke.tag-footway,
-path.stroke.tag-cycleway,
-path.stroke.tag-bridleway,
-path.stroke.tag-corridor,
-path.stroke.tag-pedestrian,
-path.stroke.tag-steps {
+.ideditor path.line.stroke.tag-highway-path,
+.ideditor path.line.stroke.tag-highway-footway,
+.ideditor path.line.stroke.tag-highway-cycleway,
+.ideditor path.line.stroke.tag-highway-bridleway,
+.ideditor path.line.stroke.tag-highway-corridor,
+.ideditor path.line.stroke.tag-highway-steps {
stroke-width: 3;
}
-.low-zoom path.shadow.tag-highway-living_street,
-.low-zoom path.shadow.tag-highway-service,
-.low-zoom path.shadow.tag-highway-track,
-.low-zoom path.shadow.tag-highway-road,
-.low-zoom path.shadow.tag-living_street,
-.low-zoom path.shadow.tag-service,
-.low-zoom path.shadow.tag-track,
-.low-zoom path.shadow.tag-road {
+.ideditor .low-zoom path.line.shadow.tag-highway-living_street,
+.ideditor .low-zoom path.line.shadow.tag-highway-bus_guideway,
+.ideditor .low-zoom path.line.shadow.tag-highway-service,
+.ideditor .low-zoom path.line.shadow.tag-highway-track,
+.ideditor .low-zoom path.line.shadow.tag-highway-road {
stroke-width: 12;
}
-.low-zoom path.casing.tag-highway-living_street,
-.low-zoom path.casing.tag-highway-service,
-.low-zoom path.casing.tag-highway-track,
-.low-zoom path.casing.tag-highway-road,
-.low-zoom path.casing.tag-living_street,
-.low-zoom path.casing.tag-service,
-.low-zoom path.casing.tag-track,
-.low-zoom path.casing.tag-road {
+.ideditor .low-zoom path.line.casing.tag-highway-living_street,
+.ideditor .low-zoom path.line.casing.tag-highway-bus_guideway,
+.ideditor .low-zoom path.line.casing.tag-highway-service,
+.ideditor .low-zoom path.line.casing.tag-highway-track,
+.ideditor .low-zoom path.line.casing.tag-highway-road {
stroke-width: 5;
}
-.low-zoom path.stroke.tag-highway-living_street,
-.low-zoom path.stroke.tag-highway-service,
-.low-zoom path.stroke.tag-highway-track,
-.low-zoom path.stroke.tag-highway-road,
-.low-zoom path.stroke.tag-living_street,
-.low-zoom path.stroke.tag-service,
-.low-zoom path.stroke.tag-track,
-.low-zoom path.stroke.tag-road {
+.ideditor .low-zoom path.line.stroke.tag-highway-living_street,
+.ideditor .low-zoom path.line.stroke.tag-highway-bus_guideway,
+.ideditor .low-zoom path.line.stroke.tag-highway-service,
+.ideditor .low-zoom path.line.stroke.tag-highway-track,
+.ideditor .low-zoom path.line.stroke.tag-highway-road {
stroke-width: 3;
}
+.ideditor .low-zoom path.line.casing.tag-highway-service.tag-service-driveway {
+ stroke-width: 4.25;
+}
+.ideditor .low-zoom path.line.stroke.tag-highway-service.tag-service-driveway {
+ stroke-width: 2.25;
+}
-.low-zoom path.shadow.tag-highway-path,
-.low-zoom path.shadow.tag-highway-footway,
-.low-zoom path.shadow.tag-highway-cycleway,
-.low-zoom path.shadow.tag-highway-bridleway,
-.low-zoom path.shadow.tag-highway-corridor,
-.low-zoom path.shadow.tag-highway-pedestrian,
-.low-zoom path.shadow.tag-highway-steps,
-.low-zoom path.shadow.tag-path,
-.low-zoom path.shadow.tag-footway,
-.low-zoom path.shadow.tag-cycleway,
-.low-zoom path.shadow.tag-bridleway,
-.low-zoom path.shadow.tag-corridor,
-.low-zoom path.shadow.tag-pedestrian,
-.low-zoom path.shadow.tag-steps {
+.ideditor .low-zoom path.line.shadow.tag-highway-path,
+.ideditor .low-zoom path.line.shadow.tag-highway-footway,
+.ideditor .low-zoom path.line.shadow.tag-highway-cycleway,
+.ideditor .low-zoom path.line.shadow.tag-highway-bridleway,
+.ideditor .low-zoom path.line.shadow.tag-highway-corridor,
+.ideditor .low-zoom path.line.shadow.tag-highway-steps {
stroke-width: 12;
}
-.low-zoom path.casing.tag-highway-path,
-.low-zoom path.casing.tag-highway-footway,
-.low-zoom path.casing.tag-highway-cycleway,
-.low-zoom path.casing.tag-highway-bridleway,
-.low-zoom path.casing.tag-highway-corridor,
-.low-zoom path.casing.tag-highway-pedestrian,
-.low-zoom path.casing.tag-highway-steps,
-.low-zoom path.casing.tag-path,
-.low-zoom path.casing.tag-footway,
-.low-zoom path.casing.tag-cycleway,
-.low-zoom path.casing.tag-bridleway,
-.low-zoom path.casing.tag-corridor,
-.low-zoom path.casing.tag-pedestrian,
-.low-zoom path.casing.tag-steps {
+.ideditor .low-zoom path.line.casing.tag-highway-path,
+.ideditor .low-zoom path.line.casing.tag-highway-footway,
+.ideditor .low-zoom path.line.casing.tag-highway-cycleway,
+.ideditor .low-zoom path.line.casing.tag-highway-bridleway,
+.ideditor .low-zoom path.line.casing.tag-highway-corridor,
+.ideditor .low-zoom path.line.casing.tag-highway-steps {
stroke-width: 3;
}
-.low-zoom path.stroke.tag-highway-path,
-.low-zoom path.stroke.tag-highway-footway,
-.low-zoom path.stroke.tag-highway-cycleway,
-.low-zoom path.stroke.tag-highway-bridleway,
-.low-zoom path.stroke.tag-highway-corridor,
-.low-zoom path.stroke.tag-highway-pedestrian,
-.low-zoom path.stroke.tag-highway-steps,
-.low-zoom path.stroke.tag-path,
-.low-zoom path.stroke.tag-footway,
-.low-zoom path.stroke.tag-cycleway,
-.low-zoom path.stroke.tag-bridleway,
-.low-zoom path.stroke.tag-corridor,
-.low-zoom path.stroke.tag-pedestrian,
-.low-zoom path.stroke.tag-steps {
+.ideditor .low-zoom path.line.stroke.tag-highway-path,
+.ideditor .low-zoom path.line.stroke.tag-highway-footway,
+.ideditor .low-zoom path.line.stroke.tag-highway-cycleway,
+.ideditor .low-zoom path.line.stroke.tag-highway-bridleway,
+.ideditor .low-zoom path.line.stroke.tag-highway-corridor,
+.ideditor .low-zoom path.line.stroke.tag-highway-steps {
stroke-width: 1;
}
-
-.preset-icon .icon.highway-living-street {
+/* living streets */
+.ideditor .preset-icon .icon.tag-highway-living-street {
color: #bbb;
fill: #ddd;
}
-path.stroke.tag-highway-living_street,
-path.stroke.tag-living_street {
+.ideditor path.line.stroke.tag-highway-living_street,
+.ideditor path.line.stroke.tag-living_street {
stroke: #ccc;
}
-path.casing.tag-highway-living_street,
-path.casing.tag-living_street {
+.ideditor path.line.casing.tag-highway-living_street,
+.ideditor path.line.casing.tag-living_street {
stroke: #fff;
}
-.preset-icon .icon.highway-footway.tag-highway-corridor,
-.preset-icon .icon.highway-footway.tag-highway-pedestrian {
+/* corridors */
+.ideditor .preset-icon .icon.tag-highway-corridor {
color: #8cd05f;
fill: #fff;
}
-path.stroke.tag-highway-corridor,
-path.stroke.tag-highway-pedestrian,
-path.stroke.tag-corridor,
-path.stroke.tag-pedestrian {
- stroke:#fff;
+.ideditor path.line.stroke.tag-highway-corridor,
+.ideditor path.line.stroke.tag-corridor {
+ stroke: #fff;
stroke-dasharray: 2, 8;
}
-.low-zoom path.stroke.tag-highway-corridor,
-.low-zoom path.stroke.tag-highway-pedestrian,
-.low-zoom path.stroke.tag-corridor,
-.low-zoom path.stroke.tag-pedestrian {
+.ideditor .low-zoom path.line.stroke.tag-highway-corridor,
+.ideditor .low-zoom path.line.stroke.tag-corridor {
stroke-dasharray: 1, 4;
}
-path.casing.tag-highway-corridor,
-path.casing.tag-highway-pedestrian,
-path.casing.tag-corridor,
-path.casing.tag-pedestrian,
-path.casing.tag-highway-corridor.tag-unpaved,
-path.casing.tag-highway-pedestrian.tag-unpaved,
-path.casing.tag-corridor.tag-unpaved,
-path.casing.tag-pedestrian.tag-unpaved {
+.ideditor path.line.casing.tag-highway-corridor,
+.ideditor path.line.casing.tag-corridor {
stroke: #8cd05f;
stroke-linecap: round;
stroke-dasharray: none;
}
-.preset-icon .icon.highway-road {
+/* pedestrian streets */
+.ideditor .preset-icon .icon.tag-highway-pedestrian {
+ color: #988;
+}
+.ideditor path.line.stroke.tag-highway-pedestrian,
+.ideditor path.line.stroke.tag-pedestrian {
+ stroke: #fff;
+ stroke-width: 3.5;
+ stroke-dasharray: 8, 8;
+ stroke-linecap: butt;
+}
+.ideditor .low-zoom path.line.stroke.tag-highway-pedestrian,
+.ideditor .low-zoom path.line.stroke.tag-pedestrian {
+ stroke-width: 2;
+ stroke-dasharray: 4, 4;
+}
+.ideditor path.line.casing.tag-highway-pedestrian,
+.ideditor path.line.casing.tag-pedestrian {
+ stroke: #988;
+ stroke-linecap: round;
+ stroke-dasharray: none;
+}
+.ideditor .preset-icon-container path.line.stroke.tag-highway-pedestrian {
+ stroke-dasharray: 12, 12;
+}
+
+/* unknown roads */
+.ideditor .preset-icon .icon.tag-highway-road {
color: #9e9e9e;
fill: #666;
}
-path.stroke.tag-highway-road,
-path.stroke.tag-road {
- stroke:#9e9e9e;
+.ideditor path.line.stroke.tag-highway-road,
+.ideditor path.line.stroke.tag-road {
+ stroke: #9e9e9e;
}
-path.casing.tag-highway-road,
-path.casing.tag-road {
- stroke:#666;
+.ideditor path.line.casing.tag-highway-road,
+.ideditor path.line.casing.tag-road {
+ stroke: #666;
}
-.preset-icon .icon.highway-service {
- color: #fff;
- fill: #666;
+/* service roads */
+.ideditor path.line.stroke.tag-highway-service,
+.ideditor path.line.stroke.tag-service {
+ stroke: #fff;
+}
+.ideditor path.line.casing.tag-highway-service,
+.ideditor path.line.casing.tag-service {
+ stroke: #666;
}
-path.stroke.tag-highway-service,
-path.stroke.tag-service {
- stroke:#fff;
+
+/* special service roads and bus guideways */
+/* with `service=* tag` (e.g. parking_aisle, alley, drive-through) */
+.ideditor path.line.stroke.tag-highway-bus_guideway,
+.ideditor path.line.stroke.tag-highway-service.tag-service,
+.ideditor path.line.stroke.tag-service.tag-service {
+ stroke: #dca;
}
-path.casing.tag-highway-service,
-path.casing.tag-service {
- stroke:#666;
+.ideditor path.line.casing.tag-highway-bus_guideway,
+.ideditor path.line.casing.tag-highway-service.tag-service,
+.ideditor path.line.casing.tag-service.tag-service {
+ stroke: #666;
}
-.preset-icon .icon.highway-track {
- color: #eaeaea;
- fill: #c5b59f;
+.ideditor path.line.stroke.tag-highway-service.tag-service-parking_aisle {
+ stroke: #cccac7;
+}
+.ideditor path.line.stroke.tag-highway-service.tag-service-driveway {
+ stroke: #fff6e4;
}
-path.stroke.tag-highway-track,
-path.stroke.tag-track {
+.ideditor path.line.stroke.tag-highway-service.tag-service-emergency_access {
+ stroke: #ddb2aa;
+}
+
+/* unmaintained track roads */
+.ideditor path.line.stroke.tag-highway-track,
+.ideditor path.line.stroke.tag-track {
stroke: #c5b59f;
}
-path.casing.tag-highway-track,
-path.casing.tag-track {
+.ideditor path.line.casing.tag-highway-track,
+.ideditor path.line.casing.tag-track {
stroke: #746f6f;
}
-path.stroke.tag-highway-path,
-path.stroke.tag-highway-footway,
-path.stroke.tag-highway-cycleway,
-path.stroke.tag-highway-bridleway {
+/* paths */
+.ideditor path.line.stroke.tag-highway-path,
+.ideditor path.line.stroke.tag-highway-footway,
+.ideditor path.line.stroke.tag-highway-cycleway,
+.ideditor path.line.stroke.tag-highway-bridleway {
stroke-linecap: butt;
stroke-dasharray: 6, 6;
}
-.low-zoom path.stroke.tag-highway-path,
-.low-zoom path.stroke.tag-highway-footway,
-.low-zoom path.stroke.tag-highway-cycleway,
-.low-zoom path.stroke.tag-highway-bridleway {
+.ideditor .low-zoom path.line.stroke.tag-highway-path,
+.ideditor .low-zoom path.line.stroke.tag-highway-footway,
+.ideditor .low-zoom path.line.stroke.tag-highway-cycleway,
+.ideditor .low-zoom path.line.stroke.tag-highway-bridleway {
stroke-linecap: butt;
stroke-dasharray: 3, 3;
}
-path.casing.tag-highway-path,
-path.casing.tag-highway-path.tag-unpaved {
- stroke: #c5b59f;
+/* style for features that should have highway=footway but don't yet */
+.ideditor path.line.stroke.tag-crossing,
+.ideditor path.line.stroke.tag-footway-access_aisle,
+.ideditor path.line.stroke.tag-public_transport-platform,
+.ideditor path.line.stroke.tag-highway-platform,
+.ideditor path.line.stroke.tag-railway-platform,
+.ideditor path.line.stroke.tag-man_made-pier {
+ stroke: #dca;
+}
+
+.ideditor path.line.casing.tag-highway-path,
+.ideditor path.line.casing.tag-highway-footway.tag-public_transport-platform,
+.ideditor path.line.casing.tag-highway-footway.tag-man_made-pier,
+.ideditor path.line.casing.tag-highway.tag-crossing,
+.ideditor path.line.casing.tag-highway.tag-footway-access_aisle {
+ stroke: #dca;
stroke-linecap: round;
stroke-dasharray: none;
}
-path.casing.tag-highway-footway,
-path.casing.tag-highway-cycleway,
-path.casing.tag-highway-bridleway,
-path.casing.tag-highway-footway.tag-unpaved,
-path.casing.tag-highway-cycleway.tag-unpaved,
-path.casing.tag-highway-bridleway.tag-unpaved {
+.ideditor path.line.casing.tag-highway-footway,
+.ideditor path.line.casing.tag-highway-cycleway,
+.ideditor path.line.casing.tag-highway-bridleway {
stroke: #fff;
stroke-linecap: round;
stroke-dasharray: none;
}
-.preset-icon .icon.category-path,
-.preset-icon .icon.highway-path {
- color: #746f6f;
- fill: #c5b59f;
+.ideditor .preset-icon .icon.tag-highway-path,
+.ideditor .preset-icon .icon.tag-highway-footway.tag-public_transport-platform,
+.ideditor .preset-icon .icon.tag-highway-footway.tag-man_made-pier {
+ color: #988;
+ fill: #dca;
}
-path.stroke.tag-highway-path {
- stroke: #746f6f;
+.ideditor path.line.stroke.tag-highway-path {
+ stroke: #988;
+}
+.ideditor path.line.stroke.tag-highway-path.tag-bridge-boardwalk {
+ stroke: #dca;
}
-.preset-icon .icon.tag-route-foot,
-.preset-icon .icon.tag-route-hiking,
-.preset-icon .icon.highway-footway {
- color: #ae8681;
+/* footways */
+.ideditor .preset-icon .icon.tag-route-foot,
+.ideditor .preset-icon .icon.tag-route-hiking,
+.ideditor .preset-icon .icon.tag-highway-footway {
+ color: #988;
fill: #fff;
}
-path.stroke.tag-highway-footway {
- stroke: #ae8681;
+.ideditor path.line.stroke.tag-highway-footway,
+.ideditor path.line.stroke.tag-highway_bus_stop,
+.ideditor .preset-icon-container path.casing.tag-highway-footway {
+ stroke: #988;
}
-
-.preset-icon .icon.highway-footway.tag-crossing {
- color: #444;
+.ideditor .preset-icon .icon.tag-highway-footway.tag-footway-sidewalk {
+ color: #d4b4b4;
}
-path.stroke.tag-highway-footway.tag-crossing {
- stroke: #444;
- stroke-dasharray: 6, 4;
+.ideditor path.stroke.tag-highway-footway.tag-footway-sidewalk,
+.ideditor .preset-icon-container path.casing.tag-highway-footway.tag-footway-sidewalk {
+ stroke: #d4b4b4;
}
-.low-zoom path.stroke.tag-highway-footway.tag-crossing {
- stroke-dasharray: 3, 2;
+.ideditor .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;
}
-.preset-icon .icon.tag-route-bicycle,
-.preset-icon .icon.highway-cycleway {
+/* cycleways */
+.ideditor .preset-icon .icon.tag-route-bicycle,
+.ideditor .preset-icon .icon.tag-highway-cycleway {
color: #58a9ed;
fill: #fff;
}
-path.stroke.tag-highway-cycleway {
+.ideditor path.line.stroke.tag-highway-cycleway,
+.ideditor .preset-icon-container path.casing.tag-highway-cycleway {
stroke: #58a9ed;
}
+.ideditor .preset-icon-container path.stroke.tag-highway-cycleway:not(.tag-crossing) {
+ stroke: #fff;
+}
-.preset-icon .icon.tag-route-horse,
-.preset-icon .icon.highway-bridleway {
+/* bridleways */
+.ideditor .preset-icon .icon.tag-route-horse,
+.ideditor .preset-icon .icon.tag-highway-bridleway {
color: #e06d5f;
fill: #fff;
}
-path.stroke.tag-highway-bridleway {
+.ideditor path.line.stroke.tag-highway-bridleway,
+.ideditor .preset-icon-container path.casing.tag-highway-bridleway {
stroke: #e06d5f;
}
+.ideditor .preset-icon-container path.stroke.tag-highway-bridleway {
+ stroke: #fff;
+}
+
+/* racetracks */
+.ideditor .preset-icon .icon.tag-leisure-track {
+ color: rgb(229, 184, 43);
+}
+.ideditor path.line.stroke.tag-leisure-track,
+.ideditor .preset-icon-container path.casing.tag-highway.tag-leisure-track {
+ stroke: rgb(229, 184, 43);
+}
+.ideditor .preset-icon-container path.line.stroke.tag-highway.tag-leisure-track {
+ stroke: #fff;
+}
-.preset-icon .icon.highway-steps {
+/* steps */
+.ideditor .preset-icon .icon.tag-highway-steps {
color: #81d25c;
fill: #fff;
}
-path.stroke.tag-highway-steps {
- stroke: #81d25c;
+.ideditor path.line.stroke.tag-highway-steps {
stroke-linecap: butt;
stroke-dasharray: 3, 3;
}
-.low-zoom path.stroke.tag-highway-steps {
+.ideditor .low-zoom path.line.stroke.tag-highway-steps {
stroke-dasharray: 2, 2;
}
-path.casing.tag-highway-steps,
-path.casing.tag-highway-steps.tag-unpaved {
+.ideditor path.line.casing.tag-highway-steps {
stroke: #fff;
stroke-linecap: round;
stroke-dasharray: none;
}
+.ideditor path.line.stroke.tag-highway-steps,
+.ideditor .preset-icon-container path.line.casing.tag-highway-steps {
+ stroke: #81d25c;
+}
+.ideditor .preset-icon-container path.line.stroke.tag-highway-steps {
+ stroke: #fff;
+}
-/* highway midpoints */
-g.midpoint.tag-highway-corridor .fill,
-g.midpoint.tag-highway-pedestrian .fill,
-g.midpoint.tag-highway-steps .fill,
-g.midpoint.tag-highway-path .fill,
-g.midpoint.tag-highway-footway .fill,
-g.midpoint.tag-highway-cycleway .fill,
-g.midpoint.tag-highway-bridleway .fill {
+/* crossings */
+.ideditor path.line.stroke.tag-highway.tag-crossing-unmarked {
+ stroke-dasharray: 6, 4;
+}
+.ideditor .low-zoom path.line.stroke.tag-highway.tag-crossing-unmarked {
+ stroke-dasharray: 3, 2;
+}
+.ideditor path.line.stroke.tag-highway.tag-crossing-marked {
+ stroke-dasharray: 6, 3;
+}
+.ideditor .low-zoom path.line.stroke.tag-highway.tag-crossing-marked {
+ stroke-dasharray: 3, 1.5;
+}
+.ideditor path.line.stroke.tag-highway-footway.tag-crossing-marked {
+ stroke: #4c4444;
+}
+.ideditor .preset-icon .icon.tag-highway-footway.tag-crossing-marked {
+ color: #4c4444;
+}
+.ideditor path.line.stroke.tag-highway-footway.tag-crossing-unmarked {
+ stroke: #776a6a;
+}
+.ideditor .preset-icon .icon.tag-highway-footway.tag-crossing-unmarked {
+ color: #776a6a;
+}
+.ideditor path.line.stroke.tag-highway-cycleway.tag-crossing-marked {
+ stroke: #446077;
+}
+.ideditor .preset-icon .icon.tag-highway-cycleway.tag-crossing-marked {
+ color: #446077;
+}
+
+.ideditor path.line.stroke.tag-highway.tag-footway-access_aisle {
+ stroke-dasharray: 4, 2;
+}
+.ideditor .low-zoom path.line.stroke.tag-highway.tag-footway-access_aisle,
+.ideditor .preset-icon-container path.stroke.tag-highway.tag-footway-access_aisle {
+ stroke-dasharray: 2.5, 1.5;
+}
+.ideditor path.line.stroke.tag-highway.tag-footway-access_aisle {
+ stroke: #4c4444;
+}
+.ideditor .preset-icon .icon.tag-highway.tag-footway-access_aisle {
+ color: #4c4444;
+}
+
+
+/* highway midpoints */
+.ideditor g.midpoint.tag-highway-corridor .fill,
+.ideditor g.midpoint.tag-highway-steps .fill,
+.ideditor g.midpoint.tag-highway-path .fill,
+.ideditor g.midpoint.tag-highway-footway .fill,
+.ideditor g.midpoint.tag-highway-cycleway .fill,
+.ideditor g.midpoint.tag-highway-bridleway .fill {
fill: #fff;
stroke: #333;
stroke-opacity: .8;
/* aeroways */
/* areas */
-path.stroke.area.tag-aeroway {
- stroke:#fff;
+.ideditor path.area.stroke.tag-aeroway,
+.ideditor .low-zoom path.area.stroke.tag-aeroway {
+ stroke: #fff;
stroke-dasharray: none;
- stroke-width: 2;
+ stroke-width: 1;
+}
+.ideditor path.area.fill.tag-aeroway-runway {
+ stroke: rgba(0, 0, 0, 0.6);
+ fill: rgba(0, 0, 0, 0.6);
}
+/* lines */
/* narrow aeroways (taxiway) */
-
-path.shadow.tag-aeroway-taxiway,
-path.shadow.tag-taxiway {
+.ideditor path.line.shadow.tag-aeroway-taxiway,
+.ideditor path.line.shadow.tag-taxiway {
stroke-width: 16;
}
-path.casing.tag-aeroway-taxiway,
-path.casing.tag-taxiway {
+.ideditor path.line.casing.tag-aeroway-taxiway,
+.ideditor path.line.casing.tag-taxiway {
stroke-width: 7;
}
-path.stroke.tag-aeroway-taxiway,
-path.stroke.tag-taxiway {
+.ideditor path.line.stroke.tag-aeroway-taxiway,
+.ideditor path.line.stroke.tag-taxiway {
stroke-width: 5;
}
-
-.low-zoom path.shadow.tag-aeroway-taxiway,
-.low-zoom path.shadow.tag-taxiway {
+.ideditor .low-zoom path.line.shadow.tag-aeroway-taxiway,
+.ideditor .low-zoom path.line.shadow.tag-taxiway {
stroke-width: 12;
}
-.low-zoom path.casing.tag-aeroway-taxiway,
-.low-zoom path.casing.tag-taxiway {
+.ideditor .low-zoom path.line.casing.tag-aeroway-taxiway,
+.ideditor .low-zoom path.line.casing.tag-taxiway {
stroke-width: 5;
}
-.low-zoom path.stroke.tag-aeroway-taxiway,
-.low-zoom path.stroke.tag-taxiway {
+.ideditor .low-zoom path.line.stroke.tag-aeroway-taxiway,
+.ideditor .low-zoom path.line.stroke.tag-taxiway {
stroke-width: 3;
}
-.preset-icon .icon.tag-aeroway-taxiway,
-.preset-icon .icon.tag-taxiway {
- color: #ff0;
- fill: #666;
-}
-path.stroke.tag-aeroway-taxiway,
-path.stroke.tag-taxiway {
+.ideditor path.line.stroke.tag-aeroway-taxiway,
+.ideditor path.line.stroke.tag-taxiway {
stroke: #ff0;
}
-path.casing.tag-aeroway-taxiway,
-path.casing.tag-taxiway {
+.ideditor path.line.casing.tag-aeroway-taxiway,
+.ideditor path.line.casing.tag-taxiway {
stroke: #666;
}
-
/* wide aeroways (runway) */
-
-.preset-icon .icon.tag-aeroway-runway,
-.preset-icon .icon.tag-runway {
+.ideditor .preset-icon .icon.tag-aeroway-runway,
+.ideditor .preset-icon .icon.tag-runway {
color: #444;
fill: #000;
}
-path.shadow.tag-aeroway-runway {
+.ideditor path.line.shadow.tag-aeroway-runway {
stroke-width: 20;
}
-path.casing.tag-aeroway-runway {
+.ideditor path.line.casing.tag-aeroway-runway {
stroke-width: 10;
stroke: #000;
stroke-linecap: square;
}
-path.stroke.tag-aeroway-runway {
+.ideditor path.line.stroke.tag-aeroway-runway {
stroke: #fff;
stroke-width: 2;
stroke-linecap: butt;
stroke-dasharray: 24, 48;
}
-
-.low-zoom path.shadow.tag-aeroway-runway {
+.ideditor .low-zoom path.line.shadow.tag-aeroway-runway {
stroke-width: 16;
}
-.low-zoom path.casing.tag-aeroway-runway {
+.ideditor .low-zoom path.line.casing.tag-aeroway-runway {
stroke-width: 7;
}
-.low-zoom path.stroke.tag-aeroway-runway {
+.ideditor .low-zoom path.line.stroke.tag-aeroway-runway {
stroke-width: 2;
stroke-dasharray: 12, 24;
}
-
-path.fill.tag-aeroway-runway {
- stroke: rgba(0, 0, 0, 0.6);
- fill: rgba(0, 0, 0, 0.6);
+.ideditor .preset-icon-container path.line.stroke.tag-aeroway-runway {
+ stroke-dasharray: 0, 14, 8, 14;
}
-
/* railways */
-.preset-icon .icon.tag-railway.other-line {
+/* defaults */
+.ideditor .preset-icon .icon.tag-railway.other-line {
color: #fff;
fill: #777;
}
-.preset-icon .icon.tag-railway {
+.ideditor .preset-icon .icon.tag-railway {
color: #555;
- fill: #eee;
}
+/* lines */
/* narrow widths */
-
-path.shadow.tag-railway {
+.ideditor path.line.shadow.tag-railway {
stroke-width: 16;
}
-path.casing.tag-railway {
+.ideditor path.line.casing.tag-railway {
stroke-width: 7;
}
-path.stroke.tag-railway {
+.ideditor path.line.stroke.tag-railway {
stroke-width: 2;
stroke-linecap: butt;
stroke-dasharray: 12,12;
}
-
-.low-zoom path.shadow.tag-railway {
+.ideditor .low-zoom path.line.shadow.tag-railway {
stroke-width: 12;
}
-.low-zoom path.casing.tag-railway {
+.ideditor .low-zoom path.line.casing.tag-railway {
stroke-width: 5;
}
-.low-zoom path.stroke.tag-railway {
+.ideditor .low-zoom path.line.stroke.tag-railway {
stroke-width: 2;
stroke-dasharray: 6,6;
}
+.ideditor .preset-icon-container path.line.stroke.tag-railway:not(.tag-status),
+.ideditor .preset-icon-container path.line.stroke.tag-railway.tag-status-disused {
+ stroke-dasharray: 6;
+}
+.ideditor path.line.casing.tag-railway.tag-railway-platform {
+ stroke-width: 0;
+}
+.ideditor path.line.stroke.tag-railway.tag-railway-platform {
+ stroke-dasharray: none;
+}
/* styles */
-
-path.casing.tag-railway {
+.ideditor path.line.casing.tag-railway {
stroke: #555;
}
-path.stroke.tag-railway {
+.ideditor path.line.stroke.tag-railway {
stroke: #eee;
}
-.preset-icon .icon.tag-railway-disused,
-.preset-icon .icon.tag-railway-abandoned {
+.ideditor .preset-icon .icon.tag-railway.tag-status {
color: #999;
- fill: #eee;
}
-path.casing.tag-railway-abandoned {
+.ideditor path.line.casing.tag-railway.tag-status {
stroke: #999;
}
-path.stroke.tag-railway-abandoned {
+.ideditor path.line.stroke.tag-railway.tag-status:not(.tag-service) {
stroke: #eee;
}
+.ideditor .preset-icon .icon.tag-railway.tag-status-disused {
+ color: #808080;
+}
+.ideditor path.line.casing.tag-railway.tag-status-disused {
+ stroke: #808080;
+}
-.preset-icon .icon.tag-railway-subway {
- color: #222;
- fill: #bbb;
-}
-path.casing.tag-railway-subway {
+.ideditor path.line.casing.tag-railway-subway {
stroke: #222;
}
-path.stroke.tag-railway-subway {
+.ideditor path.line.stroke.tag-railway-subway {
stroke: #bbb;
}
+/* waterways */
-
-path.casing.tag-railway-platform {
- stroke: none;
+/* defaults */
+.ideditor .preset-icon .icon.tag-waterway.other-line {
+ color: #7dd;
+ fill: #7dd;
}
-path.stroke.tag-railway-platform {
- stroke: #999;
- stroke-width: 4;
- stroke-dasharray: none;
+.ideditor .preset-icon .icon.tag-type-waterway:not(.tag-waterway-dam),
+.ideditor .preset-icon .icon.tag-waterway:not(.tag-waterway-dam) {
+ color: #7dd;
+ fill: #fff;
}
-.area.stroke.tag-railway {
+/* areas */
+.ideditor path.area.stroke.tag-waterway-dock,
+.ideditor path.area.stroke.tag-waterway-boatyard,
+.ideditor path.area.stroke.tag-waterway-fuel {
stroke: white;
stroke-width: 1;
- stroke-dasharray: none;
}
-.area.casing.tag-railway {
+.ideditor path.area.casing.tag-waterway-dock,
+.ideditor path.area.casing.tag-waterway-boatyard,
+.ideditor path.area.casing.tag-waterway-fuel {
stroke: none;
}
-/* waterways */
-
-.preset-icon .icon.tag-waterway.other-line {
- color: #77d3de;
- fill: #77d3de;
-}
-.preset-icon .icon.category-water,
-.preset-icon .icon.tag-route-ferry,
-.preset-icon .icon.tag-waterway {
- color: #77d3de;
- fill: #fff;
+.ideditor path.area.fill.tag-waterway-dock,
+.ideditor path.area.fill.tag-waterway-boatyard,
+.ideditor path.area.fill.tag-waterway-fuel {
+ stroke: rgba(255, 255, 255, 0.3);
+ fill: rgba(255, 255, 255, 0.3);
}
-path.fill.tag-waterway {
+/* lines */
+.ideditor path.line.fill.tag-waterway:not(.tag-waterway-dam) {
stroke: rgba(119, 211, 222, 0.3);
fill: rgba(119, 211, 222, 0.3);
}
-path.casing.tag-waterway {
- stroke: #3d6c71;
+.ideditor path.line.casing.tag-waterway:not(.tag-waterway-dam) {
+ stroke: #444;
}
-path.stroke.tag-waterway {
- stroke: #77d3de;
+.ideditor path.line.stroke.tag-waterway:not(.tag-waterway-dam) {
+ stroke: #7dd;
}
/* narrow waterways (default) */
-
-path.shadow.tag-waterway {
+.ideditor path.line.shadow.tag-waterway {
stroke-width: 16;
}
-path.casing.tag-waterway {
+.ideditor path.line.casing.tag-waterway {
stroke-width: 7;
}
-path.stroke.tag-waterway {
+.ideditor path.line.stroke.tag-waterway {
stroke-width: 5;
}
-.low-zoom path.shadow.tag-waterway {
+.ideditor .low-zoom path.line.shadow.tag-waterway {
stroke-width: 12;
}
-.low-zoom path.casing.tag-waterway {
+.ideditor .low-zoom path.line.casing.tag-waterway {
stroke-width: 5;
}
-.low-zoom path.stroke.tag-waterway {
+.ideditor .low-zoom path.line.stroke.tag-waterway {
stroke-width: 3;
}
/* wide waterways (river) */
-
-path.shadow.tag-waterway-river {
+.ideditor path.line.shadow.tag-waterway-river {
stroke-width: 20;
}
-path.casing.tag-waterway-river {
+.ideditor path.line.casing.tag-waterway-river {
stroke-width: 10;
}
-path.stroke.tag-waterway-river {
+.ideditor path.line.stroke.tag-waterway-river {
stroke-width: 8;
}
-.low-zoom path.shadow.tag-waterway-river {
+.ideditor .low-zoom path.line.shadow.tag-waterway-river {
stroke-width: 16;
}
-.low-zoom path.casing.tag-waterway-river {
+.ideditor .low-zoom path.line.casing.tag-waterway-river {
stroke-width: 7;
}
-.low-zoom path.stroke.tag-waterway-river {
+.ideditor .low-zoom path.line.stroke.tag-waterway-river {
stroke-width: 5;
}
/* ditch */
+.ideditor .preset-icon .icon.tag-waterway-ditch {
+ color: #39a;
+}
+.ideditor path.line.stroke.tag-waterway-ditch {
+ stroke: #39a;
+}
-.preset-icon .icon.tag-waterway-ditch {
- color: #8eabf3;
+/* narrow width miscellaneous things */
+.ideditor path.line.shadow.tag-aerialway,
+.ideditor path.line.shadow.tag-attraction-summer_toboggan,
+.ideditor path.line.shadow.tag-attraction-water_slide,
+.ideditor path.line.shadow.tag-golf-cartpath,
+.ideditor path.line.shadow.tag-man_made-pipeline,
+.ideditor path.line.shadow.tag-natural-tree_row,
+.ideditor path.line.shadow.tag-piste {
+ stroke-width: 16;
}
-path.stroke.tag-waterway-ditch {
- stroke: #8eabf3;
+.ideditor path.line.casing.tag-aerialway,
+.ideditor path.line.casing.tag-attraction-summer_toboggan,
+.ideditor path.line.casing.tag-attraction-water_slide,
+.ideditor path.line.casing.tag-golf-cartpath,
+.ideditor path.line.casing.tag-man_made-pipeline,
+.ideditor path.line.casing.tag-natural-tree_row,
+.ideditor path.line.casing.tag-piste {
+ stroke-width: 7;
+}
+.ideditor path.line.stroke.tag-aerialway,
+.ideditor path.line.stroke.tag-attraction-summer_toboggan,
+.ideditor path.line.stroke.tag-attraction-water_slide,
+.ideditor path.line.stroke.tag-golf-cartpath,
+.ideditor path.line.stroke.tag-man_made-pipeline,
+.ideditor path.line.stroke.tag-natural-tree_row,
+.ideditor path.line.stroke.tag-piste {
+ stroke-width: 5;
}
+.ideditor .low-zoom path.line.shadow.tag-aerialway,
+.ideditor .low-zoom path.line.shadow.tag-attraction-summer_toboggan,
+.ideditor .low-zoom path.line.shadow.tag-attraction-water_slide,
+.ideditor .low-zoom path.line.shadow.tag-golf-cartpath,
+.ideditor .low-zoom path.line.shadow.tag-man_made-pipeline,
+.ideditor .low-zoom path.line.shadow.tag-natural-tree_row,
+.ideditor .low-zoom path.line.shadow.tag-piste {
+ stroke-width: 12;
+}
+.ideditor .low-zoom path.line.casing.tag-aerialway,
+.ideditor .low-zoom path.line.casing.tag-attraction-summer_toboggan,
+.ideditor .low-zoom path.line.casing.tag-attraction-water_slide,
+.ideditor .low-zoom path.line.casing.tag-golf-cartpath,
+.ideditor .low-zoom path.line.casing.tag-man_made-pipeline,
+.ideditor .low-zoom path.line.casing.tag-natural-tree_row,
+.ideditor .low-zoom path.line.casing.tag-piste {
+ stroke-width: 5;
+}
+.ideditor .low-zoom path.line.stroke.tag-aerialway,
+.ideditor .low-zoom path.line.stroke.tag-attraction-summer_toboggan,
+.ideditor .low-zoom path.line.stroke.tag-attraction-water_slide,
+.ideditor .low-zoom path.line.stroke.tag-golf-cartpath,
+.ideditor .low-zoom path.line.stroke.tag-man_made-pipeline,
+.ideditor .low-zoom path.line.stroke.tag-natural-tree_row,
+.ideditor .low-zoom path.line.stroke.tag-piste {
+ stroke-width: 3;
+}
-/* waterway areas */
-path.area.stroke.tag-waterway-dock,
-path.area.stroke.tag-waterway-boatyard,
-path.area.stroke.tag-waterway-fuel {
- stroke: white;
- stroke-width: 1;
+/* ferry routes */
+.ideditor .preset-icon .icon.tag-route-ferry {
+ color: #58a9ed;
+ fill: #fff;
+}
+.ideditor path.line.shadow.tag-route-ferry {
+ stroke-width: 16;
+}
+.ideditor path.line.stroke.tag-route-ferry {
+ stroke-width: 3;
+ stroke-linecap: butt;
+ stroke-dasharray: 12,8;
+}
+.ideditor .low-zoom path.line.shadow.tag-route-ferry {
+ stroke-width: 12;
}
-path.area.casing.tag-waterway-dock,
-path.area.casing.tag-waterway-boatyard,
-path.area.casing.tag-waterway-fuel {
+.ideditor .low-zoom path.line.stroke.tag-route-ferry,
+.ideditor .preset-icon-container path.line.stroke.tag-route-ferry {
+ stroke-width: 2;
+ stroke-dasharray: 6,4;
+}
+.ideditor path.line.stroke.tag-route-ferry {
+ stroke: #58a9ed;
+}
+.ideditor path.line.casing.tag-route-ferry {
stroke: none;
}
-path.area.fill.tag-waterway-dock,
-path.area.fill.tag-waterway-boatyard,
-path.area.fill.tag-waterway-fuel {
- stroke: rgba(255, 255, 255, 0.3);
- fill: rgba(255, 255, 255, 0.3);
+
+
+/* aerialways */
+.ideditor path.line.stroke.tag-aerialway {
+ stroke: #c55;
+}
+.ideditor path.line.casing.tag-aerialway {
+ stroke: #444;
}
-/* power */
-.preset-icon .icon.tag-man_made-pipeline,
-.preset-icon .icon.tag-power {
+
+/* pistes */
+.ideditor path.line.stroke.tag-piste {
+ stroke: #a9d;
+}
+.ideditor path.line.casing.tag-piste {
+ stroke: #444;
+}
+
+
+/* Attractions */
+.ideditor path.line.stroke.tag-attraction-summer_toboggan {
+ stroke: #9e9e9e;
+}
+.ideditor path.line.casing.tag-attraction-summer_toboggan {
+ stroke: #666;
+}
+
+.ideditor path.line.stroke.tag-attraction-water_slide {
+ stroke: #aae0cb;
+}
+.ideditor path.line.casing.tag-attraction-water_slide {
+ stroke: #3d6c71;
+}
+
+
+/* golf cartpaths (like service roads) */
+.ideditor .preset-icon .icon.tag-golf-cartpath {
+ color: #dca;
+ fill: #666;
+}
+.ideditor path.line.stroke.tag-golf-cartpath {
+ stroke: #dca;
+}
+.ideditor path.line.casing.tag-golf-cartpath {
+ stroke: #666;
+}
+
+
+/* power and pipeline */
+.ideditor .preset-icon .icon.tag-man_made-pipeline,
+.ideditor .preset-icon .icon.tag-power {
color: #939393;
fill: #939393;
}
-path.stroke.tag-power {
+
+/* power */
+.ideditor path.line.stroke.tag-power {
stroke: #939393;
stroke-width: 2;
}
-path.casing.tag-power {
+.ideditor path.line.casing.tag-power {
stroke: none;
}
+/* pipeline */
+.ideditor path.line.stroke.tag-man_made-pipeline {
+ stroke: #cbd0d8;
+ stroke-linecap: butt;
+ stroke-dasharray: 80, 1.25;
+}
+.ideditor path.line.casing.tag-man_made-pipeline {
+ stroke: #666;
+}
+.ideditor .low-zoom path.line.stroke.tag-man_made-pipeline {
+ stroke-dasharray: 40, 1;
+}
+.ideditor .preset-icon-container path.line.stroke.tag-man_made-pipeline {
+ stroke-dasharray: 19, 1;
+}
+
+
/* boundaries */
-path.stroke.tag-boundary {
+.ideditor path.line.stroke.tag-boundary {
stroke: #fff;
stroke-width: 2;
stroke-linecap: butt;
stroke-dasharray: 20, 5, 5, 5;
}
-path.casing.tag-boundary {
- stroke: #82B5FE;
+.ideditor path.line.casing.tag-boundary {
+ stroke: #82b5fe;
stroke-width: 6;
}
-path.casing.tag-boundary-protected_area,
-path.casing.tag-boundary-national_park {
+.ideditor path.line.casing.tag-boundary-protected_area,
+.ideditor path.line.casing.tag-boundary-national_park {
stroke: #b0e298;
}
-/* barriers */
-path.stroke.tag-barrier {
+/* barriers and similar */
+.ideditor path.line.stroke.tag-barrier:not(.tag-barrier-hedge):not(.tag-waterway) {
stroke: #ddd;
+}
+.ideditor .preset-icon-container path.line.stroke.tag-barrier:not(.tag-barrier-hedge) {
+ stroke: rgb(170, 170, 170);
+}
+.ideditor path.line.casing.tag-natural,
+.ideditor path.line.casing.tag-barrier:not(.tag-waterway),
+.ideditor path.line.casing.tag-man_made-groyne,
+.ideditor path.line.casing.tag-man_made-breakwater {
+ stroke: none;
+}
+.ideditor path.line.stroke.tag-barrier:not(.tag-waterway),
+.ideditor path.line.stroke.tag-man_made-groyne,
+.ideditor path.line.stroke.tag-man_made-breakwater {
stroke-width: 3px;
stroke-linecap: round;
stroke-dasharray: 15, 5, 1, 5;
}
-.low-zoom path.stroke.tag-barrier {
+.ideditor .low-zoom path.line.stroke.tag-barrier:not(.tag-waterway),
+.ideditor .low-zoom path.line.stroke.tag-man_made-groyne,
+.ideditor .low-zoom path.line.stroke.tag-man_made-breakwater {
stroke-width: 2px;
stroke-linecap: butt;
stroke-dasharray: 8, 2, 2, 2;
}
+.ideditor .preset-icon-container path.line.stroke.tag-barrier,
+.ideditor .preset-icon-container path.line.stroke.tag-man_made-groyne,
+.ideditor .preset-icon-container path.line.stroke.tag-man_made-breakwater {
+ stroke-dasharray: 1, 4, 6, 4;
+}
+.ideditor path.line.stroke.tag-barrier.tag-barrier-wall,
+.ideditor path.line.stroke.tag-barrier.tag-barrier-retaining_wall,
+.ideditor path.line.stroke.tag-barrier.tag-barrier-city_wall {
+ stroke-linecap: butt;
+ stroke-dasharray: 16, 3, 9, 3;
+}
+.ideditor .low-zoom path.line.stroke.tag-barrier.tag-barrier-wall,
+.ideditor .low-zoom path.line.stroke.tag-barrier.tag-barrier-retaining_wall,
+.ideditor .low-zoom path.line.stroke.tag-barrier.tag-barrier-city_wall,
+.ideditor .preset-icon-container path.line.stroke.tag-barrier.tag-barrier-wall,
+.ideditor .preset-icon-container path.line.stroke.tag-barrier.tag-barrier-retaining_wall,
+.ideditor .preset-icon-container path.line.stroke.tag-barrier.tag-barrier-city_wall {
+ stroke-dasharray: 8, 1, 4, 1;
+}
/* bridges */
-path.casing.tag-bridge {
+.ideditor path.line.casing.tag-bridge {
stroke-opacity: 0.6;
- stroke: #000;
+ stroke: #000 !important;
stroke-linecap: butt;
stroke-dasharray: none;
}
-
-path.shadow.tag-bridge {
+.ideditor path.line.shadow.tag-bridge {
stroke-width: 24;
}
-path.casing.tag-bridge {
+.ideditor path.line.casing.tag-bridge {
stroke-width: 16;
}
-.low-zoom path.shadow.tag-bridge {
+.ideditor .low-zoom path.line.shadow.tag-bridge {
stroke-width: 16;
}
-.low-zoom path.casing.tag-bridge {
+.ideditor .low-zoom path.line.casing.tag-bridge {
stroke-width: 10;
}
-path.shadow.line.tag-railway.tag-bridge,
-path.shadow.tag-highway-living_street.tag-bridge,
-path.shadow.tag-highway-path.tag-bridge,
-path.shadow.tag-highway-corridor.tag-bridge,
-path.shadow.line.tag-highway-pedestrian.tag-bridge,
-path.shadow.tag-highway-service.tag-bridge,
-path.shadow.tag-highway-track.tag-bridge,
-path.shadow.tag-highway-steps.tag-bridge,
-path.shadow.tag-highway-footway.tag-bridge,
-path.shadow.tag-highway-cycleway.tag-bridge,
-path.shadow.tag-highway-bridleway.tag-bridge {
+.ideditor path.line.shadow.tag-railway.tag-bridge,
+.ideditor path.line.shadow.tag-highway-living_street.tag-bridge,
+.ideditor path.line.shadow.tag-highway-path.tag-bridge,
+.ideditor path.line.shadow.tag-highway-corridor.tag-bridge,
+.ideditor path.line.shadow.tag-highway-pedestrian.tag-bridge,
+.ideditor path.line.shadow.tag-highway-service.tag-bridge,
+.ideditor path.line.shadow.tag-highway-track.tag-bridge,
+.ideditor path.line.shadow.tag-highway-steps.tag-bridge,
+.ideditor path.line.shadow.tag-highway-footway.tag-bridge,
+.ideditor path.line.shadow.tag-highway-cycleway.tag-bridge,
+.ideditor path.line.shadow.tag-highway-bridleway.tag-bridge {
stroke-width: 18;
}
-path.casing.line.tag-railway.tag-bridge,
-path.casing.tag-highway-living_street.tag-bridge,
-path.casing.tag-highway-path.tag-bridge,
-path.casing.tag-highway-corridor.tag-bridge,
-path.casing.line.tag-highway-pedestrian.tag-bridge,
-path.casing.tag-highway-service.tag-bridge,
-path.casing.tag-highway-track.tag-bridge,
-path.casing.tag-highway-steps.tag-bridge,
-path.casing.tag-highway-footway.tag-bridge,
-path.casing.tag-highway-cycleway.tag-bridge,
-path.casing.tag-highway-bridleway.tag-bridge {
+.ideditor path.line.casing.tag-railway.tag-bridge,
+.ideditor path.line.casing.tag-highway-living_street.tag-bridge,
+.ideditor path.line.casing.tag-highway-path.tag-bridge,
+.ideditor path.line.casing.tag-highway-corridor.tag-bridge,
+.ideditor path.line.casing.tag-highway-pedestrian.tag-bridge,
+.ideditor path.line.casing.tag-highway-service.tag-bridge,
+.ideditor path.line.casing.tag-highway-track.tag-bridge,
+.ideditor path.line.casing.tag-highway-steps.tag-bridge,
+.ideditor path.line.casing.tag-highway-footway.tag-bridge,
+.ideditor path.line.casing.tag-highway-cycleway.tag-bridge,
+.ideditor path.line.casing.tag-highway-bridleway.tag-bridge {
stroke-width: 10;
}
-.low-zoom path.shadow.line.tag-railway.tag-bridge,
-.low-zoom path.shadow.tag-highway-living_street.tag-bridge,
-.low-zoom path.shadow.tag-highway-path.tag-bridge,
-.low-zoom path.shadow.tag-highway-corridor.tag-bridge,
-.low-zoom path.shadow.line.tag-highway-pedestrian.tag-bridge,
-.low-zoom path.shadow.tag-highway-service.tag-bridge,
-.low-zoom path.shadow.tag-highway-track.tag-bridge,
-.low-zoom path.shadow.tag-highway-steps.tag-bridge,
-.low-zoom path.shadow.tag-highway-footway.tag-bridge,
-.low-zoom path.shadow.tag-highway-cycleway.tag-bridge,
-.low-zoom path.shadow.tag-highway-bridleway.tag-bridge {
+.ideditor .low-zoom path.line.shadow.tag-railway.tag-bridge,
+.ideditor .low-zoom path.line.shadow.tag-highway-living_street.tag-bridge,
+.ideditor .low-zoom path.line.shadow.tag-highway-path.tag-bridge,
+.ideditor .low-zoom path.line.shadow.tag-highway-corridor.tag-bridge,
+.ideditor .low-zoom path.line.shadow.tag-highway-pedestrian.tag-bridge,
+.ideditor .low-zoom path.line.shadow.tag-highway-service.tag-bridge,
+.ideditor .low-zoom path.line.shadow.tag-highway-track.tag-bridge,
+.ideditor .low-zoom path.line.shadow.tag-highway-steps.tag-bridge,
+.ideditor .low-zoom path.line.shadow.tag-highway-footway.tag-bridge,
+.ideditor .low-zoom path.line.shadow.tag-highway-cycleway.tag-bridge,
+.ideditor .low-zoom path.line.shadow.tag-highway-bridleway.tag-bridge {
stroke-width: 14;
}
-.low-zoom path.casing.line.tag-railway.tag-bridge,
-.low-zoom path.casing.tag-highway-living_street.tag-bridge,
-.low-zoom path.casing.tag-highway-path.tag-bridge,
-.low-zoom path.casing.tag-highway-corridor.tag-bridge,
-.low-zoom path.casing.line.tag-highway-pedestrian.tag-bridge,
-.low-zoom path.casing.tag-highway-service.tag-bridge,
-.low-zoom path.casing.tag-highway-track.tag-bridge,
-.low-zoom path.casing.tag-highway-steps.tag-bridge,
-.low-zoom path.casing.tag-highway-footway.tag-bridge,
-.low-zoom path.casing.tag-highway-cycleway.tag-bridge,
-.low-zoom path.casing.tag-highway-bridleway.tag-bridge {
+.ideditor .low-zoom path.line.casing.tag-railway.tag-bridge,
+.ideditor .low-zoom path.line.casing.tag-highway-living_street.tag-bridge,
+.ideditor .low-zoom path.line.casing.tag-highway-path.tag-bridge,
+.ideditor .low-zoom path.line.casing.tag-highway-corridor.tag-bridge,
+.ideditor .low-zoom path.line.casing.tag-highway-pedestrian.tag-bridge,
+.ideditor .low-zoom path.line.casing.tag-highway-service.tag-bridge,
+.ideditor .low-zoom path.line.casing.tag-highway-track.tag-bridge,
+.ideditor .low-zoom path.line.casing.tag-highway-steps.tag-bridge,
+.ideditor .low-zoom path.line.casing.tag-highway-footway.tag-bridge,
+.ideditor .low-zoom path.line.casing.tag-highway-cycleway.tag-bridge,
+.ideditor .low-zoom path.line.casing.tag-highway-bridleway.tag-bridge {
stroke-width: 6;
}
/* tunnels */
-path.stroke.tag-tunnel {
+.ideditor path.line.stroke.tag-tunnel,
+.ideditor path.line.stroke.tag-location-underground,
+.ideditor path.line.stroke.tag-location-underwater {
stroke-opacity: 0.3;
}
-path.casing.tag-tunnel {
+.ideditor path.line.casing.tag-tunnel,
+.ideditor path.line.casing.tag-location-underground,
+.ideditor path.line.stroke.tag-location-underwater {
stroke-opacity: 0.5;
stroke-linecap: butt;
stroke-dasharray: none;
/* embankments / cuttings */
-path.shadow.tag-embankment,
-path.shadow.tag-cutting {
+.ideditor path.line.shadow.tag-embankment,
+.ideditor path.line.shadow.tag-cutting {
stroke-width: 28;
}
-path.casing.tag-embankment,
-path.casing.tag-cutting {
+.ideditor path.line.casing.tag-embankment,
+.ideditor path.line.casing.tag-cutting {
stroke-opacity: 0.5;
stroke: #000;
stroke-width: 22;
stroke-linecap: butt;
}
-.low-zoom path.shadow.tag-embankment,
-.low-zoom path.shadow.tag-cutting {
+.ideditor .low-zoom path.line.shadow.tag-embankment,
+.ideditor .low-zoom path.line.shadow.tag-cutting {
stroke-width: 14;
}
-.low-zoom path.casing.tag-embankment,
-.low-zoom path.casing.tag-cutting {
+.ideditor .low-zoom path.line.casing.tag-embankment,
+.ideditor .low-zoom path.line.casing.tag-cutting {
stroke-width: 10;
}
/* Surface - unpaved */
-path.casing.tag-unpaved {
+.ideditor path.line.casing.tag-unpaved {
stroke: #ccc;
stroke-linecap: butt;
- stroke-dasharray: 4, 3;
+ stroke-dasharray: 4, 4;
}
-.low-zoom path.casing.tag-unpaved {
- stroke-dasharray: 3, 2;
+.ideditor .low-zoom path.line.casing.tag-unpaved {
+ stroke-dasharray: 3, 3;
}
-path.casing.tag-bridge.tag-unpaved {
+.ideditor path.line.casing.tag-bridge.tag-unpaved {
stroke: #000;
- stroke-dasharray: 4, 3;
}
-.low-zoom path.casing.tag-bridge.tag-unpaved {
+/* Surface - semipaved */
+.ideditor path.line.casing.tag-semipaved {
+ stroke-linecap: butt;
+ stroke-dasharray: 6, 2;
+}
+.ideditor .low-zoom path.line.casing.tag-semipaved {
+ stroke-dasharray: 5, 2;
+}
+.ideditor path.line.casing.tag-bridge.tag-semipaved {
stroke: #000;
- stroke-dasharray: 3, 2;
}
-/* Status (e.g. construction, proposed, abandoned) */
-path.stroke.tag-status,
-path.casing.tag-status {
+/* Status (e.g. proposed, abandoned) */
+.ideditor path.area.stroke.tag-status:not(.tag-status-disused),
+.ideditor path.line.stroke.tag-status:not(.tag-status-disused),
+.ideditor path.area.casing.tag-status:not(.tag-status-disused),
+.ideditor path.line.casing.tag-status:not(.tag-status-disused) {
stroke-linecap: butt;
stroke-dasharray: 7, 3;
}
-.low-zoom path.stroke.tag-status,
-.low-zoom path.casing.tag-status {
+.ideditor .low-zoom path.area.stroke.tag-status:not(.tag-status-disused),
+.ideditor .low-zoom path.line.stroke.tag-status:not(.tag-status-disused),
+.ideditor .low-zoom path.area.casing.tag-status:not(.tag-status-disused),
+.ideditor .low-zoom path.line.casing.tag-status:not(.tag-status-disused) {
stroke-dasharray: 5, 2;
}
+/* Road Closed Status */
+.ideditor .preset-icon .icon.tag-highway.tag-status-construction {
+ color: #fc6c14;
+ fill: #fff;
+}
+.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction {
+ stroke-width: 20;
+}
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction {
+ stroke-width: 10;
+ stroke-linecap: butt;
+ stroke-dasharray: none
+}
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction {
+ stroke-width: 8;
+ stroke-linecap: butt;
+ stroke-dasharray: 10, 10;
+}
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction,
+.ideditor .preset-icon-container path.line.stroke.tag-highway.tag-status.tag-status-construction {
+ stroke: #fff;
+}
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction,
+.ideditor .preset-icon-container path.line.casing.tag-highway.tag-status.tag-status-construction {
+ stroke: #fc6c14;
+}
+.ideditor .low-zoom path.line.shadow.tag-highway.tag-status.tag-status-construction {
+ stroke-width: 16;
+}
+.ideditor .low-zoom path.line.casing.tag-highway.tag-status.tag-status-construction {
+ stroke-width: 7;
+}
+.ideditor .low-zoom path.line.stroke.tag-highway.tag-status.tag-status-construction {
+ stroke-width: 5;
+ stroke-dasharray: 8, 8;
+}
+
+/** Closed Paths */
+.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-path,
+.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-footway,
+.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-cycleway,
+.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-bridleway,
+.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-steps {
+ stroke-width: 15;
+}
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-path,
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-footway,
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-cycleway,
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-bridleway,
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-steps {
+ stroke-width: 5;
+ stroke-linecap: butt;
+ stroke-dasharray: none
+}
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-path,
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-footway,
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-cycleway,
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-bridleway,
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-steps {
+ stroke-width: 4;
+ stroke-linecap: butt;
+ stroke-dasharray: 10, 10;
+}
+
+/** Proposed Paths */
+.ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-path,
+.ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-footway,
+.ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-cycleway,
+.ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-bridleway,
+.ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-steps {
+ stroke-width: 15;
+}
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-path,
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-footway,
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-cycleway,
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-bridleway,
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-steps {
+ stroke-width: 4.5;
+}
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-path,
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-footway,
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-cycleway,
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-bridleway,
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-steps {
+ stroke-width: 3;
+}
/* Buildings */
-path.stroke.tag-building,
-path.stroke.tag-amenity-shelter {
+.ideditor path.stroke.tag-building {
stroke: rgb(224, 110, 95);
}
-path.fill.tag-building,
-path.fill.tag-amenity-shelter {
+.ideditor path.fill.tag-building {
stroke: rgba(224, 110, 95, 0.3);
fill: rgba(224, 110, 95, 0.3);
}
-.preset-icon-fill-area.tag-building,
-.preset-icon-fill-area.tag-amenity-shelter {
- border-color: rgb(224, 110, 95);
- background-color: rgba(224, 110, 95, 0.3);
-}
/* Cursors */
-.map-in-map,
-#map {
+.ideditor .nope,
+.ideditor .nope * {
+ cursor: not-allowed !important;
+}
+
+.ideditor .map-in-map,
+.ideditor .main-map {
cursor: auto; /* Opera */
cursor: url(<%= asset_path("iD/img/cursor-grab.png") %>) 9 9, auto; /* FF */
}
-.mode-browse .point,
-.mode-select .point {
+.ideditor.mode-browse .point,
+.ideditor.mode-select .point,
+.ideditor.mode-select-data .point,
+.ideditor.mode-select-error .point,
+.ideditor.mode-select-note .point {
cursor: pointer; /* Opera */
cursor: url(<%= asset_path("iD/img/cursor-select-point.png") %>), pointer; /* FF */
}
-.mode-select .vertex,
-.mode-browse .vertex {
+.ideditor.mode-browse .vertex,
+.ideditor.mode-select .vertex,
+.ideditor.mode-select-data .vertex,
+.ideditor.mode-select-error .vertex,
+.ideditor.mode-select-note .vertex {
cursor: pointer; /* Opera */
cursor: url(<%= asset_path("iD/img/cursor-select-vertex.png") %>), pointer; /* FF */
}
-.mode-browse .line,
-.mode-select .line {
+.ideditor.mode-browse .line,
+.ideditor.mode-select .line,
+.ideditor.mode-select-data .line,
+.ideditor.mode-select-error .line,
+.ideditor.mode-select-note .line {
cursor: pointer; /* Opera */
cursor: url(<%= asset_path("iD/img/cursor-select-line.png") %>), pointer; /* FF */
}
-.mode-select .area,
-.mode-browse .area {
+.ideditor.mode-browse .area,
+.ideditor.mode-select .area,
+.ideditor.mode-select-data .area,
+.ideditor.mode-select-error .area,
+.ideditor.mode-select-note .area {
cursor: pointer; /* Opera */
cursor: url(<%= asset_path("iD/img/cursor-select-area.png") %>), pointer; /* FF */
}
-.mode-select .midpoint,
-.mode-browse .midpoint {
+.ideditor.mode-browse .midpoint,
+.ideditor.mode-select .midpoint,
+.ideditor.mode-select-data .midpoint,
+.ideditor.mode-select-error .midpoint,
+.ideditor.mode-select-note .midpoint {
cursor: pointer; /* Opera */
cursor: url(<%= asset_path("iD/img/cursor-select-split.png") %>), pointer; /* FF */
}
-.mode-select .behavior-multiselect .point,
-.mode-select .behavior-multiselect .vertex,
-.mode-select .behavior-multiselect .line,
-.mode-select .behavior-multiselect .area {
+.ideditor.mode-select .behavior-multiselect .point,
+.ideditor.mode-select .behavior-multiselect .vertex,
+.ideditor.mode-select .behavior-multiselect .line,
+.ideditor.mode-select .behavior-multiselect .area {
cursor: pointer; /* Opera */
cursor: url(<%= asset_path("iD/img/cursor-select-add.png") %>), pointer; /* FF */
}
-.mode-select .behavior-multiselect .selected {
+.ideditor.mode-select .behavior-multiselect .selected {
cursor: pointer; /* Opera */
cursor: url(<%= asset_path("iD/img/cursor-select-remove.png") %>), pointer; /* FF */
}
-#map .point:active,
-#map .vertex:active,
-#map .line:active,
-#map .area:active,
-#map .midpoint:active,
-#map .mode-select .selected {
- cursor: pointer; /* Opera */
- cursor: url(<%= asset_path("iD/img/cursor-select-acting.png") %>), pointer; /* FF */
-}
-
-.mode-draw-line #map,
-.mode-draw-area #map,
-.mode-add-line #map,
-.mode-add-area #map,
-.mode-drag-node #map {
+.ideditor.mode-add-preset .main-map,
+.ideditor.mode-draw-line .main-map,
+.ideditor.mode-draw-area .main-map,
+.ideditor.mode-add-line .main-map,
+.ideditor.mode-add-area .main-map,
+.ideditor.mode-drag-node .main-map,
+.ideditor.mode-drag-note .main-map {
cursor: crosshair; /* Opera */
cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */
}
-.mode-draw-line .way.hover,
-.mode-draw-area .way.hover,
-.mode-add-line .way.hover,
-.mode-add-area .way.hover,
-.mode-drag-node .way.hover {
+.ideditor.mode-draw-line .way.target,
+.ideditor.mode-draw-area .way.target,
+.ideditor.mode-add-line .way.target,
+.ideditor.mode-add-area .way.target,
+.ideditor.mode-drag-node .way.target {
cursor: crosshair; /* Opera */
cursor: url(<%= asset_path("iD/img/cursor-draw-connect-line.png") %>) 9 9, crosshair; /* FF */
}
-.mode-draw-line .vertex.hover,
-.mode-draw-area .vertex.hover,
-.mode-add-line .vertex.hover,
-.mode-add-area .vertex.hover,
-.mode-drag-node .vertex.hover {
+.ideditor.mode-draw-line .vertex.target,
+.ideditor.mode-draw-area .vertex.target,
+.ideditor.mode-add-line .vertex.target,
+.ideditor.mode-add-area .vertex.target,
+.ideditor.mode-drag-node .vertex.target {
cursor: crosshair; /* Opera */
cursor: url(<%= asset_path("iD/img/cursor-draw-connect-vertex.png") %>) 9 9, crosshair; /* FF */
}
-.mode-add-point #map,
-.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 {
+.ideditor.mode-add-point .main-map,
+.ideditor.mode-add-note .main-map,
+.ideditor.mode-browse.lasso .main-map,
+.ideditor.mode-browse.lasso .way,
+.ideditor.mode-browse.lasso .vertex,
+.ideditor.mode-browse.lasso .midpoint,
+.ideditor.mode-select.lasso .main-map,
+.ideditor.mode-select.lasso .way,
+.ideditor.mode-select.lasso .vertex,
+.ideditor.mode-select.lasso .midpoint {
cursor: crosshair; /* Opera */
cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */
}
-.turn rect,
-.turn circle {
- cursor: pointer; /* Opera */
- cursor: url(<%= asset_path("iD/img/cursor-pointer.png") %>) 6 1, pointer; /* FF */
+.ideditor.mode-browse .note,
+.ideditor.mode-select .note,
+.ideditor.mode-select-data .note,
+.ideditor.mode-select-error .note,
+.ideditor.mode-select-note .note {
+ cursor: pointer;
}
-/* Mapillary Image Layer */
-.layer-mapillary-images {
- pointer-events: none;
+.ideditor.mode-browse .qaItem,
+.ideditor.mode-select .qaItem,
+.ideditor.mode-select-data .qaItem,
+.ideditor.mode-select-error .qaItem,
+.ideditor.mode-select-note .qaItem {
+ cursor: pointer;
}
-.layer-mapillary-images .viewfield-group {
- pointer-events: visible;
- cursor: pointer; /* Opera */
- cursor: url(<%= asset_path("iD/img/cursor-select-mapillary.png") %>) 6 1, pointer; /* FF */
+/* turn restriction editor */
+.ideditor .turn rect,
+.ideditor .turn circle {
+ cursor: pointer;
}
-
-.layer-mapillary-images .viewfield-group * {
- stroke-width: 1;
- stroke: #444;
- fill: #ffc600;
- z-index: 50;
+/* photo viewer div */
+.ideditor .photoviewer {
+ position: relative;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ margin-bottom: 10px;
+ width: 330px;
+ height: 250px;
+ padding: 5px;
+ background-color: #fff;
}
-
-.layer-mapillary-images .viewfield-group:hover * {
- stroke-width: 1;
- stroke: #333;
- fill: #ff9900;
- z-index: 60;
+.ideditor[dir='ltr'] .photoviewer {
+ margin-left: 10px;
+ margin-right: 2px;
}
-
-.layer-mapillary-images .viewfield-group.selected * {
- stroke-width: 2;
- stroke: #222;
- fill: #ff5800;
- z-index: 60;
+.ideditor[dir='rtl'] .photoviewer {
+ margin-right: 10px;
+ margin-left: 2px;
}
-.layer-mapillary-images .viewfield-group:hover path.viewfield,
-.layer-mapillary-images .viewfield-group.selected path.viewfield,
-.layer-mapillary-images .viewfield-group path.viewfield {
- stroke-width: 0;
- fill-opacity: 0.6;
+@media screen and (min-width: 1600px) {
+ .ideditor .photoviewer {
+ width: 490px;
+ height: 370px;
+ }
}
-/* Mapillary Sign Layer */
-
-.layer-mapillary-signs {
- pointer-events: none;
+.ideditor .photoviewer button.thumb-hide {
+ border-radius: 0;
+ padding: 5px;
+ position: absolute;
+ right: 5px;
+ top: 5px;
+ z-index: 50;
}
-.layer-mapillary-signs .icon-sign .icon-sign-body {
- min-width: 20px;
- height: 28px;
- width: 28px;
- border: 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;
- overflow: visible;
+.ideditor .photoviewer button.resize-handle-xy {
+ border-radius: 0;
+ position: absolute;
+ top: 0;
+ right: 0;
+ z-index: 49;
+ cursor: nesw-resize;
+ height: 25px;
+ width: 25px;
}
-.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 .icon-sign-body {
- border: 2px solid rgba(255,0,0,0.8);
- z-index: 80;
- }
-
-.layer-mapillary-signs .icon-sign .t {
- font-size: 28px;
- z-index: 70;
+.ideditor .photoviewer button.resize-handle-x {
+ border-radius: 0;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 48;
+ cursor: ew-resize;
+ height: auto;
+ width: 6px;
}
-.layer-mapillary-signs .icon-sign:hover .t,
-.layer-mapillary-signs .icon-sign.selected .t {
- z-index: 80;
+.ideditor .photoviewer button.resize-handle-y {
+ border-radius: 0;
+ position: absolute;
+ top: 0;
+ right: 0;
+ z-index: 48;
+ cursor: ns-resize;
+ height: 6px;
+ width: 100%;
}
-/* Fill Styles */
-.low-zoom.fill-wireframe path.stroke,
-.fill-wireframe path.stroke {
- stroke-width: 1 !important;
- stroke-opacity: 0.5 !important;
- stroke-dasharray: none !important;
- fill: none !important;
+
+.ideditor .photo-wrapper,
+.ideditor .photo-wrapper img {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ -o-object-fit: cover;
+ object-fit: cover;
}
-.low-zoom.fill-wireframe path.shadow,
-.fill-wireframe path.shadow {
- stroke-width: 12;
+.ideditor .photo-wrapper .photo-attribution {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ width: 100%;
+ font-size: 10px;
+ text-align: right;
+ line-height: 1.1em;
+ padding: 4px 2px;
+ z-index: 10;
}
-.fill-wireframe path.shadow.related:not(.selected),
-.fill-wireframe path.shadow.hover:not(.selected) {
- stroke-opacity: 0.4;
+.ideditor .photo-attribution a,
+.ideditor .photo-attribution a:visited,
+.ideditor .photo-attribution span {
+ padding: 4px 2px;
+ color: #fff;
}
-.fill-wireframe path.shadow.selected {
- stroke-opacity: 0.6;
+
+/* markers and sequences */
+.ideditor .viewfield-group {
+ pointer-events: none;
+}
+.ideditor.mode-browse .viewfield-group,
+.ideditor.mode-select .viewfield-group,
+.ideditor.mode-select-data .viewfield-group,
+.ideditor.mode-select-error .viewfield-group,
+.ideditor.mode-select-note .viewfield-group {
+ pointer-events: visible;
+ cursor: pointer;
}
-.fill-wireframe .point,
-.fill-wireframe .areaicon,
-.fill-wireframe .areaicon-halo,
-.fill-wireframe path.casing,
-.fill-wireframe path.fill,
-.fill-wireframe path.oneway {
- display: none !important;
+.ideditor .viewfield-group.currentView * {
+ fill: #ffee00 !important;
+}
+.ideditor .viewfield-group.hovered * {
+ fill: #eebb00 !important;
}
-.fill-partial path.area.fill {
- fill-opacity: 0;
- stroke-width: 60px;
- pointer-events: visibleStroke;
+.ideditor .viewfield-group circle {
+ stroke: #555;
+ stroke-width: 1;
+ stroke-opacity: 0.4;
+ fill-opacity: 0.4;
+}
+.ideditor .viewfield-group.highlighted circle {
+ stroke: #222;
+ stroke-opacity: 0.9;
+ fill-opacity: 0.9;
+}
+.ideditor .viewfield-group.highlighted.hovered circle {
+ stroke: #222;
+ stroke-width: 2;
+ stroke-opacity: 0.9;
+ fill-opacity: 0.9;
+}
+.ideditor .viewfield-group.highlighted.currentView circle {
+ stroke: #222;
+ stroke-width: 2;
+ stroke-opacity: 1;
+ fill-opacity: 1;
}
-/* Modes */
+.ideditor .viewfield-group .viewfield {
+ stroke-width: 0;
+ stroke: #222;
+ fill-opacity: 0.4;
+}
+.ideditor .viewfield-group.highlighted .viewfield {
+ stroke-width: 1;
+ fill-opacity: 0.8;
+}
+.ideditor .viewfield-group.highlighted.hovered .viewfield {
+ stroke-width: 1;
+ fill-opacity: 0.8;
+}
+.ideditor .viewfield-group.highlighted.currentView .viewfield {
+ stroke-width: 1;
+ fill-opacity: 0.9;
+}
-.mode-draw-line .vertex.active,
-.mode-draw-area .vertex.active,
-.mode-drag-node .vertex.active {
- display: none;
+.ideditor .viewfield-group.currentView .viewfield-scale {
+ -webkit-transform: scale(2,2);
+ -ms-transform: scale(2,2);
+ transform: scale(2,2);
}
-.mode-draw-line .way.active,
-.mode-draw-area .way.active,
-.mode-drag-node .active {
- pointer-events: none;
+.ideditor .sequence {
+ fill: none;
+ stroke-width: 2;
+ stroke-opacity: 0.4;
+}
+.ideditor .sequence.highlighted,
+.ideditor .sequence.currentView {
+ stroke-width: 4;
+ stroke-opacity: 1;
}
-/* Ensure drawing doesn't interact with area fills. */
-.mode-add-point path.area.fill,
-.mode-draw-line path.area.fill,
-.mode-draw-area path.area.fill,
-.mode-add-line path.area.fill,
-.mode-add-area path.area.fill,
-.mode-drag-node path.area.fill {
+
+/* Streetside Image Layer */
+.ideditor .layer-streetside-images {
pointer-events: none;
}
-/* Basics
-------------------------------------------------------- */
-
-/*
- Opera misbehaves when the window is resized vertically unless 100% width + height are
- applied to both html and body. https://gist.github.com/jfirebaugh/bd225bcfdd3a633850c4
-*/
-html, body {
- width: 100%;
- height: 100%;
+.ideditor .layer-streetside-images .viewfield-group * {
+ fill: #0fffc4;
}
-
-body {
- 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;
- color:#333;
- overflow: hidden;
- -ms-user-select: none;
+.ideditor .layer-streetside-images .sequence {
+ stroke: #0fffc4;
+ stroke-opacity: 0.85; /* bump opacity - only one per road */
}
-.unsupported {
- text-align: center;
- vertical-align: middle;
- padding-top: 100px;
- font-size: 15px;
-}
-.id-container {
- height: 100%;
- width: 100%;
- min-width: 768px;
+/* Mapillary Image Layer */
+.ideditor .layer-mapillary {
+ pointer-events: none;
}
-
-#content {
- position: relative;
- overflow: hidden;
- height: 100%;
+.ideditor .layer-mapillary .viewfield-group * {
+ fill: #55ff22;
}
-
-#content.active {
- -webkit-filter: none !important;
- filter: none !important;
- -webkit-duration: 200ms;
- transition-duration: 200ms;
+.ideditor .layer-mapillary .sequence {
+ stroke: #55ff22;
}
-#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;
- width: 0;
- height: 0;
+/* Mapillary Traffic Signs and Map Features Layers */
+.ideditor .layer-mapillary-detections {
+ pointer-events: none;
}
-
-.spacer {
- height: 40px;
- margin-right: 10px;
+.ideditor .layer-mapillary-detections .icon-detected {
+ outline: 2px solid transparent;
+ pointer-events: visible;
+ cursor: pointer;
+ opacity: 0.75;
}
-
-.limiter {
- position: relative;
- max-width: 1200px;
+.ideditor .layer-mapillary-detections .icon-detected rect {
+ fill: none;
}
-
-.spinner {
- opacity: .5;
- float: right;
+.ideditor .layer-mapillary-detections .icon-detected:active {
+ opacity: 1;
}
-[dir='rtl'] .spinner {
- float: left;
+.ideditor .layer-mapillary-detections .icon-detected:active rect {
+ outline: 3px solid rgba(255, 238, 0, 0.6);
+}
+@media (hover: hover) {
+ .ideditor .layer-mapillary-detections .icon-detected:hover {
+ opacity: 1;
+ }
+ .ideditor .layer-mapillary-detections .icon-detected:hover rect {
+ outline: 3px solid rgba(255, 238, 0, 0.6);
+ }
+}
+.ideditor .layer-mapillary-detections .icon-detected.currentView {
+ opacity: 1;
+}
+.ideditor .layer-mapillary-detections .icon-detected.currentView rect {
+ outline: 3px solid rgba(255, 238, 0, 1);
}
-.spinner img {
- height: 40px;
- width: 40px;
- border-radius: 4px;
- margin-right: 10px;
- background: black;
+
+/* KartaView Image Layer */
+.ideditor .layer-kartaview {
+ pointer-events: none;
}
-[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";
+.ideditor .layer-kartaview .viewfield-group * {
+ fill: #20c4ff;
+}
+.ideditor .layer-kartaview .sequence {
+ stroke: #20c4ff;
}
-div, textarea, label, input, form, span, ul, li, ol, a, button, h1, h2, h3, h4, h5, p, img {
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
+/* Streetside Viewer (pannellum) */
+.ideditor .ms-wrapper .photo-attribution .image-link {
+ display: block;
+}
+.ideditor .ms-wrapper .photo-attribution .attribution-row {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ padding: 0 5px;
+}
+.ideditor .ms-wrapper .photo-attribution .image-view-link {
+ text-align: left;
+ margin: 0 5px;
+}
+.ideditor .ms-wrapper .photo-attribution .image-report-link {
+ text-align: right;
}
-a, button, input, textarea {
- -webkit-tap-highlight-color:rgba(0,0,0,0);
- -webkit-touch-callout:none;
+.ideditor .ms-wrapper .photo-attribution a:active {
+ color: #0fffc4;
+}
+@media (hover: hover) {
+ .ideditor .ms-wrapper .photo-attribution a:hover {
+ color: #0fffc4;
+ }
}
-a,
-button,
-.checkselect label:hover,
-.opacity-options li,
-.radial-menu-item {
- cursor: pointer; /* Opera */
- cursor: url(<%= asset_path("iD/img/cursor-pointer.png") %>) 6 1, pointer; /* FF */
+.ideditor .ms-wrapper .pnlm-compass.pnlm-control {
+ width: 26px;
+ height: 26px;
+ left: 4px;
+ top: 60px;
+ background-size: contain;
+ background-repeat: no-repeat no-repeat;
}
-h2 {
- font-size: 25px;
- line-height: 1.25;
- font-weight: bold;
- margin-bottom: 20px;
+.ideditor label.streetside-hires {
+ cursor: pointer;
+}
+.ideditor .streetside-hires span {
+ margin-top: 2px;
+}
+.ideditor .streetside-hires input[type="checkbox"] {
+ float: left;
+ width: 12px;
+ height: 12px;
+ margin: 0 5px;
}
-h3:last-child,
-h2:last-child,
-h4:last-child { margin-bottom: 0;}
-h3 {
- font-size: 16px;
- line-height: 1.25;
- font-weight: bold;
- margin-bottom: 10px;
+/* Mapillary viewer */
+.ideditor #ideditor-mly .domRenderer .TagSymbol {
+ font-size: 10px;
+ background-color: rgba(0,0,0,0.4);
+ padding: 0 4px;
+ border-radius: 4px;
+ top: -25px;
}
-h4, h5 {
- font-size: 12px;
- font-weight: bold;
- padding-bottom: 10px;
+.ideditor .mly-wrapper .mapillary-attribution-container {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
}
-:focus {
- outline-color: transparent;
- outline-style: none;
+.ideditor .mly-wrapper .mapillary-attribution-container .mapillary-attribution-icon-container {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
}
-p {
- font-size: 12px;
- margin:0;
- padding:0;
+.ideditor .mly-wrapper .mapillary-attribution-container .mapillary-attribution-username {
+ display: none;
}
-p:last-child {
- padding-bottom: 0;
+.ideditor .mly-wrapper .mapillary-attribution-container .mapillary-attribution-date {
+ margin-right: 6px;
}
-em {
- font-style: italic;
+/* KartaView viewer */
+.ideditor .kartaview-wrapper {
+ position: relative;
+ background-color: #000;
+ background-image: url(<%= asset_path("iD/img/loader-black.gif") %>);
+ background-position: center;
+ background-repeat: no-repeat;
}
-strong {
- font-weight: bold;
+.ideditor .kartaview-wrapper .photo-attribution a:active {
+ color: #20c4ff;
}
-
-a:visited, a {
- color: #7092ff;
+@media (hover: hover) {
+ .ideditor .kartaview-wrapper .photo-attribution a:hover {
+ color: #20c4ff;
+ }
}
-a:hover {
- color:#597be7;
+.ideditor .kartaview-image-wrap {
+ width: 100%;
+ height: 100%;
+ -webkit-transform-origin:0 0;
+ -ms-transform-origin:0 0;
+ transform-origin:0 0;
}
-/* Forms
-------------------------------------------------------- */
-
-textarea {
- resize: vertical;
- font:normal 12px/20px "-apple-system", BlinkMacSystemFont,
- "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
- "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
- sans-serif;
-}
-textarea,
-input[type=text],
-input[type=search],
-input[type=number],
-input[type=url],
-input[type=tel],
-input[type=email] {
- background-color: white;
- color: #333;
- border:1px solid #ccc;
- padding:5px 20px 5px 10px;
- height:30px;
+/* photo-controls (step forward, back, rotate) */
+.ideditor .photo-controls-wrap {
+ text-align: center;
+ position: absolute;
+ top: 10px;
width: 100%;
- border-radius:4px;
- text-overflow: ellipsis;
-}
-[dir='rtl'] textarea,
-[dir='rtl'] input[type=text],
-[dir='rtl'] input[type=search],
-[dir='rtl'] input[type=number],
-[dir='rtl'] input[type=url],
-[dir='rtl'] input[type=tel],
-[dir='rtl'] input[type=email] {
- padding:5px 10px 5px 20px;
+ z-index: 10;
+ pointer-events: none;
}
-textarea:focus,
-input:focus {
- background-color: #F1F1F1;
+.ideditor .photo-controls {
+ display: inline-block;
+ z-index: 10;
+ pointer-events: initial;
}
-input[type="checkbox"],
-input[type="radio"] {
- float: left;
- width: 14px;
- height: 14px;
- margin-right: 5px;
- margin-top: 3px;
+.ideditor .photo-controls button,
+.ideditor .photo-controls button:focus {
+ height: 18px;
+ width: 18px;
+ background: rgba(0,0,0,0.65);
+ color: #eee;
+ border-radius: 0;
}
-
-/* remove bottom border radius when combobox is open */
-.combobox + * textarea:focus,
-.combobox + * input:focus {
- border-bottom-left-radius: 0 !important;
- border-bottom-right-radius: 0 !important;
+.ideditor .photo-controls button:first-of-type {
+ border-radius: 3px 0 0 3px;
+}
+.ideditor .photo-controls button:last-of-type {
+ border-radius: 0 3px 3px 0;
+}
+.ideditor .photo-controls button:active {
+ background: rgba(0,0,0,0.85);
+ color: #fff;
+}
+@media (hover: hover) {
+ .ideditor .photo-controls button:hover {
+ background: rgba(0,0,0,0.85);
+ color: #fff;
+ }
}
-/* tables */
+/* OSM Notes and QA Layers */
-table {
- background-color: white;
- border-collapse: collapse;
- width:100%;
- border-spacing:0;
+.ideditor .qa-header-icon .qaItem-fill,
+.ideditor .layer-keepRight .qaItem .qaItem-fill,
+.ideditor .layer-improveOSM .qaItem .qaItem-fill,
+.ideditor .layer-osmose .qaItem .qaItem-fill {
+ stroke: #333;
+ stroke-width: 1.3px; /* NOTE: likely a better way to scale the icon stroke */
}
-table th {
- text-align:left;
+.ideditor .note-header-icon .note-fill,
+.ideditor .layer-notes .note .note-fill {
+ color: #f30;
+ stroke: #333;
+ stroke-width: 40px;
}
-
-table.tags, table.tags td, table.tags th {
- border: 1px solid #CCC;
- padding: 4px;
+.ideditor .note-header-icon.new .note-fill,
+.ideditor .layer-notes .note.new .note-fill {
+ color: #fe0;
+ stroke: #333;
+ stroke-width: 40px;
+}
+.ideditor .note-header-icon.closed .note-fill,
+.ideditor .layer-notes .note.closed .note-fill {
+ color: #5d0;
+ stroke: #333;
+ stroke-width: 40px;
}
-::-ms-clear {
- display: none;
+/* slight adjustments to preset icon for note icons */
+.ideditor .note-header-icon .preset-icon-28 {
+ top: 18px;
+}
+.ideditor .note-header-icon .note-icon-annotation {
+ position: absolute;
+ top: 22px;
+ left: 22px;
+ margin: auto;
+}
+.ideditor .note-header-icon .note-icon-annotation .icon {
+ width: 15px;
+ height: 15px;
}
-/* Grid
-------------------------------------------------------- */
+/* adjustment to center QA icons */
+.ideditor .qa-header-icon .preset-icon-28 {
+ top: auto;
+ left: auto;
+}
+.ideditor .qa-header-icon {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
-.col0 { float:left; width:04.1666%; }
-.col1 { float:left; width:08.3333%; }
-.col2 { float:left; width:16.6666%; }
-.col3 { float:left; width:25.0000%; max-width: 300px; }
-.col4 { float:left; width:33.3333%; max-width: 400px; }
-.col5 { float:left; width:41.6666%; max-width: 500px; }
-.col6 { float:left; width:50.0000%; max-width: 600px; }
-.col7 { float:left; width:58.3333%; }
-.col8 { float:left; width:66.6666%; }
-.col9 { float:left; width:75.0000%; }
-.col10 { float:left; width:83.3333%; }
-.col11 { float:left; width:91.6666%; }
-.col12 { float:left; width:100.0000%; }
-
-/* UI Lists
+/* Keep Right Issues
------------------------------------------------------- */
+.ideditor .keepRight.itemType-20,
+.ideditor .keepRight.itemType-40,
+.ideditor .keepRight.itemType-210,
+.ideditor .keepRight.itemType-270,
+.ideditor .keepRight.itemType-310,
+.ideditor .keepRight.itemType-320,
+.ideditor .keepRight.itemType-350 { /* improper bridge tag */
+ color: #ff9;
+}
-ul li { list-style: none;}
-
-.toggle-list > label {
- position: relative;
- padding: 5px 10px;
- display: block;
- height: 30px;
- background-color: white;
- color: #7092FF;
- cursor: pointer;
+.ideditor .keepRight.itemType-50 { /* almost junctions */
+ color: #88f;
}
-.toggle-list > label:hover {
- background-color: #ececec;
+.ideditor .keepRight.itemType-60,
+.ideditor .keepRight.itemType-70,
+.ideditor .keepRight.itemType-90,
+.ideditor .keepRight.itemType-100,
+.ideditor .keepRight.itemType-110,
+.ideditor .keepRight.itemType-150,
+.ideditor .keepRight.itemType-220,
+.ideditor .keepRight.itemType-380 { /* non-physical sport tag */
+ color: #5d0;
}
-.toggle-list > label:not(:last-child) {
- border-bottom: 1px solid #ccc;
+.ideditor .keepRight.itemType-130 { /* disconnected ways */
+ color: #fa3;
}
-.toggle-list > label:last-child {
- border-radius: 0 0 3px 3px;
+.ideditor .keepRight.itemType-170 { /* FIXME tag */
+ color: #ff0;
}
-.toggle-list label > span {
- display: block;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
+.ideditor .keepRight.itemType-190 { /* intersection without junction */
+ color: #f33;
}
-.toggle-list > label.active {
- background: #E8EBFF;
+.ideditor .keepRight.itemType-200 { /* overlapping ways */
+ color: #fdbf6f;
}
+.ideditor .keepRight.itemType-160,
+.ideditor .keepRight.itemType-230 { /* layer conflict */
+ color: #b60;
+}
-/* Utility Classes
-------------------------------------------------------- */
-.fillL {
- background: white;
- color: #333;
+.ideditor .keepRight.itemType-280 { /* boundary issues */
+ color: #5f47a0;
}
-.fillL2 {
- background: #f6f6f6;
- color: #333;
+.ideditor .keepRight.itemType-180,
+.ideditor .keepRight.itemType-290 { /* turn restriction issues */
+ color: #ace;
}
-.fillL3 {
- background: #ececec;
- color: #333;
+.ideditor .keepRight.itemType-300,
+.ideditor .keepRight.itemType-390 { /* missing tracktype */
+ color: #090;
}
-.fillD {
- background:rgba(0,0,0,.5);
- color: white;
+.ideditor .keepRight.itemType-360,
+.ideditor .keepRight.itemType-370,
+.ideditor .keepRight.itemType-410 { /* website issues */
+ color: #f9b;
}
-.fillD2 {
- background:rgba(0,0,0,.75);
- color: white;
+.ideditor .keepRight.itemType-120,
+.ideditor .keepRight.itemType-400 { /* geometry / turn angles */
+ color: #c35;
}
-.fl { float: left;}
-.fr { float: right;}
-.al { left: 0; }
-.ar { right: 0; }
+/* ImproveOSM Issues
+------------------------------------------------------- */
-input.hide,
-div.hide,
-form.hide,
-button.hide,
-a.hide,
-li.hide {
- display: none;
+.ideditor .improveOSM.itemType-ow { /* missing one way */
+ color: #1E90FF;
}
-.deemphasize {
- color: #a9a9a9;
+.ideditor .improveOSM.itemType-mr-road { /* missing road */
+ color: #B452CD;
}
-
-.content {
- box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
+.ideditor .improveOSM.itemType-mr-path { /* missing path */
+ color: #A0522D;
}
-
-.loading {
- background: url(<%= asset_path("iD/img/loader_bg.gif") %>);
- background-size:5px 5px;
+.ideditor .improveOSM.itemType-mr-parking { /* missing parking */
+ color: #EEEE00;
+}
+.ideditor .improveOSM.itemType-mr-both { /* missing road+parking */
+ color: #FFA500;
}
-.panewrap {
- position:absolute;
- width:200%;
- height:100%;
- right: -100%;
+.ideditor .improveOSM.itemType-tr { /* missing turn restriction */
+ color: #EC1C24;
}
-
-.pane {
- position:absolute;
- width:50%;
- top: 0;
- bottom: 30px;
+/* Custom Map Data (geojson, gpx, kml, vector tile) */
+.ideditor .layer-mapdata {
+ pointer-events: none;
}
-.pane:first-child {
- left: 0;
+.ideditor .layer-mapdata path.shadow {
+ pointer-events: stroke;
+ stroke: #f6634f;
+ stroke-width: 16;
+ stroke-opacity: 0;
+ fill: none;
+}
+.ideditor .layer-mapdata path.MultiPoint.shadow,
+.ideditor .layer-mapdata path.Point.shadow {
+ pointer-events: fill;
+ fill: #f6634f;
+ fill-opacity: 0;
+}
+.ideditor .layer-mapdata path.shadow.hover:not(.selected) {
+ stroke-opacity: 0.4;
+}
+.ideditor .layer-mapdata path.shadow.selected {
+ stroke-opacity: 0.7;
}
-.pane:last-child {
- right: 0;
+.ideditor .layer-mapdata path.stroke {
+ stroke: #ff26d4;
+ stroke-width: 2;
+ fill: none;
}
-/* Buttons */
+.ideditor .layer-mapdata path.fill {
+ stroke-width: 0;
+ stroke-opacity: 0.3;
+ stroke: #ff26d4;
+ fill: #ff26d4;
+ fill-opacity: 0.3;
+ fill-rule: evenodd;
+}
-button {
- text-align: center;
- line-height:20px;
- border:0;
- background: white;
+.ideditor .layer-mapdata text.label-halo,
+.ideditor .layer-mapdata text.label {
+ font-size: 10px;
font-weight: bold;
- color:#333;
- font-size:12px;
- display: inline-block;
- height:40px;
- border-radius:4px;
+ dominant-baseline: middle;
}
-
-button:focus,
-button:hover {
- background-color: #ececec;
+.ideditor .layer-mapdata text.label {
+ fill: #ddd;
}
-
-button[disabled],
-button.disabled {
- background-color: rgba(255,255,255,.25);
- color: rgba(0,0,0,.4);
- cursor: auto;
+.ideditor .layer-mapdata text.label.hover,
+.ideditor .layer-mapdata text.label.selected {
+ fill: #fff;
}
-
-button.active {
- background: #7092ff;
+.ideditor .layer-mapdata text.label-halo {
+ opacity: 0.7;
+ stroke: #000;
+ stroke-width: 5px;
+ stroke-miterlimit: 1;
}
+/* Fill Styles */
-button.minor {
- position: absolute;
- top: 0;
- right: 0;
- height: 100%;
- width: 10%;
- border-radius: 0;
- background-color: #fafafa;
+.ideditor .low-zoom.fill-wireframe path.stroke,
+.ideditor .fill-wireframe path.stroke {
+ stroke-width: 1 !important;
+ stroke-opacity: 0.5 !important;
+ stroke-dasharray: none !important;
+ fill: none !important;
}
-[dir='rtl'] button.minor {
- right: auto;
+.ideditor .low-zoom.fill-wireframe .layer-mapdata path.stroke,
+.ideditor .fill-wireframe .layer-mapdata path.stroke {
+ stroke-width: 2 !important;
+ stroke-opacity: 1 !important;
}
-button.minor .icon {
- opacity: .5;
+.ideditor .low-zoom.fill-wireframe path.shadow,
+.ideditor .fill-wireframe path.shadow {
+ stroke-width: 12;
}
-button.minor:hover {
- background-color: #f1f1f1;
+.ideditor .fill-wireframe path.shadow.related:not(.selected),
+.ideditor .fill-wireframe path.shadow.hover:not(.selected) {
+ stroke-opacity: 0.4;
}
-
-.button-wrap {
- display: inline-block;
- padding-right:10px;
- margin: 0;
+.ideditor .fill-wireframe path.shadow.selected {
+ stroke-opacity: 0.6;
}
-.button-wrap button:only-child {
- width: 100%;
+.ideditor .fill-wireframe .point,
+.ideditor .fill-wireframe .areaicon,
+.ideditor .fill-wireframe .areaicon-halo,
+.ideditor .fill-wireframe path.casing,
+.ideditor .fill-wireframe path.fill,
+.ideditor .fill-wireframe path.oneway {
+ display: none !important;
}
-.button-wrap:last-of-type {
- padding-right: 0;
+.ideditor .fill-partial path.area.fill {
+ fill-opacity: 0;
+ stroke-width: 60px;
+ pointer-events: none;
}
-
-.joined button {
- border-radius:0;
- border-right: 1px solid rgba(0,0,0,.5);
+.ideditor .fill-partial path.area.fill.tag-building_part {
+ stroke-width: 40px;
}
-
-.fillL .joined button {
- border-right: 1px solid white;
+.ideditor .fill-partial path.area.fill.tag-indoor {
+ stroke-width: 20px;
}
-
-.joined button:first-child {
- border-radius:4px 0 0 4px;
+.ideditor.mode-browse .fill-partial path.area.fill,
+.ideditor.mode-select .fill-partial path.area.fill,
+.ideditor.mode-select-data .fill-partial path.area.fill,
+.ideditor.mode-select-error .fill-partial path.area.fill,
+.ideditor.mode-select-note .fill-partial path.area.fill {
+ pointer-events: visibleStroke;
+}
+.ideditor svg.preset-icon-category-border path {
+ stroke-width: 1;
+ stroke: rgb(170, 170, 170);
+ fill: rgba(170, 170, 170, 0.3);
}
-.joined button:last-child {
- border-right-width: 0;
- border-radius:0 4px 4px 0;
+.ideditor .preset-category-barrier svg.preset-icon-category-border path {
+ stroke: rgb(200, 144, 144);
+ fill: rgba(200, 144, 144, 0.3);
}
-button.action {
- background: #7092ff;
- color: white;
+.ideditor .preset-category-building svg.preset-icon-category-border path {
+ stroke: rgb(224, 110, 95);
+ fill: rgba(224, 110, 95, 0.3);
}
-button[disabled].action,
-button[disabled].action:hover {
- background: #cccccc;
- color: #888;
+.ideditor .preset-category-landuse svg.preset-icon-category-border path {
+ stroke: rgb(196, 189, 25);
+ fill: rgba(196, 189, 25, 0.3);
}
-button.action:focus,
-button.action:hover {
- background: #597BE7;
+.ideditor .preset-category-natural svg.preset-icon-category-border path,
+.ideditor .preset-category-playground svg.preset-icon-category-border path,
+.ideditor .preset-category-golf svg.preset-icon-category-border path {
+ stroke: rgb(140, 208, 95);
+ fill: rgba(140, 208, 95, 0.3);
}
-button.secondary-action {
- background: #ececec;
+.ideditor .preset-category-water svg.preset-icon-category-border path,
+.ideditor .preset-category-waterway svg.preset-icon-category-border path {
+ stroke: rgb(119, 211, 222);
+ fill: rgba(119, 211, 222, 0.3);
}
-button.secondary-action:focus,
-button.secondary-action:hover {
- background: #cccccc;
+.ideditor .preset-category-utility svg.preset-icon-category-border path {
+ stroke: rgb(125, 125, 125);
+ fill: rgba(219, 219, 125, 0.3);
}
-button.save .count {
- display: none;
+.ideditor .preset-category-path svg.preset-icon-category-border path {
+ stroke: rgb(221, 221, 204);
+ fill: rgba(221, 221, 204, 0.3);
}
-button.save.has-count .count {
- display: block;
- position: absolute;
- top: 5px;
- background: #fff;
- border-color: #fff;
- opacity: 0.5;
- color: #333;
- padding: 10px;
- height: 30px;
- line-height: 12px;
- border-radius: 4px;
- margin: auto;
- margin-left: 9.3333%;
+.ideditor .preset-category-road_service svg.preset-icon-category-border path,
+.ideditor .preset-category-road_minor svg.preset-icon-category-border path,
+.ideditor .preset-category-road_major svg.preset-icon-category-border path {
+ stroke: #999;
}
-button.save.has-count .count::before {
- content: "";
- margin: auto;
- width: 0;
- height: 0;
- position: absolute;
- left: -6px;
- top: 0;
- bottom: 0;
- border-top: 6px solid transparent;
- border-bottom: 6px solid transparent;
- border-right-width: 6px;
- border-right-style: solid;
- border-right-color: inherit;
+.ideditor .preset-category-rail svg.preset-icon-category-border path {
+ stroke: #555;
}
+/* Basics
+------------------------------------------------------- */
+/* the root element of iD */
+.ideditor {
+ height: 100%;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ border: 0;
+ overflow: hidden;
-/* Icons */
+ /* Establish a local stacking context so all elements within iD are on the
+ same layer relative to elements outside iD - #7457.
+ https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+ */
+ position: relative;
+ z-index: 0;
-.icon {
- vertical-align: top;
- width: 20px;
- height: 20px;
-}
+ font: normal 12px/1.6667 ui-sans-serif, "-apple-system", BlinkMacSystemFont,
+ "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
+ "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
+ sans-serif;
+ color: #333;
-.icon.inline {
- vertical-align: text-top;
- width: 14px;
- height: 14px;
- margin: 0px 3px;
-}
+ -ms-touch-action: none;
-.icon.pre-text {
- margin-right: 5px;
+ touch-action: none;
+ -ms-user-select: none;
+ -ms-content-zooming: none;
}
-
-.icon.light {
- color: #fff;
+.ideditor div {
+ /* disable pinch-to-zoom of the UI on touch devices */
+ -ms-touch-action: pan-x pan-y;
+ touch-action: pan-x pan-y;
}
-.icon.created {
- color: #00ca07;
+.ideditor .main-content {
+ position: relative;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ overflow: hidden;
+ height: 100%;
+ -ms-touch-action: none;
+ touch-action: none;
}
-.icon.modified {
- color: #666;
+.ideditor .main-content.active {
+ -webkit-filter: none !important;
+ filter: none !important;
+ -webkit-transition-duration: 200ms;
+ -o-transition-duration: 200ms;
+ transition-duration: 200ms;
}
-.icon.deleted {
- color: #ea0000;
+.ideditor .main-content.inactive {
+ -webkit-filter: grayscale(80%) brightness(80%);
+ filter: grayscale(80%) brightness(80%);
+ -webkit-transition-duration: 200ms;
+ -o-transition-duration: 200ms;
+ transition-duration: 200ms;
}
-.user-icon {
- max-height: 20px;
- max-width: 20px;
- height: auto;
- width: auto;
- border-radius: 3px;
+.ideditor #ideditor-defs {
+ /* Can't be display: none or the clippaths are ignored. */
+ position: absolute;
+ width: 0;
+ height: 0;
}
-
-/* ToolBar / Persistent UI Elements
-------------------------------------------------------- */
-
-#bar {
- position: fixed;
- padding: 10px 0;
- left:0;
- top:0;
- right:0;
- height:60px;
- z-index: 9;
- min-width: 768px;
+.ideditor div, .ideditor textarea, .ideditor label, .ideditor input, .ideditor form, .ideditor span, .ideditor ul, .ideditor li, .ideditor ol, .ideditor a, .ideditor button, .ideditor h1, .ideditor h2, .ideditor h3, .ideditor h4, .ideditor h5, .ideditor p, .ideditor img {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
}
-
-/* Header for modals / panes
-------------------------------------------------------- */
-
-.header {
- border-bottom: 1px solid #ccc;
- height: 60px;
- position: relative;
+.ideditor a, .ideditor button, .ideditor input, .ideditor textarea {
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
+ -webkit-touch-callout: none;
}
-.header h3 {
- text-align: left;
- margin-bottom: 0;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- padding: 20px 20px 20px 40px;
+.ideditor ul li {
+ list-style: none;
}
-.header button,
-.modal > button {
- border-radius: 0;
- width: 40px;
- text-align: center;
- overflow: hidden;
+.ideditor a,
+.ideditor button {
+ cursor: pointer;
}
-.header button {
- position: relative;
- height: 100%;
+.ideditor h2 {
+ font-size: 25px;
+ line-height: 1.25;
+ font-weight: bold;
+ margin-bottom: 20px;
}
-
-.entity-editor-pane .header button.preset-close,
-.preset-list-pane .header button.preset-choose {
- position: absolute;
- right: 0;
- top: 0;
+.ideditor .header h2 {
+ font-size: 20px;
+ line-height: 1.25;
+ font-weight: bold;
+ margin-bottom: 0px;
}
-.entity-editor-pane .header button.preset-choose {
- position: absolute;
- left: 0;
- top: 0;
-}
+.ideditor h3:last-child,
+.ideditor h4:last-child { margin-bottom: 0;}
-.preset-choose {
+.ideditor h3 {
font-size: 16px;
line-height: 1.25;
font-weight: bold;
+ margin-bottom: 10px;
}
-
-.modal > button {
- position: absolute;
- right: 0;
- top: 0;
- height: 59px;
- z-index: 50;
+.ideditor h4, .ideditor h5 {
+ font-size: 12px;
+ font-weight: bold;
+ padding-bottom: 10px;
}
-.footer {
- position: absolute;
- bottom: 0;
- padding: 5px 20px 5px 20px;
- border-top: 1px solid #ccc;
- background-color: #fafafa;
- width: 100%;
+.ideditor button:focus,
+.ideditor textarea:focus,
+.ideditor input[type=text]:focus,
+.ideditor input[type=search]:focus,
+.ideditor input[type=number]:focus,
+.ideditor input[type=url]:focus,
+.ideditor input[type=tel]:focus,
+.ideditor input[type=email]:focus,
+.ideditor input[type=date]:focus {
+ outline-color: transparent;
+ outline-style: none;
}
-.sidebar-component .body {
- width: 100%;
- overflow: auto;
- top: 60px;
- bottom: 0;
- position: absolute;
+.ideditor ::-webkit-input-placeholder {
+ color: #aaa;
+ opacity: 1; /* Firefox */
}
-/* Inspector
-------------------------------------------------------- */
-
-#sidebar {
- position: relative;
- float: left;
- height: 100%;
- overflow: hidden;
- z-index: 10;
- background: #f6f6f6;
- -ms-user-select: element;
+.ideditor ::-moz-placeholder {
+ color: #aaa;
+ opacity: 1; /* Firefox */
}
-.sidebar-component {
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
+.ideditor :-ms-input-placeholder {
+ color: #aaa;
+ opacity: 1; /* Firefox */
}
-.inspector-wrap {
- width: 100%;
- height: 100%;
+.ideditor ::-ms-input-placeholder {
+ color: #aaa;
+ opacity: 1; /* Firefox */
}
-.inspector-hidden {
- display: none;
+.ideditor ::placeholder {
+ color: #aaa;
+ opacity: 1; /* Firefox */
}
-.inspector-body {
- overflow-y: scroll;
- overflow-x: hidden;
- position: absolute;
- right: 0;
- left: 0;
- bottom: 0;
+.ideditor p {
+ font-size: 12px;
+ margin: 0;
+ padding: 0;
}
-
-
-.feature-list-pane .inspector-body {
- top: 120px;
+.ideditor p:last-child {
+ padding-bottom: 0;
}
-
-.preset-list-pane .inspector-body {
- top: 120px;
+.ideditor em {
+ font-style: italic;
}
-
-.entity-editor-pane .inspector-body {
- top: 60px;
+.ideditor strong {
+ font-weight: bold;
}
-
-.selection-list-pane .inspector-body {
- top: 60px;
+.ideditor a,
+.ideditor a:visited,
+.ideditor a:active {
+ color: #7092ff;
}
-
-.inspector-inner {
- padding: 20px;
- position: relative;
+.ideditor a:focus {
+ color: #597be7;
}
-
-#sidebar .search-header .icon {
- display: block;
- position: absolute;
+@media (hover: hover) {
+ .ideditor a:hover {
+ color: #597be7;
+ }
+}
+.ideditor kbd {
+ display: inline-block;
+ text-align: center;
+ padding: 3px 5px;
+ font-size: 11px;
+ line-height: 1.3;
+ min-width: 0.9em;
+ vertical-align: baseline;
+ background-color: #fcfcfc;
+ border: solid 1px #ccc;
+ margin: 0 2px;
+ border-bottom-color: #bbb;
+ border-radius: 3px;
+ -webkit-box-shadow: inset 0 -1px 0 #bbb;
+ box-shadow: inset 0 -1px 0 #bbb;
+}
+
+.ideditor code {
+ font-family: ui-monospace, monospace, monospace;
+ background: rgba(174, 174, 174, 0.25);
+ padding: 1px 2px;
+}
+
+/* Forms
+------------------------------------------------------- */
+.ideditor textarea,
+.ideditor input[type=text],
+.ideditor input[type=search],
+.ideditor input[type=number],
+.ideditor input[type=url],
+.ideditor input[type=tel],
+.ideditor input[type=email],
+.ideditor input[type=date] {
+ background-color: #fff;
+ color: #333;
+ border: 1px solid #ccc;
+ padding: 0px 10px 0px 10px;
+ border-radius: 4px;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ overflow: auto;
+}
+.ideditor input[type=text],
+.ideditor input[type=search],
+.ideditor input[type=number],
+.ideditor input[type=url],
+.ideditor input[type=tel],
+.ideditor input[type=email],
+.ideditor input[type=date],
+.ideditor input[type=color] {
+ /* need this since line-height interpretation may vary by font or browser */
+ height: 2.585em;
+}
+.ideditor textarea {
+ min-height: 2em;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ resize: vertical;
+ font:normal 12px/20px "-apple-system", BlinkMacSystemFont,
+ "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
+ "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
+ sans-serif;
+}
+
+.ideditor textarea:active,
+.ideditor input:active,
+.ideditor textarea:focus,
+.ideditor input:focus {
+ background-color: #f1f1f1;
+}
+
+.ideditor textarea.disabled,
+.ideditor input.disabled {
+ color: #777;
+ background-color: #eee;
+ cursor: not-allowed;
+}
+
+.ideditor input[type="checkbox"],
+.ideditor input[type="radio"] {
+ width: 14px;
+ height: 14px;
+ margin-right: 5px;
+ cursor: pointer;
+ vertical-align: middle;
+}
+.ideditor[dir='rtl'] input[type="checkbox"],
+.ideditor[dir='rtl'] input[type="radio"] {
+ margin-left: 5px;
+ margin-right: 0;
+}
+
+.ideditor input.mixed::-webkit-input-placeholder, .ideditor textarea.mixed::-webkit-input-placeholder {
+ font-style: italic;
+}
+
+.ideditor input.mixed::-moz-placeholder, .ideditor textarea.mixed::-moz-placeholder {
+ font-style: italic;
+}
+
+.ideditor input.mixed:-ms-input-placeholder, .ideditor textarea.mixed:-ms-input-placeholder {
+ font-style: italic;
+}
+
+.ideditor input.mixed::-ms-input-placeholder, .ideditor textarea.mixed::-ms-input-placeholder {
+ font-style: italic;
+}
+
+.ideditor input.mixed::placeholder,
+.ideditor textarea.mixed::placeholder {
+ font-style: italic;
+}
+
+/* keytraps need to be invisible yet not be display:none or visibility:hidden */
+.ideditor .keytrap {
+ width: 0;
+ height: 0;
+ padding: 0;
+ margin: 0;
+ border: 0;
+}
+
+/* tables */
+.ideditor table {
+ background-color: #fff;
+ border-collapse: collapse;
+ width: 100%;
+ border-spacing: 0;
+}
+.ideditor table th {
+ text-align: left;
+}
+.ideditor table.tags, .ideditor table.tags td, .ideditor table.tags th {
+ border: 1px solid #ccc;
+ padding: 4px;
+}
+
+.ideditor ::-ms-clear {
+ display: none;
+}
+
+/* Grid
+------------------------------------------------------- */
+.ideditor .col6 { float: left; width: 50.0000%; max-width: 600px; }
+.ideditor .col12 { float: left; width: 100.0000%; }
+
+
+/* Utility Classes
+------------------------------------------------------- */
+.ideditor .fillL {
+ background: #fff;
+ color: #333;
+}
+.ideditor .fillL2 {
+ background: #f6f6f6;
+ color: #333;
+}
+.ideditor .fillL3 {
+ background: #ececec;
+ color: #333;
+}
+.ideditor .fillD {
+ background: rgba(0,0,0,.5);
+ color: #fff;
+}
+.ideditor .fillD2 {
+ background: rgba(0,0,0,.75);
+ color: #fff;
+}
+
+.ideditor .fl { float: left;}
+.ideditor .fr { float: right;}
+.ideditor .al { left: 0; }
+.ideditor .ar { right: 0; }
+
+.ideditor input.hide,
+.ideditor textarea.hide,
+.ideditor div.hide,
+.ideditor form.hide,
+.ideditor button.hide,
+.ideditor a.hide,
+.ideditor ul.hide,
+.ideditor li.hide {
+ display: none;
+}
+
+.ideditor .deemphasize {
+ color: #a9a9a9;
+}
+.ideditor .content {
+ -webkit-box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
+ box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
+}
+.ideditor .loading {
+ background: url(<%= asset_path("iD/img/loader_bg.gif") %>);
+ background-size: 5px 5px;
+}
+
+
+/* Buttons
+------------------------------------------------------- */
+.ideditor button {
+ text-align: center;
+ border: 0;
+ background: #fff;
+ color: #333;
+ font-size: 12px;
+ display: inline-block;
+ border-radius: 4px;
+}
+
+.ideditor button:focus,
+.ideditor button:active,
+.ideditor button.hover {
+ background-color: #ececec;
+}
+@media (hover: hover) {
+ .ideditor button:hover {
+ background-color: #ececec;
+ }
+}
+.ideditor button.active {
+ background: #7092ff;
+}
+.ideditor button.disabled {
+ background-color: rgba(255,255,255,.25);
+ color: rgba(0,0,0,.4);
+ cursor: not-allowed;
+}
+
+.ideditor .joined > * {
+ border-radius: 0;
+ border-right: 1px solid rgba(0,0,0,.5);
+}
+.ideditor[dir='rtl'] .joined > * {
+ border-left: 1px solid rgba(0,0,0,.5);
+ border-right: none;
+}
+
+.ideditor .fillL .joined > * {
+ border-right: 1px solid #fff;
+}
+.ideditor .joined > *:first-child {
+ border-radius: 4px 0 0 4px;
+}
+.ideditor[dir='rtl'] .joined > *:first-child {
+ border-radius: 0 4px 4px 0;
+}
+.ideditor .joined > *:last-child {
+ border-right-width: 0;
+ border-radius: 0 4px 4px 0;
+}
+.ideditor[dir='rtl'] .joined > *.bar-button:last-child {
+ border-radius: 4px 0 0 4px;
+}
+
+
+/* Action buttons */
+.ideditor button.action {
+ background: #7092ff;
+ color: #fff;
+ font-weight: bold;
+}
+.ideditor button.action:focus,
+.ideditor button.action:active {
+ background: #597be7;
+}
+.ideditor button.secondary-action {
+ background: #ececec;
+ font-weight: bold;
+}
+.ideditor button.secondary-action:focus,
+.ideditor button.secondary-action:active {
+ background: #cccccc;
+}
+
+.ideditor button.action.disabled,
+.ideditor button[disabled].action {
+ background: #cccccc;
+ color: #888;
+ cursor: not-allowed;
+}
+
+.ideditor button.action,
+.ideditor button.secondary-action {
+ padding: 10px 5px;
+}
+
+@media (hover: hover) {
+ .ideditor button.action:hover {
+ background: #597be7;
+ }
+ .ideditor button.secondary-action:hover {
+ background: #cccccc;
+ }
+ .ideditor button.action.disabled:hover,
+ .ideditor button[disabled].action:hover {
+ background: #cccccc;
+ color: #888;
+ cursor: not-allowed;
+ }
+}
+
+
+/* Icons
+------------------------------------------------------- */
+.ideditor .icon {
+ vertical-align: middle;
+ width: 20px;
+ height: 20px;
+}
+
+.ideditor .icon.operation use {
+ fill: #222;
+ color: #79f;
+}
+.ideditor button.disabled .icon.operation use,
+.ideditor .icon.operation.disabled use {
+ fill: rgba(32,32,32,.2);
+ color: rgba(40,40,40,.2);
+}
+
+.ideditor .icon.monochrome use {
+ fill: currentColor;
+}
+
+.ideditor .icon.inline {
+ vertical-align: text-top;
+ display: inline-block;
+ width: 1.17em;
+ height: 1.17em;
+ margin: 0px 3px;
+}
+
+.ideditor .icon.pre-text {
+ margin-right: 5px;
+}
+.ideditor[dir='rtl'] .icon.pre-text {
+ margin-left: 5px;
+ margin-right: 0;
+}
+
+.ideditor .icon.pre-text.user-icon {
+ margin-left: 5px;
+ margin-right: 5px;
+}
+
+.ideditor .icon.light {
+ color: #fff;
+ fill: currentColor;
+}
+.ideditor .icon.created {
+ color: #00ca07;
+}
+.ideditor .icon.modified {
+ color: #666;
+}
+.ideditor .icon.deleted {
+ color: #ea0000;
+}
+
+.ideditor .user-icon {
+ max-height: 20px;
+ max-width: 20px;
+ height: auto;
+ width: auto;
+ border-radius: 3px;
+}
+
+.ideditor .icon-annotation {
+ color: #333;
+}
+
+
+/* Toolbar / Persistent UI Elements
+------------------------------------------------------- */
+.ideditor .top-toolbar-wrap {
+ position: relative;
+ z-index: 101;
+}
+.ideditor .top-toolbar {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ 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 */
+}
+.ideditor .top-toolbar::-webkit-scrollbar {
+ display: none; /* Chrome, Safari, Opera */
+}
+.ideditor .top-toolbar .toolbar-item {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: column wrap;
+ flex-flow: column wrap;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.ideditor .top-toolbar .toolbar-item .item-content {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ height: 40px;
+ width: auto;
+ margin: 0 5px;
+}
+.ideditor[dir='ltr'] .top-toolbar .toolbar-item:last-child .item-content,
+.ideditor[dir='rtl'] .top-toolbar .toolbar-item:first-child .item-content {
+ margin-right: 10px;
+}
+.ideditor[dir='ltr'] .top-toolbar .toolbar-item:first-child .item-content,
+.ideditor[dir='rtl'] .top-toolbar .toolbar-item:last-child .item-content {
+ margin-left: 10px;
+}
+.ideditor[dir='ltr'] .top-toolbar .toolbar-item:last-child .item-label,
+.ideditor[dir='rtl'] .top-toolbar .toolbar-item:first-child .item-label {
+ padding-right: 5px;
+}
+.ideditor[dir='ltr'] .top-toolbar .toolbar-item:first-child .item-label,
+.ideditor[dir='rtl'] .top-toolbar .toolbar-item:last-child .item-label {
+ padding-left: 5px;
+}
+.ideditor .top-toolbar .toolbar-item .item-label {
+ text-align: center;
+ font-size: 11px;
+ white-space: nowrap;
+ margin: 1px 2px 2px 2px;
+}
+.ideditor .top-toolbar .toolbar-item.spacer {
+ width: 100%;
+ -webkit-box-flex: 2;
+ -ms-flex-positive: 2;
+ flex-grow: 2;
+}
+.ideditor .top-toolbar .toolbar-item:first-child {
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+}
+.ideditor .top-toolbar .toolbar-item:last-child {
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+}
+.ideditor .top-toolbar .toolbar-item:empty:not(.spacer) {
+ display: none;
+}
+.ideditor button.bar-button {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ padding: 0 10px;
+ min-width: 30px;
+ white-space: nowrap;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ font-weight: bold;
+}
+.ideditor button.bar-button .icon {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 20px;
+ flex: 0 0 20px;
+}
+.ideditor button.bar-button .label {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
+ padding: 0 5px;
+}
+
+.ideditor button.bar-button.dragging {
+ opacity: 0.75;
+ z-index: 200;
+}
+.ideditor button.bar-button.dragging .tooltip {
+ display: none;
+}
+.ideditor button.bar-button.dragging.removing {
+ cursor: url(<%= asset_path("iD/img/cursor-select-remove.png") %>), pointer;
+}
+
+.ideditor button.save .count {
+ display: inline-block;
+ min-width: 32px;
+ text-align: center;
+}
+
+.ideditor .help-pane svg.icon.inline.add-note,
+.ideditor button.add-note svg.icon {
+ height: 15px;
+ width: 15px;
+ color: rgba(0,0,0,0.25);
+ stroke: #333;
+ stroke-width: 60px;
+ margin-top: 3px;
+}
+.ideditor button.add-note svg.icon {
+ margin-left: unset;
+ margin-right: 4px;
+}
+.ideditor[dir='rtl'] button.add-note svg.icon {
+ margin-left: 4px;
+ margin-right: unset;
+}
+.ideditor .help-pane svg.icon.inline.add-note {
+ margin-left: 3px;
+ margin-right: 3px;
+}
+
+.ideditor .spinner {
+ opacity: .5;
+ position: absolute;
+ right: 4px;
+ bottom: 4px;
+ height: 20px;
+ width: 20px;
+}
+.ideditor .spinner img {
+ height: 100%;
+ width: 100%;
+ background: transparent;
+ border-radius: 100%;
+}
+.ideditor[dir='rtl'] .spinner img {
+ -webkit-transform: scaleX(-1);
+ -ms-transform: scaleX(-1);
+ transform: scaleX(-1);
+ -webkit-filter: FlipH;
+ filter: FlipH;
+ -ms-filter: "FlipH";
+}
+
+
+.ideditor .top-toolbar.narrow .spinner,
+.ideditor .top-toolbar.narrow button.bar-button .label {
+ display: none;
+}
+.ideditor .top-toolbar.narrow button .count {
+ border-left-width: 0;
+ border-right-width: 0;
+}
+
+.ideditor[dir='ltr'] .undo-redo button:first-of-type {
+ margin-right: 1px;
+}
+.ideditor[dir='rtl'] .undo-redo button:first-of-type {
+ margin-left: 1px;
+}
+
+/* Header for modals / panes
+------------------------------------------------------- */
+.ideditor .header {
+ border-bottom: 1px solid #ccc;
+ padding: 20px 40px;
+ position: relative;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+}
+
+.ideditor .header h3 {
+ text-align: center;
+ margin-bottom: 0;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ padding: 0;
+}
+
+.ideditor .header button,
+.ideditor .modal > button {
+ border-radius: 0;
+ width: 40px;
+ text-align: center;
+ overflow: hidden;
+}
+
+.ideditor .header button {
+ position: relative;
+ height: 100%;
+}
+
+.ideditor .field-help-title button.close,
+.ideditor .sidebar .header button.close,
+.ideditor .preset-list-pane .header button.preset-choose {
+ position: absolute;
+ right: 0;
+ top: 0;
+}
+.ideditor[dir='rtl'] .field-help-title button.close,
+.ideditor[dir='rtl'] .sidebar .header button.close,
+.ideditor[dir='rtl'] .preset-list-pane .header button.preset-choose {
+ left: 0;
+ right: auto;
+}
+
+.ideditor .entity-editor-pane .header button.preset-choose {
+ position: absolute;
+ left: 0;
+ top: 0;
+}
+.ideditor[dir='rtl'] .entity-editor-pane .header button.preset-choose {
+ left: auto;
+ right: 0;
+}
+
+.ideditor .preset-choose {
+ font-size: 16px;
+ line-height: 1.25;
+ font-weight: bold;
+}
+
+.ideditor .modal > button {
+ position: absolute;
+ right: 0;
+ top: 0;
+ height: 59px;
+ z-index: 50;
+}
+.ideditor[dir='rtl'] .modal > button {
+ left: 0;
+ right: unset;
+}
+
+.ideditor .footer {
+ position: absolute;
+ bottom: 0;
+ margin: 0;
+ padding: 0 15px;
+ border-top: 1px solid #ccc;
+ background-color: #f6f6f6;
+ width: 100%;
+ height: 2.5em;
+ z-index: 1;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ list-style: none;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+
+.ideditor .footer > a {
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+
+/* Hide/Toggle collapsible sections (aka Disclosure)
+------------------------------------------------------- */
+.ideditor .hide-toggle .icon.pre-text {
+ vertical-align: middle;
+ width: 16px;
+ height: 16px;
+ margin-top: -3px;
+}
+
+.ideditor a:visited.hide-toggle,
+.ideditor a.hide-toggle {
+ display: inline-block;
+ font-size: 14px;
+ font-weight: bold;
+ margin-bottom: 5px;
+}
+
+
+/* Sidebar / Inspector
+------------------------------------------------------- */
+.ideditor .sidebar {
+ position: relative;
+ float: left;
+ height: 100%;
+ z-index: 10;
+ background: #f6f6f6;
+ -ms-user-select: element;
+ border: 0px solid #ccc;
+ border-right-width: 1px;
+}
+.ideditor[dir='rtl'] .sidebar {
+ float: right;
+ border-right-width: 0px;
+ border-left-width: 1px;
+}
+
+.ideditor .sidebar-resizer {
+ position: absolute;
+ top: 0;
+ right: -10px;
+ width: 10px;
+ height: 100%;
+ cursor: col-resize;
+ /* disable drag-to-select */
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+.ideditor[dir='rtl'] .sidebar-resizer {
+ right: auto;
+ left: -6px;
+}
+
+.ideditor .sidebar.collapsed > *:not(.sidebar-resizer) {
+ display: none;
+}
+.ideditor .sidebar.collapsed .sidebar-resizer {
+ /* make target wider to avoid the user accidentally resizing window */
+ width: 10px;
+ right: -10px;
+}
+.ideditor[dir='rtl'] .sidebar.collapsed .sidebar-resizer {
+ left: -10px;
+}
+
+.ideditor .sidebar-component {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+
+.ideditor .sidebar-component .body {
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ position: relative;
+}
+
+.ideditor .panewrap {
+ position: absolute;
+ width: 200%;
+ height: 100%;
+ right: -100%;
+}
+
+.ideditor .pane {
+ position: absolute;
+ width: 50%;
+ top: 0;
+ bottom: 2.5em;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+
+.ideditor .pane:first-child {
+ left: 0;
+}
+
+.ideditor .pane:last-child {
+ right: 0;
+}
+.ideditor .feature-list-pane {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ height: 100%;
+}
+
+.ideditor .inspector-wrap {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ position: relative;
+}
+
+.ideditor .inspector-hidden {
+ display: none;
+}
+
+.ideditor .inspector-body {
+ overflow-y: scroll;
+ overflow-x: hidden;
+ position: relative;
+ height: 100%;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 100%;
+ flex: 1 1 100%;
+}
+.ideditor .entity-editor {
+ padding: 20px;
+}
+/* preserve extra space at bottom of inspector to allow for dropdown options - #5280 */
+.ideditor .entity-editor > div:last-child {
+ margin-bottom: 150px;
+}
+
+.ideditor .sidebar .search-header {
+ position: relative;
+ overflow: hidden;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+}
+.ideditor .sidebar .search-header .icon {
+ display: inline-block;
+ position: absolute;
left: 10px;
- top: 80px;
+ height: 100%;
+ pointer-events: none;
+}
+.ideditor[dir='rtl'] .sidebar .search-header .icon {
+ left: auto;
+ right: 10px;
+}
+
+.ideditor .sidebar .search-header input {
+ width: 100%;
+ padding: 0 10px;
+ height: 3em;
+ border-radius: 0;
+ border-width: 0;
+ border-bottom-width: 1px;
+ text-indent: 30px;
+ font-size: 18px;
+ font-weight: bold;
+}
+
+.ideditor .section:not(:last-child),
+.ideditor .map-pane .section {
+ margin-bottom: 30px;
+}
+
+
+/* Feature List / Search Results
+------------------------------------------------------- */
+.ideditor .feature-list {
+ width: 100%;
+}
+.ideditor .no-results-item,
+.ideditor .feature-list-item {
+ width: 100%;
+ position: relative;
+ border-bottom: 1px solid #ccc;
+ border-radius: 0;
+}
+.ideditor .no-results-item {
+ padding: 10px;
+ font-weight: bold;
+}
+
+.ideditor .geocode-item {
+ width: 100%;
+ max-width: 200px;
+ margin: 30px auto;
+ min-height: 40px;
+}
+
+.ideditor .feature-list-item {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.ideditor .feature-list-item .label {
+ text-align: left;
+ padding: 10px;
+ white-space: nowrap;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+}
+.ideditor[dir='rtl'] .feature-list-item .label {
+ text-align: right;
+}
+
+.ideditor .feature-list-item .label .icon {
+ opacity: .5;
+}
+.ideditor .feature-list-item .close {
+ padding: 10px;
+
+}
+.ideditor .feature-list-item .close .icon {
+ opacity: 0.5;
+}
+.ideditor .feature-list-item .entity-type {
+ color: #7092ff;
+ font-weight: bold;
+}
+.ideditor .feature-list-item:active .entity-type,
+.ideditor .feature-list-item:focus .entity-type {
+ color: #597be7;
+}
+@media (hover: hover) {
+ .ideditor .feature-list-item:hover .entity-type {
+ color: #597be7;
+ }
+}
+.ideditor .feature-list-item .entity-name {
+ color: #666;
+ padding-left: 10px;
+}
+.ideditor[dir='rtl'] .feature-list-item .entity-name {
+ padding-left: 0;
+ padding-right: 10px;
+}
+.ideditor .section-selected-features .feature-list {
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ overflow: hidden;
+ margin-top: 5px;
+}
+.ideditor .section-selected-features .feature-list-item:last-child {
+ border: none;
+}
+.ideditor[dir='ltr'] .section-selected-features .feature-list-item > button:not(:first-child) {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+.ideditor[dir='rtl'] .section-selected-features .feature-list-item > button:not(:last-child) {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+}
+.ideditor[dir='ltr'] .section-selected-features .feature-list-item > button:not(:last-child) {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+}
+.ideditor[dir='rtl'] .section-selected-features .feature-list-item > button:not(:last-child) {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+
+/* Preset List and Icons
+------------------------------------------------------- */
+.ideditor .preset-list {
+ width: 100%;
+ padding: 20px 20px 10px 20px;
+}
+
+.ideditor .preset-list-item {
+ margin-bottom: 10px;
+ position: static;
+}
+
+.ideditor .preset-list-button-wrap {
+ min-height: 62px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+}
+
+.ideditor .preset-list-button {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+
+.ideditor .preset-list.filtered .preset-list-item:first-child .preset-list-button {
+ background: #ececec;
+}
+
+.ideditor .preset-icon-container {
+ position: relative;
+ width: 60px;
+ height: 60px;
+ text-align: center;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+}
+.ideditor .preset-icon-container.small {
+ width: 40px;
+ height: 40px;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+}
+.ideditor .preset-icon-container img.image-icon {
+ width: 50px;
+ height: 50px;
+ -o-object-fit: contain;
+ object-fit: contain;
+ border-radius: 2px;
+ z-index: 2;
+ visibility: hidden;
+}
+.ideditor .preset-icon-container.showing-img img.image-icon {
+ visibility: visible;
+}
+.ideditor .preset-icon-container.showing-img *:not(.image-icon) {
+ display: none;
+}
+
+.ideditor .preset-icon-point-border path {
+ stroke: #333;
+ stroke-width: 1.2;
+ fill: transparent;
+}
+
+.ideditor .preset-icon-category-border path {
+ stroke: #999;
+ stroke-width: 1px;
+ fill: transparent;
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
+ vector-effect: non-scaling-stroke;
+}
+
+.ideditor .preset-icon-line {
+ margin: auto;
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+}
+.ideditor .preset-icon-container path {
+ cursor: inherit;
+}
+.ideditor .preset-icon-container circle.vertex {
+ fill: #fff;
+ stroke: rgba(0, 0, 0, 0.25);
+}
+.ideditor .preset-icon-fill circle.midpoint {
+ fill: transparent;
+ stroke: rgba(0, 0, 0, 0.25);
+}
+/* use a consistent stroke width */
+.ideditor .preset-icon-container path.line.stroke {
+ stroke-width: 2 !important;
+}
+.ideditor .preset-icon-container path.line.casing {
+ stroke-width: 4 !important;
+}
+
+.ideditor .preset-icon-fill {
+ margin: auto;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+}
+.ideditor .preset-icon-container svg,
+.ideditor .preset-icon-container svg > * {
+ cursor: inherit !important;
+}
+.ideditor .preset-icon-fill path.area.stroke {
+ fill: transparent;
+}
+
+.ideditor .preset-icon-fill-vertex circle {
+ stroke-width: 1.5px;
+ stroke: #333;
+ fill: #efefef;
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
+}
+
+.ideditor .preset-icon {
+ width: 100%;
+ height:100%;
+ position: absolute;
+ z-index: 1;
+}
+.ideditor .preset-icon .icon {
+ position: absolute;
+ margin: auto;
+ left: 0;
+ right: 0;
+ width: 100%;
+ height: 100%;
+ -webkit-transform: scale(0.48);
+ -ms-transform: scale(0.48);
+ transform: scale(0.48);
+}
+.ideditor .preset-icon-container.small .preset-icon.point-geom .icon {
+ -webkit-transform: translateY(-7%) scale(0.27);
+ -ms-transform: translateY(-7%) scale(0.27);
+ transform: translateY(-7%) scale(0.27);
+}
+.ideditor .preset-icon-container.small .preset-icon.point-geom.preset-icon-iD .icon {
+ -webkit-transform: translateY(-9%) scale(0.5);
+ -ms-transform: translateY(-9%) scale(0.5);
+ transform: translateY(-9%) scale(0.5);
+}
+.ideditor .preset-icon.framed .icon {
+ -webkit-transform: scale(0.4);
+ -ms-transform: scale(0.4);
+ transform: scale(0.4);
+}
+.ideditor .preset-icon.framed.line-geom:not(.category) .icon,
+.ideditor .preset-icon.framed.route-geom .icon {
+ top: 20%;
+ -webkit-transform: translateY(-30%) scale(0.4);
+ -ms-transform: translateY(-30%) scale(0.4);
+ transform: translateY(-30%) scale(0.4);
+}
+.ideditor .preset-icon-iD .icon {
+ -webkit-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1);
+}
+.ideditor .preset-icon-iD.framed .icon {
+ -webkit-transform: scale(0.74);
+ -ms-transform: scale(0.74);
+ transform: scale(0.74);
+}
+.ideditor .preset-icon-iD.framed.line-geom:not(.category) .icon,
+.ideditor .preset-icon-iD.framed.route-geom .icon {
+ -webkit-transform: translateY(-30%) scale(0.74);
+ -ms-transform: translateY(-30%) scale(0.74);
+ transform: translateY(-30%) scale(0.74);
+}
+.ideditor .preset-icon-container.fallback .preset-icon .icon {
+ -webkit-transform: scale(0.5) !important;
+ -ms-transform: scale(0.5) !important;
+ transform: scale(0.5) !important;
+}
+
+.ideditor .preset-list-button .label {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ background: #f6f6f6;
+ text-align: left;
+ padding: 5px 10px;
+ border-left: 1px solid rgba(0, 0, 0, .1);
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 100%;
+ flex: 1 1 100%;
+ -ms-flex-item-align: stretch;
+ align-self: stretch;
+}
+.ideditor[dir='rtl'] .preset-list-button .label {
+ text-align: right;
+ border-left: none;
+ border-right: 1px solid rgba(0, 0, 0, .1);
+}
+.ideditor[dir='ltr'] .preset-list-item.mixed-types .preset-list-button .label {
+ border-top-right-radius: 4px;
+ border-bottom-right-radius: 4px;
+}
+.ideditor[dir='rtl'] .preset-list-item.mixed-types .preset-list-button .label {
+ border-top-left-radius: 4px;
+ border-bottom-left-radius: 4px;
+}
+.ideditor[dir='ltr'] .category .preset-list-button .label {
+ border-radius: 0px 4px 4px 0px;
+}
+.ideditor[dir='rtl'] .category .preset-list-button .label {
+ border-radius: 4px 0px 0px 4px;
+}
+
+.ideditor .preset-list-item.mixed-types .label {
+ font-style: italic;
+}
+
+.ideditor .preset-list-button .label-inner {
+ width: 100%;
+ line-height: 1.35em;
+}
+.ideditor .preset-list-button .label-inner .namepart {
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+}
+.ideditor .preset-list-button .label-inner .namepart:nth-child(1) {
+ font-weight: bold;
+}
+
+.ideditor .preset-list-button:focus .label,
+.ideditor .preset-list-button:active .label,
+.ideditor .preset-list-button.disabled,
+.ideditor .preset-list-button.disabled .label {
+ background-color: #ececec;
+}
+@media (hover: hover) {
+ .ideditor .preset-list-button:hover .label {
+ background-color: #ececec;
+ }
+}
+
+.ideditor .preset-list-button-wrap button.tag-reference-button {
+ width: 32px;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+}
+.ideditor .preset-list-button-wrap button.tag-reference-button:not(:hover):not(:active):not(:focus) {
+ background: #f6f6f6;
+}
+.ideditor[dir='ltr'] .preset-list-button-wrap button.tag-reference-button {
+ border-left: 1px solid #ccc;
+}
+.ideditor[dir='rtl'] .preset-list-button-wrap button.tag-reference-button {
+ border-right: 1px solid #ccc;
+}
+.ideditor[dir='ltr'] .preset-list-button-wrap:not(.category) button:last-child {
+ border-radius: 0 4px 4px 0;
+}
+.ideditor[dir='rtl'] .preset-list-button-wrap:not(.category) button:last-child {
+ border-radius: 4px 0 0 4px;
+}
+.ideditor .preset-list-button-wrap button.tag-reference-button .icon {
+ opacity: .5;
+}
+.ideditor .preset-list-button-wrap .accessory-buttons {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+
+
+.ideditor .current .preset-list-button,
+.ideditor .current .preset-list-button .label {
+ background-color: #e8ebff;
+}
+
+.ideditor .category .preset-list-button:after,
+.ideditor .category .preset-list-button:before {
+ content: "";
+ position: absolute;
+ top: -5px;
+ left: -1px; right: -1px;
+ border: 1px solid #ccc;
+ border-bottom: none;
+ border-radius: 6px 6px 0 0;
+ height: 6px;
+}
+
+.ideditor .category .preset-list-button:before {
+ top: -3px;
+}
+
+.ideditor .subgrid .preset-list {
+ width: auto;
+ padding: 10px;
+ margin: 0 -10px;
+ border: 0;
+ border-radius: 8px;
+}
+.ideditor .subgrid .preset-list > *:last-child {
+ margin-bottom: 0;
+}
+
+.ideditor .subgrid .arrow {
+ border: solid rgba(0, 0, 0, 0);
+ border-width: 10px;
+ border-bottom-color: #ececec;
+ width: 0;
+ height: 0;
+ margin-left: 50%;
+ margin-left: calc(50% - 10px);
+}
+
+
+/* Quick links
+------------------------------------------------------- */
+.ideditor .quick-links {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+ padding: 5px 0 0 0;
+}
+.ideditor .quick-link {
+ margin: 0 5px;
+}
+
+
+/* Entity/Preset Editor
+------------------------------------------------------- */
+.ideditor .section .grouped-items-area {
+ padding: 10px;
+ margin: 0 -10px 10px -10px;
+ border-radius: 8px;
+ background: #ececec;
+}
+.ideditor .section .grouped-items-area:empty {
+ display: none;
+}
+
+/*
+ The parts of a field:
+ - `.form-field` is a `div` wraps the entire thing
+ - `.field-label` is a `label` that wraps the top part, it contains;
+ - `span` classed `label-text`
+ - 0..n buttons for "remove", "modified", "tag reference"
+ - `.form-field-input-wrap` is a `label` or `div` that wraps the bottom part, it contains;
+ - usually an `input`
+ - sometimes some buttons (translate, increment, decrement)
+ - or could just be a `div` with anything really
+ - `.tag-reference-body` at the bottom (usually hidden)
+
+ .------------------. -
+ | Name | i | <- .field-label |
+ +------------------+ |
+ | Starbucks | + | <- .form-field-input-wrap > .form-field
+ '------------------' |
+ tag reference <- .tag-reference-body |
+ -
+*/
+
+.ideditor .form-field {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+ margin-bottom: 10px;
+ width: 100%;
+ -webkit-transition: margin-bottom 200ms;
+ -o-transition: margin-bottom 200ms;
+ transition: margin-bottom 200ms;
+}
+
+.ideditor .form-field.nowrap,
+.ideditor .wrap-form-field:last-child .form-field {
+ margin-bottom: 0;
+}
+
+/* A `label` element that wraps the top section */
+.ideditor .field-label {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 100%;
+ flex: 1 1 100%;
+ position: relative;
+ font-weight: bold;
+ color: #333;
+ background: #f6f6f6;
+ border: 1px solid #ccc;
+ border-radius: 4px 4px 0 0;
+ overflow: hidden;
+}
+.ideditor .field-label .label-text {
+ overflow: hidden;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ padding: 5px 0 4px 10px;
+}
+.ideditor[dir='rtl'] .field-label .label-text {
+ padding: 5px 10px 4px 0;
+}
+.ideditor .field-label .label-text span {
+ white-space: nowrap;
+}
+
+.ideditor .label-text .label-textannotation svg.icon {
+ margin: 0 8px;
+ color: #333;
+ opacity: 0.5;
+ width: 14px;
+ height: 14px;
+ vertical-align: text-top;
+}
+
+.ideditor .field-label button {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ border-left: 1px solid #ccc;
+ width: 32px;
+ border-radius: 0;
+}
+.ideditor[dir='rtl'] .field-label button {
+ border-left: none;
+ border-right: 1px solid #ccc;
+}
+.ideditor .field-label button:not(:hover):not(:active):not(:focus) {
+ background: none;
+}
+.ideditor .field-label .icon {
+ opacity: .5;
+
+}
+
+.ideditor .field-label .modified-icon,
+.ideditor .field-label .remove-icon,
+.ideditor .field-label .remove-icon-multilingual {
+ display: none;
+}
+.ideditor .modified:not(.locked) .field-label .modified-icon,
+.ideditor .present:not(.locked) .field-label .remove-icon,
+.ideditor .present:not(.locked) .field-label .remove-icon-multilingual {
+ display: inline-block;
+}
+
+/* A `div` element that wraps the bottom section */
+.ideditor .form-field-input-wrap {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ width: 100%;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ border-top: 0;
+ border-radius: 0 0 4px 4px;
+}
+.ideditor .nowrap .form-field-input-wrap {
+ border-radius: 0;
+}
+
+
+.ideditor .form-field-input-wrap > input,
+.ideditor .form-field-input-wrap > label,
+.ideditor .form-field-input-wrap > textarea,
+.ideditor .form-field-input-wrap > ul.chiplist {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ border: 1px solid #ccc;
+ border-top: 0;
+ border-radius: 0;
+ position: relative;
+}
+.ideditor .form-field-input-wrap > textarea {
+ height: 65px;
+ border-radius: 0 0 4px 4px;
+}
+
+/* Buttons inside fields */
+.ideditor .form-field-button {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ width: 32px;
+ position: relative;
+ background-color: #fff;
+ border: 1px solid #ccc;
+ border-radius: 0;
+ border-top-width: 0;
+ border-left-width: 0;
+ vertical-align: top;
+}
+.ideditor[dir='rtl'] .form-field-button {
+ border-left-width: 1px;
+ border-right-width: 0;
+}
+.ideditor .form-field-button:active,
+.ideditor .form-field-button:focus {
+ background-color: #f1f1f1;
+}
+@media (hover: hover) {
+ .ideditor .form-field-button:hover {
+ background-color: #f1f1f1;
+ }
+}
+.ideditor .form-field-button .icon {
+ fill: #333;
+ opacity: .5;
+}
+.ideditor .form-field-button.colour-preview {
+ border-radius: 0 0 4px 0;
+}
+.ideditor .form-field-button.colour-preview > div.colour-box {
+ border: 3px solid #fff;
+ height: 100%;
+ border-radius: 8px;
+ cursor: pointer;
+ text-align: center;
+ line-height: 20px;
+ padding: 1px 0 0 1px;
+}
+.ideditor .inspector-hover .form-field-button.colour-preview > div.colour-box {
+ border-color: #ececec;
+}
+.ideditor .form-field-button.colour-preview:active > div.colour-box,
+.ideditor .form-field-button.colour-preview:focus > div.colour-box {
+ border-color: #f1f1f1;
+}
+@media (hover: hover) {
+ .ideditor .form-field-button.colour-preview:hover > div.colour-box {
+ border-color: #f1f1f1;
+ }
+}
+.ideditor .form-field-button.colour-selector {
+ visibility: hidden;
+ position: absolute;
+}
+
+
+/* round corners of first/last child elements */
+.ideditor .form-field-input-wrap > button:last-of-type {
+ border-bottom-right-radius: 4px;
+}
+.ideditor[dir='rtl'] .form-field-input-wrap > button:last-of-type {
+ border-bottom-left-radius: 4px;
+}
+
+
+/* Field - Access, Cycleway
+------------------------------------------------------- */
+.ideditor .form-field-input-access,
+.ideditor .form-field-input-cycleway {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+}
+
+/* Field - lists with labeled input items
+------------------------------------------------------- */
+.ideditor .form-field ul.rows {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ border: 1px solid #ccc;
+ border-top: 0;
+ border-radius: 0 0 4px 4px;
+ overflow: hidden;
+ width: 100%;
+}
+.ideditor .form-field ul.rows li {
+ border-top: 1px solid #ccc;
+}
+.ideditor .form-field ul.rows li:first-child {
+ border-top: 0;
+}
+.ideditor .form-field ul.rows li {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+}
+.ideditor .form-field ul.rows li.labeled-input > span,
+.ideditor .form-field ul.rows li.labeled-input > div {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ width: 100%;
+ border-radius: 0;
+}
+.ideditor .form-field ul.rows li input {
+ border-radius: 0;
+ border-width: 0;
+ width: 100%;
+}
+.ideditor .form-field ul.rows li button {
+ border-width: 0;
+}
+.ideditor[dir='ltr'] .form-field ul.rows li.labeled-input input,
+.ideditor[dir='ltr'] .form-field ul.rows li button {
+ border-left-width: 1px;
+}
+.ideditor[dir='rtl'] .form-field ul.rows li.labeled-input input,
+.ideditor[dir='rtl'] .form-field ul.rows li button {
+ border-right-width: 1px;
+}
+
+
+/* Field - Structure
+------------------------------------------------------- */
+.ideditor .structure-extras-wrap {
+ width: 100%;
+ padding: 10px 10px;
+ background: #fff;
+ border: 1px solid #ccc;
+ border-top: 0px;
+ border-radius: 0 0 4px 4px;
+}
+.ideditor .structure-extras-wrap > ul.rows {
+ border: 1px solid #ccc;
+ border-radius: 4px;
+}
+
+
+/* Field - Combo / Multicombo
+------------------------------------------------------- */
+.ideditor .form-field-input-combo > input:only-of-type {
+ border-radius: 0 0 4px 4px;
+ width: 100%;
+}
+.ideditor .form-field-input-combo.empty-combobox input,
+.ideditor .form-field-input-multicombo .empty-combobox input {
+ padding-right: 10px;
+ padding-left: 10px;
+}
+.ideditor .form-field-input-combo.empty-combobox .combobox-caret,
+.ideditor .form-field-input-multicombo .empty-combobox .combobox-caret {
+ display: none;
+}
+
+.ideditor .form-field-input-combo input.raw-value {
+ font-family: monospace;
+}
+.ideditor .form-field-input-combo input.known-value {
+ color: #7092ff;
+}
+
+.ideditor .form-field-input-multicombo ul.chiplist {
+ padding: 5px 8px 5px 8px;
+ background: #fff;
+ display: block;
+ border-radius: 0 0 4px 4px;
+ width: 100%;
+}
+
+.ideditor .form-field-input-multicombo li {
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ margin-bottom: 3px;
+ margin-top: 3px;
+ border-radius: 4px;
+}
+.ideditor[dir='ltr'] .form-field-input-multicombo li {
+ margin-right: 6px;
+}
+.ideditor[dir='rtl'] .form-field-input-multicombo li {
+ margin-left: 6px;
+}
+
+.ideditor .form-field-input-multicombo li.chip {
+ background-color: #eff2f7;
+ border: 1px solid #ccd5e3;
+ max-width: 100%;
+ color: #7092ff;
+}
+.ideditor[dir='ltr'] .form-field-input-multicombo li.chip {
+ padding: 2px 0px 2px 5px;
+}
+.ideditor[dir='rtl'] .form-field-input-multicombo li.chip {
+ padding: 2px 5px 2px 0px;
+}
+.ideditor .form-field-input-multicombo li.chip.draggable {
+ cursor: -webkit-grab;
+ cursor: grab;
+}
+.ideditor .form-field-input-multicombo li.chip.dragging {
+ opacity: 0.75;
+ z-index: 3000;
+ cursor: -webkit-grabbing;
+ cursor: grabbing;
+}
+.ideditor .form-field-input-multicombo li.chip.raw-value {
+ font-family: monospace;
+ color: #333;
+}
+.ideditor .form-field-input-multicombo li.mixed {
+ border-color: #eff2f7;
+ color: #888;
+ font-style: italic;
+}
+
+.ideditor .form-field-input-multicombo li.chip span {
+ display: block;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ overflow: hidden;
+ word-wrap: break-word;
+}
+
+.ideditor .form-field-input-multicombo a {
+ font-family: Arial, Helvetica, sans-serif !important;
+ font-size: 16px !important;
+ padding: 0px 5px 0px 5px;
+ margin: 0;
+ cursor: pointer;
+ color: #a6b4ce;
+ display: block;
+ text-align: center;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+}
+
+.ideditor .form-field-input-multicombo .input-wrap {
+ border: 1px solid #ddd;
+ width: 100px;
+}
+.ideditor .form-field-input-multicombo input {
+ border: none;
+ width: 100%;
+}
+
+.ideditor .form-field-input-multicombo input:focus {
+ border-radius: 4px !important;
+}
+
+.ideditor .form-field-input-multicombo .full-line-chips li.chip {
+ width: 100%;
+}
+.ideditor .form-field-input-multicombo .full-line-chips .input-wrap {
+ width: auto;
+}
+
+
+/* Field - Text / Numeric
+------------------------------------------------------- */
+.ideditor .form-field-input-text > input:only-child,
+.ideditor .form-field-input-tel > input:only-of-type,
+.ideditor .form-field-input-email > input:only-of-type,
+.ideditor .form-field-input-url > input:only-child {
+ border-radius: 0 0 4px 4px;
+}
+.ideditor .form-field-input-text > input:not(:only-child),
+.ideditor .form-field-input-url > input:not(:only-child) {
+ border-radius: 0 0 0 4px;
+}
+.ideditor .form-field-input-number > input:only-of-type {
+ border-radius: 0 0 0 4px;
+}
+.ideditor[dir='rtl'] .form-field-input-number > input:only-of-type {
+ border-radius: 0 0 4px 0;
+}
+.ideditor .form-field-input-number > button:last-of-type {
+ border-radius: 0 0 4px 0;
+}
+.ideditor[dir='rtl'] .form-field-input-number > button:last-of-type {
+ border-radius: 0 0 0 4px;
+}
+
+.ideditor[dir='ltr'] .form-field-input-identifier > input:last-child,
+.ideditor[dir='rtl'] .form-field-input-identifier > input:first-child,
+.ideditor[dir='ltr'] .form-field-input-identifier > button {
+ border-bottom-right-radius: 4px;
+}
+.ideditor[dir='ltr'] .form-field-input-identifier > input:first-child,
+.ideditor[dir='rtl'] .form-field-input-identifier > input:last-child,
+.ideditor[dir='rtl'] .form-field-input-identifier > button {
+ border-bottom-left-radius: 4px;
+}
+
+/* draw the up/down on the buttons */
+.ideditor .form-field-input-number button.decrement::after,
+.ideditor .form-field-input-number button.increment::after {
+ content: "";
+ height: 0; width: 0;
+ position: absolute;
+ left: 0; right: 0; bottom: 0; top: 0;
+ margin: auto;
+}
+.ideditor .form-field-input-number button.decrement::after {
+ border-top: 5px solid #ccc;
+ border-left: 5px solid transparent;
+ border-right: 5px solid transparent;
+}
+.ideditor .form-field-input-number button.increment::after {
+ border-bottom: 5px solid #ccc;
+ border-left: 5px solid transparent;
+ border-right: 5px solid transparent;
+}
+
+
+/* Field - Checkbox
+------------------------------------------------------- */
+.ideditor .form-field-input-check {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ background: #fff;
+ padding: 5px 10px;
+ color: #7092ff;
+ border: 1px solid #ccc;
+ border-top: 0;
+ cursor: pointer;
+}
+.ideditor .form-field-input-check > input[type="checkbox"] {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
+ width: 20px;
+ margin-top: 0;
+}
+.ideditor .form-field-input-check > span {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+}
+.ideditor .form-field-input-check > span.mixed {
+ font-style: italic;
+}
+.ideditor .form-field-input-check > .reverser {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
+ background-color: #eff2f7;
+ border: 1px solid #ccd5e3;
+ border-radius: 2px;
+ padding: 0px 8px;
+ color: inherit;
+}
+.ideditor[dir='ltr'] .form-field-input-check > .reverser {
+ padding-right: 2px;
+}
+.ideditor[dir='rtl'] .form-field-input-check > .reverser {
+ padding-left: 2px;
+}
+.ideditor .form-field-input-check > .reverser:active,
+.ideditor .form-field-input-check > .reverser:focus {
+ background: #e3e8ef;
+}
+@media (hover: hover) {
+ .ideditor .form-field-input-check > .reverser:hover {
+ background: #e3e8ef;
+ }
+}
+.ideditor .form-field-input-check > .reverser.hide {
+ display: none;
+}
+.ideditor .form-field-input-check:active,
+.ideditor .form-field-input-check:focus {
+ background: #f1f1f1;
+}
+@media (hover: hover) {
+ .ideditor .form-field-input-check:hover {
+ background: #f1f1f1;
+ }
+}
+.ideditor .form-field-input-check .set {
+ color: inherit;
+}
+.ideditor .form-field-input-check label:not(.set) input[type="checkbox"] {
+ opacity: .5;
+}
+
+
+/* Field - Radio button
+------------------------------------------------------- */
+.ideditor .form-field-input-radio {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+}
+.ideditor .form-field-input-radio > label {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ width: 100%;
+ padding: 5px 10px;
+ background-color: #fff;
+ color: #7092ff;
+ cursor: pointer;
+}
+.ideditor .form-field-input-radio > label.mixed {
+ font-style: italic;
+}
+.ideditor .form-field-input-radio > label:last-child {
+ border-radius: 0 0 4px 4px;
+}
+.ideditor .form-field-input-radio > label:active,
+.ideditor .form-field-input-radio > label:focus {
+ background-color: #ececec;
+}
+@media (hover: hover) {
+ .ideditor .form-field-input-radio > label:hover {
+ background-color: #ececec;
+ }
+}
+.ideditor .form-field-input-radio > label.active {
+ background-color: #e8ebff;
+}
+.ideditor .form-field-input-radio > label:not(:last-of-type) {
+ border-bottom: 1px solid #ccc;
+}
+.ideditor .form-field-input-radio > label > input[type="radio"] {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
+ width: 20px;
+}
+.ideditor .form-field-input-radio > label > span {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ overflow: hidden;
+ white-space: nowrap;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+}
+
+/* Hide placeholder for radio buttons if another is active, or not in hover state */
+.ideditor .form-field-input-radio label.active ~ .placeholder,
+.ideditor .form-field-input-radio .placeholder {
+ padding: 0;
+ opacity: 0;
+ width: 0;
+ height: 0;
+ display: block;
+ overflow: hidden;
+}
+
+
+/* Field - roadheight and roadspeed
+------------------------------------------------------- */
+.ideditor .form-field-input-roadheight input.roadheight-number,
+.ideditor .form-field-input-roadheight input.roadheight-secondary-number,
+.ideditor .form-field-input-roadspeed input.roadspeed-number {
+ -ms-flex-preferred-size: 0;
+ flex-basis: 0;
+}
+.ideditor .form-field-input-roadheight input.roadheight-unit,
+.ideditor .form-field-input-roadheight input.roadheight-secondary-unit {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
+ width: 60px;
+}
+.ideditor .form-field-input-roadspeed input.roadspeed-unit {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
+ width: 80px;
+}
+.ideditor[dir='ltr'] .form-field-input-roadheight > input:first-of-type,
+.ideditor[dir='ltr'] .form-field-input-roadspeed > input:first-of-type {
+ border-radius: 0 0 0 4px;
+}
+.ideditor[dir='rtl'] .form-field-input-roadheight > input:first-of-type,
+.ideditor[dir='rtl'] .form-field-input-roadspeed > input:first-of-type {
+ border-radius: 0 0 4px 0;
+}
+.ideditor[dir='ltr'] .form-field-input-roadheight > input:last-of-type,
+.ideditor[dir='ltr'] .form-field-input-roadspeed > input:last-of-type {
+ border-left: 0;
+ border-radius: 0 0 4px 0;
+}
+.ideditor[dir='rtl'] .form-field-input-roadheight > input:last-of-type,
+.ideditor[dir='rtl'] .form-field-input-roadspeed > input:last-of-type {
+ border-right: 0;
+ border-radius: 0 0 0 4px;
+}
+
+
+/* Field - Localized Name
+------------------------------------------------------- */
+.ideditor .form-field-input-localized > input.localized-main {
+ border-radius: 0 0 0 4px;
+}
+.ideditor[dir='rtl'] .form-field-input-localized > input.localized-main {
+ border-radius: 0 0 4px 0;
+}
+.ideditor .form-field-input-localized > button.localized-add {
+ border-radius: 0 0 4px 0;
+}
+.ideditor[dir='rtl'] .form-field-input-localized > button.localized-add {
+ border-radius: 0 0 0 4px;
+}
+
+.ideditor .form-field-input-localized button.localized-add.disabled,
+.ideditor .form-field-input-localized input.localized-main.disabled,
+.ideditor .form-field-input-localized input.localized-lang.disabled,
+.ideditor .form-field-input-localized input.localized-value.disabled {
+ color: #777;
+ background-color: #eee;
+ cursor: not-allowed;
+}
+
+/* nested subfields for name in different languages */
+.ideditor .localized-multilingual {
+ padding: 0 10px;
+ -ms-flex-preferred-size: 100%;
+ flex-basis: 100%;
+}
+.ideditor .localized-multilingual .entry {
+ position: relative;
+ overflow: hidden;
+}
+
+/* draws a little line connecting the multilingual field up to the name field */
+.ideditor .localized-multilingual .entry::before {
+ content: "";
+ display: block;
+ position: absolute;
+ background: #ccc;
+ height: 11px;
+ width: 1px;
+ left: 0;
+ right: 0;
+ top: -11px;
+ margin: auto;
+}
+
+.ideditor .localized-multilingual .entry .localized-lang {
+ border-radius: 0;
+ border-top-width: 0;
+ width: 100%;
+}
+.ideditor .localized-multilingual .entry .localized-value {
+ border-top-width: 0;
+ border-radius: 0 0 4px 4px;
+ width: 100%;
+}
+
+
+/* Field - Address
+------------------------------------------------------- */
+.ideditor .form-field-input-address {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+ border: 1px solid #ccc;
+ border-top: 0px;
+}
+
+.ideditor .addr-row {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ width: 100%;
+}
+
+.ideditor .addr-row > input {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ border-radius: 0;
+ border-right: 0;
+ border-bottom: 0;
+}
+.ideditor[dir='rtl'] .addr-row input {
+ border-right: 1px solid #ccc;
+ border-left: 0;
+}
+
+.ideditor .addr-row:first-of-type input {
+ border-top: 0;
+}
+.ideditor .addr-row input:first-of-type {
+ border-left: 0;
+}
+.ideditor[dir='rtl'] .addr-row input:first-of-type {
+ border-right: 0;
+}
+.ideditor .addr-row:last-of-type input:first-of-type {
+ border-radius: 0 0 0 4px;
+}
+.ideditor[dir='rtl'] .addr-row:last-of-type input:first-of-type {
+ border-radius: 0 0 4px 0;
+}
+.ideditor .addr-row:last-of-type input:last-of-type {
+ border-radius: 0 0 4px 0;
+}
+.ideditor[dir='rtl'] .addr-row:last-of-type input:last-of-type {
+ border-radius: 0 0 0 4px;
+}
+
+
+/* Field - Wikipedia
+------------------------------------------------------- */
+.ideditor .form-field-input-wikipedia {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+}
+
+.ideditor .wiki-lang-container,
+.ideditor .wiki-title-container {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ width: 100%;
+}
+
+.ideditor .wiki-lang-container > input.wiki-lang,
+.ideditor .wiki-title-container > input.wiki-title {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ border-top: 0;
+ border-radius: 0;
+}
+.ideditor .wiki-title-container > input.wiki-title {
+ border-radius: 0 0 0 4px;
+}
+.ideditor[dir='rtl'] .wiki-title-container > input.wiki-title {
+ border-radius: 0 0 4px 0;
+}
+.ideditor .wiki-title-container > button.wiki-link,
+.ideditor .form-field-wikidata ul.rows li:last-child button.form-field-button:last-child {
+ border-radius: 0 0 4px 0;
+}
+.ideditor[dir='rtl'] .wiki-title-container > button.wiki-link,
+.ideditor[dir='rtl'] .form-field-wikidata ul.rows li:last-child button.form-field-button:last-child {
+ border-radius: 0 0 0 4px;
+}
+
+
+/* Field - Restriction Editor
+------------------------------------------------------- */
+.ideditor .form-field-input-restrictions {
+ display: block;
+ border: 1px solid #ccc;
+ border-top: 0;
+ border-radius: 0 0 4px 4px;
+}
+
+.ideditor .form-field-input-restrictions .restriction-controls-container {
+ background-color: #fff;
+ width: 100%;
+ padding: 5px;
+ border-top: 1px solid #ccc;
+ border-radius: 0 0 4px 4px;
+}
+
+.ideditor .restriction-controls-container .restriction-controls {
+ display: table;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.ideditor .restriction-controls .restriction-control {
+ display: table-row;
+ padding: 5px 10px;
+ height: 25px;
+}
+
+.ideditor .restriction-control input,
+.ideditor .restriction-control > span {
+ display: table-cell;
+ text-align: start;
+ padding: 0px 5px;
+}
+
+.ideditor .restriction-control > span.restriction-control-label {
+ text-align: end;
+}
+
+.ideditor .restriction-control input {
+ width: 60px;
+ padding: 0;
+ margin: 0px 5px;
+ vertical-align: middle;
+}
+
+.ideditor .form-field-input-restrictions .restriction-container {
+ position: relative;
+ height: 370px;
+}
+/* zero width space, so container takes up space */
+.ideditor .form-field-input-restrictions .restriction-container:after {
+ content: '\200b';
+}
+
+.ideditor .form-field-input-restrictions svg.surface {
+ width: 100%;
+ height: 100%;
+}
+
+.ideditor .restriction-container .restriction-help {
+ z-index: 1;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ padding: 2px 6px;
+ background-color: rgba(255, 255, 255, .8);
+ color: #888;
+ text-align: center;
pointer-events: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.ideditor .restriction-help span {
+ margin: 2px;
+}
+
+.ideditor .restriction-help .qualifier {
+ color: #666;
+ font-weight: bold;
+}
+.ideditor .restriction-help .qualifier.allow {
+ color: #8b5;
+}
+.ideditor .restriction-help .qualifier.restrict {
+ color: #d53;
+}
+.ideditor .restriction-help .qualifier.only {
+ color: #78f;
+}
+
+
+/* Field - Changeset Comment
+------------------------------------------------------- */
+.ideditor .form-field-comment:not(.present) #preset-input-comment {
+ border-color: rgb(230, 100, 100);
+}
+.ideditor .form-field-comment:not(.present) .field-label {
+ border-color: rgb(230, 100, 100);
+ background: rgba(230, 100, 100, 0.2);
+}
+.ideditor .form-field-comment:not(.present) button {
+ border-color: rgb(230, 100, 100);
+}
+
+
+/* Field - Combobox
+------------------------------------------------------- */
+.ideditor[dir='ltr'] textarea.combobox-input,
+.ideditor[dir='ltr'] input.combobox-input {
+ /* leave room for the caret */
+ padding-right: 20px;
+}
+.ideditor[dir='rtl'] textarea.combobox-input,
+.ideditor[dir='rtl'] input.combobox-input {
+ padding-left: 20px;
}
-#sidebar .search-header input {
- position: absolute;
- top: 60px;
- height: 60px;
- width: 100%;
+.ideditor div.combobox {
+ z-index: 9999;
+ display: none;
+ -webkit-box-shadow: 0 4px 10px 1px rgba(0,0,0,.2);
+ box-shadow: 0 4px 10px 1px rgba(0,0,0,.2);
+ margin-top: -1px;
+ background: #fff;
+ max-height: 245px;
+ overflow-y: auto;
+ overflow-x: hidden;
+ border: 1px solid #ccc;
+ border-radius: 0 0 4px 4px;
+}
+
+.ideditor .combobox a {
+ display: block;
padding: 5px 10px;
+ border-top: 1px solid #ccc;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+.ideditor .combobox a.selected,
+.ideditor .combobox a:active,
+.ideditor .combobox a:focus {
+ background: #ececec;
+}
+@media (hover: hover) {
+ .ideditor .combobox a:hover {
+ background: #ececec;
+ }
+}
+
+.ideditor .combobox a:first-child {
+ border-top: 0;
+ padding: 4px 10px;
+}
+
+.ideditor .combobox-caret {
+ display: inline-block;
+ position: relative;
+ height: 5px;
+ width: 30px !important;
+ margin-left: -30px;
+ -ms-flex-item-align: center;
+ align-self: center;
+ vertical-align: middle;
+ cursor: pointer;
+}
+.ideditor[dir='rtl'] .combobox-caret {
+ margin-left: 0;
+ margin-right: -30px;
+}
+
+.ideditor .combobox-caret::after {
+ content: "";
+ height: 0; width: 0;
+ position: absolute;
+ left: 0; right: 0; bottom: 0; top: 0;
+ margin: auto;
+ border-top: 5px solid #ccc;
+ border-left: 5px solid transparent;
+ border-right: 5px solid transparent;
+}
+
+.ideditor .combobox .combobox-option.raw-option {
+ font-family: monospace;
+ color: #333;
+}
+
+
+/* Field Help
+------------------------------------------------------- */
+.ideditor .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);
+ -webkit-box-shadow: 0 0 30px 5px rgba(0,0,0,.4);
+ box-shadow: 0 0 30px 5px rgba(0,0,0,.4);
+}
+
+.ideditor .field-help-title h2 {
+ padding: 10px;
+ margin-bottom: 0px;
+ font-size: 17px;
+}
+.ideditor .field-help-title button {
+ width: 45px;
+ height: 55px;
border-radius: 0;
- border-width: 0;
- border-bottom-width: 1px;
- text-indent: 30px;
- font-size: 18px;
+}
+
+.ideditor .field-help-nav {
+ font-size: 13px;
+ font-weight: bold;
+ margin-bottom: 10px;
+}
+.ideditor .field-help-nav-item {
+ display: inline-block;
+ padding: 5px 10px;
+ cursor: pointer;
+ color: #666;
+}
+.ideditor .field-help-nav-item.active {
+ color: #7092ff;
+ border-bottom: 2px solid;
+}
+.ideditor .field-help-nav-item:active,
+.ideditor .field-help-nav-item:focus {
+ color: #597be7;
+ background-color: #efefef;
+}
+@media (hover: hover) {
+ .ideditor .field-help-nav-item:hover {
+ color: #597be7;
+ background-color: #efefef;
+ }
+}
+
+.ideditor .field-help-content {
+ padding: 10px;
+ overflow-y: auto;
+ overflow-x: hidden;
+}
+.ideditor .field-help-content h3 {
+ font-size: 12px;
+ margin-bottom: 5px;
+}
+.ideditor .field-help-content p {
+ margin-bottom: 15px;
+}
+.ideditor .field-help-content ul li {
+ list-style: inside;
+ margin-bottom: 5px;
+}
+
+.ideditor .field-help-content .field-help-image {
+ width: 100%;
+ margin-bottom: 15px;
+}
+
+.ideditor .field-help-content svg.turn {
+ width: 40px;
+ height: 20px;
+}
+.ideditor .field-help-content svg.shadow {
+ opacity: 0.7;
+ width: 60px;
+ height: 20px;
+}
+.ideditor .field-help-content svg.from {
+ color: #777;
+}
+.ideditor .field-help-content svg.allow {
+ color: #5b3;
+}
+.ideditor .field-help-content svg.restrict {
+ color: #d53;
+}
+.ideditor .field-help-content svg.only {
+ color: #68f;
+}
+
+.ideditor .field-help-content p.from_shadow,
+.ideditor .field-help-content p.allow_shadow,
+.ideditor .field-help-content p.restrict_shadow,
+.ideditor .field-help-content p.allow_turn,
+.ideditor .field-help-content p.restrict_turn {
+ margin-bottom: 5px;
+}
+
+
+/* More Fields dropdown
+------------------------------------------------------- */
+.ideditor .more-fields {
+ margin-top: 10px;
font-weight: bold;
}
-/* Feature list */
+.ideditor .more-fields label {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+
+.ideditor .more-fields input {
+ margin-left: 10px;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+}
+.ideditor[dir='rtl'] .more-fields input {
+ margin-left: auto;
+ margin-right: 10px;
+}
+
+.ideditor .form-field-input-wrap .label {
+ background: #f6f6f6;
+ padding: 5px 10px;
+}
+
+
+/* Raw Tag Editor
+------------------------------------------------------- */
+.ideditor .raw-tag-options {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+ margin-top: -28px;
+}
+.ideditor button.raw-tag-option {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ padding: 3px;
+ background: #aaa;
+ color: #eee;
+ margin: 0 3px;
+}
+.ideditor button.raw-tag-option:focus,
+.ideditor button.raw-tag-option.active {
+ color: #fff;
+ background: #597be7;
+}
+@media (hover: hover) {
+ .ideditor button.raw-tag-option:hover {
+ color: #fff;
+ background: #597be7;
+ }
+}
+.ideditor button.raw-tag-option.selected {
+ color: #fff;
+ background: #7092ff;
+}
+.ideditor button.raw-tag-option svg.icon {
+ width: 14px;
+ height: 14px;
+ display: block;
+}
+.ideditor[dir='ltr'] button.raw-tag-option-list {
+ -webkit-transform: scaleX(-1);
+ -ms-transform: scaleX(-1);
+ transform: scaleX(-1);
+ -webkit-filter: FlipH;
+ filter: FlipH;
+ -ms-filter: "FlipH";
+}
+
-.feature-list {
- width:100%;
+.ideditor .tag-text {
+ width: 100%;
+ height: 100%;
+ min-height: 32px;
+ font-family: monospace;
+ white-space: pre;
}
-.no-results-item,
-.geocode-item,
-.feature-list-item {
+.ideditor .tag-text,
+.ideditor .tag-list {
+ margin-top: 10px;
+}
+.ideditor .tag-row {
width: 100%;
position: relative;
- border-bottom: 1px solid #ccc;
+}
+.ideditor .tag-row .inner-wrap {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ width: 100%;
+ position: relative;
+}
+.ideditor .tag-row .key-wrap,
+.ideditor .tag-row .value-wrap {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 50%;
+ flex: 1 1 50%;
+}
+
+.ideditor .tag-text.readonly,
+.ideditor .tag-row.readonly,
+.ideditor .tag-row.readonly input.key,
+.ideditor .tag-row.readonly input.value,
+.ideditor .tag-row.readonly button.remove {
+ color: #777;
+ background-color: #eee;
+ cursor: not-allowed;
+}
+
+.ideditor .tag-row input {
+ border: 0;
border-radius: 0;
+ border-bottom: 1px solid #ccc;
+ border-left: 1px solid #ccc;
+ width: 100%;
+}
+.ideditor[dir='rtl'] .tag-row input {
+ border-left: none;
+ border-right: 1px solid #ccc;
}
-.feature-list-item {
- background-color: white;
+
+.ideditor .tag-row input.key {
font-weight: bold;
- height: 40px;
- line-height: 20px;
+ background-color: #f6f6f6;
}
-.feature-list-item:hover {
- background-color: #ececec;
+.ideditor .tag-row input.value {
+ border-right: 1px solid #ccc;
+}
+.ideditor[dir='rtl'] .tag-row input.value {
+ border-left: 1px solid #ccc;
}
-.feature-list-item button {
- background: transparent;
+.ideditor .tag-row:first-child input.key {
+ border-top: 1px solid #ccc;
+ border-top-left-radius: 4px;
+}
+.ideditor[dir='rtl'] .tag-row:first-child input.key {
+ border-top-left-radius: 0;
+ border-top-right-radius: 4px;
}
-.feature-list-item .label {
- text-align: left;
- padding: 10px 10px;
- white-space: nowrap;
- text-overflow: ellipsis;
+.ideditor .tag-row:first-child input.value {
+ border-top: 1px solid #ccc;
+}
+.ideditor .tag-row button {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ width: 32px;
+ border: 1px solid #ccc;
+ border-top-width: 0;
+ border-left-width: 0;
+}
+.ideditor[dir='rtl'] .tag-row button {
+ border-left-width: 1px;
+ border-right-width: 0;
+}
+
+.ideditor .tag-row button:active,
+.ideditor .tag-row button:focus {
+ background: #f1f1f1;
+}
+@media (hover: hover) {
+ .ideditor .tag-row button:hover {
+ background: #f1f1f1;
+ }
+}
+.ideditor .tag-row button .icon {
+ opacity: .5;
+}
+.ideditor .tag-row:first-child button {
+ border-top-width: 1px;
+}
+
+.ideditor .tag-row:first-child .tag-reference-button {
+ border-top-right-radius: 4px;
+}
+.ideditor[dir='rtl'] .tag-row:first-child .tag-reference-button {
+ border-top-left-radius: 4px;
+ border-top-right-radius: 0;
+}
+
+.ideditor .tag-row:last-child .tag-reference-button {
+ border-bottom-right-radius: 4px;
+}
+.ideditor[dir='rtl'] .tag-row:last-child .tag-reference-button {
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 0;
+}
+
+.ideditor .tag-row .tag-reference-button {
+ border-radius: 0;
+}
+.ideditor[dir='rtl'] .tag-row .tag-reference-button {
+ border-left-width: 1px;
+ border-right-width: 0;
+}
+
+/* Tag reference */
+.ideditor .tag-reference-loading {
+ background-color: #f5f5f5;
+}
+.ideditor .tag-reference-loading .icon {
+ background-image: url(<%= asset_path("iD/img/mini-loader.gif") %>);
+ background-position: 0 0;
+}
+
+.ideditor .tag-reference-body {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ width: 100%;
overflow: hidden;
- border-left: 1px solid rgba(0, 0, 0, .1);
+ display: none;
+ padding-top: 10px;
+}
+.ideditor .tag-reference-body.expanded {
+ padding-bottom: 10px;
+ display: inline-block;
+}
+.ideditor .tag-reference-description {
+
+}
+.ideditor .tag-reference-link {
+ display: block;
+}
+
+.ideditor img.tag-reference-wiki-image {
+ float: right;
+ width: 33.3333%;
+ border-radius: 4px;
+ margin: 0 0 0 5px;
+}
+.ideditor[dir='rtl'] img.tag-reference-wiki-image {
+ float: left;
+ margin: 0 5px 0 0;
+}
+
+.ideditor .preset-list .tag-reference-body {
+ position: relative;
+ width: 100%;
+}
+.ideditor .raw-tag-editor .tag-reference-body {
+ width: 100%;
}
-
-.feature-list-item .label .icon {
- opacity: .5;
+.ideditor .raw-tag-editor .tag-row.readonly .tag-reference-body {
+ background: #f6f6f6;
+ color: #333;
}
-
-.feature-list-item .close {
- float: right;
- padding: 10px;
+.ideditor .raw-tag-editor .tag-row:not(:last-child) .tag-reference-body.expanded {
+ border-bottom: 1px solid #ccc;
}
-
-.feature-list-item .close .icon {
- opacity: 1;
+.ideditor .raw-tag-editor .tag-row.readonly .tag-reference-body.expanded {
+ border-top: 1px solid #ccc;
}
-.feature-list-item .entity-type {
- color:#7092ff;
-}
-.feature-list-item:hover .entity-type {
- color:#597be7;
+/* Raw Member / Membership Editor
+------------------------------------------------------- */
+.ideditor .section-raw-member-editor .member-list:empty,
+.ideditor .section-raw-membership-editor .member-list:empty {
+ display: none;
}
-.feature-list-item .entity-name {
+.ideditor .section-raw-member-editor .member-list,
+.ideditor .section-raw-membership-editor .member-list {
+ position: relative; /* required for drag-and-drop */
+ padding-top: 5px;
+}
+.ideditor .section-raw-member-editor .member-list li,
+.ideditor .section-raw-membership-editor .member-list li {
+ position: relative;
+ border-radius: 4px;
+ margin: 0;
+ padding-bottom: 10px;
+}
+.ideditor .section-raw-member-editor .member-row .member-entity-name,
+.ideditor .section-raw-membership-editor .member-row .member-entity-name {
font-weight: normal;
- color: #666;
padding-left: 10px;
}
-/* Presets
-------------------------------------------------------- */
-
-/* Preset grid */
-
-.preset-list {
- width:100%;
- padding: 20px 20px 10px 20px;
- border-bottom: 1px solid #ccc;
+.ideditor[dir='rtl'] .section-raw-member-editor .member-row .member-entity-name,
+.ideditor[dir='rtl'] .section-raw-membership-editor .member-row .member-entity-name {
+ padding-left:0;
+ padding-right: 10px;
}
-.preset-list-button-wrap {
- position: relative;
- margin-bottom: 10px;
- height: 60px;
+.ideditor .form-field-input-member > input.member-role {
+ border-radius: 0 0 4px 4px;
}
-.preset-list-button {
- width: 100%;
- height: 100%;
- position: relative;
- border: 1px solid #ccc;
+.ideditor .member-row-new .member-entity-input {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 100%;
+ flex: 1 1 100%;
+ border-radius: 4px 4px 0 0;
+ border: 0;
}
-.preset-list.filtered .preset-list-item:first-child .preset-list-button {
- background: #ececec;
+.ideditor .section-raw-member-editor .member-row.dragging {
+ opacity: 0.75;
+ z-index: 3000;
+ /*
+ box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
+ */
}
-.preset-icon-fill-area {
- cursor: inherit;
- height: 40px;
- width: 40px;
- margin: auto;
- position: absolute;
- left: 10px;
- top: 10px;
+/* add tag, add relation buttons */
+.ideditor .add-row {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ width: 100%;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+}
+.ideditor .add-row .add-tag,
+.ideditor .add-row .add-relation,
+.ideditor .add-row .space-value {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 50%;
+ flex: 1 1 50%;
+}
+.ideditor .add-row .space-buttons {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 62px;
+ flex: 0 0 62px;
+}
+.ideditor .add-row button {
+ padding: 5px;
+ background: rgba(0,0,0,.5);
}
-
-.preset-icon-fill-vertex {
- height: 40px;
- width: 40px;
- margin: auto;
- position: absolute;
- left: 10px;
- top: 10px;
- border: 1.5px solid #333;
- border-radius: 20px;
- background-color: #efefef;
+.ideditor .add-row button:focus,
+.ideditor .add-row button:active {
+ background: rgba(0,0,0,.8);
}
-
-[dir='rtl'] .preset-icon-fill-vertex,
-[dir='rtl'] .preset-icon-fill-area {
- left: auto;
- right: 10px;
+@media (hover: hover) {
+ .ideditor .add-row button:hover {
+ background: rgba(0,0,0,.8);
+ }
}
-.preset-icon-frame {
- position: absolute;
- top: 7px;
- left: 7px;
- height: 42px;
- width: 42px;
- margin: auto;
+.ideditor .add-tag {
+ border-radius: 0 0 4px 4px;
}
-[dir='rtl'] .preset-icon-frame {
- left: auto;
- right: 7px;
+.ideditor .add-relation {
+ margin-top: 10px;
+ border-radius: 4px;
}
-.preset-icon-frame .icon {
- width: 46px;
- height: 46px;
-}
-.preset-icon-60 {
- position: absolute;
- top: 0px;
- left: 0px;
- margin: auto;
+/* OSM Note / QA Editors
+------------------------------------------------------- */
+.ideditor .note-header,
+.ideditor .qa-header {
+ background-color: #f6f6f6;
+ border-radius: 5px;
+ border: 1px solid #ccc;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
}
-.preset-icon-60 .icon {
+.ideditor .note-header-icon,
+.ideditor .qa-header-icon {
+ background-color: #fff;
+ padding: 10px;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ position: relative;
width: 60px;
height: 60px;
+ border-right: 1px solid #ccc;
+ border-radius: 5px 0 0 5px;
}
-
-.preset-icon-44 {
- position: absolute;
- top: 9px;
- left: 8px;
- margin: auto;
+.ideditor[dir='rtl'] .note-header-icon,
+.ideditor[dir='rtl'] .qa-header-icon {
+ border-right: unset;
+ border-left: 1px solid #ccc;
+ border-radius: 0 5px 5px 0;
}
-.preset-icon-44 .icon {
- width: 44px;
- height: 44px;
+.ideditor .note-header-icon .icon-wrap,
+.ideditor .qa-header-icon .icon-wrap {
+ position: absolute;
+ top: 0px;
}
-
-.preset-icon-28 {
+.ideditor .preset-icon-28 {
position: absolute;
top: 16px;
left: 16px;
margin: auto;
}
-
-.preset-icon-28 .icon {
+.ideditor .preset-icon-28 .icon {
width: 28px;
height: 28px;
}
-.preset-icon-24 {
- position: absolute;
- top: 18px;
- left: 18px;
- margin: auto;
+.ideditor .note-header-label,
+.ideditor .qa-header-label {
+ background-color: #f6f6f6;
+ padding: 0 15px;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 100%;
+ flex: 1 1 100%;
+ font-size: 14px;
+ font-weight: bold;
+ border-radius: 0 5px 5px 0;
}
-
-.preset-icon-24 .icon {
- width: 24px;
- height: 24px;
+.ideditor[dir='rtl'] .note-header-label,
+.ideditor[dir='rtl'] .qa-header-label {
+ border-radius: 5px 0 0 5px;
}
-.preset-list-button .label {
- background-color: #f6f6f6;
- text-align: left;
- position: absolute;
- top: 0;
- bottom: 0;
- right: 0;
- padding: 5px 10px;
- left: 60px;
- line-height: 50px;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- border-left: 1px solid rgba(0, 0, 0, .1);
- border-radius: 0 3px 3px 0;
- }
-
-.preset-list-button:hover .label {
- background-color: #ececec;
+.ideditor .note-category {
+ margin: 20px 0px;
}
-.preset-list-item button.tag-reference-button {
- height: 100%;
- border: 1px solid #CCC;
- border-radius: 0 3px 3px 0;
- position: absolute;
- top: 0;
- right: 0;
- width: 10%;
- background: #fafafa;
+.ideditor .comments-container {
+ background: #ececec;
+ padding: 1px 10px;
+ border-radius: 8px;
+ margin-top: 20px;
}
-.preset-list-item button.tag-reference-button:hover {
- background: #f1f1f1;
+.ideditor .comment {
+ background-color: #fff;
+ border-radius: 5px;
+ border: 1px solid #ccc;
+ margin: 10px auto;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+}
+.ideditor .comment-avatar {
+ padding: 10px;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+}
+.ideditor .comment-avatar .icon.comment-avatar-icon {
+ width: 40px;
+ height: 40px;
+ -o-object-fit: cover;
+ object-fit: cover;
+ border: 1px solid #ccc;
+ border-radius: 20px;
+}
+.ideditor .comment-main {
+ padding: 10px 10px 10px 0;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 100%;
+ flex: 1 1 100%;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: column nowrap;
+ flex-flow: column nowrap;
+ overflow: hidden;
+ overflow-wrap: break-word;
+}
+.ideditor[dir='rtl'] .comment-main {
+ padding: 10px 0 10px 10px;
}
-.preset-list-item button.tag-reference-button .icon {
- opacity: .5;
+.ideditor .comment-metadata {
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+}
+.ideditor .comment-author {
+ font-weight: bold;
+ color: #333;
+}
+.ideditor .comment-date {
+ color: #aaa;
+}
+.ideditor .comment-text {
+ color: #333;
+ margin-top: 10px;
+ overflow-y: auto;
+ max-height: 250px;
+}
+.ideditor .comment-text::-webkit-scrollbar {
+ border-left: none;
}
-.current .preset-list-button,
-.current .preset-list-button .label {
- background-color: #E8EBFF;
+.ideditor .note-save,
+.ideditor .qa-save {
+ padding-top: 20px;
}
-.category .preset-list-button:after,
-.category .preset-list-button:before {
- content: "";
- position: absolute;
- top: -5px;
- left: -1px; right: -1px;
+.ideditor .qa-details-container {
+ background: #ececec;
+ padding: 10px;
+ margin-top: 20px;
+ border-radius: 4px;
border: 1px solid #ccc;
- border-bottom: none;
- border-radius: 6px 6px 0 0;
- height: 6px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
}
-
-.category .preset-list-button:before {
- top: -3px;
+.ideditor .qa-details-description-text::first-letter {
+ text-transform: capitalize;
}
-
-.subgrid .preset-list {
- padding: 10px 10px 0 10px;
- margin-top: 0;
- border: 0;
- border-radius: 8px;
- width: -webkit-calc(100% + 20px);
- margin-left: -10px;
+.ideditor[dir='rtl'] .qa-details-description-text::first-letter {
+ text-transform: none; /* #5877 */
}
-
-.subgrid .arrow {
- border: solid rgba(0, 0, 0, 0);
- border-width: 10px;
- border-bottom-color: #f1f1f1;
- width: 0;
- height: 0;
- margin-left: 50%;
- margin-left: -webkit-calc(50% - 10px);
- margin-top: -10px;
+.ideditor .qa-details-subsection h4 {
+ padding-bottom: 2px;
+}
+.ideditor .qa-details-subsection:not(:last-child) {
+ margin-bottom: 10px;
+}
+.ideditor .qa-details-subsection:empty {
+ display: none;
}
+.ideditor .note-save .new-comment-input,
+.ideditor .qa-save .new-comment-input {
+ width: 100%;
+ height: 100px;
+ max-height: 300px;
+ min-height: 100px;
+}
-/* preset form basics */
+.ideditor .note-save .detail-section,
+.ideditor .qa-save .detail-section {
+ margin: 10px 0;
+}
-.inspector-preset {
- overflow: hidden;
- padding-bottom: 10px;
+.ideditor .note-report {
+ float: right;
}
-.inspector-preset a.hide-toggle {
- margin: 0 20px 10px 20px;
+
+/* Custom Data Editor
+------------------------------------------------------- */
+.ideditor .data-header {
+ background-color: #f6f6f6;
+ border-radius: 5px;
+ border: 1px solid #ccc;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
}
-.inspector-preset .preset-form {
+.ideditor .data-header-icon {
+ background-color: #fff;
padding: 10px;
- margin: 0 10px 10px 10px;
- border-radius: 8px;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ position: relative;
+ width: 60px;
+ height: 60px;
+ border-right: 1px solid #ccc;
+ border-radius: 5px 0 0 5px;
+}
+.ideditor[dir='rtl'] .data-header-icon {
+ border-right: unset;
+ border-left: 1px solid #ccc;
+ border-radius: 0 5px 5px 0;
}
-.entity-editor-pane .preset-list-item .preset-list-button-wrap {
- margin-bottom: 0;
+.ideditor .data-header-icon .icon-wrap {
+ position: absolute;
+ top: 0px;
}
-.form-field {
- margin-bottom: 10px;
- width: 100%;
- -webkit-transition: margin-bottom 200ms;
- -moz-transition: margin-bottom 200ms;
- -o-transition: margin-bottom 200ms;
- transition: margin-bottom 200ms;
+.ideditor .data-header-label {
+ background-color: #f6f6f6;
+ padding: 0 15px;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 100%;
+ flex: 1 1 100%;
+ font-size: 14px;
+ font-weight: bold;
+ border-radius: 0 5px 5px 0;
+}
+.ideditor[dir='rtl'] .data-header-label {
+ border-radius: 5px 0 0 5px;
}
-.form-field:last-child {
- margin-bottom: 0;
+/* custom data editor - no info/delete buttons */
+.ideditor .data-editor.raw-tag-editor .tag-row button {
+ display: none;
+}
+.ideditor .data-editor.raw-tag-editor .tag-row .key-wrap,
+.ideditor .data-editor.raw-tag-editor .tag-row .value-wrap {
+ width: 50%;
}
-.form-label {
+
+.ideditor .over-map {
position: relative;
- font-weight: bold;
- border: 1px solid #cfcfcf;
- padding: 5px 0 5px 10px;
- background: #f6f6f6;
- display: block;
- border-radius: 4px 4px 0 0;
+ height: 100%;
+ pointer-events: none;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: reverse;
+ -ms-flex-direction: row-reverse;
+ flex-direction: row-reverse;
+ -webkit-box-align: end;
+ -ms-flex-align: end;
+ align-items: flex-end;
overflow: hidden;
}
-[dir='rtl'] .form-label {
- padding: 5px 10px 5px 0;
+.ideditor .over-map > * {
+ pointer-events: auto;
+ z-index: 5;
+}
+/* offscreen this without hiding it */
+.ideditor .over-map .select-trap {
+ position: absolute;
+ right: -1000%;
+ opacity: 0;
}
-.form-label-button-wrap {
+/* Map Controls
+------------------------------------------------------- */
+.ideditor .map-controls-wrap {
position: absolute;
- top: 0;
+ left: 0;
right: 0;
height: 100%;
- width: 100%;
- background: transparent;
- text-align: right;
+ z-index: 100;
+ display: block;
+ overflow-x: hidden;
+ overflow-y: auto;
+ pointer-events: none;
+ -ms-overflow-style: none;
+ scrollbar-width: none;
}
-[dir='rtl'] .form-label-button-wrap {
- text-align: left;
+.ideditor .map-controls-wrap::-webkit-scrollbar {
+ display: none;
}
-
-.form-label-button-wrap .tag-reference-button {
- border-radius: 0 3px 0 0;
+.ideditor .map-controls {
+ right: 0;
+ top: 0;
+ width: 40px;
+ position: absolute;
+ bottom: 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ padding: 5px 0;
+ pointer-events: none;
+}
+.ideditor .map-controls:before {
+ content: '';
+ display: inline-block;
+ pointer-events: none;
+ width: 40px;
+ height: 100%;
+ max-height: 70px;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
+}
+.ideditor[dir='rtl'] .map-controls {
+ left: 0;
+ right: auto;
}
-.form-label-button-wrap .icon {
- opacity: .5;
+.ideditor .map-control {
+ position: relative;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.ideditor .map-control > button {
+ position: relative;
+ width: 40px;
+ height: 40px;
+ background: rgba(0,0,0,.5);
+ border-radius: 0;
+ pointer-events: auto;
}
-.form-label button {
- border-left: 1px solid #ccc;
- width: 10%;
- height: 100%;
- border-radius: 0;
- background: #f6f6f6;
+.ideditor .map-control > button:not(.disabled):focus,
+.ideditor .map-control > button:not(.disabled):active {
+ background: rgba(0, 0, 0, .8);
}
-[dir='rtl'] .form-label button {
- border-left: none;
- border-right: 1px solid #CCC;
- border-radius: 4px 0 0 0;
+.ideditor .map-control > button.active,
+.ideditor .map-control > button.active:active {
+ background: #7092ff;
}
-.form-label button:hover {
- background: #f1f1f1;
+@media (hover: hover) {
+ .ideditor .map-control > button:not(.disabled):hover {
+ background: rgba(0, 0, 0, .8);
+ }
+ .ideditor .map-control > button.active:hover {
+ background: #7092ff;
+ }
}
-.form-label .modified-icon,
-.form-field .remove-icon {
- display: none;
+.ideditor .map-control > button.disabled .icon {
+ color: rgba(255, 255, 255, 0.5);
}
-.modified .form-label .modified-icon,
-.present .form-label .remove-icon {
+
+/* Fullscreen Button (disabled)
+------------------------------------------------------- */
+.ideditor div.full-screen {
display: inline-block;
+ width: 40px;
+ margin-right: 10px;
+ display: none;
}
-.form-field > input,
-.form-field > textarea,
-.form-field .preset-input-wrap {
- border: 1px solid #ccc;
- min-height: 30px;
- border-top: 0;
- border-radius: 0 0 4px 4px;
- overflow: hidden;
+.ideditor div.full-screen .tooltip {
+ min-width: 160px;
}
-.form-field textarea {
- height: 65px;
+.ideditor div.full-screen > button, .ideditor div.full-screen > button.active {
+ width: 40px;
+ height: 40px;
+ background: transparent;
}
-
-.inspector-border {
- border-bottom: 1px solid #ccc
+.ideditor div.full-screen > button:active,
+.ideditor div.full-screen > button:focus {
+ background-color: rgba(0, 0, 0, .8);
}
-
-/* Preset form (hover mode) */
-
-.inspector-hover .checkselect label:last-of-type,
-.inspector-hover .preset-input-wrap .label,
-.inspector-hover .form-field-multicombo,
-.inspector-hover .structure-extras-wrap,
-.inspector-hover input,
-.inspector-hover label {
- background: #ececec;
+@media (hover: hover) {
+ .ideditor div.full-screen > button:hover {
+ background-color: rgba(0, 0, 0, .8);
+ }
}
-.inspector-hover a,
-.inspector-hover .form-field-multicombo .chips,
-.inspector-hover .checkselect label:last-of-type {
- color: #666;
-}
-.inspector-hover .form-field-multicombo .chips {
- background: #eee;
- border: 1px solid #ccc;
-}
+/* Map Controls
+------------------------------------------------------- */
-/* hide and remove from layout */
-.inspector-hidden,
-.inspector-hover label input[type="checkbox"],
-.inspector-hover label input[type="radio"],
-.inspector-hover .toggle-list label,
-.inspector-hover .toggle-list label span,
-.inspector-hover .inspector-inner .add-tag,
-.inspector-hover .inspector-inner .add-relation,
-.inspector-hover .form-field-multicombo .combobox-input,
-.inspector-hover .toggle-list label.remove .icon {
- height: 0;
- width: 0;
- overflow: hidden;
- opacity: 0 !important;
- border-width: 0;
- margin: 0;
- padding: 0;
+/* Zoom in/out buttons */
+.ideditor .zoombuttons > button.zoom-in {
+ border-radius: 4px 0 0 0;
}
-
-/* hide but preserve in layout */
-.inspector-hover .entity-editor-pane button.minor,
-.inspector-hover .combobox-caret,
-.inspector-hover .entity-editor-pane .header button,
-.inspector-hover .spin-control,
-.inspector-hover .form-field-multicombo .chips .remove,
-.inspector-hover .hide-toggle:before,
-.inspector-hover .more-fields,
-.inspector-hover .form-label-button-wrap,
-.inspector-hover .tag-reference-button,
-.inspector-hover .view-on-osm {
- opacity: 0;
+.ideditor[dir='rtl'] .zoombuttons > button.zoom-in {
+ border-radius: 0 4px 0 0;
}
-/* Styles for raw tag inspector on hover */
-.inspector-hover .tag-row .key-wrap,
-.inspector-hover .tag-row .form-field.input-wrap-position {
- width: 50%;
+/* Geolocate button */
+.ideditor .geolocate-control {
+ margin-bottom: 10px;
}
-
-.inspector-hover .tag-row:first-child input.value {
- border-top-right-radius: 4px;
+.ideditor .geolocate-control > button {
+ border-radius: 0 0 0 4px;
}
-[dir='rtl'] .inspector-hover .tag-row:first-child input.value {
- border-top-right-radius: 0;
- border-top-left-radius: 4px;
+.ideditor[dir='rtl'] .geolocate-control > button {
+ border-radius: 0 0 4px 0;
}
-.inspector-hover .tag-row:last-child input.value {
- border-bottom-right-radius: 4px;
-}
-[dir='rtl'] .inspector-hover .tag-row:last-child input.value {
- border-bottom-right-radius: 0;
- border-bottom-left-radius: 4px;
+/* Zoom to selection button */
+.ideditor .zoom-to-selection-control .icon {
+ width: 22px;
+ height: 22px;
}
-.inspector-hover .tag-row:last-child input.key {
- border-bottom-left-radius: 4px;
+
+/* Background / Map Data / Help Pane buttons
+------------------------------------------------------- */
+.ideditor .background-control > button {
+ border-radius: 4px 0 0 0;
}
-[dir='rtl'] .inspector-hover .tag-row:last-child input.key {
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 4px;
+.ideditor[dir='rtl'] .background-control > button {
+ border-radius: 0 4px 0 0;
}
-.inspector-hover .more-fields {
- max-height: 0;
- margin-bottom: -10px;
+.ideditor .help-control > button {
+ border-radius: 0 0 0 4px;
}
-
-/* Unstyle button fields */
-.inspector-hover .toggle-list label.active,
-.inspector-hover .entity-editor-pane a.hide-toggle {
- opacity: 1;
- background-color: transparent;
- color: #666;
- padding-left: 0;
- border-width: 0;
+.ideditor[dir='rtl'] .help-control > button {
+ border-radius: 0 0 4px 0;
}
-.inspector-hover .toggle-list button.active {
- padding-left: 10px;
-}
-/* Add placeholder only on hover for radio buttons */
-.inspector-hover .toggle-list .placeholder {
- color: #a9a9a9;
- padding: 5px 10px;
- opacity: 1;
- line-height: 20px;
- width: 100%;
+/* Background / Map Data Settings
+------------------------------------------------------- */
+.ideditor .imagery-faq {
+ margin-bottom: 10px;
+ white-space: nowrap;
}
-/* Hide placeholder for radio buttons if another is active, or not in hover state */
-.toggle-list label.active ~ .placeholder,
-.toggle-list .placeholder {
- padding: 0;
- opacity: 0;
- width: 0;
- line-height: 0;
- display: block;
- overflow: hidden;
+.ideditor .layer-list, .ideditor .controls-list {
+ margin-bottom: 10px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
}
-/* adding additional preset fields */
-
-.more-fields {
- padding: 0 20px 20px 20px;
- font-weight: bold;
+.ideditor .layer-list > li {
+ background-color: #fff;
+ color: #7092ff;
+ position: relative;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
}
-.more-fields label {
- display: flex;
- flex-flow: row nowrap;
- justify-content: space-between;
- align-items: center;
+.ideditor .layer-list:empty {
+ display: none;
}
-.more-fields input {
- margin-left: 10px;
- flex: 1 1 50%;
+.ideditor .layer-list > li:first-child {
+ border-radius: 3px 3px 0 0;
}
-[dir='rtl'] .more-fields input {
- margin-left: auto;
- margin-right: 10px;
+.ideditor .layer-list > li:last-child {
+ border-radius: 0 0 3px 3px;
}
-
-.preset-input-wrap .label {
- height: 30px;
- background: #F6F6F6;
- padding: 5px 10px;
+.ideditor .layer-list > li:only-child {
+ border-radius: 3px;
}
-
-
-
-/* preset form access */
-/* preset form cycleway */
-
-.form-field-structure .structure-extras-wrap li,
-.form-field-cycleway .preset-input-wrap li,
-.form-field-access .preset-input-wrap li {
+.ideditor .layer-list li:not(:last-child) {
border-bottom: 1px solid #ccc;
}
-.form-field-structure .structure-extras-wrap li:last-child,
-.form-field-cycleway .preset-input-wrap li:last-child,
-.form-field-access .preset-input-wrap li:last-child {
- border-bottom: 0;
+.ideditor .layer-list li:active {
+ background-color: #ececec;
}
-.structure-input-type-wrap input,
-.structure-input-layer-wrap input,
-.preset-input-cycleway-wrap input,
-.preset-input-access-wrap input {
- border-radius: 0;
- border-width: 0;
- border-left-width: 1px;
+@media (hover: hover) {
+ .ideditor .layer-list li:hover {
+ background-color: #ececec;
+ }
}
-[dir='rtl'] .structure-input-type-wrap input,
-[dir='rtl'] .structure-input-layer-wrap input,
-[dir='rtl'] .preset-input-cycleway-wrap input,
-[dir='rtl'] .preset-input-access-wrap input {
- border-left-width: 0;
- border-right-width: 1px;
+
+.ideditor .layer-list li.active button,
+.ideditor .layer-list li.switch button,
+.ideditor .layer-list li.active,
+.ideditor .layer-list li.switch {
+ background: #e8ebff;
}
-.preset-input-wrap li:last-child input {
- border-bottom-right-radius: 4px;
+.ideditor .layer-list li.best > div.best {
+ padding: 5px;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
}
-.structure-extras-wrap {
- padding: 10px 10px;
- background: #fff;
+.ideditor[dir='rtl'] .list-item-data-browse svg {
+ -webkit-transform: rotateY(180deg);
+ transform: rotateY(180deg);
}
-.structure-extras-wrap ul {
- border: 1px solid #ccc;
- border-radius: 4px;
+
+/* make sure tooltip fits in map-control panel */
+/* if too wide, placement will be wrong the first time it displays */
+.ideditor .layer-list li.best .popover-inner {
+ max-width: 160px;
}
+.ideditor .layer-list label {
+ padding: 5px 10px;
+ cursor: pointer;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ overflow: hidden;
+}
-/* preset form multicombo */
+.ideditor[dir='ltr'] .layer-list .indented label {
+ padding-left: 24px;
+}
+.ideditor[dir='rtl'] .layer-list .indented label {
+ padding-right: 24px;
+}
-.form-field-multicombo {
- border: 1px solid #cfcfcf;
- border-top: 0px;
- padding: 5px 0 5px 10px;
- background: #fff;
+.ideditor .layer-list label > span {
display: block;
- border-radius: 0 0 4px 4px;
overflow: hidden;
+ white-space: nowrap;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
}
-.form-field-multicombo:focus {
- border-bottom: 0px;
+.ideditor .layer-list input.list-item-input {
+ height: 2.2em;
+ padding: 0px 4px;
+ width: 50%;
+ min-width: 160px;
}
-.form-field-multicombo.active {
- border-bottom-left-radius: 0px;
- border-bottom-right-radius: 0px;
+.ideditor .map-data-pane .layer-list button,
+.ideditor .background-pane .layer-list button {
+ border-left: 1px solid #ccc;
+ border-radius: 0;
+ padding-left: 4px;
+ padding-right: 4px;
}
-
-.form-field-multicombo li {
- background-color: #eff2f7;
- border: 1px solid #ccd5e3;
- border-radius: 4px;
- line-height: 25px;
- display: inline-block;
- padding: 2px 5px;
- margin: 3px;
- height: 30px;
+.ideditor[dir='rtl'] .map-data-pane .layer-list button,
+.ideditor[dir='rtl'] .background-pane .layer-list button {
+ border-left: none;
+ border-right: 1px solid #ccc;
}
-.form-field-multicombo a {
- font-family: Arial, Helvetica, sans-serif !important;
- font-size: 16px !important;
- line-height: 24px;
- float: right;
- margin: 1px 0 0 5px;
- padding: 0;
- cursor: pointer;
- color: #a6b4ce;
+.ideditor .map-data-pane .layer-list button .icon,
+.ideditor .background-pane .layer-list button .icon {
+ opacity: 0.5;
}
-.form-field-multicombo input {
- border: 1px solid #ddd;
- width: 100px;
- margin: 3px;
+.ideditor .map-data-pane .layer-list button:last-of-type,
+.ideditor .background-pane .layer-list button:last-of-type {
+ border-radius: 0 3px 3px 0;
}
-
-.form-field-multicombo .combobox-caret {
- margin: 3px 3px 3px -30px;
+.ideditor[dir='rtl'] .map-data-pane .layer-list button:last-of-type,
+.ideditor[dir='rtl'] .background-pane .layer-list button:last-of-type {
+ border-radius: 3px 0 0 3px;
}
-.form-field-multicombo input:focus {
- border-radius: 4px !important;
+.ideditor .map-data-pane .vectortile-container .vectortile-header {
+ padding-bottom: 5px;
}
-
-
-/* preset form numbers */
-
-input[type=number] {
- position: relative;
- padding-right: 20%;
+.ideditor .map-data-pane .vectortile-container .vectortile-footer {
+ padding-bottom: 10px;
}
-.spin-control {
- width: 20%;
- height: 29px;
- display: inline-block;
- margin-left: -20%;
- margin-bottom: -11px;
- position: relative;
-}
-.spin-control button {
- right: 1px;
- position: relative;
- float: left;
- height: 100%;
- width: 50%;
- border-left: 1px solid #CCC;
- border-radius: 0;
- background: rgba(0, 0, 0, 0);
+/* Issues
+------------------------------------------------------- */
+.ideditor .issue {
+ overflow: hidden;
}
-
-.spin-control button.decrement {
- border-bottom-right-radius: 3px;
+.ideditor .issue .issue-label,
+.ideditor .issue-label .issue-text {
+ width: 100%;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ cursor: pointer;
+ text-align: initial;
+ background: none;
+}
+
+.ideditor .issue-text .issue-icon {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ padding: 2px 3px;
+}
+.ideditor .issue-text .issue-message {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ padding: 4px 5px;
+}
+.ideditor .issue-label .issue-autofix {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ padding: 5px 8px;
+}
+.ideditor .issue-label .issue-info-button {
+ height: unset;
+ width: 32px;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ border-left: 1px solid #ccc;
+ background-color: rgba(0,0,0,0);
}
-
-.spin-control button.decrement::after,
-.spin-control button.increment::after {
- content:"";
- height: 0; width: 0;
- position: absolute;
- left: 0; right: 0; bottom: 0; top: 0;
- margin: auto;
+.ideditor[dir='rtl'] .issue-label .issue-info-button {
+ border-left: 0;
+ border-right: 1px solid #ccc;
}
-
-.spin-control button.decrement::after {
- border-top: 5px solid #CCC;
- border-left: 5px solid transparent;
- border-right: 5px solid transparent;
+.ideditor .issue-container .issue-label .issue-info-button .icon {
+ opacity: 0.5;
}
-
-.spin-control button.increment::after {
- border-bottom: 5px solid #CCC;
- border-left: 5px solid transparent;
- border-right: 5px solid transparent;
+.ideditor .issue-container.active .issue-label .issue-info-button .icon {
+ opacity: 0.7;
}
-
-/* preset form checkbox */
-
-.checkselect label:last-of-type {
- display: block;
- background: white;
- padding: 5px 10px;
- color: #7092FF;
+.ideditor .issue-label .issue-info-button:last-child {
+ border-radius: 0 4px 4px 0;
}
-
-.checkselect label:hover {
- background: #f1f1f1;
+.ideditor[dir='rtl'] .issue-label .issue-info-button:last-child {
+ border-radius: 4px 0 0 4px;
}
-.checkselect .set {
- color: inherit;
+.ideditor button.autofix.action {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 20px;
+ flex: 0 0 20px;
+ height: 20px;
+ width: 20px;
+ background: #7092ff;
+ color: #fff;
}
-
-.checkselect label:not(.set) input[type="checkbox"] {
- opacity: .5;
+.ideditor button.autofix.action:focus,
+.ideditor button.autofix.action:active,
+.ideditor button.autofix.action.active {
+ background: #597be7;
+}
+@media (hover: hover) {
+ .ideditor button.autofix.action:hover {
+ background: #597be7;
+ }
}
-.checkselect .reverser.button {
- display: block;
- float: right;
- background-color: #eff2f7;
- border: 1px solid #ccd5e3;
- border-radius: 2px;
- padding: 0px 8px;
+/* fix all */
+.ideditor .autofix-all {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+ margin-top: -25px;
+ padding-bottom: 5px;
+}
+.ideditor .autofix-all-link-text {
+ padding: 0;
}
-[dir='rtl'] .checkselect .reverser.button {
- float: left;
+.ideditor .autofix-all-link-icon svg {
+ margin: 0 9px;
+ background: currentColor;
+ border-radius: 4px;
}
-.checkselect .reverser.button.hide {
- display: none;
+.ideditor .autofix-all-link-icon svg use {
+ color: #fff;
}
-/* Preset form radio button */
+/* warning styles */
+.ideditor .warnings-list,
+.ideditor .warnings-list *,
+.ideditor .issue-container.active .issue.severity-warning,
+.ideditor .issue-container.active .issue.severity-warning * {
+ border-color: #fb2;
+}
-.toggle-list button.remove {
- border-radius: 0 0 3px 3px;
+.ideditor .warnings-list .issue.severity-warning .issue-label,
+.ideditor .issue.severity-warning .issue-fix-list,
+.ideditor .warning-section {
+ background: #ffc;
}
-.toggle-list button.remove .icon {
- position: absolute;
- left: 5px;
+.ideditor .issue-container.active .issue.severity-warning .issue-label {
+ background: #ffa;
}
-.toggle-list button.remove::before {
- content: none;
+.ideditor .issue.severity-warning .issue-icon {
+ color: #f90;
}
-#preset-input-maxspeed {
- border-right: none;
- border-radius: 0 0 0 4px;
- width: 80%;
+.ideditor .issue.severity-warning .issue-fix-item button.actionable,
+.ideditor .issue-container.active .issue.severity-warning .issue-info-button {
+ color: #b15500;
+ fill: #b15500;
}
-[dir='rtl'] #preset-input-maxspeed {
- border-right: 1px solid #ccc;
- border-radius: 0 0 4px 0;
+.ideditor .warnings-list .issue.severity-warning .issue-label:active,
+.ideditor .warnings-list .issue.severity-warning .issue-label:focus,
+.ideditor .issue.severity-warning .issue-fix-item button.actionable:active,
+.ideditor .issue.severity-warning .issue-fix-item button.actionable:focus {
+ background: #ff8;
+}
+.ideditor .issue.severity-warning .issue-fix-item button.actionable:active,
+.ideditor .issue.severity-warning .issue-fix-item button.actionable:focus,
+.ideditor .issue-container.active .issue.severity-warning .issue-info-button:active,
+.ideditor .issue-container.active .issue.severity-warning .issue-info-button:focus {
+ color: #7f3d00;
+ fill: #7f3d00;
+}
+@media (hover: hover) {
+ .ideditor .warnings-list .issue.severity-warning .issue-label:hover,
+ .ideditor .issue.severity-warning .issue-fix-item button.actionable:hover {
+ background: #ff8;
+ }
+ .ideditor .issue.severity-warning .issue-fix-item button.actionable:hover,
+ .ideditor .issue-container.active .issue.severity-warning .issue-info-button:hover {
+ color: #7f3d00;
+ fill: #7f3d00;
+ }
+}
+
+
+/* error styles */
+.ideditor .errors-list,
+.ideditor .errors-list *,
+.ideditor .issue-container.active .issue.severity-error,
+.ideditor .issue-container.active .issue.severity-error * {
+ border-color: #f77;
}
-.form-field .maxspeed-unit {
- border-radius: 0 0 4px 0;
- width: 20%;
+.ideditor .errors-list .issue.severity-error .issue-label,
+.ideditor .issue.severity-error .issue-fix-list,
+.ideditor .error-section {
+ background: #ffd6d6;
}
-[dir='rtl'] .form-field .maxspeed-unit {
- border-right: 0;
- border-radius: 0 0 0 4px;
+
+.ideditor .issue-container.active .issue.severity-error .issue-label {
+ background: #ffc6c6;
}
-/* Wikipedia field */
-.form-field .wiki-lang {
- border-radius: 0;
+.ideditor .issue.severity-error .issue-fix-item button.actionable,
+.ideditor .issue-container.active .issue.severity-error .issue-info-button {
+ color: #b91201;
+ fill: #b91201;
}
-.form-field .wiki-title {
- padding-right: 20%;
+.ideditor .issue.severity-error .issue-icon {
+ color: #dd1400;
}
-[dir='rtl'] .form-field .wiki-title {
- padding-left: 20%;
- padding-right: 10px;
+.ideditor .errors-list .issue.severity-error .issue-label:active,
+.ideditor .errors-list .issue.severity-error .issue-label:focus,
+.ideditor .issue.severity-error .issue-fix-item button.actionable:active,
+.ideditor .issue.severity-error .issue-fix-item button.actionable:focus {
+ background: #ffb6b6;
}
-
-.form-field .wiki-title ~ .combobox-caret {
- right: 10%;
+.ideditor .issue.severity-error .issue-fix-item button.actionable:active,
+.ideditor .issue.severity-error .issue-fix-item button.actionable:focus,
+.ideditor .issue-container.active .issue.severity-error .issue-info-button:active,
+.ideditor .issue-container.active .issue.severity-error .issue-info-button:focus {
+ color: #840c00;
+ fill: #840c00;
}
-[dir='rtl'] .form-field .wiki-title ~ .combobox-caret {
- right: auto;
- left: 10%;
+@media (hover: hover) {
+ .ideditor .errors-list .issue.severity-error .issue-label:hover,
+ .ideditor .issue.severity-error .issue-fix-item button.actionable:hover {
+ background: #ffb6b6;
+ }
+ .ideditor .issue.severity-error .issue-fix-item button.actionable:hover,
+ .ideditor .issue-container.active .issue.severity-error .issue-info-button:hover {
+ color: #840c00;
+ fill: #840c00;
+ }
}
-/* Localized field */
-.form-field .localized-main {
- padding-right: 12%;
+
+/* Issues Pane */
+.ideditor .issues-options-container {
+ display: table;
}
-[dir='rtl'] .form-field .localized-main {
- padding-left: 12%;
- padding-right: 10px;
+.ideditor .issues-option {
+ display: table-row;
}
-
-.form-field .button-input-action {
- position: relative;
- right: 1px;
- width: 10%;
- margin-left: -10%;
- border: 1px solid #CCC;
- border-top-width: 0;
- border-right-width: 0;
- border-radius: 0 0 4px 0;
- height: 30px;
- vertical-align: top;
+.ideditor .issues-option-title {
+ display: table-cell;
+ font-weight: bold;
+ padding-right: 10px;
}
-[dir='rtl'] .form-field .button-input-action {
- margin-left: 0;
- margin-right: -10%;
- border-right-width: 1px;
- border-radius: 0 0 0 4px;
+.ideditor[dir='rtl'] .issues-option-title {
+ padding-right: 0;
+ padding-left: 10px;
}
-
-.form-field .localized-wrap {
+.ideditor .issues-option label {
+ display: table-cell;
padding: 0 10px;
+ white-space: nowrap;
}
-.form-field .localized-wrap .entry {
- position: relative;
- overflow: hidden;
+.ideditor .layer-list.issues-list li.issue {
+ border-color: inherit; /* override .layer-list styles */
+ color: inherit;
+ height: unset;
}
-.form-field .localized-wrap .entry::before {
- content: "";
- display: block;
- position: absolute;
- background:#ccc;
- height: 11px;
- width: 1px;
- left: 0;
- right: 0;
- top: -11px;
- margin: auto;
+.ideditor .layer-list.issue-rules-list,
+.ideditor .layer-list.issues-list,
+.ideditor .layer-list.layer-feature-list {
+ margin-bottom: 0;
}
-
-.form-field .localized-wrap .entry .localized-lang {
- border-radius: 0;
- border-top-width: 0;
+.ideditor .section-footer {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+ height: 30px;
+}
+.ideditor .section-footer a {
+ padding: 5px;
}
-.form-field .localized-wrap .entry .localized-value {
- border-top-width: 0;
- border-radius: 0 0 4px 4px;
+.ideditor .section-issues-status .box {
+ border-radius: 4px;
+ border: 1px solid #72d979;
+ background: #c6ffca;
+ padding: 5px !important;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.ideditor .section-issues-status .icon {
+ color: #05ac10;
}
-.form-field .localized-wrap .form-label button {
- border-top-right-radius: 3px;
+.ideditor input.square-degrees-input {
+ padding: 2px !important; /* important needed for rtl */
+ width: 3em;
+ height: 2em;
+ text-align: center;
+ background: rgba(0,0,0,0);
+ color: currentColor;
}
-/* Preset form address */
-.addr-row input {
- border-right: 0;
- border-bottom: 0;
-}
-[dir='rtl'] .addr-row input {
- border-right: 1px solid #ccc;
- border-left: 0;
+/* Entity Issues List */
+.ideditor .section-entity-issues .issue-container .issue {
+ border-radius: 4px;
+ border: 1px solid #ccc;
+ background: #f6f6f6;
}
-
-.addr-row:first-of-type input {
- border-top: 0;
+.ideditor .section-entity-issues .issue-container:not(.active) .issue-text:active,
+.ideditor .section-entity-issues .issue-container:not(.active) .issue-text:focus,
+.ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:active,
+.ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:focus {
+ background: #f1f1f1;
}
-
-.addr-row input:first-of-type {
- border-left: 0;
+@media (hover: hover) {
+ .ideditor .section-entity-issues .issue-container:not(.active) .issue-text:hover,
+ .ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:hover {
+ background: #f1f1f1;
+ }
}
-[dir='rtl'] .addr-row input:first-of-type {
- border-right: 0;
+.ideditor .section-entity-issues .issue .issue-label .issue-text {
+ padding-right: 10px;
}
-
-.addr-row input {
- border-radius: 0;
+.ideditor[dir='rtl'] .section-entity-issues .issue .issue-label .issue-text {
+ padding-right: unset;
+ padding-left: 10px;
}
-.addr-row:last-of-type input:first-of-type {
- border-radius: 0 0 0 4px;
+.ideditor .section-entity-issues .issue-container.active .issue-label button.issue-text {
+ font-weight: bold;
}
-[dir='rtl'] .addr-row:last-of-type input:first-of-type {
- border-radius: 0 0 4px 0;
+.ideditor .section-entity-issues .issue-container:not(:last-of-type) {
+ margin-bottom: 5px;
}
-
-.addr-row:last-of-type input:last-of-type {
- border-radius: 0 0 4px 0;
+.ideditor .section-entity-issues .issue-container.active:not(:first-of-type) {
+ margin-top: 10px;
}
-[dir='rtl'] .addr-row:last-of-type input:last-of-type {
- border-radius: 0 0 0 4px;
+.ideditor .section-entity-issues .issue-container.active:not(:last-of-type) {
+ margin-bottom: 10px;
}
-/* Restrictions editor */
-
-.form-field-restrictions .preset-input-wrap {
- position: relative;
- height: 300px;
+/* fixes */
+.ideditor .section-entity-issues .issue-fix-list {
+ border-top: 1px solid;
+ border-color: inherit;
+}
+.ideditor .section-entity-issues .issue-container.active .issue-fix-list:empty {
+ display: none;
}
-.form-field-restrictions svg.surface {
+.ideditor li.issue-fix-item button {
+ padding: 2px 10px 2px 20px;
+ background: transparent;
width: 100%;
- height: 100%;
+ text-align: initial;
+}
+.ideditor[dir='rtl'] li.issue-fix-item button {
+ padding: 2px 20px 2px 10px;
+}
+.ideditor li.issue-fix-item:first-of-type button {
+ padding-top: 5px;
+}
+.ideditor li.issue-fix-item:last-of-type button {
+ padding-bottom: 5px;
}
-.form-field-restrictions .restriction-help {
- z-index: 1;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- padding: 2px 6px;
- background-color: rgba(255, 255, 255, .8);
- color: #999;
- text-align: center;
+.ideditor li.issue-fix-item button .fix-message {
+ padding: 0 10px;
+ vertical-align: middle;
}
-/* combobox dropdown */
+.ideditor li.issue-fix-item button.actionable {
+ cursor: pointer;
+}
+.ideditor li.issue-fix-item button:not(.actionable) .fix-icon {
+ color: #555;
+ fill: #555;
+}
-div.combobox {
- z-index: 9999;
+.ideditor .issue-container:not(.active) ul.issue-fix-list {
+ display: none;
+}
+.ideditor .issue-container:not(.active) .issue-info {
display: none;
- box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
- margin-top: -1px;
- background: white;
- max-height: 120px;
- overflow-y: auto;
- overflow-x: hidden;
- border: 1px solid #ccc;
- border-radius: 0 0 4px 4px;
}
-.combobox a {
- display: block;
- padding: 5px 10px;
- border-top:1px solid #ccc;
- text-overflow: ellipsis;
- white-space: nowrap;
+.ideditor .issue-info {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ width: 100%;
overflow: hidden;
+ display: none;
+ padding: 10px 0;
}
-
-.combobox a.selected,
-.combobox a:hover {
- background: #ececec;
+.ideditor .issue-info.expanded {
+ display: inline-block;
}
-.combobox a:first-child {
- border-top: 0;
+.ideditor .issue-info .issue-reference {
+ margin-bottom: 10px;
}
-
-.combobox-caret {
- display: inline-block;
- position: relative;
- height: 30px;
- width: 30px;
- margin-left: -30px;
- vertical-align: top;
+.ideditor .issue-info .tagDiff-table {
+ min-width: 60%;
+ width: unset;
+ border: 1px solid #ccc;
}
-
-.combobox-caret::after {
- content:"";
- height: 0; width: 0;
- position: absolute;
- left: 0; right: 0; bottom: 0; top: 0;
- margin: auto;
- border-top: 5px solid #ccc;
- border-left: 5px solid transparent;
- border-right: 5px solid transparent;
+.ideditor .issue-info .tagDiff-row {
+ border: 1px solid #ccc;
+}
+.ideditor .issue-info .tagDiff-cell {
+ padding: 2px 10px;
+ font-family: monospace;
+ font-size: 10px;
+ border: 1px solid #ccc;
+}
+.ideditor .issue-info .tagDiff-cell-add {
+ background: #dfd;
+}
+.ideditor .issue-info .tagDiff-cell-remove {
+ background: #fdd;
}
-/* Raw Tag Editor */
-.tag-list {
- padding-top: 10px;
+/* Background - Display Options Sliders
+------------------------------------------------------- */
+.ideditor .display-options-container {
+ padding: 10px;
}
-.tag-row {
- width: 100%;
- position: relative;
- clear: both;
+.ideditor .display-options-container label {
+ padding-bottom: 0;
+ padding-top: 10px;
}
-.tag-row.readonly,
-.tag-row.readonly input.key,
-.tag-row.readonly input.value,
-.tag-row.readonly button.remove {
- color: #777777;
- background-color: #eee;
- cursor: not-allowed;
+.ideditor .display-options-container label span {
+ font-weight: bold;
+ margin: 5px;
}
-.tag-row input {
- height: 31px;
- border: 0;
- border-radius: 0;
- border-bottom: 1px solid #CCC;
- border-left: 1px solid #CCC;
+.ideditor .display-control .control-wrap {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ width: 100%;
}
-[dir='rtl'] .tag-row input {
- border-left: none;
- border-right: 1px solid #CCC;
+.ideditor .display-control .display-option-input {
+ height: 20px;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 100%;
+ flex: 1 1 100%;
}
-.tag-row .key-wrap,
-.tag-row .input-wrap-position {
- width: 40%;
- float: left;
+.ideditor .display-control button {
height: 30px;
+ width: 30px;
+ margin-left: 5px;
+ margin-right: 0px;
+ vertical-align: text-bottom;
+ border-radius: 4px;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
}
-[dir='rtl'] .tag-row .key-wrap,
-[dir='rtl'] .tag-row .input-wrap-position {
- float: right;
+.ideditor[dir='rtl'] .display-control button {
+ margin-left: 0px;
+ margin-right: 5px;
}
-.tag-row input.key {
- font-weight: bold;
- background-color: #f6f6f6;
-}
-.tag-row input.value {
- border-right: 1px solid #CCC;
-}
-[dir='rtl'] .tag-row input.value {
- border-left: 1px solid #CCC;
+/* Background - Adjust Alignment
+------------------------------------------------------- */
+.ideditor .background-pane .nudge-container {
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ padding: 10px;
+ position: relative;
}
-.tag-row:first-child input.key {
- border-top: 1px solid #CCC;
- border-top-left-radius: 4px;
+.ideditor .nudge-container .nudge-controls-wrap {
+ position: relative;
+ width: 100%;
+ overflow: hidden;
}
-[dir='rtl'] .tag-row:first-child input.key {
- border-top-left-radius: 0;
- border-top-right-radius: 4px;
+
+.ideditor .nudge-container .nudge-outer-rect {
+ background-color: #eee;
+ border: 1px solid #ccc;
+ border-radius: 2px;
+ padding: 20px 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ margin: 45px;
+ cursor: move;
+ /* prevent scrolling pane while dragging on touchscreen */
+ -ms-touch-action: none;
+ touch-action: none;
+ /* disable drag-to-select */
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ position: relative;
}
-.tag-row:first-child input.value {
- border-top: 1px solid #CCC;
+.ideditor .nudge-container .nudge-inner-rect {
+ background-color: #fff;
+ border: 1px solid #ccc;
+ border-radius: 2px;
+ width: 65%;
+ min-height: 20px;
}
-.tag-row button {
+.ideditor .nudge-container .nudge::after {
+ content: '';
+ display: block;
position: absolute;
- height: 31px;
- right: 10%;
- border: 1px solid #CCC;
- border-top-width: 0;
- border-left-width: 0;
-}
-[dir='rtl'] .tag-row button {
- left: 10%;
- border-left-width: 1px;
- border-right-width: 0;
+ margin: auto;
+ left: 0; right: 0; top: 0; bottom: 0;
+ height: 0;
+ width: 0;
}
-.tag-row button:hover {
- background: #f1f1f1;
+.ideditor .nudge-container input {
+ width: 100%;
+ padding: 2px;
+ text-align: center;
+ border: 0;
}
-.tag-row button .icon {
- opacity: .5;
+.ideditor .nudge-container input.error {
+ border: 1px solid #ff7878;
+ border-radius: 2px;
+ background: #ffb;
}
-.tag-row:first-child button {
- border-top-width: 1px;
+.ideditor .nudge-container button {
+ position: absolute;
+ height: 40px;
+ width: 40px;
}
-
-.tag-row:first-child .tag-reference-button {
- border-top-right-radius: 4px;
+.ideditor .nudge-container button.right,
+.ideditor .nudge-container button.left {
+ top: 0;
+ bottom: 0;
+ margin-top: auto;
+ margin-bottom: auto;
+ vertical-align: middle;
}
-[dir='rtl'] .tag-row:first-child .tag-reference-button {
- border-top-left-radius: 4px;
- border-top-right-radius: 0;
+.ideditor .nudge-container button.right {
+ right: 0;
}
-
-.tag-row:last-child .tag-reference-button {
- border-bottom-right-radius: 4px;
+.ideditor .nudge-container button.left {
+ left: 0;
}
-[dir='rtl'] .tag-row:last-child .tag-reference-button {
- border-bottom-left-radius: 4px;
- border-bottom-right-radius: 0;
+.ideditor .nudge-container button.top,
+.ideditor .nudge-container button.bottom {
+ left: 0;
+ right: 0;
+ margin-left: auto;
+ margin-right: auto;
+}
+.ideditor .nudge-container button.top {
+ top: 0;
+}
+.ideditor .nudge-container button.bottom {
+ bottom: 0;
}
-.tag-row .tag-reference-button {
+.ideditor .nudge-container button.nudge-reset {
right: 0;
- border-radius: 0;
- width: 10%;
- top: 0;
- background: #fafafa;
+ bottom: 0;
}
-[dir='rtl'] .tag-row .tag-reference-button {
- left: auto;
- right: auto;
- margin-right: 35px;
- border-left-width: 1px;
- border-right-width: 0;
+
+.ideditor .nudge-surface {
+ position: absolute;
+ z-index: 5000;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background-color: transparent;
+ cursor: move;
}
-/* Adding form fields to tag editor */
+.ideditor .background-pane .nudge.right::after {
+ border-top: 5px solid transparent;
+ border-bottom: 5px solid transparent;
+ border-left: 5px solid #222;
+}
-.raw-tag-editor .add-tag {
- width: 40%;
- height: 30px;
- border-top: 0;
- background: rgba(0,0,0,.5);
- border-radius: 0 0 4px 4px;
+.ideditor .background-pane .nudge.left::after {
+ border-top: 5px solid transparent;
+ border-bottom: 5px solid transparent;
+ border-right: 5px solid #222;
}
-.raw-tag-editor .add-tag:hover {
- background: rgba(0,0,0,.8);
+.ideditor .background-pane .nudge.top::after {
+ border-right: 5px solid transparent;
+ border-left: 5px solid transparent;
+ border-bottom: 5px solid #222;
}
-.raw-tag-editor .add-tag .label {
- display: none;
+.ideditor .background-pane .nudge.bottom::after {
+ border-right: 5px solid transparent;
+ border-left: 5px solid transparent;
+ border-top: 5px solid #222;
}
-/* Tag reference */
-button.minor.tag-reference-loading {
- background-color: #f5f5f5;
+/* Side Panes - Background / Map Data / Help
+------------------------------------------------------- */
+.ideditor .map-panes {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
+ position: relative;
+ height: 100%;
+ max-width: 100%;
}
-
-.tag-reference-loading .icon {
- background-image: url(<%= asset_path("iD/img/mini-loader.gif") %>);
- background-position: 0 0;
+.ideditor .map-pane {
+ position: relative;
+ top: 0;
+ width: 400px;
+ max-width: 100%;
+ height: 100%;
+ z-index: 10;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
}
-.tag-reference-body {
- overflow: hidden;
- clear: both;
+.ideditor .map-pane.help-pane {
+ width: 600px;
}
-.tag-reference-body p,
-.tag-reference-body img {
- margin-top: 20px;
+.ideditor .pane-heading {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ border-bottom: 1px solid #ccc;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
}
-.tag-reference-body p:last-child {
- padding-bottom: 10px;
+.ideditor .pane-heading h2 {
+ margin: 14px 20px;
}
-.tag-reference-body a {
- display: block;
- padding-bottom: 10px;
+.ideditor .pane-heading button {
+ width: 40px;
+ border-radius: 0;
}
-.preset-list .tag-reference-body {
+.ideditor .pane-content {
+ height: 100%;
+ padding: 10px 50px 20px 20px;
+ overflow-x: hidden;
+ overflow-y: scroll;
position: relative;
- width: 100%;
}
-
-.preset-list .tag-reference-body a {
- padding-bottom: 20px;
+.ideditor[dir='rtl'] .pane-content {
+ padding: 10px 20px 20px 50px;
}
-.preset-list .tag-reference-body p,
-.preset-list .tag-reference-body img {
- margin-top: 10px;
+.ideditor .help-pane .pane-content > div {
+ padding-bottom: 15px;
}
-.raw-tag-editor .tag-reference-body {
- border-bottom: 1px solid #ccc;
- float: left;
- width: 100%;
-}
-.raw-tag-editor .tag-reference-body p:last-child {
- padding-bottom: 20px;
+/* Help
+------------------------------------------------------- */
+.ideditor .help-pane p {
+ font-size: 15px;
+ margin-bottom: 20px;
}
-.raw-tag-editor .tag-reference-body a {
- padding-bottom: 20px;
+.ideditor .help-pane .left-content .icon.inline,
+.ideditor .curtain-tooltip .icon.inline {
+ margin-right: 0;
+ margin-left: 0;
+ height: 1.34em;
+ width: 1.34em;
}
-img.wiki-image {
+.ideditor .help-pane .toc {
+ width: 100%;
+ max-width: 200px;
float: right;
- width: 33.3333%;
- width: -webkit-calc(33.3333% - 10px);
- width: calc(33.3333% - 10px);
margin-left: 20px;
- margin-right: 10px;
- border-radius: 4px;
- max-height: 200px;
margin-bottom: 20px;
+ padding-left: 5px;
}
-/* Raw relation membership editor */
-
-.raw-member-editor .member-list li:first-child,
-.raw-membership-editor .member-list li:first-child {
- padding-top: 10px;
+.ideditor .help-pane .toc li a,
+.ideditor .help-pane .nav a {
+ display: block;
+ border: 1px solid #ccc;
+ padding: 5px 10px;
}
-.raw-member-editor .member-row,
-.raw-membership-editor .member-row {
- position: relative;
+.ideditor .help-pane .toc li a {
+ border-bottom: 0;
}
-
-.raw-member-editor .member-row .member-entity-name,
-.raw-membership-editor .member-row .member-entity-name {
- font-weight: normal;
- padding-left: 10px;
+.ideditor .help-pane .toc li a:focus,
+.ideditor .help-pane .nav a:focus,
+.ideditor .help-pane .toc li a:active,
+.ideditor .help-pane .nav a:active {
+ background: #ececec;
+}
+@media (hover: hover) {
+ .ideditor .help-pane .toc li a:hover,
+ .ideditor .help-pane .nav a:hover {
+ background: #ececec;
+ }
}
-.member-incomplete .member-delete {
- display: none;
+.ideditor .help-pane .toc li a.selected {
+ background: #e8ebff;
}
-.member-row-new .member-entity-input {
+.ideditor .help-pane .toc li:first-child a {
border-radius: 4px 4px 0 0;
- border: 1px solid #cfcfcf;
}
-.add-relation {
- width: 40%;
- height: 30px;
- background: rgba(0,0,0,.5);
- border-radius: 4px;
- margin-top: 10px;
+.ideditor .help-pane .toc li:nth-last-child(3) a {
+ border-bottom: 1px solid #ccc;
+ border-radius: 0 0 4px 4px
}
-.add-relation:hover {
- background: rgba(0,0,0,.8);
+.ideditor .help-pane .toc li.shortcuts a,
+.ideditor .help-pane .toc li.walkthrough a {
+ overflow: hidden;
+ margin-top: 10px;
+ border-bottom: 1px solid #ccc;
+ border-radius: 4px;
}
-/* Fullscreen button */
-div.full-screen {
- float: right;
- width: 40px;
- margin-right: 10px;
+.ideditor .help-pane .toc li.walkthrough a {
+ text-align: center;
}
-div.full-screen .tooltip {
- min-width: 160px;
+.ideditor .help-pane .nav {
+ position: relative;
+ padding-bottom: 30px;
}
-div.full-screen > button, div.full-screen > button.active {
- width: 40px;
- height: 40px;
- background: transparent;
+.ideditor .help-pane .nav a {
+ float: left;
+ width: 50%;
+ text-align: center;
}
-div.full-screen > button:hover {
- background-color: rgba(0, 0, 0, .8);
+.ideditor .help-pane .nav a:first-child {
+ border-radius: 4px 0 0 4px;
}
-/* Map Controls */
-
-.map-controls {
- right: 0;
- top: 70px;
- width: 40px;
- position: fixed;
- z-index: 100;
+.ideditor .help-pane .nav a:last-child:not(:only-child) {
+ border-radius: 0 4px 4px 0;
+ border-left: 0;
}
-.map-control > button {
- width: 40px;
- background: rgba(0,0,0,.5);
- border-radius: 0;
+.ideditor .help-pane .nav a:only-child {
+ width: 100%;
+ border-radius: 4px;
}
-.map-control > button:hover {
- background: rgba(0, 0, 0, .8);
-}
-.map-control > button.active,
-.map-control > button.active:hover {
- background: #7092ff;
+/* Inspector (hover styles)
+------------------------------------------------------- */
+.ideditor .inspector-hover .section-entity-issues .issue-container .issue .issue-label,
+.ideditor .inspector-hover .form-field-input-wrap .label,
+.ideditor .inspector-hover .form-field-input-multicombo .chiplist,
+.ideditor .inspector-hover .form-field-button,
+.ideditor .inspector-hover .structure-extras-wrap,
+.ideditor .inspector-hover .comments-container .comment,
+.ideditor .inspector-hover button,
+.ideditor .inspector-hover input,
+.ideditor .inspector-hover textarea,
+.ideditor .inspector-hover label {
+ background: #ececec;
}
-
-/* Zoomer */
-
-.zoombuttons button.zoom-in {
- border-radius: 4px 0 0 0;
+.ideditor .inspector-hover .preset-list-button,
+.ideditor .inspector-hover .tag-row input {
+ background: #f6f6f6;
}
-/* Background / Map Data Settings */
-
-.map-data-control button {
- border-radius: 0;
+.ideditor .inspector-hover a,
+.ideditor .inspector-hover .form-field-input-multicombo .chip,
+.ideditor .inspector-hover .form-field-input-check span,
+.ideditor .inspector-hover .section-entity-issues .issue .icon {
+ color: #666;
}
-.background-control button {
- border-radius: 4px 0 0 0;
+.ideditor .inspector-hover .form-field-input-multicombo .chip {
+ background: #eee;
+ border: 1px solid #ccc;
}
-.map-data-control,
-.background-control {
- position: relative;
+/* no scrollbars */
+.ideditor .inspector-hover div {
+ overflow-x: visible;
+ overflow-y: visible;
}
-.imagery-faq {
- margin-bottom: 10px;
+/* hide and remove from layout */
+.ideditor .inspector-hidden,
+.ideditor .inspector-hover .preset-list-button-wrap .tag-reference-button,
+.ideditor .inspector-hover label input[type="checkbox"],
+.ideditor .inspector-hover label input[type="radio"],
+.ideditor .inspector-hover .form-field-input-multicombo .input-wrap,
+.ideditor .inspector-hover .form-field-input-radio label,
+.ideditor .inspector-hover .form-field-input-radio label span,
+.ideditor .inspector-hover .form-field-input-radio label.remove .icon,
+.ideditor .inspector-hover .add-row,
+.ideditor .inspector-hover .section-entity-issues .issue-container .issue-fix-list,
+.ideditor .inspector-hover .section-entity-issues .issue-container .issue-info-button {
+ display: none;
}
-.map-data-control .hide-toggle,
-.background-control .hide-toggle {
- padding-bottom: 10px;
+/* hide but preserve in layout */
+.ideditor .inspector-hover .combobox-caret,
+.ideditor .inspector-hover .header button,
+.ideditor .inspector-hover .quick-links,
+.ideditor .inspector-hover .form-field-input-multicombo .chip .remove,
+.ideditor .inspector-hover .hide-toggle:before,
+.ideditor .inspector-hover .more-fields,
+.ideditor .inspector-hover .field-label button,
+.ideditor .inspector-hover .tag-row button,
+.ideditor .inspector-hover .footer * {
+ opacity: 0;
}
-.layer-list, .controls-list {
- margin-bottom: 10px;
- border: 1px solid #CCC;
- border-radius: 4px;
+/* Unstyle the active entity issue on hover */
+.ideditor .inspector-hover .section-entity-issues .issue-container.active {
+ margin-top: 1px;
+ margin-bottom: 1px;
}
-
-.layer-list li {
- position: relative;
- height: 30px;
- background-color: white;
- color: #7092FF;
+.ideditor .inspector-hover .section-entity-issues .issue-container * {
+ border-color: #ccc !important;
}
-
-.layer-list:empty {
- display: none;
+.ideditor .inspector-hover .section-entity-issues .issue-container.active .issue-label {
+ border-bottom: 0;
}
-
-.layer-list > li:first-child {
- border-radius: 3px 3px 0 0;
+.ideditor .inspector-hover .section-entity-issues .issue-container.active .issue-label button.issue-text {
+ font-weight: normal;
}
-.layer-list > li:last-child {
- border-radius: 0 0 3px 3px;
-}
-.layer-list > li:only-child {
- border-radius: 3px;
+/* Styles for raw tag inspector on hover */
+.ideditor .inspector-hover .tag-row .key-wrap,
+.ideditor .inspector-hover .tag-row .value-wrap {
+ height: 31px;
}
-.layer-list li:not(:last-child) {
- border-bottom: 1px solid #ccc;
+.ideditor .inspector-hover .tag-row:first-child input.value {
+ border-top-right-radius: 4px;
}
-
-.layer-list li:hover {
- background-color: #ececec;
+.ideditor[dir='rtl'] .inspector-hover .tag-row:first-child input.value {
+ border-top-right-radius: 0;
+ border-top-left-radius: 4px;
}
-.layer-list li.active,
-.layer-list li.switch {
- background: #E8EBFF;
+.ideditor .inspector-hover .tag-row:last-child input.value {
+ border-bottom-right-radius: 4px;
}
-
-.layer-list li.best > div.best {
- display: inline-block;
- padding: 5px;
- float: right;
+.ideditor[dir='rtl'] .inspector-hover .tag-row:last-child input.value {
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 4px;
}
-/* 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 {
- max-width: 160px;
+.ideditor .inspector-hover .tag-row:last-child input.key {
+ border-bottom-left-radius: 4px;
}
-
-.layer-list label {
- display: block;
- padding: 5px 10px;
- cursor: pointer;
+.ideditor[dir='rtl'] .inspector-hover .tag-row:last-child input.key {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 4px;
}
-.layer-list label > span {
- display: block;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
+.ideditor .inspector-hover .more-fields {
+ max-height: 0;
+ margin-bottom: -10px;
}
-.minimap-toggle {
- display: block;
- padding: 5px 10px;
- cursor: pointer;
- color: #7092FF;
- border-radius: 3px;
+/* Unstyle button fields */
+.ideditor .inspector-hover .form-field-input-radio label.active,
+.ideditor .inspector-hover .entity-editor-pane a.hide-toggle {
+ opacity: 1;
+ background-color: transparent;
+ color: #666;
+ padding-left: 0;
+ border-width: 0;
}
-
-.minimap-toggle.active {
- background: #E8EBFF;
+.ideditor .inspector-hover .form-field-input-radio button.active {
+ padding-left: 10px;
}
-.minimap-toggle:hover {
- background-color: #ececec;
+/* Show placeholder on hover for radio buttons */
+.ideditor .inspector-hover .form-field-input-radio {
+ border: 1px solid #ccc;
+ border-top: 0;
+ border-radius: 0 0 4px 4px;
}
-
-.hide-toggle {
- display: block;
- padding-left:12px;
- position: relative;
+.ideditor .inspector-hover .form-field-input-radio .placeholder {
+ opacity: 1;
+ color: #666;
+ padding: 5px 10px;
+ width: 100%;
+ height: auto;
+ border: 0;
+}
+.ideditor .inspector-hover .form-field-input-radio .structure-extras-wrap {
+ border: 0;
}
-.hide-toggle:before {
- content: '';
- display: block;
+
+/* Raster Background Tiles
+------------------------------------------------------- */
+.ideditor img.tile {
position: absolute;
- height: 0;
- width: 0;
- left: 0;
- top: 5px;
- border-top: 4px solid transparent;
- border-bottom: 4px solid transparent;
- border-left: 8px solid #7092ff;
-}
+ -webkit-transform-origin: 0 0;
+ -ms-transform-origin: 0 0;
+ transform-origin: 0 0;
-.hide-toggle.expanded:before {
- border-top: 8px solid #7092ff;
- border-bottom: 0;
- border-right: 4px solid transparent;
- border-left: 4px solid transparent;
-}
+ -webkit-user-select: none;
-/* Adjust Alignment controls */
+ -moz-user-select: none;
-.background-control .nudge-container {
- border: 1px solid #ccc;
- border-radius: 4px;
- padding: 10px;
-}
+ -ms-user-select: none;
-.nudge-container .nudge-instructions {
- padding-bottom: 15px;
-}
+ user-select: none;
-.nudge-container .nudge-outer-rect {
- background-color: #eee;
- border: 1px solid #ccc;
- border-radius: 2px;
- padding: 20px 0;
- width: 70%;
- display: flex;
- justify-content: center;
- align-items: center;
- margin: 0 auto;
- margin-top: 20px;
- cursor: move;
-}
+ pointer-events: none;
-.nudge-container .nudge-inner-rect {
- background-color: #fff;
- border: 1px solid #ccc;
- border-radius: 2px;
- width: 65%;
- min-height: 20px;
-}
+ -webkit-user-drag: none;
-.nudge-container .nudge::after {
- content: '';
- display: block;
- position: absolute;
- margin: auto;
- left: 0; right: 0; top: 0; bottom: 0;
- height: 0;
- width: 0;
-}
+ opacity: 0;
-.nudge-container input {
- width: 100%;
- height: 20px;
- text-align: center;
- border: 0;
-}
+ -webkit-transition: opacity 200ms linear;
-.nudge-container input.error {
- border: 1px solid #FF7878;
- border-radius: 2px;
- background: #ffb;
-}
+ -o-transition: opacity 200ms linear;
-.nudge-container input:focus {
- background-color: transparent;
+ transition: opacity 200ms linear;
}
-.nudge-container button {
- float: left;
- display: block;
- width: 20%;
- position: relative;
- background-color: transparent;
+.ideditor img.tile-loaded {
+ opacity: 1;
}
-.nudge-container button.right {
- top: -50px;
- right: -85%;
+.ideditor img.tile-removing {
+ opacity: 0;
}
-.nudge-container button.left {
- top: -50px;
- right: 45%;
-}
+.ideditor .tile-label-debug {
+ font-size: 10px;
+ background: rgba(0, 0, 0, 0.7);
+ color: #fff;
+ position: absolute;
+ text-align: center;
+ padding: 5px;
+ border-radius: 3px;
+ z-index: 2;
+ margin-left: -70px;
+ margin-top: -20px;
-.nudge-container button.top {
- left: 20%;
- top: -104px;
-}
+ -webkit-transform-origin: 0 0;
-.nudge-container button.bottom {
- left: -20%;
-}
+ -ms-transform-origin: 0 0;
-.nudge-container button.nudge-reset {
- right: -10px;
-}
+ transform-origin: 0 0;
-.nudge-surface {
- position: absolute;
- z-index: 5000;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- background-color: transparent;
- cursor: move;
-}
+ -webkit-user-select: none;
-.background-control .nudge.right::after {
- border-top: 5px solid transparent;
- border-bottom: 5px solid transparent;
- border-left: 5px solid #222;
-}
+ -moz-user-select: none;
-.background-control .nudge.left::after {
- border-top: 5px solid transparent;
- border-bottom: 5px solid transparent;
- border-right: 5px solid #222;
-}
+ -ms-user-select: none;
-.background-control .nudge.top::after {
- border-right: 5px solid transparent;
- border-left: 5px solid transparent;
- border-bottom: 5px solid #222;
+ user-select: none;
}
-.background-control .nudge.bottom::after {
- border-right: 5px solid transparent;
- border-left: 5px solid transparent;
- border-top: 5px solid #222;
+.ideditor img.tile-debug {
+ outline: 1px solid red;
}
-.opacity-options {
- background: url(<%= asset_path("iD/img/background-pattern-opacity.png") %>) 0 0 repeat;
- height:20px;
- width:82px;
+
+/* Map
+------------------------------------------------------- */
+.ideditor .main-map {
position: absolute;
- right: 50px;
- top: 20px;
- border: 1px solid #ccc;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: hidden;
+ height: 100%;
+ width: 100%;
+ background: #000;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ -ms-touch-action: none;
+ touch-action: none;
+ -webkit-touch-callout: none;
+}
+.ideditor .main-map * {
+ -ms-touch-action: none;
+ touch-action: none;
}
-.opacity-options li {
- height: 100%;
- display: block;
- float: left;
+.ideditor .supersurface {
+ -webkit-transform-origin: 0 0;
+ -ms-transform-origin: 0 0;
+ transform-origin: 0 0;
}
-.opacity-options li .select-box{
+.ideditor .supersurface, .ideditor .layer {
position: absolute;
- width:20px;
- height:18px;
- z-index: 9999;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
}
-.map-data-control li:hover .select-box,
-.map-data-control li.selected .select-box,
-.background-control li:hover .select-box,
-.background-control li.selected .select-box {
- border: 2px solid #7092ff;
- background: rgba(89, 123, 231, .5);
- opacity: .5;
-}
-.map-data-control li.selected:hover .select-box,
-.map-data-control li.selected .select-box,
-.background-control li.selected:hover .select-box,
-.background-control li.selected .select-box {
- opacity: 1;
+/* Map-In-Map
+------------------------------------------------------- */
+.ideditor .map-in-map {
+ position: absolute;
+ overflow: hidden;
+ top: 10px;
+ width: 200px;
+ height: 150px;
+ z-index: 2;
+ background: #000;
+ border: #aaa 1px solid;
+ -webkit-box-shadow: 0 0 2em black;
+ box-shadow: 0 0 2em black;
+}
+.ideditor[dir='ltr'] .map-in-map {
+ left: 10px;
+}
+.ideditor[dir='rtl'] .map-in-map {
+ right: 10px;
}
-.background-control .opacity {
- background:#222;
- display:inline-block;
- width:20px;
- height:18px;
+.ideditor .map-in-map-tiles {
+ -webkit-transform-origin: 0 0;
+ -ms-transform-origin: 0 0;
+ transform-origin: 0 0;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
}
-.map-data-control .layer-list button,
-.background-control .layer-list button {
- float: right;
+.ideditor .map-in-map-viewport,
+.ideditor .map-in-map-data {
+ top: 0;
+ left: 0;
+ overflow: hidden;
height: 100%;
- width: 10%;
- border-left: 1px solid #CCC;
- border-radius: 0;
+ width: 100%;
}
-.map-data-control .layer-list button .icon,
-.background-control .layer-list button .icon {
- opacity: 0.5;
+.ideditor .map-in-map-viewport {
+ position: absolute;
}
-.map-data-control .layer-list button:first-of-type,
-.background-control .layer-list button:first-of-type {
- border-radius: 0 3px 3px 0;
+.ideditor .map-in-map-data {
+ position: relative;
+ z-index: 10;
}
-.map-data-control .map-overlay,
-.background-control .map-overlay,
-.help-control .map-overlay {
- z-index: -1;
+.ideditor .map-in-map-bbox {
+ fill: none;
+ stroke: rgba(255, 255, 0, 0.75);
+ stroke-width: 1;
+ shape-rendering: crispEdges;
}
+.ideditor .map-in-map-bbox.thick {
+ stroke-width: 5;
+}
-/* Geolocator */
-.geolocate-control {
- margin-bottom: 10px;
+/* Debug Data
+------------------------------------------------------- */
+.ideditor .debug {
+ stroke: currentColor;
+ fill: none;
+ stroke-width: 2;
+}
+.ideditor .map-in-map-data .debug {
+ stroke-width: 1;
}
-.geolocate-control button {
- border-radius: 0 0 0 4px;
+.ideditor .nocolor { color: rgba(0, 0, 0, 0); }
+.ideditor .red { color: rgba(255, 0, 0, 0.75); }
+.ideditor .green { color: rgba(0, 255, 0, 0.75); }
+.ideditor .blue { color: rgba(176, 176, 255, 0.75); }
+.ideditor .yellow { color: rgba(255, 255, 0, 0.75); }
+.ideditor .cyan { color: rgba(0, 255, 255, 0.75); }
+.ideditor .magenta { color: rgba(255, 0, 255, 0.75); }
+.ideditor .orange { color: rgba(255, 153, 0, 0.75); }
+.ideditor .pink { color: rgba(255, 0, 153, 0.75); }
+.ideditor .purple { color: rgba(153, 0, 255, 0.75); }
+
+.ideditor .debug-legend {
+ position: absolute;
+ top: 70px;
+ right: 80px;
+ padding: 5px;
+ border-radius: 4px;
+ pointer-events: none;
}
-.map-overlay.content {
- position: fixed;
- top:60px;
- bottom: 30px;
- padding: 20px 50px 20px 20px;
- right: 0;
- overflow: auto;
+.ideditor .debug-legend-item {
+ padding-right: 5px;
+}
+.ideditor .debug-legend-item:before {
+ content: "\25A0";
+ padding: 0 5px;
}
-/* Help */
-.help-control button {
- border-radius: 0 0 0 4px;
+/* Information Panels
+------------------------------------------------------- */
+.ideditor .info-panels {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row wrap-reverse;
+ flex-flow: row wrap-reverse;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+ width: 100%;
+ z-index: 1;
+ -ms-user-select: element;
+ pointer-events: none;
+ overflow: hidden;
}
-.help-wrap p {
- font-size: 15px;
- margin-bottom: 20px;
+.ideditor .panel-container h1,
+.ideditor .panel-container h2,
+.ideditor .panel-container h3,
+.ideditor .panel-container h4,
+.ideditor .panel-container h5 {
+ display: inline-block;
+ margin-bottom: 0;
}
-.help-wrap .left-content .body p code {
- padding:2px 4px;
- background:#eee;
+.ideditor .panel-container h1,
+.ideditor .panel-container h2,
+.ideditor .panel-container h3 {
+ color: #ff8;
}
-.help-wrap .toc {
- /* This is two columns, 41.66666 x .4 = 16.6666 */
- width:40%;
- float:right;
- margin-left: 20px;
- margin-bottom: 20px;
- padding-left: 5px;
+.ideditor .panel-container {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ margin: 0 2px 2px 0;
+ border-radius: 4px;
+ border: 1px solid rgba(0, 0, 0, 0.75);
+ padding-bottom: 10px;
+ width: 250px;
+ max-width: 100%;
+ pointer-events: auto;
}
-.help-wrap .toc li a,
-.help-wrap .nav a {
- display: block;
- border: 1px solid #CCC;
+.ideditor .panel-container .panel-title {
+ border-radius: 4px 4px 0 0;
+}
+
+.ideditor .panel-title {
padding: 5px 10px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
}
-.help-wrap .toc li a {
- border-bottom: 0;
+.ideditor .panel-title button.close {
+ padding: 2px;
+ background: none;
+ color: #ddd;
+}
+.ideditor[dir='rtl'] .panel-title button.close {
+ float: left;
+}
+.ideditor .panel-title button.close:focus,
+.ideditor .panel-title button.close:active {
+ color: #fff;
+}
+@media (hover: hover) {
+ .ideditor .panel-title button.close:hover {
+ color: #fff;
+ }
+}
+.ideditor .panel-title button.close .icon {
+ height: 20px;
+ width: 16px;
}
-.help-wrap .toc li a:hover,
-.help-wrap .nav a:hover {
- background: #ececec;
+.ideditor .panel-content {
+ padding: 5px 10px;
+ position: relative;
}
-.help-wrap .toc li a.selected {
- background: #E8EBFF;
+.ideditor .panel-content ul:empty {
+ display: none;
}
-.help-wrap .toc li:first-child a {
- border-radius: 4px 4px 0 0;
+.ideditor .panel-content li span:not(.localized-text) {
+ display: inline-block;
+ white-space: nowrap;
+ margin: 0 8px;
}
-.help-wrap .toc li:nth-last-child(2) a {
- border-bottom: 1px solid #CCC;
- border-radius: 0 0 4px 4px
+.ideditor .panel-content .button {
+ display: inline-block;
+ background: #7092ff;
+ border-radius: 2px;
+ padding: 0 4px;
+ margin-top: 10px;
+ margin-right: 10px;
+ color: #fff;
+}
+.ideditor[dir='rtl'] .panel-content .button {
+ margin-right: auto;
+ margin-left: 10px;
}
-.help-wrap .toc li.walkthrough a {
- overflow: hidden;
+.ideditor .panel-content-history .links a {
+ margin-left: 8px;
+}
+.ideditor[dir='rtl'] .panel-content-history .links a {
+ margin-left: auto;
+ margin-right: 8px;
+}
+.ideditor .panel-content-history h4 {
+ padding-bottom: 0;
+}
+.ideditor .panel-content-location .location-info {
margin-top: 10px;
- border-bottom: 1px solid #ccc;
- border-radius: 4px;
- text-align: center;
}
-.help-wrap .nav {
+
+/* Map Footer
+------------------------------------------------------- */
+.ideditor .map-footer {
+ width: 100%;
position: relative;
+ border-radius: 0;
+ pointer-events: none;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -ms-user-select: element;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
}
-.help-wrap .nav a {
- float: left;
- width: 50%;
- text-align: center;
+.ideditor .map-footer-bar {
+ pointer-events: all;
+ display: block;
+ height: 2.5em;
+ position: relative;
}
-.help-wrap .nav a:first-child {
- border-radius: 4px 0 0 4px;
+.ideditor .main-footer-wrap,
+.ideditor .flash-wrap {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 100%;
+ flex: 0 0 100%;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ height: 100%;
+ position: absolute;
+ right: 0;
+ left: 0;
}
-.help-wrap .nav a:last-child:not(:only-child) {
- border-radius: 0 4px 4px 0;
- border-left: 0;
+.ideditor .footer-show {
+ bottom: 0px;
+ -webkit-transition: bottom 75ms linear;
+ -o-transition: bottom 75ms linear;
+ transition: bottom 75ms linear;
}
-.help-wrap .nav a:only-child {
- width: 100%;
- border-radius: 4px;
+.ideditor .footer-hide {
+ bottom: -100%;
+ -webkit-transition: bottom 75ms linear;
+ -o-transition: bottom 75ms linear;
+ transition: bottom 75ms linear;
}
-/* Tiles
+/* Attribution
------------------------------------------------------- */
-
-img.tile {
- position:absolute;
- 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;
-
- opacity: 0;
-
- -webkit-transition: opacity 200ms linear;
- transition: opacity 200ms linear;
- -moz-transition: opacity 200ms linear;
+.ideditor .attribution-wrap {
+ position: absolute;
+ bottom: 5px;
+ left: 5px;
+ right: 5px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-box-align: end;
+ -ms-flex-align: end;
+ align-items: flex-end;
+ z-index: 0;
+ pointer-events: none;
}
-.tile-label-debug {
- background: rgba(0, 0, 0, 0.7);
- color: #fff;
- position: absolute;
- text-align: center;
- width: 128px;
- border-radius: 3px;
- z-index: 2;
+.ideditor .attribution-wrap > * {
+ pointer-events: auto;
+}
- transform-origin:0 0;
- -ms-transform-origin:0 0;
- -webkit-transform-origin:0 0;
- -moz-transform-origin:0 0;
- -o-transform-origin:0 0;
+.ideditor .attribution-wrap .base-layer-attribution,
+.ideditor .attribution-wrap .overlay-layer-attribution {
+ color: #ccc;
+ font-size: 10px;
+}
+.ideditor .attribution-wrap .overlay-layer-attribution {
+ text-align: right;
+}
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- user-select: none;
+.ideditor .attribution-wrap .overlay-layer-attribution .attribution:not(:last-child):after {
+ content: '; ';
}
-img.tile-debug {
- border: 1px solid red;
+.ideditor .attribution-wrap .attribution a,
+.ideditor .attribution-wrap .attribution a:visited {
+ color: #ccf;
+}
+.ideditor .attribution-wrap .attribution a:focus,
+.ideditor .attribution-wrap .attribution a:hover {
+ color: #aaf;
+}
+@media (hover: hover) {
+ .ideditor .attribution-wrap .attribution a:hover {
+ color: #aaf;
+ }
}
-img.tile-loaded {
- opacity: 1;
+.ideditor .attribution-wrap .attribution .source-image {
+ height: 20px;
+ vertical-align: middle;
+ border-radius: 3px;
}
-img.tile-removing {
- opacity: 0;
+.ideditor .attribution-wrap .attribution span {
+ margin: 0 3px;
}
-/* Map
+/* Footer - Flash messages
------------------------------------------------------- */
+.ideditor .flash-content {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 0 auto;
+ flex: 1 0 auto;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ padding: 2px;
+}
-#map {
- position:relative;
- overflow:hidden;
- height:100%;
- background:#000;
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- user-select: none;
+.ideditor .flash-icon {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ width: 20px;
+ height: 20px;
+ margin: 0 8px;
}
-#supersurface {
- transform-origin:0 0;
- -ms-transform-origin:0 0;
- -webkit-transform-origin:0 0;
- -moz-transform-origin:0 0;
- -o-transform-origin:0 0;
+.ideditor .flash-icon circle {
+ fill: #eee;
}
-
-#supersurface, .layer {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
+.ideditor .flash-icon.disabled circle {
+ cursor: auto;
+ fill: rgba(255,255,255,0.7);
}
-/* 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;
+.ideditor .flash-icon use {
+ color: #222;
+}
+.ideditor .flash-icon.disabled use,
+.ideditor .flash-icon.operation.disabled use {
+ fill: rgba(32,32,32,0.7);
+ color: rgba(40,40,40,0.7);
}
-.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;
+.ideditor .flash-text {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+}
- -moz-user-select: none;
+/* Scale bar
+------------------------------------------------------- */
+.ideditor .map-footer-bar .scale-block {
+ vertical-align: bottom;
+ width: 250px;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
-webkit-user-select: none;
- -ms-user-select: none;
- user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ height: 30px;
+ -ms-flex-item-align: center;
+ align-self: center;
}
-.map-in-map-viewport,
-.map-in-map-data {
- top: 0;
- left: 0;
- overflow: hidden;
+.ideditor .scale-block .scale {
height: 100%;
width: 100%;
+ cursor: pointer;
+ display: block;
}
-
-.map-in-map-viewport {
- position: absolute;
+.ideditor[dir='rtl'] .scale-block .scale {
+ -webkit-transform: scaleX(-1);
+ -ms-transform: scaleX(-1);
+ transform: scaleX(-1);
}
-.map-in-map-data {
- position: relative;
- z-index: 10;
+.ideditor .scale-block .scale-text {
+ display: inline-block;
+ position: absolute;
+ color: #ccc;
+ top: 0.45em;
}
-.map-in-map-bbox {
+.ideditor .scale-block .scale path {
fill: none;
- stroke: rgba(255, 255, 0, 0.75);
+ stroke: #ccc;
stroke-width: 1;
shape-rendering: crispEdges;
}
-.map-in-map-bbox.thick {
- stroke-width: 5;
-}
-
-
-/* Debug
+/* Footer - About, Source Switcher
------------------------------------------------------- */
-.debug {
- stroke: currentColor;
- fill: none;
- stroke-width: 2;
-}
-.map-in-map-data .debug {
- stroke-width: 1;
+.ideditor .map-footer-bar .info-block {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 100%;
+ flex: 1 1 100%;
+ overflow: hidden;
}
-.red { color: rgba(255, 0, 0, 0.75); }
-.green { color: rgba(0, 255, 0, 0.75); }
-.blue { color: rgba(0, 0, 255, 0.75); }
-.yellow { color: rgba(255, 255, 0, 0.75); }
-.cyan { color: rgba(0, 255, 255, 0.75); }
-.magenta { color: rgba(255, 0, 255, 0.75); }
-.orange { color: rgba(255, 153, 0, 0.75); }
-.pink { color: rgba(255, 0, 153, 0.75); }
-.purple { color: rgba(153, 0, 255, 0.75); }
+.ideditor .map-footer-list {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ height: 100%;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+}
-.debug-legend {
- position: absolute;
- top: 70px;
- right: 80px;
+.ideditor .map-footer-list li {
+ height: 100%;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ white-space: nowrap;
padding: 5px;
- border-radius: 4px;
- pointer-events: none;
}
-
-.debug-legend-item {
- padding-right: 5px;
+.ideditor[dir='ltr'] .map-footer-list li:not(:last-child) {
+ border-right: 1px solid rgba(255,255,255,.5);
}
-.debug-legend-item:before {
- content: "\25A0";
- padding: 0 5px;
+.ideditor[dir='rtl'] .map-footer-list li:not(:last-child) {
+ border-left: 1px solid rgba(255,255,255,.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;
- -ms-user-select: element;
+.ideditor .map-footer-list li:empty {
+ display: none;
}
-.infobox .infobox-heading {
- display: block;
- border-radius: 4px 0 0 0;
- padding: 5px 10px;
- height: 30px;
+.ideditor .map-footer-list a.chip {
+ padding: 1px 4px 1px 4px;
+ border-radius: 2px;
+ color: #eee;
}
-
-.infobox ul {
- padding: 5px 10px;
+.ideditor .map-footer-list a.chip .icon {
+ width: 14px;
+ height: 14px;
+ margin-top: -2px;
}
-
-.infobox .button {
- position: absolute;
- background: #7092ff;
- border-radius: 2px;
- padding: 0 4px;
- color: white;
- top: 40px;
- right: 10px;
+.ideditor .map-footer-list a.chip span.count {
+ margin: 0 3px;
}
-/* About Section
-------------------------------------------------------- */
-
-#about {
- width: 100%;
- position: absolute;
- right:0;
- bottom:0;
- border-radius: 0;
- pointer-events: none;
- display: flex;
- flex-direction: column;
- -ms-user-select: element;
+.ideditor .source-switch a.chip.live {
+ background: #d32232;
+ color: #fff;
}
-#attrib {
- width: 100%;
- height: 20px;
- margin-bottom: 5px;
+.ideditor .feature-warning a.chip {
+ background: #1e90ff;
}
-#attrib * { pointer-events: all; }
-
-.base-layer-attribution,
-.overlay-layer-attribution {
- position: absolute;
- color: #888;
- font-size: 10px;
+.ideditor .issues-info a.chip.resolved-count {
+ background: #15911E;
}
-
-.base-layer-attribution {
- left: 10px;
+.ideditor .issues-info a.chip.warnings-count {
+ background: #DF8500;
+}
+.ideditor[dir='ltr'] .issues-info a.chip:not(:last-child) {
+ margin-right: 5px;
+}
+.ideditor[dir='rtl'] .issues-info a.chip:not(:last-child) {
+ margin-left: 5px;
}
-.overlay-layer-attribution {
- right: 10px;
+.ideditor .user-list a:not(:last-child):after {
+ content: ', ';
}
-.overlay-layer-attribution .attribution:not(:last-child):after {
- content: '; ';
+.ideditor .api-status {
+ text-align: right;
+ padding: 1px 10px;
+ color: #eee;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+}
+.ideditor[dir='rtl'] .api-status {
+ text-align: left;
+}
+.ideditor .api-status:empty {
+ display: none;
}
-.source-image {
- height: 20px;
- vertical-align:top;
+.ideditor .api-status.offline,
+.ideditor .api-status.readonly,
+.ideditor .api-status.error {
+ background: #a22;
}
-#footer {
+.ideditor .api-status a {
+ text-decoration: underline;
+ color: #ccc;
pointer-events: all;
+}
+.ideditor .api-status a:focus,
+.ideditor .api-status a:active {
+ color: inherit;
+}
+@media (hover: hover) {
+ .ideditor .api-status a:hover {
+ color: inherit;
+ }
+}
+
+.ideditor .local-storage-full {
display: block;
- height: 30px;
+ width: 100%;
}
+/* Notification Badges
+------------------------------------------------------- */
+/* For an icon (e.g. new version) */
+.ideditor .badge {
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ background: #d32232;
+ width: 21px;
+ height: 21px;
+ border-radius: 50%;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.ideditor[dir='ltr'] .badge {
+ margin-left: 6px;
+}
+.ideditor[dir='rtl'] .badge {
+ margin-right: 6px;
+}
+.ideditor .badge .icon {
+ vertical-align: baseline;
+ width: 11px;
+ height: 11px;
+ color: #fff;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+}
-#flash-wrap {
- display: flex;
- flex: 0 0 100%;
- flex-flow: row nowrap;
- justify-content: space-between;
- max-height: 30px;
- position: absolute;
- right: 0;
- left: 0;
+/* For text (e.g. upcoming events) */
+.ideditor .badge-text {
+ display: inline-block;
+ color: #fff;
+ text-align: center;
+ width: 16px;
+ height: 16px;
+ font-size: 10px;
+ font-weight: bold;
+ margin-left: 5px;
+ background: #f00;
+ border-radius: 9px;
+}
+.ideditor[dir='rtl'] .badge-text {
+ margin-left: 0;
+ margin-right: 5px;
}
-#flash-wrap .content {
+
+/* Modals / Prompts
+------------------------------------------------------- */
+.ideditor .modal {
+ top: 5%;
+ max-height: 90%;
+ position: relative;
+ border-radius: 3px;
+ overflow: hidden;
+ margin: auto;
+ z-index: 50;
+ width: 80%;
+ min-width: 200px;
+ max-width: 550px;
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- flex: 1 0 auto;
- flex-flow: row nowrap;
- align-items: center;
- padding: 2px;
- height: 30px;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
}
-
-#flash-wrap svg.operation-icon {
- flex: 0 0 auto;
- width: 20px;
- height: 20px;
- margin: 0 8px;
+.ideditor .modal .content {
+ overflow-x: hidden;
+ overflow-y: auto;
}
-#flash-wrap div.operation-tip {
- flex: 1 1 auto;
+.ideditor .modal .loader {
+ margin-bottom: 10px;
+}
+.ideditor .modal .description {
+ text-align: center;
}
-#footer-wrap {
- display: flex;
- flex: 0 0 100%;
- flex-flow: row nowrap;
- justify-content: space-between;
- max-height: 30px;
+.ideditor .shaded {
+ z-index: 5000;
position: absolute;
- right: 0;
+ top: 0;
+ bottom: 0;
left: 0;
+ right: 0;
+ overflow: auto;
}
-
-.footer-show {
- bottom: 0px;
- transition: bottom 75ms linear;
- -moz-transition: bottom 75ms linear;
- -webkit-transition: bottom 75ms linear;
-}
-
-.footer-hide {
- bottom: -35px;
- transition: bottom 75ms linear;
- -moz-transition: bottom 75ms linear;
- -webkit-transition: bottom 75ms linear;
+.ideditor .shaded:before {
+ content:'';
+ background: rgba(0,0,0,0.5);
+ position: absolute;
+ left: 0px; right: 0px; top: 0px; bottom: 0px;
}
-
-#scale-block {
- vertical-align: bottom;
- width: 250px;
- max-height: 30px;
- flex: 0 0 250px;
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- user-select: none;
+.ideditor .modal-section {
+ padding: 20px;
+ border-bottom: 1px solid #ccc;
}
-
-#info-block {
- max-height: 30px;
- flex: 1 1 auto;
+.ideditor .modal-section p:not(:last-of-type) {
+ padding-bottom: 20px;
}
-
-#scale {
- height: 30px;
- width: 100%;
+.ideditor .modal-section h4 {
+ padding-bottom: 0;
}
-[dir='rtl'] #scale {
- transform: scaleX(-1);
+.ideditor .modal-section.buttons {
+ text-align: center;
}
-#scale:hover {
- cursor: pointer;
+.ideditor .modal-section.buttons button {
+ min-width: 130px;
}
-#scale text {
- font: 12px sans-serif;
- stroke: none;
- fill: #ccc;
- text-anchor: start;
-}
-[dir='rtl'] #scale text {
- transform: scaleX(-1);
+.ideditor .modal-section.buttons .action {
+ display: inline-block;
+ margin: 0 10px;
}
-#scale path {
- fill: none;
- stroke: #ccc;
- stroke-width: 1;
- shape-rendering: crispEdges;
+.ideditor .save-section .buttons {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -ms-flex-pack: distribute;
+ justify-content: space-around;
}
+.ideditor .save-section .buttons .action,
+.ideditor .save-section .buttons .secondary-action {
+ width: 45%;
+ margin: 10px auto;
+ text-align: center;
+ vertical-align: middle;
+}
-#about-list {
- text-align: right;
- margin-right: 10px;
- clear: right;
- overflow: hidden;
+.ideditor .loading-modal {
+ text-align: center;
}
-[dir='rtl'] #about-list {
- text-align: left;
- clear: left;
- margin-left: 10px;
- margin-right: 0;
+.ideditor .modal-actions {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.ideditor .modal-actions button {
+ color: #7092ff;
+ border-bottom: 1px solid #ccc;
+ border-radius: 0;
+ min-height: 160px;
+ text-align: center;
+ width: 100%;
}
-#about-list li {
- float: right;
- border-left: 1px solid rgba(255,255,255,.5);
- padding: 5px 0 5px 5px;
- margin-left: 5px;
+.ideditor .logo-small {
+ height: 40px;
+ width: 40px;
+ margin: auto;
}
-[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;
+
+.ideditor .logo {
+ height: 100px;
+ width: 100%;
+ max-width: 100px;
+ margin: auto;
}
-
-#about-list li:last-child {
- border-left: 0;
- margin-left: 0;
- padding-left: 0;
+.ideditor .modal-actions > :first-child {
+ border-right: 1px solid #ccc;
}
-[dir='rtl'] #about-list li:last-child {
- border-right: none;
+
+.ideditor .modal-section:last-child {
+ border-bottom: 0;
}
-.source-switch a {
- padding: 2px 4px 4px 4px;
- border-radius: 2px;
+/* Restore Modal
+------------------------------------------------------- */
+.ideditor .modal-actions .logo-restore {
+ color: #7092ff;
}
-.source-switch a.live {
- background: #d32232;
- color:#fff;
+.ideditor .modal-actions .logo-reset {
+ color: #e06c5e;
}
-.feature-warning a {
- background: #1e90ff;
- padding: 2px 4px 4px 4px;
- border-radius: 2px;
- color: #eee;
+/* Success Screen / Community Index
+------------------------------------------------------- */
+.ideditor .save-success.body {
+ overflow-y: scroll;
+ overflow-x: hidden;
}
-.user-list a:not(:last-child):after {
- content: ', ';
+.ideditor .save-success .link-out {
+ margin: 0px 5px;
+ white-space: nowrap;
}
-.api-status {
- text-align: right;
- padding: 0px 10px;
- color: #eee;
- flex: 1 1 auto;
-}
-[dir='rtl'] .api-status {
- text-align: left;
+.ideditor .save-summary,
+.ideditor .save-communityLinks {
+ padding: 0px 20px 15px 20px;
}
-.api-status.offline,
-.api-status.readonly,
-.api-status.error {
- background: #a22;
+.ideditor .save-communityLinks {
+ border-top: 1px solid #ccc;
}
-.api-status-login {
- color: #aaf;
+.ideditor .save-success table,
+.ideditor .save-success p {
+ margin-top: 15px;
}
-.api-status-login:hover {
- color: #ccf;
+.ideditor .save-success h3 {
+ font-size: 14px;
+ margin-top: 15px;
+ line-height: 1.5;
+ padding-bottom: 0;
}
-
-.badge {
- display: inline-block;
- background: #d32232;
- width: 21px;
- height: 20px;
- border-radius: 11px;
- margin-left: 6px;
+.ideditor .save-success td {
+ vertical-align: top;
}
-[dir='rtl'] .badge {
- margin-left: 0;
- margin-right: 6px;
+.ideditor .save-success td.cell-icon {
+ width: 40px;
}
-.badge a {
- margin-right: 5px;
+.ideditor .save-success td.cell-detail {
+ padding: 0 10px;
}
-[dir='rtl'] .badge a {
- margin-right: 0;
- margin-left: 5px;
+.ideditor .save-success td.community-detail {
+ padding-bottom: 15px;
}
-.badge .icon {
- vertical-align: baseline;
- width: 11px;
- height: 11px;
- fill: white;
+.ideditor .save-success .community-table h3 {
+ margin: 0;
}
+.ideditor .summary-view-on-osm,
+.ideditor .community-name {
+ font-size: 14px;
+ font-weight: bold;
+}
+.ideditor .community-languages {
+ margin-top: 5px;
+ font-style: italic;
+}
+.ideditor .community-languages:only-child {
+ margin-top: 0;
+}
-/* Modals
-------------------------------------------------------- */
+.ideditor .community-detail a.hide-toggle,
+.ideditor .community-detail a:visited.hide-toggle {
+ font-size: 12px;
+ font-weight: normal;
+ padding-bottom: 0;
+}
+.ideditor .community-detail .hide-toggle svg.icon.pre-text {
+ width: 12px;
+ height: 15px;
+}
-.modal {
- top: 40px;
- display: inline-block;
- position:absolute;
- border-radius: 3px;
- overflow: hidden;
- left: 0;
- right: 0;
- margin: auto;
- z-index: 50;
+.ideditor .community-events {
+ margin-top: 5px;
}
-.modal .loader {
- margin-bottom: 10px;
+.ideditor .community-event,
+.ideditor .community-more {
+ background-color: #efefef;
+ padding: 8px;
+ border-radius: 4px;
+ margin-bottom: 5px;
+}
+
+.ideditor .community-event-name {
+ font-size: 14px;
+ font-weight: bold;
+}
+.ideditor .community-event-when {
+ font-weight: bold;
}
-.modal .description {
+.ideditor .community-missing {
+ padding: 10px;
text-align: center;
}
-.shaded {
- z-index: 49;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- overflow: auto;
+
+/* Splash Modal
+------------------------------------------------------- */
+.ideditor .modal-actions .logo-walkthrough,
+.ideditor .modal-actions .logo-features {
+ color: #7092ff;
}
-.shaded:before {
- content:'';
- background:rgba(0,0,0,0.5);
- position:fixed;
- left:0px; right:0px; top:0px; bottom:0px;
+.ideditor .modal-splash .section-preferences-third-party {
+ margin-top: 20px;
}
-.modal-section {
- padding: 20px;
- border-bottom: 1px solid #CCC;
+.ideditor .modal-splash .section-preferences-third-party .privacy-link {
+ display: none;
}
-.modal-section.header h3 {
- padding: 0;
+
+/* Shortcuts Modal
+------------------------------------------------------- */
+.ideditor .modal-shortcuts {
+ width: 90%;
+ max-width: 1050px;
}
-.modal-section.buttons {
- text-align: center;
+.ideditor .modal-shortcuts .modal-section:last-child {
+ padding: 10px 15px 20px 15px;
+ min-height: 275px;
}
-.modal-section.buttons .action {
- display: inline-block;
- margin: 0 10px;
+.ideditor .modal-shortcuts .tabs-bar {
+ padding-bottom: 5px;
text-align: center;
- vertical-align: middle;
}
-.save-section .buttons .action,
-.save-section .buttons .secondary-action {
+.ideditor .modal-shortcuts a.tab {
display: inline-block;
- margin: 0 20px 0 0;
- text-align: center;
- vertical-align: middle;
+ padding: 5px 10px;
+ margin: 0 5px;
+ cursor: pointer;
+ color: #666;
+ font-size: 16px;
+ font-weight: bold;
}
-
-.loading-modal {
- text-align: center;
+.ideditor .modal-shortcuts a.tab.active {
+ color: #7092ff;
+ border-bottom: 2px solid;
+}
+.ideditor .modal-shortcuts a.tab:focus,
+.ideditor .modal-shortcuts a.tab:active {
+ color: #597be7;
+ background-color: #efefef;
+}
+@media (hover: hover) {
+ .ideditor .modal-shortcuts a.tab:hover {
+ color: #597be7;
+ background-color: #efefef;
+ }
}
-.modal-actions button,
-.save-success a.button {
- font-weight: normal;
- color: #7092FF;
- border-bottom: 1px solid #CCC;
- border-radius: 0;
- height: 160px;
- text-align: center;
- display: inline-block;
+.ideditor .modal-shortcuts .shortcut-tab {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+ -ms-flex-pack: distribute;
+ justify-content: space-around;
}
-.modal-actions button:hover
-.save-success a.button:hover {
- background-color: #ececec;
+.ideditor .modal-shortcuts .shortcut-column {
+ width: auto;
}
-.logo {
- height: 100px;
+.ideditor .modal-shortcuts .shortcut-tab-tools .shortcut-column {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 100%;
+ flex: 1 1 100%;
width: 100%;
- max-width: 100px;
- margin: auto;
}
-.modal-actions > :first-child {
- border-right: 1px solid #CCC;
+.ideditor .modal-shortcuts td {
+ padding-bottom: 5px;
}
-.modal-section:last-child {
- border-bottom: 0;
+.ideditor .modal-shortcuts .shortcut-section {
+ padding: 20px 0 10px 0;
}
-/* Restore Modal
-------------------------------------------------------- */
-.modal-actions .logo-restore {
- color: #7092FF;
+.ideditor .modal-shortcuts .shortcut-keys {
+ padding: 0 10px;
+ color: #767676;
+ text-align: right;
+ white-space: nowrap;
}
-.modal-actions .logo-reset {
- color: #E06C5E;
+.ideditor[dir='rtl'] .modal-shortcuts .shortcut-keys {
+ text-align: left;
}
-/* Success Modal
-------------------------------------------------------- */
-.save-success p {
- padding: 15px 15px 0 15px;
+.ideditor .modal-shortcuts .shortcut-keys kbd {
+ color: #555;
}
-.save-success a.details {
- padding-left: 15px;
+
+.ideditor .modal-shortcuts .shortcut-keys .gesture {
+ color: #333;
+ padding: 3px;
}
-.save-success .button {
- padding-top: 15px;
+
+
+/* Settings Modals
+------------------------------------------------------- */
+.ideditor .settings-modal textarea {
+ height: 70px;
+ width: 100%;
}
-.save-success .logo-osm {
- color: #7092FF;
- margin-bottom: 10px;
+
+.ideditor .settings-custom-background .instructions-template {
+ margin-bottom: 20px;
}
-.save-success a.button.social {
- height: auto;
- border-bottom: none;
+.ideditor .settings-custom-background .instructions-template p {
+ margin-bottom: 0;
}
-.save-success .icon.social {
- height: 80px;
- width: 80px;
- color: #7092FF;
+.ideditor .settings-custom-background .instructions-template ul {
+ padding-bottom: 20px;
+}
+.ideditor .settings-custom-background .instructions-template ul li {
+ list-style-type: disc;
+ list-style-position: inside;
}
-/* Splash Modal
-------------------------------------------------------- */
-.modal-actions .logo-walkthrough,
-.modal-actions .logo-features {
- color: #7092FF;
+.ideditor .settings-custom-data .instructions-url {
+ margin-bottom: 10px;
+}
+.ideditor .settings-custom-data .field-file,
+.ideditor .settings-custom-data .instructions-template {
+ margin-bottom: 20px;
}
/* Save Mode
------------------------------------------------------- */
-.mode-save a.user-info {
+.ideditor a.user-info {
display: inline-block;
}
-.mode-save .commit-form {
+.ideditor .commit-form {
margin-bottom: 0;
}
-.mode-save .user-info img {
- float: left;
-}
-
-.mode-save h3 small.count {
- margin-right: 10px;
- text-align: center;
+.ideditor .user-info img {
float: left;
- height: 12px;
- min-width: 12px;
- font-size:12px;
- line-height: 12px;
- border-radius:24px;
- padding:5px;
- background:#7092ff;
- color:#fff;
}
-.mode-save .commit-info {
- margin-bottom: 10px;
+.ideditor .note-save .field-warning,
+.ideditor .field-warning {
+ background: #ffb;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ padding: 10px;
}
-.mode-save .changeset-list {
- border:1px solid #ccc;
- border-radius: 4px;
- background:#fff;
+.ideditor .note-save .field-warning:empty,
+.ideditor .field-warning:empty {
+ display: none;
}
-.mode-save .warning-section .changeset-list button {
- border-left: 1px solid #CCC;
+.ideditor .field-warning,
+.ideditor .changeset-info,
+.ideditor .request-review,
+.ideditor .commit-info {
+ margin-bottom: 10px;
}
-.mode-save .changeset-list li {
- position: relative;
- border-top:1px solid #ccc;
- padding:5px 10px;
+.ideditor .request-review label {
cursor: pointer;
}
-.mode-save .changeset-list li:hover {
- background-color: #ececec;
+.ideditor .changeset-list {
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ background: #fff;
+ margin-bottom: 10px;
+ overflow: hidden;
}
-.mode-save .changeset-list .alert {
- opacity: 0.5;
+.ideditor .changeset-list li button {
+ padding: 5px 10px;
+ width: 100%;
+ border-radius: 0;
+ text-align: initial;
}
-
-.changeset-list li span.count {
- font-size:10px;
- color:#555;
+.ideditor .changeset-list li {
+ border-top: 1px solid #ccc;
}
-
-.mode-save .commit-section .changeset-list button {
- border-left: 1px solid #CCC;
+.ideditor .changeset-list li:first-child {
+ border-top: 0;
+}
+.ideditor .changeset-list .alert {
+ opacity: 0.5;
}
-.changeset-list li span.count:before { content: '('; }
-
-.changeset-list li span.count:after { content: ')'; }
-
-.changeset-list li:first-child { border-top: 0;}
/* Conflict resolution
------------------------------------------------------- */
-
-.conflicts-help {
+.ideditor .conflicts-help {
padding: 20px;
background-color: #ffffbb;
border-bottom: 1px solid #ccc;
}
-.conflicts-buttons {
+.ideditor .conflicts-buttons {
padding: 20px;
}
-.mode-save button.conflicts-button {
+.ideditor button.conflicts-button {
float: left;
}
-.conflict-container {
+.ideditor .conflict-container {
border-bottom: 1px solid #ccc;
}
-.conflict-description {
+.ideditor .conflict-description {
padding: 5px 20px;
display: block;
}
-.conflicts-done {
+.ideditor .conflicts-done {
padding: 20px 20px 0 20px;
}
-.conflict-detail-container {
+.ideditor .conflict-detail-container {
padding: 10px 20px;
}
-.conflict-count {
+.ideditor .conflict-count {
padding: 10px 20px;
}
-.conflict-choices {
+.ideditor .conflict-choices {
margin-top: 10px;
}
-.conflict-nav-buttons {
+.ideditor .conflict-nav-buttons {
padding: 10px 0 20px 0;
}
-.conflict-nav-button {
+.ideditor .conflict-nav-button {
height: 30px;
}
-/* Notices
-------------------------------------------------------- */
-.notice {
+/* Notices (Zoom in to Edit)
+------------------------------------------------------- */
+.ideditor .notice {
position: absolute;
- top: 0;
- bottom: 0;
+ top: 15px;
left: 0;
right: 0;
text-align: center;
- background: #fff;
}
-.notice .zoom-to {
+.ideditor .notice .zoom-to {
margin: auto;
- width: 80%;
- height: 100px;
- border-radius: 5px;
- line-height: 40px;
- color: #000;
- opacity: 0.9;
+ width: 300px;
+ padding: 20px 5px;
+ font-size: 150%;
+ border-radius: 8px;
+ font-weight: bold;
}
-.notice .zoom-to:hover {
- background: #d8e1ff;
+.ideditor .notice .zoom-to:focus,
+.ideditor .notice .zoom-to:active {
+ background: rgba(0,0,0,0.6);
+}
+@media (hover: hover) {
+ .ideditor .notice .zoom-to:hover {
+ background: rgba(0,0,0,0.6);
+ }
}
-.notice .zoom-to .icon {
- margin-top:10px;
- margin-right:10px;
+.ideditor .notice .zoom-to .icon {
+ width: 30px;
+ height: 30px;
+ vertical-align: middle;
+ margin-right: 10px;
}
+.ideditor[dir='rtl'] .notice .zoom-to .icon {
+ margin-left: 10px;
+ margin-right: 0;
+}
+
/* Tooltips
------------------------------------------------------- */
-
-.tooltip {
+.ideditor .popover {
position: absolute;
display: none;
- color:#333;
+}
+.ideditor .tooltip {
+ color: #333;
font-size: 12px;
+ white-space: initial;
}
-
-.tooltip.in {
- opacity: 0.9;
- z-index: 1030;
+.ideditor .tooltip:not(.curtain-tooltip) {
+ pointer-events: none;
+}
+.ideditor .popover.in {
+ z-index: 5000;
height: auto;
display: block;
}
-
-.tooltip.top {
- margin-top: -20px;
- text-align: center;
+.ideditor .tooltip.in {
+ opacity: 0.95;
}
-
-.tooltip.right {
- margin-left: 20px;
- text-align: left;
+.ideditor .popover.top {
+ margin-top: -4px;
}
-
-.tooltip.bottom {
- margin-top: 20px;
- text-align: center;
+.ideditor .popover.right {
+ margin-left: 4px;
}
-
-.tooltip.left {
- margin-left: -20px;
- text-align: right;
+.ideditor .popover.bottom {
+ margin-top: 4px;
}
-
-.tooltip-inner {
- display: inline-block;
- border-radius: 3px;
- max-width: 200px;
- min-width: 80px;
- padding: 10px;
- font-weight: normal;
- background-color: white;
+.ideditor .popover.left {
+ margin-left: -4px;
}
-
-.tail {
- width: 200px;
- height: 400px;
- pointer-events: none;
- opacity: .8;
- margin-top: -200px;
- position: absolute;
- background: transparent;
+.ideditor .popover.arrowed.top {
+ margin-top: -10px;
+}
+.ideditor .popover.arrowed.right {
+ margin-left: 10px;
+}
+.ideditor .popover.arrowed.bottom {
+ margin-top: 10px;
+}
+.ideditor .popover.arrowed.left {
+ margin-left: -10px;
+}
+.ideditor .bar-button .tooltip.arrowed.bottom {
+ margin-top: 20px;
+}
+.ideditor .tooltip.top {
+ text-align: center;
+}
+.ideditor .tooltip.right {
+ text-align: left;
}
-
-.tail::after {
- content: "";
- position: absolute;
- width: 0;
- height: 0;
- border-color: transparent;
- border-style: solid;
- top: 50%;
- right: -5px;
- margin-top: -5px;
- border-left-color: white;
- border-width: 5px 0 5px 5px;
+.ideditor .tooltip.bottom {
+ text-align: center;
+}
+.ideditor .tooltip.left {
+ text-align: right;
}
-.tail div {
- border-radius: 3px;
- padding: 10px;
- background: white;
- position: absolute;
- top: 180px;
- left: 0;
- right: 0;
- margin: auto;
+.ideditor .popover-inner {
+ border-radius: inherit;
}
-.left.tail::after {
- content: "";
- position: absolute;
- width: 0;
- height: 0;
- border-color: transparent;
- border-style: solid;
- top: 50%;
- left: -5px;
- margin-top: -5px;
- border-right-color: white;
- border-width: 5px 5px 5px 0;
+.ideditor .tooltip .popover-inner {
+ border-radius: 4px;
+ max-width: 200px;
+ min-width: 80px;
+ padding: 10px;
+ font-weight: normal;
+ background-color: #fff;
}
-.tooltip-arrow {
+.ideditor .popover-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
-
-.tooltip.top .tooltip-arrow {
+.ideditor .popover.top .popover-arrow {
bottom: -5px;
left: 50%;
margin-left: -5px;
- border-top-color: white;
+ border-top-color: #fff;
border-width: 5px 5px 0;
}
-
-.tooltip.right .tooltip-arrow {
+.ideditor .popover.right .popover-arrow {
top: 50%;
left: -5px;
margin-top: -5px;
- border-right-color: white;
+ border-right-color: #fff;
border-width: 5px 5px 5px 0;
}
-
-.tooltip.left .tooltip-arrow {
+.ideditor .popover.left .popover-arrow {
top: 50%;
right: -5px;
margin-top: -5px;
- border-left-color: white;
+ border-left-color: #fff;
border-width: 5px 0 5px 5px;
}
-
-.tooltip.bottom .tooltip-arrow {
+.ideditor .popover.bottom .popover-arrow {
top: -5px;
left: 50%;
margin-left: -5px;
- border-bottom-color: white;
+ border-bottom-color: #fff;
border-width: 0 5px 5px;
}
+.ideditor .popover:not(.arrowed) .popover-arrow {
+ display: none;
+}
-.tooltip-heading {
+.ideditor .tooltip-heading {
font-weight: bold;
- background: #F6F6F6;
+ background: #f6f6f6;
padding: 10px;
margin: -10px -10px 10px -10px;
border-radius: 3px 3px 0 0;
font-size: 14px;
}
-.keyhint-wrap {
- background: #F6F6F6;
+.ideditor .keyhint-wrap {
+ background: #f6f6f6;
padding: 10px;
margin: 10px -10px -10px -10px;
border-radius: 0 0 3px 3px;
}
-
-.tooltip-inner .keyhint {
+.ideditor .popover-inner .shortcut {
font-weight: bold;
margin-left: 5px;
}
-/* Exceptions for tooltip layouts */
+.ideditor[dir='rtl'] .popover-inner .shortcut {
+ margin-left: 0;
+ margin-right: 5px;
+}
-/* make tooltips in panels dark */
-.map-overlay .tooltip.top .tooltip-arrow,
-.entity-editor-pane .tooltip.top .tooltip-arrow,
-.warning-section .tooltip.top .tooltip-arrow {
+/* dark tooltips for sidebar / panels */
+.ideditor .tooltip.dark.top .popover-arrow,
+.ideditor .map-pane .tooltip.top .popover-arrow,
+.ideditor .sidebar .tooltip.top .popover-arrow,
+.ideditor .modal .tooltip.top .popover-arrow {
border-top-color: #000;
}
-
-.map-overlay .tooltip.bottom .tooltip-arrow,
-.entity-editor-pane .tooltip.bottom .tooltip-arrow,
-.warning-section .tooltip.bottom .tooltip-arrow {
+.ideditor .tooltip.dark.bottom .popover-arrow,
+.ideditor .map-pane .tooltip.bottom .popover-arrow,
+.ideditor .sidebar .tooltip.bottom .popover-arrow,
+.ideditor .modal .tooltip.bottom .popover-arrow {
border-bottom-color: #000;
}
-
-.map-overlay .tooltip.left .tooltip-arrow,
-.entity-editor-pane .tooltip.left .tooltip-arrow,
-.warning-section .tooltip.left .tooltip-arrow {
+.ideditor .tooltip.dark.left .popover-arrow,
+.ideditor .map-pane .tooltip.left .popover-arrow,
+.ideditor .sidebar .tooltip.left .popover-arrow,
+.ideditor .modal .tooltip.left .popover-arrow {
border-left-color: #000;
}
-
-.map-overlay .tooltip.right .tooltip-arrow,
-.entity-editor-pane .tooltip.right .tooltip-arrow,
-.warning-section .tooltip.right .tooltip-arrow {
+.ideditor .tooltip.dark.right .popover-arrow,
+.ideditor .map-pane .tooltip.right .popover-arrow,
+.ideditor .sidebar .tooltip.right .popover-arrow,
+.ideditor .modal .tooltip.right .popover-arrow {
border-right-color: #000;
}
-
-.map-overlay .tooltip-inner,
-.map-overlay .tooltip-heading,
-.map-overlay .keyhint-wrap,
-.entity-editor-pane .tooltip-inner,
-.warning-section .tooltip-inner {
+.ideditor .tooltip.dark .popover-inner,
+.ideditor .tooltip.dark .tooltip-heading,
+.ideditor .tooltip.dark .keyhint-wrap,
+.ideditor .map-pane .popover-inner,
+.ideditor .map-pane .tooltip-heading,
+.ideditor .map-pane .keyhint-wrap,
+.ideditor .sidebar .popover-inner,
+.ideditor .sidebar .tooltip-heading,
+.ideditor .sidebar .keyhint-wrap,
+.ideditor .modal .popover-inner {
background: #000;
color: #ccc;
}
-/* commit warning tooltips need to be closer */
-.warning-section .tooltip.top {
- margin-top: -5px;
+.ideditor .tooltip.dark kbd,
+.ideditor .map-pane .tooltip kbd,
+.ideditor .sidebar .tooltip kbd {
+ background-color: #666;
+ border: solid 1px #444;
+ border-bottom-color: #333;
+ -webkit-box-shadow: inset 0 -1px 0 #333;
+ box-shadow: inset 0 -1px 0 #333;
+ color: #eee;
}
-/* Uncramp map-control tooltips */
-.map-control .tooltip {
- min-width: 160px;
-}
+/* Exceptions for tooltip layouts */
-/* Move over tooltips that are near the edge of screen */
-.add-point .tooltip {
- left: 33.3333% !important;
-}
-.add-point .tooltip .tooltip-arrow {
- left: 60px;
-}
-[dir='rtl'] .add-point .tooltip .tooltip-arrow {
- left: auto;
- right: 60px;
+/* commit warning tooltips need to be closer */
+.ideditor .warning-section .tooltip.top {
+ margin-top: -5px;
}
-li:first-of-type .badge .tooltip,
-li.hide + li.version .badge .tooltip {
+.ideditor li:first-of-type .badge .tooltip,
+.ideditor li.hide + li.version .badge .tooltip {
left: auto !important;
right: 5px !important;
}
-[dir='rtl'] li:first-of-type .badge .tooltip,
-[dir='rtl'] li.hide + li.version .badge .tooltip {
+.ideditor[dir='rtl'] li:first-of-type .badge .tooltip,
+.ideditor[dir='rtl'] 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 {
+.ideditor li:first-of-type .badge .tooltip .popover-arrow,
+.ideditor 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 {
+.ideditor[dir='rtl'] li:first-of-type .badge .tooltip .popover-arrow,
+.ideditor[dir='rtl'] li.hide + li.version .badge .tooltip .popover-arrow {
left: 15px !important;
right: auto !important;
}
-/* radial menu (deprecated) */
-
-.radial-menu-tooltip {
- opacity: 0.8;
- display: none;
- position: absolute;
- width: 200px;
-}
-
-.radial-menu-background {
- fill: none;
- stroke: black;
- stroke-opacity: 0.5;
-}
-
-.radial-menu-item circle {
- fill: #eee;
-}
-
-.radial-menu-item circle:active,
-.radial-menu-item circle:hover {
- fill: #fff;
-}
-
-.radial-menu-item.disabled circle {
- cursor: auto;
- fill: rgba(255,255,255,.5);
-}
-
-.radial-menu-item use {
- fill: #222;
- color: #79f;
-}
-
-.radial-menu-item.disabled use {
- fill: rgba(32,32,32,.5);
- color: rgba(40,40,40,.5);
-}
-
-/* edit menu */
-
-.edit-menu-tooltip {
- display: none;
+/* Contextual Edit Menu
+------------------------------------------------------- */
+.ideditor .edit-menu {
position: absolute;
- width: 200px;
-}
-
-.edit-menu-background {
- fill: #eee;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ background: #fff;
+ border-radius: 4px;
+ /* padding is set in edit_menu.js */
}
-.edit-menu-item rect {
- fill: #eee;
+.ideditor .edit-menu .tooltip {
+ width: 200px; /* see also edit_menu.js */
}
-.edit-menu-item rect:active,
-.edit-menu-item rect:hover {
- fill: #ccc;
+.ideditor .edit-menu-item {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ border-radius: 0;
+ padding: 0 12px;
+ /* height is set in edit_menu.js */
}
-
-.edit-menu-item.disabled rect {
- cursor: not-allowed;
+.ideditor .edit-menu-item .label {
+ max-width: 120px;
+ text-align: initial;
+ line-height: 1.1em;
+ font-weight: bold;
}
-.edit-menu-item.disabled rect:hover {
- cursor: not-allowed;
- fill: #eee;
+.ideditor[dir='ltr'] .edit-menu-item .label {
+ margin-left: 8px;
}
-
-.edit-menu-item use {
- fill: #222;
- color: #79f;
+.ideditor[dir='rtl'] .edit-menu-item .label {
+ margin-right: 8px;
}
-.edit-menu-item.disabled use {
- fill: rgba(32,32,32,.2);
- color: rgba(40,40,40,.2);
+.ideditor .edit-menu-item use {
+ pointer-events: none;
}
-
-.lasso-path {
- fill-opacity:0.3;
+/* Lasso
+------------------------------------------------------- */
+.ideditor .lasso-path {
+ fill-opacity: 0.3;
stroke: #fff;
stroke-width: 1;
stroke-opacity: 1;
stroke-dasharray: 5, 5;
}
-/* Media Queries
-------------------------------------------------------- */
-
-@media only screen and (max-width: 840px) {
- /* override hide for save button */
- #bar .save .label { display: block;}
-}
-
-@media screen and (max-width: 1200px) {
- .user-list { display: none !important; }
-}
-
-@media screen and (max-width: 1000px) {
- #userLink { display: none !important; }
-}
-
-@media screen and (max-width: 900px) {
- #scale-block { display: none !important; }
-}
-
/* Scrollbars
----------------------------------------------------- */
-
-::-webkit-scrollbar {
+.ideditor ::-webkit-scrollbar {
height: 20px;
overflow: visible;
width: 10px;
- background: white;
+ background: #fff;
border-left: 1px solid #DDD;
}
-::-webkit-scrollbar-track {
+.ideditor ::-webkit-scrollbar-track {
background-clip: padding-box;
border: solid transparent;
border-width: 0;
}
-::-webkit-scrollbar-thumb {
+.ideditor ::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,.2);
background-clip: padding-box;
border: solid transparent;
border-width: 3px 3px 3px 4px;
border-radius: 6px;
}
-::-webkit-scrollbar-track:hover,
-::-webkit-scrollbar-track:active {
+.ideditor ::-webkit-scrollbar-track:active {
background-color: rgba(0,0,0,.05);
}
+@media (hover: hover) {
+ .ideditor ::-webkit-scrollbar-track:hover {
+ background-color: rgba(0,0,0,.05);
+ }
+}
+
/* Intro walkthrough
----------------------------------------------------- */
+.ideditor .curtain {
+ z-index: 1000;
+ pointer-events: none;
+ position: absolute;
+}
-.curtain-darkness {
+.ideditor .curtain-darkness {
pointer-events: all;
fill-opacity: 0.7;
fill: #222;
fill-rule: evenodd;
}
-.intro-nav-wrap {
+.ideditor .intro-nav-wrap {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- flex-direction: row;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
position: absolute;
left: 0;
right: 0;
z-index: 1001;
}
-.intro-nav-wrap .intro-nav-wrap-logo {
- flex: 0 0 auto;
+.ideditor .intro-nav-wrap .intro-nav-wrap-logo {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
height: 40px;
width: 40px;
- color: white;
+ color: #fff;
margin: 0px 20px;
vertical-align: middle;
}
-.intro-nav-wrap .joined {
- flex: 1 1 auto;
+.ideditor .intro-nav-wrap .joined {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- flex-direction: row;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
}
-.intro-nav-wrap button.chapter {
- flex: 1 1 100%;
- padding: 0px 20px;
+.ideditor .intro-nav-wrap button.chapter {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 100%;
+ flex: 1 1 100%;
+ padding: 0px 5px;
+ font-weight: bold;
}
-.intro-nav-wrap button.chapter.next {
- animation-duration: 1s;
- animation-name: pulse;
- animation-iteration-count: infinite;
- animation-direction: alternate;
+.ideditor .intro-nav-wrap button.chapter.next {
+ -webkit-animation-duration: 1s;
+ animation-duration: 1s;
+ -webkit-animation-name: pulse;
+ animation-name: pulse;
+ -webkit-animation-iteration-count: infinite;
+ animation-iteration-count: infinite;
+ -webkit-animation-direction: alternate;
+ animation-direction: alternate;
+}
+@-webkit-keyframes pulse {
+ from { background: #7092ff; }
+ to { background: #c6d4ff; }
}
@keyframes pulse {
from { background: #7092ff; }
to { background: #c6d4ff; }
}
-.intro-nav-wrap button.chapter.finished {
+.ideditor .intro-nav-wrap button.chapter.finished {
background: #8cd05f;
}
-.intro-nav-wrap button.chapter .status {
+.ideditor .intro-nav-wrap button.chapter .status {
display: none;
}
-.intro-nav-wrap button.chapter.finished .status {
+.ideditor .intro-nav-wrap button.chapter.finished .status {
display: inline-block;
}
-.curtain-tooltip.tooltip.in {
+.ideditor .curtain-tooltip {
+ z-index: 1002;
+}
+
+.ideditor .curtain-tooltip.tooltip.in {
opacity: 1;
}
-.curtain-tooltip.tooltip {
+.ideditor .curtain-tooltip.tooltip {
text-align: left;
}
-[dir='rtl'] .curtain-tooltip.tooltip {
+.ideditor[dir='rtl'] .curtain-tooltip.tooltip {
text-align: right;
}
-.curtain-tooltip .tooltip-inner {
+.ideditor .curtain-tooltip .popover-inner {
font-size: 15px;
position: relative;
padding: 20px;
}
-.curtain-tooltip .tooltip-inner .button-section,
-.curtain-tooltip .tooltip-inner .instruction {
+.ideditor .curtain-tooltip .popover-inner .button-section,
+.ideditor .curtain-tooltip .popover-inner .instruction {
font-weight: bold;
display: block;
- border-top: 1px solid #CCC;
+ border-top: 1px solid #ccc;
margin-top: 10px;
margin-left: -20px;
margin-right: -20px;
padding: 10px 20px 0 20px;
}
-[dir='rtl'] .curtain-tooltip .tooltip-inner .button-section button.col8 {
- float: right;
+.ideditor .curtain-tooltip .popover-inner .button-section button {
+ width: 66.6666%;
}
-.curtain-tooltip .tooltip-inner .instruction:only-child {
+.ideditor .curtain-tooltip .popover-inner .instruction:only-child {
border: 0;
padding: 0;
margin: 0;
}
-.curtain-tooltip .tooltip-inner .icon.pre-text {
+.ideditor .curtain-tooltip .popover-inner .icon.pre-text {
vertical-align: text-top;
margin-right: 0;
margin-left: 0;
display: inline-block;
}
-.curtain-tooltip.intro-points-describe ,
-.curtain-tooltip.intro-lines-name_road {
+.ideditor .curtain-tooltip.intro-points-describe,
+.ideditor .curtain-tooltip.intro-lines-name_road {
top: 133px !important;
}
-.tooltip-illustration {
+.ideditor .tooltip-illustration {
height: 80px;
width: 200px;
margin-left: -20px;
margin-top: -10px;
}
-[dir='rtl'] .tooltip-illustration {
+.ideditor[dir='rtl'] .tooltip-illustration {
margin-left: auto;
margin-right: -20px;
}
-.curtain-tooltip.intro-mouse {
- -moz-user-select: none;
+.ideditor .curtain-tooltip.intro-mouse {
-webkit-user-select: none;
- -ms-user-select: none;
- user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
}
-.curtain-tooltip.intro-mouse .counter {
+.ideditor .curtain-tooltip.intro-mouse .counter {
position: absolute;
display: block;
top: 50px;
z-index: 1003;
}
-.curtain-tooltip.intro-mouse .tooltip-illustration use {
+.ideditor .curtain-tooltip.intro-mouse .tooltip-illustration use {
fill: rgba(112, 146, 255, 0);
color: rgba(112, 146, 255, 0);
}
-.curtain-tooltip.intro-mouse.leftclick .tooltip-illustration use {
+.ideditor .curtain-tooltip.intro-mouse.leftclick .tooltip-illustration use {
fill: rgba(112, 146, 255, 1);
}
-.curtain-tooltip.intro-mouse.rightclick .tooltip-illustration use {
+.ideditor .curtain-tooltip.intro-mouse.rightclick .tooltip-illustration use {
color: rgba(112, 146, 255, 1);
}
-.huge-modal-button {
+.ideditor .huge-modal-button {
width: 100%;
- height: auto;
padding: 20px;
}
-.huge-modal-button .illustration {
+.ideditor .huge-modal-button .illustration {
height: 100px;
width: 100px;
- color: #7092FF;
-}
-
-.mapillary-wrap {
- position: absolute;
- bottom: 30px;
- width: 330px;
- height: 250px;
- padding: 5px;
- background-color: #fff;
-}
-
-.mapillary-wrap.hidden {
- visibility: hidden;
-}
-
-.mapillary-wrap button.thumb-hide {
- border-radius: 0;
- padding: 5px;
- position: absolute;
- right: 0;
- top: 0;
- z-index: 500;
-}
-
-.mly-wrapper {
- visibility: hidden;
- width: 100%;
- height: 100%;
-}
-
-.mly-wrapper.active {
- 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'] .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'] .combobox-caret {
- margin-left: 0;
- margin-right: -30px;
-}
-
-[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-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'] input[type="checkbox"], [dir='rtl'] input[type="radio"] {
- float: right;
- margin-left: 5px;
- margin-right: 0;
-}
-
-[dir='rtl'] .preset-input-wrap .col6 {
- float: right;
-}
-
-/* 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;
-}
-
-
-/* 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;
+ color: #7092ff;
}
projects / rails.git / blobdiff