1 /* http://meyerweb.com/eric/tools/css/reset/
3 License: none (public domain)
6 .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 {
12 vertical-align: baseline;
14 /* HTML5 display-role reset for older browsers */
15 .ideditor article, .ideditor aside, .ideditor details, .ideditor figcaption, .ideditor figure, .ideditor footer, .ideditor header, .ideditor hgroup, .ideditor menu, .ideditor nav, .ideditor section {
18 .ideditor ol, .ideditor ul {
21 .ideditor blockquote, .ideditor q {
24 .ideditor blockquote:before, .ideditor blockquote:after, .ideditor q:before, .ideditor q:after {
29 border-collapse: collapse;
32 .ideditor a { text-decoration: none;}
34 * 1. Corrects font family not being inherited in all browsers.
35 * 2. Corrects font size not being inherited in all browsers.
36 * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
43 font-family: inherit; /* 1 */
44 font-size: 100%; /* 2 */
50 * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
59 /* Hide default number spinner controls */
60 .ideditor input[type="number"]::-webkit-inner-spin-button,
61 .ideditor input[type="number"]::-webkit-outer-spin-button {
66 * 1. Corrects inability to style clickable `input` types in iOS.
67 * 2. Improves usability and consistency of cursor style between image-type
72 .ideditor input[type="button"],
73 .ideditor input[type="reset"],
74 .ideditor input[type="submit"] {
75 -webkit-appearance: button; /* 1 */
76 cursor: pointer; /* 2 */
80 * Re-set default cursor for disabled elements.
83 .ideditor button[disabled],
84 .ideditor input[disabled] {
89 * 1. Addresses box sizing set to `content-box` in IE 8/9.
90 * 2. Removes excess padding in IE 8/9.
93 .ideditor input[type="checkbox"],
94 .ideditor input[type="radio"] {
95 box-sizing: border-box; /* 1 */
100 * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
101 * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
102 * (include `-moz` to future-proof).
105 .ideditor input[type="search"] {
106 -webkit-appearance: none; /* 1 */
107 -moz-box-sizing: border-box;
108 -webkit-box-sizing: border-box; /* 2 */
109 box-sizing: border-box;
113 * Removes inner padding and search cancel button in Safari 5 and Chrome
117 .ideditor input[type="search"]::-webkit-search-cancel-button,
118 .ideditor input[type="search"]::-webkit-search-decoration {
119 -webkit-appearance: none;
123 * Removes inner padding and border in Firefox 4+.
126 .ideditor button::-moz-focus-inner,
127 .ideditor input::-moz-focus-inner {
133 ** Markup free clearing
134 ** Details: http://www.positioniseverything.net/easyclearing.html
136 .ideditor .cf:before,
137 .ideditor .cf:after {
138 content: " "; /* 1 */
139 display: table; /* 2 */
142 .ideditor .cf:after {
146 .ideditor .layer-osm path {
150 /* IE/Edge needs these overrides for markers to show up */
151 .ideditor .layer-osm path.oneway-marker-path { fill: #000; }
152 .ideditor .layer-osm path.sided-marker-natural-path { fill: rgb(170, 170, 170); }
153 .ideditor .layer-osm path.sided-marker-coastline-path { fill: #77dede; }
154 .ideditor .layer-osm path.sided-marker-barrier-path { fill: #ddd; }
155 .ideditor .layer-osm path.sided-marker-man_made-path { fill: #fff; }
157 /* IE/Edge rule for <use> marker style */
158 .ideditor .layer-osm path.viewfield-marker-path {
163 stroke-opacity: 0.75;
165 .ideditor .fill-wireframe .layer-osm path.viewfield-marker-path { /* IE/Edge rule for <use> marker style */
169 /* the above fill: none rule affects paths in <use> shadow dom only in Firefox */
170 .ideditor .layer-osm use.icon path { fill: #333; } /* FF svg Maki icons */
171 .ideditor .layer-osm .turn use path { fill: #000; } /* FF turn restriction icons */
172 .ideditor #turn-only-shape2, .ideditor #turn-only-u-shape2 { fill: #7092ff; } /* FF turn-only, turn-only-u */
173 .ideditor #turn-no-shape2, .ideditor #turn-no-u-shape2 { fill: #e06d5f; } /* FF turn-no, turn-no-u */
174 .ideditor #turn-yes-shape2, .ideditor #turn-yes-u-shape2 { fill: #8cd05f; } /* FF turn-yes, turn-yes-u */
177 /* No interactivity except what we specifically allow */
178 .ideditor .data-layer.osm *,
179 .ideditor .data-layer.notes *,
180 .ideditor .data-layer.keepRight *,
181 .ideditor .data-layer.improveOSM * {
182 pointer-events: none;
185 .ideditor .lasso #map {
186 pointer-events: visibleStroke;
190 /* `.target` objects are interactive */
191 /* They can be picked up, clicked, hovered, or things can connect to them */
192 .ideditor .qa_error.target,
193 .ideditor .note.target,
194 .ideditor .node.target,
195 .ideditor .turn .target {
196 pointer-events: fill;
202 .ideditor .way.target {
203 pointer-events: stroke;
207 stroke: currentColor;
208 stroke-linecap: round;
209 stroke-linejoin: round;
213 /* `.target-nope` objects are explicitly forbidden to join to */
214 .ideditor .surface:not(.nope-disabled) .node.target.target-nope,
215 .ideditor .surface:not(.nope-disabled) .way.target.target-nope {
220 /* `.active` objects (currently being drawn or dragged) are not interactive */
221 /* This is important to allow the events to drop through to whatever is */
222 /* below them on the map, so you can still hover and connect to other things. */
223 .ideditor .layer-osm .active {
224 pointer-events: none !important;
227 /* points, notes & QA */
229 /* points, notes, markers */
230 .ideditor g.qa_error .stroke,
231 .ideditor g.note .stroke {
238 .ideditor g.qa_error.active .stroke,
239 .ideditor g.note.active .stroke {
246 .ideditor g.point .stroke {
253 .ideditor g.qa_error .shadow,
254 .ideditor g.point .shadow,
255 .ideditor g.note .shadow {
262 .ideditor g.qa_error.hover:not(.selected) .shadow,
263 .ideditor g.note.hover:not(.selected) .shadow,
264 .ideditor g.point.related:not(.selected) .shadow,
265 .ideditor g.point.hover:not(.selected) .shadow {
269 .ideditor g.qa_error.selected .shadow,
270 .ideditor g.note.selected .shadow,
271 .ideditor g.point.selected .shadow {
275 /* g.note ellipse.stroke, */
276 .ideditor g.point ellipse.stroke {
279 .ideditor.mode-drag-note g.note.active ellipse.stroke,
280 .ideditor.mode-drag-node g.point.active ellipse.stroke {
285 /* vertices and midpoints */
286 .ideditor g.vertex .fill {
289 .ideditor g.vertex .stroke {
294 .ideditor g.vertex.shared .stroke {
297 .ideditor g.midpoint .fill {
304 .ideditor g.vertex .shadow,
305 .ideditor g.midpoint .shadow {
311 .ideditor g.vertex.related:not(.selected) .shadow,
312 .ideditor g.vertex.hover:not(.selected) .shadow,
313 .ideditor g.midpoint.related:not(.selected) .shadow,
314 .ideditor g.midpoint.hover:not(.selected) .shadow {
318 .ideditor g.vertex.selected .shadow {
324 .ideditor .preset-icon .icon.iD-other-line {
327 .ideditor .preset-icon-container path.line.casing {
331 .ideditor path.line {
332 stroke-linecap: round;
333 stroke-linejoin: round;
336 .ideditor path.stroke {
341 .ideditor path.shadow {
345 stroke-linecap: round;
346 stroke-linejoin: round;
349 .ideditor path.shadow.related:not(.selected),
350 .ideditor path.shadow.hover:not(.selected) {
354 .ideditor path.shadow.selected {
358 .ideditor path.line.stroke {
364 /* Labels / Markers */
371 .ideditor .oneway .textpath.tag-waterway {
375 .ideditor .onewaygroup path.oneway,
376 .ideditor .viewfieldgroup path.viewfield,
377 .ideditor .sidedgroup path.sided {
381 .ideditor text.arealabel-halo,
382 .ideditor text.linelabel-halo,
383 .ideditor text.pointlabel-halo,
384 .ideditor text.arealabel,
385 .ideditor text.linelabel,
386 .ideditor text.pointlabel {
387 dominant-baseline: middle;
392 -webkit-transition: opacity 100ms linear;
393 transition: opacity 100ms linear;
394 -moz-transition: opacity 100ms linear;
397 /* Opera doesn't support dominant-baseline. See #715 */
398 /* Safari 10 seems to have regressed too */
399 .ideditor .linelabel-halo .textpath,
400 .ideditor .linelabel .textpath {
401 baseline-shift: -33%;
402 dominant-baseline: auto;
405 .ideditor .labels-group.halo text {
409 stroke-miterlimit: 1;
412 .ideditor text.nolabel {
413 opacity: 0 !important;
415 .ideditor text.point {
419 .ideditor .icon.areaicon-halo {
423 stroke-miterlimit: 1;
425 .ideditor .icon.areaicon {
431 /* Wikidata-tagged */
432 .ideditor g.point.tag-wikidata path.stroke {
437 .ideditor g.point.tag-wikidata .icon {
441 /* Selected Members */
442 .ideditor g.vertex.selected-member .shadow,
443 .ideditor g.point.selected-member .shadow,
444 .ideditor path.shadow.selected-member {
445 stroke-opacity: 0.95;
450 .ideditor g.point.highlighted .shadow,
451 .ideditor path.shadow.highlighted {
452 stroke-opacity: 0.95;
455 .ideditor g.vertex.highlighted .shadow {
457 stroke-opacity: 0.95;
461 /* Turn Restrictions */
462 .ideditor .points-group.turns g.turn rect,
463 .ideditor .points-group.turns g.turn circle {
467 /* Turn restriction paths and vertices */
468 .ideditor .surface.tr .way.target,
469 .ideditor .surface.tr path.shadow.selected,
470 .ideditor .surface.tr path.shadow.related {
474 .ideditor .surface.tr path.shadow.selected,
475 .ideditor .surface.tr path.shadow.related,
476 .ideditor .surface.tr g.vertex.selected .shadow,
477 .ideditor .surface.tr g.vertex.related .shadow {
481 .ideditor .surface.tr path.shadow.related.allow,
482 .ideditor .surface.tr g.vertex.related.allow .shadow {
485 .ideditor .surface.tr path.shadow.related.restrict,
486 .ideditor .surface.tr g.vertex.related.restrict .shadow {
489 .ideditor .surface.tr path.shadow.related.only,
490 .ideditor .surface.tr g.vertex.related.only .shadow {
496 `highlight-edited` - visual diff activated
497 `added` - entity was created by the user
498 `moved` - node has different coordinates
499 `geometry-edited` - way has different nodes
500 `segment-edited` - one or both adjacents nodes moved
501 `retagged` - some tagging change has occurred
504 /* Vertex visual diffs */
505 .ideditor .highlight-edited g.points g.node.vertex.added > circle.shadow,
506 .ideditor .highlight-edited g.points g.node.vertex.retagged > circle.shadow,
507 .ideditor .highlight-edited g.points g.node.vertex.moved > circle.shadow {
510 .ideditor .highlight-edited g.points g.node.vertex.added > circle.shadow {
511 fill: rgb(133, 255, 103);
513 .ideditor .highlight-edited g.points g.node.vertex.retagged > circle.shadow {
516 .ideditor .highlight-edited g.points g.node.vertex.moved > circle.shadow {
517 fill: rgb(255, 126, 46);
520 /* Point visual diffs */
521 .ideditor .highlight-edited g.points g.node.point.added > path.shadow,
522 .ideditor .highlight-edited g.points g.node.point.retagged > path.shadow,
523 .ideditor .highlight-edited g.points g.node.point.moved > path.shadow {
527 .ideditor .highlight-edited g.points g.node.point.added > path.shadow {
528 stroke: rgb(133, 255, 103);
530 .ideditor .highlight-edited g.points g.node.point.retagged > path.shadow {
533 .ideditor .highlight-edited g.points g.node.point.moved > path.shadow {
534 stroke: rgb(255, 126, 46);
537 /* Line/area segment visual diffs
538 - segments are rendered on top of the ways for convenience and to differentiate
539 them from entire line diffs, so make them thin
541 .ideditor .highlight-edited g.lines > path.line.segment-edited,
542 .ideditor .highlight-edited g.areas > path.area.segment-edited {
543 stroke: rgb(255, 126, 46);
544 stroke-dasharray: 10, 3;
545 stroke-width: 1.5 !important;
549 /* Entire line/area visual diffs */
550 .ideditor .highlight-edited path.line.shadow.added,
551 .ideditor .highlight-edited path.line.shadow.retagged,
552 .ideditor .highlight-edited path.line.shadow.geometry-edited,
553 .ideditor .highlight-edited path.area.shadow.added,
554 .ideditor .highlight-edited path.area.shadow.retagged,
555 .ideditor .highlight-edited path.area.shadow.geometry-edited {
558 .ideditor .highlight-edited.fill-wireframe path.line.shadow.added,
559 .ideditor .highlight-edited.fill-wireframe path.line.shadow.retagged,
560 .ideditor .highlight-edited.fill-wireframe path.line.shadow.geometry-edited,
561 .ideditor .highlight-edited.fill-wireframe path.area.shadow.added,
562 .ideditor .highlight-edited.fill-wireframe path.area.shadow.retagged,
563 .ideditor .highlight-edited.fill-wireframe path.area.shadow.geometry-edited {
566 .ideditor .highlight-edited path.line.shadow.added,
567 .ideditor .highlight-edited path.area.shadow.added {
568 stroke: rgb(133, 255, 103);
570 .ideditor .highlight-edited path.area.shadow.retagged,
571 .ideditor .highlight-edited path.line.shadow.retagged {
574 .ideditor .highlight-edited path.line.shadow.geometry-edited,
575 .ideditor .highlight-edited path.area.shadow.geometry-edited {
576 stroke: rgb(255, 126, 46);
579 /* Default - light gray */
580 .ideditor path.area.stroke {
581 stroke: rgb(170, 170, 170);
584 .ideditor path.area.fill {
586 stroke: rgba(255, 255, 255, 0.3);
587 fill: rgba(255, 255, 255, 0.3);
590 .ideditor .preset-icon-fill path.fill {
591 stroke: rgb(170, 170, 170);
592 fill: rgba(170, 170, 170, 0.3);
595 .ideditor path.shadow.old-multipolygon,
596 .ideditor path.stroke.old-multipolygon {
597 stroke-dasharray: 100, 5;
598 stroke-linecap: butt;
603 .ideditor path.stroke.tag-barrier-hedge,
604 .ideditor path.stroke.tag-landuse-flowerbed,
605 .ideditor path.stroke.tag-landuse-forest,
606 .ideditor path.stroke.tag-landuse-grass,
607 .ideditor path.stroke.tag-landuse-recreation_ground,
608 .ideditor path.stroke.tag-landuse-village_green,
609 .ideditor path.stroke.tag-leisure-garden,
610 .ideditor path.stroke.tag-leisure-golf_course,
611 .ideditor path.stroke.tag-leisure-nature_reserve,
612 .ideditor path.stroke.tag-leisure-park,
613 .ideditor path.stroke.tag-leisure-pitch,
614 .ideditor path.stroke.tag-leisure-track,
615 .ideditor path.stroke.tag-natural,
616 .ideditor path.stroke.tag-natural-wood {
617 stroke: rgb(140, 208, 95);
619 .ideditor path.fill.tag-barrier-hedge,
620 .ideditor path.fill.tag-landuse-flowerbed,
621 .ideditor path.fill.tag-landuse-forest,
622 .ideditor path.fill.tag-landuse-grass,
623 .ideditor path.fill.tag-landuse-recreation_ground,
624 .ideditor path.fill.tag-landuse-village_green,
625 .ideditor path.fill.tag-leisure-garden,
626 .ideditor path.fill.tag-leisure-golf_course,
627 .ideditor path.fill.tag-leisure-nature_reserve,
628 .ideditor path.fill.tag-leisure-park,
629 .ideditor path.fill.tag-leisure-pitch,
630 .ideditor path.fill.tag-leisure-track,
631 .ideditor path.fill.tag-natural,
632 .ideditor path.fill.tag-natural-wood {
633 stroke: rgba(140, 208, 95, 0.3);
634 fill: rgba(140, 208, 95, 0.3);
636 .ideditor .pattern-color-forest,
637 .ideditor .pattern-color-forest_broadleaved,
638 .ideditor .pattern-color-forest_needleleaved,
639 .ideditor .pattern-color-forest_leafless,
640 .ideditor .pattern-color-wood,
641 .ideditor .pattern-color-grass {
642 fill: rgba(140, 208, 95, 0.3);
647 .ideditor path.stroke.tag-amenity-fountain,
648 .ideditor path.stroke.tag-leisure-swimming_pool,
649 .ideditor path.stroke.tag-natural-bay,
650 .ideditor path.stroke.tag-natural-water {
651 stroke: rgb(119, 211, 222);
653 .ideditor path.fill.tag-amenity-fountain,
654 .ideditor path.fill.tag-leisure-swimming_pool,
655 .ideditor path.fill.tag-natural-bay,
656 .ideditor path.fill.tag-natural-water {
657 stroke: rgba(119, 211, 222, 0.3);
658 fill: rgba(119, 211, 222, 0.3);
660 .ideditor .pattern-color-waves,
661 .ideditor .pattern-color-water_standing,
662 .ideditor .pattern-color-pond {
663 fill: rgba(119, 211, 222, 0.3);
668 .ideditor path.stroke.tag-leisure-pitch.tag-sport-beachvolleyball,
669 .ideditor path.stroke.tag-leisure-pitch.tag-sport-baseball,
670 .ideditor path.stroke.tag-leisure-pitch.tag-sport-softball,
671 .ideditor path.stroke.tag-leisure-track,
672 .ideditor path.stroke.tag-natural-beach,
673 .ideditor path.stroke.tag-natural-sand,
674 .ideditor path.stroke.tag-natural-scrub,
675 .ideditor path.stroke.tag-amenity-childcare,
676 .ideditor path.stroke.tag-amenity-kindergarten,
677 .ideditor path.stroke.tag-amenity-school,
678 .ideditor path.stroke.tag-amenity-college,
679 .ideditor path.stroke.tag-amenity-university,
680 .ideditor path.stroke.tag-amenity-research_institute {
681 stroke: rgba(255, 255, 148, 0.75);
683 .ideditor path.fill.tag-leisure-pitch.tag-sport-beachvolleyball,
684 .ideditor path.fill.tag-leisure-pitch.tag-sport-baseball,
685 .ideditor path.fill.tag-leisure-pitch.tag-sport-softball,
686 .ideditor path.fill.tag-leisure-track,
687 .ideditor path.fill.tag-natural-beach,
688 .ideditor path.fill.tag-natural-sand,
689 .ideditor path.fill.tag-natural-scrub,
690 .ideditor path.fill.tag-amenity-childcare,
691 .ideditor path.fill.tag-amenity-kindergarten,
692 .ideditor path.fill.tag-amenity-school,
693 .ideditor path.fill.tag-amenity-college,
694 .ideditor path.fill.tag-amenity-university,
695 .ideditor path.fill.tag-amenity-research_institute {
696 stroke: rgba(255, 255, 148, 0.25);
697 fill: rgba(255, 255, 148, 0.25);
699 .ideditor .preset-icon-fill path.area.stroke.tag-leisure-pitch.tag-sport-beachvolleyball,
700 .ideditor .preset-icon-fill path.area.stroke.tag-leisure-pitch.tag-sport-baseball,
701 .ideditor .preset-icon-fill path.area.stroke.tag-leisure-pitch.tag-sport-softball,
702 .ideditor .preset-icon-fill path.area.stroke.tag-leisure-track,
703 .ideditor .preset-icon-fill path.area.stroke.tag-natural-beach,
704 .ideditor .preset-icon-fill path.area.stroke.tag-natural-sand,
705 .ideditor .preset-icon-fill path.area.stroke.tag-natural-scrub,
706 .ideditor .preset-icon-fill path.area.stroke.tag-amenity-childcare,
707 .ideditor .preset-icon-fill path.area.stroke.tag-amenity-kindergarten,
708 .ideditor .preset-icon-fill path.area.stroke.tag-amenity-school,
709 .ideditor .preset-icon-fill path.area.stroke.tag-amenity-college,
710 .ideditor .preset-icon-fill path.area.stroke.tag-amenity-university,
711 .ideditor .preset-icon-fill path.area.stroke.tag-amenity-research_institute {
712 stroke: rgb(232, 232, 0);
714 .ideditor .pattern-color-beach,
715 .ideditor .pattern-color-sand,
716 .ideditor .pattern-color-scrub {
717 fill: rgba(255, 255, 148, 0.2);
722 .ideditor path.stroke.tag-landuse-residential,
723 .ideditor path.stroke.tag-status-construction {
724 stroke: rgb(196, 189, 25);
726 .ideditor path.fill.tag-landuse-residential,
727 .ideditor path.fill.tag-status-construction {
728 stroke: rgba(196, 189, 25, 0.3);
729 fill: rgba(196, 189, 25, 0.3);
731 .ideditor .pattern-color-construction {
732 fill: rgba(196, 189, 25, 0.3);
737 .ideditor path.stroke.tag-landuse-retail,
738 .ideditor path.stroke.tag-landuse-commercial,
739 .ideditor path.stroke.tag-landuse-landfill,
740 .ideditor path.stroke.tag-military,
741 .ideditor path.stroke.tag-landuse-military {
742 stroke: rgb(214, 136, 26);
744 .ideditor path.fill.tag-landuse-retail,
745 .ideditor path.fill.tag-landuse-commercial,
746 .ideditor path.fill.tag-landuse-landfill,
747 .ideditor path.fill.tag-military,
748 .ideditor path.fill.tag-landuse-military {
749 stroke: rgba(214, 136, 26, 0.3);
750 fill: rgba(214, 136, 26, 0.3);
752 .ideditor .pattern-color-landfill {
753 fill: rgba(214, 136, 26, 0.3);
758 .ideditor path.stroke.tag-landuse-industrial,
759 .ideditor path.stroke.tag-power-plant {
760 stroke: rgb(228, 164, 245);
762 .ideditor path.fill.tag-landuse-industrial,
763 .ideditor path.fill.tag-power-plant {
764 stroke: rgba(228, 164, 245, 0.3);
765 fill: rgba(228, 164, 245, 0.3);
770 .ideditor path.stroke.tag-natural-wetland {
771 stroke: rgb(153, 225, 170);
773 .ideditor path.fill.tag-natural-wetland {
774 stroke: rgba(153, 225, 170, 0.3);
775 fill: rgba(153, 225, 170, 0.3);
777 .ideditor .preset-icon-fill path.area.fill.tag-natural-wetland {
778 fill: rgba(153, 225, 170, 0.2);
780 .ideditor .pattern-color-wetland,
781 .ideditor .pattern-color-wetland_marsh,
782 .ideditor .pattern-color-wetland_swamp,
783 .ideditor .pattern-color-wetland_bog,
784 .ideditor .pattern-color-wetland_reedbed {
785 fill: rgba(153, 225, 170, 0.3);
789 /* Light Green things */
790 .ideditor path.stroke.tag-landuse-cemetery,
791 .ideditor path.stroke.tag-landuse-farmland,
792 .ideditor path.stroke.tag-landuse-grass.tag-golf-green,
793 .ideditor path.stroke.tag-landuse-meadow,
794 .ideditor path.stroke.tag-landuse-orchard,
795 .ideditor path.stroke.tag-landuse-vineyard {
796 stroke: rgb(191, 232, 63);
798 .ideditor path.fill.tag-landuse-cemetery,
799 .ideditor path.fill.tag-landuse-farmland,
800 .ideditor path.fill.tag-landuse-grass.tag-golf-green,
801 .ideditor path.fill.tag-landuse-meadow,
802 .ideditor path.fill.tag-landuse-orchard,
803 .ideditor path.fill.tag-landuse-vineyard {
804 stroke: rgba(191, 232, 63, 0.3);
805 fill: rgba(191, 232, 63, 0.3);
807 .ideditor .preset-icon-fill path.area.fill.tag-landuse-cemetery,
808 .ideditor .preset-icon-fill path.area.fill.tag-landuse-farmland,
809 .ideditor .preset-icon-fill path.area.fill.tag-landuse-grass.tag-golf-green,
810 .ideditor .preset-icon-fill path.area.fill.tag-landuse-meadow,
811 .ideditor .preset-icon-fill path.area.fill.tag-landuse-orchard,
812 .ideditor .preset-icon-fill path.area.fill.tag-landuse-vineyard {
813 fill: rgba(191, 232, 63, 0.4);
815 .ideditor .pattern-color-cemetery,
816 .ideditor .pattern-color-cemetery_buddhist,
817 .ideditor .pattern-color-cemetery_christian,
818 .ideditor .pattern-color-cemetery_jewish,
819 .ideditor .pattern-color-cemetery_muslim,
820 .ideditor .pattern-color-farmland,
821 .ideditor .pattern-color-golf_green,
822 .ideditor .pattern-color-meadow,
823 .ideditor .pattern-color-orchard,
824 .ideditor .pattern-color-vineyard {
825 fill: rgba(191, 232, 63, 0.3);
830 .ideditor path.stroke.tag-landuse-farmyard {
831 stroke: rgb(245, 220, 186);
833 .ideditor path.fill.tag-landuse-farmyard {
834 stroke: rgba(245, 220, 186, 0.3);
835 fill: rgba(245, 220, 186, 0.3);
837 .ideditor .preset-icon-fill path.area.stroke.tag-landuse-farmyard {
838 stroke: rgb(226, 177, 111);
840 .ideditor .pattern-color-farmyard {
841 fill: rgba(245, 220, 186, 0.3);
845 /* Dark Gray things */
846 .ideditor path.stroke.tag-amenity-parking,
847 .ideditor path.stroke.tag-landuse-railway,
848 .ideditor path.stroke.tag-landuse-quarry,
849 .ideditor path.stroke.tag-leisure-pitch.tag-sport-basketball,
850 .ideditor path.stroke.tag-leisure-pitch.tag-sport-skateboard,
851 .ideditor path.stroke.tag-man_made-adit,
852 .ideditor path.stroke.tag-man_made-groyne,
853 .ideditor path.stroke.tag-man_made-breakwater,
854 .ideditor path.stroke.tag-natural-bare_rock,
855 .ideditor path.stroke.tag-natural-cave_entrance,
856 .ideditor path.stroke.tag-natural-cliff,
857 .ideditor path.stroke.tag-natural-rock,
858 .ideditor path.stroke.tag-natural-scree,
859 .ideditor path.stroke.tag-natural-stone,
860 .ideditor path.stroke.tag-natural-shingle,
861 .ideditor path.stroke.tag-waterway-dam,
862 .ideditor path.stroke.tag-waterway-weir {
863 stroke: rgb(170, 170, 170);
865 .ideditor path.fill.tag-amenity-parking,
866 .ideditor path.fill.tag-landuse-railway,
867 .ideditor path.fill.tag-landuse-quarry,
868 .ideditor path.fill.tag-leisure-pitch.tag-sport-basketball,
869 .ideditor path.fill.tag-leisure-pitch.tag-sport-skateboard,
870 .ideditor path.fill.tag-man_made-adit,
871 .ideditor path.fill.tag-man_made-groyne,
872 .ideditor path.fill.tag-man_made-breakwater,
873 .ideditor path.fill.tag-natural-bare_rock,
874 .ideditor path.fill.tag-natural-cliff,
875 .ideditor path.fill.tag-natural-cave_entrance,
876 .ideditor path.fill.tag-natural-rock,
877 .ideditor path.fill.tag-natural-scree,
878 .ideditor path.fill.tag-natural-stone,
879 .ideditor path.fill.tag-natural-shingle,
880 .ideditor path.fill.tag-waterway-dam,
881 .ideditor path.fill.tag-waterway-weir {
882 stroke: rgba(140, 140, 140, 0.5);
883 fill: rgba(140, 140, 140, 0.5);
885 .ideditor .pattern-color-quarry {
886 fill: rgba(140, 140, 140, 0.5);
890 /* Light gray overrides */
891 .ideditor path.stroke.tag-natural-cave_entrance,
892 .ideditor path.stroke.tag-natural-glacier {
893 stroke: rgb(170, 170, 170);
895 .ideditor path.fill.tag-natural-cave_entrance,
896 .ideditor path.fill.tag-natural-glacier {
897 stroke: rgba(255, 255, 255, 0.3);
898 fill: rgba(255, 255, 255, 0.3);
900 .ideditor .preset-icon-fill path.fill.tag-natural-cave_entrance,
901 .ideditor .preset-icon-fill path.fill.tag-natural-glacier {
902 stroke: rgb(170, 170, 170);
903 fill: rgba(170, 170, 170, 0.3);
905 .ideditor preset-icon-container
908 .preset-icon .icon.tag-highway.other-line {
912 .ideditor path.line.casing.tag-highway {
915 .ideditor path.line.stroke.tag-highway {
920 .ideditor path.line.shadow.tag-highway {
923 .ideditor path.line.casing.tag-highway {
926 .ideditor path.line.stroke.tag-highway {
929 .ideditor .low-zoom path.line.shadow.tag-highway {
932 .ideditor .low-zoom path.line.casing.tag-highway {
935 .ideditor .low-zoom path.line.stroke.tag-highway {
939 .ideditor .preset-icon .icon.tag-highway-motorway,
940 .ideditor .preset-icon .icon.tag-highway-motorway_link {
944 .ideditor path.line.stroke.tag-highway-motorway,
945 .ideditor path.line.stroke.tag-highway-motorway_link,
946 .ideditor path.line.stroke.tag-motorway {
949 .ideditor path.line.casing.tag-highway-motorway,
950 .ideditor path.line.casing.tag-highway-motorway_link,
951 .ideditor path.line.casing.tag-motorway {
955 .ideditor .preset-icon .icon.tag-highway-trunk,
956 .ideditor .preset-icon .icon.tag-highway-trunk_link {
960 .ideditor path.line.stroke.tag-highway-trunk,
961 .ideditor path.line.stroke.tag-highway-trunk_link,
962 .ideditor path.line.stroke.tag-trunk {
965 .ideditor path.line.casing.tag-highway-trunk,
966 .ideditor path.line.casing.tag-highway-trunk_link,
967 .ideditor path.line.casing.tag-trunk {
971 .ideditor .preset-icon .icon.tag-highway-primary,
972 .ideditor .preset-icon .icon.tag-highway-primary_link {
976 .ideditor path.line.stroke.tag-highway-primary,
977 .ideditor path.line.stroke.tag-highway-primary_link,
978 .ideditor path.line.stroke.tag-primary {
981 .ideditor path.line.casing.tag-highway-primary,
982 .ideditor path.line.casing.tag-highway-primary_link,
983 .ideditor path.line.casing.tag-primary {
987 .ideditor .preset-icon .icon.tag-highway-secondary,
988 .ideditor .preset-icon .icon.tag-highway-secondary_link {
992 .ideditor path.line.stroke.tag-highway-secondary,
993 .ideditor path.line.stroke.tag-highway-secondary_link,
994 .ideditor path.line.stroke.tag-secondary {
997 .ideditor path.line.casing.tag-highway-secondary,
998 .ideditor path.line.casing.tag-highway-secondary_link,
999 .ideditor path.line.casing.tag-secondary {
1003 .ideditor .preset-icon .icon.tag-highway-tertiary,
1004 .ideditor .preset-icon .icon.tag-highway-tertiary_link {
1008 .ideditor path.line.stroke.tag-highway-tertiary,
1009 .ideditor path.line.stroke.tag-highway-tertiary_link,
1010 .ideditor path.line.stroke.tag-tertiary {
1013 .ideditor path.line.casing.tag-highway-tertiary,
1014 .ideditor path.line.casing.tag-highway-tertiary_link,
1015 .ideditor path.line.casing.tag-tertiary {
1019 .ideditor .legacy-carto .preset-icon .icon.tag-highway-motorway,
1020 .ideditor .legacy-carto .preset-icon .icon.tag-highway-motorway_link {
1024 .ideditor .legacy-carto path.line.stroke.tag-highway-motorway,
1025 .ideditor .legacy-carto path.line.stroke.tag-highway-motorway_link,
1026 .ideditor .legacy-carto path.line.stroke.tag-motorway {
1029 .ideditor .legacy-carto path.line.casing.tag-highway-motorway,
1030 .ideditor .legacy-carto path.line.casing.tag-highway-motorway_link,
1031 .ideditor .legacy-carto path.line.casing.tag-motorway {
1035 .ideditor .legacy-carto .preset-icon .icon.tag-highway-trunk,
1036 .ideditor .legacy-carto .preset-icon .icon.tag-highway-trunk_link {
1040 .ideditor .legacy-carto path.line.stroke.tag-highway-trunk,
1041 .ideditor .legacy-carto path.line.stroke.tag-highway-trunk_link,
1042 .ideditor .legacy-carto path.line.stroke.tag-trunk {
1045 .ideditor .legacy-carto path.line.casing.tag-highway-trunk,
1046 .ideditor .legacy-carto path.line.casing.tag-highway-trunk_link,
1047 .ideditor .legacy-carto path.line.casing.tag-trunk {
1051 .ideditor .legacy-carto .preset-icon .icon.tag-highway-primary,
1052 .ideditor .legacy-carto .preset-icon .icon.tag-highway-primary_link {
1056 .ideditor .legacy-carto path.line.stroke.tag-highway-primary,
1057 .ideditor .legacy-carto path.line.stroke.tag-highway-primary_link,
1058 .ideditor .legacy-carto path.line.stroke.tag-primary {
1061 .ideditor .legacy-carto path.line.casing.tag-highway-primary,
1062 .ideditor .legacy-carto path.line.casing.tag-highway-primary_link,
1063 .ideditor .legacy-carto path.line.casing.tag-primary {
1067 .ideditor .legacy-carto .preset-icon .icon.tag-highway-secondary,
1068 .ideditor .legacy-carto .preset-icon .icon.tag-highway-secondary_link {
1072 .ideditor .legacy-carto path.line.stroke.tag-highway-secondary,
1073 .ideditor .legacy-carto path.line.stroke.tag-highway-secondary_link,
1074 .ideditor .legacy-carto path.line.stroke.tag-secondary {
1077 .ideditor .legacy-carto path.line.casing.tag-highway-secondary,
1078 .ideditor .legacy-carto path.line.casing.tag-highway-secondary_link,
1079 .ideditor .legacy-carto path.line.casing.tag-secondary {
1083 .ideditor .legacy-carto .preset-icon .icon.tag-highway-tertiary,
1084 .ideditor .legacy-carto .preset-icon .icon.tag-highway-tertiary_link {
1088 .ideditor .legacy-carto path.line.stroke.tag-highway-tertiary,
1089 .ideditor .legacy-carto path.line.stroke.tag-highway-tertiary_link,
1090 .ideditor .legacy-carto path.line.stroke.tag-tertiary {
1093 .ideditor .legacy-carto path.line.casing.tag-highway-tertiary,
1094 .ideditor .legacy-carto path.line.casing.tag-highway-tertiary_link,
1095 .ideditor .legacy-carto path.line.casing.tag-tertiary {
1099 .ideditor .preset-icon .icon.tag-highway-residential {
1103 .ideditor path.line.stroke.tag-highway-residential,
1104 .ideditor path.line.stroke.tag-residential {
1107 .ideditor path.line.casing.tag-highway-residential,
1108 .ideditor path.line.casing.tag-residential {
1112 .ideditor .preset-icon .icon.tag-highway-unclassified {
1116 .ideditor path.line.stroke.tag-highway-unclassified,
1117 .ideditor path.line.stroke.tag-unclassified {
1120 .ideditor path.line.casing.tag-highway-unclassified,
1121 .ideditor path.line.casing.tag-unclassified {
1126 /* narrow highways */
1127 .ideditor path.line.shadow.tag-highway-living_street,
1128 .ideditor path.line.shadow.tag-highway-bus_guideway,
1129 .ideditor path.line.shadow.tag-highway-service,
1130 .ideditor path.line.shadow.tag-highway-track,
1131 .ideditor path.line.shadow.tag-highway-road {
1134 .ideditor path.line.casing.tag-highway-living_street,
1135 .ideditor path.line.casing.tag-highway-bus_guideway,
1136 .ideditor path.line.casing.tag-highway-service,
1137 .ideditor path.line.casing.tag-highway-track,
1138 .ideditor path.line.casing.tag-highway-road {
1141 .ideditor path.line.stroke.tag-highway-living_street,
1142 .ideditor path.line.stroke.tag-highway-bus_guideway,
1143 .ideditor path.line.stroke.tag-highway-service,
1144 .ideditor path.line.stroke.tag-highway-track,
1145 .ideditor path.line.stroke.tag-highway-road {
1149 .ideditor path.line.shadow.tag-highway-path,
1150 .ideditor path.line.shadow.tag-highway-footway,
1151 .ideditor path.line.shadow.tag-highway-cycleway,
1152 .ideditor path.line.shadow.tag-highway-bridleway,
1153 .ideditor path.line.shadow.tag-highway-corridor,
1154 .ideditor path.line.shadow.tag-highway-steps {
1157 .ideditor path.line.casing.tag-highway-path,
1158 .ideditor path.line.casing.tag-highway-footway,
1159 .ideditor path.line.casing.tag-highway-cycleway,
1160 .ideditor path.line.casing.tag-highway-bridleway,
1161 .ideditor path.line.casing.tag-highway-corridor,
1162 .ideditor path.line.casing.tag-highway-steps {
1165 .ideditor path.line.stroke.tag-highway-path,
1166 .ideditor path.line.stroke.tag-highway-footway,
1167 .ideditor path.line.stroke.tag-highway-cycleway,
1168 .ideditor path.line.stroke.tag-highway-bridleway,
1169 .ideditor path.line.stroke.tag-highway-corridor,
1170 .ideditor path.line.stroke.tag-highway-steps {
1174 .ideditor .low-zoom path.line.shadow.tag-highway-living_street,
1175 .ideditor .low-zoom path.line.shadow.tag-highway-bus_guideway,
1176 .ideditor .low-zoom path.line.shadow.tag-highway-service,
1177 .ideditor .low-zoom path.line.shadow.tag-highway-track,
1178 .ideditor .low-zoom path.line.shadow.tag-highway-road {
1181 .ideditor .low-zoom path.line.casing.tag-highway-living_street,
1182 .ideditor .low-zoom path.line.casing.tag-highway-bus_guideway,
1183 .ideditor .low-zoom path.line.casing.tag-highway-service,
1184 .ideditor .low-zoom path.line.casing.tag-highway-track,
1185 .ideditor .low-zoom path.line.casing.tag-highway-road {
1188 .ideditor .low-zoom path.line.stroke.tag-highway-living_street,
1189 .ideditor .low-zoom path.line.stroke.tag-highway-bus_guideway,
1190 .ideditor .low-zoom path.line.stroke.tag-highway-service,
1191 .ideditor .low-zoom path.line.stroke.tag-highway-track,
1192 .ideditor .low-zoom path.line.stroke.tag-highway-road {
1196 .ideditor .low-zoom path.line.shadow.tag-highway-path,
1197 .ideditor .low-zoom path.line.shadow.tag-highway-footway,
1198 .ideditor .low-zoom path.line.shadow.tag-highway-cycleway,
1199 .ideditor .low-zoom path.line.shadow.tag-highway-bridleway,
1200 .ideditor .low-zoom path.line.shadow.tag-highway-corridor,
1201 .ideditor .low-zoom path.line.shadow.tag-highway-steps {
1204 .ideditor .low-zoom path.line.casing.tag-highway-path,
1205 .ideditor .low-zoom path.line.casing.tag-highway-footway,
1206 .ideditor .low-zoom path.line.casing.tag-highway-cycleway,
1207 .ideditor .low-zoom path.line.casing.tag-highway-bridleway,
1208 .ideditor .low-zoom path.line.casing.tag-highway-corridor,
1209 .ideditor .low-zoom path.line.casing.tag-highway-steps {
1212 .ideditor .low-zoom path.line.stroke.tag-highway-path,
1213 .ideditor .low-zoom path.line.stroke.tag-highway-footway,
1214 .ideditor .low-zoom path.line.stroke.tag-highway-cycleway,
1215 .ideditor .low-zoom path.line.stroke.tag-highway-bridleway,
1216 .ideditor .low-zoom path.line.stroke.tag-highway-corridor,
1217 .ideditor .low-zoom path.line.stroke.tag-highway-steps {
1221 /* living streets */
1222 .ideditor .preset-icon .icon.tag-highway-living-street {
1226 .ideditor path.line.stroke.tag-highway-living_street,
1227 .ideditor path.line.stroke.tag-living_street {
1230 .ideditor path.line.casing.tag-highway-living_street,
1231 .ideditor path.line.casing.tag-living_street {
1236 .ideditor .preset-icon .icon.tag-highway-corridor {
1240 .ideditor path.line.stroke.tag-highway-corridor,
1241 .ideditor path.line.stroke.tag-corridor {
1243 stroke-dasharray: 2, 8;
1245 .ideditor .low-zoom path.line.stroke.tag-highway-corridor,
1246 .ideditor .low-zoom path.line.stroke.tag-corridor {
1247 stroke-dasharray: 1, 4;
1249 .ideditor path.line.casing.tag-highway-corridor,
1250 .ideditor path.line.casing.tag-corridor {
1252 stroke-linecap: round;
1253 stroke-dasharray: none;
1256 /* pedestrian streets */
1257 .ideditor .preset-icon .icon.tag-highway-pedestrian {
1260 .ideditor path.line.stroke.tag-highway-pedestrian,
1261 .ideditor path.line.stroke.tag-pedestrian {
1264 stroke-dasharray: 8, 8;
1265 stroke-linecap: butt;
1267 .ideditor .low-zoom path.line.stroke.tag-highway-pedestrian,
1268 .ideditor .low-zoom path.line.stroke.tag-pedestrian {
1270 stroke-dasharray: 4, 4;
1272 .ideditor path.line.casing.tag-highway-pedestrian,
1273 .ideditor path.line.casing.tag-pedestrian {
1275 stroke-linecap: round;
1276 stroke-dasharray: none;
1278 .ideditor .preset-icon-container path.line.stroke.tag-highway-pedestrian {
1279 stroke-dasharray: 12, 12;
1283 .ideditor .preset-icon .icon.tag-highway-road {
1287 .ideditor path.line.stroke.tag-highway-road,
1288 .ideditor path.line.stroke.tag-road {
1291 .ideditor path.line.casing.tag-highway-road,
1292 .ideditor path.line.casing.tag-road {
1297 .ideditor .preset-icon .icon.tag-highway-service {
1301 .ideditor path.line.stroke.tag-highway-service,
1302 .ideditor path.line.stroke.tag-service {
1305 .ideditor path.line.casing.tag-highway-service,
1306 .ideditor path.line.casing.tag-service {
1310 /* special service roads and bus guideways */
1311 /* with `service=* tag` (e.g. parking_aisle, alley, drive-through) */
1312 .ideditor path.line.stroke.tag-highway-bus_guideway,
1313 .ideditor path.line.stroke.tag-highway-service.tag-service,
1314 .ideditor path.line.stroke.tag-service.tag-service {
1317 .ideditor path.line.casing.tag-highway-bus_guideway,
1318 .ideditor path.line.casing.tag-highway-service.tag-service,
1319 .ideditor path.line.casing.tag-service.tag-service {
1323 /* unmaintained track roads */
1324 .ideditor path.line.stroke.tag-highway-track,
1325 .ideditor path.line.stroke.tag-track {
1328 .ideditor path.line.casing.tag-highway-track,
1329 .ideditor path.line.casing.tag-track {
1334 .ideditor path.line.stroke.tag-highway-path,
1335 .ideditor path.line.stroke.tag-highway-footway,
1336 .ideditor path.line.stroke.tag-highway-cycleway,
1337 .ideditor path.line.stroke.tag-highway-bridleway {
1338 stroke-linecap: butt;
1339 stroke-dasharray: 6, 6;
1341 .ideditor .low-zoom path.line.stroke.tag-highway-path,
1342 .ideditor .low-zoom path.line.stroke.tag-highway-footway,
1343 .ideditor .low-zoom path.line.stroke.tag-highway-cycleway,
1344 .ideditor .low-zoom path.line.stroke.tag-highway-bridleway {
1345 stroke-linecap: butt;
1346 stroke-dasharray: 3, 3;
1349 /* style for features that should have highway=footway but don't yet */
1350 .ideditor path.line.stroke.tag-crossing,
1351 .ideditor path.line.stroke.tag-footway-access_aisle,
1352 .ideditor path.line.stroke.tag-public_transport-platform,
1353 .ideditor path.line.stroke.tag-highway-platform,
1354 .ideditor path.line.stroke.tag-railway-platform,
1355 .ideditor path.line.stroke.tag-man_made-pier {
1359 .ideditor path.line.casing.tag-highway-path,
1360 .ideditor path.line.casing.tag-highway-footway.tag-public_transport-platform,
1361 .ideditor path.line.casing.tag-highway-footway.tag-man_made-pier,
1362 .ideditor path.line.casing.tag-highway.tag-crossing,
1363 .ideditor path.line.casing.tag-highway.tag-footway-access_aisle {
1365 stroke-linecap: round;
1366 stroke-dasharray: none;
1368 .ideditor path.line.casing.tag-highway-footway,
1369 .ideditor path.line.casing.tag-highway-cycleway,
1370 .ideditor path.line.casing.tag-highway-bridleway {
1372 stroke-linecap: round;
1373 stroke-dasharray: none;
1376 .ideditor .preset-icon .icon.tag-highway-path,
1377 .ideditor .preset-icon .icon.tag-highway-footway.tag-public_transport-platform,
1378 .ideditor .preset-icon .icon.tag-highway-footway.tag-man_made-pier {
1382 .ideditor path.line.stroke.tag-highway-path {
1385 .ideditor path.line.stroke.tag-highway-path.tag-bridge-boardwalk {
1390 .ideditor .preset-icon .icon.tag-route-foot,
1391 .ideditor .preset-icon .icon.tag-route-hiking,
1392 .ideditor .preset-icon .icon.tag-highway-footway {
1396 .ideditor path.line.stroke.tag-highway-footway,
1397 .ideditor path.line.stroke.tag-highway_bus_stop,
1398 .ideditor .preset-icon-container path.casing.tag-highway-footway {
1401 .ideditor .preset-icon .icon.tag-highway-footway.tag-footway-sidewalk {
1404 .ideditor path.stroke.tag-highway-footway.tag-footway-sidewalk,
1405 .ideditor .preset-icon-container path.casing.tag-highway-footway.tag-footway-sidewalk {
1408 .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) {
1413 .ideditor .preset-icon .icon.tag-route-bicycle,
1414 .ideditor .preset-icon .icon.tag-highway-cycleway {
1418 .ideditor path.line.stroke.tag-highway-cycleway,
1419 .ideditor .preset-icon-container path.casing.tag-highway-cycleway {
1422 .ideditor .preset-icon-container path.stroke.tag-highway-cycleway:not(.tag-crossing) {
1427 .ideditor .preset-icon .icon.tag-route-horse,
1428 .ideditor .preset-icon .icon.tag-highway-bridleway {
1432 .ideditor path.line.stroke.tag-highway-bridleway,
1433 .ideditor .preset-icon-container path.casing.tag-highway-bridleway {
1436 .ideditor .preset-icon-container path.stroke.tag-highway-bridleway {
1441 .ideditor .preset-icon .icon.tag-leisure-track {
1442 color: rgb(229, 184, 43);
1444 .ideditor path.line.stroke.tag-leisure-track,
1445 .ideditor .preset-icon-container path.casing.tag-highway.tag-leisure-track {
1446 stroke: rgb(229, 184, 43);
1448 .ideditor .preset-icon-container path.line.stroke.tag-highway.tag-leisure-track {
1453 .ideditor .preset-icon .icon.tag-highway-steps {
1457 .ideditor path.line.stroke.tag-highway-steps {
1458 stroke-linecap: butt;
1459 stroke-dasharray: 3, 3;
1461 .ideditor .low-zoom path.line.stroke.tag-highway-steps {
1462 stroke-dasharray: 2, 2;
1464 .ideditor path.line.casing.tag-highway-steps {
1466 stroke-linecap: round;
1467 stroke-dasharray: none;
1469 .ideditor path.line.stroke.tag-highway-steps,
1470 .ideditor .preset-icon-container path.line.casing.tag-highway-steps {
1473 .ideditor .preset-icon-container path.line.stroke.tag-highway-steps {
1479 .ideditor path.line.stroke.tag-highway.tag-crossing-unmarked {
1480 stroke-dasharray: 6, 4;
1482 .ideditor .low-zoom path.line.stroke.tag-highway.tag-crossing-unmarked {
1483 stroke-dasharray: 3, 2;
1485 .ideditor path.line.stroke.tag-highway.tag-crossing-marked {
1486 stroke-dasharray: 6, 3;
1488 .ideditor .low-zoom path.line.stroke.tag-highway.tag-crossing-marked {
1489 stroke-dasharray: 3, 1.5;
1491 .ideditor path.line.stroke.tag-highway-footway.tag-crossing-marked {
1494 .ideditor .preset-icon .icon.tag-highway-footway.tag-crossing-marked {
1497 .ideditor path.line.stroke.tag-highway-footway.tag-crossing-unmarked {
1500 .ideditor .preset-icon .icon.tag-highway-footway.tag-crossing-unmarked {
1503 .ideditor path.line.stroke.tag-highway-cycleway.tag-crossing-marked {
1506 .ideditor .preset-icon .icon.tag-highway-cycleway.tag-crossing-marked {
1510 .ideditor path.line.stroke.tag-highway.tag-footway-access_aisle {
1511 stroke-dasharray: 4, 2;
1513 .ideditor .low-zoom path.line.stroke.tag-highway.tag-footway-access_aisle,
1514 .ideditor .preset-icon-container path.stroke.tag-highway.tag-footway-access_aisle {
1515 stroke-dasharray: 2.5, 1.5;
1517 .ideditor path.line.stroke.tag-highway.tag-footway-access_aisle {
1520 .ideditor .preset-icon .icon.tag-highway.tag-footway-access_aisle {
1525 /* highway midpoints */
1526 .ideditor g.midpoint.tag-highway-corridor .fill,
1527 .ideditor g.midpoint.tag-highway-steps .fill,
1528 .ideditor g.midpoint.tag-highway-path .fill,
1529 .ideditor g.midpoint.tag-highway-footway .fill,
1530 .ideditor g.midpoint.tag-highway-cycleway .fill,
1531 .ideditor g.midpoint.tag-highway-bridleway .fill {
1540 .ideditor path.area.stroke.tag-aeroway,
1541 .ideditor .low-zoom path.area.stroke.tag-aeroway {
1543 stroke-dasharray: none;
1546 .ideditor path.area.fill.tag-aeroway-runway {
1547 stroke: rgba(0, 0, 0, 0.6);
1548 fill: rgba(0, 0, 0, 0.6);
1552 /* narrow aeroways (taxiway) */
1553 .ideditor path.line.shadow.tag-aeroway-taxiway,
1554 .ideditor path.line.shadow.tag-taxiway {
1557 .ideditor path.line.casing.tag-aeroway-taxiway,
1558 .ideditor path.line.casing.tag-taxiway {
1561 .ideditor path.line.stroke.tag-aeroway-taxiway,
1562 .ideditor path.line.stroke.tag-taxiway {
1565 .ideditor .low-zoom path.line.shadow.tag-aeroway-taxiway,
1566 .ideditor .low-zoom path.line.shadow.tag-taxiway {
1569 .ideditor .low-zoom path.line.casing.tag-aeroway-taxiway,
1570 .ideditor .low-zoom path.line.casing.tag-taxiway {
1573 .ideditor .low-zoom path.line.stroke.tag-aeroway-taxiway,
1574 .ideditor .low-zoom path.line.stroke.tag-taxiway {
1578 .ideditor path.line.stroke.tag-aeroway-taxiway,
1579 .ideditor path.line.stroke.tag-taxiway {
1582 .ideditor path.line.casing.tag-aeroway-taxiway,
1583 .ideditor path.line.casing.tag-taxiway {
1587 /* wide aeroways (runway) */
1588 .ideditor .preset-icon .icon.tag-aeroway-runway,
1589 .ideditor .preset-icon .icon.tag-runway {
1593 .ideditor path.line.shadow.tag-aeroway-runway {
1596 .ideditor path.line.casing.tag-aeroway-runway {
1599 stroke-linecap: square;
1601 .ideditor path.line.stroke.tag-aeroway-runway {
1604 stroke-linecap: butt;
1605 stroke-dasharray: 24, 48;
1607 .ideditor .low-zoom path.line.shadow.tag-aeroway-runway {
1610 .ideditor .low-zoom path.line.casing.tag-aeroway-runway {
1613 .ideditor .low-zoom path.line.stroke.tag-aeroway-runway {
1615 stroke-dasharray: 12, 24;
1617 .ideditor .preset-icon-container path.line.stroke.tag-aeroway-runway {
1618 stroke-dasharray: 0, 14, 8, 14;
1623 .ideditor .preset-icon .icon.tag-railway.other-line {
1627 .ideditor .preset-icon .icon.tag-railway {
1633 .ideditor path.line.shadow.tag-railway {
1636 .ideditor path.line.casing.tag-railway {
1639 .ideditor path.line.stroke.tag-railway {
1641 stroke-linecap: butt;
1642 stroke-dasharray: 12,12;
1644 .ideditor .low-zoom path.line.shadow.tag-railway {
1647 .ideditor .low-zoom path.line.casing.tag-railway {
1650 .ideditor .low-zoom path.line.stroke.tag-railway {
1652 stroke-dasharray: 6,6;
1654 .ideditor .preset-icon-container path.line.stroke.tag-railway:not(.tag-status),
1655 .ideditor .preset-icon-container path.line.stroke.tag-railway.tag-status-disused {
1656 stroke-dasharray: 6;
1659 .ideditor path.line.casing.tag-railway.tag-railway-platform {
1662 .ideditor path.line.stroke.tag-railway.tag-railway-platform {
1663 stroke-dasharray: none;
1667 .ideditor path.line.casing.tag-railway {
1670 .ideditor path.line.stroke.tag-railway {
1675 .ideditor .preset-icon .icon.tag-railway.tag-status {
1678 .ideditor path.line.casing.tag-railway.tag-status {
1681 .ideditor path.line.stroke.tag-railway.tag-status:not(.tag-service) {
1684 .ideditor .preset-icon .icon.tag-railway.tag-status-disused {
1687 .ideditor path.line.casing.tag-railway.tag-status-disused {
1692 .ideditor path.line.casing.tag-railway-subway {
1695 .ideditor path.line.stroke.tag-railway-subway {
1701 .ideditor .preset-icon .icon.tag-waterway.other-line {
1705 .ideditor .preset-icon .icon.tag-type-waterway:not(.tag-waterway-dam),
1706 .ideditor .preset-icon .icon.tag-waterway:not(.tag-waterway-dam) {
1713 .ideditor path.area.stroke.tag-waterway-dock,
1714 .ideditor path.area.stroke.tag-waterway-boatyard,
1715 .ideditor path.area.stroke.tag-waterway-fuel {
1719 .ideditor path.area.casing.tag-waterway-dock,
1720 .ideditor path.area.casing.tag-waterway-boatyard,
1721 .ideditor path.area.casing.tag-waterway-fuel {
1724 .ideditor path.area.fill.tag-waterway-dock,
1725 .ideditor path.area.fill.tag-waterway-boatyard,
1726 .ideditor path.area.fill.tag-waterway-fuel {
1727 stroke: rgba(255, 255, 255, 0.3);
1728 fill: rgba(255, 255, 255, 0.3);
1732 .ideditor path.line.fill.tag-waterway:not(.tag-waterway-dam) {
1733 stroke: rgba(119, 211, 222, 0.3);
1734 fill: rgba(119, 211, 222, 0.3);
1736 .ideditor path.line.casing.tag-waterway:not(.tag-waterway-dam) {
1739 .ideditor path.line.stroke.tag-waterway:not(.tag-waterway-dam) {
1744 /* narrow waterways (default) */
1745 .ideditor path.line.shadow.tag-waterway {
1748 .ideditor path.line.casing.tag-waterway {
1751 .ideditor path.line.stroke.tag-waterway {
1755 .ideditor .low-zoom path.line.shadow.tag-waterway {
1758 .ideditor .low-zoom path.line.casing.tag-waterway {
1761 .ideditor .low-zoom path.line.stroke.tag-waterway {
1766 /* wide waterways (river) */
1767 .ideditor path.line.shadow.tag-waterway-river {
1770 .ideditor path.line.casing.tag-waterway-river {
1773 .ideditor path.line.stroke.tag-waterway-river {
1777 .ideditor .low-zoom path.line.shadow.tag-waterway-river {
1780 .ideditor .low-zoom path.line.casing.tag-waterway-river {
1783 .ideditor .low-zoom path.line.stroke.tag-waterway-river {
1789 .ideditor .preset-icon .icon.tag-waterway-ditch {
1792 .ideditor path.line.stroke.tag-waterway-ditch {
1796 /* narrow width miscellanous things */
1797 .ideditor path.line.shadow.tag-aerialway,
1798 .ideditor path.line.shadow.tag-attraction-summer_toboggan,
1799 .ideditor path.line.shadow.tag-attraction-water_slide,
1800 .ideditor path.line.shadow.tag-golf-cartpath,
1801 .ideditor path.line.shadow.tag-man_made-pipeline,
1802 .ideditor path.line.shadow.tag-natural-tree_row,
1803 .ideditor path.line.shadow.tag-piste {
1806 .ideditor path.line.casing.tag-aerialway,
1807 .ideditor path.line.casing.tag-attraction-summer_toboggan,
1808 .ideditor path.line.casing.tag-attraction-water_slide,
1809 .ideditor path.line.casing.tag-golf-cartpath,
1810 .ideditor path.line.casing.tag-man_made-pipeline,
1811 .ideditor path.line.casing.tag-natural-tree_row,
1812 .ideditor path.line.casing.tag-piste {
1815 .ideditor path.line.stroke.tag-aerialway,
1816 .ideditor path.line.stroke.tag-attraction-summer_toboggan,
1817 .ideditor path.line.stroke.tag-attraction-water_slide,
1818 .ideditor path.line.stroke.tag-golf-cartpath,
1819 .ideditor path.line.stroke.tag-man_made-pipeline,
1820 .ideditor path.line.stroke.tag-natural-tree_row,
1821 .ideditor path.line.stroke.tag-piste {
1825 .ideditor .low-zoom path.line.shadow.tag-aerialway,
1826 .ideditor .low-zoom path.line.shadow.tag-attraction-summer_toboggan,
1827 .ideditor .low-zoom path.line.shadow.tag-attraction-water_slide,
1828 .ideditor .low-zoom path.line.shadow.tag-golf-cartpath,
1829 .ideditor .low-zoom path.line.shadow.tag-man_made-pipeline,
1830 .ideditor .low-zoom path.line.shadow.tag-natural-tree_row,
1831 .ideditor .low-zoom path.line.shadow.tag-piste {
1834 .ideditor .low-zoom path.line.casing.tag-aerialway,
1835 .ideditor .low-zoom path.line.casing.tag-attraction-summer_toboggan,
1836 .ideditor .low-zoom path.line.casing.tag-attraction-water_slide,
1837 .ideditor .low-zoom path.line.casing.tag-golf-cartpath,
1838 .ideditor .low-zoom path.line.casing.tag-man_made-pipeline,
1839 .ideditor .low-zoom path.line.casing.tag-natural-tree_row,
1840 .ideditor .low-zoom path.line.casing.tag-piste {
1843 .ideditor .low-zoom path.line.stroke.tag-aerialway,
1844 .ideditor .low-zoom path.line.stroke.tag-attraction-summer_toboggan,
1845 .ideditor .low-zoom path.line.stroke.tag-attraction-water_slide,
1846 .ideditor .low-zoom path.line.stroke.tag-golf-cartpath,
1847 .ideditor .low-zoom path.line.stroke.tag-man_made-pipeline,
1848 .ideditor .low-zoom path.line.stroke.tag-natural-tree_row,
1849 .ideditor .low-zoom path.line.stroke.tag-piste {
1855 .ideditor .preset-icon .icon.tag-route-ferry {
1859 .ideditor path.line.shadow.tag-route-ferry {
1862 .ideditor path.line.stroke.tag-route-ferry {
1864 stroke-linecap: butt;
1865 stroke-dasharray: 12,8;
1867 .ideditor .low-zoom path.line.shadow.tag-route-ferry {
1870 .ideditor .low-zoom path.line.stroke.tag-route-ferry,
1871 .ideditor .preset-icon-container path.line.stroke.tag-route-ferry {
1873 stroke-dasharray: 6,4;
1875 .ideditor path.line.stroke.tag-route-ferry {
1878 .ideditor path.line.casing.tag-route-ferry {
1884 .ideditor path.line.stroke.tag-aerialway {
1887 .ideditor path.line.casing.tag-aerialway {
1893 .ideditor path.line.stroke.tag-piste {
1896 .ideditor path.line.casing.tag-piste {
1902 .ideditor path.line.stroke.tag-attraction-summer_toboggan {
1905 .ideditor path.line.casing.tag-attraction-summer_toboggan {
1909 .ideditor path.line.stroke.tag-attraction-water_slide {
1912 .ideditor path.line.casing.tag-attraction-water_slide {
1917 /* golf cartpaths (like service roads) */
1918 .ideditor .preset-icon .icon.tag-golf-cartpath {
1922 .ideditor path.line.stroke.tag-golf-cartpath {
1925 .ideditor path.line.casing.tag-golf-cartpath {
1930 /* power and pipeline */
1931 .ideditor .preset-icon .icon.tag-man_made-pipeline,
1932 .ideditor .preset-icon .icon.tag-power {
1939 .ideditor path.line.stroke.tag-power {
1943 .ideditor path.line.casing.tag-power {
1949 .ideditor path.line.stroke.tag-man_made-pipeline {
1951 stroke-linecap: butt;
1952 stroke-dasharray: 80, 1.25;
1954 .ideditor path.line.casing.tag-man_made-pipeline {
1957 .ideditor .low-zoom path.line.stroke.tag-man_made-pipeline {
1958 stroke-dasharray: 40, 1;
1960 .ideditor .preset-icon-container path.line.stroke.tag-man_made-pipeline {
1961 stroke-dasharray: 19, 1;
1966 .ideditor path.line.stroke.tag-boundary {
1969 stroke-linecap: butt;
1970 stroke-dasharray: 20, 5, 5, 5;
1972 .ideditor path.line.casing.tag-boundary {
1977 .ideditor path.line.casing.tag-boundary-protected_area,
1978 .ideditor path.line.casing.tag-boundary-national_park {
1983 /* barriers and similar */
1984 .ideditor path.line.stroke.tag-barrier:not(.tag-barrier-hedge):not(.tag-waterway) {
1987 .ideditor .preset-icon-container path.line.stroke.tag-barrier:not(.tag-barrier-hedge) {
1988 stroke: rgb(170, 170, 170);
1990 .ideditor path.line.casing.tag-natural,
1991 .ideditor path.line.casing.tag-barrier:not(.tag-waterway),
1992 .ideditor path.line.casing.tag-man_made-groyne,
1993 .ideditor path.line.casing.tag-man_made-breakwater {
1996 .ideditor path.line.stroke.tag-barrier:not(.tag-waterway),
1997 .ideditor path.line.stroke.tag-man_made-groyne,
1998 .ideditor path.line.stroke.tag-man_made-breakwater {
2000 stroke-linecap: round;
2001 stroke-dasharray: 15, 5, 1, 5;
2003 .ideditor .low-zoom path.line.stroke.tag-barrier:not(.tag-waterway),
2004 .ideditor .low-zoom path.line.stroke.tag-man_made-groyne,
2005 .ideditor .low-zoom path.line.stroke.tag-man_made-breakwater {
2007 stroke-linecap: butt;
2008 stroke-dasharray: 8, 2, 2, 2;
2010 .ideditor .preset-icon-container path.line.stroke.tag-barrier,
2011 .ideditor .preset-icon-container path.line.stroke.tag-man_made-groyne,
2012 .ideditor .preset-icon-container path.line.stroke.tag-man_made-breakwater {
2013 stroke-dasharray: 1, 4, 6, 4;
2015 .ideditor path.line.stroke.tag-barrier.tag-barrier-wall,
2016 .ideditor path.line.stroke.tag-barrier.tag-barrier-retaining_wall,
2017 .ideditor path.line.stroke.tag-barrier.tag-barrier-city_wall {
2018 stroke-linecap: butt;
2019 stroke-dasharray: 16, 3, 9, 3;
2021 .ideditor .low-zoom path.line.stroke.tag-barrier.tag-barrier-wall,
2022 .ideditor .low-zoom path.line.stroke.tag-barrier.tag-barrier-retaining_wall,
2023 .ideditor .low-zoom path.line.stroke.tag-barrier.tag-barrier-city_wall,
2024 .ideditor .preset-icon-container path.line.stroke.tag-barrier.tag-barrier-wall,
2025 .ideditor .preset-icon-container path.line.stroke.tag-barrier.tag-barrier-retaining_wall,
2026 .ideditor .preset-icon-container path.line.stroke.tag-barrier.tag-barrier-city_wall {
2027 stroke-dasharray: 8, 1, 4, 1;
2032 .ideditor path.line.casing.tag-bridge {
2033 stroke-opacity: 0.6;
2034 stroke: #000 !important;
2035 stroke-linecap: butt;
2036 stroke-dasharray: none;
2038 .ideditor path.line.shadow.tag-bridge {
2041 .ideditor path.line.casing.tag-bridge {
2044 .ideditor .low-zoom path.line.shadow.tag-bridge {
2047 .ideditor .low-zoom path.line.casing.tag-bridge {
2051 .ideditor path.line.shadow.tag-railway.tag-bridge,
2052 .ideditor path.line.shadow.tag-highway-living_street.tag-bridge,
2053 .ideditor path.line.shadow.tag-highway-path.tag-bridge,
2054 .ideditor path.line.shadow.tag-highway-corridor.tag-bridge,
2055 .ideditor path.line.shadow.tag-highway-pedestrian.tag-bridge,
2056 .ideditor path.line.shadow.tag-highway-service.tag-bridge,
2057 .ideditor path.line.shadow.tag-highway-track.tag-bridge,
2058 .ideditor path.line.shadow.tag-highway-steps.tag-bridge,
2059 .ideditor path.line.shadow.tag-highway-footway.tag-bridge,
2060 .ideditor path.line.shadow.tag-highway-cycleway.tag-bridge,
2061 .ideditor path.line.shadow.tag-highway-bridleway.tag-bridge {
2064 .ideditor path.line.casing.tag-railway.tag-bridge,
2065 .ideditor path.line.casing.tag-highway-living_street.tag-bridge,
2066 .ideditor path.line.casing.tag-highway-path.tag-bridge,
2067 .ideditor path.line.casing.tag-highway-corridor.tag-bridge,
2068 .ideditor path.line.casing.tag-highway-pedestrian.tag-bridge,
2069 .ideditor path.line.casing.tag-highway-service.tag-bridge,
2070 .ideditor path.line.casing.tag-highway-track.tag-bridge,
2071 .ideditor path.line.casing.tag-highway-steps.tag-bridge,
2072 .ideditor path.line.casing.tag-highway-footway.tag-bridge,
2073 .ideditor path.line.casing.tag-highway-cycleway.tag-bridge,
2074 .ideditor path.line.casing.tag-highway-bridleway.tag-bridge {
2078 .ideditor .low-zoom path.line.shadow.tag-railway.tag-bridge,
2079 .ideditor .low-zoom path.line.shadow.tag-highway-living_street.tag-bridge,
2080 .ideditor .low-zoom path.line.shadow.tag-highway-path.tag-bridge,
2081 .ideditor .low-zoom path.line.shadow.tag-highway-corridor.tag-bridge,
2082 .ideditor .low-zoom path.line.shadow.tag-highway-pedestrian.tag-bridge,
2083 .ideditor .low-zoom path.line.shadow.tag-highway-service.tag-bridge,
2084 .ideditor .low-zoom path.line.shadow.tag-highway-track.tag-bridge,
2085 .ideditor .low-zoom path.line.shadow.tag-highway-steps.tag-bridge,
2086 .ideditor .low-zoom path.line.shadow.tag-highway-footway.tag-bridge,
2087 .ideditor .low-zoom path.line.shadow.tag-highway-cycleway.tag-bridge,
2088 .ideditor .low-zoom path.line.shadow.tag-highway-bridleway.tag-bridge {
2091 .ideditor .low-zoom path.line.casing.tag-railway.tag-bridge,
2092 .ideditor .low-zoom path.line.casing.tag-highway-living_street.tag-bridge,
2093 .ideditor .low-zoom path.line.casing.tag-highway-path.tag-bridge,
2094 .ideditor .low-zoom path.line.casing.tag-highway-corridor.tag-bridge,
2095 .ideditor .low-zoom path.line.casing.tag-highway-pedestrian.tag-bridge,
2096 .ideditor .low-zoom path.line.casing.tag-highway-service.tag-bridge,
2097 .ideditor .low-zoom path.line.casing.tag-highway-track.tag-bridge,
2098 .ideditor .low-zoom path.line.casing.tag-highway-steps.tag-bridge,
2099 .ideditor .low-zoom path.line.casing.tag-highway-footway.tag-bridge,
2100 .ideditor .low-zoom path.line.casing.tag-highway-cycleway.tag-bridge,
2101 .ideditor .low-zoom path.line.casing.tag-highway-bridleway.tag-bridge {
2107 .ideditor path.line.stroke.tag-tunnel,
2108 .ideditor path.line.stroke.tag-location-underground,
2109 .ideditor path.line.stroke.tag-location-underwater {
2110 stroke-opacity: 0.3;
2112 .ideditor path.line.casing.tag-tunnel,
2113 .ideditor path.line.casing.tag-location-underground,
2114 .ideditor path.line.stroke.tag-location-underwater {
2115 stroke-opacity: 0.5;
2116 stroke-linecap: butt;
2117 stroke-dasharray: none;
2121 /* embankments / cuttings */
2122 .ideditor path.line.shadow.tag-embankment,
2123 .ideditor path.line.shadow.tag-cutting {
2126 .ideditor path.line.casing.tag-embankment,
2127 .ideditor path.line.casing.tag-cutting {
2128 stroke-opacity: 0.5;
2131 stroke-dasharray: 2, 4;
2132 stroke-linecap: butt;
2135 .ideditor .low-zoom path.line.shadow.tag-embankment,
2136 .ideditor .low-zoom path.line.shadow.tag-cutting {
2139 .ideditor .low-zoom path.line.casing.tag-embankment,
2140 .ideditor .low-zoom path.line.casing.tag-cutting {
2145 /* Surface - unpaved */
2146 .ideditor path.line.casing.tag-unpaved {
2148 stroke-linecap: butt;
2149 stroke-dasharray: 4, 4;
2151 .ideditor .low-zoom path.line.casing.tag-unpaved {
2152 stroke-dasharray: 3, 3;
2154 .ideditor path.line.casing.tag-bridge.tag-unpaved {
2157 /* Surface - semipaved */
2158 .ideditor path.line.casing.tag-semipaved {
2159 stroke-linecap: butt;
2160 stroke-dasharray: 6, 2;
2162 .ideditor .low-zoom path.line.casing.tag-semipaved {
2163 stroke-dasharray: 5, 2;
2165 .ideditor path.line.casing.tag-bridge.tag-semipaved {
2170 /* Status (e.g. proposed, abandoned) */
2171 .ideditor path.area.stroke.tag-status:not(.tag-status-disused),
2172 .ideditor path.line.stroke.tag-status:not(.tag-status-disused),
2173 .ideditor path.area.casing.tag-status:not(.tag-status-disused),
2174 .ideditor path.line.casing.tag-status:not(.tag-status-disused) {
2175 stroke-linecap: butt;
2176 stroke-dasharray: 7, 3;
2178 .ideditor .low-zoom path.area.stroke.tag-status:not(.tag-status-disused),
2179 .ideditor .low-zoom path.line.stroke.tag-status:not(.tag-status-disused),
2180 .ideditor .low-zoom path.area.casing.tag-status:not(.tag-status-disused),
2181 .ideditor .low-zoom path.line.casing.tag-status:not(.tag-status-disused) {
2182 stroke-dasharray: 5, 2;
2185 /* Road Closed Status */
2186 .ideditor .preset-icon .icon.tag-highway.tag-status-construction {
2190 .ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction {
2193 .ideditor path.line.casing.tag-highway.tag-status.tag-status-construction {
2195 stroke-linecap: butt;
2196 stroke-dasharray: none
2198 .ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction {
2200 stroke-linecap: butt;
2201 stroke-dasharray: 10, 10;
2203 .ideditor path.line.casing.tag-highway.tag-status.tag-status-construction,
2204 .ideditor .preset-icon-container path.line.stroke.tag-highway.tag-status.tag-status-construction {
2207 .ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction,
2208 .ideditor .preset-icon-container path.line.casing.tag-highway.tag-status.tag-status-construction {
2211 .ideditor .low-zoom path.line.shadow.tag-highway.tag-status.tag-status-construction {
2214 .ideditor .low-zoom path.line.casing.tag-highway.tag-status.tag-status-construction {
2217 .ideditor .low-zoom path.line.stroke.tag-highway.tag-status.tag-status-construction {
2219 stroke-dasharray: 8, 8;
2224 .ideditor path.stroke.tag-building {
2225 stroke: rgb(224, 110, 95);
2227 .ideditor path.fill.tag-building {
2228 stroke: rgba(224, 110, 95, 0.3);
2229 fill: rgba(224, 110, 95, 0.3);
2235 cursor: not-allowed !important;
2238 .ideditor .map-in-map,
2240 cursor: auto; /* Opera */
2241 cursor: url(<%= asset_path("iD/img/cursor-grab.png") %>) 9 9, auto; /* FF */
2244 .ideditor.mode-browse .point,
2245 .ideditor.mode-select .point {
2246 cursor: pointer; /* Opera */
2247 cursor: url(<%= asset_path("iD/img/cursor-select-point.png") %>), pointer; /* FF */
2250 .ideditor.mode-select .vertex,
2251 .ideditor.mode-browse .vertex {
2252 cursor: pointer; /* Opera */
2253 cursor: url(<%= asset_path("iD/img/cursor-select-vertex.png") %>), pointer; /* FF */
2256 .ideditor.mode-browse .line,
2257 .ideditor.mode-select .line {
2258 cursor: pointer; /* Opera */
2259 cursor: url(<%= asset_path("iD/img/cursor-select-line.png") %>), pointer; /* FF */
2262 .ideditor.mode-select .area,
2263 .ideditor.mode-browse .area {
2264 cursor: pointer; /* Opera */
2265 cursor: url(<%= asset_path("iD/img/cursor-select-area.png") %>), pointer; /* FF */
2268 .ideditor.mode-select .midpoint,
2269 .ideditor.mode-browse .midpoint {
2270 cursor: pointer; /* Opera */
2271 cursor: url(<%= asset_path("iD/img/cursor-select-split.png") %>), pointer; /* FF */
2274 .ideditor.mode-select .behavior-multiselect .point,
2275 .ideditor.mode-select .behavior-multiselect .vertex,
2276 .ideditor.mode-select .behavior-multiselect .line,
2277 .ideditor.mode-select .behavior-multiselect .area {
2278 cursor: pointer; /* Opera */
2279 cursor: url(<%= asset_path("iD/img/cursor-select-add.png") %>), pointer; /* FF */
2282 .ideditor.mode-select .behavior-multiselect .selected {
2283 cursor: pointer; /* Opera */
2284 cursor: url(<%= asset_path("iD/img/cursor-select-remove.png") %>), pointer; /* FF */
2287 .ideditor.mode-add-preset #map,
2288 .ideditor.mode-draw-line #map,
2289 .ideditor.mode-draw-area #map,
2290 .ideditor.mode-add-line #map,
2291 .ideditor.mode-add-area #map,
2292 .ideditor.mode-drag-node #map,
2293 .ideditor.mode-drag-note #map {
2294 cursor: crosshair; /* Opera */
2295 cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */
2298 .ideditor.mode-draw-line .way.target,
2299 .ideditor.mode-draw-area .way.target,
2300 .ideditor.mode-add-line .way.target,
2301 .ideditor.mode-add-area .way.target,
2302 .ideditor.mode-drag-node .way.target {
2303 cursor: crosshair; /* Opera */
2304 cursor: url(<%= asset_path("iD/img/cursor-draw-connect-line.png") %>) 9 9, crosshair; /* FF */
2307 .ideditor.mode-draw-line .vertex.target,
2308 .ideditor.mode-draw-area .vertex.target,
2309 .ideditor.mode-add-line .vertex.target,
2310 .ideditor.mode-add-area .vertex.target,
2311 .ideditor.mode-drag-node .vertex.target {
2312 cursor: crosshair; /* Opera */
2313 cursor: url(<%= asset_path("iD/img/cursor-draw-connect-vertex.png") %>) 9 9, crosshair; /* FF */
2316 .ideditor.mode-add-point #map,
2317 .ideditor.mode-add-note #map,
2318 .ideditor.mode-browse.lasso #map,
2319 .ideditor.mode-browse.lasso .way,
2320 .ideditor.mode-browse.lasso .vertex,
2321 .ideditor.mode-browse.lasso .midpoint,
2322 .ideditor.mode-select.lasso #map,
2323 .ideditor.mode-select.lasso .way,
2324 .ideditor.mode-select.lasso .vertex,
2325 .ideditor.mode-select.lasso .midpoint {
2326 cursor: crosshair; /* Opera */
2327 cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */
2330 .ideditor.mode-browse .note,
2331 .ideditor.mode-browse .qa_error,
2332 .ideditor.mode-select .note,
2333 .ideditor.mode-select .qa_error,
2334 .ideditor .turn rect,
2335 .ideditor .turn circle {
2338 /* photo viewer div */
2339 .ideditor #photoviewer {
2342 margin-bottom: 10px;
2346 background-color: #fff;
2348 .ideditor[dir='ltr'] #photoviewer {
2352 .ideditor[dir='rtl'] #photoviewer {
2357 @media screen and (min-width: 1600px) {
2358 .ideditor #photoviewer {
2364 .ideditor #photoviewer button.thumb-hide {
2373 .ideditor #photoviewer button.resize-handle-xy {
2379 cursor: nesw-resize;
2384 .ideditor #photoviewer button.resize-handle-x {
2396 .ideditor #photoviewer button.resize-handle-y {
2408 .ideditor .photo-wrapper,
2409 .ideditor .photo-wrapper img {
2416 .ideditor .photo-wrapper .photo-attribution {
2428 .ideditor .photo-attribution a,
2429 .ideditor .photo-attribution a:visited,
2430 .ideditor .photo-attribution span {
2435 /* markers and sequences */
2436 .ideditor .viewfield-group {
2437 pointer-events: none;
2439 .ideditor.mode-browse .viewfield-group,
2440 .ideditor.mode-select .viewfield-group {
2441 pointer-events: visible;
2445 .ideditor .viewfield-group.currentView * {
2446 fill: #ffee00 !important;
2448 .ideditor .viewfield-group.hovered * {
2449 fill: #eebb00 !important;
2452 .ideditor .viewfield-group circle {
2455 stroke-opacity: 0.4;
2458 .ideditor .viewfield-group.highlighted circle {
2460 stroke-opacity: 0.9;
2463 .ideditor .viewfield-group.highlighted.hovered circle {
2466 stroke-opacity: 0.9;
2469 .ideditor .viewfield-group.highlighted.currentView circle {
2476 .ideditor .viewfield-group .viewfield {
2481 .ideditor .viewfield-group.highlighted .viewfield {
2485 .ideditor .viewfield-group.highlighted.hovered .viewfield {
2489 .ideditor .viewfield-group.highlighted.currentView .viewfield {
2494 .ideditor .viewfield-group.currentView .viewfield-scale {
2495 transform: scale(2,2);
2498 .ideditor .sequence {
2501 stroke-opacity: 0.4;
2503 .ideditor .sequence.highlighted,
2504 .ideditor .sequence.currentView {
2510 /* Streetside Image Layer */
2511 .ideditor .layer-streetside-images {
2512 pointer-events: none;
2514 .ideditor .layer-streetside-images .viewfield-group * {
2517 .ideditor .layer-streetside-images .sequence {
2519 stroke-opacity: 0.85; /* bump opacity - only one per road */
2523 /* Mapillary Image Layer */
2524 .ideditor .layer-mapillary {
2525 pointer-events: none;
2527 .ideditor .layer-mapillary .viewfield-group * {
2530 .ideditor .layer-mapillary .sequence {
2535 /* Mapillary Traffic Signs and Map Features Layers */
2536 .ideditor .layer-mapillary-detections {
2537 pointer-events: none;
2539 .ideditor .layer-mapillary-detections .icon-detected {
2540 outline: 2px solid transparent;
2541 pointer-events: visible;
2545 .ideditor .layer-mapillary-detections .icon-detected rect {
2548 .ideditor .layer-mapillary-detections .icon-detected:hover rect {
2549 outline: 3px solid rgba(255, 238, 0, 0.6);
2551 .ideditor .layer-mapillary-detections .icon-detected.currentView rect {
2552 outline: 3px solid rgba(255, 238, 0, 1);
2554 .ideditor .layer-mapillary-detections .icon-detected:hover,
2555 .ideditor .layer-mapillary-detections .icon-detected.currentView {
2560 /* OpenStreetCam Image Layer */
2561 .ideditor .layer-openstreetcam {
2562 pointer-events: none;
2564 .ideditor .layer-openstreetcam .viewfield-group * {
2567 .ideditor .layer-openstreetcam .sequence {
2572 /* Streetside Viewer (pannellum) */
2573 .ideditor .ms-wrapper .photo-attribution .image-link {
2576 .ideditor .ms-wrapper .photo-attribution .attribution-row {
2578 flex-flow: row nowrap;
2579 justify-content: space-between;
2580 align-items: center;
2583 .ideditor .ms-wrapper .photo-attribution .image-view-link {
2587 .ideditor .ms-wrapper .photo-attribution .image-report-link {
2591 .ideditor .ms-wrapper .photo-attribution a:active,
2592 .ideditor .ms-wrapper .photo-attribution a:hover {
2596 .ideditor .ms-wrapper .pnlm-compass.pnlm-control {
2601 background-size: contain;
2602 background-repeat: no-repeat no-repeat;
2605 .ideditor label.streetside-hires {
2608 .ideditor .streetside-hires span {
2611 .ideditor .streetside-hires input[type="checkbox"] {
2619 /* Mapillary viewer */
2620 .ideditor #mly .domRenderer .TagSymbol {
2622 background-color: rgba(0,0,0,0.4);
2627 .ideditor #mly .domRenderer .Attribution {
2628 /* we will roll our own to avoid async update issues like #4526 */
2632 .ideditor .mly-wrapper .photo-attribution a:active,
2633 .ideditor .mly-wrapper .photo-attribution a:hover {
2637 .ideditor .mly-wrapper .mapillary-js-dom {
2642 /* OpenStreetCam viewer */
2643 .ideditor .osc-wrapper {
2645 background-color: #000;
2646 background-image: url(<%= asset_path("iD/img/loader-black.gif") %>);
2647 background-position: center;
2648 background-repeat: no-repeat;
2651 .ideditor .osc-wrapper .photo-attribution a:active,
2652 .ideditor .osc-wrapper .photo-attribution a:hover {
2656 .ideditor .osc-image-wrap {
2659 transform-origin:0 0;
2660 -ms-transform-origin:0 0;
2661 -webkit-transform-origin:0 0;
2662 -moz-transform-origin:0 0;
2663 -o-transform-origin:0 0;
2667 /* photo-controls (step forward, back, rotate) */
2668 .ideditor .photo-controls-wrap {
2676 .ideditor .photo-controls {
2677 display: inline-block;
2681 .ideditor .photo-controls button,
2682 .ideditor .photo-controls button:focus {
2685 background: rgba(0,0,0,0.65);
2689 .ideditor .photo-controls button:first-of-type {
2690 border-radius: 3px 0 0 3px;
2692 .ideditor .photo-controls button:last-of-type {
2693 border-radius: 0 3px 3px 0;
2695 .ideditor .photo-controls button:hover,
2696 .ideditor .photo-controls button:active {
2697 background: rgba(0,0,0,0.85);
2701 /* OSM Notes and KeepRight Layers */
2703 .ideditor .error-header-icon .qa_error-fill,
2704 .ideditor .layer-keepRight .qa_error .qa_error-fill,
2705 .ideditor .layer-improveOSM .qa_error .qa_error-fill {
2707 stroke-width: 1.3px; /* NOTE: likely a better way to scale the icon stroke */
2710 .ideditor .note-header-icon .note-fill,
2711 .ideditor .layer-notes .note .note-fill {
2716 .ideditor .note-header-icon.new .note-fill,
2717 .ideditor .layer-notes .note.new .note-fill {
2722 .ideditor .note-header-icon.closed .note-fill,
2723 .ideditor .layer-notes .note.closed .note-fill {
2729 /* slight adjustments to preset icon for note icons */
2730 .ideditor .note-header-icon .preset-icon-28 {
2733 .ideditor .note-header-icon .note-icon-annotation {
2739 .ideditor .note-header-icon .note-icon-annotation .icon {
2744 /* adjustment for error icon */
2746 .ideditor .error-header-icon .preset-icon-28 {
2751 .ideditor .error-header-icon {
2753 align-items: center;
2754 justify-content: center;
2757 /* Keep Right Errors
2758 ------------------------------------------------------- */
2759 .ideditor .keepRight.error_type-20,
2760 .ideditor .keepRight.error_type-40,
2761 .ideditor .keepRight.error_type-210,
2762 .ideditor .keepRight.error_type-270,
2763 .ideditor .keepRight.error_type-310,
2764 .ideditor .keepRight.error_type-320,
2765 .ideditor .keepRight.error_type-350 { /* improper bridge tag */
2769 .ideditor .keepRight.error_type-50 { /* almost junctions */
2773 .ideditor .keepRight.error_type-60,
2774 .ideditor .keepRight.error_type-70,
2775 .ideditor .keepRight.error_type-90,
2776 .ideditor .keepRight.error_type-100,
2777 .ideditor .keepRight.error_type-110,
2778 .ideditor .keepRight.error_type-150,
2779 .ideditor .keepRight.error_type-220,
2780 .ideditor .keepRight.error_type-380 { /* non-physical sport tag */
2784 .ideditor .keepRight.error_type-130 { /* disconnected ways */
2788 .ideditor .keepRight.error_type-170 { /* FIXME tag */
2792 .ideditor .keepRight.error_type-190 { /* intersection without junction */
2796 .ideditor .keepRight.error_type-200 { /* overlapping ways */
2800 .ideditor .keepRight.error_type-160,
2801 .ideditor .keepRight.error_type-230 { /* layer conflict */
2805 .ideditor .keepRight.error_type-280 { /* boundary issues */
2809 .ideditor .keepRight.error_type-180,
2810 .ideditor .keepRight.error_type-290 { /* turn restriction issues */
2814 .ideditor .keepRight.error_type-300,
2815 .ideditor .keepRight.error_type-390 { /* missing tracktype */
2819 .ideditor .keepRight.error_type-360,
2820 .ideditor .keepRight.error_type-370,
2821 .ideditor .keepRight.error_type-410 { /* website issues */
2825 .ideditor .keepRight.error_type-120,
2826 .ideditor .keepRight.error_type-400 { /* geometry / turn angles */
2830 /* ImproveOSM Errors
2831 ------------------------------------------------------- */
2833 .ideditor .improveOSM.error_type-ow { /* missing one way */
2837 .ideditor .improveOSM.error_type-mr-road { /* missing road */
2840 .ideditor .improveOSM.error_type-mr-path { /* missing path */
2843 .ideditor .improveOSM.error_type-mr-parking { /* missing parking */
2846 .ideditor .improveOSM.error_type-mr-both { /* missing road+parking */
2850 .ideditor .improveOSM.error_type-tr { /* missing turn restriction */
2855 /* Custom Map Data (geojson, gpx, kml, vector tile) */
2856 .ideditor .layer-mapdata {
2857 pointer-events: none;
2860 .ideditor .layer-mapdata path.shadow {
2861 pointer-events: stroke;
2867 .ideditor .layer-mapdata path.MultiPoint.shadow,
2868 .ideditor .layer-mapdata path.Point.shadow {
2869 pointer-events: fill;
2873 .ideditor .layer-mapdata path.shadow.hover:not(.selected) {
2874 stroke-opacity: 0.4;
2876 .ideditor .layer-mapdata path.shadow.selected {
2877 stroke-opacity: 0.7;
2880 .ideditor .layer-mapdata path.stroke {
2886 .ideditor .layer-mapdata path.fill {
2888 stroke-opacity: 0.3;
2895 .ideditor .layer-mapdata text.label-halo,
2896 .ideditor .layer-mapdata text.label {
2899 dominant-baseline: middle;
2901 .ideditor .layer-mapdata text.label {
2904 .ideditor .layer-mapdata text.label.hover,
2905 .ideditor .layer-mapdata text.label.selected {
2908 .ideditor .layer-mapdata text.label-halo {
2912 stroke-miterlimit: 1;
2916 .ideditor .low-zoom.fill-wireframe path.stroke,
2917 .ideditor .fill-wireframe path.stroke {
2918 stroke-width: 1 !important;
2919 stroke-opacity: 0.5 !important;
2920 stroke-dasharray: none !important;
2921 fill: none !important;
2923 .ideditor .low-zoom.fill-wireframe .layer-mapdata path.stroke,
2924 .ideditor .fill-wireframe .layer-mapdata path.stroke {
2925 stroke-width: 2 !important;
2926 stroke-opacity: 1 !important;
2929 .ideditor .low-zoom.fill-wireframe path.shadow,
2930 .ideditor .fill-wireframe path.shadow {
2934 .ideditor .fill-wireframe path.shadow.related:not(.selected),
2935 .ideditor .fill-wireframe path.shadow.hover:not(.selected) {
2936 stroke-opacity: 0.4;
2938 .ideditor .fill-wireframe path.shadow.selected {
2939 stroke-opacity: 0.6;
2942 .ideditor .fill-wireframe .point,
2943 .ideditor .fill-wireframe .areaicon,
2944 .ideditor .fill-wireframe .areaicon-halo,
2945 .ideditor .fill-wireframe path.casing,
2946 .ideditor .fill-wireframe path.fill,
2947 .ideditor .fill-wireframe path.oneway {
2948 display: none !important;
2951 .ideditor .fill-partial path.area.fill {
2954 pointer-events: none;
2956 .ideditor .fill-partial path.area.fill.tag-building_part {
2959 .ideditor .fill-partial path.area.fill.tag-indoor {
2962 .ideditor.mode-browse .fill-partial path.area.fill,
2963 .ideditor.mode-select .fill-partial path.area.fill {
2964 pointer-events: visibleStroke;
2967 ------------------------------------------------------- */
2968 /* the root element of iD */
2977 font: normal 12px/1.6667 "-apple-system", BlinkMacSystemFont,
2978 "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
2979 "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
2983 -ms-user-select: none;
2984 -ms-content-zooming: none;
2986 /* Establish a local stacking context so all elements within iD are on the
2987 same layer relative to elements outside iD - #7457.
2988 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
2994 .ideditor #content {
3000 .ideditor #content.active {
3001 -webkit-filter: none !important;
3002 filter: none !important;
3003 -webkit-duration: 200ms;
3004 transition-duration: 200ms;
3007 .ideditor #content.inactive {
3008 -webkit-filter: grayscale(80%) brightness(80%);
3009 filter: grayscale(80%) brightness(80%);
3010 -webkit-duration: 200ms;
3011 transition-duration: 200ms;
3015 /* Can't be display: none or the clippaths are ignored. */
3021 .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 {
3022 -moz-box-sizing: border-box;
3023 -webkit-box-sizing: border-box;
3024 box-sizing: border-box;
3027 .ideditor a, .ideditor button, .ideditor input, .ideditor textarea {
3028 -webkit-tap-highlight-color: rgba(0,0,0,0);
3029 -webkit-touch-callout: none;
3038 .ideditor .radial-menu-item {
3046 margin-bottom: 20px;
3049 .ideditor h3:last-child,
3050 .ideditor h2:last-child,
3051 .ideditor h4:last-child { margin-bottom: 0;}
3057 margin-bottom: 10px;
3059 .ideditor h4, .ideditor h5 {
3062 padding-bottom: 10px;
3066 outline-color: transparent;
3067 outline-style: none;
3070 .ideditor ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
3072 opacity: 1; /* Firefox */
3074 .ideditor :-ms-input-placeholder { /* Internet Explorer 10-11 */
3077 .ideditor ::-ms-input-placeholder { /* Microsoft Edge */
3086 .ideditor p:last-child {
3095 .ideditor a:visited, .ideditor a {
3102 display: inline-block;
3108 vertical-align: baseline;
3109 background-color: #fcfcfc;
3110 border: solid 1px #ccc;
3112 border-bottom-color: #bbb;
3114 box-shadow: inset 0 -1px 0 #bbb;
3118 ------------------------------------------------------- */
3119 .ideditor textarea {
3121 font:normal 12px/20px "-apple-system", BlinkMacSystemFont,
3122 "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
3123 "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
3128 .ideditor input[type=text],
3129 .ideditor input[type=search],
3130 .ideditor input[type=number],
3131 .ideditor input[type=url],
3132 .ideditor input[type=tel],
3133 .ideditor input[type=email] {
3134 background-color: #fff;
3136 border: 1px solid #ccc;
3137 padding: 5px 20px 5px 10px;
3140 text-overflow: ellipsis;
3142 .ideditor[dir='rtl'] textarea,
3143 .ideditor[dir='rtl'] input[type=text],
3144 .ideditor[dir='rtl'] input[type=search],
3145 .ideditor[dir='rtl'] input[type=number],
3146 .ideditor[dir='rtl'] input[type=url],
3147 .ideditor[dir='rtl'] input[type=tel],
3148 .ideditor[dir='rtl'] input[type=email] {
3149 padding: 5px 10px 5px 20px;
3152 .ideditor textarea:focus,
3153 .ideditor input:focus {
3154 background-color: #f1f1f1;
3157 .ideditor textarea.disabled,
3158 .ideditor input.disabled {
3160 background-color: #eee;
3161 cursor: not-allowed;
3164 .ideditor input[type="checkbox"],
3165 .ideditor input[type="radio"] {
3173 .ideditor[dir='rtl'] input[type="checkbox"],
3174 .ideditor[dir='rtl'] input[type="radio"] {
3182 background-color: #fff;
3183 border-collapse: collapse;
3187 .ideditor table th {
3190 .ideditor table.tags, .ideditor table.tags td, .ideditor table.tags th {
3191 border: 1px solid #ccc;
3195 .ideditor ::-ms-clear {
3200 ------------------------------------------------------- */
3201 .ideditor .col6 { float: left; width: 50.0000%; max-width: 600px; }
3202 .ideditor .col12 { float: left; width: 100.0000%; }
3206 ------------------------------------------------------- */
3212 background: #f6f6f6;
3216 background: #ececec;
3220 background: rgba(0,0,0,.5);
3224 background: rgba(0,0,0,.75);
3228 .ideditor .fl { float: left;}
3229 .ideditor .fr { float: right;}
3230 .ideditor .al { left: 0; }
3231 .ideditor .ar { right: 0; }
3233 .ideditor input.hide,
3234 .ideditor textarea.hide,
3236 .ideditor form.hide,
3237 .ideditor button.hide,
3244 .ideditor .deemphasize {
3247 .ideditor .content {
3248 box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
3250 .ideditor .loading {
3251 background: url(<%= asset_path("iD/img/loader_bg.gif") %>);
3252 background-size: 5px 5px;
3257 ------------------------------------------------------- */
3266 display: inline-block;
3271 .ideditor button:focus,
3272 .ideditor button:hover {
3273 background-color: #ececec;
3275 .ideditor button.active {
3276 background: #7092ff;
3278 .ideditor button.disabled {
3279 background-color: rgba(255,255,255,.25);
3280 color: rgba(0,0,0,.4);
3281 cursor: not-allowed;
3284 .ideditor .joined > * {
3286 border-right: 1px solid rgba(0,0,0,.5);
3288 .ideditor[dir='rtl'] .joined > * {
3289 border-left: 1px solid rgba(0,0,0,.5);
3293 .ideditor .fillL .joined > * {
3294 border-right: 1px solid #fff;
3296 .ideditor .joined > *:first-child {
3297 border-radius: 4px 0 0 4px;
3299 .ideditor[dir='rtl'] .joined > *:first-child {
3300 border-radius: 0 4px 4px 0;
3302 .ideditor .joined > *:last-child {
3303 border-right-width: 0;
3304 border-radius: 0 4px 4px 0;
3306 .ideditor[dir='rtl'] .joined > *.bar-button:last-child {
3307 border-radius: 4px 0 0 4px;
3311 /* Action buttons */
3312 .ideditor button.action {
3313 background: #7092ff;
3316 .ideditor button.action:focus,
3317 .ideditor button.action:hover {
3318 background: #597be7;
3320 .ideditor button.secondary-action {
3321 background: #ececec;
3323 .ideditor button.secondary-action:focus,
3324 .ideditor button.secondary-action:hover {
3325 background: #cccccc;
3328 .ideditor button.action.disabled,
3329 .ideditor button.action.disabled:hover,
3330 .ideditor button[disabled].action,
3331 .ideditor button[disabled].action:hover {
3332 background: #cccccc;
3334 cursor: not-allowed;
3339 ------------------------------------------------------- */
3341 vertical-align: top;
3346 .ideditor .icon.inline {
3347 vertical-align: text-top;
3353 .ideditor .icon.pre-text {
3356 .ideditor[dir='rtl'] .icon.pre-text {
3361 .ideditor .icon.pre-text.user-icon {
3366 .ideditor .icon.light {
3369 .ideditor .icon.created {
3372 .ideditor .icon.modified {
3375 .ideditor .icon.deleted {
3379 .ideditor .user-icon {
3387 .ideditor .icon-annotation {
3391 .ideditor .notification-badge {
3400 .ideditor .notification-badge.hide {
3405 /* Toolbar / Persistent UI Elements
3406 ------------------------------------------------------- */
3407 .ideditor #bar-wrap {
3416 flex-flow: row nowrap;
3417 justify-content: space-between;
3418 padding: 10px 0 0 0;
3424 /* hide scrollbar but allow scrolling */
3425 scrollbar-width: none; /* Firefox */
3426 -ms-overflow-style: none; /* IE, Edge */
3428 .ideditor #bar::-webkit-scrollbar {
3429 display: none; /* Chrome, Safari, Opera */
3431 .ideditor #bar .toolbar-item {
3434 flex-flow: column wrap;
3435 justify-content: center;
3437 .ideditor #bar .toolbar-item .item-content {
3440 flex-flow: row nowrap;
3441 justify-content: center;
3446 .ideditor[dir='ltr'] #bar .toolbar-item:last-child .item-content,
3447 .ideditor[dir='rtl'] #bar .toolbar-item:first-child .item-content {
3450 .ideditor[dir='ltr'] #bar .toolbar-item:first-child .item-content,
3451 .ideditor[dir='rtl'] #bar .toolbar-item:last-child .item-content {
3454 .ideditor #bar .toolbar-item .item-label {
3457 white-space: nowrap;
3458 margin: 1px 2px 2px 2px;
3460 .ideditor #bar .toolbar-item.spacer {
3464 .ideditor #bar .toolbar-item:first-child {
3465 justify-content: flex-start;
3467 .ideditor #bar .toolbar-item:last-child {
3468 justify-content: flex-end;
3470 .ideditor #bar .toolbar-item:empty:not(.spacer) {
3473 .ideditor button.bar-button {
3475 flex-flow: row nowrap;
3476 align-items: center;
3479 white-space: nowrap;
3482 .ideditor button.bar-button .icon {
3485 .ideditor button.bar-button .label {
3490 .ideditor button.bar-button.dragging {
3494 .ideditor button.bar-button.dragging .tooltip {
3497 .ideditor button.bar-button.dragging.removing {
3498 cursor: url(<%= asset_path("iD/img/cursor-select-remove.png") %>), pointer;
3501 .ideditor button.save .count {
3502 display: inline-block;
3507 .ideditor .help-wrap svg.icon.pre-text.add-note,
3508 .ideditor button.add-note svg.icon {
3511 color: rgba(0,0,0,0.25);
3516 .ideditor button.add-note svg.icon {
3520 .ideditor[dir='rtl'] button.add-note svg.icon {
3522 margin-right: unset;
3524 .ideditor .help-wrap svg.icon.pre-text.add-note {
3529 .ideditor .spinner {
3535 .ideditor .spinner img {
3538 background: transparent;
3539 border-radius: 100%;
3541 .ideditor[dir='rtl'] .spinner img {
3542 -moz-transform: scaleX(-1);
3543 -o-transform: scaleX(-1);
3544 -webkit-transform: scaleX(-1);
3545 transform: scaleX(-1);
3547 -ms-filter: "FlipH";
3551 .ideditor #bar.narrow .spinner,
3552 .ideditor #bar.narrow button.bar-button .label {
3555 .ideditor #bar.narrow button .count {
3556 border-left-width: 0;
3557 border-right-width: 0;
3560 .ideditor[dir='ltr'] .undo-redo button:first-of-type {
3563 .ideditor[dir='rtl'] .undo-redo button:first-of-type {
3567 /* Header for modals / panes
3568 ------------------------------------------------------- */
3570 border-bottom: 1px solid #ccc;
3575 .ideditor .header h3 {
3578 white-space: nowrap;
3579 text-overflow: ellipsis;
3584 .ideditor .header button,
3585 .ideditor .modal > button {
3592 .ideditor .header button {
3597 .ideditor .field-help-title button.close,
3598 .ideditor .sidebar-component .header button.data-editor-close,
3599 .ideditor .sidebar-component .header button.note-editor-close,
3600 .ideditor .sidebar-component .header button.error-editor-close,
3601 .ideditor .entity-editor-pane .header button.preset-close,
3602 .ideditor .preset-list-pane .header button.preset-choose {
3607 .ideditor[dir='rtl'] .field-help-title button.close,
3608 .ideditor[dir='rtl'] .sidebar-component .header button.data-editor-close,
3609 .ideditor[dir='rtl'] .sidebar-component .header button.note-editor-close,
3610 .ideditor[dir='rtl'] .sidebar-component .header button.error-editor-close,
3611 .ideditor[dir='rtl'] .entity-editor-pane .header button.preset-close,
3612 .ideditor[dir='rtl'] .preset-list-pane .header button.preset-choose {
3617 .ideditor .entity-editor-pane .header button.preset-choose {
3622 .ideditor[dir='rtl'] .entity-editor-pane .header button.preset-choose {
3627 .ideditor .preset-choose {
3633 .ideditor .modal > button {
3640 .ideditor[dir='rtl'] .modal > button {
3649 padding: 5px 20px 5px 20px;
3650 border-top: 1px solid #ccc;
3651 background-color: #f6f6f6;
3655 justify-content: space-between;
3660 .ideditor .footer > a {
3661 justify-content: center;
3664 .ideditor .header-container {
3666 justify-content: space-between;
3669 .ideditor .header-block-outer {
3673 .ideditor .header-block-close {
3675 justify-content: flex-end;
3678 /* Hide/Toggle collapsable sections (aka Disclosure)
3679 ------------------------------------------------------- */
3680 .ideditor .hide-toggle .icon.pre-text {
3681 vertical-align: text-top;
3686 .ideditor[dir='rtl'] .hide-toggle .icon.pre-text {
3691 .ideditor a:visited.hide-toggle,
3692 .ideditor a.hide-toggle {
3693 display: inline-block;
3696 padding-bottom: 5px;
3700 /* Sidebar / Inspector
3701 ------------------------------------------------------- */
3702 .ideditor #sidebar {
3707 background: #f6f6f6;
3708 -ms-user-select: element;
3709 border: 0px solid #ccc;
3710 border-right-width: 1px;
3712 .ideditor[dir='rtl'] #sidebar {
3714 border-right-width: 0px;
3715 border-left-width: 1px;
3718 .ideditor #sidebar-resizer {
3726 .ideditor[dir='rtl'] #sidebar-resizer {
3731 .ideditor #sidebar.collapsed #sidebar-resizer {
3732 /* make target wider to avoid the user accidentally resizing window */
3736 .ideditor[dir='rtl'] #sidebar.collapsed #sidebar-resizer {
3740 .ideditor .sidebar-component {
3748 .ideditor .sidebar-component .body {
3756 .ideditor .panewrap {
3770 .ideditor .pane:first-child {
3774 .ideditor .pane:last-child {
3778 .ideditor .inspector-wrap {
3785 .ideditor .inspector-hidden {
3789 .ideditor .inspector-body {
3798 .ideditor .feature-list-pane .inspector-body,
3799 .ideditor .preset-list-pane .inspector-body {
3802 .ideditor .entity-editor-pane .inspector-body,
3803 .ideditor .selection-list-pane .inspector-body {
3807 .ideditor .inspector-inner {
3808 padding: 20px 20px 5px 20px;
3812 .ideditor #sidebar .search-header .icon {
3817 pointer-events: none;
3819 .ideditor[dir='rtl'] #sidebar .search-header .icon {
3824 .ideditor #sidebar .search-header input {
3832 border-bottom-width: 1px;
3839 /* Feature List / Search Results
3840 ------------------------------------------------------- */
3841 .ideditor .feature-list {
3844 .ideditor .no-results-item,
3845 .ideditor .geocode-item,
3846 .ideditor .feature-list-item {
3849 border-bottom: 1px solid #ccc;
3853 .ideditor .geocode-item {
3855 background-color: #ccc;
3861 .ideditor[dir='rtl'] .geocode-item {
3865 .ideditor .geocode-item:hover {
3866 background-color: #aaa;
3869 .ideditor .feature-list-item {
3870 background-color: #fff;
3875 .ideditor .feature-list-item:hover {
3876 background-color: #ececec;
3878 .ideditor .feature-list-item button {
3879 background: transparent;
3881 .ideditor .feature-list-item .label {
3884 white-space: nowrap;
3885 text-overflow: ellipsis;
3887 border-left: 1px solid rgba(0, 0, 0, .1);
3889 .ideditor[dir='rtl'] .feature-list-item .label {
3893 .ideditor .feature-list-item .label .icon {
3896 .ideditor .feature-list-item .close {
3900 .ideditor .feature-list-item .close .icon {
3903 .ideditor .feature-list-item .entity-type {
3906 .ideditor .feature-list-item:hover .entity-type {
3909 .ideditor .feature-list-item .entity-name {
3910 font-weight: normal;
3914 .ideditor[dir='rtl'] .feature-list-item .entity-name {
3916 padding-right: 10px;
3920 /* Preset List and Icons
3921 ------------------------------------------------------- */
3922 .ideditor .preset-list {
3924 padding: 20px 20px 10px 20px;
3925 border-bottom: 1px solid #ccc;
3928 .ideditor .preset-list-item {
3929 margin-bottom: 10px;
3933 .ideditor .preset-list-button-wrap {
3936 border: 1px solid #ccc;
3940 .ideditor .preset-list-button {
3947 .ideditor .preset-list.filtered .preset-list-item:first-child .preset-list-button {
3948 background: #ececec;
3951 .ideditor .preset-icon-container {
3957 align-items: center;
3958 justify-content: center;
3960 .ideditor .preset-icon-container.small {
3965 .ideditor .preset-icon-container img.image-icon {
3968 object-fit: contain;
3973 .ideditor .preset-icon-container.showing-img img.image-icon {
3974 visibility: visible;
3976 .ideditor .preset-icon-container.showing-img *:not(.image-icon) {
3980 .ideditor .preset-icon-point-border path {
3986 .ideditor .preset-icon-line {
3995 .ideditor .preset-icon-container path {
3998 .ideditor .preset-icon-container circle.vertex {
4000 stroke: rgba(0, 0, 0, 0.25);
4002 .ideditor .preset-icon-fill circle.midpoint {
4004 stroke: rgba(0, 0, 0, 0.25);
4006 /* use a consistent stroke width */
4007 .ideditor .preset-icon-container path.line.stroke {
4008 stroke-width: 2 !important;
4010 .ideditor .preset-icon-container path.line.casing {
4011 stroke-width: 4 !important;
4014 .ideditor .preset-icon-fill {
4022 .ideditor .preset-icon-container svg,
4023 .ideditor .preset-icon-container svg > * {
4024 cursor: inherit !important;
4026 .ideditor .preset-icon-fill path.area.stroke {
4030 .ideditor .preset-icon-fill-vertex circle {
4031 stroke-width: 1.5px;
4034 backface-visibility: hidden;
4037 .ideditor .preset-icon {
4043 .ideditor .preset-icon .icon {
4050 transform: scale(0.48);
4052 .ideditor .preset-icon-container.small .preset-icon.point-geom .icon {
4053 transform: translateY(-7%) scale(0.27);
4055 .ideditor .preset-icon-container.small .preset-icon.point-geom.preset-icon-iD .icon {
4056 transform: translateY(-9%) scale(0.5);
4058 .ideditor .preset-icon.framed .icon {
4059 transform: scale(0.4);
4061 .ideditor .preset-icon.framed.line-geom .icon,
4062 .ideditor .preset-icon.framed.route-geom .icon {
4064 transform: translateY(-30%) scale(0.4);
4066 .ideditor .preset-icon-iD .icon {
4067 transform: scale(1);
4069 .ideditor .preset-icon-iD.framed .icon {
4070 transform: scale(0.74);
4072 .ideditor .preset-icon-iD.framed.line-geom .icon,
4073 .ideditor .preset-icon-iD.framed.route-geom .icon {
4074 transform: translateY(-30%) scale(0.74);
4076 .ideditor .preset-icon-container.fallback .preset-icon .icon {
4077 transform: scale(0.5) !important;
4080 .ideditor .preset-list-button .label {
4082 flex-flow: row wrap;
4083 align-items: center;
4084 background-color: #f6f6f6;
4092 border-left: 1px solid rgba(0, 0, 0, .1);
4094 .ideditor[dir='rtl'] .preset-list-button .label {
4099 border-right: 1px solid rgba(0, 0, 0, .1);
4101 .ideditor[dir='ltr'] .category .preset-list-button .label {
4102 border-radius: 0px 4px 4px 0px;
4104 .ideditor[dir='rtl'] .category .preset-list-button .label {
4105 border-radius: 4px 0px 0px 4px;
4108 .ideditor .preset-list-button .label-inner {
4111 .ideditor .preset-list-button .label-inner .namepart {
4113 white-space: nowrap;
4114 text-overflow: ellipsis;
4117 .ideditor .preset-list-button .label-inner .namepart:nth-child(2) {
4118 font-weight: normal;
4121 .ideditor .preset-list-button:hover .label,
4122 .ideditor .preset-list-button:focus .label,
4123 .ideditor .preset-list-button.disabled,
4124 .ideditor .preset-list-button.disabled .label {
4125 background-color: #ececec;
4128 .ideditor .preset-list-item button.tag-reference-button {
4132 background: #f6f6f6;
4134 .ideditor[dir='ltr'] .preset-list-item button.tag-reference-button {
4135 border-left: 1px solid #ccc;
4137 .ideditor[dir='rtl'] .preset-list-item button.tag-reference-button {
4138 border-right: 1px solid #ccc;
4140 .ideditor[dir='ltr'] .preset-list-item button:last-child {
4141 border-radius: 0 4px 4px 0;
4143 .ideditor[dir='rtl'] .preset-list-item button:last-child {
4144 border-radius: 4px 0 0 4px;
4147 .ideditor .preset-list-item button.tag-reference-button:hover {
4148 background: #f1f1f1;
4150 .ideditor .preset-list-item button.tag-reference-button .icon {
4155 .ideditor .current .preset-list-button,
4156 .ideditor .current .preset-list-button .label {
4157 background-color: #e8ebff;
4160 .ideditor .category .preset-list-button:after,
4161 .ideditor .category .preset-list-button:before {
4165 left: -1px; right: -1px;
4166 border: 1px solid #ccc;
4167 border-bottom: none;
4168 border-radius: 6px 6px 0 0;
4172 .ideditor .category .preset-list-button:before {
4176 .ideditor .subgrid .preset-list {
4181 width: -webkit-calc(100% + 20px);
4184 .ideditor .subgrid .preset-list > *:last-child {
4188 .ideditor .subgrid .arrow {
4189 border: solid rgba(0, 0, 0, 0);
4191 border-bottom-color: #ececec;
4195 margin-left: -webkit-calc(50% - 10px);
4200 ------------------------------------------------------- */
4201 .ideditor .quick-links {
4203 flex-flow: row wrap;
4204 justify-content: flex-end;
4207 .ideditor .quick-link {
4211 .ideditor .data-editor .quick-links,
4212 .ideditor .error-editor .quick-links,
4213 .ideditor .note-editor .quick-links {
4218 /* Entity/Preset Editor
4219 ------------------------------------------------------- */
4220 .ideditor .entity-issues,
4221 .ideditor .preset-editor {
4223 padding: 10px 0px 5px 0px;
4225 .ideditor .entity-issues a.hide-toggle,
4226 .ideditor .preset-editor a.hide-toggle {
4227 margin: 0 20px 5px 20px;
4229 .ideditor .entity-issues .disclosure-wrap-entity_issues,
4230 .ideditor .preset-editor .form-fields-container {
4232 margin: 0 10px 10px 10px;
4234 background: #ececec;
4236 .ideditor .entity-issues .disclosure-wrap-entity_issues:empty,
4237 .ideditor .preset-editor .form-fields-container:empty {
4240 .ideditor .entity-editor-pane .preset-list-item {
4245 The parts of a field:
4246 - `.form-field` is a `div` wraps the entire thing
4247 - `.field-label` is a `label` that wraps the top part, it contains;
4248 - `span` classed `label-text`
4249 - 0..n buttons for "remove", "modified", "tag reference"
4250 - `.form-field-input-wrap` is a `label` or `div` that wraps the bottom part, it contains;
4251 - usually an `input`
4252 - sometimes some buttons (translate, increment, decrement)
4253 - or could just be a `div` with anything really
4254 - `.tag-reference-body` at the bottom (usually hidden)
4256 .------------------. -
4257 | Name | i | <- .field-label |
4258 +------------------+ |
4259 | Starbucks | + | <- .form-field-input-wrap > .form-field
4260 '------------------' |
4261 tag reference <- .tag-reference-body |
4265 .ideditor .form-field {
4267 flex-flow: row wrap;
4268 margin-bottom: 10px;
4270 -webkit-transition: margin-bottom 200ms;
4271 -moz-transition: margin-bottom 200ms;
4272 -o-transition: margin-bottom 200ms;
4273 transition: margin-bottom 200ms;
4276 .ideditor .form-field.nowrap,
4277 .ideditor .wrap-form-field:last-child .form-field {
4281 /* A `label` element that wraps the top section */
4282 .ideditor .field-label {
4284 flex-flow: row nowrap;
4290 background: #f6f6f6;
4291 border: 1px solid #ccc;
4292 border-radius: 4px 4px 0 0;
4295 .ideditor .field-label .label-text {
4297 padding: 5px 0 5px 10px;
4299 .ideditor[dir='rtl'] .field-label .label-text {
4300 padding: 5px 10px 5px 0;
4303 .ideditor .label-text .label-textannotation svg.icon {
4309 vertical-align: text-top;
4312 .ideditor .field-label button {
4314 border-left: 1px solid #ccc;
4318 background: #f6f6f6;
4320 .ideditor[dir='rtl'] .field-label button {
4322 border-right: 1px solid #ccc;
4324 .ideditor .field-label button:hover {
4325 background: #f1f1f1;
4327 .ideditor .field-label .icon {
4331 .ideditor .field-label .modified-icon,
4332 .ideditor .field-label .remove-icon,
4333 .ideditor .field-label .remove-icon-multilingual {
4336 .ideditor .modified:not(.locked) .field-label .modified-icon,
4337 .ideditor .present:not(.locked) .field-label .remove-icon,
4338 .ideditor .present:not(.locked) .field-label .remove-icon-multilingual {
4339 display: inline-block;
4342 /* A `div` element that wraps the bottom section */
4343 .ideditor .form-field-input-wrap {
4345 flex-flow: row nowrap;
4350 border-radius: 0 0 4px 4px;
4352 .ideditor .nowrap .form-field-input-wrap {
4357 .ideditor .form-field-input-wrap > input,
4358 .ideditor .form-field-input-wrap > label,
4359 .ideditor .form-field-input-wrap > textarea,
4360 .ideditor .form-field-input-wrap > ul.chiplist {
4363 border: 1px solid #ccc;
4369 .ideditor .form-field-input-wrap > textarea {
4371 border-radius: 0 0 4px 4px;
4375 /* Buttons inside fields */
4376 .ideditor .form-field-button {
4381 background-color: #fff;
4382 border: 1px solid #ccc;
4384 border-top-width: 0;
4385 border-left-width: 0;
4386 vertical-align: top;
4388 .ideditor[dir='rtl'] .form-field-button {
4389 border-left-width: 1px;
4390 border-right-width: 0;
4392 .ideditor .form-field-button:hover {
4393 background-color: #f1f1f1;
4395 .ideditor .form-field-button .icon {
4401 /* round corners of first/last child elements */
4402 .ideditor .form-field-input-wrap > button:last-of-type {
4403 border-bottom-right-radius: 4px;
4405 .ideditor[dir='rtl'] .form-field-input-wrap > button:last-of-type {
4406 border-bottom-left-radius: 4px;
4410 /* Field - Access, Cycleway
4411 ------------------------------------------------------- */
4412 .ideditor .form-field-input-access,
4413 .ideditor .form-field-input-cycleway {
4416 flex-flow: row wrap;
4419 /* Field - lists with labeled input items
4420 ------------------------------------------------------- */
4421 .ideditor .form-field ul.rows {
4423 border: 1px solid #ccc;
4425 border-radius: 0 0 4px 4px;
4429 .ideditor .form-field ul.rows li {
4430 border-top: 1px solid #ccc;
4432 .ideditor .form-field ul.rows li:first-child {
4435 .ideditor .form-field ul.rows li {
4437 flex-flow: row nowrap;
4439 .ideditor .form-field ul.rows li.labeled-input > span,
4440 .ideditor .form-field ul.rows li.labeled-input > div {
4445 .ideditor .form-field ul.rows li input {
4450 .ideditor .form-field ul.rows li button {
4453 .ideditor[dir='ltr'] .form-field ul.rows li.labeled-input input,
4454 .ideditor[dir='ltr'] .form-field ul.rows li button {
4455 border-left-width: 1px;
4457 .ideditor[dir='rtl'] .form-field ul.rows li.labeled-input input,
4458 .ideditor[dir='rtl'] .form-field ul.rows li button {
4459 border-right-width: 1px;
4463 /* Field - Structure
4464 ------------------------------------------------------- */
4465 .ideditor .structure-extras-wrap {
4469 border: 1px solid #ccc;
4471 border-radius: 0 0 4px 4px;
4473 .ideditor .structure-extras-wrap > ul.rows {
4474 border: 1px solid #ccc;
4479 /* Field - Combo / Multicombo
4480 ------------------------------------------------------- */
4481 .ideditor .form-field-input-combo > input:only-of-type {
4482 border-radius: 0 0 4px 4px;
4484 .ideditor .form-field-input-combo.empty-combobox input,
4485 .ideditor .form-field-input-multicombo .empty-combobox input {
4486 padding-right: 10px;
4489 .ideditor .form-field-input-combo.empty-combobox .combobox-caret,
4490 .ideditor .form-field-input-multicombo .empty-combobox .combobox-caret {
4494 .ideditor .form-field-input-multicombo ul.chiplist {
4495 padding: 5px 8px 5px 8px;
4498 border-radius: 0 0 4px 4px;
4502 .ideditor .form-field-input-multicombo li {
4503 display: inline-flex;
4504 flex-flow: row nowrap;
4505 align-items: center;
4510 .ideditor[dir='ltr'] .form-field-input-multicombo li {
4513 .ideditor[dir='rtl'] .form-field-input-multicombo li {
4517 .ideditor .form-field-input-multicombo li.chip {
4518 background-color: #eff2f7;
4519 border: 1px solid #ccd5e3;
4523 .ideditor[dir='ltr'] .form-field-input-multicombo li.chip {
4524 padding: 2px 0px 2px 5px;
4526 .ideditor[dir='rtl'] .form-field-input-multicombo li.chip {
4527 padding: 2px 5px 2px 0px;
4529 .ideditor .form-field-input-multicombo li.chip.draggable {
4532 .ideditor .form-field-input-multicombo li.chip.dragging {
4538 .ideditor .form-field-input-multicombo li.chip span {
4542 word-wrap: break-word;
4545 .ideditor .form-field-input-multicombo a {
4546 font-family: Arial, Helvetica, sans-serif !important;
4547 font-size: 16px !important;
4548 padding: 0px 5px 0px 5px;
4557 .ideditor .form-field-input-multicombo .input-wrap {
4558 border: 1px solid #ddd;
4562 .ideditor .form-field-input-multicombo input {
4568 .ideditor .form-field-input-multicombo input:focus {
4569 border-radius: 4px !important;
4572 .ideditor .form-field-input-multicombo .full-line-chips li.chip {
4575 .ideditor .form-field-input-multicombo .full-line-chips .input-wrap {
4580 /* Field - Text / Numeric
4581 ------------------------------------------------------- */
4582 .ideditor .form-field-input-text > input:only-of-type,
4583 .ideditor .form-field-input-tel > input:only-of-type,
4584 .ideditor .form-field-input-email > input:only-of-type,
4585 .ideditor .form-field-input-url > input:only-of-type {
4586 border-radius: 0 0 4px 4px;
4588 .ideditor .form-field-input-number > input:only-of-type {
4589 border-radius: 0 0 0 4px;
4591 .ideditor[dir='rtl'] .form-field-input-number > input:only-of-type {
4592 border-radius: 0 0 4px 0;
4594 .ideditor .form-field-input-number > button:last-of-type {
4595 border-radius: 0 0 4px 0;
4597 .ideditor[dir='rtl'] .form-field-input-number > button:last-of-type {
4598 border-radius: 0 0 0 4px;
4601 .ideditor[dir='ltr'] .form-field-input-identifier > input:last-child,
4602 .ideditor[dir='rtl'] .form-field-input-identifier > input:first-child,
4603 .ideditor[dir='ltr'] .form-field-input-identifier > button {
4604 border-bottom-right-radius: 4px;
4606 .ideditor[dir='ltr'] .form-field-input-identifier > input:first-child,
4607 .ideditor[dir='rtl'] .form-field-input-identifier > input:last-child,
4608 .ideditor[dir='rtl'] .form-field-input-identifier > button {
4609 border-bottom-left-radius: 4px;
4612 /* draw the up/down on the buttons */
4613 .ideditor .form-field-input-number button.decrement::after,
4614 .ideditor .form-field-input-number button.increment::after {
4616 height: 0; width: 0;
4618 left: 0; right: 0; bottom: 0; top: 0;
4621 .ideditor .form-field-input-number button.decrement::after {
4622 border-top: 5px solid #ccc;
4623 border-left: 5px solid transparent;
4624 border-right: 5px solid transparent;
4626 .ideditor .form-field-input-number button.increment::after {
4627 border-bottom: 5px solid #ccc;
4628 border-left: 5px solid transparent;
4629 border-right: 5px solid transparent;
4634 ------------------------------------------------------- */
4635 .ideditor .form-field-input-check {
4637 align-items: center;
4641 border: 1px solid #ccc;
4645 .ideditor .form-field-input-check > input[type="checkbox"] {
4651 .ideditor .form-field-input-check > span {
4654 .ideditor .form-field-input-check > .reverser.button {
4656 background-color: #eff2f7;
4657 border: 1px solid #ccd5e3;
4661 .ideditor[dir='ltr'] .form-field-input-check > .reverser.button {
4664 .ideditor[dir='rtl'] .form-field-input-check > .reverser.button {
4667 .ideditor .form-field-input-check > .reverser.button.hide {
4671 .ideditor .form-field-input-check:hover {
4672 background: #f1f1f1;
4674 .ideditor .form-field-input-check .set {
4677 .ideditor .form-field-input-check label:not(.set) input[type="checkbox"] {
4682 /* Field - Radio button
4683 ------------------------------------------------------- */
4684 .ideditor .form-field-input-radio {
4687 flex-flow: row wrap;
4689 .ideditor .form-field-input-radio > label {
4692 flex-flow: row nowrap;
4696 background-color: #fff;
4700 .ideditor .form-field-input-radio > label:last-child {
4701 border-radius: 0 0 4px 4px;
4703 .ideditor .form-field-input-radio > label:hover {
4704 background-color: #ececec;
4706 .ideditor .form-field-input-radio > label.active {
4707 background-color: #e8ebff;
4709 .ideditor .form-field-input-radio > label:not(:last-of-type) {
4710 border-bottom: 1px solid #ccc;
4712 .ideditor .form-field-input-radio > label > input[type="radio"] {
4716 .ideditor .form-field-input-radio > label > span {
4719 white-space: nowrap;
4720 text-overflow: ellipsis;
4723 /* Hide placeholder for radio buttons if another is active, or not in hover state */
4724 .ideditor .form-field-input-radio label.active ~ .placeholder,
4725 .ideditor .form-field-input-radio .placeholder {
4736 ------------------------------------------------------- */
4737 .ideditor .form-field-input-maxspeed > input:first-of-type {
4738 border-radius: 0 0 0 4px;
4740 .ideditor[dir='rtl'] .form-field-input-maxspeed > input:first-of-type {
4741 border-radius: 0 0 4px 0;
4743 .ideditor .form-field-input-maxspeed > input:last-of-type { /* unit field */
4747 border-radius: 0 0 4px 0;
4749 .ideditor[dir='rtl'] .form-field-input-maxspeed > input:last-of-type {
4751 border-radius: 0 0 0 4px;
4755 /* Field - Localized Name
4756 ------------------------------------------------------- */
4757 .ideditor .form-field-input-localized > input.localized-main {
4758 border-radius: 0 0 0 4px;
4760 .ideditor[dir='rtl'] .form-field-input-localized > input.localized-main {
4761 border-radius: 0 0 4px 0;
4763 .ideditor .form-field-input-localized > button.localized-add {
4764 border-radius: 0 0 4px 0;
4766 .ideditor[dir='rtl'] .form-field-input-localized > button.localized-add {
4767 border-radius: 0 0 0 4px;
4770 .ideditor .form-field-input-localized button.localized-add.disabled,
4771 .ideditor .form-field-input-localized input.localized-main.disabled,
4772 .ideditor .form-field-input-localized input.localized-lang.disabled,
4773 .ideditor .form-field-input-localized input.localized-value.disabled {
4775 background-color: #eee;
4776 cursor: not-allowed;
4779 /* nested subfields for name in different languages */
4780 .ideditor .localized-multilingual {
4784 .ideditor .localized-multilingual .entry {
4789 /* draws a little line connecting the multilingual field up to the name field */
4790 .ideditor .localized-multilingual .entry::before {
4803 .ideditor .localized-multilingual .entry .localized-lang {
4805 border-top-width: 0;
4808 .ideditor .localized-multilingual .entry .localized-value {
4809 border-top-width: 0;
4810 border-radius: 0 0 4px 4px;
4816 ------------------------------------------------------- */
4817 .ideditor .form-field-input-address {
4820 flex-flow: row wrap;
4821 border: 1px solid #ccc;
4825 .ideditor .addr-row {
4832 .ideditor .addr-row > input {
4838 .ideditor[dir='rtl'] .addr-row input {
4839 border-right: 1px solid #ccc;
4843 .ideditor .addr-row:first-of-type input {
4846 .ideditor .addr-row input:first-of-type {
4849 .ideditor[dir='rtl'] .addr-row input:first-of-type {
4852 .ideditor .addr-row:last-of-type input:first-of-type {
4853 border-radius: 0 0 0 4px;
4855 .ideditor[dir='rtl'] .addr-row:last-of-type input:first-of-type {
4856 border-radius: 0 0 4px 0;
4858 .ideditor .addr-row:last-of-type input:last-of-type {
4859 border-radius: 0 0 4px 0;
4861 .ideditor[dir='rtl'] .addr-row:last-of-type input:last-of-type {
4862 border-radius: 0 0 0 4px;
4866 /* Field - Wikipedia
4867 ------------------------------------------------------- */
4868 .ideditor .form-field-input-wikipedia {
4870 flex-flow: row wrap;
4874 .ideditor .wiki-lang-container,
4875 .ideditor .wiki-title-container {
4877 flex-flow: row nowrap;
4882 .ideditor .wiki-lang-container > input.wiki-lang,
4883 .ideditor .wiki-title-container > input.wiki-title {
4888 .ideditor .wiki-title-container > input.wiki-title {
4889 border-radius: 0 0 0 4px;
4891 .ideditor[dir='rtl'] .wiki-title-container > input.wiki-title {
4892 border-radius: 0 0 4px 0;
4894 .ideditor .wiki-title-container > button.wiki-link,
4895 .ideditor .form-field-wikidata ul.rows li:last-child button.form-field-button:last-child {
4896 border-radius: 0 0 4px 0;
4898 .ideditor[dir='rtl'] .wiki-title-container > button.wiki-link,
4899 .ideditor[dir='rtl'] .form-field-wikidata ul.rows li:last-child button.form-field-button:last-child {
4900 border-radius: 0 0 0 4px;
4904 /* Field - Restriction Editor
4905 ------------------------------------------------------- */
4906 .ideditor .form-field-input-restrictions {
4908 border: 1px solid #ccc;
4910 border-radius: 0 0 4px 4px;
4913 .ideditor .form-field-input-restrictions .restriction-controls-container {
4914 background-color: #fff;
4917 border-top: 1px solid #ccc;
4918 border-radius: 0 0 4px 4px;
4921 .ideditor .restriction-controls-container .restriction-controls {
4923 -moz-user-select: none;
4924 -webkit-user-select: none;
4925 -ms-user-select: none;
4929 .ideditor .restriction-controls .restriction-control {
4935 .ideditor .restriction-control input,
4936 .ideditor .restriction-control span {
4937 display: table-cell;
4942 .ideditor .restriction-control span.restriction-control-label {
4946 .ideditor .restriction-control input {
4950 vertical-align: middle;
4953 .ideditor .form-field-input-restrictions .restriction-container {
4957 /* zero width space, so container takes up space */
4958 .ideditor .form-field-input-restrictions .restriction-container:after {
4962 .ideditor .form-field-input-restrictions svg.surface {
4967 .ideditor .restriction-container .restriction-help {
4974 background-color: rgba(255, 255, 255, .8);
4977 pointer-events: none;
4979 -moz-user-select: none;
4980 -webkit-user-select: none;
4981 -ms-user-select: none;
4985 .ideditor .restriction-help span {
4989 .ideditor .restriction-help .qualifier {
4993 .ideditor .restriction-help .qualifier.allow {
4996 .ideditor .restriction-help .qualifier.restrict {
4999 .ideditor .restriction-help .qualifier.only {
5004 /* Field - Changeset Comment
5005 ------------------------------------------------------- */
5006 .ideditor .form-field-comment:not(.present) #preset-input-comment {
5007 border-color: rgb(230, 100, 100);
5009 .ideditor .form-field-comment:not(.present) .field-label {
5010 border-color: rgb(230, 100, 100);
5011 background: rgba(230, 100, 100, 0.2);
5013 .ideditor .form-field-comment:not(.present) button {
5014 border-color: rgb(230, 100, 100);
5019 ------------------------------------------------------- */
5020 .ideditor div.combobox {
5023 box-shadow: 0 4px 10px 1px rgba(0,0,0,.2);
5029 border: 1px solid #ccc;
5030 border-radius: 0 0 4px 4px;
5033 .ideditor .combobox a {
5036 border-top: 1px solid #ccc;
5037 text-overflow: ellipsis;
5038 white-space: nowrap;
5042 .ideditor .combobox a.selected,
5043 .ideditor .combobox a:hover {
5044 background: #ececec;
5047 .ideditor .combobox a:first-child {
5052 .ideditor .combobox-caret {
5053 display: inline-block;
5056 width: 30px !important;
5058 vertical-align: top;
5061 .ideditor[dir='rtl'] .combobox-caret {
5063 margin-right: -30px;
5066 .ideditor .combobox-caret::after {
5068 height: 0; width: 0;
5070 left: 0; right: 0; bottom: 0; top: 0;
5072 border-top: 5px solid #ccc;
5073 border-left: 5px solid transparent;
5074 border-right: 5px solid transparent;
5079 ------------------------------------------------------- */
5080 .ideditor .field-help-body {
5088 border: 1px solid #ccc;
5090 border-radius: 0 0 4px 4px;
5092 background: rgba(255,255,255,0.95);
5093 box-shadow: 0 0 30px 5px rgba(0,0,0,.4);
5096 .ideditor .field-help-title h2 {
5101 .ideditor .field-help-title button {
5107 .ideditor .field-help-nav {
5110 margin-bottom: 10px;
5112 .ideditor .field-help-nav-item {
5113 display: inline-block;
5118 .ideditor .field-help-nav-item.active {
5120 border-bottom: 2px solid;
5122 .ideditor .field-help-nav-item:hover {
5124 background-color: #efefef;
5127 .ideditor .field-help-content {
5132 .ideditor .field-help-content h3 {
5136 .ideditor .field-help-content p {
5137 margin-bottom: 15px;
5139 .ideditor .field-help-content ul li {
5144 .ideditor .field-help-content .field-help-image {
5146 margin-bottom: 15px;
5149 .ideditor .field-help-content svg.turn {
5153 .ideditor .field-help-content svg.shadow {
5158 .ideditor .field-help-content svg.from {
5161 .ideditor .field-help-content svg.allow {
5164 .ideditor .field-help-content svg.restrict {
5167 .ideditor .field-help-content svg.only {
5171 .ideditor .field-help-content p.from_shadow,
5172 .ideditor .field-help-content p.allow_shadow,
5173 .ideditor .field-help-content p.restrict_shadow,
5174 .ideditor .field-help-content p.allow_turn,
5175 .ideditor .field-help-content p.restrict_turn {
5180 /* More Fields dropdown
5181 ------------------------------------------------------- */
5182 .ideditor .more-fields {
5183 padding: 0 20px 20px 20px;
5186 .ideditor .changeset-editor .more-fields {
5187 padding: 15px 20px 0 20px;
5190 .ideditor .more-fields label {
5192 flex-flow: row nowrap;
5193 justify-content: space-between;
5194 align-items: center;
5197 .ideditor .more-fields input {
5201 .ideditor[dir='rtl'] .more-fields input {
5206 .ideditor .form-field-input-wrap .label {
5208 background: #f6f6f6;
5214 ------------------------------------------------------- */
5215 .ideditor .raw-tag-options {
5217 flex-flow: row nowrap;
5218 flex-direction: row-reverse;
5222 .ideditor button.raw-tag-option {
5230 .ideditor button.raw-tag-option:focus,
5231 .ideditor button.raw-tag-option:hover,
5232 .ideditor button.raw-tag-option.active {
5234 background: #597be7;
5236 .ideditor button.raw-tag-option.selected {
5238 background: #7092ff;
5240 .ideditor button.raw-tag-option svg.icon {
5243 vertical-align: text-bottom;
5245 .ideditor[dir='ltr'] button.raw-tag-option-list {
5246 -moz-transform: scaleX(-1);
5247 -o-transform: scaleX(-1);
5248 -webkit-transform: scaleX(-1);
5249 transform: scaleX(-1);
5251 -ms-filter: "FlipH";
5255 .ideditor .tag-text {
5258 font-family: monospace;
5262 .ideditor .tag-text,
5263 .ideditor .tag-list {
5266 .ideditor .tag-row {
5270 .ideditor .tag-row .inner-wrap {
5272 flex-flow: row nowrap;
5276 .ideditor .tag-row .key-wrap,
5277 .ideditor .tag-row .value-wrap {
5281 .ideditor .tag-text.readonly,
5282 .ideditor .tag-row.readonly,
5283 .ideditor .tag-row.readonly input.key,
5284 .ideditor .tag-row.readonly input.value,
5285 .ideditor .tag-row.readonly button.remove {
5287 background-color: #eee;
5288 cursor: not-allowed;
5291 .ideditor .tag-row input {
5295 border-bottom: 1px solid #ccc;
5296 border-left: 1px solid #ccc;
5299 .ideditor[dir='rtl'] .tag-row input {
5301 border-right: 1px solid #ccc;
5305 .ideditor .tag-row input.key {
5307 background-color: #f6f6f6;
5310 .ideditor .tag-row input.value {
5311 border-right: 1px solid #ccc;
5313 .ideditor[dir='rtl'] .tag-row input.value {
5314 border-left: 1px solid #ccc;
5317 .ideditor .tag-row:first-child input.key {
5318 border-top: 1px solid #ccc;
5319 border-top-left-radius: 4px;
5321 .ideditor[dir='rtl'] .tag-row:first-child input.key {
5322 border-top-left-radius: 0;
5323 border-top-right-radius: 4px;
5326 .ideditor .tag-row:first-child input.value {
5327 border-top: 1px solid #ccc;
5329 .ideditor .tag-row button {
5333 border: 1px solid #ccc;
5334 border-top-width: 0;
5335 border-left-width: 0;
5337 .ideditor[dir='rtl'] .tag-row button {
5338 border-left-width: 1px;
5339 border-right-width: 0;
5342 .ideditor .tag-row button:hover {
5343 background: #f1f1f1;
5345 .ideditor .tag-row button .icon {
5348 .ideditor .tag-row:first-child button {
5349 border-top-width: 1px;
5352 .ideditor .tag-row:first-child .tag-reference-button {
5353 border-top-right-radius: 4px;
5355 .ideditor[dir='rtl'] .tag-row:first-child .tag-reference-button {
5356 border-top-left-radius: 4px;
5357 border-top-right-radius: 0;
5360 .ideditor .tag-row:last-child .tag-reference-button {
5361 border-bottom-right-radius: 4px;
5363 .ideditor[dir='rtl'] .tag-row:last-child .tag-reference-button {
5364 border-bottom-left-radius: 4px;
5365 border-bottom-right-radius: 0;
5368 .ideditor .tag-row .tag-reference-button {
5371 .ideditor[dir='rtl'] .tag-row .tag-reference-button {
5372 border-left-width: 1px;
5373 border-right-width: 0;
5377 .ideditor .tag-reference-loading {
5378 background-color: #f5f5f5;
5380 .ideditor .tag-reference-loading .icon {
5381 background-image: url(<%= asset_path("iD/img/mini-loader.gif") %>);
5382 background-position: 0 0;
5385 .ideditor .tag-reference-body {
5392 .ideditor .tag-reference-body.expanded {
5393 padding-bottom: 10px;
5394 display: inline-block;
5396 .ideditor .tag-reference-description {
5399 .ideditor .tag-reference-link {
5403 .ideditor img.tag-reference-wiki-image {
5409 .ideditor[dir='rtl'] img.tag-reference-wiki-image {
5414 .ideditor .preset-list .tag-reference-body {
5418 .ideditor .raw-tag-editor .tag-reference-body {
5421 .ideditor .raw-tag-editor .tag-row.readonly .tag-reference-body {
5422 background: #f6f6f6;
5425 .ideditor .raw-tag-editor .tag-row:not(:last-child) .tag-reference-body.expanded {
5426 border-bottom: 1px solid #ccc;
5428 .ideditor .raw-tag-editor .tag-row.readonly .tag-reference-body.expanded {
5429 border-top: 1px solid #ccc;
5433 /* Raw Member / Membership Editor
5434 ------------------------------------------------------- */
5436 .ideditor .raw-member-editor .member-list,
5437 .ideditor .raw-membership-editor .member-list {
5440 .ideditor .raw-member-editor .member-list li,
5441 .ideditor .raw-membership-editor .member-list li {
5445 padding-bottom: 10px;
5447 .ideditor .raw-member-editor .member-row .member-entity-name,
5448 .ideditor .raw-membership-editor .member-row .member-entity-name {
5449 font-weight: normal;
5453 .ideditor[dir='rtl'] .raw-member-editor .member-row .member-entity-name,
5454 .ideditor[dir='rtl'] .raw-membership-editor .member-row .member-entity-name {
5456 padding-right: 10px;
5459 .ideditor .form-field-input-member > input.member-role {
5460 border-radius: 0 0 0 4px;
5462 .ideditor[dir='rtl'] .form-field-input-member > input.member-role {
5463 border-radius: 0 0 4px 0;
5466 .ideditor .member-incomplete .form-field-input-member > input.member-role,
5467 .ideditor[dir='rtl'] .member-incomplete .form-field-input-member > input.member-role {
5468 border-radius: 0 0 4px 4px;
5471 .ideditor .member-incomplete .member-delete {
5475 .ideditor .member-row-new .member-entity-input {
5477 border-radius: 4px 4px 0 0;
5481 .ideditor .raw-member-editor .member-row.dragging {
5485 -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
5486 -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
5487 box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
5491 /* preserve extra space at bottom of inspector to allow for dropdown options - #5280 */
5492 .ideditor .raw-membership-editor.inspector-inner {
5493 margin-bottom: 150px;
5496 /* hidden field to prevent user from tabbing out of the sidebar */
5497 .ideditor input.key-trap {
5501 border: 1px solid rgba(0,0,0,0);
5505 /* add tag, add relation buttons */
5506 .ideditor .add-row {
5509 flex-flow: row nowrap;
5511 .ideditor .add-row .add-tag,
5512 .ideditor .add-row .add-relation,
5513 .ideditor .add-row .space-value {
5516 .ideditor .add-row .space-buttons {
5519 .ideditor .add-row button {
5521 background: rgba(0,0,0,.5);
5523 .ideditor .add-row button:focus,
5524 .ideditor .add-row button:hover {
5525 background: rgba(0,0,0,.8);
5528 .ideditor .add-tag {
5529 border-radius: 0 0 4px 4px;
5531 .ideditor .add-relation {
5537 /* OSM Note / KeepRight Editors
5538 ------------------------------------------------------- */
5539 .ideditor .note-header,
5540 .ideditor .error-header {
5541 background-color: #f6f6f6;
5543 border: 1px solid #ccc;
5545 flex-flow: row nowrap;
5546 align-items: center;
5549 .ideditor .note-header-icon,
5550 .ideditor .error-header-icon {
5551 background-color: #fff;
5557 border-right: 1px solid #ccc;
5558 border-radius: 5px 0 0 5px;
5560 .ideditor[dir='rtl'] .note-header-icon,
5561 .ideditor[dir='rtl'] .error-header-icon {
5562 border-right: unset;
5563 border-left: 1px solid #ccc;
5564 border-radius: 0 5px 5px 0;
5567 .ideditor .note-header-icon .icon-wrap,
5568 .ideditor .error-header-icon .icon-wrap {
5572 .ideditor .preset-icon-28 {
5578 .ideditor .preset-icon-28 .icon {
5583 .ideditor .note-header-label,
5584 .ideditor .error-header-label {
5585 background-color: #f6f6f6;
5590 border-radius: 0 5px 5px 0;
5592 .ideditor[dir='rtl'] .note-header-label,
5593 .ideditor[dir='rtl'] .error-header-label {
5594 border-radius: 5px 0 0 5px;
5597 .ideditor .note-category {
5601 .ideditor .comments-container {
5602 background: #ececec;
5608 .ideditor .comment {
5609 background-color: #fff;
5611 border: 1px solid #ccc;
5614 flex-flow: row nowrap;
5616 .ideditor .comment-avatar {
5620 .ideditor .comment-avatar .icon.comment-avatar-icon {
5624 border: 1px solid #ccc;
5625 border-radius: 20px;
5627 .ideditor .comment-main {
5628 padding: 10px 10px 10px 0;
5630 flex-flow: column nowrap;
5632 overflow-wrap: break-word;
5634 .ideditor[dir='rtl'] .comment-main {
5635 padding: 10px 0 10px 10px;
5638 .ideditor .comment-metadata {
5639 flex-flow: row nowrap;
5640 justify-content: space-between;
5642 .ideditor .comment-author {
5646 .ideditor .comment-date {
5649 .ideditor .comment-text {
5655 .ideditor .comment-text::-webkit-scrollbar {
5659 .ideditor .note-save,
5660 .ideditor .error-save {
5664 .ideditor .error-details {
5667 .ideditor .error-details-container {
5668 background: #ececec;
5672 border: 1px solid #ccc;
5674 .ideditor .error-details-description {
5675 margin-bottom: 10px;
5677 .ideditor .error-details-description-text::first-letter {
5678 text-transform: capitalize;
5680 .ideditor[dir='rtl'] .error-details-description-text::first-letter {
5681 text-transform: none; /* #5877 */
5684 .ideditor .note-save .new-comment-input,
5685 .ideditor .error-save .new-comment-input {
5692 .ideditor .note-save .detail-section,
5693 .ideditor .error-save .detail-section {
5697 .ideditor .note-report {
5702 /* Custom Data Editor
5703 ------------------------------------------------------- */
5704 .ideditor .data-header {
5705 background-color: #f6f6f6;
5707 border: 1px solid #ccc;
5709 flex-flow: row nowrap;
5710 align-items: center;
5713 .ideditor .data-header-icon {
5714 background-color: #fff;
5720 border-right: 1px solid #ccc;
5721 border-radius: 5px 0 0 5px;
5723 .ideditor[dir='rtl'] .data-header-icon {
5724 border-right: unset;
5725 border-left: 1px solid #ccc;
5726 border-radius: 0 5px 5px 0;
5729 .ideditor .data-header-icon .icon-wrap {
5734 .ideditor .data-header-label {
5735 background-color: #f6f6f6;
5740 border-radius: 0 5px 5px 0;
5742 .ideditor[dir='rtl'] .data-header-label {
5743 border-radius: 5px 0 0 5px;
5746 /* custom data editor - no info/delete buttons */
5747 .ideditor .data-editor.raw-tag-editor .tag-row button {
5750 .ideditor .data-editor.raw-tag-editor .tag-row .key-wrap,
5751 .ideditor .data-editor.raw-tag-editor .tag-row .value-wrap {
5757 ------------------------------------------------------- */
5758 .ideditor .map-controls {
5765 .ideditor[dir='rtl'] .map-controls {
5770 .ideditor .map-control > button {
5773 background: rgba(0,0,0,.5);
5777 .ideditor .map-control > button:not(.disabled):hover,
5778 .ideditor .map-control > button:not(.disabled):focus {
5779 background: rgba(0, 0, 0, .8);
5782 .ideditor .map-control > button.active,
5783 .ideditor .map-control > button.active:hover {
5784 background: #7092ff;
5787 .ideditor .map-control > button.disabled .icon {
5788 color: rgba(255, 255, 255, 0.5);
5792 /* Fullscreen Button (disabled)
5793 ------------------------------------------------------- */
5794 .ideditor div.full-screen {
5795 display: inline-block;
5801 .ideditor div.full-screen .tooltip {
5805 .ideditor div.full-screen > button, .ideditor div.full-screen > button.active {
5808 background: transparent;
5811 .ideditor div.full-screen > button:hover {
5812 background-color: rgba(0, 0, 0, .8);
5817 ------------------------------------------------------- */
5818 .ideditor .zoombuttons > button.zoom-in {
5819 border-radius: 4px 0 0 0;
5821 .ideditor[dir='rtl'] .zoombuttons > button.zoom-in {
5822 border-radius: 0 4px 0 0;
5827 ------------------------------------------------------- */
5828 .ideditor .geolocate-control {
5829 margin-bottom: 10px;
5831 .ideditor .geolocate-control > button {
5832 border-radius: 0 0 0 4px;
5834 .ideditor[dir='rtl'] .geolocate-control > button {
5835 border-radius: 0 0 4px 0;
5839 /* Background / Map Data / Help Pane buttons
5840 ------------------------------------------------------- */
5841 .ideditor .background-control > button {
5842 border-radius: 4px 0 0 0;
5844 .ideditor[dir='rtl'] .background-control > button {
5845 border-radius: 0 4px 0 0;
5848 .ideditor .help-control > button {
5849 border-radius: 0 0 0 4px;
5851 .ideditor[dir='rtl'] .help-control > button {
5852 border-radius: 0 0 4px 0;
5856 /* Background / Map Data Settings
5857 ------------------------------------------------------- */
5858 .ideditor .map-data-control,
5859 .ideditor .background-control {
5863 .ideditor .imagery-faq {
5864 margin-bottom: 10px;
5865 white-space: nowrap;
5868 .ideditor .layer-list, .ideditor .controls-list {
5869 margin-bottom: 10px;
5870 border: 1px solid #ccc;
5874 .ideditor .layer-list > li {
5876 background-color: #fff;
5882 .ideditor .layer-list:empty {
5886 .ideditor .layer-list > li:first-child {
5887 border-radius: 3px 3px 0 0;
5889 .ideditor .layer-list > li:last-child {
5890 border-radius: 0 0 3px 3px;
5892 .ideditor .layer-list > li:only-child {
5895 .ideditor .layer-list li:not(:last-child) {
5896 border-bottom: 1px solid #ccc;
5898 .ideditor .layer-list li:hover {
5899 background-color: #ececec;
5902 .ideditor .layer-list li.active button,
5903 .ideditor .layer-list li.switch button,
5904 .ideditor .layer-list li.active,
5905 .ideditor .layer-list li.switch {
5906 background: #e8ebff;
5909 .ideditor .layer-list li.best > div.best {
5914 .ideditor[dir='rtl'] .list-item-data-browse svg {
5915 transform: rotateY(180deg);
5918 /* make sure tooltip fits in map-control panel */
5919 /* if too wide, placement will be wrong the first time it displays */
5920 .ideditor .layer-list li.best .popover-inner {
5924 .ideditor .layer-list label {
5930 .ideditor[dir='ltr'] .layer-list .indented label {
5933 .ideditor[dir='rtl'] .layer-list .indented label {
5934 padding-right: 24px;
5937 .ideditor .layer-list label > span {
5940 white-space: nowrap;
5941 text-overflow: ellipsis;
5944 .ideditor .map-data-pane .layer-list button,
5945 .ideditor .background-pane .layer-list button {
5947 border-left: 1px solid #ccc;
5952 .ideditor[dir='rtl'] .map-data-pane .layer-list button,
5953 .ideditor[dir='rtl'] .background-pane .layer-list button {
5955 border-right: 1px solid #ccc;
5958 .ideditor .map-data-pane .layer-list button .icon,
5959 .ideditor .background-pane .layer-list button .icon {
5963 .ideditor .map-data-pane .layer-list button:last-of-type,
5964 .ideditor .background-pane .layer-list button:last-of-type {
5965 border-radius: 0 3px 3px 0;
5967 .ideditor[dir='rtl'] .map-data-pane .layer-list button:last-of-type,
5968 .ideditor[dir='rtl'] .background-pane .layer-list button:last-of-type {
5969 border-radius: 3px 0 0 3px;
5972 .ideditor .map-data-pane .vectortile-container .vectortile-header {
5973 padding-bottom: 5px;
5975 .ideditor .map-data-pane .vectortile-container .vectortile-footer {
5976 padding-bottom: 10px;
5981 ------------------------------------------------------- */
5985 .ideditor .issue .issue-label,
5986 .ideditor .issue-label .issue-text {
5989 flex-flow: row nowrap;
5993 .ideditor .issue-text .issue-icon {
5997 .ideditor .issue-text .issue-message {
6001 .ideditor .issue-label .issue-autofix {
6005 .ideditor .issue-label .issue-info-button {
6009 border-left: 1px solid #ccc;
6010 background-color: rgba(0,0,0,0);
6012 .ideditor[dir='rtl'] .issue-label .issue-info-button {
6014 border-right: 1px solid #ccc;
6016 .ideditor .issue-container .issue-label .issue-info-button .icon {
6019 .ideditor .issue-container.active .issue-label .issue-info-button .icon {
6022 .ideditor .issue-label .issue-info-button:last-child {
6023 border-radius: 0 4px 4px 0;
6025 .ideditor[dir='rtl'] .issue-label .issue-info-button:last-child {
6026 border-radius: 4px 0 0 4px;
6029 .ideditor button.autofix.action {
6033 background: #7092ff;
6036 .ideditor button.autofix.action:focus,
6037 .ideditor button.autofix.action:hover,
6038 .ideditor button.autofix.action.active {
6039 background: #597be7;
6043 .ideditor .autofix-all {
6045 flex-flow: row nowrap;
6046 flex-direction: row-reverse;
6048 padding-bottom: 5px;
6050 .ideditor .autofix-all-link-text {
6053 .ideditor .autofix-all-link-icon svg {
6055 background: currentColor;
6058 .ideditor .autofix-all-link-icon svg use {
6062 /* warning styles */
6063 .ideditor .warnings-list,
6064 .ideditor .warnings-list *,
6065 .ideditor .issue-container.active .issue.severity-warning,
6066 .ideditor .issue-container.active .issue.severity-warning * {
6070 .ideditor .warnings-list .issue.severity-warning .issue-label,
6071 .ideditor .issue.severity-warning .issue-fix-list,
6072 .ideditor.mode-save .warning-section {
6076 .ideditor .issue-container.active .issue.severity-warning .issue-label {
6080 .ideditor .warnings-list .issue.severity-warning .issue-label:hover,
6081 .ideditor .issue.severity-warning .issue-fix-item.actionable:hover {
6085 .ideditor .issue.severity-warning .issue-icon {
6089 .ideditor .issue.severity-warning .issue-fix-item.actionable,
6090 .ideditor .issue-container.active .issue.severity-warning .issue-info-button {
6096 .ideditor .issue.severity-warning .issue-fix-item.actionable:hover,
6097 .ideditor .issue-container.active .issue.severity-warning .issue-info-button:hover {
6104 .ideditor .notification-badge.warning {
6110 .ideditor .errors-list,
6111 .ideditor .errors-list *,
6112 .ideditor .issue-container.active .issue.severity-error,
6113 .ideditor .issue-container.active .issue.severity-error * {
6117 .ideditor .errors-list .issue.severity-error .issue-label,
6118 .ideditor .issue.severity-error .issue-fix-list,
6119 .ideditor.mode-save .error-section {
6120 background: #ffd6d6;
6123 .ideditor .issue-container.active .issue.severity-error .issue-label {
6124 background: #ffc6c6;
6127 .ideditor .errors-list .issue.severity-error .issue-label:hover,
6128 .ideditor .issue.severity-error .issue-fix-item.actionable:hover {
6129 background: #ffb6b6;
6132 .ideditor .issue.severity-error .issue-icon {
6136 .ideditor .issue.severity-error .issue-fix-item.actionable,
6137 .ideditor .issue-container.active .issue.severity-error .issue-info-button {
6143 .ideditor .issue.severity-error .issue-fix-item.actionable:hover,
6144 .ideditor .issue-container.active .issue.severity-error .issue-info-button:hover {
6151 .ideditor .notification-badge.error {
6157 .ideditor .issues-options-container {
6160 .ideditor .issues-option {
6163 .ideditor .issues-option-title {
6164 display: table-cell;
6166 padding-right: 10px;
6168 .ideditor[dir='rtl'] .issues-option-title {
6172 .ideditor .issues-option label {
6173 display: table-cell;
6177 .ideditor .layer-list.issues-list li.issue {
6178 border-color: inherit; /* override .layer-list styles */
6183 .ideditor .layer-list.issue-rules-list,
6184 .ideditor .layer-list.issues-list,
6185 .ideditor .layer-list.layer-feature-list {
6188 .ideditor .section-footer {
6190 flex-flow: row nowrap;
6191 flex-direction: row-reverse;
6194 .ideditor .section-footer a {
6198 .ideditor .issues-none .box {
6200 border: 1px solid #72d979;
6201 background: #c6ffca;
6202 padding: 5px !important;
6205 .ideditor .issues-none .icon {
6209 .ideditor input.square-degrees-input {
6210 padding: 2px !important; /* important needed for rtl */
6214 background: rgba(0,0,0,0);
6215 color: currentColor;
6219 /* Entity Issues List */
6220 .ideditor .entity-issues .issue-container .issue {
6222 border: 1px solid #ccc;
6223 background: #f6f6f6;
6225 .ideditor .entity-issues .issue-container:not(.active) .issue-text:hover,
6226 .ideditor .entity-issues .issue-container:not(.active) .issue-info-button:hover {
6227 background: #f1f1f1;
6229 .ideditor .entity-issues .issue .issue-label .issue-text {
6230 padding-right: 10px;
6232 .ideditor[dir='rtl'] .entity-issues .issue .issue-label .issue-text {
6233 padding-right: unset;
6237 .ideditor .entity-issues .issue-container.active .issue-label .issue-text {
6240 .ideditor .entity-issues .issue-container:not(:last-of-type) {
6243 .ideditor .entity-issues .issue-container.active:not(:first-of-type) {
6246 .ideditor .entity-issues .issue-container.active:not(:last-of-type) {
6247 margin-bottom: 10px;
6251 .ideditor .entity-issues .issue-fix-list {
6252 border-top: 1px solid;
6253 border-color: inherit;
6255 .ideditor .entity-issues .issue-container.active .issue-fix-list:empty {
6259 .ideditor li.issue-fix-item {
6260 padding: 2px 10px 2px 20px;
6262 .ideditor[dir='rtl'] li.issue-fix-item {
6263 padding: 2px 20px 2px 10px;
6265 .ideditor li.issue-fix-item:first-of-type {
6268 .ideditor li.issue-fix-item:last-of-type {
6269 padding-bottom: 5px;
6272 .ideditor li.issue-fix-item .fix-message {
6276 .ideditor li.issue-fix-item.actionable {
6279 .ideditor li.issue-fix-item:not(.actionable) .fix-icon {
6284 .ideditor .issue-container:not(.active) ul.issue-fix-list {
6288 .ideditor .issue-info {
6295 .ideditor .issue-info.expanded {
6296 display: inline-block;
6299 .ideditor .issue-info .issue-reference {
6300 margin-bottom: 10px;
6302 .ideditor .issue-info .tagDiff-table {
6305 border: 1px solid #ccc;
6307 .ideditor .issue-info .tagDiff-row {
6308 border: 1px solid #ccc;
6310 .ideditor .issue-info .tagDiff-cell {
6312 font-family: monospace;
6314 border: 1px solid #ccc;
6316 .ideditor .issue-info .tagDiff-cell-add {
6319 .ideditor .issue-info .tagDiff-cell-remove {
6324 /* Background - Display Options Sliders
6325 ------------------------------------------------------- */
6326 .ideditor .display-options-container {
6330 .ideditor .display-control h5 {
6335 .ideditor .display-control h5 span {
6339 .ideditor .display-control .display-option-input {
6344 .ideditor .display-control button {
6349 vertical-align: text-bottom;
6352 .ideditor[dir='rtl'] .display-control button {
6358 /* Background - Adjust Alignment
6359 ------------------------------------------------------- */
6360 .ideditor .background-pane .nudge-container {
6361 border: 1px solid #ccc;
6366 .ideditor .nudge-container .nudge-instructions {
6367 padding-bottom: 15px;
6370 .ideditor .nudge-container .nudge-outer-rect {
6371 background-color: #eee;
6372 border: 1px solid #ccc;
6377 justify-content: center;
6378 align-items: center;
6384 .ideditor .nudge-container .nudge-inner-rect {
6385 background-color: #fff;
6386 border: 1px solid #ccc;
6392 .ideditor .nudge-container .nudge::after {
6397 left: 0; right: 0; top: 0; bottom: 0;
6402 .ideditor .nudge-container input {
6409 .ideditor .nudge-container input.error {
6410 border: 1px solid #ff7878;
6415 .ideditor .nudge-container input:focus {
6416 background-color: transparent;
6419 .ideditor .nudge-container button {
6424 background-color: transparent;
6427 .ideditor .nudge-container button.right {
6432 .ideditor .nudge-container button.left {
6437 .ideditor .nudge-container button.top {
6442 .ideditor .nudge-container button.bottom {
6446 .ideditor .nudge-container button.nudge-reset {
6450 .ideditor .nudge-surface {
6457 background-color: transparent;
6461 .ideditor .background-pane .nudge.right::after {
6462 border-top: 5px solid transparent;
6463 border-bottom: 5px solid transparent;
6464 border-left: 5px solid #222;
6467 .ideditor .background-pane .nudge.left::after {
6468 border-top: 5px solid transparent;
6469 border-bottom: 5px solid transparent;
6470 border-right: 5px solid #222;
6473 .ideditor .background-pane .nudge.top::after {
6474 border-right: 5px solid transparent;
6475 border-left: 5px solid transparent;
6476 border-bottom: 5px solid #222;
6479 .ideditor .background-pane .nudge.bottom::after {
6480 border-right: 5px solid transparent;
6481 border-left: 5px solid transparent;
6482 border-top: 5px solid #222;
6486 /* Side Panes - Background / Map Data / Help
6487 ------------------------------------------------------- */
6488 .ideditor .map-panes {
6493 .ideditor .map-pane {
6498 padding-bottom: 60px;
6503 .ideditor .map-pane.help-wrap {
6507 .ideditor .pane-heading {
6509 flex-flow: row nowrap;
6510 justify-content: space-between;
6511 border-bottom: 1px solid #ccc;
6515 .ideditor .pane-heading h2 {
6519 .ideditor .pane-heading button {
6525 .ideditor .pane-content {
6527 padding: 10px 40px 20px 20px;
6532 .ideditor[dir='rtl'] .pane-content {
6533 padding: 10px 20px 20px 40px;
6536 .ideditor .pane-content > div {
6537 padding-bottom: 15px;
6542 ------------------------------------------------------- */
6543 .ideditor .help-wrap p {
6545 margin-bottom: 20px;
6548 .ideditor .help-wrap .left-content .body p code {
6552 vertical-align: baseline;
6553 background-color: #f6f6f6;
6554 border: solid 1px #ccc;
6556 border-bottom-color: #bbb;
6558 box-shadow: inset 0 -1px 0 #bbb;
6561 .ideditor .help-wrap .left-content .icon.pre-text {
6562 vertical-align: text-top;
6565 display: inline-block;
6568 .ideditor .help-wrap .toc {
6572 margin-bottom: 20px;
6576 .ideditor .help-wrap .toc li a,
6577 .ideditor .help-wrap .nav a {
6579 border: 1px solid #ccc;
6583 .ideditor .help-wrap .toc li a {
6587 .ideditor .help-wrap .toc li a:hover,
6588 .ideditor .help-wrap .nav a:hover {
6589 background: #ececec;
6592 .ideditor .help-wrap .toc li a.selected {
6593 background: #e8ebff;
6596 .ideditor .help-wrap .toc li:first-child a {
6597 border-radius: 4px 4px 0 0;
6600 .ideditor .help-wrap .toc li:nth-last-child(3) a {
6601 border-bottom: 1px solid #ccc;
6602 border-radius: 0 0 4px 4px
6605 .ideditor .help-wrap .toc li.shortcuts a,
6606 .ideditor .help-wrap .toc li.walkthrough a {
6609 border-bottom: 1px solid #ccc;
6613 .ideditor .help-wrap .toc li.walkthrough a {
6617 .ideditor .help-wrap .nav {
6619 padding-bottom: 30px;
6622 .ideditor .help-wrap .nav a {
6628 .ideditor .help-wrap .nav a:first-child {
6629 border-radius: 4px 0 0 4px;
6632 .ideditor .help-wrap .nav a:last-child:not(:only-child) {
6633 border-radius: 0 4px 4px 0;
6637 .ideditor .help-wrap .nav a:only-child {
6643 /* Inspector (hover styles)
6644 ------------------------------------------------------- */
6645 .ideditor .inspector-hover .entity-issues .issue-container .issue .issue-label,
6646 .ideditor .inspector-hover .form-field-input-wrap .label,
6647 .ideditor .inspector-hover .form-field-input-multicombo .chiplist,
6648 .ideditor .inspector-hover .form-field-button,
6649 .ideditor .inspector-hover .structure-extras-wrap,
6650 .ideditor .inspector-hover .comments-container .comment,
6651 .ideditor .inspector-hover button,
6652 .ideditor .inspector-hover input,
6653 .ideditor .inspector-hover textarea,
6654 .ideditor .inspector-hover label {
6655 background: #ececec;
6657 .ideditor .inspector-hover .preset-list-button,
6658 .ideditor .inspector-hover .tag-row input {
6659 background: #f6f6f6;
6662 .ideditor .inspector-hover a,
6663 .ideditor .inspector-hover .form-field-input-multicombo .chip,
6664 .ideditor .inspector-hover .form-field-input-check span,
6665 .ideditor .inspector-hover .entity-issues .issue .icon {
6669 .ideditor .inspector-hover .form-field-input-multicombo .chip {
6671 border: 1px solid #ccc;
6675 .ideditor .inspector-hover div {
6680 /* hide and remove from layout */
6681 .ideditor .inspector-hidden,
6682 .ideditor .inspector-hover .preset-list-button-wrap .tag-reference-button,
6683 .ideditor .inspector-hover label input[type="checkbox"],
6684 .ideditor .inspector-hover label input[type="radio"],
6685 .ideditor .inspector-hover .form-field-input-multicombo .input-wrap,
6686 .ideditor .inspector-hover .form-field-input-radio label,
6687 .ideditor .inspector-hover .form-field-input-radio label span,
6688 .ideditor .inspector-hover .form-field-input-radio label.remove .icon,
6689 .ideditor .inspector-hover .inspector-inner .add-row,
6690 .ideditor .inspector-hover .entity-issues .issue-container .issue-fix-list,
6691 .ideditor .inspector-hover .entity-issues .issue-container .issue-info-button {
6695 /* hide but preserve in layout */
6696 .ideditor .inspector-hover .combobox-caret,
6697 .ideditor .inspector-hover .header button,
6698 .ideditor .inspector-hover .quick-links,
6699 .ideditor .inspector-hover .form-field-input-multicombo .chip .remove,
6700 .ideditor .inspector-hover .hide-toggle:before,
6701 .ideditor .inspector-hover .more-fields,
6702 .ideditor .inspector-hover .field-label button,
6703 .ideditor .inspector-hover .tag-row button,
6704 .ideditor .inspector-hover .footer * {
6708 /* Unstyle the active entity issue on hover */
6709 .ideditor .inspector-hover .entity-issues .issue-container.active {
6713 .ideditor .inspector-hover .entity-issues .issue-container * {
6714 border-color: #ccc !important;
6716 .ideditor .inspector-hover .entity-issues .issue-container.active .issue-label {
6719 .ideditor .inspector-hover .entity-issues .issue-container.active .issue-label .issue-text {
6720 font-weight: normal;
6724 /* Styles for raw tag inspector on hover */
6725 .ideditor .inspector-hover .tag-row .key-wrap,
6726 .ideditor .inspector-hover .tag-row .value-wrap {
6730 .ideditor .inspector-hover .tag-row:first-child input.value {
6731 border-top-right-radius: 4px;
6733 .ideditor[dir='rtl'] .inspector-hover .tag-row:first-child input.value {
6734 border-top-right-radius: 0;
6735 border-top-left-radius: 4px;
6738 .ideditor .inspector-hover .tag-row:last-child input.value {
6739 border-bottom-right-radius: 4px;
6741 .ideditor[dir='rtl'] .inspector-hover .tag-row:last-child input.value {
6742 border-bottom-right-radius: 0;
6743 border-bottom-left-radius: 4px;
6746 .ideditor .inspector-hover .tag-row:last-child input.key {
6747 border-bottom-left-radius: 4px;
6749 .ideditor[dir='rtl'] .inspector-hover .tag-row:last-child input.key {
6750 border-bottom-left-radius: 0;
6751 border-bottom-right-radius: 4px;
6754 .ideditor .inspector-hover .more-fields {
6756 margin-bottom: -10px;
6759 /* Unstyle button fields */
6760 .ideditor .inspector-hover .form-field-input-radio label.active,
6761 .ideditor .inspector-hover .entity-editor-pane a.hide-toggle {
6763 background-color: transparent;
6768 .ideditor .inspector-hover .form-field-input-radio button.active {
6772 /* Show placeholder on hover for radio buttons */
6773 .ideditor .inspector-hover .form-field-input-radio {
6774 border: 1px solid #ccc;
6776 border-radius: 0 0 4px 4px;
6778 .ideditor .inspector-hover .form-field-input-radio .placeholder {
6786 .ideditor .inspector-hover .form-field-input-radio .structure-extras-wrap {
6791 /* Raster Background Tiles
6792 ------------------------------------------------------- */
6793 .ideditor img.tile {
6795 transform-origin: 0 0;
6796 -ms-transform-origin: 0 0;
6797 -webkit-transform-origin: 0 0;
6798 -moz-transform-origin: 0 0;
6799 -o-transform-origin: 0 0;
6801 -moz-user-select: none;
6802 -webkit-user-select: none;
6803 -ms-user-select: none;
6808 -webkit-transition: opacity 200ms linear;
6809 -moz-transition: opacity 200ms linear;
6810 transition: opacity 200ms linear;
6813 .ideditor img.tile-loaded {
6817 .ideditor img.tile-removing {
6821 .ideditor .tile-label-debug {
6823 background: rgba(0, 0, 0, 0.7);
6833 transform-origin: 0 0;
6834 -ms-transform-origin: 0 0;
6835 -webkit-transform-origin: 0 0;
6836 -moz-transform-origin: 0 0;
6837 -o-transform-origin: 0 0;
6839 -moz-user-select: none;
6840 -webkit-user-select: none;
6841 -ms-user-select: none;
6845 .ideditor img.tile-debug {
6846 outline: 1px solid red;
6851 ------------------------------------------------------- */
6857 -moz-user-select: none;
6858 -webkit-user-select: none;
6859 -ms-user-select: none;
6863 .ideditor #supersurface {
6864 transform-origin: 0 0;
6865 -ms-transform-origin: 0 0;
6866 -webkit-transform-origin: 0 0;
6867 -moz-transform-origin: 0 0;
6868 -o-transform-origin: 0 0;
6871 .ideditor #supersurface, .ideditor .layer {
6881 ------------------------------------------------------- */
6882 .ideditor .map-in-map {
6890 border: #aaa 1px solid;
6891 box-shadow: 0 0 2em black;
6893 .ideditor[dir='ltr'] .map-in-map {
6896 .ideditor[dir='rtl'] .map-in-map {
6900 .ideditor .map-in-map-tiles {
6901 transform-origin: 0 0;
6902 -ms-transform-origin: 0 0;
6903 -webkit-transform-origin: 0 0;
6904 -moz-transform-origin: 0 0;
6905 -o-transform-origin: 0 0;
6907 -moz-user-select: none;
6908 -webkit-user-select: none;
6909 -ms-user-select: none;
6913 .ideditor .map-in-map-viewport,
6914 .ideditor .map-in-map-data {
6922 .ideditor .map-in-map-viewport {
6926 .ideditor .map-in-map-data {
6931 .ideditor .map-in-map-bbox {
6933 stroke: rgba(255, 255, 0, 0.75);
6935 shape-rendering: crispEdges;
6938 .ideditor .map-in-map-bbox.thick {
6944 ------------------------------------------------------- */
6946 stroke: currentColor;
6950 .ideditor .map-in-map-data .debug {
6954 .ideditor .nocolor { color: rgba(0, 0, 0, 0); }
6955 .ideditor .red { color: rgba(255, 0, 0, 0.75); }
6956 .ideditor .green { color: rgba(0, 255, 0, 0.75); }
6957 .ideditor .blue { color: rgba(176, 176, 255, 0.75); }
6958 .ideditor .yellow { color: rgba(255, 255, 0, 0.75); }
6959 .ideditor .cyan { color: rgba(0, 255, 255, 0.75); }
6960 .ideditor .magenta { color: rgba(255, 0, 255, 0.75); }
6961 .ideditor .orange { color: rgba(255, 153, 0, 0.75); }
6962 .ideditor .pink { color: rgba(255, 0, 153, 0.75); }
6963 .ideditor .purple { color: rgba(153, 0, 255, 0.75); }
6965 .ideditor .debug-legend {
6971 pointer-events: none;
6974 .ideditor .debug-legend-item {
6977 .ideditor .debug-legend-item:before {
6983 .ideditor .over-map {
6989 pointer-events: none;
6991 flex-direction: row-reverse;
6992 align-items: flex-end;
6994 .ideditor .over-map > * {
6995 pointer-events: auto;
6998 /* Information Panels
6999 ------------------------------------------------------- */
7000 .ideditor .info-panels {
7002 flex-flow: row-reverse wrap-reverse;
7005 -ms-user-select: element;
7006 pointer-events: none;
7009 .ideditor .panel-container h1,
7010 .ideditor .panel-container h2,
7011 .ideditor .panel-container h3,
7012 .ideditor .panel-container h4,
7013 .ideditor .panel-container h5 {
7014 display: inline-block;
7018 .ideditor .panel-container h1,
7019 .ideditor .panel-container h2,
7020 .ideditor .panel-container h3 {
7024 .ideditor .panel-container {
7026 margin: 0 2px 2px 0;
7028 border: 1px solid rgba(0, 0, 0, 0.75);
7029 padding-bottom: 10px;
7031 pointer-events: auto;
7034 .ideditor .panel-container .panel-title {
7035 border-radius: 4px 4px 0 0;
7038 .ideditor .panel-title {
7042 .ideditor .panel-title button.close {
7048 .ideditor[dir='rtl'] .panel-title button.close {
7052 .ideditor .panel-title button.close:hover {
7055 .ideditor .panel-title button.close .icon {
7060 .ideditor .panel-content {
7065 .ideditor .panel-content li span {
7066 display: inline-block;
7067 white-space: nowrap;
7071 .ideditor .panel-content .button {
7072 display: inline-block;
7073 background: #7092ff;
7080 .ideditor[dir='rtl'] .panel-content .button {
7085 .ideditor .panel-content-history .links a {
7088 .ideditor[dir='rtl'] .panel-content-history .links a {
7092 .ideditor .panel-content-history h4 {
7095 .ideditor .panel-content-location .location-info {
7100 /* About Section, Attribution, Footer
7101 ------------------------------------------------------- */
7108 pointer-events: none;
7110 flex-direction: column;
7111 -ms-user-select: element;
7120 .ideditor #attrib * { pointer-events: all; }
7122 .ideditor .base-layer-attribution,
7123 .ideditor .overlay-layer-attribution {
7129 .ideditor .base-layer-attribution {
7133 .ideditor .overlay-layer-attribution {
7137 .ideditor .overlay-layer-attribution .attribution:not(:last-child):after {
7141 .ideditor .attribution a,
7142 .ideditor .attribution a:visited {
7146 .ideditor .attribution a:hover {
7150 .ideditor .attribution .source-image {
7152 vertical-align: middle;
7156 .ideditor .attribution span {
7161 pointer-events: all;
7167 /* Footer - Flash messages
7168 ------------------------------------------------------- */
7169 .ideditor #flash-wrap {
7172 flex-flow: row nowrap;
7173 justify-content: space-between;
7180 .ideditor .flash-content {
7183 flex-flow: row nowrap;
7184 align-items: center;
7189 .ideditor .flash-icon {
7196 .ideditor .flash-icon circle {
7199 .ideditor .flash-icon.disabled circle {
7201 fill: rgba(255,255,255,0.7);
7204 .ideditor .flash-icon use {
7207 .ideditor .flash-icon.disabled use {
7208 color: rgba(32,32,32,0.7);
7211 .ideditor .flash-icon.operation use {
7215 .ideditor .flash-icon.operation.disabled use {
7216 fill: rgba(32,32,32,0.7);
7217 color: rgba(40,40,40,0.7);
7220 .ideditor .flash-text {
7224 .ideditor #footer-wrap {
7227 flex-flow: row nowrap;
7228 justify-content: space-between;
7235 .ideditor .footer-show {
7237 transition: bottom 75ms linear;
7238 -moz-transition: bottom 75ms linear;
7239 -webkit-transition: bottom 75ms linear;
7242 .ideditor .footer-hide {
7244 transition: bottom 75ms linear;
7245 -moz-transition: bottom 75ms linear;
7246 -webkit-transition: bottom 75ms linear;
7250 /* Footer - Scale bar, About, Source Switcher
7251 ------------------------------------------------------- */
7252 .ideditor #scale-block {
7253 vertical-align: bottom;
7257 -moz-user-select: none;
7258 -webkit-user-select: none;
7259 -ms-user-select: none;
7263 .ideditor #info-block {
7272 .ideditor[dir='rtl'] #scale {
7273 transform: scaleX(-1);
7276 .ideditor #scale:hover {
7280 .ideditor #scale text {
7281 font: 12px sans-serif;
7286 .ideditor[dir='rtl'] #scale text {
7287 transform: scaleX(-1);
7290 .ideditor #scale path {
7294 shape-rendering: crispEdges;
7297 .ideditor #about-list {
7303 .ideditor[dir='rtl'] #about-list {
7310 .ideditor #about-list li {
7312 border-left: 1px solid rgba(255,255,255,.5);
7313 padding: 5px 0 5px 5px;
7316 .ideditor[dir='rtl'] #about-list li {
7319 border-right: 1px solid rgba(255,255,255,.5);
7322 padding: 5px 5px 5px 0;
7324 .ideditor #about-list li:empty {
7328 .ideditor #about-list li:last-child {
7333 .ideditor[dir='rtl'] #about-list li:last-child {
7337 .ideditor #about-list a.chip {
7338 padding: 2px 4px 3px 4px;
7342 .ideditor #about-list a.chip .icon {
7347 .ideditor[dir='ltr'] #about-list a.chip .icon,
7348 .ideditor[dir='ltr'] #about-list a.chip span {
7351 .ideditor[dir='rtl'] #about-list a.chip .icon,
7352 .ideditor[dir='rtl'] #about-list a.chip span {
7356 .ideditor .source-switch a.chip.live {
7357 background: #d32232;
7361 .ideditor .feature-warning a.chip {
7362 background: #1e90ff;
7365 .ideditor .issues-info a.chip.resolved-count {
7366 background: #15911E;
7368 .ideditor .issues-info a.chip.warnings-count {
7369 background: #DF8500;
7371 .ideditor[dir='ltr'] .issues-info a.chip:not(:last-child) {
7374 .ideditor[dir='rtl'] .issues-info a.chip:not(:last-child) {
7378 .ideditor .user-list a:not(:last-child):after {
7382 .ideditor .api-status {
7388 .ideditor[dir='rtl'] .api-status {
7392 .ideditor .api-status.offline,
7393 .ideditor .api-status.readonly,
7394 .ideditor .api-status.error {
7398 .ideditor .api-status a {
7399 text-decoration: underline;
7401 pointer-events: all;
7403 .ideditor .api-status a:hover {
7407 /* Notification Badges
7408 ------------------------------------------------------- */
7409 /* For an icon (e.g. new version) */
7411 display: inline-block;
7412 background: #d32232;
7415 border-radius: 11px;
7418 .ideditor[dir='rtl'] .badge {
7422 .ideditor .badge a {
7425 .ideditor[dir='rtl'] .badge a {
7429 .ideditor .badge .icon {
7430 vertical-align: baseline;
7436 /* For text (e.g. upcoming events) */
7437 .ideditor .badge-text {
7438 display: inline-block;
7449 .ideditor[dir='rtl'] .badge-text {
7456 ------------------------------------------------------- */
7459 display: inline-block;
7472 .ideditor .modal .loader {
7473 margin-bottom: 10px;
7475 .ideditor .modal .description {
7488 .ideditor .shaded:before {
7490 background: rgba(0,0,0,0.5);
7492 left: 0px; right: 0px; top: 0px; bottom: 0px;
7495 .ideditor .modal-section {
7497 border-bottom: 1px solid #ccc;
7499 .ideditor .modal-section p:not(:last-of-type) {
7500 padding-bottom: 20px;
7502 .ideditor .modal-section.header h3 {
7505 .ideditor .modal-section.buttons {
7509 .ideditor .modal-section.buttons button {
7513 .ideditor .modal-section.buttons .action {
7514 display: inline-block;
7517 vertical-align: middle;
7520 .ideditor .save-section .buttons {
7523 justify-content: space-around;
7524 margin-bottom: 30px;
7527 .ideditor .save-section .buttons .action,
7528 .ideditor .save-section .buttons .secondary-action {
7532 vertical-align: middle;
7535 .ideditor .loading-modal {
7538 .ideditor .modal-actions {
7541 .ideditor .modal-actions button {
7542 font-weight: normal;
7544 border-bottom: 1px solid #ccc;
7550 .ideditor .modal-actions button:hover {
7551 background-color: #ececec;
7554 .ideditor .logo-small {
7567 .ideditor .modal-actions > :first-child {
7568 border-right: 1px solid #ccc;
7571 .ideditor .modal-section:last-child {
7576 ------------------------------------------------------- */
7577 .ideditor .modal-actions .logo-restore {
7580 .ideditor .modal-actions .logo-reset {
7584 /* Success Screen / Community Index
7585 ------------------------------------------------------- */
7586 .ideditor .save-success.body {
7591 .ideditor .save-success .link-out {
7593 white-space: nowrap;
7596 .ideditor .save-summary,
7597 .ideditor .save-communityLinks {
7598 padding: 0px 20px 15px 20px;
7601 .ideditor .save-communityLinks {
7602 border-top: 1px solid #ccc;
7605 .ideditor .save-success table,
7606 .ideditor .save-success p {
7609 .ideditor .save-success h3 {
7615 .ideditor .save-success td {
7616 vertical-align: top;
7618 .ideditor .save-success td.cell-icon {
7621 .ideditor .save-success td.cell-detail {
7624 .ideditor .save-success td.community-detail {
7625 padding-bottom: 15px;
7628 .ideditor .summary-view-on-osm,
7629 .ideditor .community-name {
7633 .ideditor .community-languages {
7637 .ideditor .community-languages:only-child {
7641 .ideditor .community-detail a.hide-toggle,
7642 .ideditor .community-detail a:visited.hide-toggle {
7644 font-weight: normal;
7647 .ideditor .community-detail .hide-toggle svg.icon.pre-text {
7652 .ideditor .community-events {
7656 .ideditor .community-event,
7657 .ideditor .community-more {
7658 background-color: #efefef;
7664 .ideditor .community-event-name {
7668 .ideditor .community-event-when {
7672 .ideditor .community-missing {
7679 ------------------------------------------------------- */
7680 .ideditor .modal-actions .logo-walkthrough,
7681 .ideditor .modal-actions .logo-features {
7687 ------------------------------------------------------- */
7688 .ideditor .modal-shortcuts {
7693 .ideditor .modal-shortcuts .modal-section:last-child {
7698 .ideditor .modal-shortcuts .tabs-bar {
7700 padding-bottom: 5px;
7705 .ideditor .modal-shortcuts .tab {
7706 display: inline-block;
7712 .ideditor .modal-shortcuts .tab.active {
7714 border-bottom: 2px solid;
7716 .ideditor .modal-shortcuts .tab:hover {
7718 background-color: #efefef;
7721 .ideditor .modal-shortcuts .shortcut-tab {
7723 flex-flow: row wrap;
7724 justify-content: space-around;
7727 .ideditor .modal-shortcuts .shortcut-column {
7731 .ideditor .modal-shortcuts .shortcut-tab-tools .shortcut-column {
7736 .ideditor .modal-shortcuts td {
7737 padding-bottom: 5px;
7740 .ideditor .modal-shortcuts .shortcut-section {
7741 padding: 20px 0 10px 0;
7744 .ideditor .modal-shortcuts .shortcut-keys {
7748 white-space: nowrap;
7750 .ideditor[dir='rtl'] .modal-shortcuts .shortcut-keys {
7754 .ideditor .modal-shortcuts .shortcut-keys kbd {
7758 .ideditor svg.mouseclick use.left {
7759 fill: rgba(112, 146, 255, 1);
7760 color: rgba(112, 146, 255, 0);
7762 .ideditor svg.mouseclick use.right {
7763 fill: rgba(112, 146, 255, 0);
7764 color: rgba(112, 146, 255, 1);
7767 .ideditor .modal-shortcuts .shortcut-keys .gesture {
7774 ------------------------------------------------------- */
7775 .ideditor .settings-modal textarea {
7780 .ideditor .settings-custom-background .instructions-template {
7781 margin-bottom: 20px;
7784 .ideditor .settings-custom-data .instructions-url {
7785 margin-bottom: 10px;
7787 .ideditor .settings-custom-data .field-file,
7788 .ideditor .settings-custom-data .instructions-template {
7789 margin-bottom: 20px;
7794 ------------------------------------------------------- */
7795 .ideditor.mode-save a.user-info {
7796 display: inline-block;
7799 .ideditor.mode-save .commit-form {
7803 .ideditor.mode-save .user-info img {
7807 .ideditor.mode-save h3 small.count {
7815 border-radius: 24px;
7817 background: #7092ff;
7821 .ideditor .note-save .field-warning,
7822 .ideditor.mode-save .field-warning {
7824 border: 1px solid #ccc;
7829 .ideditor .note-save .field-warning:empty,
7830 .ideditor.mode-save .field-warning:empty {
7834 .ideditor.mode-save .field-warning,
7835 .ideditor.mode-save .changeset-info,
7836 .ideditor.mode-save .request-review,
7837 .ideditor.mode-save .commit-info {
7838 margin-bottom: 10px;
7841 .ideditor.mode-save .request-review label {
7845 .ideditor.mode-save .changeset-list {
7846 border: 1px solid #ccc;
7849 margin-bottom: 10px;
7852 .ideditor.mode-save .warning-section .changeset-list button {
7853 border-left: 1px solid #ccc;
7856 .ideditor.mode-save .changeset-list li {
7858 border-top: 1px solid #ccc;
7863 .ideditor.mode-save .changeset-list li:hover {
7864 background-color: #ececec;
7867 .ideditor.mode-save .changeset-list .alert {
7871 .ideditor .changeset-list li span.count {
7876 .ideditor.mode-save .commit-section .changeset-list button {
7877 border-left: 1px solid #ccc;
7880 .ideditor .changeset-list li span.count:before { content: '('; }
7882 .ideditor .changeset-list li span.count:after { content: ')'; }
7884 .ideditor .changeset-list li:first-child { border-top: 0;}
7887 /* Conflict resolution
7888 ------------------------------------------------------- */
7889 .ideditor .conflicts-help {
7891 background-color: #ffffbb;
7892 border-bottom: 1px solid #ccc;
7895 .ideditor .conflicts-buttons {
7899 .ideditor.mode-save button.conflicts-button {
7903 .ideditor .conflict-container {
7904 border-bottom: 1px solid #ccc;
7907 .ideditor .conflict-description {
7912 .ideditor .conflicts-done {
7913 padding: 20px 20px 0 20px;
7916 .ideditor .conflict-detail-container {
7920 .ideditor .conflict-count {
7924 .ideditor .conflict-choices {
7928 .ideditor .conflict-nav-buttons {
7929 padding: 10px 0 20px 0;
7932 .ideditor .conflict-nav-button {
7937 /* Notices (Zoom in to Edit)
7938 ------------------------------------------------------- */
7947 .ideditor .notice .zoom-to {
7955 .ideditor .notice .zoom-to:hover,
7956 .ideditor .notice .zoom-to:focus {
7957 background: rgba(0,0,0,0.6);
7960 .ideditor .notice .zoom-to .icon {
7963 vertical-align: middle;
7966 .ideditor[dir='rtl'] .notice .zoom-to .icon {
7973 ------------------------------------------------------- */
7974 .ideditor .popover {
7978 .ideditor .tooltip {
7981 white-space: initial;
7983 .ideditor .tooltip:not(.curtain-tooltip) {
7984 pointer-events: none;
7986 .ideditor .popover.in {
7991 .ideditor .tooltip.in {
7994 .ideditor .popover.top {
7997 .ideditor .popover.right {
8000 .ideditor .popover.bottom {
8003 .ideditor .popover.left {
8006 .ideditor .popover.arrowed.top {
8009 .ideditor .popover.arrowed.right {
8012 .ideditor .popover.arrowed.bottom {
8015 .ideditor .popover.arrowed.left {
8018 .ideditor .bar-button .tooltip.arrowed.bottom {
8021 .ideditor .tooltip.top {
8024 .ideditor .tooltip.right {
8027 .ideditor .tooltip.bottom {
8030 .ideditor .tooltip.left {
8034 .ideditor .popover-inner {
8035 border-radius: inherit;
8038 .ideditor .tooltip .popover-inner {
8043 font-weight: normal;
8044 background-color: #fff;
8050 pointer-events: none;
8054 background: transparent;
8056 .ideditor .tail::after {
8061 border-color: transparent;
8062 border-style: solid;
8066 border-left-color: #fff;
8067 border-width: 5px 0 5px 5px;
8070 .ideditor .tail div {
8081 .ideditor .left.tail::after {
8086 border-color: transparent;
8087 border-style: solid;
8091 border-right-color: #fff;
8092 border-width: 5px 5px 5px 0;
8094 .ideditor .popover-arrow {
8098 border-color: transparent;
8099 border-style: solid;
8101 .ideditor .popover.top .popover-arrow {
8105 border-top-color: #fff;
8106 border-width: 5px 5px 0;
8108 .ideditor .popover.right .popover-arrow {
8112 border-right-color: #fff;
8113 border-width: 5px 5px 5px 0;
8115 .ideditor .popover.left .popover-arrow {
8119 border-left-color: #fff;
8120 border-width: 5px 0 5px 5px;
8122 .ideditor .popover.bottom .popover-arrow {
8126 border-bottom-color: #fff;
8127 border-width: 0 5px 5px;
8129 .ideditor .popover:not(.arrowed) .popover-arrow {
8133 .ideditor .tooltip-heading {
8135 background: #f6f6f6;
8137 margin: -10px -10px 10px -10px;
8138 border-radius: 3px 3px 0 0;
8142 .ideditor .keyhint-wrap {
8143 background: #f6f6f6;
8145 margin: 10px -10px -10px -10px;
8146 border-radius: 0 0 3px 3px;
8148 .ideditor .popover-inner .shortcut {
8153 .ideditor[dir='rtl'] .popover-inner .shortcut {
8158 /* dark tooltips for sidebar / panels */
8159 .ideditor .tooltip.dark.top .popover-arrow,
8160 .ideditor .map-pane .tooltip.top .popover-arrow,
8161 .ideditor #sidebar .tooltip.top .popover-arrow {
8162 border-top-color: #000;
8164 .ideditor .tooltip.dark.bottom .popover-arrow,
8165 .ideditor .map-pane .tooltip.bottom .popover-arrow,
8166 .ideditor #sidebar .tooltip.bottom .popover-arrow {
8167 border-bottom-color: #000;
8169 .ideditor .tooltip.dark.left .popover-arrow,
8170 .ideditor .map-pane .tooltip.left .popover-arrow,
8171 .ideditor #sidebar .tooltip.left .popover-arrow {
8172 border-left-color: #000;
8174 .ideditor .tooltip.dark.right .popover-arrow,
8175 .ideditor .map-pane .tooltip.right .popover-arrow,
8176 .ideditor #sidebar .tooltip.right .popover-arrow {
8177 border-right-color: #000;
8179 .ideditor .tooltip.dark .popover-inner,
8180 .ideditor .tooltip.dark .tooltip-heading,
8181 .ideditor .tooltip.dark .keyhint-wrap,
8182 .ideditor .map-pane .popover-inner,
8183 .ideditor .map-pane .tooltip-heading,
8184 .ideditor .map-pane .keyhint-wrap,
8185 .ideditor #sidebar .popover-inner,
8186 .ideditor #sidebar .tooltip-heading,
8187 .ideditor #sidebar .keyhint-wrap {
8191 .ideditor .tooltip.dark kbd,
8192 .ideditor .map-pane .tooltip kbd,
8193 .ideditor #sidebar .tooltip kbd {
8194 background-color: #666;
8195 border: solid 1px #444;
8196 border-bottom-color: #333;
8197 box-shadow: inset 0 -1px 0 #333;
8201 /* Exceptions for tooltip layouts */
8203 /* commit warning tooltips need to be closer */
8204 .ideditor .warning-section .tooltip.top {
8208 .ideditor li:first-of-type .badge .tooltip,
8209 .ideditor li.hide + li.version .badge .tooltip {
8210 left: auto !important;
8211 right: 5px !important;
8213 .ideditor[dir='rtl'] li:first-of-type .badge .tooltip,
8214 .ideditor[dir='rtl'] li.hide + li.version .badge .tooltip {
8215 left: 5px !important;
8216 right: auto !important;
8218 .ideditor li:first-of-type .badge .tooltip .popover-arrow,
8219 .ideditor li.hide + li.version .badge .tooltip .popover-arrow {
8220 right: 15px !important;
8221 left: auto !important;
8223 .ideditor[dir='rtl'] li:first-of-type .badge .tooltip .popover-arrow,
8224 .ideditor[dir='rtl'] li.hide + li.version .badge .tooltip .popover-arrow {
8225 left: 15px !important;
8226 right: auto !important;
8230 /* Contextual Radial Menu (deprecated)
8231 ------------------------------------------------------- */
8232 .ideditor .radial-menu-tooltip {
8239 .ideditor .radial-menu-background {
8242 stroke-opacity: 0.5;
8245 .ideditor .radial-menu-item circle {
8249 .ideditor .radial-menu-item circle:active,
8250 .ideditor .radial-menu-item circle:hover {
8254 .ideditor .radial-menu-item.disabled circle {
8256 fill: rgba(255,255,255,.5);
8259 .ideditor .radial-menu-item use {
8264 .ideditor .radial-menu-item.disabled use {
8265 fill: rgba(32,32,32,.5);
8266 color: rgba(40,40,40,.5);
8270 /* Contextual Edit Menu
8271 ------------------------------------------------------- */
8272 .ideditor .edit-menu-tooltip {
8276 .ideditor .edit-menu-background {
8280 .ideditor .edit-menu-item rect {
8285 .ideditor .edit-menu-item rect:active,
8286 .ideditor .edit-menu-item rect:hover {
8290 .ideditor .edit-menu-item.disabled rect {
8291 cursor: not-allowed;
8293 .ideditor .edit-menu-item.disabled rect:hover {
8294 cursor: not-allowed;
8298 .ideditor .edit-menu-item use {
8301 pointer-events: none;
8303 .ideditor .edit-menu-item.disabled use {
8304 fill: rgba(32,32,32,.2);
8305 color: rgba(40,40,40,.2);
8310 ------------------------------------------------------- */
8311 .ideditor .lasso-path {
8316 stroke-dasharray: 5, 5;
8321 ----------------------------------------------------- */
8322 .ideditor ::-webkit-scrollbar {
8327 border-left: 1px solid #DDD;
8330 .ideditor ::-webkit-scrollbar-track {
8331 background-clip: padding-box;
8332 border: solid transparent;
8336 .ideditor ::-webkit-scrollbar-thumb {
8337 background-color: rgba(0,0,0,.2);
8338 background-clip: padding-box;
8339 border: solid transparent;
8340 border-width: 3px 3px 3px 4px;
8343 .ideditor ::-webkit-scrollbar-track:hover,
8344 .ideditor ::-webkit-scrollbar-track:active {
8345 background-color: rgba(0,0,0,.05);
8349 /* Intro walkthrough
8350 ----------------------------------------------------- */
8351 .ideditor .curtain-darkness {
8352 pointer-events: all;
8358 .ideditor .intro-nav-wrap {
8360 flex-direction: row;
8369 .ideditor .intro-nav-wrap .intro-nav-wrap-logo {
8375 vertical-align: middle;
8378 .ideditor .intro-nav-wrap .joined {
8381 flex-direction: row;
8384 .ideditor .intro-nav-wrap button.chapter {
8389 .ideditor .intro-nav-wrap button.chapter.next {
8390 animation-duration: 1s;
8391 animation-name: pulse;
8392 animation-iteration-count: infinite;
8393 animation-direction: alternate;
8396 from { background: #7092ff; }
8397 to { background: #c6d4ff; }
8400 .ideditor .intro-nav-wrap button.chapter.finished {
8401 background: #8cd05f;
8404 .ideditor .intro-nav-wrap button.chapter .status {
8408 .ideditor .intro-nav-wrap button.chapter.finished .status {
8409 display: inline-block;
8412 .ideditor .curtain-tooltip.tooltip.in {
8415 .ideditor .curtain-tooltip.tooltip {
8418 .ideditor[dir='rtl'] .curtain-tooltip.tooltip {
8422 .ideditor .curtain-tooltip .popover-inner {
8428 .ideditor .curtain-tooltip .popover-inner .button-section,
8429 .ideditor .curtain-tooltip .popover-inner .instruction {
8432 border-top: 1px solid #ccc;
8435 margin-right: -20px;
8436 padding: 10px 20px 0 20px;
8439 .ideditor .curtain-tooltip .popover-inner .button-section button {
8443 .ideditor .curtain-tooltip .popover-inner .instruction:only-child {
8449 .ideditor .curtain-tooltip .popover-inner .icon.pre-text {
8450 vertical-align: text-top;
8453 display: inline-block;
8456 .ideditor .curtain-tooltip.intro-points-describe,
8457 .ideditor .curtain-tooltip.intro-lines-name_road {
8458 top: 133px !important;
8461 .ideditor .tooltip-illustration {
8467 .ideditor[dir='rtl'] .tooltip-illustration {
8469 margin-right: -20px;
8472 .ideditor .curtain-tooltip.intro-mouse {
8473 -moz-user-select: none;
8474 -webkit-user-select: none;
8475 -ms-user-select: none;
8479 .ideditor .curtain-tooltip.intro-mouse .counter {
8490 .ideditor .curtain-tooltip.intro-mouse .tooltip-illustration use {
8491 fill: rgba(112, 146, 255, 0);
8492 color: rgba(112, 146, 255, 0);
8494 .ideditor .curtain-tooltip.intro-mouse.leftclick .tooltip-illustration use {
8495 fill: rgba(112, 146, 255, 1);
8497 .ideditor .curtain-tooltip.intro-mouse.rightclick .tooltip-illustration use {
8498 color: rgba(112, 146, 255, 1);
8501 .ideditor .huge-modal-button {
8507 .ideditor .huge-modal-button .illustration {
8514 .ideditor .list-item-photos.list-item-mapillary-map-features .request-data-link {
8518 .ideditor[dir='rtl'] .list-item-photos.list-item-mapillary-map-features .request-data-link {