1 /* http://meyerweb.com/eric/tools/css/reset/
3 License: none (public domain)
6 html, body, div, span, applet, object, iframe,
7 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8 a, abbr, acronym, address, big, cite, code,
9 del, dfn, em, img, ins, kbd, q, s, samp,
10 small, strike, strong, sub, sup, tt, var,
12 dl, dt, dd, ol, ul, li,
13 fieldset, form, label, legend,
14 table, caption, tbody, tfoot, thead, tr, th, td,
15 article, aside, canvas, details, embed,
16 figure, figcaption, footer, header, hgroup,
17 menu, nav, output, ruby, section, summary,
18 time, mark, audio, video {
24 vertical-align: baseline;
26 /* HTML5 display-role reset for older browsers */
27 article, aside, details, figcaption, figure,
28 footer, header, hgroup, menu, nav, section {
40 blockquote:before, blockquote:after,
46 border-collapse: collapse;
49 a { text-decoration: none;}
51 * 1. Corrects font family not being inherited in all browsers.
52 * 2. Corrects font size not being inherited in all browsers.
53 * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
60 font-family: inherit; /* 1 */
61 font-size: 100%; /* 2 */
67 * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
76 /* Hide default number spinner controls */
77 input[type="number"]::-webkit-inner-spin-button,
78 input[type="number"]::-webkit-outer-spin-button {
83 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
84 * and `video` controls.
85 * 2. Corrects inability to style clickable `input` types in iOS.
86 * 3. Improves usability and consistency of cursor style between image-type
91 html input[type="button"], /* 1 */
93 input[type="submit"] {
94 -webkit-appearance: button; /* 2 */
95 cursor: pointer; /* 3 */
99 * Re-set default cursor for disabled elements.
108 * 1. Addresses box sizing set to `content-box` in IE 8/9.
109 * 2. Removes excess padding in IE 8/9.
112 input[type="checkbox"],
113 input[type="radio"] {
114 box-sizing: border-box; /* 1 */
119 * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
120 * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
121 * (include `-moz` to future-proof).
124 input[type="search"] {
125 -webkit-appearance: textfield; /* 1 */
126 -moz-box-sizing: border-box;
127 -webkit-box-sizing: border-box; /* 2 */
128 box-sizing: border-box;
132 * Removes inner padding and search cancel button in Safari 5 and Chrome
136 input[type="search"]::-webkit-search-cancel-button,
137 input[type="search"]::-webkit-search-decoration {
138 -webkit-appearance: none;
142 * Removes inner padding and border in Firefox 4+.
145 button::-moz-focus-inner,
146 input::-moz-focus-inner {
152 ** Markup free clearing
153 ** Details: http://www.positioniseverything.net/easyclearing.html
157 content: " "; /* 1 */
158 display: table; /* 2 */
167 transform-origin:0 0;
168 -ms-transform-origin:0 0;
169 -webkit-transform-origin:0 0;
170 -moz-transform-origin:0 0;
171 -o-transform-origin:0 0;
175 -webkit-transition: opacity 200ms linear;
176 transition: opacity 200ms linear;
177 -moz-transition: opacity 200ms linear;
187 use { pointer-events: none; }
190 .layer path:not(.oneway) { fill: none; } /* IE needs :not(.oneway) */
192 /* the above fill: none rule affects paths in <use> shadow dom only in Firefox */
193 .layer use.icon path { fill: #333; } /* FF svg Maki icons */
194 .layer .turn use path { fill: #000; } /* FF turn restriction icons */
195 #turn-only-shape2, #turn-only-u-shape2 { fill: #7092FF; } /* FF turn-only, turn-only-u */
196 #turn-no-shape2, #turn-no-u-shape2 { fill: #E06D5F; } /* FF turn-no, turn-no-u */
197 #turn-yes-shape2, #turn-yes-u-shape2 { fill: #8CD05F; } /* FF turn-yes, turn-yes-u */
206 pointer-events: stroke;
225 g.point.hover:not(.selected) .shadow {
229 g.point.selected .shadow {
233 g.point.active, g.point.active * {
234 pointer-events: none;
237 /* vertices and midpoints */
249 g.vertex.shared .stroke {
260 g.midpoint.tag-highway-corridor .fill,
261 g.midpoint.tag-highway-pedestrian .fill,
262 g.midpoint.tag-highway-steps .fill,
263 g.midpoint.tag-highway-path .fill,
264 g.midpoint.tag-highway-footway .fill,
265 g.midpoint.tag-highway-cycleway .fill,
266 g.midpoint.tag-highway-bridleway .fill {
279 g.vertex.vertex-hover {
283 .mode-draw-area g.vertex.vertex-hover,
284 .mode-draw-line g.vertex.vertex-hover,
285 .mode-add-area g.vertex.vertex-hover,
286 .mode-add-line g.vertex.vertex-hover,
287 .mode-add-point g.vertex.vertex-hover,
288 .mode-drag-node g.vertex.vertex-hover {
292 g.vertex.hover:not(.selected) .shadow,
293 g.midpoint.hover:not(.selected) .shadow {
297 g.vertex.selected .shadow {
301 .mode-draw-area g.midpoint,
302 .mode-draw-line g.midpoint,
303 .mode-add-area g.midpoint,
304 .mode-add-line g.midpoint,
305 .mode-add-point g.midpoint {
311 .preset-icon .icon.other-line {
317 stroke-linecap: round;
318 stroke-linejoin: bevel;
332 path.shadow.hover:not(.selected) {
336 path.shadow.selected {
351 stroke: rgba(255, 255, 255, 0.3);
352 fill: rgba(255, 255, 255, 0.3);
355 .preset-icon-fill-area {
356 border: 1px solid rgb(170, 170, 170);
357 background-color: rgba(170, 170, 170, 0.3);
360 path.stroke.tag-natural {
361 stroke: rgb(182, 225, 153);
363 path.fill.tag-natural {
364 stroke: rgba(182, 225, 153, 0.3);
365 fill: rgba(182, 225, 153, 0.3);
367 .preset-icon-fill-area.tag-natural {
368 border-color: rgb(182, 225, 153);
369 background-color: rgba(182, 225, 153, 0.3);
372 path.stroke.tag-landuse,
373 path.stroke.tag-natural-wood,
374 path.stroke.tag-natural-tree,
375 path.stroke.tag-natural-grassland,
376 path.stroke.tag-natural-grass,
377 path.stroke.tag-leisure-nature_reserve,
378 path.stroke.tag-leisure-pitch,
379 path.stroke.tag-leisure-park {
380 stroke: rgb(140, 208, 95);
382 path.fill.tag-landuse,
383 path.fill.tag-natural-wood,
384 path.fill.tag-natural-tree,
385 path.fill.tag-natural-grassland,
386 path.fill.tag-natural-grass,
387 path.fill.tag-leisure-nature_reserve,
388 path.fill.tag-leisure-pitch,
389 path.fill.tag-leisure-park {
390 stroke: rgba(140, 208, 95, 0.3);
391 fill: rgba(140, 208, 95, 0.3);
393 .preset-icon-fill-area.tag-landuse,
394 .preset-icon-fill-area.tag-natural-wood,
395 .preset-icon-fill-area.tag-natural-tree,
396 .preset-icon-fill-area.tag-natural-grassland,
397 .preset-icon-fill-area.tag-natural-grass,
398 .preset-icon-fill-area.tag-leisure-nature_reserve,
399 .preset-icon-fill-area.tag-leisure-pitch,
400 .preset-icon-fill-area.tag-leisure-park {
401 border-color: rgb(140, 208, 95);
402 background-color: rgba(140, 208, 95, 0.3);
405 path.stroke.tag-natural-water,
406 path.stroke.tag-landuse-basin,
407 path.stroke.tag-landuse-reservoir {
408 stroke: rgb(119, 211, 222);
410 path.fill.tag-landuse-basin,
411 path.fill.tag-landuse-reservoir,
412 path.fill.tag-natural-water {
413 stroke: rgba(119, 211, 222, 0.3);
414 fill: rgba(119, 211, 222, 0.3);
416 .preset-icon-fill-area.tag-landuse-basin,
417 .preset-icon-fill-area.tag-landuse-reservoir,
418 .preset-icon-fill-area.tag-natural-water {
419 border-color: rgb(119, 211, 222);
420 background-color: rgba(119, 211, 222, 0.3);
423 path.stroke.tag-amenity-childcare,
424 path.stroke.tag-amenity-kindergarten,
425 path.stroke.tag-amenity-school,
426 path.stroke.tag-amenity-college,
427 path.stroke.tag-amenity-university {
428 stroke: rgb(255, 255, 148);
430 path.fill.tag-amenity-childcare,
431 path.fill.tag-amenity-kindergarten,
432 path.fill.tag-amenity-school,
433 path.fill.tag-amenity-college,
434 path.fill.tag-amenity-university {
435 stroke: rgba(255, 255, 148, 0.15);
436 fill: rgba(255, 255, 148, 0.15);
438 .preset-icon-fill-area.tag-amenity-childcare,
439 .preset-icon-fill-area.tag-amenity-kindergarten,
440 .preset-icon-fill-area.tag-amenity-school,
441 .preset-icon-fill-area.tag-amenity-college,
442 .preset-icon-fill-area.tag-amenity-university {
443 border-color: rgb(255, 255, 148);
444 background-color: rgba(255, 255, 148, 0.15);
447 path.stroke.tag-landuse-residential {
448 stroke: rgb(196, 189, 25);
450 path.fill.tag-landuse-residential {
451 stroke: rgba(196, 189, 25, 0.3);
452 fill: rgba(196, 189, 25, 0.3);
454 .preset-icon-fill-area.tag-landuse-residential {
455 border-color: rgb(196, 189, 25);
456 background: rgba(196, 189, 25, 0.3);
459 path.stroke.tag-landuse-retail,
460 path.stroke.tag-landuse-commercial {
461 stroke: rgb(214, 136, 26);
463 path.fill.tag-landuse-retail,
464 path.fill.tag-landuse-commercial {
465 stroke: rgba(214, 136, 26, 0.3);
466 fill: rgba(214, 136, 26, 0.3);
468 .preset-icon-fill-area.tag-landuse-retail,
469 .preset-icon-fill-area.tag-landuse-commercial {
470 border-color: rgb(214, 136, 26);
471 background-color: rgba(214, 136, 26, 0.3);
474 path.stroke.tag-landuse-industrial {
475 stroke: rgb(228, 164, 245);
477 path.fill.tag-landuse-industrial {
478 stroke: rgba(228, 164, 245, 0.3);
479 fill: rgba(228, 164, 245, 0.3);
481 .preset-icon-fill-area.tag-landuse-industrial {
482 border-color: rgb(228, 164, 245);
483 background-color: rgba(228, 164, 245, 0.3);
486 path.stroke.tag-landuse-quarry {
487 stroke: rgb(166, 149, 123);
489 path.fill.tag-landuse-quarry {
490 stroke: rgba(166, 149, 123, 0.2);
491 fill: rgba(166, 149, 123, 0.2);
493 .preset-icon-fill-area.tag-landuse-quarry {
494 border-color: rgb(166, 149, 123);
495 background-color: rgba(166, 149, 123, 0.2);
498 path.stroke.tag-landuse-landfill {
499 stroke: rgb(255, 153, 51);
501 path.fill.tag-landuse-landfill {
502 stroke: rgba(255, 153, 51, 0.2);
503 fill: rgba(255, 153, 51, 0.2);
505 .preset-icon-fill-area.tag-landuse-landfill {
506 border-color: rgb(255, 153, 51);
507 background-color: rgba(255, 153, 51, 0.2);
510 .pattern-color-construction {
511 fill: rgba(196, 189, 25, 0.2);
513 path.stroke.tag-landuse.tag-status {
514 stroke: rgb(196, 189, 25);
516 .preset-icon-fill-area.tag-landuse.tag-status {
517 border-color: rgb(196, 189, 25);
518 background-color: rgba(196, 189, 25, 0.2);
521 path.stroke.tag-landuse-military {
522 stroke: rgb(214, 136, 26);
524 path.fill.tag-landuse-military {
525 stroke: rgba(214, 136, 26, 0.2);
526 fill: rgba(214, 136, 26, 0.2);
528 .preset-icon-fill-area.tag-landuse-military {
529 border-color: rgb(214, 136, 26);
530 background-color: rgba(214, 136, 26, 0.2);
533 .pattern-color-wetland {
534 fill: rgba(182, 225, 153, 0.2);
536 path.stroke.tag-natural-wetland {
537 stroke: rgb(182, 225, 153);
539 .preset-icon-fill-area.tag-natural-wetland {
540 border-color: rgb(182, 225, 153);
541 background-color: rgba(182, 225, 153, 0.2);
544 .pattern-color-meadow {
545 fill: rgba(182, 225, 153, 0.2);
547 path.stroke.tag-landuse-meadow {
548 stroke: rgb(182, 225, 153);
550 .preset-icon-fill-area.tag-landuse-meadow {
551 border-color: rgb(182, 225, 153);
552 background-color: rgba(182, 225, 153, 0.2);
555 .pattern-color-beach {
556 fill: rgba(255, 255, 126, 0.2);
558 path.stroke.tag-natural-beach {
559 stroke: rgb(255, 255, 126);
561 .preset-icon-fill-area.tag-natural-beach {
562 border-color: rgb(255, 255, 126);
563 background-color: rgba(255, 255, 126, 0.2);
566 .pattern-color-scrub {
567 fill: rgba(219, 240, 139, 0.2);
569 path.stroke.tag-natural-scrub {
570 stroke: rgb(219, 240, 139);
572 .preset-icon-fill-area.tag-natural-scrub {
573 border-color: rgb(219, 240, 139);
574 background-color: rgba(219, 240, 139, 0.2);
578 .pattern-color-farmland {
579 fill: rgba(140, 208, 95, 0.2);
581 path.stroke.tag-landuse-farm,
582 path.stroke.tag-landuse-farmland {
583 stroke: rgb(140, 208, 95);
585 .preset-icon-fill-area.tag-landuse-farm,
586 .preset-icon-fill-area.tag-landuse-farmland {
587 background-color: rgba(140, 208, 95, 0.2);
590 .pattern-color-cemetery,
591 .pattern-color-orchard {
592 fill: rgba(140, 208, 95, 0.2);
594 path.stroke.tag-landuse-cemetery,
595 path.stroke.tag-landuse-orchard {
596 stroke: rgb(140, 208, 95);
598 .preset-icon-fill-area.tag-landuse-cemetery,
599 .preset-icon-fill-area.tag-landuse-orchard {
600 background-color: rgba(140, 208, 95, 0.2);
603 path.stroke.tag-amenity-parking {
604 stroke: rgb(170, 170, 170);
606 path.fill.tag-amenity-parking {
607 stroke: rgba(170, 170, 170, 0.3);
608 fill: rgba(170, 170, 170, 0.3);
610 .preset-icon-fill-area.tag-amenity-parking {
611 border-color: rgb(170, 170, 170);
612 background-color: rgba(170, 170, 170, 0.3);
618 path.stroke.area.tag-highway {
620 stroke-dasharray: none;
626 .preset-icon .icon.tag-highway.other-line {
631 path.shadow.tag-highway {
634 path.casing.tag-highway {
638 path.stroke.tag-highway {
643 .low-zoom path.shadow.tag-highway {
646 .low-zoom path.casing.tag-highway {
649 .low-zoom path.stroke.tag-highway {
653 .preset-icon .icon.highway-motorway,
654 .preset-icon .icon.highway-motorway-link {
658 path.stroke.tag-highway-motorway,
659 path.stroke.tag-highway-motorway_link,
660 path.stroke.tag-motorway {
663 path.casing.tag-highway-motorway,
664 path.casing.tag-highway-motorway_link,
665 path.casing.tag-motorway {
669 .preset-icon .icon.highway-trunk,
670 .preset-icon .icon.highway-trunk-link {
674 path.stroke.tag-highway-trunk,
675 path.stroke.tag-highway-trunk_link,
676 path.stroke.tag-trunk {
679 path.casing.tag-highway-trunk,
680 path.casing.tag-highway-trunk_link,
681 path.casing.tag-trunk {
685 .preset-icon .icon.highway-primary,
686 .preset-icon .icon.highway-primary-link {
690 path.stroke.tag-highway-primary,
691 path.stroke.tag-highway-primary_link,
692 path.stroke.tag-primary {
695 path.casing.tag-highway-primary,
696 path.casing.tag-highway-primary_link,
697 path.casing.tag-primary {
701 .preset-icon .icon.highway-secondary,
702 .preset-icon .icon.highway-secondary-link {
706 path.stroke.tag-highway-secondary,
707 path.stroke.tag-highway-secondary_link,
708 path.stroke.tag-secondary {
711 path.casing.tag-highway-secondary,
712 path.casing.tag-highway-secondary_link,
713 path.casing.tag-secondary {
717 .preset-icon .icon.highway-tertiary,
718 .preset-icon .icon.highway-tertiary-link {
722 path.stroke.tag-highway-tertiary,
723 path.stroke.tag-highway-tertiary_link,
724 path.stroke.tag-tertiary {
727 path.casing.tag-highway-tertiary,
728 path.casing.tag-highway-tertiary_link,
729 path.casing.tag-tertiary {
733 .legacy-carto .preset-icon .icon.highway-motorway,
734 .legacy-carto .preset-icon .icon.highway-motorway-link {
738 .legacy-carto path.stroke.tag-highway-motorway,
739 .legacy-carto path.stroke.tag-highway-motorway_link,
740 .legacy-carto path.stroke.tag-motorway {
743 .legacy-carto path.casing.tag-highway-motorway,
744 .legacy-carto path.casing.tag-highway-motorway_link,
745 .legacy-carto path.casing.tag-motorway {
749 .legacy-carto .preset-icon .icon.highway-trunk,
750 .legacy-carto .preset-icon .icon.highway-trunk-link {
754 .legacy-carto path.stroke.tag-highway-trunk,
755 .legacy-carto path.stroke.tag-highway-trunk_link,
756 .legacy-carto path.stroke.tag-trunk {
759 .legacy-carto path.casing.tag-highway-trunk,
760 .legacy-carto path.casing.tag-highway-trunk_link,
761 .legacy-carto path.casing.tag-trunk {
765 .legacy-carto .preset-icon .icon.highway-primary,
766 .legacy-carto .preset-icon .icon.highway-primary-link {
770 .legacy-carto path.stroke.tag-highway-primary,
771 .legacy-carto path.stroke.tag-highway-primary_link,
772 .legacy-carto path.stroke.tag-primary {
775 .legacy-carto path.casing.tag-highway-primary,
776 .legacy-carto path.casing.tag-highway-primary_link,
777 .legacy-carto path.casing.tag-primary {
781 .legacy-carto .preset-icon .icon.highway-secondary,
782 .legacy-carto .preset-icon .icon.highway-secondary-link {
786 .legacy-carto path.stroke.tag-highway-secondary,
787 .legacy-carto path.stroke.tag-highway-secondary_link,
788 .legacy-carto path.stroke.tag-secondary {
791 .legacy-carto path.casing.tag-highway-secondary,
792 .legacy-carto path.casing.tag-highway-secondary_link,
793 .legacy-carto path.casing.tag-secondary {
797 .legacy-carto .preset-icon .icon.highway-tertiary,
798 .legacy-carto .preset-icon .icon.highway-tertiary-link {
802 .legacy-carto path.stroke.tag-highway-tertiary,
803 .legacy-carto path.stroke.tag-highway-tertiary_link,
804 .legacy-carto path.stroke.tag-tertiary {
807 .legacy-carto path.casing.tag-highway-tertiary,
808 .legacy-carto path.casing.tag-highway-tertiary_link,
809 .legacy-carto path.casing.tag-tertiary {
813 .preset-icon .icon.highway-unclassified {
817 path.stroke.tag-highway-unclassified,
818 path.stroke.tag-unclassified {
821 path.casing.tag-highway-unclassified,
822 path.casing.tag-unclassified {
826 .preset-icon .icon.highway-residential {
830 path.stroke.tag-highway-residential,
831 path.stroke.tag-residential {
834 path.casing.tag-highway-residential,
835 path.casing.tag-residential {
839 /* narrow highways */
840 path.stroke.tag-highway-living_street,
841 path.stroke.tag-highway-service,
842 path.stroke.tag-highway-track,
843 path.stroke.tag-highway-path,
844 path.stroke.tag-highway-footway,
845 path.stroke.tag-highway-cycleway,
846 path.stroke.tag-highway-bridleway,
847 path.stroke.tag-highway-corridor,
848 path.stroke.tag-highway-pedestrian,
849 path.stroke.tag-highway-steps,
850 path.stroke.tag-highway-road,
851 path.stroke.tag-living_street,
852 path.stroke.tag-service,
853 path.stroke.tag-track,
854 path.stroke.tag-path,
855 path.stroke.tag-footway,
856 path.stroke.tag-cycleway,
857 path.stroke.tag-bridleway,
858 path.stroke.tag-corridor,
859 path.stroke.tag-pedestrian,
860 path.stroke.tag-steps,
861 path.stroke.tag-road {
864 path.casing.tag-highway-living_street,
865 path.casing.tag-highway-service,
866 path.casing.tag-highway-track,
867 path.casing.tag-highway-path,
868 path.casing.tag-highway-footway,
869 path.casing.tag-highway-cycleway,
870 path.casing.tag-highway-bridleway,
871 path.casing.tag-highway-corridor,
872 path.casing.tag-highway-pedestrian,
873 path.casing.tag-highway-steps,
874 path.casing.tag-highway-road,
875 path.casing.tag-living_street,
876 path.casing.tag-service,
877 path.casing.tag-track,
878 path.casing.tag-path,
879 path.casing.tag-footway,
880 path.casing.tag-cycleway,
881 path.casing.tag-bridleway,
882 path.casing.tag-corridor,
883 path.casing.tag-pedestrian,
884 path.casing.tag-steps,
885 path.casing.tag-road {
889 .low-zoom path.stroke.tag-highway-living_street,
890 .low-zoom path.stroke.tag-highway-service,
891 .low-zoom path.stroke.tag-highway-track,
892 .low-zoom path.stroke.tag-highway-path,
893 .low-zoom path.stroke.tag-highway-footway,
894 .low-zoom path.stroke.tag-highway-cycleway,
895 .low-zoom path.stroke.tag-highway-bridleway,
896 .low-zoom path.stroke.tag-highway-corridor,
897 .low-zoom path.stroke.tag-highway-pedestrian,
898 .low-zoom path.stroke.tag-highway-steps,
899 .low-zoom path.stroke.tag-highway-road,
900 .low-zoom path.stroke.tag-living_street,
901 .low-zoom path.stroke.tag-service,
902 .low-zoom path.stroke.tag-track,
903 .low-zoom path.stroke.tag-path,
904 .low-zoom path.stroke.tag-footway,
905 .low-zoom path.stroke.tag-cycleway,
906 .low-zoom path.stroke.tag-bridleway,
907 .low-zoom path.stroke.tag-corridor,
908 .low-zoom path.stroke.tag-pedestrian,
909 .low-zoom path.stroke.tag-steps,
910 .low-zoom path.stroke.tag-road {
913 .low-zoom path.casing.tag-highway-living_street,
914 .low-zoom path.casing.tag-highway-service,
915 .low-zoom path.casing.tag-highway-track,
916 .low-zoom path.casing.tag-highway-path,
917 .low-zoom path.casing.tag-highway-footway,
918 .low-zoom path.casing.tag-highway-cycleway,
919 .low-zoom path.casing.tag-highway-bridleway,
920 .low-zoom path.casing.tag-highway-corridor,
921 .low-zoom path.casing.tag-highway-pedestrian,
922 .low-zoom path.casing.tag-highway-steps,
923 .low-zoom path.casing.tag-highway-road,
924 .low-zoom path.casing.tag-living_street,
925 .low-zoom path.casing.tag-service,
926 .low-zoom path.casing.tag-track,
927 .low-zoom path.casing.tag-path,
928 .low-zoom path.casing.tag-footway,
929 .low-zoom path.casing.tag-cycleway,
930 .low-zoom path.casing.tag-bridleway,
931 .low-zoom path.casing.tag-corridor,
932 .low-zoom path.casing.tag-pedestrian,
933 .low-zoom path.casing.tag-steps,
934 .low-zoom path.casing.tag-road {
938 .preset-icon .icon.highway-living-street {
942 path.stroke.tag-highway-living_street,
943 path.stroke.tag-living_street {
946 path.casing.tag-highway-living_street,
947 path.casing.tag-living_street {
951 .preset-icon .icon.highway-footway.tag-highway-corridor,
952 .preset-icon .icon.highway-footway.tag-highway-pedestrian {
956 path.stroke.tag-highway-corridor,
957 path.stroke.tag-highway-pedestrian,
958 path.stroke.tag-corridor,
959 path.stroke.tag-pedestrian {
961 stroke-dasharray: 2, 8;
963 path.casing.tag-highway-corridor,
964 path.casing.tag-highway-pedestrian,
965 path.casing.tag-corridor,
966 path.casing.tag-pedestrian,
967 path.casing.tag-highway-corridor.tag-unpaved,
968 path.casing.tag-highway-pedestrian.tag-unpaved,
969 path.casing.tag-corridor.tag-unpaved,
970 path.casing.tag-pedestrian.tag-unpaved {
972 stroke-linecap: round;
973 stroke-dasharray: none;
976 .preset-icon .icon.highway-road {
980 path.stroke.tag-highway-road,
981 path.stroke.tag-road {
984 path.casing.tag-highway-road,
985 path.casing.tag-road {
989 .preset-icon .icon.highway-service {
993 path.stroke.tag-highway-service,
994 path.stroke.tag-service {
997 path.casing.tag-highway-service,
998 path.casing.tag-service {
1002 .preset-icon .icon.highway-track {
1006 path.stroke.tag-highway-track,
1007 path.stroke.tag-track {
1010 path.casing.tag-highway-track,
1011 path.casing.tag-track {
1015 path.stroke.tag-highway-path,
1016 path.stroke.tag-highway-footway,
1017 path.stroke.tag-highway-cycleway,
1018 path.stroke.tag-highway-bridleway {
1019 stroke-linecap: butt;
1020 stroke-dasharray: 6, 6;
1023 path.casing.tag-highway-path,
1024 path.casing.tag-highway-path.tag-unpaved {
1026 stroke-linecap: round;
1027 stroke-dasharray: none;
1029 path.casing.tag-highway-footway,
1030 path.casing.tag-highway-cycleway,
1031 path.casing.tag-highway-bridleway,
1032 path.casing.tag-highway-footway.tag-unpaved,
1033 path.casing.tag-highway-cycleway.tag-unpaved,
1034 path.casing.tag-highway-bridleway.tag-unpaved {
1036 stroke-linecap: round;
1037 stroke-dasharray: none;
1040 .preset-icon .icon.category-path,
1041 .preset-icon .icon.highway-path {
1045 path.stroke.tag-highway-path {
1049 .preset-icon .icon.tag-route-foot,
1050 .preset-icon .icon.tag-route-hiking,
1051 .preset-icon .icon.highway-footway {
1055 path.stroke.tag-highway-footway {
1059 .preset-icon .icon.highway-footway.tag-crossing {
1062 path.stroke.tag-highway-footway.tag-crossing {
1064 stroke-dasharray: 6, 4;
1067 .preset-icon .icon.tag-route-bicycle,
1068 .preset-icon .icon.highway-cycleway {
1072 path.stroke.tag-highway-cycleway {
1076 .preset-icon .icon.highway-bridleway {
1080 path.stroke.tag-highway-bridleway {
1084 .preset-icon .icon.highway-steps {
1088 path.stroke.tag-highway-steps {
1090 stroke-linecap: butt;
1091 stroke-dasharray: 3, 3;
1093 path.casing.tag-highway-steps,
1094 path.casing.tag-highway-steps.tag-unpaved {
1096 stroke-linecap: round;
1097 stroke-dasharray: none;
1102 path.stroke.tag-aeroway-taxiway {
1106 path.shadow.tag-aeroway-runway {
1109 path.stroke.tag-aeroway-runway {
1112 stroke-linecap: butt;
1113 stroke-dasharray: 24, 48;
1115 path.casing.tag-aeroway-runway {
1118 stroke-linecap: square;
1120 path.fill.tag-aeroway-runway {
1121 stroke: rgba(0, 0, 0, 0.6);
1122 fill: rgba(0, 0, 0, 0.6);
1124 path.stroke.tag-aeroway-apron {
1127 path.fill.tag-aeroway-apron {
1128 stroke: rgba(128, 92, 128, 0.2);
1129 fill: rgba(128, 92, 128, 0.2);
1134 .preset-icon .icon.tag-railway.other-line {
1138 .preset-icon .icon.tag-railway {
1142 path.stroke.tag-railway {
1145 stroke-linecap: butt;
1146 stroke-dasharray: 12,12;
1148 path.casing.tag-railway {
1153 .preset-icon .icon.tag-railway-disused,
1154 .preset-icon .icon.tag-railway-abandoned {
1158 path.stroke.tag-railway-abandoned {
1161 path.casing.tag-railway-abandoned {
1165 .preset-icon .icon.tag-railway-subway {
1169 path.stroke.tag-railway-subway {
1172 path.casing.tag-railway-subway {
1176 path.stroke.tag-railway-platform {
1179 stroke-dasharray: none;
1181 path.casing.tag-railway-platform {
1185 .area.stroke.tag-railway {
1188 stroke-dasharray: none;
1190 .area.casing.tag-railway {
1196 .preset-icon .icon.tag-waterway.other-line {
1200 .preset-icon .icon.category-water,
1201 .preset-icon .icon.tag-route-ferry,
1202 .preset-icon .icon.tag-waterway {
1207 path.fill.tag-waterway {
1208 stroke: rgba(119, 211, 222, 0.3);
1209 fill: rgba(119, 211, 222, 0.3);
1212 path.stroke.tag-waterway {
1216 path.casing.tag-waterway {
1221 path.stroke.tag-waterway-river {
1224 path.casing.tag-waterway-river {
1228 .preset-icon .icon.tag-waterway-ditch {
1231 path.stroke.tag-waterway-ditch {
1235 path.casing.tag-waterway-ditch {
1240 path.area.stroke.tag-waterway-dock,
1241 path.area.stroke.tag-waterway-boatyard,
1242 path.area.stroke.tag-waterway-fuel {
1246 path.area.casing.tag-waterway-dock,
1247 path.area.casing.tag-waterway-boatyard,
1248 path.area.casing.tag-waterway-fuel {
1251 path.area.fill.tag-waterway-dock,
1252 path.area.fill.tag-waterway-boatyard,
1253 path.area.fill.tag-waterway-fuel {
1254 stroke: rgba(255, 255, 255, 0.3);
1255 fill: rgba(255, 255, 255, 0.3);
1260 .preset-icon .icon.tag-man_made-pipeline,
1261 .preset-icon .icon.tag-power {
1266 path.stroke.tag-power {
1270 path.casing.tag-power {
1276 path.stroke.tag-boundary {
1279 stroke-linecap: butt;
1280 stroke-dasharray: 20, 5, 5, 5;
1282 path.casing.tag-boundary {
1287 path.casing.tag-boundary-protected_area,
1288 path.casing.tag-boundary-national_park {
1294 path.stroke.tag-barrier {
1297 stroke-linecap: round;
1298 stroke-dasharray: 15, 5, 1, 5;
1300 .low-zoom path.stroke.tag-barrier {
1302 stroke-linecap: butt;
1303 stroke-dasharray: 8, 2, 2, 2;
1308 path.casing.tag-bridge {
1310 stroke-opacity: 0.6;
1312 stroke-linecap: butt;
1313 stroke-dasharray: none;
1316 path.shadow.tag-bridge {
1319 path.casing.line.tag-railway.tag-bridge,
1320 path.casing.tag-highway-living_street.tag-bridge,
1321 path.casing.tag-highway-path.tag-bridge,
1322 path.casing.tag-highway-corridor.tag-bridge,
1323 path.casing.line.tag-highway-pedestrian.tag-bridge,
1324 path.casing.tag-highway-service.tag-bridge,
1325 path.casing.tag-highway-track.tag-bridge,
1326 path.casing.tag-highway-steps.tag-bridge,
1327 path.casing.tag-highway-footway.tag-bridge,
1328 path.casing.tag-highway-cycleway.tag-bridge,
1329 path.casing.tag-highway-bridleway.tag-bridge {
1332 path.shadow.line.tag-railway.tag-bridge,
1333 path.shadow.tag-highway-living_street.tag-bridge,
1334 path.shadow.tag-highway-path.tag-bridge,
1335 path.shadow.tag-highway-corridor.tag-bridge,
1336 path.shadow.line.tag-highway-pedestrian.tag-bridge,
1337 path.shadow.tag-highway-service.tag-bridge,
1338 path.shadow.tag-highway-track.tag-bridge,
1339 path.shadow.tag-highway-steps.tag-bridge,
1340 path.shadow.tag-highway-footway.tag-bridge,
1341 path.shadow.tag-highway-cycleway.tag-bridge,
1342 path.shadow.tag-highway-bridleway.tag-bridge {
1345 .low-zoom path.casing.tag-bridge {
1348 .low-zoom path.shadow.tag-bridge {
1352 .low-zoom path.casing.line.tag-railway.tag-bridge,
1353 .low-zoom path.casing.tag-highway-living_street.tag-bridge,
1354 .low-zoom path.casing.tag-highway-path.tag-bridge,
1355 .low-zoom path.casing.tag-highway-corridor.tag-bridge,
1356 .low-zoom path.casing.line.tag-highway-pedestrian.tag-bridge,
1357 .low-zoom path.casing.tag-highway-service.tag-bridge,
1358 .low-zoom path.casing.tag-highway-track.tag-bridge,
1359 .low-zoom path.casing.tag-highway-steps.tag-bridge,
1360 .low-zoom path.casing.tag-highway-footway.tag-bridge,
1361 .low-zoom path.casing.tag-highway-cycleway.tag-bridge,
1362 .low-zoom path.casing.tag-highway-bridleway.tag-bridge {
1366 .low-zoom path.shadow.line.tag-railway.tag-bridge,
1367 .low-zoom path.shadow.tag-highway-living_street.tag-bridge,
1368 .low-zoom path.shadow.tag-highway-path.tag-bridge,
1369 .low-zoom path.shadow.tag-highway-corridor.tag-bridge,
1370 .low-zoom path.shadow.line.tag-highway-pedestrian.tag-bridge,
1371 .low-zoom path.shadow.tag-highway-service.tag-bridge,
1372 .low-zoom path.shadow.tag-highway-track.tag-bridge,
1373 .low-zoom path.shadow.tag-highway-steps.tag-bridge,
1374 .low-zoom path.shadow.tag-highway-footway.tag-bridge,
1375 .low-zoom path.shadow.tag-highway-cycleway.tag-bridge,
1376 .low-zoom path.shadow.tag-highway-bridleway.tag-bridge {
1382 path.stroke.tag-tunnel {
1383 stroke-opacity: 0.3;
1385 path.casing.tag-tunnel {
1386 stroke-opacity: 0.5;
1387 stroke-linecap: butt;
1388 stroke-dasharray: none;
1392 /* embankments / cuttings */
1393 path.casing.tag-embankment,
1394 path.casing.tag-cutting {
1395 stroke-opacity: 0.5;
1398 stroke-dasharray: 2, 4;
1399 stroke-linecap: butt;
1402 path.shadow.tag-embankment,
1403 path.shadow.tag-cutting {
1407 .low-zoom path.casing.tag-embankment,
1408 .low-zoom path.casing.tag-cutting {
1412 .low-zoom path.shadow.tag-embankment,
1413 .low-zoom path.shadow.tag-cutting {
1418 /* Surface - unpaved */
1419 path.casing.tag-unpaved {
1421 stroke-linecap: butt;
1422 stroke-dasharray: 4, 3;
1424 .low-zoom path.casing.tag-unpaved {
1425 stroke-dasharray: 3, 2;
1427 path.casing.tag-bridge.tag-unpaved {
1429 stroke-dasharray: 4, 3;
1431 .low-zoom path.casing.tag-bridge.tag-unpaved {
1433 stroke-dasharray: 3, 2;
1437 /* Status (e.g. construction, proposed, abandoned) */
1438 path.stroke.tag-status,
1439 path.casing.tag-status {
1440 stroke-linecap: butt;
1441 stroke-dasharray: 7, 3;
1443 .low-zoom path.stroke.tag-status,
1444 .low-zoom path.casing.tag-status {
1445 stroke-dasharray: 5, 2;
1450 path.stroke.tag-building,
1451 path.stroke.tag-amenity-shelter {
1452 stroke: rgb(224, 110, 95);
1454 path.fill.tag-building,
1455 path.fill.tag-amenity-shelter {
1456 stroke: rgba(224, 110, 95, 0.3);
1457 fill: rgba(224, 110, 95, 0.3);
1459 .preset-icon-fill-area.tag-building,
1460 .preset-icon-fill-area.tag-amenity-shelter {
1461 border-color: rgb(224, 110, 95);
1462 background-color: rgba(224, 110, 95, 0.3);
1466 /* Labels / Markers */
1470 pointer-events: none;
1475 .oneway .textpath.tag-waterway {
1484 text.arealabel-halo,
1485 text.linelabel-halo,
1486 text.pointlabel-halo,
1493 text-anchor: middle;
1494 pointer-events: none;
1495 -webkit-transition: opacity 100ms linear;
1496 transition: opacity 100ms linear;
1497 -moz-transition: opacity 100ms linear;
1500 .linelabel-halo .textpath,
1501 .linelabel .textpath {
1502 dominant-baseline: middle;
1505 /* Opera doesn't support dominant-baseline. See #715 */
1506 .opera .linelabel-halo .textpath,
1507 .opera .linelabel .textpath {
1508 baseline-shift: -33%;
1509 dominant-baseline: auto;
1516 stroke-miterlimit: 1;
1532 pointer-events: all;
1535 .form-field-restrictions .vertex {
1536 pointer-events: none;
1537 cursor: auto !important;
1544 cursor: auto; /* Opera */
1545 cursor: url(<%= asset_path("iD/img/cursor-grab.png") %>) 9 9, auto; /* FF */
1548 .mode-browse .point,
1549 .mode-select .point {
1550 cursor: pointer; /* Opera */
1551 cursor: url(<%= asset_path("iD/img/cursor-select-point.png") %>), pointer; /* FF */
1554 .mode-select .vertex,
1555 .mode-browse .vertex {
1556 cursor: pointer; /* Opera */
1557 cursor: url(<%= asset_path("iD/img/cursor-select-vertex.png") %>), pointer; /* FF */
1561 .mode-select .line {
1562 cursor: pointer; /* Opera */
1563 cursor: url(<%= asset_path("iD/img/cursor-select-line.png") %>), pointer; /* FF */
1567 .mode-browse .area {
1568 cursor: pointer; /* Opera */
1569 cursor: url(<%= asset_path("iD/img/cursor-select-area.png") %>), pointer; /* FF */
1572 .mode-select .midpoint,
1573 .mode-browse .midpoint {
1574 cursor: pointer; /* Opera */
1575 cursor: url(<%= asset_path("iD/img/cursor-select-split.png") %>), pointer; /* FF */
1578 .mode-select .behavior-multiselect .point,
1579 .mode-select .behavior-multiselect .vertex,
1580 .mode-select .behavior-multiselect .line,
1581 .mode-select .behavior-multiselect .area {
1582 cursor: pointer; /* Opera */
1583 cursor: url(<%= asset_path("iD/img/cursor-select-add.png") %>), pointer; /* FF */
1586 .mode-select .behavior-multiselect .selected {
1587 cursor: pointer; /* Opera */
1588 cursor: url(<%= asset_path("iD/img/cursor-select-remove.png") %>), pointer; /* FF */
1592 #map .vertex:active,
1595 #map .midpoint:active,
1596 #map .mode-select .selected {
1597 cursor: pointer; /* Opera */
1598 cursor: url(<%= asset_path("iD/img/cursor-select-acting.png") %>), pointer; /* FF */
1601 .mode-draw-line #map,
1602 .mode-draw-area #map,
1603 .mode-add-line #map,
1604 .mode-add-area #map,
1605 .mode-drag-node #map {
1606 cursor: crosshair; /* Opera */
1607 cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */
1610 .mode-draw-line .way.hover,
1611 .mode-draw-area .way.hover,
1612 .mode-add-line .way.hover,
1613 .mode-add-area .way.hover,
1614 .mode-drag-node .way.hover {
1615 cursor: crosshair; /* Opera */
1616 cursor: url(<%= asset_path("iD/img/cursor-draw-connect-line.png") %>) 9 9, crosshair; /* FF */
1619 .mode-draw-line .vertex.hover,
1620 .mode-draw-area .vertex.hover,
1621 .mode-add-line .vertex.hover,
1622 .mode-add-area .vertex.hover,
1623 .mode-drag-node .vertex.hover {
1624 cursor: crosshair; /* Opera */
1625 cursor: url(<%= asset_path("iD/img/cursor-draw-connect-vertex.png") %>) 9 9, crosshair; /* FF */
1628 .mode-add-point #map,
1629 .mode-browse.lasso #map,
1630 .mode-browse.lasso .way,
1631 .mode-browse.lasso .vertex,
1632 .mode-browse.lasso .midpoint,
1633 .mode-select.lasso #map,
1634 .mode-select.lasso .way,
1635 .mode-select.lasso .vertex,
1636 .mode-select.lasso .midpoint {
1637 cursor: crosshair; /* Opera */
1638 cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */
1643 cursor: pointer; /* Opera */
1644 cursor: url(<%= asset_path("iD/img/cursor-pointer.png") %>) 6 1, pointer; /* FF */
1648 pointer-events: visibleStroke;
1653 pointer-events: none;
1666 /* Mapillary Layer */
1669 pointer-events: none;
1672 .layer-mapillary g {
1673 pointer-events: visible;
1674 cursor: pointer; /* Opera */
1675 cursor: url(<%= asset_path("iD/img/cursor-select-mapillary.png") %>) 6 1, pointer; /* FF */
1678 .layer-mapillary g * {
1684 .layer-mapillary g:hover * {
1690 .layer-mapillary g.selected * {
1696 .layer-mapillary g:hover path.viewfield,
1697 .layer-mapillary g.selected path.viewfield,
1698 .layer-mapillary g path.viewfield {
1705 .mode-draw-line .vertex.active,
1706 .mode-draw-area .vertex.active,
1707 .mode-drag-node .vertex.active {
1711 .mode-draw-line .way.active,
1712 .mode-draw-area .way.active,
1713 .mode-drag-node .active {
1714 pointer-events: none;
1717 /* Ensure drawing doesn't interact with area fills. */
1718 .mode-add-point .area.fill,
1719 .mode-draw-line .area.fill,
1720 .mode-draw-area .area.fill,
1721 .mode-add-line .area.fill,
1722 .mode-add-area .area.fill,
1723 .mode-drag-node .area.fill {
1724 pointer-events: none;
1729 .low-zoom.fill-wireframe path.stroke,
1730 .fill-wireframe path.stroke {
1732 stroke-opacity: 0.5;
1733 stroke-dasharray: none;
1737 .low-zoom.fill-wireframe path.shadow,
1738 .fill-wireframe path.shadow {
1742 .fill-wireframe path.shadow.hover:not(.selected) {
1743 stroke-opacity: 0.4;
1745 .fill-wireframe path.shadow.selected {
1746 stroke-opacity: 0.6;
1749 .fill-wireframe .point,
1750 .fill-wireframe .areaicon,
1751 .fill-wireframe path.casing,
1752 .fill-wireframe path.fill,
1753 .fill-wireframe path.oneway {
1757 .fill-partial path.fill {
1760 pointer-events: visibleStroke;
1763 ------------------------------------------------------- */
1766 Opera misbehaves when the window is resized vertically unless 100% width + height are
1767 applied to both html and body. https://gist.github.com/jfirebaugh/bd225bcfdd3a633850c4
1775 font:normal 12px/1.6667 'Helvetica Neue', Arial, sans-serif;
1785 vertical-align: middle;
1803 /* Can't be display: none or the clippaths are ignored. */
1832 div, textarea, label, input, form, span, ul, li, ol, a, button, h1, h2, h3, h4, h5, p, img {
1833 -moz-box-sizing: border-box;
1834 -webkit-box-sizing: border-box;
1835 box-sizing: border-box;
1838 a, button, input, textarea {
1839 -webkit-tap-highlight-color:rgba(0,0,0,0);
1840 -webkit-touch-callout:none;
1845 .checkselect label:hover,
1846 .opacity-options li,
1848 cursor: pointer; /* Opera */
1849 cursor: url(<%= asset_path("iD/img/cursor-pointer.png") %>) 6 1, pointer; /* FF */
1856 margin-bottom: 20px;
1861 h4:last-child { margin-bottom: 0;}
1867 margin-bottom: 10px;
1873 padding-bottom: 10px;
1877 outline-color: transparent;
1878 outline-style: none;
1908 ------------------------------------------------------- */
1912 font:normal 12px/20px 'Helvetica Neue', Arial, sans-serif;
1922 background-color: white;
1923 border:1px solid #ccc;
1928 text-overflow: ellipsis;
1933 background-color: #F1F1F1;
1936 input[type="checkbox"],
1937 input[type="radio"] {
1945 /* remove bottom border radius when combobox is open */
1946 .combobox + * textarea:focus,
1947 .combobox + * input:focus {
1948 border-bottom-left-radius: 0 !important;
1949 border-bottom-right-radius: 0 !important;
1955 background-color: white;
1956 border-collapse: collapse;
1965 table.tags, table.tags td, table.tags th {
1966 border: 1px solid #CCC;
1975 ------------------------------------------------------- */
1977 .col0 { float:left; width:04.1666%; }
1978 .col1 { float:left; width:08.3333%; }
1979 .col2 { float:left; width:16.6666%; }
1980 .col3 { float:left; width:25.0000%; max-width: 300px; }
1981 .col4 { float:left; width:33.3333%; max-width: 400px; }
1982 .col5 { float:left; width:41.6666%; max-width: 500px; }
1983 .col6 { float:left; width:50.0000%; max-width: 600px; }
1984 .col7 { float:left; width:58.3333%; }
1985 .col8 { float:left; width:66.6666%; }
1986 .col9 { float:left; width:75.0000%; }
1987 .col10 { float:left; width:83.3333%; }
1988 .col11 { float:left; width:91.6666%; }
1989 .col12 { float:left; width:100.0000%; }
1992 ------------------------------------------------------- */
1994 ul li { list-style: none;}
1996 .toggle-list > label {
2001 background-color: white;
2006 .toggle-list > label:hover {
2007 background-color: #ececec;
2010 .toggle-list > label:not(:last-child) {
2011 border-bottom: 1px solid #ccc;
2014 .toggle-list > label:last-child {
2015 border-radius: 0 0 3px 3px;
2018 .toggle-list label > span {
2021 white-space: nowrap;
2022 text-overflow: ellipsis;
2025 .toggle-list > label.active {
2026 background: #E8EBFF;
2031 ------------------------------------------------------- */
2038 background: #f6f6f6;
2043 background: #ececec;
2048 background:rgba(0,0,0,.5);
2053 background:rgba(0,0,0,.75);
2058 .fr { float: right;}
2073 box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
2077 background: url(<%= asset_path("iD/img/loader_bg.gif") %>);
2078 background-size:5px 5px;
2114 display: inline-block;
2121 background-color: #ececec;
2126 background-color: rgba(255,255,255,.25);
2127 color: rgba(0,0,0,.5);
2132 background: #7092ff;
2142 background-color: #fafafa;
2145 button.minor .icon {
2149 button.minor:hover {
2150 background-color: #f1f1f1;
2154 display: inline-block;
2159 .button-wrap button:only-child {
2163 .button-wrap:last-of-type {
2169 border-right: 1px solid rgba(0,0,0,.5);
2172 .fillL .joined button {
2173 border-right: 1px solid white;
2176 .joined button:first-child {
2177 border-radius:4px 0 0 4px;
2180 .joined button:last-child {
2181 border-right-width: 0;
2182 border-radius:0 4px 4px 0;
2186 background: #7092ff;
2190 button[disabled].action,
2191 button[disabled].action:hover {
2192 background: #cccccc;
2196 button.action:focus,
2197 button.action:hover {
2198 background: #597BE7;
2201 button.secondary-action {
2202 background: #ececec;
2205 button.secondary-action:focus,
2206 button.secondary-action:hover {
2207 background: #cccccc;
2210 button.save.has-count {
2214 button.save .count {
2218 button.save.has-count .count {
2222 background: rgba(255, 255, 255, .5);
2229 margin-left: 8.3333%;
2232 button.save.has-count .count::before {
2241 border-top: 6px solid transparent;
2242 border-bottom: 6px solid transparent;
2243 border-right: 6px solid rgba(255,255,255,.5);
2249 vertical-align: top;
2255 vertical-align: text-top;
2290 /* ToolBar / Persistent UI Elements
2291 ------------------------------------------------------- */
2304 /* Header for modals / panes
2305 ------------------------------------------------------- */
2308 border-bottom: 1px solid #ccc;
2316 white-space: nowrap;
2317 text-overflow: ellipsis;
2319 padding: 20px 20px 20px 40px;
2335 .entity-editor-pane .header button.preset-close,
2336 .preset-list-pane .header button.preset-choose {
2342 .entity-editor-pane .header button.preset-choose {
2365 padding: 5px 20px 5px 20px;
2366 border-top: 1px solid #ccc;
2367 background-color: #fafafa;
2371 .sidebar-component .body {
2380 ------------------------------------------------------- */
2388 background: #f6f6f6;
2391 .sidebar-component {
2424 background-color: #fff;
2427 .mapillary-image a {
2431 background-color: rgba(0,0,0,.5);
2437 .mapillary-image img {
2443 .mapillary-image.hidden {
2447 .mapillary-image.temp button {
2451 .mapillary-image button {
2459 .feature-list-pane .inspector-body {
2463 .preset-list-pane .inspector-body {
2467 .entity-editor-pane .inspector-body {
2471 .selection-list-pane .inspector-body {
2480 #sidebar .search-header .icon {
2485 pointer-events: none;
2488 #sidebar .search-header input {
2496 border-bottom-width: 1px;
2510 .feature-list-item {
2513 border-bottom: 1px solid #ccc;
2517 .feature-list-item .label {
2520 white-space: nowrap;
2521 text-overflow: ellipsis;
2523 border-left: 1px solid rgba(0, 0, 0, .1);
2526 .feature-list-item .label .icon {
2530 .feature-list-item:hover .label {
2531 background-color: #ececec;
2534 .feature-list-item .entity-type {
2538 .feature-list-item:hover .entity-type {
2542 .feature-list-item .entity-name {
2543 font-weight: normal;
2549 ------------------------------------------------------- */
2555 padding: 20px 20px 10px 20px;
2556 border-bottom: 1px solid #ccc;
2559 .preset-list-button-wrap {
2561 margin-bottom: 10px;
2565 .preset-list-button {
2569 border: 1px solid #ccc;
2572 .preset-list.filtered .preset-list-item:first-child .preset-list-button {
2573 background: #ececec;
2576 .preset-icon-fill-area {
2586 .preset-icon-frame {
2595 .preset-icon-frame .icon {
2607 .preset-icon-60 .icon {
2615 left: 13px; /* Maki icons off center? */
2619 .preset-icon-32 .icon {
2624 .preset-list-button .label {
2625 background-color: #f6f6f6;
2634 white-space: nowrap;
2635 text-overflow: ellipsis;
2637 border-left: 1px solid rgba(0, 0, 0, .1);
2638 border-radius: 0 3px 3px 0;
2641 .preset-list-button:hover .label {
2642 background-color: #ececec;
2645 .preset-list-item button.tag-reference-button {
2647 border: 1px solid #CCC;
2648 border-radius: 0 3px 3px 0;
2653 background: #fafafa;
2656 .preset-list-item button.tag-reference-button:hover {
2657 background: #f1f1f1;
2660 .preset-list-item button.tag-reference-button .icon {
2664 .current .preset-list-button,
2665 .current .preset-list-button .label {
2666 background-color: #E8EBFF;
2669 .category .preset-list-button:after,
2670 .category .preset-list-button:before {
2674 left: -1px; right: -1px;
2675 border: 1px solid #ccc;
2676 border-bottom: none;
2677 border-radius: 6px 6px 0 0;
2681 .category .preset-list-button:before {
2685 .subgrid .preset-list {
2686 padding: 10px 10px 0 10px;
2690 width: -webkit-calc(100% + 20px);
2695 border: solid rgba(0, 0, 0, 0);
2697 border-bottom-color: #f1f1f1;
2701 margin-left: -webkit-calc(50% - 10px);
2706 /* preset form basics */
2712 .inspector-preset .preset-form {
2714 margin: 0 10px 10px 10px;
2718 .entity-editor-pane .preset-list-item::after {
2727 border: solid rgba(0, 0, 0, 0);
2729 border-bottom-color: #ececec;
2732 .entity-editor-pane .preset-list-item .preset-list-button-wrap {
2738 margin-bottom: 10px;
2740 -webkit-transition: margin-bottom 200ms;
2741 -moz-transition: margin-bottom 200ms;
2742 -o-transition: margin-bottom 200ms;
2743 transition: margin-bottom 200ms;
2746 .form-field:last-child {
2753 border: 1px solid #cfcfcf;
2754 padding: 5px 0 5px 10px;
2755 background: #f6f6f6;
2757 border-radius: 4px 4px 0 0;
2761 .form-label-button-wrap {
2767 background: transparent;
2771 .form-label-button-wrap .tag-reference-button {
2772 border-radius: 0 3px 0 0;
2775 .form-label-button-wrap .icon {
2779 .form-label button {
2780 border-left: 1px solid #CCC;
2784 background: #f6f6f6;
2786 .form-label button:hover {
2787 background: #f1f1f1;
2790 .form-label .modified-icon,
2791 .form-field .remove-icon {
2795 .modified .form-label .modified-icon,
2796 .present .form-label .remove-icon {
2797 display: inline-block;
2800 .form-field > input,
2801 .form-field > textarea,
2802 .form-field .preset-input-wrap {
2803 border: 1px solid #CCC;
2806 border-radius: 0 0 4px 4px;
2810 .form-field textarea {
2815 border-bottom: 1px solid #CCC
2818 /* Preset form (hover mode) */
2820 .inspector-hover .checkselect label:last-of-type,
2821 .inspector-hover .preset-input-wrap .label,
2822 .inspector-hover input,
2823 .inspector-hover label {
2824 background: #ececec;
2828 .inspector-hover .checkselect label:last-of-type {
2832 /* hide and remove from layout */
2834 .inspector-hover label input[type="checkbox"],
2835 .inspector-hover label input[type="radio"],
2836 .inspector-hover .toggle-list label,
2837 .inspector-hover .toggle-list label span,
2838 .inspector-hover .inspector-inner .add-tag,
2839 .inspector-hover .inspector-inner .add-relation,
2840 .inspector-hover .toggle-list label.remove .icon {
2844 opacity: 0 !important;
2850 /* hide but preserve in layout */
2851 .inspector-hover .entity-editor-pane button.minor,
2852 .inspector-hover .combobox-caret,
2853 .inspector-hover .entity-editor-pane .header button,
2854 .inspector-hover .spin-control,
2855 .inspector-hover .hide-toggle:before,
2856 .inspector-hover .more-fields,
2857 .inspector-hover .form-label-button-wrap,
2858 .inspector-hover .tag-reference-button,
2859 .inspector-hover .view-on-osm {
2863 /* Styles for raw tag inspector on hover */
2864 .inspector-hover .tag-row .key-wrap,
2865 .inspector-hover .tag-row .form-field.input-wrap-position {
2869 .inspector-hover .tag-row:first-child input.value {
2870 border-top-right-radius: 4px;
2873 .inspector-hover .tag-row:last-child input.value {
2874 border-bottom-right-radius: 4px;
2877 .inspector-hover .tag-row:last-child input.key {
2878 border-bottom-left-radius: 4px;
2881 .inspector-hover .more-fields {
2883 margin-bottom: -10px;
2886 /* Unstyle button fields */
2887 .inspector-hover .toggle-list label.active,
2888 .inspector-hover .entity-editor-pane a.hide-toggle {
2890 background-color: transparent;
2896 .inspector-hover .toggle-list button.active {
2900 /* Add placeholder only on hover for radio buttons */
2901 .inspector-hover .toggle-list .placeholder {
2909 /* Hide placeholder for radio buttons if another is active, or not in hover state */
2910 .toggle-list label.active ~ .placeholder,
2911 .toggle-list .placeholder {
2920 /* adding additional preset fields */
2923 padding: 0 20px 20px 20px;
2927 .more-fields label { padding: 5px 10px 5px 0; }
2928 .more-fields input { width: 50%;}
2930 /* preset form access */
2932 .preset-input-wrap .label {
2934 background: #F6F6F6;
2938 .form-field-access .preset-input-wrap li {
2939 border-bottom: 1px solid #CCC;
2941 .form-field-access .preset-input-wrap li:last-child {
2945 .preset-input-access-wrap input {
2948 border-left-width: 1px;
2951 .preset-input-wrap li:last-child input {
2952 border-bottom-right-radius: 4px;
2955 /* preset form cycleway */
2957 .form-field-cycleway .preset-input-wrap li {
2958 border-bottom: 1px solid #CCC;
2960 .form-field-cycleway .preset-input-wrap li:last-child {
2964 .preset-input-cycleway-wrap input {
2967 border-left-width: 1px;
2970 /* preset form numbers */
2972 input[type=number] {
2980 display: inline-block;
2982 margin-bottom: -11px;
2986 .spin-control button {
2992 border-left: 1px solid #CCC;
2994 background: rgba(0, 0, 0, 0);
2997 .spin-control button.decrement {
2998 border-bottom-right-radius: 3px;
3001 .spin-control button.decrement::after,
3002 .spin-control button.increment::after {
3004 height: 0; width: 0;
3006 left: 0; right: 0; bottom: 0; top: 0;
3010 .spin-control button.decrement::after {
3011 border-top: 5px solid #CCC;
3012 border-left: 5px solid transparent;
3013 border-right: 5px solid transparent;
3016 .spin-control button.increment::after {
3017 border-bottom: 5px solid #CCC;
3018 border-left: 5px solid transparent;
3019 border-right: 5px solid transparent;
3022 /* preset form checkbox */
3024 .checkselect label:last-of-type {
3031 .checkselect label:hover {
3032 background: #f1f1f1;
3039 .checkselect label:not(.set) input[type="checkbox"] {
3043 /* Preset form radio button */
3045 .toggle-list button.remove {
3046 border-radius: 0 0 3px 3px;
3049 .toggle-list button.remove .icon {
3054 .toggle-list button.remove::before {
3058 .form-field .wiki-lang {
3062 .form-field .wiki-title {
3066 .form-field .wiki-title ~ .combobox-caret {
3071 .form-field .wiki-link {
3073 background: #fafafa;
3078 .form-field .wiki-link:hover {
3079 background: #f1f1f1;
3082 #preset-input-maxspeed {
3084 border-radius: 0 0 0 4px;
3088 .form-field .maxspeed-unit {
3089 border-radius: 0 0 4px 0;
3093 /* Name + translate form */
3095 .form-field .localized-main {
3099 .form-field .button-input-action {
3104 border: 1px solid #CCC;
3105 border-top-width: 0;
3106 border-right-width: 0;
3107 border-radius: 0 0 4px 0;
3109 vertical-align: top;
3112 .form-field .localized-wrap {
3116 .form-field .localized-wrap .entry {
3121 .form-field .localized-wrap .entry::before {
3134 .form-field .localized-wrap .entry .localized-lang {
3136 border-top-width: 0;
3139 .form-field .localized-wrap .entry .localized-value {
3140 border-top-width: 0;
3141 border-radius: 0 0 4px 4px;
3144 .form-field .localized-wrap .form-label button {
3145 border-top-right-radius: 3px;
3148 /* Preset form address */
3155 .addr-row:first-of-type input {
3159 .addr-row input:first-of-type {
3167 .addr-row:last-of-type input:first-of-type {
3168 border-radius: 0 0 0 4px;
3171 .addr-row:last-of-type input:last-of-type {
3172 border-radius: 0 0 4px 0;
3175 /* Restrictions editor */
3177 .form-field-restrictions .preset-input-wrap {
3182 .form-field-restrictions svg {
3187 .form-field-restrictions .restriction-help {
3194 background-color: rgba(255, 255, 255, .8);
3199 /* combobox dropdown */
3204 box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
3210 border: 1px solid #ccc;
3211 border-radius: 0 0 4px 4px;
3217 border-top:1px solid #ccc;
3218 text-overflow: ellipsis;
3219 white-space: nowrap;
3223 .combobox a.selected,
3225 background: #ececec;
3228 .combobox a:first-child {
3233 display: inline-block;
3238 vertical-align: top;
3241 .combobox-caret::after {
3243 height: 0; width: 0;
3245 left: 0; right: 0; bottom: 0; top: 0;
3247 border-top: 5px solid #ccc;
3248 border-left: 5px solid transparent;
3249 border-right: 5px solid transparent;
3252 /* Raw Tag Editor */
3268 border-bottom: 1px solid #CCC;
3269 border-left: 1px solid #CCC;
3273 .tag-row .input-wrap-position {
3279 .tag-row input.key {
3281 background-color: #f6f6f6;
3284 .tag-row input.value {
3285 border-right: 1px solid #CCC;
3288 .tag-row:first-child input.key {
3289 border-top: 1px solid #CCC;
3290 border-top-left-radius: 4px;
3293 .tag-row:first-child input.value {
3294 border-top: 1px solid #CCC;
3301 border: 1px solid #CCC;
3302 border-top-width: 0;
3303 border-left-width: 0;
3306 .tag-row button:hover {
3307 background: #f1f1f1;
3310 .tag-row button .icon {
3314 .tag-row:first-child button {
3315 border-top-width: 1px;
3318 .tag-row:first-child .tag-reference-button {
3319 border-top-right-radius: 4px;
3322 .tag-row:last-child .tag-reference-button {
3323 border-bottom-right-radius: 4px;
3326 .tag-row .tag-reference-button {
3331 background: #fafafa;
3334 /* Adding form fields to tag editor */
3336 .inspector-inner .add-tag {
3340 background: rgba(0,0,0,.5);
3341 border-radius: 0 0 4px 4px;
3344 .inspector-inner .add-tag:hover {
3345 background: rgba(0,0,0,.8);
3348 .inspector-inner .add-tag .label {
3354 button.minor.tag-reference-loading {
3355 background-color: #f5f5f5;
3358 .tag-reference-loading .icon {
3359 background-image: url(<%= asset_path("iD/img/mini-loader.gif") %>);
3360 background-position: 0 0;
3363 .tag-reference-body {
3368 .tag-reference-body p,
3369 .tag-reference-body img {
3373 .tag-reference-body p:last-child {
3374 padding-bottom: 10px;
3377 .tag-reference-body a {
3379 padding-bottom: 10px;
3382 .preset-list .tag-reference-body {
3387 .preset-list .tag-reference-body a {
3388 padding-bottom: 20px;
3391 .preset-list .tag-reference-body p,
3392 .preset-list .tag-reference-body img {
3396 .raw-tag-editor .tag-reference-body {
3397 border-bottom: 1px solid #ccc;
3402 .raw-tag-editor .tag-reference-body p:last-child {
3403 padding-bottom: 20px;
3406 .raw-tag-editor .tag-reference-body a {
3407 padding-bottom: 20px;
3413 width: -webkit-calc(33.3333% - 10px);
3414 width: calc(33.3333% - 10px);
3419 margin-bottom: 20px;
3422 /* Raw relation membership editor */
3424 .raw-member-editor .member-list li:first-child,
3425 .raw-membership-editor .member-list li:first-child {
3429 .raw-member-editor .member-row,
3430 .raw-membership-editor .member-row {
3434 .raw-member-editor .member-row .member-entity-name,
3435 .raw-membership-editor .member-row .member-entity-name {
3436 font-weight: normal;
3440 .member-incomplete .member-delete {
3444 .member-row-new .member-entity-input {
3445 border-radius: 4px 4px 0 0;
3446 border: 1px solid #cfcfcf;
3452 background: rgba(0,0,0,.5);
3457 .add-relation:hover {
3458 background: rgba(0,0,0,.8);
3461 /* Fullscreen button */
3468 div.full-screen .tooltip {
3472 div.full-screen > button, div.full-screen > button.active {
3475 background: transparent;
3478 div.full-screen > button:hover {
3479 background-color: rgba(0, 0, 0, .8);
3492 .map-control > button {
3494 background: rgba(0,0,0,.5);
3498 .map-control > button:hover {
3499 background: rgba(0, 0, 0, .8);
3502 .map-control > button.active,
3503 .map-control > button.active:hover {
3504 background: #7092ff;
3509 .zoombuttons button.zoom-in {
3510 border-radius: 4px 0 0 0;
3513 /* Background / Map Data Settings */
3516 .map-data-control button {
3520 .background-control button {
3521 border-radius: 4px 0 0 0;
3525 .background-control {
3530 border: 1px solid #CCC;
3533 .background-control .adjustments button:last-child {
3537 .map-data-control .hide-toggle,
3538 .background-control .hide-toggle {
3539 padding-bottom: 10px;
3542 .layer-list, .controls-list {
3543 margin-bottom: 10px;
3544 border: 1px solid #CCC;
3551 background-color: white;
3555 .layer-list > li:first-child {
3556 border-radius: 3px 3px 0 0;
3559 .layer-list > li:last-child {
3560 border-radius: 0 0 3px 3px;
3563 .layer-list > li:only-child {
3567 .layer-list li:not(:last-child) {
3568 border-bottom: 1px solid #ccc;
3571 .layer-list li:hover {
3572 background-color: #ececec;
3575 .layer-list li.active {
3576 background: #E8EBFF;
3585 .layer-list label > span {
3588 white-space: nowrap;
3589 text-overflow: ellipsis;
3600 .minimap-toggle.active {
3601 background: #E8EBFF;
3604 .minimap-toggle:hover {
3605 background-color: #ececec;
3614 .hide-toggle:before {
3622 border-top: 4px solid transparent;
3623 border-bottom: 4px solid transparent;
3624 border-left: 8px solid #7092ff;
3627 .hide-toggle.expanded:before {
3628 border-top: 8px solid #7092ff;
3630 border-right: 4px solid transparent;
3631 border-left: 4px solid transparent;
3634 .background-control .nudge-container button {
3638 border-right: 1px solid #CCC;
3642 .background-control .nudge::after {
3647 left: 0; right: 0; top: 0; bottom: 0;
3652 .background-control .nudge.left::after {
3653 border-top: 5px solid transparent;
3654 border-bottom: 5px solid transparent;
3655 border-left: 5px solid #222;
3658 .background-control .nudge.right::after {
3659 border-top: 5px solid transparent;
3660 border-bottom: 5px solid transparent;
3661 border-right: 5px solid #222;
3664 .background-control .nudge.top::after {
3665 border-right: 5px solid transparent;
3666 border-left: 5px solid transparent;
3667 border-bottom: 5px solid #222;
3670 .background-control .nudge.bottom::after {
3671 border-right: 5px solid transparent;
3672 border-left: 5px solid transparent;
3673 border-top: 5px solid #222;
3677 background: url(<%= asset_path("iD/img/background-pattern-opacity.png") %>) 0 0 repeat;
3683 border: 1px solid #ccc;
3686 .opacity-options li {
3692 .opacity-options li .select-box{
3699 .map-data-control li:hover .select-box,
3700 .map-data-control li.selected .select-box,
3701 .background-control li:hover .select-box,
3702 .background-control li.selected .select-box {
3703 border: 2px solid #7092ff;
3704 background: rgba(89, 123, 231, .5);
3708 .map-data-control li.selected:hover .select-box,
3709 .map-data-control li.selected .select-box,
3710 .background-control li.selected:hover .select-box,
3711 .background-control li.selected .select-box {
3715 .background-control .opacity {
3717 display:inline-block;
3722 .map-data-control .layer-list button,
3723 .background-control .layer-list button {
3727 border-left: 1px solid #CCC;
3731 .map-data-control .layer-list button .icon,
3732 .background-control .layer-list button .icon {
3736 .map-data-control .layer-list button:first-of-type,
3737 .background-control .layer-list button:first-of-type {
3738 border-radius: 0 3px 3px 0;
3741 .map-data-control .map-overlay,
3742 .background-control .map-overlay,
3743 .help-control .map-overlay {
3750 .geolocate-control {
3751 margin-bottom: 10px;
3754 .geolocate-control button {
3755 border-radius: 0 0 0 4px;
3758 .map-overlay.content {
3762 padding: 20px 50px 20px 20px;
3769 .help-control button {
3770 border-radius: 0 0 0 4px;
3775 margin-bottom: 20px;
3778 .help-wrap .left-content .body p code {
3784 /* This is two columns, 41.66666 x .4 = 16.6666 */
3788 margin-bottom: 20px;
3792 .help-wrap .toc li a,
3795 border: 1px solid #CCC;
3799 .help-wrap .toc li a {
3803 .help-wrap .toc li a:hover,
3804 .help-wrap .nav a:hover {
3805 background: #ececec;
3808 .help-wrap .toc li a.selected {
3809 background: #E8EBFF;
3812 .help-wrap .toc li:first-child a {
3813 border-radius: 4px 4px 0 0;
3816 .help-wrap .toc li:nth-last-child(2) a {
3817 border-bottom: 1px solid #CCC;
3818 border-radius: 0 0 4px 4px
3821 .help-wrap .toc li.walkthrough a {
3824 border-bottom: 1px solid #ccc;
3838 .help-wrap .nav a:first-child {
3839 border-radius: 4px 0 0 4px;
3842 .help-wrap .nav a:last-child:not(:only-child) {
3843 border-radius: 0 4px 4px 0;
3847 .help-wrap .nav a:only-child {
3853 ------------------------------------------------------- */
3863 transform-origin:0 0;
3864 -ms-transform-origin:0 0;
3865 -webkit-transform-origin:0 0;
3866 -moz-transform-origin:0 0;
3867 -o-transform-origin:0 0;
3868 -moz-user-select: none;
3869 -webkit-user-select: none;
3870 -ms-user-select: none;
3874 #supersurface, .layer-layer {
3883 ------------------------------------------------------- */
3893 border: #aaa 1px solid;
3894 box-shadow: 0 0 2em black;
3898 transform-origin:0 0;
3899 -ms-transform-origin:0 0;
3900 -webkit-transform-origin:0 0;
3901 -moz-transform-origin:0 0;
3902 -o-transform-origin:0 0;
3903 -moz-user-select: none;
3904 -webkit-user-select: none;
3905 -ms-user-select: none;
3929 stroke: rgba(255, 255, 0, 0.75);
3931 shape-rendering: crispEdges;
3934 .map-in-map-bbox.thick {
3939 ------------------------------------------------------- */
3946 border-radius: 4px 0 0 0;
3947 border-bottom: 1px solid black;
3950 .infobox .selection-heading {
3952 border-radius: 4px 0 0 0;
3963 background: #7092ff;
3972 ------------------------------------------------------- */
3980 pointer-events: none;
3991 #attrib * { pointer-events: all; }
3993 .base-layer-attribution,
3994 .overlay-layer-attribution {
4000 .base-layer-attribution {
4004 .overlay-layer-attribution {
4008 .overlay-layer-attribution .attribution:not(:last-child):after {
4021 pointer-events: all;
4025 display: table-cell;
4026 vertical-align: bottom;
4044 font: 12px sans-serif;
4054 shape-rendering: crispEdges;
4066 border-left: 1px solid rgba(255,255,255,.5);
4067 padding: 5px 0 5px 5px;
4071 #about-list li:last-child {
4078 padding: 2px 4px 4px 4px;
4081 .source-switch a.live {
4082 background: #d32232;
4086 .feature-warning a {
4087 background: #1e90ff;
4088 padding: 2px 4px 4px 4px;
4093 .user-list a:not(:last-child):after {
4105 .api-status.offline,
4106 .api-status.readonly,
4112 ------------------------------------------------------- */
4116 display: inline-block;
4127 margin-bottom: 10px;
4130 .modal .description {
4146 background:rgba(0,0,0,0.5);
4148 left:0px; right:0px; top:0px; bottom:0px;
4153 border-bottom: 1px solid #CCC;
4156 .modal-section.header h3 {
4160 .modal-section.buttons {
4164 .modal-section.buttons .action {
4165 display: inline-block;
4168 vertical-align: middle;
4171 .save-section .buttons .action {
4172 display: inline-block;
4175 vertical-align: middle;
4182 .modal-actions button,
4183 .save-success a.button {
4184 font-weight: normal;
4186 border-bottom: 1px solid #CCC;
4190 display: inline-block;
4193 .modal-actions button:hover
4194 .save-success a.button:hover {
4195 background-color: #ececec;
4198 .modal-actions button:before,
4199 .save-success a.button.osm:before,
4200 .walkthrough a:before {
4207 margin-bottom: 10px;
4208 background:transparent url(<%= asset_path("iD/img/iD-sprite.svg") %>) no-repeat -200px -460px;
4211 .modal-actions :first-child {
4212 border-right: 1px solid #CCC;
4215 .modal-section:last-child {
4220 ------------------------------------------------------- */
4222 .modal-actions .restore:before {
4223 background-position: -500px -460px;
4226 .modal-actions .reset:before {
4227 background-position: -600px -460px;
4231 ------------------------------------------------------- */
4237 .save-success .button {
4241 .save-success a.button.social {
4245 .save-success .icon.social {
4251 .save-success .button.osm:before {
4252 background-position: -200px -460px;
4256 ------------------------------------------------------- */
4258 .modal-actions .walkthrough:before,
4259 .walkthrough a:before {
4260 background-position: -300px -460px;
4263 .modal-actions .start:before {
4264 background-position: -400px -460px;
4268 ------------------------------------------------------- */
4270 .mode-save a.user-info {
4271 display: inline-block;
4274 .mode-save .commit-form {
4278 .mode-save .user-info img {
4282 .mode-save h3 small.count {
4296 .mode-save .commit-info {
4297 margin-bottom: 10px;
4300 .mode-save .changeset-list {
4301 border:1px solid #ccc;
4306 .mode-save .warning-section .changeset-list button {
4307 border-left: 1px solid #CCC;
4310 .mode-save .changeset-list li {
4312 border-top:1px solid #ccc;
4317 .mode-save .changeset-list li:hover {
4318 background-color: #ececec;
4321 .mode-save .changeset-list .alert {
4325 .changeset-list li span.count {
4330 .mode-save .commit-section .changeset-list button {
4331 border-left: 1px solid #CCC;
4334 .changeset-list li span.count:before { content: '('; }
4336 .changeset-list li span.count:after { content: ')'; }
4338 .changeset-list li:first-child { border-top: 0;}
4340 /* Conflict resolution
4341 ------------------------------------------------------- */
4345 background-color: #ffffbb;
4346 border-bottom: 1px solid #ccc;
4349 .conflicts-buttons {
4353 .mode-save button.conflicts-button {
4357 .conflict-container {
4358 border-bottom: 1px solid #ccc;
4361 .conflict-description {
4367 padding: 20px 20px 0 20px;
4370 .conflict-detail-container {
4382 .conflict-nav-buttons {
4383 padding: 10px 0 20px 0;
4386 .conflict-nav-button {
4391 ------------------------------------------------------- */
4413 .notice .zoom-to:hover {
4414 background: #d8e1ff;
4417 .notice .zoom-to .icon {
4423 ------------------------------------------------------- */
4460 display: inline-block;
4465 font-weight: normal;
4466 background-color: white;
4472 pointer-events: none;
4476 background: transparent;
4484 border-color: transparent;
4485 border-style: solid;
4489 border-left-color: white;
4490 border-width: 5px 0 5px 5px;
4509 border-color: transparent;
4510 border-style: solid;
4514 border-right-color: white;
4515 border-width: 5px 5px 5px 0;
4522 border-color: transparent;
4523 border-style: solid;
4526 .tooltip.top .tooltip-arrow {
4530 border-top-color: white;
4531 border-width: 5px 5px 0;
4534 .tooltip.right .tooltip-arrow {
4538 border-right-color: white;
4539 border-width: 5px 5px 5px 0;
4542 .tooltip.left .tooltip-arrow {
4546 border-left-color: white;
4547 border-width: 5px 0 5px 5px;
4550 .tooltip.bottom .tooltip-arrow {
4554 border-bottom-color: white;
4555 border-width: 0 5px 5px;
4559 background: #F6F6F6;
4561 margin: 10px -10px -10px;
4562 border-radius: 0 0 3px 3px;
4565 .tooltip-inner .keyhint {
4569 /* Exceptions for tooltip layouts */
4571 /* make tooltips in panels dark */
4572 .map-overlay .tooltip.top .tooltip-arrow,
4573 .entity-editor-pane .tooltip.top .tooltip-arrow,
4574 .warning-section .tooltip.top .tooltip-arrow {
4575 border-top-color: #000;
4578 .map-overlay .tooltip.bottom .tooltip-arrow,
4579 .entity-editor-pane .tooltip.bottom .tooltip-arrow,
4580 .warning-section .tooltip.bottom .tooltip-arrow {
4581 border-bottom-color: #000;
4584 .map-overlay .tooltip.left .tooltip-arrow,
4585 .entity-editor-pane .tooltip.left .tooltip-arrow,
4586 .warning-section .tooltip.left .tooltip-arrow {
4587 border-left-color: #000;
4590 .map-overlay .tooltip.right .tooltip-arrow,
4591 .entity-editor-pane .tooltip.right .tooltip-arrow,
4592 .warning-section .tooltip.right .tooltip-arrow {
4593 border-right-color: #000;
4596 .map-overlay .tooltip-inner,
4597 .map-overlay .keyhint-wrap,
4598 .entity-editor-pane .tooltip-inner,
4599 .warning-section .tooltip-inner {
4603 /* commit warning tooltips need to be closer */
4604 .warning-section .tooltip.top {
4608 /* Uncramp map-control tooltips */
4609 .map-control .tooltip {
4612 /* Move over tooltips that are near the edge of screen */
4613 .add-point .tooltip {
4614 left: 33.3333% !important;
4617 .curtain-tooltip.intro-points-add .tooltip-arrow,
4618 .add-point .tooltip .tooltip-arrow {
4622 .radial-menu-tooltip {
4629 .radial-menu-background {
4632 stroke-opacity: 0.5;
4635 .radial-menu-item circle {
4639 .radial-menu-item circle:active,
4640 .radial-menu-item circle:hover {
4644 .radial-menu-item.disabled circle {
4646 fill: rgba(255,255,255,.5);
4649 .radial-menu-item use {
4654 .radial-menu-item.disabled use {
4655 fill: rgba(32,32,32,.5);
4656 color: rgba(40,40,40,.5);
4664 stroke-dasharray: 5, 5;
4668 ------------------------------------------------------- */
4670 @media only screen and (max-width: 840px) {
4671 /* override hide for save button */
4672 #bar .save .label { display: block;}
4675 @media screen and (max-width: 1200px) {
4676 .user-list { display: none !important; }
4679 @media screen and (max-width: 1000px) {
4680 #userLink { display: none !important; }
4683 @media screen and (max-width: 900px) {
4684 #scale-block { display: none !important; }
4689 ----------------------------------------------------- */
4691 ::-webkit-scrollbar {
4696 border-left: 1px solid #DDD;
4699 ::-webkit-scrollbar-track {
4700 background-clip: padding-box;
4701 border: solid transparent;
4705 ::-webkit-scrollbar-thumb {
4706 background-color: rgba(0,0,0,.2);
4707 background-clip: padding-box;
4708 border: solid transparent;
4709 border-width: 3px 3px 3px 4px;
4712 ::-webkit-scrollbar-track:hover,
4713 ::-webkit-scrollbar-track:active {
4714 background-color: rgba(0,0,0,.05);
4717 /* Intro walkthrough
4718 ----------------------------------------------------- */
4721 pointer-events: all;
4736 .intro-nav-wrap button.step {
4740 .intro-nav-wrap button.step.finished {
4741 background: #8cd05f;
4744 .intro-nav-wrap button.step .icon {
4748 .intro-nav-wrap button.step.finished .icon {
4749 display: inline-block;
4753 .curtain-tooltip .tooltip-inner {
4758 .curtain-tooltip .tooltip-inner {
4762 .curtain-tooltip .tooltip-inner .bold {
4765 border-top: 1px solid #CCC;
4768 margin-right: -20px;
4769 padding: 10px 20px 0 20px;
4772 .curtain-tooltip .tooltip-inner .bold:only-child {
4778 .curtain-tooltip.intro-points-describe {
4779 top: 133px !important;
4782 /* Tooltip illustrations */
4784 .intro-points-add .tooltip-inner::before,
4785 .intro-areas-add .tooltip-inner::before,
4786 .intro-lines-add .tooltip-inner::before {
4792 background:transparent url(<%= asset_path("iD/img/iD-sprite.svg") %>) no-repeat 0 -320px;
4795 .intro-areas-add .tooltip-inner::before {
4796 background-position: 0 -400px;
4799 .intro-lines-add .tooltip-inner::before {
4800 background-position: 0 -480px;
4803 .huge-modal-button {
4809 .huge-modal-button .illustration {
4812 background: rgba(0, 0, 0, 0) url(<%= asset_path("iD/img/iD-sprite.svg") %>) no-repeat -300px -460px;