.ideditor button,
.ideditor input {
- line-height: normal;
+ line-height: inherit;
+ letter-spacing: inherit;
}
/* Hide default number spinner controls */
.ideditor input[type="number"]::-webkit-inner-spin-button,
.ideditor input[type="number"]::-webkit-outer-spin-button {
-display: none;
+ display: none;
+}
+.ideditor input[type=number] {
+ -moz-appearance: textfield;
}
/*
.ideditor input[type="checkbox"],
.ideditor input[type="radio"] {
- -webkit-box-sizing: border-box;
- box-sizing: border-box; /* 1 */
+ box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
.ideditor input[type="search"] {
-webkit-appearance: none; /* 1 */
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
+ box-sizing: border-box;
}
/*
/* No interactivity except what we specifically allow */
.ideditor .data-layer.osm *,
.ideditor .data-layer.notes *,
-.ideditor .data-layer.keepRight *,
-.ideditor .data-layer.improveOSM * {
+.ideditor .data-layer.keepRight * {
pointer-events: none;
}
font-size: 12px;
font-weight: bold;
fill: #333;
- -webkit-transition: opacity 100ms linear;
- -o-transition: opacity 100ms linear;
transition: opacity 100ms linear;
}
/* Wikidata-tagged */
-.ideditor g.point.tag-wikidata path.stroke {
+.ideditor g.point.tag-wikidata path.stroke,
+.ideditor g.vertex.tag-wikidata circle.stroke {
stroke-width: 2px;
stroke: #666;
fill: #eee;
}
-.ideditor g.point.tag-wikidata .icon {
+.ideditor g.point.tag-wikidata .icon,
+.ideditor g.vertex.tag-wikidata .icon {
color: #666;
}
.ideditor path.stroke.tag-leisure-pitch,
.ideditor path.stroke.tag-leisure-track,
.ideditor path.stroke.tag-natural,
-.ideditor path.stroke.tag-natural-wood {
+.ideditor path.stroke.tag-natural-wood,
+.ideditor path.stroke.tag-golf-tee,
+.ideditor path.stroke.tag-golf-fairway,
+.ideditor path.stroke.tag-golf-rough,
+.ideditor path.stroke.tag-golf-green {
stroke: rgb(140, 208, 95);
}
.ideditor path.fill.tag-barrier-hedge,
.ideditor path.fill.tag-leisure-pitch,
.ideditor path.fill.tag-leisure-track,
.ideditor path.fill.tag-natural,
-.ideditor path.fill.tag-natural-wood {
+.ideditor path.fill.tag-natural-wood,
+.ideditor path.fill.tag-golf-tee,
+.ideditor path.fill.tag-golf-fairway,
+.ideditor path.fill.tag-golf-rough,
+.ideditor path.fill.tag-golf-green {
stroke: rgba(140, 208, 95, 0.3);
fill: rgba(140, 208, 95, 0.3);
}
.ideditor path.stroke.tag-amenity-fountain,
.ideditor path.stroke.tag-leisure-swimming_pool,
.ideditor path.stroke.tag-natural-bay,
+.ideditor path.stroke.tag-natural-strait,
.ideditor path.stroke.tag-natural-water {
stroke: rgb(119, 211, 222);
}
.ideditor path.fill.tag-amenity-fountain,
.ideditor path.fill.tag-leisure-swimming_pool,
.ideditor path.fill.tag-natural-bay,
+.ideditor path.fill.tag-natural-strait,
.ideditor path.fill.tag-natural-water {
stroke: rgba(119, 211, 222, 0.3);
fill: rgba(119, 211, 222, 0.3);
/* Tan things */
-.ideditor path.stroke.tag-landuse-farmyard {
+.ideditor path.stroke.tag-landuse-farmyard,
+.ideditor path.stroke.tag-leisure-horse_riding {
stroke: rgb(245, 220, 186);
}
-.ideditor path.fill.tag-landuse-farmyard {
+.ideditor path.fill.tag-landuse-farmyard,
+.ideditor path.fill.tag-leisure-horse_riding {
stroke: rgba(245, 220, 186, 0.3);
fill: rgba(245, 220, 186, 0.3);
}
-.ideditor .preset-icon-fill path.area.stroke.tag-landuse-farmyard {
+.ideditor .preset-icon-fill path.area.stroke.tag-landuse-farmyard
+.preset-icon-fill path.area.stroke.tag-leisure-horse_riding {
stroke: rgb(226, 177, 111);
}
.ideditor .pattern-color-farmyard {
.ideditor path.line.stroke.tag-highway-road {
stroke-width: 5;
}
+.ideditor path.line.casing.tag-highway-service.tag-service-driveway {
+ stroke-width: 6.25;
+}
+.ideditor path.line.stroke.tag-highway-service.tag-service-driveway {
+ stroke-width: 4.25;
+}
.ideditor path.line.shadow.tag-highway-path,
.ideditor path.line.shadow.tag-highway-footway,
.ideditor path.line.shadow.tag-highway-cycleway,
.ideditor path.line.shadow.tag-highway-bridleway,
.ideditor path.line.shadow.tag-highway-corridor,
+.ideditor path.line.shadow.tag-highway-ladder,
.ideditor path.line.shadow.tag-highway-steps {
stroke-width: 16;
}
.ideditor path.line.casing.tag-highway-cycleway,
.ideditor path.line.casing.tag-highway-bridleway,
.ideditor path.line.casing.tag-highway-corridor,
+.ideditor path.line.casing.tag-highway-ladder,
.ideditor path.line.casing.tag-highway-steps {
stroke-width: 5;
}
.ideditor path.line.stroke.tag-highway-cycleway,
.ideditor path.line.stroke.tag-highway-bridleway,
.ideditor path.line.stroke.tag-highway-corridor,
+.ideditor path.line.stroke.tag-highway-ladder,
.ideditor path.line.stroke.tag-highway-steps {
stroke-width: 3;
}
.ideditor .low-zoom path.line.stroke.tag-highway-road {
stroke-width: 3;
}
+.ideditor .low-zoom path.line.casing.tag-highway-service.tag-service-driveway {
+ stroke-width: 4.25;
+}
+.ideditor .low-zoom path.line.stroke.tag-highway-service.tag-service-driveway {
+ stroke-width: 2.25;
+}
.ideditor .low-zoom path.line.shadow.tag-highway-path,
.ideditor .low-zoom path.line.shadow.tag-highway-footway,
.ideditor .low-zoom path.line.shadow.tag-highway-cycleway,
.ideditor .low-zoom path.line.shadow.tag-highway-bridleway,
.ideditor .low-zoom path.line.shadow.tag-highway-corridor,
+.ideditor .low-zoom path.line.shadow.tag-highway-ladder,
.ideditor .low-zoom path.line.shadow.tag-highway-steps {
stroke-width: 12;
}
.ideditor .low-zoom path.line.casing.tag-highway-cycleway,
.ideditor .low-zoom path.line.casing.tag-highway-bridleway,
.ideditor .low-zoom path.line.casing.tag-highway-corridor,
+.ideditor .low-zoom path.line.casing.tag-highway-ladder,
.ideditor .low-zoom path.line.casing.tag-highway-steps {
stroke-width: 3;
}
.ideditor .low-zoom path.line.stroke.tag-highway-cycleway,
.ideditor .low-zoom path.line.stroke.tag-highway-bridleway,
.ideditor .low-zoom path.line.stroke.tag-highway-corridor,
+.ideditor .low-zoom path.line.stroke.tag-highway-ladder,
.ideditor .low-zoom path.line.stroke.tag-highway-steps {
stroke-width: 1;
}
stroke: #666;
}
+.ideditor path.line.stroke.tag-highway-service.tag-service-parking_aisle {
+ stroke: #cccac7;
+}
+.ideditor path.line.stroke.tag-highway-service.tag-service-driveway {
+ stroke: #fff6e4;
+}
+.ideditor path.line.stroke.tag-highway-service.tag-service-emergency_access {
+ stroke: #ddb2aa;
+}
+
/* unmaintained track roads */
.ideditor path.line.stroke.tag-highway-track,
.ideditor path.line.stroke.tag-track {
.ideditor path.line.stroke.tag-public_transport-platform,
.ideditor path.line.stroke.tag-highway-platform,
.ideditor path.line.stroke.tag-railway-platform,
+.ideditor path.line.stroke.tag-railway-platform_edge,
.ideditor path.line.stroke.tag-man_made-pier {
stroke: #dca;
}
}
/* steps */
-.ideditor .preset-icon .icon.tag-highway-steps {
+.ideditor .preset-icon .icon.tag-highway-steps,
+.ideditor .preset-icon .icon.tag-highway-ladder {
color: #81d25c;
fill: #fff;
}
-.ideditor path.line.stroke.tag-highway-steps {
+.ideditor path.line.stroke.tag-highway-steps,
+.ideditor path.line.stroke.tag-highway-ladder {
stroke-linecap: butt;
stroke-dasharray: 3, 3;
}
-.ideditor .low-zoom path.line.stroke.tag-highway-steps {
+.ideditor .low-zoom path.line.stroke.tag-highway-steps,
+.ideditor .low-zoom path.line.stroke.tag-highway-ladder {
stroke-dasharray: 2, 2;
}
-.ideditor path.line.casing.tag-highway-steps {
+.ideditor path.line.casing.tag-highway-steps,
+.ideditor path.line.casing.tag-highway-ladder {
stroke: #fff;
stroke-linecap: round;
stroke-dasharray: none;
}
.ideditor path.line.stroke.tag-highway-steps,
-.ideditor .preset-icon-container path.line.casing.tag-highway-steps {
+.ideditor path.line.stroke.tag-highway-ladder,
+.ideditor .preset-icon-container path.line.casing.tag-highway-steps,
+.ideditor .preset-icon-container path.line.casing.tag-highway-ladder {
stroke: #81d25c;
}
-.ideditor .preset-icon-container path.line.stroke.tag-highway-steps {
+.ideditor .preset-icon-container path.line.stroke.tag-highway-steps,
+.ideditor .preset-icon-container path.line.stroke.tag-highway-ladder {
stroke: #fff;
}
.ideditor path.line.stroke.tag-highway.tag-footway-access_aisle {
stroke-dasharray: 4, 2;
+ stroke: #4c4444;
}
.ideditor .low-zoom path.line.stroke.tag-highway.tag-footway-access_aisle,
.ideditor .preset-icon-container path.stroke.tag-highway.tag-footway-access_aisle {
stroke-dasharray: 2.5, 1.5;
}
-.ideditor path.line.stroke.tag-highway.tag-footway-access_aisle {
- stroke: #4c4444;
-}
.ideditor .preset-icon .icon.tag-highway.tag-footway-access_aisle {
color: #4c4444;
}
/* highway midpoints */
.ideditor g.midpoint.tag-highway-corridor .fill,
.ideditor g.midpoint.tag-highway-steps .fill,
+.ideditor g.midpoint.tag-highway-ladder .fill,
.ideditor g.midpoint.tag-highway-path .fill,
.ideditor g.midpoint.tag-highway-footway .fill,
.ideditor g.midpoint.tag-highway-cycleway .fill,
}
.ideditor path.line.casing.tag-aeroway-taxiway,
.ideditor path.line.casing.tag-taxiway {
+ stroke: #666;
stroke-width: 7;
}
.ideditor path.line.stroke.tag-aeroway-taxiway,
.ideditor path.line.stroke.tag-taxiway {
+ stroke: #ff0;
stroke-width: 5;
}
.ideditor .low-zoom path.line.shadow.tag-aeroway-taxiway,
stroke-width: 3;
}
-.ideditor path.line.stroke.tag-aeroway-taxiway,
-.ideditor path.line.stroke.tag-taxiway {
- stroke: #ff0;
-}
-.ideditor path.line.casing.tag-aeroway-taxiway,
-.ideditor path.line.casing.tag-taxiway {
- stroke: #666;
-}
-
/* wide aeroways (runway) */
.ideditor .preset-icon .icon.tag-aeroway-runway,
.ideditor .preset-icon .icon.tag-runway {
.ideditor path.line.stroke.tag-railway {
stroke-width: 2;
stroke-linecap: butt;
- stroke-dasharray: 12,12;
+ stroke-dasharray: 12, 12;
}
.ideditor .low-zoom path.line.shadow.tag-railway {
stroke-width: 12;
}
.ideditor .low-zoom path.line.stroke.tag-railway {
stroke-width: 2;
- stroke-dasharray: 6,6;
+ stroke-dasharray: 6, 6;
}
.ideditor .preset-icon-container path.line.stroke.tag-railway:not(.tag-status),
.ideditor .preset-icon-container path.line.stroke.tag-railway.tag-status-disused {
stroke-dasharray: 6;
}
+.ideditor path.line.casing.tag-railway.tag-railway-platform_edge,
.ideditor path.line.casing.tag-railway.tag-railway-platform {
stroke-width: 0;
}
+.ideditor path.line.stroke.tag-railway.tag-railway-platform_edge,
.ideditor path.line.stroke.tag-railway.tag-railway-platform {
stroke-dasharray: none;
}
stroke: #eee;
}
-
.ideditor .preset-icon .icon.tag-railway.tag-status {
color: #999;
}
stroke: #808080;
}
-
.ideditor path.line.casing.tag-railway-subway {
stroke: #222;
}
/* wide waterways (river) */
-.ideditor path.line.shadow.tag-waterway-river {
+.ideditor path.line.shadow.tag-waterway-river,
+.ideditor path.line.shadow.tag-waterway-flowline {
stroke-width: 20;
}
-.ideditor path.line.casing.tag-waterway-river {
+.ideditor path.line.casing.tag-waterway-river,
+.ideditor path.line.casing.tag-waterway-flowline {
stroke-width: 10;
}
-.ideditor path.line.stroke.tag-waterway-river {
+.ideditor path.line.stroke.tag-waterway-river,
+.ideditor path.line.stroke.tag-waterway-flowline {
stroke-width: 8;
}
-.ideditor .low-zoom path.line.shadow.tag-waterway-river {
+.ideditor .low-zoom path.line.shadow.tag-waterway-river,
+.ideditor .low-zoom path.line.shadow.tag-waterway-flowline {
stroke-width: 16;
}
-.ideditor .low-zoom path.line.casing.tag-waterway-river {
+.ideditor .low-zoom path.line.casing.tag-waterway-river,
+.ideditor .low-zoom path.line.casing.tag-waterway-flowline {
stroke-width: 7;
}
-.ideditor .low-zoom path.line.stroke.tag-waterway-river {
+.ideditor .low-zoom path.line.stroke.tag-waterway-river,
+.ideditor .low-zoom path.line.stroke.tag-waterway-flowline {
stroke-width: 5;
}
+.ideditor path.line.stroke.tag-waterway-flowline {
+ stroke-opacity: 0.5;
+}
+.ideditor path.line.casing.tag-waterway-flowline {
+ display: none;
+}
+
/* ditch */
.ideditor .preset-icon .icon.tag-waterway-ditch {
.ideditor path.line.shadow.tag-golf-cartpath,
.ideditor path.line.shadow.tag-man_made-pipeline,
.ideditor path.line.shadow.tag-natural-tree_row,
+.ideditor path.line.shadow.tag-roller_coaster-track,
+.ideditor path.line.shadow.tag-roller_coaster-support,
.ideditor path.line.shadow.tag-piste {
stroke-width: 16;
}
.ideditor path.line.casing.tag-golf-cartpath,
.ideditor path.line.casing.tag-man_made-pipeline,
.ideditor path.line.casing.tag-natural-tree_row,
+.ideditor path.line.casing.tag-roller_coaster-track,
+.ideditor path.line.casing.tag-roller_coaster-support,
.ideditor path.line.casing.tag-piste {
stroke-width: 7;
}
.ideditor path.line.stroke.tag-golf-cartpath,
.ideditor path.line.stroke.tag-man_made-pipeline,
.ideditor path.line.stroke.tag-natural-tree_row,
+.ideditor path.line.stroke.tag-roller_coaster-track,
+.ideditor path.line.stroke.tag-roller_coaster-support,
.ideditor path.line.stroke.tag-piste {
stroke-width: 5;
}
.ideditor .low-zoom path.line.shadow.tag-golf-cartpath,
.ideditor .low-zoom path.line.shadow.tag-man_made-pipeline,
.ideditor .low-zoom path.line.shadow.tag-natural-tree_row,
+.ideditor .low-zoom path.line.shadow.tag-roller_coaster-track,
+.ideditor .low-zoom path.line.shadow.tag-roller_coaster-support,
.ideditor .low-zoom path.line.shadow.tag-piste {
stroke-width: 12;
}
.ideditor .low-zoom path.line.casing.tag-golf-cartpath,
.ideditor .low-zoom path.line.casing.tag-man_made-pipeline,
.ideditor .low-zoom path.line.casing.tag-natural-tree_row,
+.ideditor .low-zoom path.line.casing.tag-roller_coaster-track,
+.ideditor .low-zoom path.line.casing.tag-roller_coaster-support,
.ideditor .low-zoom path.line.casing.tag-piste {
stroke-width: 5;
}
.ideditor .low-zoom path.line.stroke.tag-golf-cartpath,
.ideditor .low-zoom path.line.stroke.tag-man_made-pipeline,
.ideditor .low-zoom path.line.stroke.tag-natural-tree_row,
+.ideditor .low-zoom path.line.stroke.tag-roller_coaster-track,
+.ideditor .low-zoom path.line.stroke.tag-roller_coaster-support,
.ideditor .low-zoom path.line.stroke.tag-piste {
stroke-width: 3;
}
stroke-width: 16;
}
.ideditor path.line.stroke.tag-route-ferry {
+ stroke: #58a9ed;
stroke-width: 3;
stroke-linecap: butt;
stroke-dasharray: 12,8;
stroke-width: 2;
stroke-dasharray: 6,4;
}
-.ideditor path.line.stroke.tag-route-ferry {
- stroke: #58a9ed;
-}
.ideditor path.line.casing.tag-route-ferry {
stroke: none;
}
stroke: #3d6c71;
}
+.ideditor path.line.stroke.tag-roller_coaster-track {
+ stroke: #dddddd;
+ stroke-width: 3;
+ stroke-dasharray: 5, 1;
+ stroke-linecap: butt;
+}
+.ideditor path.line.casing.tag-roller_coaster-track {
+ stroke: #707070;
+}
+
+.ideditor path.line.stroke.tag-roller_coaster-support {
+ stroke: #707070;
+}
+.ideditor path.line.casing.tag-roller_coaster-support {
+ visibility: hidden;
+}
+
/* golf cartpaths (like service roads) */
.ideditor .preset-icon .icon.tag-golf-cartpath {
.ideditor path.line.casing.tag-bridge {
stroke-opacity: 0.6;
stroke: #000 !important;
+ stroke-width: 16;
stroke-linecap: butt;
stroke-dasharray: none;
}
.ideditor path.line.shadow.tag-bridge {
stroke-width: 24;
}
-.ideditor path.line.casing.tag-bridge {
- stroke-width: 16;
-}
.ideditor .low-zoom path.line.shadow.tag-bridge {
stroke-width: 16;
}
.ideditor path.line.shadow.tag-highway-service.tag-bridge,
.ideditor path.line.shadow.tag-highway-track.tag-bridge,
.ideditor path.line.shadow.tag-highway-steps.tag-bridge,
+.ideditor path.line.shadow.tag-highway-ladder.tag-bridge,
.ideditor path.line.shadow.tag-highway-footway.tag-bridge,
.ideditor path.line.shadow.tag-highway-cycleway.tag-bridge,
.ideditor path.line.shadow.tag-highway-bridleway.tag-bridge {
.ideditor path.line.casing.tag-highway-service.tag-bridge,
.ideditor path.line.casing.tag-highway-track.tag-bridge,
.ideditor path.line.casing.tag-highway-steps.tag-bridge,
+.ideditor path.line.casing.tag-highway-ladder.tag-bridge,
.ideditor path.line.casing.tag-highway-footway.tag-bridge,
.ideditor path.line.casing.tag-highway-cycleway.tag-bridge,
.ideditor path.line.casing.tag-highway-bridleway.tag-bridge {
.ideditor .low-zoom path.line.shadow.tag-highway-service.tag-bridge,
.ideditor .low-zoom path.line.shadow.tag-highway-track.tag-bridge,
.ideditor .low-zoom path.line.shadow.tag-highway-steps.tag-bridge,
+.ideditor .low-zoom path.line.shadow.tag-highway-ladder.tag-bridge,
.ideditor .low-zoom path.line.shadow.tag-highway-footway.tag-bridge,
.ideditor .low-zoom path.line.shadow.tag-highway-cycleway.tag-bridge,
.ideditor .low-zoom path.line.shadow.tag-highway-bridleway.tag-bridge {
.ideditor .low-zoom path.line.casing.tag-highway-service.tag-bridge,
.ideditor .low-zoom path.line.casing.tag-highway-track.tag-bridge,
.ideditor .low-zoom path.line.casing.tag-highway-steps.tag-bridge,
+.ideditor .low-zoom path.line.casing.tag-highway-ladder.tag-bridge,
.ideditor .low-zoom path.line.casing.tag-highway-footway.tag-bridge,
.ideditor .low-zoom path.line.casing.tag-highway-cycleway.tag-bridge,
.ideditor .low-zoom path.line.casing.tag-highway-bridleway.tag-bridge {
}
.ideditor path.line.casing.tag-tunnel,
.ideditor path.line.casing.tag-location-underground,
-.ideditor path.line.stroke.tag-location-underwater {
+.ideditor path.line.casing.tag-location-underwater {
stroke-opacity: 0.5;
stroke-linecap: butt;
stroke-dasharray: none;
stroke-dasharray: 8, 8;
}
+/** Closed Paths */
+.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-path,
+.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-footway,
+.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-cycleway,
+.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-bridleway,
+.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-corridor,
+.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-steps,
+.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-ladder {
+ stroke-width: 15;
+}
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-path,
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-footway,
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-cycleway,
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-bridleway,
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-corridor,
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-steps,
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-ladder {
+ stroke-width: 5;
+ stroke-linecap: butt;
+ stroke-dasharray: none
+}
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-path,
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-footway,
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-cycleway,
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-bridleway,
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-corridor,
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-steps,
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-ladder {
+ stroke-width: 4;
+ stroke-linecap: butt;
+ stroke-dasharray: 10, 10;
+}
+
+/** Proposed Paths */
+.ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-path,
+.ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-footway,
+.ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-cycleway,
+.ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-bridleway,
+.ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-steps,
+.ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-ladder {
+ stroke-width: 15;
+}
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-path,
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-footway,
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-cycleway,
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-bridleway,
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-steps,
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-ladder {
+ stroke-width: 4.5;
+}
+.ideditor path.line.casing.tag-highway.tag-bridge.tag-status.tag-status-proposed.tag-proposed-path,
+.ideditor path.line.casing.tag-highway.tag-bridge.tag-status.tag-status-proposed.tag-proposed-footway,
+.ideditor path.line.casing.tag-highway.tag-bridge.tag-status.tag-status-proposed.tag-proposed-cycleway,
+.ideditor path.line.casing.tag-highway.tag-bridge.tag-status.tag-status-proposed.tag-proposed-bridleway,
+.ideditor path.line.casing.tag-highway.tag-bridge.tag-status.tag-status-proposed.tag-proposed-steps,
+.ideditor path.line.casing.tag-highway.tag-bridge.tag-status.tag-status-proposed.tag-proposed-ladder {
+ stroke-width: 10;
+}
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-path,
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-footway,
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-cycleway,
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-bridleway,
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-steps,
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-ladder {
+ stroke-width: 3;
+}
/* Buildings */
.ideditor path.stroke.tag-building {
.ideditor .turn circle {
cursor: pointer;
}
+/* legend */
+.ideditor li.list-item-photos.active:after {
+ display: block;
+ content: "";
+ height: 100%;
+ position: absolute;
+ right: 0;
+ width: 8px;
+}
+.ideditor[dir='rtl'] li.list-item-photos.active:after {
+ right: auto;
+ left: 0;
+}
+
/* photo viewer div */
.ideditor .photoviewer {
position: relative;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
+ flex-shrink: 0;
margin-bottom: 10px;
width: 330px;
height: 250px;
z-index: 50;
}
+.ideditor .photoviewer button.set-photo-from-viewer {
+ border-radius: 0;
+ padding: 5px;
+ position: absolute;
+ left: 5px;
+ top: 5px;
+ z-index: 50;
+}
+
.ideditor .photoviewer button.resize-handle-xy {
border-radius: 0;
position: absolute;
}
-.ideditor .photo-wrapper,
-.ideditor .photo-wrapper img {
+.ideditor .photo-wrapper {
width: 100%;
height: 100%;
overflow: hidden;
- -o-object-fit: cover;
- object-fit: cover;
}
.ideditor .photo-wrapper .photo-attribution {
width: 100%;
font-size: 10px;
text-align: right;
- line-height: 1.1em;
- padding: 4px 2px;
+ line-height: 150%;
+ padding: 4px 8px;
z-index: 10;
}
+.ideditor .photo-attribution-dual {
+ display: flex;
+ justify-content: space-between;
+}
.ideditor .photo-attribution a,
.ideditor .photo-attribution a:visited,
.ideditor .photo-attribution span {
padding: 4px 2px;
color: #fff;
+ text-wrap: nowrap;
}
/* markers and sequences */
}
.ideditor .viewfield-group.currentView .viewfield-scale {
- -webkit-transform: scale(2,2);
- -ms-transform: scale(2,2);
- transform: scale(2,2);
+ transform: scale(2,2);
}
.ideditor .sequence {
fill: none;
stroke-width: 2;
- stroke-opacity: 0.4;
+ stroke-opacity: 0.6;
}
.ideditor .sequence.highlighted,
.ideditor .sequence.currentView {
/* Streetside Image Layer */
+.ideditor li.list-item-photos.list-item-streetside.active:after {
+ background-color: #0fffc4;
+}
.ideditor .layer-streetside-images {
pointer-events: none;
}
stroke-opacity: 0.85; /* bump opacity - only one per road */
}
+/* Vegbilder Image Layer */
+.ideditor li.list-item-photos.list-item-vegbilder.active:after {
+ background-color: #ed1c2e;
+}
+.ideditor .layer-vegbilder {
+ pointer-events: none;
+}
+.ideditor .layer-vegbilder .viewfield-group * {
+ fill: #ed1c2e;
+}
+.ideditor .layer-vegbilder .sequence {
+ stroke: #ed1c2e;
+ stroke-opacity: 0.85; /* bump opacity - only one per road */
+}
+
/* Mapillary Image Layer */
+.ideditor li.list-item-photos.list-item-mapillary.active:after {
+ background-color: #55ff22;
+}
.ideditor .layer-mapillary {
pointer-events: none;
}
}
-/* OpenStreetCam Image Layer */
-.ideditor .layer-openstreetcam {
+/* KartaView Image Layer */
+.ideditor li.list-item-photos.list-item-kartaview.active:after {
+ background-color: #20c4ff;
+}
+.ideditor .layer-kartaview {
pointer-events: none;
}
-.ideditor .layer-openstreetcam .viewfield-group * {
+.ideditor .layer-kartaview .viewfield-group * {
fill: #20c4ff;
}
-.ideditor .layer-openstreetcam .sequence {
+.ideditor .layer-kartaview .sequence {
stroke: #20c4ff;
}
+/* Mapilio Image Layer */
+.ideditor li.list-item-photos.list-item-mapilio.active:after {
+ background-color: #0056f1;
+}
+.ideditor .layer-mapilio {
+ pointer-events: none;
+}
+.ideditor .layer-mapilio .viewfield-group * {
+ fill: #0056f1;
+ stroke: #ffffff;
+ stroke-opacity: .6;
+ fill-opacity: .6;
+}
+.ideditor .layer-mapilio .sequence {
+ stroke: #0056f1;
+}
+.ideditor .photo-controls-mapilio {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 4px;
+}
+.ideditor .photo-controls-mapilio button {
+ padding:0 6px;
+ pointer-events: initial;
+}
+.ideditor .mapilio-wrapper {
+ position: relative;
+ background-color: #000;
+ background-image: url(<%= asset_path("iD/img/loader-black.gif") %>);
+ background-position: center;
+ background-repeat: no-repeat;
+}
+.ideditor #ideditor-viewer-mapilio-simple-wrap {
+ height: 100%;
+}
+.ideditor #ideditor-viewer-mapilio-simple {
+ width: 100%;
+ height: 100%;
+ transform-origin: 0 0;
+}
+.ideditor #ideditor-viewer-mapilio-simple img {
+ width: 100%;
+ height: 100%;
+ -o-object-fit: cover;
+ object-fit: cover;
+ overflow: hidden;
+}
+
+/* panoramax Image Layer */
+.ideditor li.list-item-photos.list-item-panoramax.active:after {
+ background-color: #ff6f00;
+}
+.ideditor .layer-panoramax {
+ pointer-events: none;
+}
+.ideditor .layer-panoramax .viewfield-group * {
+ fill: #ff6f00;
+ stroke: #ffffff;
+ stroke-opacity: .6;
+ fill-opacity: .6;
+}
+.ideditor .layer-panoramax .sequence {
+ stroke: #ff6f00;
+}
+.ideditor .photo-controls-panoramax {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 4px;
+}
+.ideditor .photo-controls-panoramax button {
+ padding:0 6px;
+ pointer-events: initial;
+}
+
+.ideditor label.panoramax-hd {
+ float: left;
+ cursor: pointer;
+}
+.ideditor .panoramax-hd span {
+ margin-top: 2px;
+}
+.ideditor .panoramax-hd input[type="checkbox"] {
+ width: 12px;
+ height: 12px;
+ margin: 0 2px;
+}
+
+.ideditor .slider-wrap {
+ display: inline-block;
+}
+
+.ideditor .year-datalist {
+ display: flex;
+ justify-content: space-between;
+}
+
+.ideditor .list-option-date-slider{
+ direction: rtl
+}
+
+
/* Streetside Viewer (pannellum) */
+.ideditor .ms-wrapper .photo-attribution {
+ line-height: 1.1em;
+ padding: 4px 2px;
+}
.ideditor .ms-wrapper .photo-attribution .image-link {
display: block;
}
.ideditor .ms-wrapper .photo-attribution .attribution-row {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -webkit-flex-flow: row nowrap;
- -ms-flex-flow: row nowrap;
- flex-flow: row nowrap;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
- -webkit-box-align: center;
- -webkit-align-items: center;
- -ms-flex-align: center;
- align-items: center;
+ flex-flow: row nowrap;
+ justify-content: space-between;
+ align-items: center;
padding: 0 5px;
}
.ideditor .ms-wrapper .photo-attribution .image-view-link {
}
}
-.ideditor .ms-wrapper .pnlm-compass.pnlm-control {
+.ideditor .ms-wrapper .pnlm-compass.pnlm-control,
+.ideditor .vegbilder-wrapper .pnlm-compass.pnlm-control,
+.ideditor .panoramax-wrapper .pnlm-compass.pnlm-control {
width: 26px;
height: 26px;
left: 4px;
margin: 0 5px;
}
+.ideditor .pnlm-zoom-controls {
+ margin-top: 6px;
+}
+
/* Mapillary viewer */
.ideditor #ideditor-mly .domRenderer .TagSymbol {
border-radius: 4px;
top: -25px;
}
-.ideditor #ideditor-mly .domRenderer .Attribution {
- /* we will roll our own to avoid async update issues like #4526 */
- display: none;
+
+.ideditor .mly-wrapper .mapillary-attribution-container {
+ display: flex;
+ align-items: center;
}
-.ideditor .mly-wrapper .photo-attribution a:active {
- color: #35af6d;
+.ideditor .mly-wrapper .mapillary-attribution-container .mapillary-attribution-icon-container {
+ display: flex;
+ align-items: center;
}
-@media (hover: hover) {
- .ideditor .mly-wrapper .photo-attribution a:hover {
- color: #35af6d;
- }
+
+.ideditor .mapillary-attribution-image-container {
+ height: auto;
}
-.ideditor .mly-wrapper .mapillary-js-dom {
- z-index: 9;
+.ideditor .mly-wrapper .mapillary-attribution-container .mapillary-attribution-username {
+ padding: 0px 8px 0 6px;
}
+.ideditor .mly-wrapper .mapillary-attribution-container .mapillary-attribution-date {
+ margin-right: 6px;
+}
-/* OpenStreetCam viewer */
-.ideditor .osc-wrapper {
+/* KartaView viewer */
+.ideditor .kartaview-wrapper {
position: relative;
background-color: #000;
background-image: url(<%= asset_path("iD/img/loader-black.gif") %>);
background-repeat: no-repeat;
}
-.ideditor .osc-wrapper .photo-attribution a:active {
+.ideditor .kartaview-wrapper img {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ -o-object-fit: cover;
+ object-fit: cover;
+}
+
+.ideditor .kartaview-wrapper .photo-attribution a:active {
color: #20c4ff;
}
@media (hover: hover) {
- .ideditor .osc-wrapper .photo-attribution a:hover {
+ .ideditor .kartaview-wrapper .photo-attribution a:hover {
color: #20c4ff;
}
}
-.ideditor .osc-image-wrap {
+.ideditor .kartaview-image-wrap {
width: 100%;
height: 100%;
- -webkit-transform-origin:0 0;
- -ms-transform-origin:0 0;
- transform-origin:0 0;
+ transform-origin: 0 0;
+}
+
+.ideditor .photo-wrapper {
+ position: relative;
+ background-color: #000;
+ background-image: url(<%= asset_path("iD/img/loader-black.gif") %>);
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+.ideditor .photoviewer .plane-frame {
+ height: 100%;
+ width: 100%;
+ transform-origin: 0 0;
}
+.ideditor .photoviewer .plane-frame > img.plane-photo {
+ width: auto;
+ height: 100%;
+ transform-origin: 0 0;
+}
/* photo-controls (step forward, back, rotate) */
.ideditor .photo-controls-wrap {
top: 10px;
width: 100%;
z-index: 10;
+ pointer-events: none;
}
.ideditor .photo-controls {
display: inline-block;
z-index: 10;
+ pointer-events: initial;
}
.ideditor .photo-controls button,
.ideditor .photo-controls button:focus {
height: 18px;
width: 18px;
+ line-height: 18px;
background: rgba(0,0,0,0.65);
color: #eee;
border-radius: 0;
}
}
-/* OSM Notes and QA Layers */
-
-.ideditor .qa-header-icon .qaItem-fill,
-.ideditor .layer-keepRight .qaItem .qaItem-fill,
-.ideditor .layer-improveOSM .qaItem .qaItem-fill,
-.ideditor .layer-osmose .qaItem .qaItem-fill {
- stroke: #333;
- stroke-width: 1.3px; /* NOTE: likely a better way to scale the icon stroke */
-}
-
-.ideditor .note-header-icon .note-fill,
-.ideditor .layer-notes .note .note-fill {
- color: #f30;
- stroke: #333;
- stroke-width: 40px;
-}
-.ideditor .note-header-icon.new .note-fill,
-.ideditor .layer-notes .note.new .note-fill {
- color: #fe0;
- stroke: #333;
- stroke-width: 40px;
+/* local georeferenced photos */
+.ideditor .layer-local-photos {
+ pointer-events: none;
}
-.ideditor .note-header-icon.closed .note-fill,
-.ideditor .layer-notes .note.closed .note-fill {
- color: #5d0;
- stroke: #333;
- stroke-width: 40px;
+.ideditor .layer-local-photos .viewfield-group * {
+ fill: #ed00d9;
}
-
-/* slight adjustments to preset icon for note icons */
-.ideditor .note-header-icon .preset-icon-28 {
- top: 18px;
+.ideditor .local-photos {
+ display: flex;
}
-.ideditor .note-header-icon .note-icon-annotation {
- position: absolute;
- top: 22px;
- left: 22px;
- margin: auto;
+.ideditor .local-photos > div {
+ width: 50%;
}
-.ideditor .note-header-icon .note-icon-annotation .icon {
- width: 15px;
- height: 15px;
+.ideditor .local-photos > div:first-child {
+ margin-right: 20px;
}
-/* adjustment to center QA icons */
-.ideditor .qa-header-icon .preset-icon-28 {
- top: auto;
- left: auto;
+.ideditor .list-local-photos {
+ max-height: 40vh;
+ overflow-y: scroll;
+ overflow-x: auto;
+ /* workaround for something like "overflow-x: visible"
+ see https://stackoverflow.com/a/39554003 */
+ margin-left: -100px;
+ padding-left: 100px;
+ margin-top: -20px;
+ padding-top: 20px;
+ min-height: 100px;
}
-.ideditor .qa-header-icon {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
+.ideditor .list-local-photos::-webkit-scrollbar {
+ border-left: none;
+}
+.ideditor .list-local-photos li {
+ list-style: none;
display: flex;
- -webkit-box-align: center;
- -webkit-align-items: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
+ justify-content: space-between;
+ height: 30px;
}
-
-/* Keep Right Issues
-------------------------------------------------------- */
-.ideditor .keepRight.itemType-20,
-.ideditor .keepRight.itemType-40,
-.ideditor .keepRight.itemType-210,
-.ideditor .keepRight.itemType-270,
-.ideditor .keepRight.itemType-310,
+.ideditor .list-local-photos span.filename {
+ display: block;
+ width: 100%;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ line-height: 30px;
+ padding-left: 8px;
+ border-bottom: 1px solid #ccc;
+ border-left: 1px solid #ccc;
+ border-right: 1px solid #ccc;
+}
+.ideditor .list-local-photos li:first-child span.filename {
+ border-top: 1px solid #ccc;
+ border-top-left-radius: 4px;
+}
+.ideditor .list-local-photos li:first-child button {
+ border-top: 1px solid #ccc;
+}
+.ideditor .list-local-photos li:first-child button.remove {
+ border-top-right-radius: 4px;
+}
+.ideditor .list-local-photos li:last-child span.filename {
+ border-bottom-left-radius: 4px;
+}
+.ideditor .list-local-photos li:last-child button.remove {
+ border-bottom-right-radius: 4px;
+}
+.ideditor .list-local-photos li.invalid button.zoom-to-data {
+ display: none;
+}
+.ideditor .list-local-photos li button.no-geolocation {
+ display: none;
+}
+.ideditor .list-local-photos li.invalid button.no-geolocation {
+ display: block;
+ color: red;
+}
+.ideditor .list-local-photos .placeholder div {
+ display: block;
+ height: 40px;
+ width: 40px;
+ background-position: center;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-image: url(<%= asset_path("iD/img/loader-black.gif") %>);
+ filter: invert(1);
+}
+.ideditor .local-photos label.button {
+ background: #7092ff;
+ color: #fff;
+ font-weight: bold;
+ padding: 10px 25px;
+ text-align: center;
+ font-size: 12px;
+ display: inline-block;
+ border-radius: 4px;
+ cursor: pointer;
+}
+
+
+/* OSM Notes and QA Layers */
+
+.ideditor .qa-header-icon .qaItem-fill,
+.ideditor .layer-keepRight .qaItem .qaItem-fill,
+.ideditor .layer-osmose .qaItem .qaItem-fill {
+ stroke: #333;
+ stroke-width: 1.3px; /* NOTE: likely a better way to scale the icon stroke */
+}
+
+.ideditor .note-header-icon .note-fill,
+.ideditor .layer-notes .note .note-fill {
+ color: #f30;
+ stroke: #333;
+ stroke-width: 40px;
+}
+.ideditor .note-header-icon.new .note-fill,
+.ideditor .layer-notes .note.new .note-fill {
+ color: #fe0;
+ stroke: #333;
+ stroke-width: 40px;
+}
+.ideditor .note-header-icon.closed .note-fill,
+.ideditor .layer-notes .note.closed .note-fill {
+ color: #5d0;
+ stroke: #333;
+ stroke-width: 40px;
+}
+
+/* slight adjustments to preset icon for note icons */
+.ideditor .note-header-icon .preset-icon-28 {
+ top: 18px;
+}
+.ideditor .note-header-icon .note-icon-annotation {
+ position: absolute;
+ top: 22px;
+ left: 22px;
+ margin: auto;
+}
+.ideditor .note-header-icon .note-icon-annotation .icon {
+ width: 15px;
+ height: 15px;
+}
+
+/* adjustment to center QA icons */
+.ideditor .qa-header-icon .preset-icon-28 {
+ top: auto;
+ left: auto;
+}
+.ideditor .qa-header-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+/* Keep Right Issues
+------------------------------------------------------- */
+.ideditor .keepRight.itemType-20,
+.ideditor .keepRight.itemType-40,
+.ideditor .keepRight.itemType-210,
+.ideditor .keepRight.itemType-270,
+.ideditor .keepRight.itemType-310,
.ideditor .keepRight.itemType-320,
.ideditor .keepRight.itemType-350 { /* improper bridge tag */
color: #ff9;
color: #c35;
}
-/* ImproveOSM Issues
-------------------------------------------------------- */
-
-.ideditor .improveOSM.itemType-ow { /* missing one way */
- color: #1E90FF;
-}
-
-.ideditor .improveOSM.itemType-mr-road { /* missing road */
- color: #B452CD;
-}
-.ideditor .improveOSM.itemType-mr-path { /* missing path */
- color: #A0522D;
-}
-.ideditor .improveOSM.itemType-mr-parking { /* missing parking */
- color: #EEEE00;
-}
-.ideditor .improveOSM.itemType-mr-both { /* missing road+parking */
- color: #FFA500;
-}
-
-.ideditor .improveOSM.itemType-tr { /* missing turn restriction */
- color: #EC1C24;
-}
-
/* Custom Map Data (geojson, gpx, kml, vector tile) */
.ideditor .layer-mapdata {
pointer-events: none;
dominant-baseline: middle;
}
.ideditor .layer-mapdata text.label {
- fill: #ff26d4;
+ fill: #ddd;
}
.ideditor .layer-mapdata text.label.hover,
.ideditor .layer-mapdata text.label.selected {
- fill: #f6634f;
+ fill: #fff;
}
.ideditor .layer-mapdata text.label-halo {
opacity: 0.7;
stroke: #000;
stroke-width: 5px;
stroke-miterlimit: 1;
-}/* Fill Styles */
+}
+/* Fill Styles */
.ideditor .low-zoom.fill-wireframe path.stroke,
.ideditor .fill-wireframe path.stroke {
.ideditor.mode-select-note .fill-partial path.area.fill {
pointer-events: visibleStroke;
}
+.ideditor svg.preset-icon-category-border path {
+ stroke-width: 1;
+ stroke: rgb(170, 170, 170);
+ fill: rgba(170, 170, 170, 0.3);
+}
+
+.ideditor .preset-category-barrier svg.preset-icon-category-border path {
+ stroke: rgb(200, 144, 144);
+ fill: rgba(200, 144, 144, 0.3);
+}
+
+.ideditor .preset-category-building svg.preset-icon-category-border path {
+ stroke: rgb(224, 110, 95);
+ fill: rgba(224, 110, 95, 0.3);
+}
+
+.ideditor .preset-category-landuse svg.preset-icon-category-border path {
+ stroke: rgb(196, 189, 25);
+ fill: rgba(196, 189, 25, 0.3);
+}
+
+.ideditor .preset-category-natural svg.preset-icon-category-border path,
+.ideditor .preset-category-playground svg.preset-icon-category-border path,
+.ideditor .preset-category-golf svg.preset-icon-category-border path {
+ stroke: rgb(140, 208, 95);
+ fill: rgba(140, 208, 95, 0.3);
+}
+
+.ideditor .preset-category-water svg.preset-icon-category-border path,
+.ideditor .preset-category-waterway svg.preset-icon-category-border path {
+ stroke: rgb(119, 211, 222);
+ fill: rgba(119, 211, 222, 0.3);
+}
+
+.ideditor .preset-category-utility svg.preset-icon-category-border path {
+ stroke: rgb(125, 125, 125);
+ fill: rgba(219, 219, 125, 0.3);
+}
+
+.ideditor .preset-category-path svg.preset-icon-category-border path {
+ stroke: rgb(221, 221, 204);
+ fill: rgba(221, 221, 204, 0.3);
+}
+
+.ideditor .preset-category-road_service svg.preset-icon-category-border path,
+.ideditor .preset-category-road_minor svg.preset-icon-category-border path,
+.ideditor .preset-category-road_major svg.preset-icon-category-border path {
+ stroke: #999;
+}
+
+.ideditor .preset-category-rail svg.preset-icon-category-border path {
+ stroke: #555;
+}
/* Basics
------------------------------------------------------- */
/* the root element of iD */
sans-serif;
color: #333;
- -ms-touch-action: none;
-
- touch-action: none;
+ touch-action: none;
-ms-user-select: none;
-ms-content-zooming: none;
}
.ideditor div {
/* disable pinch-to-zoom of the UI on touch devices */
- -ms-touch-action: pan-x pan-y;
- touch-action: pan-x pan-y;
+ touch-action: pan-x pan-y;
}
.ideditor .main-content {
position: relative;
+ display: flex;
+ flex-direction: column;
overflow: hidden;
height: 100%;
- -ms-touch-action: none;
- touch-action: none;
+ touch-action: none;
}
.ideditor .main-content.active {
- -webkit-filter: none !important;
- filter: none !important;
- -webkit-transition-duration: 200ms;
- -o-transition-duration: 200ms;
- transition-duration: 200ms;
+ filter: none !important;
+ transition-duration: 200ms;
}
.ideditor .main-content.inactive {
- -webkit-filter: grayscale(80%) brightness(80%);
- filter: grayscale(80%) brightness(80%);
- -webkit-transition-duration: 200ms;
- -o-transition-duration: 200ms;
- transition-duration: 200ms;
+ filter: grayscale(80%) brightness(80%);
+ transition-duration: 200ms;
}
.ideditor #ideditor-defs {
}
.ideditor div, .ideditor textarea, .ideditor label, .ideditor input, .ideditor form, .ideditor span, .ideditor ul, .ideditor li, .ideditor ol, .ideditor a, .ideditor button, .ideditor h1, .ideditor h2, .ideditor h3, .ideditor h4, .ideditor h5, .ideditor p, .ideditor img {
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
+ box-sizing: border-box;
}
.ideditor a, .ideditor button, .ideditor input, .ideditor textarea {
font-weight: bold;
margin-bottom: 20px;
}
+.ideditor .header h2 {
+ font-size: 20px;
+ line-height: 1.25;
+ font-weight: bold;
+ margin-bottom: 0px;
+}
.ideditor h3:last-child,
-.ideditor h2:last-child,
.ideditor h4:last-child { margin-bottom: 0;}
.ideditor h3 {
padding-bottom: 10px;
}
-.ideditor :focus {
+.ideditor button:focus,
+.ideditor textarea:focus,
+.ideditor input[type=text]:focus,
+.ideditor input[type=search]:focus,
+.ideditor input[type=number]:focus,
+.ideditor input[type=url]:focus,
+.ideditor input[type=tel]:focus,
+.ideditor input[type=email]:focus,
+.ideditor input[type=date]:focus {
outline-color: transparent;
outline-style: none;
}
-.ideditor ::-webkit-input-placeholder {
- color: #aaa;
- opacity: 1; /* Firefox */
-}
-
.ideditor ::-moz-placeholder {
color: #aaa;
opacity: 1; /* Firefox */
}
-.ideditor :-ms-input-placeholder {
- color: #aaa;
- opacity: 1; /* Firefox */
-}
-
-.ideditor ::-ms-input-placeholder {
- color: #aaa;
- opacity: 1; /* Firefox */
-}
-
.ideditor ::placeholder {
color: #aaa;
opacity: 1; /* Firefox */
.ideditor a:active {
color: #7092ff;
}
+.ideditor a:focus {
+ color: #597be7;
+}
@media (hover: hover) {
.ideditor a:hover {
color: #597be7;
text-align: center;
padding: 3px 5px;
font-size: 11px;
- line-height: 12px;
- min-width: 12px;
+ line-height: 1.3;
+ min-width: 0.9em;
vertical-align: baseline;
background-color: #fcfcfc;
border: solid 1px #ccc;
margin: 0 2px;
border-bottom-color: #bbb;
border-radius: 3px;
- -webkit-box-shadow: inset 0 -1px 0 #bbb;
- box-shadow: inset 0 -1px 0 #bbb;
+ box-shadow: inset 0 -1px 0 #bbb;
}
.ideditor code {
/* Forms
------------------------------------------------------- */
-.ideditor textarea {
- resize: vertical;
- font:normal 12px/20px "-apple-system", BlinkMacSystemFont,
- "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
- "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
- sans-serif;
-}
-
.ideditor textarea,
.ideditor input[type=text],
.ideditor input[type=search],
.ideditor input[type=number],
.ideditor input[type=url],
.ideditor input[type=tel],
-.ideditor input[type=email] {
+.ideditor input[type=email],
+.ideditor input[type=date] {
background-color: #fff;
color: #333;
border: 1px solid #ccc;
- padding: 5px 20px 5px 10px;
- height: 30px;
+ padding: 0px 10px 0px 10px;
border-radius: 4px;
- -o-text-overflow: ellipsis;
- text-overflow: ellipsis;
+ text-overflow: ellipsis;
overflow: auto;
}
-.ideditor[dir='rtl'] textarea,
-.ideditor[dir='rtl'] input[type=text],
-.ideditor[dir='rtl'] input[type=search],
-.ideditor[dir='rtl'] input[type=number],
-.ideditor[dir='rtl'] input[type=url],
-.ideditor[dir='rtl'] input[type=tel],
-.ideditor[dir='rtl'] input[type=email] {
- padding: 5px 10px 5px 20px;
+.ideditor input[type=text],
+.ideditor input[type=search],
+.ideditor input[type=number],
+.ideditor input[type=url],
+.ideditor input[type=tel],
+.ideditor input[type=email],
+.ideditor input[type=date],
+.ideditor input[type=color] {
+ /* need this since line-height interpretation may vary by font or browser */
+ height: 2.585em;
+}
+.ideditor textarea {
+ min-height: 2em;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ resize: vertical;
+ font:normal 12px/20px "-apple-system", BlinkMacSystemFont,
+ "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
+ "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
+ sans-serif;
}
.ideditor textarea:active,
.ideditor input[type="checkbox"],
.ideditor input[type="radio"] {
- float: left;
width: 14px;
height: 14px;
- margin-right: 5px;
- margin-top: 3px;
+ margin-right: 6px;
cursor: pointer;
+ vertical-align: middle;
}
.ideditor[dir='rtl'] input[type="checkbox"],
.ideditor[dir='rtl'] input[type="radio"] {
- float: right;
- margin-left: 5px;
+ margin-left: 6px;
margin-right: 0;
}
-.ideditor input.mixed::-webkit-input-placeholder, .ideditor textarea.mixed::-webkit-input-placeholder {
- font-style: italic;
-}
-
.ideditor input.mixed::-moz-placeholder, .ideditor textarea.mixed::-moz-placeholder {
font-style: italic;
}
-.ideditor input.mixed:-ms-input-placeholder, .ideditor textarea.mixed:-ms-input-placeholder {
- font-style: italic;
-}
-
-.ideditor input.mixed::-ms-input-placeholder, .ideditor textarea.mixed::-ms-input-placeholder {
- font-style: italic;
-}
-
.ideditor input.mixed::placeholder,
.ideditor textarea.mixed::placeholder {
font-style: italic;
}
+/* keytraps need to be invisible yet not be display:none or visibility:hidden */
+.ideditor .keytrap {
+ width: 0;
+ height: 0;
+ padding: 0;
+ margin: 0;
+ border: 0;
+}
+
/* tables */
.ideditor table {
background-color: #fff;
color: #a9a9a9;
}
.ideditor .content {
- -webkit-box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
- box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
+ box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
}
.ideditor .loading {
background: url(<%= asset_path("iD/img/loader_bg.gif") %>);
------------------------------------------------------- */
.ideditor button {
text-align: center;
- line-height: 20px;
border: 0;
background: #fff;
- font-weight: bold;
color: #333;
font-size: 12px;
display: inline-block;
- height: 40px;
border-radius: 4px;
}
.ideditor button:focus,
-.ideditor button:active {
+.ideditor button:active,
+.ideditor button.hover {
background-color: #ececec;
}
@media (hover: hover) {
.ideditor button.action {
background: #7092ff;
color: #fff;
+ font-weight: bold;
}
.ideditor button.action:focus,
.ideditor button.action:active {
}
.ideditor button.secondary-action {
background: #ececec;
+ font-weight: bold;
}
.ideditor button.secondary-action:focus,
.ideditor button.secondary-action:active {
cursor: not-allowed;
}
+.ideditor button.action,
+.ideditor button.secondary-action {
+ padding: 10px 5px;
+}
+
@media (hover: hover) {
.ideditor button.action:hover {
background: #597be7;
/* Icons
------------------------------------------------------- */
.ideditor .icon {
- vertical-align: top;
+ vertical-align: middle;
width: 20px;
height: 20px;
}
.ideditor .icon.inline {
vertical-align: text-top;
- width: 14px;
- height: 14px;
+ display: inline-block;
+ width: 1.17em;
+ height: 1.17em;
margin: 0px 3px;
}
.ideditor .icon-annotation {
color: #333;
+ vertical-align: baseline;
+}
+
+.ideditor button.loading .icon {
+ background-image: url(<%= asset_path("iD/img/mini-loader.gif") %>);
+ background-position: 0 0;
+ background-size: auto;
}
/* Toolbar / Persistent UI Elements
------------------------------------------------------- */
.ideditor .top-toolbar-wrap {
- position: absolute;
- left: 0;
- top: 0;
- right: 0;
+ position: relative;
z-index: 101;
}
.ideditor .top-toolbar {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -webkit-flex-flow: row nowrap;
- -ms-flex-flow: row nowrap;
- flex-flow: row nowrap;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
+ flex-flow: row nowrap;
+ justify-content: space-between;
padding: 10px 0 0 0;
overflow-x: auto;
overflow-y: hidden;
display: none; /* Chrome, Safari, Opera */
}
.ideditor .top-toolbar .toolbar-item {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-flex: 0;
- -webkit-flex: 0 1 auto;
- -ms-flex: 0 1 auto;
- flex: 0 1 auto;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -webkit-flex-flow: column wrap;
- -ms-flex-flow: column wrap;
- flex-flow: column wrap;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
+ flex: 0 1 auto;
+ flex-flow: column wrap;
+ justify-content: center;
}
.ideditor .top-toolbar .toolbar-item .item-content {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-flex: 0;
- -webkit-flex: 0 1 auto;
- -ms-flex: 0 1 auto;
- flex: 0 1 auto;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -webkit-flex-flow: row nowrap;
- -ms-flex-flow: row nowrap;
- flex-flow: row nowrap;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
+ flex: 0 1 auto;
+ flex-flow: row nowrap;
+ justify-content: center;
height: 40px;
width: auto;
margin: 0 5px;
}
.ideditor .top-toolbar .toolbar-item.spacer {
width: 100%;
- -webkit-box-flex: 2;
- -webkit-flex-grow: 2;
- -ms-flex-positive: 2;
- flex-grow: 2;
+ flex-grow: 2;
}
.ideditor .top-toolbar .toolbar-item:first-child {
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
- justify-content: flex-start;
+ justify-content: flex-start;
}
.ideditor .top-toolbar .toolbar-item:last-child {
- -webkit-box-pack: end;
- -webkit-justify-content: flex-end;
- -ms-flex-pack: end;
- justify-content: flex-end;
+ justify-content: flex-end;
}
.ideditor .top-toolbar .toolbar-item:empty:not(.spacer) {
display: none;
}
.ideditor button.bar-button {
- -webkit-box-flex: 0;
- -webkit-flex: 0 0 auto;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -webkit-flex-flow: row nowrap;
- -ms-flex-flow: row nowrap;
- flex-flow: row nowrap;
- -webkit-box-align: center;
- -webkit-align-items: center;
- -ms-flex-align: center;
- align-items: center;
+ flex: 0 0 auto;
+ flex-flow: row nowrap;
+ align-items: center;
padding: 0 10px;
min-width: 30px;
white-space: nowrap;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
+ font-weight: bold;
}
.ideditor button.bar-button .icon {
- -webkit-box-flex: 0;
- -webkit-flex: 0 0 20px;
- -ms-flex: 0 0 20px;
- flex: 0 0 20px;
+ flex: 0 0 20px;
}
.ideditor button.bar-button .label {
- -webkit-box-flex: 0;
- -webkit-flex: 0 1 auto;
- -ms-flex: 0 1 auto;
- flex: 0 1 auto;
+ flex: 0 1 auto;
padding: 0 5px;
}
text-align: center;
}
-.ideditor .help-pane svg.icon.pre-text.add-note,
+.ideditor .help-pane svg.icon.inline.add-note,
.ideditor button.add-note svg.icon {
height: 15px;
width: 15px;
margin-left: 4px;
margin-right: unset;
}
-.ideditor .help-pane svg.icon.pre-text.add-note {
+.ideditor .help-pane svg.icon.inline.add-note {
margin-left: 3px;
margin-right: 3px;
}
opacity: .5;
position: absolute;
right: 4px;
- bottom: 26px;
-}
-.ideditor .spinner img {
+ bottom: 4px;
height: 20px;
width: 20px;
+}
+.ideditor .spinner img {
+ height: 100%;
+ width: 100%;
background: transparent;
border-radius: 100%;
}
.ideditor[dir='rtl'] .spinner img {
- -webkit-transform: scaleX(-1);
- -ms-transform: scaleX(-1);
- transform: scaleX(-1);
- -webkit-filter: FlipH;
- filter: FlipH;
+ transform: scaleX(-1);
+ filter: FlipH;
-ms-filter: "FlipH";
}
------------------------------------------------------- */
.ideditor .header {
border-bottom: 1px solid #ccc;
- height: 60px;
+ padding: 20px 40px;
position: relative;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-align: center;
- -webkit-align-items: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
+ align-items: center;
+ justify-content: center;
+ flex: 0 0 auto;
}
.ideditor .header h3 {
text-align: center;
margin-bottom: 0;
- -o-text-overflow: ellipsis;
- text-overflow: ellipsis;
+ text-overflow: ellipsis;
overflow: hidden;
padding: 0;
}
border-top: 1px solid #ccc;
background-color: #f6f6f6;
width: 100%;
- height: 30px;
+ height: 2.5em;
z-index: 1;
- -webkit-flex-wrap: wrap;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
- -webkit-box-align: center;
- -webkit-align-items: center;
- -ms-flex-align: center;
- align-items: center;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: center;
list-style: none;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
}
.ideditor .footer > a {
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.ideditor .header-container {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
-}
-
-.ideditor .header-block {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -webkit-align-items: center;
- -ms-flex-align: center;
- align-items: center;
-}
-.ideditor .header-block-outer {
- width: 20%;
-}
-
-.ideditor .header-block-close {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: end;
- -webkit-justify-content: flex-end;
- -ms-flex-pack: end;
- justify-content: flex-end;
- height: 100%;
+ justify-content: center;
}
/* Hide/Toggle collapsible sections (aka Disclosure)
------------------------------------------------------- */
.ideditor .hide-toggle .icon.pre-text {
- vertical-align: text-top;
+ vertical-align: middle;
width: 16px;
height: 16px;
- margin-left: -3px;
-}
-.ideditor[dir='rtl'] .hide-toggle .icon.pre-text {
- margin-left: 0;
- margin-right: -3px;
+ margin-top: -3px;
}
.ideditor a:visited.hide-toggle,
display: inline-block;
font-size: 14px;
font-weight: bold;
- padding-bottom: 5px;
+ margin-bottom: 5px;
}
/* disable drag-to-select */
-webkit-user-select: none;
-moz-user-select: none;
- -ms-user-select: none;
user-select: none;
}
.ideditor[dir='rtl'] .sidebar-resizer {
left: -6px;
}
+.ideditor .sidebar.collapsed > *:not(.sidebar-resizer) {
+ display: none;
+}
.ideditor .sidebar.collapsed .sidebar-resizer {
/* make target wider to avoid the user accidentally resizing window */
width: 10px;
left: 0;
bottom: 0;
right: 0;
+ display: flex;
+ flex-direction: column;
}
.ideditor .sidebar-component .body {
width: 100%;
- overflow: auto;
- top: 60px;
- bottom: 0;
- position: absolute;
+ height: 100%;
+ overflow-y: auto;
+ overflow-x: hidden;
+ position: relative;
}
.ideditor .panewrap {
position: absolute;
width: 50%;
top: 0;
- bottom: 30px;
+ bottom: 2.5em;
+ display: flex;
+ flex-direction: column;
}
.ideditor .pane:first-child {
.ideditor .pane:last-child {
right: 0;
}
+.ideditor .feature-list-pane {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
.ideditor .inspector-wrap {
width: 100%;
.ideditor .inspector-body {
overflow-y: scroll;
overflow-x: hidden;
- position: absolute;
- right: 0;
- left: 0;
- bottom: 0;
-}
-
-.ideditor .feature-list-pane .inspector-body,
-.ideditor .preset-list-pane .inspector-body {
- top: 120px;
-}
-.ideditor .entity-editor-pane .inspector-body {
- top: 60px;
+ position: relative;
+ height: 100%;
+ flex: 1 1 100%;
}
.ideditor .entity-editor {
padding: 20px;
margin-bottom: 150px;
}
+.ideditor .sidebar .search-header {
+ position: relative;
+ overflow: hidden;
+ flex: 0 0 auto;
+}
.ideditor .sidebar .search-header .icon {
- display: block;
+ display: inline-block;
position: absolute;
left: 10px;
- top: 80px;
+ height: 100%;
pointer-events: none;
}
.ideditor[dir='rtl'] .sidebar .search-header .icon {
}
.ideditor .sidebar .search-header input {
- position: absolute;
- top: 60px;
- height: 60px;
width: 100%;
- padding: 5px 10px;
+ padding: 0 10px;
+ height: 3em;
border-radius: 0;
border-width: 0;
border-bottom-width: 1px;
border-bottom: 1px solid #ccc;
border-radius: 0;
}
+.ideditor .no-results-item {
+ padding: 10px;
+ font-weight: bold;
+}
.ideditor .geocode-item {
width: 100%;
max-width: 200px;
- background-color: #ccc;
margin: 30px auto;
- padding: 5px;
- height: auto;
min-height: 40px;
}
-.ideditor[dir='rtl'] .geocode-item {
- left: -25%;
-}
-.ideditor .geocode-item:active {
- background-color: #aaa;
-}
-@media (hover: hover) {
- .ideditor .geocode-item:hover {
- background-color: #aaa;
- }
-}
-
.ideditor .feature-list-item {
- background-color: #fff;
- font-weight: bold;
- height: 40px;
- line-height: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
}
-.ideditor .feature-list-item:active {
- background-color: #ececec;
-}
-@media (hover: hover) {
- .ideditor .feature-list-item:hover {
- background-color: #ececec;
- }
-}
-.ideditor .feature-list-item.hover {
- background-color: #ececec;
-}
-.ideditor .feature-list-item button {
- background: transparent;
-}
.ideditor .feature-list-item .label {
text-align: left;
- padding: 10px 10px;
+ padding: 10px;
white-space: nowrap;
- -o-text-overflow: ellipsis;
- text-overflow: ellipsis;
+ text-overflow: ellipsis;
overflow: hidden;
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 auto;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
+ flex: 1 1 auto;
}
.ideditor[dir='rtl'] .feature-list-item .label {
text-align: right;
}
.ideditor .feature-list-item .entity-type {
color: #7092ff;
+ font-weight: bold;
}
-.ideditor .feature-list-item:active .entity-type {
+.ideditor .feature-list-item:active .entity-type,
+.ideditor .feature-list-item:focus .entity-type {
color: #597be7;
}
@media (hover: hover) {
}
}
.ideditor .feature-list-item .entity-name {
- font-weight: normal;
color: #666;
padding-left: 10px;
}
.ideditor .section-selected-features .feature-list-item:last-child {
border: none;
}
+.ideditor[dir='ltr'] .section-selected-features .feature-list-item > button:not(:first-child) {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+.ideditor[dir='rtl'] .section-selected-features .feature-list-item > button:not(:last-child) {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+}
+.ideditor[dir='ltr'] .section-selected-features .feature-list-item > button:not(:last-child) {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+}
+.ideditor[dir='rtl'] .section-selected-features .feature-list-item > button:not(:last-child) {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
/* Preset List and Icons
------------------------------------------------------- */
}
.ideditor .preset-list-button-wrap {
- height: 62px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
+ min-height: 62px;
display: flex;
border: 1px solid #ccc;
border-radius: 4px;
width: 100%;
height: 100%;
position: relative;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
+ align-items: center;
}
.ideditor .preset-list.filtered .preset-list-item:first-child .preset-list-button {
width: 60px;
height: 60px;
text-align: center;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-align: center;
- -webkit-align-items: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-flex: 0;
- -webkit-flex: 0 0 auto;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
+ align-items: center;
+ justify-content: center;
+ flex: 0 0 auto;
}
.ideditor .preset-icon-container.small {
width: 40px;
height: 40px;
- -webkit-box-flex: 0;
- -webkit-flex: 0 0 auto;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
+ flex: 0 0 auto;
}
.ideditor .preset-icon-container img.image-icon {
width: 50px;
visibility: visible;
}
.ideditor .preset-icon-container.showing-img *:not(.image-icon) {
- visibility: hidden;
+ display: none;
}
.ideditor .preset-icon-point-border path {
fill: transparent;
}
+.ideditor .preset-icon-category-border path {
+ stroke: #999;
+ stroke-width: 1px;
+ fill: transparent;
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
+ vector-effect: non-scaling-stroke;
+}
+
.ideditor .preset-icon-line {
margin: auto;
position: absolute;
right: 0;
width: 100%;
height: 100%;
- -webkit-transform: scale(0.48);
- -ms-transform: scale(0.48);
- transform: scale(0.48);
+ transform: scale(0.48);
}
.ideditor .preset-icon-container.small .preset-icon.point-geom .icon {
- -webkit-transform: translateY(-7%) scale(0.27);
- -ms-transform: translateY(-7%) scale(0.27);
- transform: translateY(-7%) scale(0.27);
+ transform: translateY(-7%) scale(0.27);
}
.ideditor .preset-icon-container.small .preset-icon.point-geom.preset-icon-iD .icon {
- -webkit-transform: translateY(-9%) scale(0.5);
- -ms-transform: translateY(-9%) scale(0.5);
- transform: translateY(-9%) scale(0.5);
+ transform: translateY(-9%) scale(0.5);
}
.ideditor .preset-icon.framed .icon {
- -webkit-transform: scale(0.4);
- -ms-transform: scale(0.4);
- transform: scale(0.4);
+ transform: scale(0.4);
}
-.ideditor .preset-icon.framed.line-geom .icon,
+.ideditor .preset-icon.framed.line-geom:not(.category) .icon,
.ideditor .preset-icon.framed.route-geom .icon {
top: 20%;
- -webkit-transform: translateY(-30%) scale(0.4);
- -ms-transform: translateY(-30%) scale(0.4);
- transform: translateY(-30%) scale(0.4);
+ transform: translateY(-30%) scale(0.4);
}
.ideditor .preset-icon-iD .icon {
- -webkit-transform: scale(1);
- -ms-transform: scale(1);
- transform: scale(1);
+ transform: scale(1);
}
.ideditor .preset-icon-iD.framed .icon {
- -webkit-transform: scale(0.74);
- -ms-transform: scale(0.74);
- transform: scale(0.74);
+ transform: scale(0.74);
}
-.ideditor .preset-icon-iD.framed.line-geom .icon,
+.ideditor .preset-icon-iD.framed.line-geom:not(.category) .icon,
.ideditor .preset-icon-iD.framed.route-geom .icon {
- -webkit-transform: translateY(-30%) scale(0.74);
- -ms-transform: translateY(-30%) scale(0.74);
- transform: translateY(-30%) scale(0.74);
+ transform: translateY(-30%) scale(0.74);
}
.ideditor .preset-icon-container.fallback .preset-icon .icon {
- -webkit-transform: scale(0.5) !important;
- -ms-transform: scale(0.5) !important;
- transform: scale(0.5) !important;
+ transform: scale(0.5) !important;
}
.ideditor .preset-list-button .label {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -webkit-flex-flow: row wrap;
- -ms-flex-flow: row wrap;
- flex-flow: row wrap;
- -webkit-box-align: center;
- -webkit-align-items: center;
- -ms-flex-align: center;
- align-items: center;
- background-color: #f6f6f6;
+ flex-flow: row wrap;
+ align-items: center;
+ background: #f6f6f6;
text-align: left;
padding: 5px 10px;
border-left: 1px solid rgba(0, 0, 0, .1);
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 100%;
- -ms-flex: 1 1 100%;
- flex: 1 1 100%;
- -webkit-align-self: stretch;
- -ms-flex-item-align: stretch;
- align-self: stretch;
+ flex: 1 1 100%;
+ align-self: stretch;
}
.ideditor[dir='rtl'] .preset-list-button .label {
text-align: right;
line-height: 1.35em;
}
.ideditor .preset-list-button .label-inner .namepart {
- -o-text-overflow: ellipsis;
- text-overflow: ellipsis;
+ text-overflow: ellipsis;
}
-.ideditor .preset-list-button .label-inner .namepart:nth-child(2) {
- font-weight: normal;
+.ideditor .preset-list-button .label-inner .namepart:nth-child(1) {
+ font-weight: bold;
}
.ideditor .preset-list-button:focus .label,
}
.ideditor .preset-list-button-wrap button.tag-reference-button {
- height: 100%;
width: 32px;
- -webkit-box-flex: 0;
- -webkit-flex: 0 0 auto;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
+ flex: 0 0 auto;
+}
+.ideditor .preset-list-button-wrap button.tag-reference-button:not(:hover):not(:active):not(:focus) {
background: #f6f6f6;
}
.ideditor[dir='ltr'] .preset-list-button-wrap button.tag-reference-button {
.ideditor[dir='rtl'] .preset-list-button-wrap:not(.category) button:last-child {
border-radius: 4px 0 0 4px;
}
-.ideditor .preset-list-button-wrap button.tag-reference-button:active {
- background: #f1f1f1;
-}
-@media (hover: hover) {
- .ideditor .preset-list-button-wrap button.tag-reference-button:hover {
- background: #f1f1f1;
- }
-}
.ideditor .preset-list-button-wrap button.tag-reference-button .icon {
opacity: .5;
}
+.ideditor .preset-list-button-wrap .accessory-buttons {
+ display: flex;
+}
.ideditor .current .preset-list-button,
/* Quick links
------------------------------------------------------- */
.ideditor .quick-links {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -webkit-flex-flow: row wrap;
- -ms-flex-flow: row wrap;
- flex-flow: row wrap;
- -webkit-box-pack: end;
- -webkit-justify-content: flex-end;
- -ms-flex-pack: end;
- justify-content: flex-end;
+ flex-flow: row wrap;
+ justify-content: flex-end;
padding: 5px 0 0 0;
}
.ideditor .quick-link {
*/
.ideditor .form-field {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -webkit-flex-flow: row wrap;
- -ms-flex-flow: row wrap;
- flex-flow: row wrap;
+ flex-flow: row wrap;
margin-bottom: 10px;
width: 100%;
- -webkit-transition: margin-bottom 200ms;
- -o-transition: margin-bottom 200ms;
transition: margin-bottom 200ms;
}
/* A `label` element that wraps the top section */
.ideditor .field-label {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -webkit-flex-flow: row nowrap;
- -ms-flex-flow: row nowrap;
- flex-flow: row nowrap;
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 100%;
- -ms-flex: 1 1 100%;
- flex: 1 1 100%;
- height: 30px;
+ flex-flow: row nowrap;
+ flex: 1 1 100%;
position: relative;
font-weight: bold;
color: #333;
}
.ideditor .field-label .label-text {
overflow: hidden;
- -o-text-overflow: ellipsis;
- text-overflow: ellipsis;
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 auto;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
- padding: 5px 0 5px 10px;
+ text-overflow: ellipsis;
+ flex: 1 1 auto;
+ padding: 5px 0 4px 10px;
}
.ideditor[dir='rtl'] .field-label .label-text {
- padding: 5px 10px 5px 0;
+ padding: 5px 10px 4px 0;
}
-.ideditor .field-label .label-text span {
+.ideditor .field-label .label-text {
white-space: nowrap;
}
}
.ideditor .field-label button {
- -webkit-box-flex: 0;
- -webkit-flex: 0 0 32px;
- -ms-flex: 0 0 32px;
- flex: 0 0 32px;
+ flex: 0 0 auto;
border-left: 1px solid #ccc;
width: 32px;
- height: 100%;
border-radius: 0;
- background: #f6f6f6;
}
.ideditor[dir='rtl'] .field-label button {
border-left: none;
border-right: 1px solid #ccc;
}
-.ideditor .field-label button:active {
- background: #f1f1f1;
-}
-@media (hover: hover) {
- .ideditor .field-label button:hover {
- background: #f1f1f1;
- }
+.ideditor .field-label button:not(:hover):not(:active):not(:focus) {
+ background: none;
}
.ideditor .field-label .icon {
opacity: .5;
+
}
.ideditor .field-label .modified-icon,
/* A `div` element that wraps the bottom section */
.ideditor .form-field-input-wrap {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -webkit-flex-flow: row nowrap;
- -ms-flex-flow: row nowrap;
- flex-flow: row nowrap;
+ flex-flow: row nowrap;
width: 100%;
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 auto;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
- min-height: 30px;
+ flex: 1 1 auto;
border-top: 0;
border-radius: 0 0 4px 4px;
}
.ideditor .form-field-input-wrap > label,
.ideditor .form-field-input-wrap > textarea,
.ideditor .form-field-input-wrap > ul.chiplist {
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 auto;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
- min-height: 30px;
+ flex: 1 1 auto;
border: 1px solid #ccc;
border-top: 0;
border-radius: 0;
- overflow: hidden;
position: relative;
}
.ideditor .form-field-input-wrap > textarea {
height: 65px;
border-radius: 0 0 4px 4px;
- overflow: auto;
}
/* Buttons inside fields */
.ideditor .form-field-button {
- -webkit-box-flex: 0;
- -webkit-flex: 0 0 auto;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- height: 30px;
+ flex: 0 0 auto;
width: 32px;
position: relative;
background-color: #fff;
border-left-width: 1px;
border-right-width: 0;
}
-.ideditor .form-field-button:active {
+.ideditor .form-field-button:active,
+.ideditor .form-field-button:focus {
background-color: #f1f1f1;
}
@media (hover: hover) {
fill: #333;
opacity: .5;
}
+.ideditor .form-field-button.colour-preview {
+ border-radius: 0 0 4px 0;
+}
+.ideditor .form-field-button.colour-preview > div.colour-box {
+ border: 3px solid #fff;
+ height: 100%;
+ border-radius: 8px;
+ cursor: pointer;
+ text-align: center;
+ line-height: 20px;
+ padding: 1px 0 0 1px;
+}
+.ideditor .inspector-hover .form-field-button.colour-preview > div.colour-box {
+ border-color: #ececec;
+}
+.ideditor .form-field-button.colour-preview:active > div.colour-box,
+.ideditor .form-field-button.colour-preview:focus > div.colour-box {
+ border-color: #f1f1f1;
+}
+@media (hover: hover) {
+ .ideditor .form-field-button.colour-preview:hover > div.colour-box {
+ border-color: #f1f1f1;
+ }
+}
+.ideditor input.colour-selector {
+ visibility: hidden;
+ position: absolute;
+}
+.ideditor input.date-selector {
+ visibility: hidden;
+ position: absolute;
+}
/* round corners of first/last child elements */
}
-/* Field - Access, Cycleway
+/* Field - Access, DirectionalCombo
------------------------------------------------------- */
.ideditor .form-field-input-access,
-.ideditor .form-field-input-cycleway {
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 auto;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
+.ideditor .form-field-input-directionalcombo {
+ flex: 1 1 auto;
display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -webkit-flex-flow: row wrap;
- -ms-flex-flow: row wrap;
- flex-flow: row wrap;
+ flex-flow: row wrap;
}
/* Field - lists with labeled input items
------------------------------------------------------- */
.ideditor .form-field ul.rows {
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 auto;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
+ flex: 1 1 auto;
border: 1px solid #ccc;
border-top: 0;
border-radius: 0 0 4px 4px;
border-top: 0;
}
.ideditor .form-field ul.rows li {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -webkit-flex-flow: row nowrap;
- -ms-flex-flow: row nowrap;
- flex-flow: row nowrap;
+ flex-flow: row nowrap;
}
-.ideditor .form-field ul.rows li.labeled-input > span,
.ideditor .form-field ul.rows li.labeled-input > div {
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 auto;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
+ flex: 1 1 auto;
width: 100%;
border-radius: 0;
+ line-height: 0.95rem;
}
.ideditor .form-field ul.rows li input {
border-radius: 0;
border-right-width: 1px;
}
+/* Field - lists with labeled input items as table
+------------------------------------------------------- */
+.ideditor .form-field ul.rows.rows-table {
+ display: table;
+ width: 100%;
+}
+.ideditor .form-field ul.rows.rows-table li.labeled-input {
+ display: table-row;
+}
+.ideditor .form-field ul.rows.rows-table li.labeled-input > div:first-child {
+ display: table-cell;
+ width: auto;
+ max-width: 170px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+.ideditor .form-field ul.rows.rows-table li.labeled-input > div:nth-child(2) {
+ display: table-cell;
+ width: auto;
+}
+
/* Field - Structure
------------------------------------------------------- */
------------------------------------------------------- */
.ideditor .form-field-input-combo > input:only-of-type {
border-radius: 0 0 4px 4px;
+ width: 100%;
}
.ideditor .form-field-input-combo.empty-combobox input,
.ideditor .form-field-input-multicombo .empty-combobox input {
display: none;
}
+.ideditor .form-field-input-combo input.raw-value,
+.ideditor .form-field-input-semicombo input.raw-value,
+.ideditor .form-field-input-multicombo input.raw-value {
+ font-family: monospace;
+}
+.ideditor .form-field-input-combo input.known-value,
+.ideditor .form-field-input-semicombo input.known-value,
+.ideditor .form-field-input-multicombo input.known-value {
+ color: #7092ff;
+}
+
.ideditor .form-field-input-multicombo ul.chiplist {
padding: 5px 8px 5px 8px;
background: #fff;
}
.ideditor .form-field-input-multicombo li {
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
display: inline-flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -webkit-flex-flow: row nowrap;
- -ms-flex-flow: row nowrap;
- flex-flow: row nowrap;
- -webkit-box-align: center;
- -webkit-align-items: center;
- -ms-flex-align: center;
- align-items: center;
+ flex-flow: row nowrap;
margin-bottom: 3px;
margin-top: 3px;
border-radius: 4px;
.ideditor .form-field-input-multicombo li.chip {
background-color: #eff2f7;
border: 1px solid #ccd5e3;
- line-height: 25px;
max-width: 100%;
+ color: #7092ff;
+}
+.ideditor .form-field-input-multicombo li.chip.negated span {
+ text-decoration: line-through;
+}
+.ideditor .form-field-input-multicombo li.chip input {
+ width: 1em;
+ height: 11px;
+ margin-top: 7px;
}
.ideditor[dir='ltr'] .form-field-input-multicombo li.chip {
padding: 2px 0px 2px 5px;
padding: 2px 5px 2px 0px;
}
.ideditor .form-field-input-multicombo li.chip.draggable {
- cursor: -webkit-grab;
cursor: grab;
}
.ideditor .form-field-input-multicombo li.chip.dragging {
opacity: 0.75;
z-index: 3000;
- cursor: -webkit-grabbing;
cursor: grabbing;
}
+.ideditor .form-field-input-multicombo li.chip.raw-value {
+ font-family: monospace;
+ color: #333;
+}
.ideditor .form-field-input-multicombo li.mixed {
border-color: #eff2f7;
color: #888;
font-style: italic;
}
-.ideditor .form-field-input-multicombo li.chip span {
+.ideditor .form-field-input-multicombo li.chip > span {
display: block;
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 auto;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
+ flex: 1 1 auto;
overflow: hidden;
word-wrap: break-word;
+ margin-top: 4px;
}
-.ideditor .form-field-input-multicombo a {
+.ideditor .form-field-input-multicombo a,
+.ideditor .form-field-input-multicombo button {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 16px !important;
padding: 0px 5px 0px 5px;
color: #a6b4ce;
display: block;
text-align: center;
- -webkit-box-flex: 0;
- -webkit-flex: 0 0 auto;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
+ flex: 0 0 auto;
+ background: transparent;
+ border: 0;
+}
+
+.ideditor .form-field-input-multicombo li.chip .field_buttons {
+ display: inline-block;
+ text-align: right;
+ margin-right: 2px;
+ margin-top: 2px;
+ margin-bottom: 2px;
+}
+
+.ideditor .form-field-input-multicombo li.chip .field_buttons a {
+ display: block;
+ float: right;
+ margin-top: -2px;
+ margin-bottom: -2px;
+}
+
+.ideditor[dir='rtl'] .form-field-input-multicombo li.chip .field_buttons a {
+ float: left;
+}
+
+.ideditor .form-field-input-multicombo li.chip .field_buttons button {
+ display: inline-block;
+ margin-right: -4px;
+ margin-top: -4px;
+ margin-bottom: -2px;
+ margin-left: -2px;
+}
+
+.ideditor .form-field-input-multicombo li.chip .field_buttons button:hover {
+ background-color: transparent;
}
.ideditor .form-field-input-multicombo .input-wrap {
border: 1px solid #ddd;
- width: 100px;
- height: 31px;
+ width: 180px;
}
.ideditor .form-field-input-multicombo input {
border: none;
width: 100%;
- height: 100%;
}
.ideditor .form-field-input-multicombo input:focus {
width: auto;
}
+.ideditor .form-field-input-combo .tag-value-icon,
+.ideditor .form-field-input-semicombo .input-wrap .tag-value-icon,
+.ideditor .form-field-input-multicombo .input-wrap .tag-value-icon {
+ display: inline-block;
+ position: relative;
+ height: 24px;
+ width: 30px;
+ margin-right: -30px;
+ align-self: center;
+ vertical-align: middle;
+ z-index: 1;
+ padding-left: 11px;
+}
+.ideditor[dir='rtl'] .form-field-input-combo .tag-value-icon,
+.ideditor[dir='rtl'] .form-field-input-semicombo .input-wrap .tag-value-icon,
+.ideditor[dir='rtl'] .form-field-input-multicombo .input-wrap .tag-value-icon {
+ margin-right: 0;
+ margin-left: -30px;
+ padding-left: 0;
+ padding-right: 11px;
+}
+.ideditor .tag-value-icon .icon {
+ width: 21px;
+ height: 21px;
+ margin: auto;
+}
+.ideditor[dir='ltr'] .form-field-input-combo .tag-value-icon + input,
+.ideditor[dir='ltr'] .form-field-input-semicombo .input-wrap .tag-value-icon + input,
+.ideditor[dir='ltr'] .form-field-input-multicombo .input-wrap .tag-value-icon + input {
+ padding-left: 40px;
+}
+.ideditor[dir='rtl'] .form-field-input-combo .tag-value-icon + input,
+.ideditor[dir='rtl'] .form-field-input-semicombo .input-wrap .tag-value-icon + input,
+.ideditor[dir='rtl'] .form-field-input-multicombo .input-wrap .tag-value-icon + input {
+ padding-right: 40px;
+}
+.ideditor .combobox-option .tag-value-icon {
+ display: inline-block;
+ width: 28px;
+}
+.ideditor .form-field-input-multicombo li.chip .tag-value-icon .icon {
+ margin: 0;
+ margin-right: 6px;
+ display: inline-block;
+ vertical-align: center;
+}
+.ideditor[dir='rtl'] .form-field-input-multicombo li.chip .tag-value-icon .icon {
+ margin-right: 6px;
+ margin-left: 0;
+}
+
/* Field - Text / Numeric
------------------------------------------------------- */
-.ideditor .form-field-input-text > input:only-of-type,
+.ideditor .form-field-input-text > input:only-child,
.ideditor .form-field-input-tel > input:only-of-type,
.ideditor .form-field-input-email > input:only-of-type,
-.ideditor .form-field-input-url > input:only-of-type {
+.ideditor .form-field-input-url > input:only-child {
border-radius: 0 0 4px 4px;
}
+.ideditor .form-field-input-text > input:not(:only-child),
+.ideditor .form-field-input-url > input:not(:only-child) {
+ border-radius: 0 0 0 4px;
+}
.ideditor .form-field-input-number > input:only-of-type {
border-radius: 0 0 0 4px;
}
/* Field - Checkbox
------------------------------------------------------- */
.ideditor .form-field-input-check {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-align: center;
- -webkit-align-items: center;
- -ms-flex-align: center;
- align-items: center;
+ align-items: center;
background: #fff;
padding: 5px 10px;
color: #7092ff;
cursor: pointer;
}
.ideditor .form-field-input-check > input[type="checkbox"] {
- -webkit-box-flex: 0;
- -webkit-flex: 0 1 auto;
- -ms-flex: 0 1 auto;
- flex: 0 1 auto;
- min-height: 20px;
- width: 20px;
+ flex: 0 1 auto;
margin-top: 0;
}
.ideditor .form-field-input-check > span {
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 auto;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
+ flex: 1 1 auto;
}
.ideditor .form-field-input-check > span.mixed {
font-style: italic;
}
-.ideditor .form-field-input-check > .reverser.button {
- -webkit-box-flex: 0;
- -webkit-flex: 0 1 auto;
- -ms-flex: 0 1 auto;
- flex: 0 1 auto;
+.ideditor .form-field-input-check > .reverser {
+ flex: 0 1 auto;
background-color: #eff2f7;
border: 1px solid #ccd5e3;
border-radius: 2px;
padding: 0px 8px;
+ color: inherit;
}
-.ideditor[dir='ltr'] .form-field-input-check > .reverser.button {
+.ideditor[dir='ltr'] .form-field-input-check > .reverser {
padding-right: 2px;
}
-.ideditor[dir='rtl'] .form-field-input-check > .reverser.button {
+.ideditor[dir='rtl'] .form-field-input-check > .reverser {
padding-left: 2px;
}
-.ideditor .form-field-input-check > .reverser.button.hide {
+.ideditor .form-field-input-check > .reverser:active,
+.ideditor .form-field-input-check > .reverser:focus {
+ background: #e3e8ef;
+}
+@media (hover: hover) {
+ .ideditor .form-field-input-check > .reverser:hover {
+ background: #e3e8ef;
+ }
+}
+.ideditor .form-field-input-check > .reverser.hide {
display: none;
}
-.ideditor .form-field-input-check:active {
+.ideditor .form-field-input-check:active,
+.ideditor .form-field-input-check:focus {
background: #f1f1f1;
}
@media (hover: hover) {
/* Field - Radio button
------------------------------------------------------- */
.ideditor .form-field-input-radio {
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 auto;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
+ flex: 1 1 auto;
display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -webkit-flex-flow: row wrap;
- -ms-flex-flow: row wrap;
- flex-flow: row wrap;
+ flex-flow: row wrap;
}
.ideditor .form-field-input-radio > label {
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 auto;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
+ flex: 1 1 auto;
display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -webkit-flex-flow: row nowrap;
- -ms-flex-flow: row nowrap;
- flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ align-items: center;
width: 100%;
padding: 5px 10px;
- height: 30px;
background-color: #fff;
color: #7092ff;
cursor: pointer;
.ideditor .form-field-input-radio > label:last-child {
border-radius: 0 0 4px 4px;
}
-.ideditor .form-field-input-radio > label:active {
+.ideditor .form-field-input-radio > label:active,
+.ideditor .form-field-input-radio > label:focus {
background-color: #ececec;
}
@media (hover: hover) {
border-bottom: 1px solid #ccc;
}
.ideditor .form-field-input-radio > label > input[type="radio"] {
- -webkit-box-flex: 0;
- -webkit-flex: 0 1 auto;
- -ms-flex: 0 1 auto;
- flex: 0 1 auto;
- width: 20px;
+ flex: 0 1 auto;
}
.ideditor .form-field-input-radio > label > span {
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 auto;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
+ flex: 1 1 auto;
overflow: hidden;
white-space: nowrap;
- -o-text-overflow: ellipsis;
- text-overflow: ellipsis;
+ text-overflow: ellipsis;
}
/* Hide placeholder for radio buttons if another is active, or not in hover state */
padding: 0;
opacity: 0;
width: 0;
- line-height: 0;
+ height: 0;
display: block;
overflow: hidden;
}
-/* Field - Maxspeed
+/* Field - roadheight and roadspeed
------------------------------------------------------- */
-.ideditor .form-field-input-maxspeed input.maxspeed-number {
- -webkit-flex-basis: 0;
- -ms-flex-preferred-size: 0;
- flex-basis: 0;
-}
-.ideditor .form-field-input-maxspeed input.maxspeed-unit {
- -webkit-box-flex: 0;
- -webkit-flex: 0 1 auto;
- -ms-flex: 0 1 auto;
- flex: 0 1 auto;
+.ideditor .form-field-input-roadheight input.roadheight-number,
+.ideditor .form-field-input-roadheight input.roadheight-secondary-number,
+.ideditor .form-field-input-roadspeed input.roadspeed-number {
+ flex-basis: 0;
+ width: 0;
+}
+.ideditor .form-field-input-roadheight input.roadheight-unit,
+.ideditor .form-field-input-roadheight input.roadheight-secondary-unit {
+ flex: 0 1 auto;
+ width: 60px;
+}
+.ideditor .form-field-input-roadspeed input.roadspeed-unit {
+ flex: 0 1 auto;
width: 80px;
}
-.ideditor .form-field-input-maxspeed > input:first-of-type {
+.ideditor[dir='ltr'] .form-field-input-roadheight > input:first-of-type,
+.ideditor[dir='ltr'] .form-field-input-roadspeed > input:first-of-type {
border-radius: 0 0 0 4px;
}
-.ideditor[dir='rtl'] .form-field-input-maxspeed > input:first-of-type {
+.ideditor[dir='rtl'] .form-field-input-roadheight > input:first-of-type,
+.ideditor[dir='rtl'] .form-field-input-roadspeed > input:first-of-type {
border-radius: 0 0 4px 0;
}
-.ideditor .form-field-input-maxspeed > input:last-of-type {
+.ideditor[dir='ltr'] .form-field-input-roadheight > input:last-of-type,
+.ideditor[dir='ltr'] .form-field-input-roadspeed > input:last-of-type {
border-left: 0;
border-radius: 0 0 4px 0;
}
-.ideditor[dir='rtl'] .form-field-input-maxspeed > input:last-of-type {
+.ideditor[dir='rtl'] .form-field-input-roadheight > input:last-of-type,
+.ideditor[dir='rtl'] .form-field-input-roadspeed > input:last-of-type {
border-right: 0;
border-radius: 0 0 0 4px;
}
/* nested subfields for name in different languages */
.ideditor .localized-multilingual {
padding: 0 10px;
- -webkit-flex-basis: 100%;
- -ms-flex-preferred-size: 100%;
- flex-basis: 100%;
+ flex-basis: 100%;
}
.ideditor .localized-multilingual .entry {
position: relative;
/* Field - Address
------------------------------------------------------- */
.ideditor .form-field-input-address {
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 auto;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
+ flex: 1 1 auto;
display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -webkit-flex-flow: row wrap;
- -ms-flex-flow: row wrap;
- flex-flow: row wrap;
+ flex-flow: row wrap;
border: 1px solid #ccc;
border-top: 0px;
}
.ideditor .addr-row {
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 auto;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
+ flex: 1 1 auto;
display: flex;
width: 100%;
- min-height: 30px;
}
.ideditor .addr-row > input {
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 auto;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
+ flex: 1 1 auto;
border-radius: 0;
border-right: 0;
border-bottom: 0;
.ideditor[dir='rtl'] .addr-row:last-of-type input:last-of-type {
border-radius: 0 0 0 4px;
}
+.ideditor .combobox-address-street-place .combobox-option.address-street,
+.ideditor .combobox-address-street-place .combobox-option.address-place {
+ padding-right: 20px;
+}
+.ideditor .combobox-address-street-place .combobox-option.address-street::after,
+.ideditor .combobox-address-street-place .combobox-option.address-place::after {
+ position: absolute;
+ right: 2px;
+ opacity: 0.4;
+}
+.ideditor .combobox-address-street-place .combobox-option.address-place::after {
+ content: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMCIgeT0iMCIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiPg0KICAgIDxwYXRoIGQ9Ik0xMCwzIEM2LjY4NiwzIDQsNS42MTIgNCw4LjgzMyBDNCwxMi4wNTUgMTAsMTcgMTAsMTcgQzEwLDE3IDE2LDEyLjA1NSAxNiw4LjgzMyBDMTYsNS42MTIgMTMuMzE0LDMgMTAsMyB6IE0xMC4xODcsNi41IEMxMS41MTMsNi41IDEyLjU4Nyw3LjU0NSAxMi41ODcsOC44MzMgQzEyLjU4NywxMC4xMjIgMTEuNTEzLDExLjE2NyAxMC4xODcsMTEuMTY3IEM4Ljg2MiwxMS4xNjcgNy43ODcsMTAuMTIyIDcuNzg3LDguODMzIEM3Ljc4Nyw3LjU0NSA4Ljg2Miw2LjUgMTAuMTg3LDYuNSB6IiBmaWxsPSJjdXJyZW50Q29sb3IiLz4NCjwvc3ZnPg==);
+}
/* Field - Wikipedia
------------------------------------------------------- */
.ideditor .form-field-input-wikipedia {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -webkit-flex-flow: row wrap;
- -ms-flex-flow: row wrap;
- flex-flow: row wrap;
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 auto;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
+ flex-flow: row wrap;
+ flex: 1 1 auto;
}
.ideditor .wiki-lang-container,
.ideditor .wiki-title-container {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -webkit-flex-flow: row nowrap;
- -ms-flex-flow: row nowrap;
- flex-flow: row nowrap;
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 auto;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
+ flex-flow: row nowrap;
+ flex: 1 1 auto;
width: 100%;
}
.ideditor .wiki-lang-container > input.wiki-lang,
.ideditor .wiki-title-container > input.wiki-title {
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 auto;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
+ flex: 1 1 auto;
border-top: 0;
border-radius: 0;
}
display: table;
-webkit-user-select: none;
-moz-user-select: none;
- -ms-user-select: none;
user-select: none;
}
}
.ideditor .restriction-control input,
-.ideditor .restriction-control span {
+.ideditor .restriction-control > span {
display: table-cell;
text-align: start;
padding: 0px 5px;
}
-.ideditor .restriction-control span.restriction-control-label {
+.ideditor .restriction-control > span.restriction-control-label {
text-align: end;
}
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
- -ms-user-select: none;
user-select: none;
}
/* Field - Combobox
------------------------------------------------------- */
+.ideditor[dir='ltr'] textarea.combobox-input,
+.ideditor[dir='ltr'] input.combobox-input {
+ /* leave room for the caret */
+ padding-right: 20px;
+}
+.ideditor[dir='rtl'] textarea.combobox-input,
+.ideditor[dir='rtl'] input.combobox-input {
+ padding-left: 20px;
+}
+
.ideditor div.combobox {
z-index: 9999;
display: none;
- -webkit-box-shadow: 0 4px 10px 1px rgba(0,0,0,.2);
- box-shadow: 0 4px 10px 1px rgba(0,0,0,.2);
+ box-shadow: 0 4px 10px 1px rgba(0,0,0,.2);
margin-top: -1px;
background: #fff;
max-height: 245px;
display: block;
padding: 5px 10px;
border-top: 1px solid #ccc;
- -o-text-overflow: ellipsis;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
+ line-height: 0.95rem;
+ break: all;
}
.ideditor .combobox a.selected,
-.ideditor .combobox a:active {
+.ideditor .combobox a:active,
+.ideditor .combobox a:focus {
background: #ececec;
}
@media (hover: hover) {
.ideditor .combobox-caret {
display: inline-block;
position: relative;
- height: 30px;
+ height: 5px;
width: 30px !important;
margin-left: -30px;
- vertical-align: top;
+ align-self: center;
+ vertical-align: middle;
cursor: pointer;
}
.ideditor[dir='rtl'] .combobox-caret {
border-right: 5px solid transparent;
}
+.ideditor .combobox .combobox-option.raw-option {
+ font-family: monospace;
+ color: #333;
+}
+
+.ideditor .combobox .combobox-option.virtual-option {
+ font-style: italic;
+ color: #333;
+}
+
+.ideditor .form-field-input-wrap {
+ position: relative;
+}
+
+.ideditor .form-field-input-wrap span.length-indicator-wrap {
+ visibility: hidden;
+ position: absolute;
+ top: -5px;
+ left: 0;
+ right: 0;
+}
+
+.ideditor .form-field-input-wrap input:focus + span.length-indicator-wrap,
+.ideditor .form-field-input-wrap textarea:focus + span.length-indicator-wrap,
+.ideditor .form-field-input-wrap input:focus + div.combobox-caret + span.length-indicator-wrap,
+.ideditor .form-field-input-wrap textarea:focus + div.combobox-caret + span.length-indicator-wrap {
+ visibility: visible;
+}
+
+.ideditor .form-field-input-wrap span.length-indicator {
+ display: block;
+ left: 0;
+ right: 0;
+ height: 4px;
+ background-color: #7092ff;
+ border-right-style: solid;
+ border-right-color: lightgray;
+}
+
+.ideditor .form-field-input-wrap span.length-indicator.limit-reached {
+ border-right-color: red;
+}
+
+.ideditor .tooltip.max-length-warning {
+ z-index: 10;
+}
/* Field Help
------------------------------------------------------- */
border-radius: 0 0 4px 4px;
z-index: 20;
background: rgba(255,255,255,0.95);
- -webkit-box-shadow: 0 0 30px 5px rgba(0,0,0,.4);
- box-shadow: 0 0 30px 5px rgba(0,0,0,.4);
+ box-shadow: 0 0 30px 5px rgba(0,0,0,.4);
}
.ideditor .field-help-title h2 {
color: #7092ff;
border-bottom: 2px solid;
}
-.ideditor .field-help-nav-item:active {
+.ideditor .field-help-nav-item:active,
+.ideditor .field-help-nav-item:focus {
color: #597be7;
background-color: #efefef;
}
}
.ideditor .more-fields label {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -webkit-flex-flow: row nowrap;
- -ms-flex-flow: row nowrap;
- flex-flow: row nowrap;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
- -webkit-box-align: center;
- -webkit-align-items: center;
- -ms-flex-align: center;
- align-items: center;
+ flex-flow: row nowrap;
+ justify-content: space-between;
+ align-items: center;
}
.ideditor .more-fields input {
margin-left: 10px;
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 auto;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
+ flex: 1 1 auto;
}
.ideditor[dir='rtl'] .more-fields input {
margin-left: auto;
}
.ideditor .form-field-input-wrap .label {
- height: 30px;
background: #f6f6f6;
padding: 5px 10px;
}
/* Raw Tag Editor
------------------------------------------------------- */
.ideditor .raw-tag-options {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -webkit-flex-flow: row nowrap;
- -ms-flex-flow: row nowrap;
- flex-flow: row nowrap;
- -webkit-flex-direction: row-reverse;
- -ms-flex-direction: row-reverse;
- flex-direction: row-reverse;
- margin-top: -25px;
+ flex-flow: row nowrap;
+ justify-content: flex-end;
+ margin-top: -28px;
}
.ideditor button.raw-tag-option {
- -webkit-box-flex: 0;
- -webkit-flex: 0 0 20px;
- -ms-flex: 0 0 20px;
- flex: 0 0 20px;
- height: 20px;
- width: 20px;
+ flex: 0 0 auto;
+ padding: 3px;
background: #aaa;
color: #eee;
margin: 0 3px;
.ideditor button.raw-tag-option svg.icon {
width: 14px;
height: 14px;
- vertical-align: text-bottom;
+ display: block;
}
.ideditor[dir='ltr'] button.raw-tag-option-list {
- -webkit-transform: scaleX(-1);
- -ms-transform: scaleX(-1);
- transform: scaleX(-1);
- -webkit-filter: FlipH;
- filter: FlipH;
+ transform: scaleX(-1);
+ filter: FlipH;
-ms-filter: "FlipH";
}
position: relative;
}
.ideditor .tag-row .inner-wrap {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -webkit-flex-flow: row nowrap;
- -ms-flex-flow: row nowrap;
- flex-flow: row nowrap;
+ flex-flow: row nowrap;
width: 100%;
position: relative;
}
.ideditor .tag-row .key-wrap,
.ideditor .tag-row .value-wrap {
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 50%;
- -ms-flex: 1 1 50%;
- flex: 1 1 50%;
+ flex: 1 1 50%;
}
.ideditor .tag-text.readonly,
}
.ideditor .tag-row input {
- height: 31px;
border: 0;
border-radius: 0;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.ideditor .tag-row button {
- -webkit-box-flex: 0;
- -webkit-flex: 0 0 32px;
- -ms-flex: 0 0 32px;
- flex: 0 0 32px;
- height: 31px;
+ flex: 0 0 auto;
width: 32px;
border: 1px solid #ccc;
border-top-width: 0;
border-right-width: 0;
}
-.ideditor .tag-row button:active {
+.ideditor .tag-row button:active,
+.ideditor .tag-row button:focus {
background: #f1f1f1;
}
@media (hover: hover) {
}
.ideditor .tag-reference-body {
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 auto;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
+ flex: 1 1 auto;
width: 100%;
overflow: hidden;
display: none;
}
.ideditor .tag-reference-body.expanded {
padding-bottom: 10px;
- display: inline-block;
+ padding-left: 10px;
+ display: block;
}
-.ideditor .tag-reference-description {
-
+.ideditor[dir='rtl'] .tag-reference-body.expanded {
+ padding-left: 0;
+ padding-right: 10px;
}
.ideditor .tag-reference-link {
display: block;
}
+.ideditor .tag-reference-link .icon:first-child {
+ margin-left: 0;
+}
.ideditor img.tag-reference-wiki-image {
float: right;
font-weight: normal;
padding-left: 10px;
}
+.ideditor .section-raw-member-editor .member-row .member-entity-name.has-colour::before,
+.ideditor .section-raw-membership-editor .member-row .member-entity-name.has-colour::before,
+.ideditor .feature-list .entity-name.has-colour::before,
+.ideditor .combobox-parent-relation .has-colour::before {
+ display: inline-block;
+ content: '';
+ margin-left: -5px;
+ margin-right: 5px;
+ border-style: solid;
+ border-width: 4px;
+ border-radius: 4px;
+ border-color: inherit;
+}
+.ideditor .combobox-parent-relation .has-colour::before {
+ margin-left: 2px;
+}
.ideditor[dir='rtl'] .section-raw-member-editor .member-row .member-entity-name,
.ideditor[dir='rtl'] .section-raw-membership-editor .member-row .member-entity-name {
padding-left:0;
padding-right: 10px;
}
+.ideditor[dir='rtl'] .section-raw-member-editor .member-row .member-entity-name.has-colour::before,
+.ideditor[dir='rtl'] .section-raw-membership-editor .member-row .member-entity-name.has-colour::before,
+.ideditor[dir='rtl'] .feature-list .entity-name.has-colour::before {
+ margin-left: 5px;
+ margin-right: -5px;
+}
+.ideditor[dir='rtl'] .combobox-parent-relation .has-colour::before {
+ margin-left: 5px;
+ margin-right: 2px;
+}
+
.ideditor .form-field-input-member > input.member-role {
border-radius: 0 0 4px 4px;
}
.ideditor .member-row-new .member-entity-input {
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 100%;
- -ms-flex: 1 1 100%;
- flex: 1 1 100%;
+ flex: 1 1 100%;
border-radius: 4px 4px 0 0;
border: 0;
}
*/
}
-/* hidden field to prevent user from tabbing out of the sidebar */
-.ideditor input.key-trap {
- height: 0px;
- width: 0px;
- padding: 0px;
- border: 1px solid rgba(0,0,0,0);
-}
-
-
/* add tag, add relation buttons */
.ideditor .add-row {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
width: 100%;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -webkit-flex-flow: row nowrap;
- -ms-flex-flow: row nowrap;
- flex-flow: row nowrap;
+ flex-flow: row nowrap;
}
.ideditor .add-row .add-tag,
.ideditor .add-row .add-relation,
.ideditor .add-row .space-value {
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 50%;
- -ms-flex: 1 1 50%;
- flex: 1 1 50%;
+ flex: 1 1 50%;
}
.ideditor .add-row .space-buttons {
- -webkit-box-flex: 0;
- -webkit-flex: 0 0 62px;
- -ms-flex: 0 0 62px;
- flex: 0 0 62px;
+ flex: 0 0 62px;
}
.ideditor .add-row button {
- height: 30px;
+ padding: 5px;
background: rgba(0,0,0,.5);
}
.ideditor .add-row button:focus,
background-color: #f6f6f6;
border-radius: 5px;
border: 1px solid #ccc;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -webkit-flex-flow: row nowrap;
- -ms-flex-flow: row nowrap;
- flex-flow: row nowrap;
- -webkit-box-align: center;
- -webkit-align-items: center;
- -ms-flex-align: center;
- align-items: center;
+ flex-flow: row nowrap;
+ align-items: center;
}
.ideditor .note-header-icon,
.ideditor .qa-header-icon {
background-color: #fff;
padding: 10px;
- -webkit-box-flex: 0;
- -webkit-flex: 0 0 62px;
- -ms-flex: 0 0 62px;
- flex: 0 0 62px;
+ flex: 0 0 auto;
position: relative;
width: 60px;
height: 60px;
.ideditor .qa-header-label {
background-color: #f6f6f6;
padding: 0 15px;
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 100%;
- -ms-flex: 1 1 100%;
- flex: 1 1 100%;
+ flex: 1 1 100%;
font-size: 14px;
font-weight: bold;
border-radius: 0 5px 5px 0;
border-radius: 5px;
border: 1px solid #ccc;
margin: 10px auto;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -webkit-flex-flow: row nowrap;
- -ms-flex-flow: row nowrap;
- flex-flow: row nowrap;
+ flex-flow: row nowrap;
}
.ideditor .comment-avatar {
padding: 10px;
- -webkit-box-flex: 0;
- -webkit-flex: 0 0 62px;
- -ms-flex: 0 0 62px;
- flex: 0 0 62px;
+ flex: 0 0 auto;
}
.ideditor .comment-avatar .icon.comment-avatar-icon {
width: 40px;
}
.ideditor .comment-main {
padding: 10px 10px 10px 0;
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 100%;
- -ms-flex: 1 1 100%;
- flex: 1 1 100%;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -webkit-flex-flow: column nowrap;
- -ms-flex-flow: column nowrap;
- flex-flow: column nowrap;
+ flex: 1 1 100%;
+ flex-flow: column nowrap;
overflow: hidden;
overflow-wrap: break-word;
}
}
.ideditor .comment-metadata {
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -webkit-flex-flow: row nowrap;
- -ms-flex-flow: row nowrap;
- flex-flow: row nowrap;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
+ flex-flow: row nowrap;
+ justify-content: space-between;
}
.ideditor .comment-author {
font-weight: bold;
margin-top: 20px;
border-radius: 4px;
border: 1px solid #ccc;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
+ flex-direction: column;
}
.ideditor .qa-details-description-text::first-letter {
text-transform: capitalize;
background-color: #f6f6f6;
border-radius: 5px;
border: 1px solid #ccc;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -webkit-flex-flow: row nowrap;
- -ms-flex-flow: row nowrap;
- flex-flow: row nowrap;
- -webkit-box-align: center;
- -webkit-align-items: center;
- -ms-flex-align: center;
- align-items: center;
+ flex-flow: row nowrap;
+ align-items: center;
}
.ideditor .data-header-icon {
background-color: #fff;
padding: 10px;
- -webkit-box-flex: 0;
- -webkit-flex: 0 0 62px;
- -ms-flex: 0 0 62px;
- flex: 0 0 62px;
+ flex: 0 0 auto;
position: relative;
width: 60px;
height: 60px;
.ideditor .data-header-label {
background-color: #f6f6f6;
padding: 0 15px;
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 100%;
- -ms-flex: 1 1 100%;
- flex: 1 1 100%;
+ flex: 1 1 100%;
font-size: 14px;
font-weight: bold;
border-radius: 0 5px 5px 0;
.ideditor .over-map {
- position: absolute;
- left: 0;
- right: 0;
- top: 71px;
- bottom: 30px;
+ position: relative;
+ height: 100%;
pointer-events: none;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: reverse;
- -webkit-flex-direction: row-reverse;
- -ms-flex-direction: row-reverse;
- flex-direction: row-reverse;
- -webkit-box-align: end;
- -webkit-align-items: flex-end;
- -ms-flex-align: end;
- align-items: flex-end;
+ flex-direction: row-reverse;
+ align-items: flex-end;
+ overflow: hidden;
}
.ideditor .over-map > * {
pointer-events: auto;
+ z-index: 5;
+}
+/* offscreen this without hiding it */
+.ideditor .over-map .select-trap {
+ position: absolute;
+ right: -1000%;
+ opacity: 0;
}
/* Map Controls
------------------------------------------------------- */
+.ideditor .map-controls-wrap {
+ position: absolute;
+ left: 0;
+ right: 0;
+ height: 100%;
+ z-index: 100;
+ display: block;
+ overflow-x: hidden;
+ overflow-y: auto;
+ pointer-events: none;
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+}
+.ideditor .map-controls-wrap::-webkit-scrollbar {
+ display: none;
+}
.ideditor .map-controls {
right: 0;
top: 0;
width: 40px;
position: absolute;
- z-index: 100;
bottom: 0;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
+ flex-direction: column;
padding: 5px 0;
pointer-events: none;
}
width: 40px;
height: 100%;
max-height: 70px;
- -webkit-box-flex: 0;
- -webkit-flex: 0 1 auto;
- -ms-flex: 0 1 auto;
- flex: 0 1 auto;
+ flex: 0 1 auto;
}
.ideditor[dir='rtl'] .map-controls {
left: 0;
right: auto;
}
+.ideditor .map-control {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+}
.ideditor .map-control > button {
position: relative;
width: 40px;
+ height: 40px;
background: rgba(0,0,0,.5);
border-radius: 0;
pointer-events: auto;
/* Fullscreen Button (disabled)
------------------------------------------------------- */
.ideditor div.full-screen {
- display: inline-block;
+ /*display: inline-block;*/
width: 40px;
margin-right: 10px;
display: none;
height: 40px;
background: transparent;
}
-.ideditor div.full-screen > button:active {
+.ideditor div.full-screen > button:active,
+.ideditor div.full-screen > button:focus {
background-color: rgba(0, 0, 0, .8);
}
@media (hover: hover) {
/* Background / Map Data Settings
------------------------------------------------------- */
-.ideditor .map-data-control,
-.ideditor .background-control {
- position: relative;
-}
-
.ideditor .imagery-faq {
margin-bottom: 10px;
white-space: nowrap;
}
.ideditor .layer-list > li {
- height: 30px;
background-color: #fff;
color: #7092ff;
position: relative;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
}
.ideditor .layer-list li.best > div.best {
padding: 5px;
- -webkit-box-flex: 0;
- -webkit-flex: 0 0 auto;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
+ flex: 0 0 auto;
+ align-self: center;
}
.ideditor[dir='rtl'] .list-item-data-browse svg {
- -webkit-transform: rotateY(180deg);
- transform: rotateY(180deg);
+ transform: rotateY(180deg);
}
/* make sure tooltip fits in map-control panel */
.ideditor .layer-list label {
padding: 5px 10px;
cursor: pointer;
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 auto;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
+ flex: 1 1 auto;
display: flex;
+ align-items: center;
overflow: hidden;
}
.ideditor .layer-list label > span {
display: block;
overflow: hidden;
- white-space: nowrap;
- -o-text-overflow: ellipsis;
- text-overflow: ellipsis;
- -webkit-box-flex: 1;
- -webkit-flex-grow: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
+ width: calc(100% - 20px); /* Ensures radio input width within flexbox */
+}
+
+.ideditor .layer-list label span.localized-text {
+ line-height: 0.95rem;
+}
+
+.ideditor .layer-list input.list-item-input {
+ height: 2.2em;
+ padding: 0px 4px;
+ width: 50%;
+ min-width: 160px;
}
.ideditor .map-data-pane .layer-list button,
.ideditor .background-pane .layer-list button {
- height: 100%;
border-left: 1px solid #ccc;
border-radius: 0;
padding-left: 4px;
.ideditor .issue .issue-label,
.ideditor .issue-label .issue-text {
width: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -webkit-flex-flow: row nowrap;
- -ms-flex-flow: row nowrap;
- flex-flow: row nowrap;
+ flex-flow: row nowrap;
cursor: pointer;
+ text-align: initial;
+ background: none;
}
.ideditor .issue-text .issue-icon {
- -webkit-box-flex: 0;
- -webkit-flex: 0 0 auto;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- padding: 5px 7px;
+ flex: 0 0 auto;
+ padding: 2px 3px;
}
.ideditor .issue-text .issue-message {
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 auto;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
- padding: 5px 0;
+ flex: 1 1 auto;
+ padding: 4px 5px;
}
.ideditor .issue-label .issue-autofix {
- -webkit-box-flex: 0;
- -webkit-flex: 0 0 auto;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
+ flex: 0 0 auto;
padding: 5px 8px;
}
.ideditor .issue-label .issue-info-button {
height: unset;
width: 32px;
- -webkit-box-flex: 0;
- -webkit-flex: 0 0 auto;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
+ flex: 0 0 auto;
border-left: 1px solid #ccc;
background-color: rgba(0,0,0,0);
}
}
.ideditor button.autofix.action {
- -webkit-box-flex: 0;
- -webkit-flex: 0 0 20px;
- -ms-flex: 0 0 20px;
- flex: 0 0 20px;
+ flex: 0 0 20px;
height: 20px;
width: 20px;
background: #7092ff;
/* fix all */
.ideditor .autofix-all {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -webkit-flex-flow: row nowrap;
- -ms-flex-flow: row nowrap;
- flex-flow: row nowrap;
- -webkit-flex-direction: row-reverse;
- -ms-flex-direction: row-reverse;
- flex-direction: row-reverse;
+ flex-flow: row nowrap;
+ justify-content: flex-end;
margin-top: -25px;
padding-bottom: 5px;
}
.ideditor .warnings-list .issue.severity-warning .issue-label,
.ideditor .issue.severity-warning .issue-fix-list,
-.ideditor.mode-save .warning-section {
+.ideditor .warning-section {
background: #ffc;
}
color: #f90;
}
-.ideditor .issue.severity-warning .issue-fix-item.actionable,
+.ideditor .issue.severity-warning .issue-fix-item button.actionable,
.ideditor .issue-container.active .issue.severity-warning .issue-info-button {
color: #b15500;
fill: #b15500;
}
.ideditor .warnings-list .issue.severity-warning .issue-label:active,
-.ideditor .issue.severity-warning .issue-fix-item.actionable:active {
+.ideditor .warnings-list .issue.severity-warning .issue-label:focus,
+.ideditor .issue.severity-warning .issue-fix-item button.actionable:active,
+.ideditor .issue.severity-warning .issue-fix-item button.actionable:focus {
background: #ff8;
}
-.ideditor .issue.severity-warning .issue-fix-item.actionable:active,
-.ideditor .issue-container.active .issue.severity-warning .issue-info-button:active {
+.ideditor .issue.severity-warning .issue-fix-item button.actionable:active,
+.ideditor .issue.severity-warning .issue-fix-item button.actionable:focus,
+.ideditor .issue-container.active .issue.severity-warning .issue-info-button:active,
+.ideditor .issue-container.active .issue.severity-warning .issue-info-button:focus {
color: #7f3d00;
fill: #7f3d00;
}
@media (hover: hover) {
.ideditor .warnings-list .issue.severity-warning .issue-label:hover,
- .ideditor .issue.severity-warning .issue-fix-item.actionable:hover {
+ .ideditor .issue.severity-warning .issue-fix-item button.actionable:hover {
background: #ff8;
}
- .ideditor .issue.severity-warning .issue-fix-item.actionable:hover,
+ .ideditor .issue.severity-warning .issue-fix-item button.actionable:hover,
.ideditor .issue-container.active .issue.severity-warning .issue-info-button:hover {
color: #7f3d00;
fill: #7f3d00;
.ideditor .errors-list .issue.severity-error .issue-label,
.ideditor .issue.severity-error .issue-fix-list,
-.ideditor.mode-save .error-section {
+.ideditor .error-section {
background: #ffd6d6;
}
background: #ffc6c6;
}
-.ideditor .issue.severity-error .issue-fix-item.actionable,
+.ideditor .issue.severity-error .issue-fix-item button.actionable,
.ideditor .issue-container.active .issue.severity-error .issue-info-button {
color: #b91201;
fill: #b91201;
color: #dd1400;
}
.ideditor .errors-list .issue.severity-error .issue-label:active,
-.ideditor .issue.severity-error .issue-fix-item.actionable:active {
+.ideditor .errors-list .issue.severity-error .issue-label:focus,
+.ideditor .issue.severity-error .issue-fix-item button.actionable:active,
+.ideditor .issue.severity-error .issue-fix-item button.actionable:focus {
background: #ffb6b6;
}
-.ideditor .issue.severity-error .issue-fix-item.actionable:active,
-.ideditor .issue-container.active .issue.severity-error .issue-info-button:active {
+.ideditor .issue.severity-error .issue-fix-item button.actionable:active,
+.ideditor .issue.severity-error .issue-fix-item button.actionable:focus,
+.ideditor .issue-container.active .issue.severity-error .issue-info-button:active,
+.ideditor .issue-container.active .issue.severity-error .issue-info-button:focus {
color: #840c00;
fill: #840c00;
}
@media (hover: hover) {
.ideditor .errors-list .issue.severity-error .issue-label:hover,
- .ideditor .issue.severity-error .issue-fix-item.actionable:hover {
+ .ideditor .issue.severity-error .issue-fix-item button.actionable:hover {
background: #ffb6b6;
}
- .ideditor .issue.severity-error .issue-fix-item.actionable:hover,
+ .ideditor .issue.severity-error .issue-fix-item button.actionable:hover,
.ideditor .issue-container.active .issue.severity-error .issue-info-button:hover {
color: #840c00;
fill: #840c00;
.ideditor .issues-option label {
display: table-cell;
padding: 0 10px;
+ white-space: nowrap;
}
.ideditor .layer-list.issues-list li.issue {
margin-bottom: 0;
}
.ideditor .section-footer {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -webkit-flex-flow: row nowrap;
- -ms-flex-flow: row nowrap;
- flex-flow: row nowrap;
- -webkit-flex-direction: row-reverse;
- -ms-flex-direction: row-reverse;
- flex-direction: row-reverse;
+ flex-flow: row nowrap;
+ justify-content: flex-end;
height: 30px;
}
.ideditor .section-footer a {
border: 1px solid #72d979;
background: #c6ffca;
padding: 5px !important;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
}
.ideditor .section-issues-status .icon {
.ideditor input.square-degrees-input {
padding: 2px !important; /* important needed for rtl */
- width: 40px;
- height: unset;
+ width: 3em;
+ height: 2em;
text-align: center;
background: rgba(0,0,0,0);
color: currentColor;
background: #f6f6f6;
}
.ideditor .section-entity-issues .issue-container:not(.active) .issue-text:active,
-.ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:active {
+.ideditor .section-entity-issues .issue-container:not(.active) .issue-text:focus,
+.ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:active,
+.ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:focus {
background: #f1f1f1;
}
@media (hover: hover) {
padding-left: 10px;
}
-.ideditor .section-entity-issues .issue-container.active .issue-label .issue-text {
+.ideditor .section-entity-issues .issue-container.active .issue-label button.issue-text {
font-weight: bold;
}
.ideditor .section-entity-issues .issue-container:not(:last-of-type) {
display: none;
}
-.ideditor li.issue-fix-item {
+.ideditor li.issue-fix-item button {
padding: 2px 10px 2px 20px;
+ background: transparent;
+ width: 100%;
+ text-align: initial;
}
-.ideditor[dir='rtl'] li.issue-fix-item {
+.ideditor[dir='rtl'] li.issue-fix-item button {
padding: 2px 20px 2px 10px;
}
-.ideditor li.issue-fix-item:first-of-type {
+.ideditor li.issue-fix-item:first-of-type button {
padding-top: 5px;
}
-.ideditor li.issue-fix-item:last-of-type {
+.ideditor li.issue-fix-item:last-of-type button {
padding-bottom: 5px;
}
-.ideditor li.issue-fix-item .fix-message {
+.ideditor li.issue-fix-item button .fix-message {
padding: 0 10px;
+ vertical-align: middle;
}
-.ideditor li.issue-fix-item.actionable {
+.ideditor li.issue-fix-item button.actionable {
cursor: pointer;
}
-.ideditor li.issue-fix-item:not(.actionable) .fix-icon {
+.ideditor li.issue-fix-item button:not(.actionable) .fix-icon {
color: #555;
fill: #555;
}
.ideditor .issue-container:not(.active) ul.issue-fix-list {
display: none;
}
+.ideditor .issue-container:not(.active) .issue-info {
+ display: none;
+}
.ideditor .issue-info {
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 auto;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
+ flex: 1 1 auto;
width: 100%;
overflow: hidden;
display: none;
padding: 10px;
}
-.ideditor .display-control h5 {
+.ideditor .display-options-container label {
padding-bottom: 0;
padding-top: 10px;
}
-.ideditor .display-control h5 span {
+.ideditor .display-options-container label span {
+ font-weight: bold;
margin: 5px;
}
+.ideditor .display-control .control-wrap {
+ display: flex;
+ align-items: center;
+ width: 100%;
+}
.ideditor .display-control .display-option-input {
height: 20px;
- width: 155px;
- max-width: 100%;
+ flex: 1 1 100%;
}
.ideditor .display-control button {
margin-right: 0px;
vertical-align: text-bottom;
border-radius: 4px;
+ flex: 0 0 auto;
}
.ideditor[dir='rtl'] .display-control button {
margin-left: 0px;
border: 1px solid #ccc;
border-radius: 4px;
padding: 10px;
+ position: relative;
}
-.ideditor .nudge-container .nudge-instructions {
- padding-bottom: 15px;
+.ideditor .nudge-container .nudge-controls-wrap {
+ position: relative;
+ width: 100%;
+ overflow: hidden;
}
.ideditor .nudge-container .nudge-outer-rect {
border: 1px solid #ccc;
border-radius: 2px;
padding: 20px 0;
- width: 70%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-align: center;
- -webkit-align-items: center;
- -ms-flex-align: center;
- align-items: center;
- margin: 0 auto;
- margin-top: 20px;
+ justify-content: center;
+ align-items: center;
+ margin: 45px;
cursor: move;
/* prevent scrolling pane while dragging on touchscreen */
- -ms-touch-action: none;
- touch-action: none;
+ touch-action: none;
/* disable drag-to-select */
-webkit-user-select: none;
-moz-user-select: none;
- -ms-user-select: none;
user-select: none;
+ position: relative;
}
.ideditor .nudge-container .nudge-inner-rect {
.ideditor .nudge-container input {
width: 100%;
- height: 20px;
+ padding: 2px;
text-align: center;
border: 0;
}
background: #ffb;
}
-.ideditor .nudge-container input:focus {
- background-color: transparent;
-}
-
.ideditor .nudge-container button {
- float: left;
- display: block;
- width: 20%;
- position: relative;
- background-color: transparent;
+ position: absolute;
+ height: 40px;
+ width: 40px;
+}
+.ideditor .nudge-container button.right,
+.ideditor .nudge-container button.left {
+ top: 0;
+ bottom: 0;
+ margin-top: auto;
+ margin-bottom: auto;
+ vertical-align: middle;
}
-
.ideditor .nudge-container button.right {
- top: -50px;
- right: -85%;
+ right: 0;
}
-
.ideditor .nudge-container button.left {
- top: -50px;
- right: 45%;
+ left: 0;
+}
+.ideditor .nudge-container button.top,
+.ideditor .nudge-container button.bottom {
+ left: 0;
+ right: 0;
+ margin-left: auto;
+ margin-right: auto;
}
-
.ideditor .nudge-container button.top {
- left: 20%;
- top: -104px;
+ top: 0;
}
-
.ideditor .nudge-container button.bottom {
- left: -20%;
+ bottom: 0;
}
.ideditor .nudge-container button.nudge-reset {
- right: -10px;
+ right: 0;
+ bottom: 0;
}
.ideditor .nudge-surface {
/* Side Panes - Background / Map Data / Help
------------------------------------------------------- */
.ideditor .map-panes {
- -webkit-box-flex: 0;
- -webkit-flex: 0 1 auto;
- -ms-flex: 0 1 auto;
- flex: 0 1 auto;
+ flex: 0 1 auto;
position: relative;
height: 100%;
max-width: 100%;
width: 400px;
max-width: 100%;
height: 100%;
- padding-bottom: 60px;
- overflow: hidden;
z-index: 10;
+ display: flex;
+ flex-direction: column;
}
.ideditor .map-pane.help-pane {
}
.ideditor .pane-heading {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -webkit-flex-flow: row nowrap;
- -ms-flex-flow: row nowrap;
- flex-flow: row nowrap;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
+ flex-flow: row nowrap;
+ justify-content: space-between;
border-bottom: 1px solid #ccc;
- height: 60px;
+ flex: 0 0 auto;
}
.ideditor .pane-heading h2 {
.ideditor .pane-heading button {
width: 40px;
- height: 100%;
border-radius: 0;
}
margin-bottom: 20px;
}
-.ideditor .help-pane .left-content .icon.pre-text {
- vertical-align: text-top;
+.ideditor .help-pane .left-content .icon.inline,
+.ideditor .curtain-tooltip .icon.inline {
margin-right: 0;
margin-left: 0;
- display: inline-block;
+ height: 1.34em;
+ width: 1.34em;
}
.ideditor .help-pane .toc {
.ideditor .help-pane .toc li a {
border-bottom: 0;
}
+.ideditor .help-pane .toc li a:focus,
+.ideditor .help-pane .nav a:focus,
.ideditor .help-pane .toc li a:active,
.ideditor .help-pane .nav a:active {
background: #ececec;
border: 1px solid #ccc;
}
-/* no scrollbars */
+/* scrollbars only when necessary*/
.ideditor .inspector-hover div {
overflow-x: visible;
- overflow-y: visible;
+ overflow-y: auto;
}
/* hide and remove from layout */
.ideditor .inspector-hover .section-entity-issues .issue-container.active .issue-label {
border-bottom: 0;
}
-.ideditor .inspector-hover .section-entity-issues .issue-container.active .issue-label .issue-text {
+.ideditor .inspector-hover .section-entity-issues .issue-container.active .issue-label button.issue-text {
font-weight: normal;
}
opacity: 1;
color: #666;
padding: 5px 10px;
- line-height: 20px;
width: 100%;
+ height: auto;
border: 0;
}
.ideditor .inspector-hover .form-field-input-radio .structure-extras-wrap {
------------------------------------------------------- */
.ideditor img.tile {
position: absolute;
- -webkit-transform-origin: 0 0;
- -ms-transform-origin: 0 0;
- transform-origin: 0 0;
+ transform-origin: 0 0;
-webkit-user-select: none;
-moz-user-select: none;
- -ms-user-select: none;
-
user-select: none;
pointer-events: none;
opacity: 0;
- -webkit-transition: opacity 200ms linear;
-
- -o-transition: opacity 200ms linear;
-
transition: opacity 200ms linear;
}
margin-left: -70px;
margin-top: -20px;
- -webkit-transform-origin: 0 0;
-
- -ms-transform-origin: 0 0;
-
- transform-origin: 0 0;
+ transform-origin: 0 0;
-webkit-user-select: none;
-moz-user-select: none;
- -ms-user-select: none;
-
user-select: none;
}
/* Map
------------------------------------------------------- */
.ideditor .main-map {
- position: relative;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
overflow: hidden;
height: 100%;
+ width: 100%;
background: #000;
-webkit-user-select: none;
-moz-user-select: none;
- -ms-user-select: none;
user-select: none;
- -ms-touch-action: none;
- touch-action: none;
+ touch-action: none;
+ -webkit-touch-callout: none;
}
.ideditor .main-map * {
- -ms-touch-action: none;
- touch-action: none;
+ touch-action: none;
}
.ideditor .supersurface {
- -webkit-transform-origin: 0 0;
- -ms-transform-origin: 0 0;
- transform-origin: 0 0;
+ transform-origin: 0 0;
}
.ideditor .supersurface, .ideditor .layer {
top: 10px;
width: 200px;
height: 150px;
- z-index: 5;
+ z-index: 2;
background: #000;
border: #aaa 1px solid;
- -webkit-box-shadow: 0 0 2em black;
- box-shadow: 0 0 2em black;
+ border-radius: 4px;
+ box-shadow: 0 0 2em black;
}
.ideditor[dir='ltr'] .map-in-map {
left: 10px;
}
.ideditor .map-in-map-tiles {
- -webkit-transform-origin: 0 0;
- -ms-transform-origin: 0 0;
- transform-origin: 0 0;
+ transform-origin: 0 0;
-webkit-user-select: none;
-moz-user-select: none;
- -ms-user-select: none;
user-select: none;
}
/* Information Panels
------------------------------------------------------- */
.ideditor .info-panels {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: reverse;
- -webkit-flex-flow: row-reverse wrap-reverse;
- -ms-flex-flow: row-reverse wrap-reverse;
- flex-flow: row-reverse wrap-reverse;
+ flex-flow: row wrap-reverse;
+ justify-content: flex-end;
width: 100%;
z-index: 1;
-ms-user-select: element;
}
.ideditor .panel-container {
- -webkit-box-flex: 0;
- -webkit-flex: 0 0 auto;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
+ flex: 0 0 auto;
margin: 0 2px 2px 0;
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.75);
.ideditor .panel-title {
padding: 5px 10px;
+ display: flex;
+ justify-content: space-between;
}
.ideditor .panel-title button.close {
- float: right;
- height: 20px;
+ padding: 2px;
background: none;
color: #ddd;
}
.ideditor[dir='rtl'] .panel-title button.close {
float: left;
}
+.ideditor .panel-title button.close:focus,
.ideditor .panel-title button.close:active {
color: #fff;
}
display: none;
}
-.ideditor .panel-content li span {
+.ideditor .panel-content li span:not(.localized-text) {
display: inline-block;
white-space: nowrap;
margin: 0 8px;
------------------------------------------------------- */
.ideditor .map-footer {
width: 100%;
- position: absolute;
- right: 0;
- bottom: 0;
+ position: relative;
border-radius: 0;
pointer-events: none;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
+ flex-direction: column;
-ms-user-select: element;
+ flex: 0 0 auto;
}
.ideditor .map-footer-bar {
pointer-events: all;
display: block;
- height: 30px;
+ height: 2.5em;
+ position: relative;
}
.ideditor .main-footer-wrap,
.ideditor .flash-wrap {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-flex: 0;
- -webkit-flex: 0 0 100%;
- -ms-flex: 0 0 100%;
- flex: 0 0 100%;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -webkit-flex-flow: row nowrap;
- -ms-flex-flow: row nowrap;
- flex-flow: row nowrap;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
- max-height: 30px;
+ flex: 0 0 100%;
+ flex-flow: row nowrap;
+ justify-content: space-between;
+ height: 100%;
position: absolute;
right: 0;
left: 0;
.ideditor .footer-show {
bottom: 0px;
- -webkit-transition: bottom 75ms linear;
- -o-transition: bottom 75ms linear;
transition: bottom 75ms linear;
}
.ideditor .footer-hide {
- bottom: -35px;
- -webkit-transition: bottom 75ms linear;
- -o-transition: bottom 75ms linear;
+ bottom: -100%;
transition: bottom 75ms linear;
}
/* Attribution
------------------------------------------------------- */
.ideditor .attribution-wrap {
- width: 100%;
- height: 20px;
- margin-bottom: 5px;
+ position: absolute;
+ bottom: 5px;
+ left: 5px;
+ right: 5px;
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-end;
+ z-index: 0;
+ pointer-events: none;
}
-.ideditor .attribution-wrap * { pointer-events: all; }
+.ideditor .attribution-wrap > * {
+ pointer-events: auto;
+}
.ideditor .attribution-wrap .base-layer-attribution,
.ideditor .attribution-wrap .overlay-layer-attribution {
- position: absolute;
color: #ccc;
font-size: 10px;
}
-
-.ideditor .attribution-wrap .base-layer-attribution {
- left: 10px;
-}
-
.ideditor .attribution-wrap .overlay-layer-attribution {
- right: 10px;
+ text-align: right;
}
.ideditor .attribution-wrap .overlay-layer-attribution .attribution:not(:last-child):after {
.ideditor .attribution-wrap .attribution a:visited {
color: #ccf;
}
+.ideditor .attribution-wrap .attribution a:focus,
.ideditor .attribution-wrap .attribution a:hover {
color: #aaf;
}
/* Footer - Flash messages
------------------------------------------------------- */
.ideditor .flash-content {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-flex: 1;
- -webkit-flex: 1 0 auto;
- -ms-flex: 1 0 auto;
- flex: 1 0 auto;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -webkit-flex-flow: row nowrap;
- -ms-flex-flow: row nowrap;
- flex-flow: row nowrap;
- -webkit-box-align: center;
- -webkit-align-items: center;
- -ms-flex-align: center;
- align-items: center;
+ flex: 1 0 auto;
+ flex-flow: row nowrap;
+ align-items: center;
padding: 2px;
- height: 30px;
}
.ideditor .flash-icon {
- -webkit-box-flex: 0;
- -webkit-flex: 0 0 auto;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
+ flex: 0 0 auto;
width: 20px;
height: 20px;
margin: 0 8px;
}
.ideditor .flash-text {
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 auto;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
+ flex: 1 1 auto;
}
/* Scale bar
.ideditor .map-footer-bar .scale-block {
vertical-align: bottom;
width: 250px;
- max-height: 30px;
- -webkit-box-flex: 0;
- -webkit-flex: 0 0 250px;
- -ms-flex: 0 0 250px;
- flex: 0 0 250px;
+ flex: 0 0 auto;
-webkit-user-select: none;
-moz-user-select: none;
- -ms-user-select: none;
user-select: none;
+ height: 30px;
+ align-self: center;
}
.ideditor .scale-block .scale {
- height: 30px;
+ height: 100%;
width: 100%;
cursor: pointer;
+ display: block;
}
.ideditor[dir='rtl'] .scale-block .scale {
- -webkit-transform: scaleX(-1);
- -ms-transform: scaleX(-1);
- transform: scaleX(-1);
+ transform: scaleX(-1);
}
-.ideditor .scale-block .scale text {
- font: 12px sans-serif;
- stroke: none;
- fill: #ccc;
- text-anchor: start;
-}
-.ideditor[dir='rtl'] .scale-block .scale text {
- -webkit-transform: scaleX(-1);
- -ms-transform: scaleX(-1);
- transform: scaleX(-1);
+.ideditor .scale-block .scale-text {
+ display: inline-block;
+ position: absolute;
+ color: #ccc;
+ top: 0.45em;
}
.ideditor .scale-block .scale path {
/* Footer - About, Source Switcher
------------------------------------------------------- */
.ideditor .map-footer-bar .info-block {
- max-height: 30px;
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 auto;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
+ flex: 1 1 100%;
+ overflow: hidden;
}
.ideditor .map-footer-list {
- text-align: right;
- margin-right: 10px;
- clear: right;
- overflow: hidden;
-}
-.ideditor[dir='rtl'] .map-footer-list {
- text-align: left;
- clear: left;
- margin-left: 10px;
- margin-right: 0;
+ display: flex;
+ flex-flow: row nowrap;
+ height: 100%;
+ justify-content: flex-end;
}
.ideditor .map-footer-list li {
- float: right;
- border-left: 1px solid rgba(255,255,255,.5);
- padding: 5px 0 5px 5px;
- margin-left: 5px;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ white-space: nowrap;
+ padding: 5px;
}
-.ideditor[dir='rtl'] .map-footer-list li {
- float: left;
- border-left: none;
+.ideditor[dir='ltr'] .map-footer-list li:not(:last-child) {
border-right: 1px solid rgba(255,255,255,.5);
- margin-left: 0;
- margin-right: 5px;
- padding: 5px 5px 5px 0;
+}
+.ideditor[dir='rtl'] .map-footer-list li:not(:last-child) {
+ border-left: 1px solid rgba(255,255,255,.5);
}
.ideditor .map-footer-list li:empty {
display: none;
}
-.ideditor .map-footer-list li:last-child {
- border-left: 0;
- margin-left: 0;
- padding-left: 0;
-}
-.ideditor[dir='rtl'] .map-footer-list li:last-child {
- border-right: none;
-}
-
.ideditor .map-footer-list a.chip {
- padding: 2px 4px 3px 4px;
+ padding: 1px 4px 1px 4px;
border-radius: 2px;
color: #eee;
}
.ideditor .map-footer-list a.chip .icon {
width: 14px;
height: 14px;
- margin-top: 3px;
-}
-.ideditor[dir='ltr'] .map-footer-list a.chip .icon,
-.ideditor[dir='ltr'] .map-footer-list a.chip span {
- margin-right: 3px;
+ margin-top: -2px;
}
-.ideditor[dir='rtl'] .map-footer-list a.chip .icon,
-.ideditor[dir='rtl'] .map-footer-list a.chip span {
- margin-left: 3px;
+.ideditor .map-footer-list a.chip span.count {
+ margin: 0 3px;
}
.ideditor .source-switch a.chip.live {
text-align: right;
padding: 1px 10px;
color: #eee;
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 auto;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
+ flex: 1 1 auto;
}
.ideditor[dir='rtl'] .api-status {
text-align: left;
}
+.ideditor .api-status:empty {
+ display: none;
+}
.ideditor .api-status.offline,
.ideditor .api-status.readonly,
color: #ccc;
pointer-events: all;
}
+.ideditor .api-status a:focus,
.ideditor .api-status a:active {
color: inherit;
}
}
}
+.ideditor .local-storage-full {
+ display: block;
+ width: 100%;
+}
+
/* Notification Badges
------------------------------------------------------- */
/* For an icon (e.g. new version) */
.ideditor .badge {
- display: inline-block;
+ display: inline-flex;
background: #d32232;
width: 21px;
- height: 20px;
- border-radius: 11px;
+ height: 21px;
+ border-radius: 50%;
+ align-items: center;
+ justify-content: center;
+}
+.ideditor[dir='ltr'] .badge {
margin-left: 6px;
}
.ideditor[dir='rtl'] .badge {
- margin-left: 0;
margin-right: 6px;
}
-.ideditor .badge a {
- margin-right: 5px;
-}
-.ideditor[dir='rtl'] .badge a {
- margin-right: 0;
- margin-left: 5px;
-}
.ideditor .badge .icon {
vertical-align: baseline;
width: 11px;
height: 11px;
color: #fff;
+ flex: 0 0 auto;
}
/* For text (e.g. upcoming events) */
width: 80%;
min-width: 200px;
max-width: 550px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
+ flex-direction: column;
}
.ideditor .modal .content {
.ideditor .modal-section.buttons .action {
display: inline-block;
margin: 0 10px;
- text-align: center;
- vertical-align: middle;
}
.ideditor .save-section .buttons {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-flex-wrap: wrap;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
- -webkit-justify-content: space-around;
- -ms-flex-pack: distribute;
- justify-content: space-around;
+ flex-wrap: wrap;
+ justify-content: space-around;
}
.ideditor .save-section .buttons .action,
text-align: center;
}
.ideditor .modal-actions {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
}
.ideditor .modal-actions button {
- font-weight: normal;
color: #7092ff;
border-bottom: 1px solid #ccc;
border-radius: 0;
- height: 160px;
+ min-height: 160px;
text-align: center;
width: 100%;
}
}
.ideditor .save-summary,
+.ideditor .save-supporting,
.ideditor .save-communityLinks {
padding: 0px 20px 15px 20px;
}
+.ideditor .save-supporting,
.ideditor .save-communityLinks {
border-top: 1px solid #ccc;
}
.ideditor .save-success td.community-detail {
padding-bottom: 15px;
}
+.ideditor .save-success .community-table h3 {
+ margin: 0;
+}
.ideditor .summary-view-on-osm,
+.ideditor .support-the-map,
.ideditor .community-name {
font-size: 14px;
font-weight: bold;
color: #7092ff;
}
+.ideditor .modal-splash .section-preferences-third-party {
+ margin-top: 20px;
+}
+
+.ideditor .modal-splash .section-preferences-third-party .privacy-link {
+ display: none;
+}
+
/* Shortcuts Modal
------------------------------------------------------- */
.ideditor .modal-shortcuts {
width: 90%;
- max-width: 950px;
+ max-width: 1050px;
}
.ideditor .modal-shortcuts .modal-section:last-child {
- padding-top: 10px;
+ padding: 10px 15px 20px 15px;
min-height: 275px;
}
.ideditor .modal-shortcuts .tabs-bar {
- text-align: center;
padding-bottom: 5px;
- font-size: 16px;
- font-weight: bold;
+ text-align: center;
}
-.ideditor .modal-shortcuts .tab {
+.ideditor .modal-shortcuts a.tab {
display: inline-block;
padding: 5px 10px;
margin: 0 5px;
cursor: pointer;
color: #666;
+ font-size: 16px;
+ font-weight: bold;
}
-.ideditor .modal-shortcuts .tab.active {
+.ideditor .modal-shortcuts a.tab.active {
color: #7092ff;
border-bottom: 2px solid;
}
-.ideditor .modal-shortcuts .tab:active {
+.ideditor .modal-shortcuts a.tab:focus,
+.ideditor .modal-shortcuts a.tab:active {
color: #597be7;
background-color: #efefef;
}
@media (hover: hover) {
- .ideditor .modal-shortcuts .tab:hover {
+ .ideditor .modal-shortcuts a.tab:hover {
color: #597be7;
background-color: #efefef;
}
}
.ideditor .modal-shortcuts .shortcut-tab {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -webkit-flex-flow: row wrap;
- -ms-flex-flow: row wrap;
- flex-flow: row wrap;
- -webkit-justify-content: space-around;
- -ms-flex-pack: distribute;
- justify-content: space-around;
+ flex-flow: row wrap;
+ justify-content: space-around;
}
.ideditor .modal-shortcuts .shortcut-column {
}
.ideditor .modal-shortcuts .shortcut-tab-tools .shortcut-column {
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 100%;
- -ms-flex: 1 1 100%;
- flex: 1 1 100%;
+ flex: 1 1 100%;
width: 100%;
}
/* Save Mode
------------------------------------------------------- */
-.ideditor.mode-save a.user-info {
+.ideditor a.user-info {
display: inline-block;
}
-.ideditor.mode-save .commit-form {
+.ideditor .commit-form {
margin-bottom: 0;
}
-.ideditor.mode-save .user-info img {
- float: left;
-}
-
-.ideditor.mode-save h3 small.count {
- margin-right: 10px;
- text-align: center;
+.ideditor .user-info img {
float: left;
- height: 12px;
- min-width: 12px;
- font-size: 12px;
- line-height: 12px;
- border-radius: 24px;
- padding: 5px;
- background: #7092ff;
- color: #fff;
}
.ideditor .note-save .field-warning,
-.ideditor.mode-save .field-warning {
+.ideditor .field-warning {
background: #ffb;
border: 1px solid #ccc;
border-radius: 4px;
}
.ideditor .note-save .field-warning:empty,
-.ideditor.mode-save .field-warning:empty {
+.ideditor .field-warning:empty {
display: none;
}
-.ideditor.mode-save .field-warning,
-.ideditor.mode-save .changeset-info,
-.ideditor.mode-save .request-review,
-.ideditor.mode-save .commit-info {
+.ideditor .changeset-info,
+.ideditor .request-review,
+.ideditor .commit-info {
margin-bottom: 10px;
}
-.ideditor.mode-save .request-review label {
+.ideditor .field-warning {
+ margin-top: 10px;
+}
+
+.ideditor .request-review label {
cursor: pointer;
}
-.ideditor.mode-save .changeset-list {
+.ideditor .changeset-list {
border: 1px solid #ccc;
border-radius: 4px;
background: #fff;
margin-bottom: 10px;
+ overflow: hidden;
}
-.ideditor.mode-save .warning-section .changeset-list button {
- border-left: 1px solid #ccc;
-}
-
-.ideditor.mode-save .changeset-list li {
- position: relative;
- border-top: 1px solid #ccc;
+.ideditor .changeset-list li button {
padding: 5px 10px;
- cursor: pointer;
+ width: 100%;
+ border-radius: 0;
+ text-align: initial;
}
-.ideditor.mode-save .changeset-list li:active {
- background-color: #ececec;
+.ideditor .changeset-list li {
+ border-top: 1px solid #ccc;
}
-@media (hover: hover) {
- .ideditor.mode-save .changeset-list li:hover {
- background-color: #ececec;
- }
+.ideditor .changeset-list li:first-child {
+ border-top: 0;
}
-
-.ideditor.mode-save .changeset-list .alert {
+.ideditor .changeset-list .alert {
opacity: 0.5;
}
-.ideditor .changeset-list li span.count {
- font-size: 10px;
- color: #555;
-}
-
-.ideditor .changeset-list li span.count:before { content: '('; }
-
-.ideditor .changeset-list li span.count:after { content: ')'; }
-
-.ideditor .changeset-list li:first-child { border-top: 0;}
-
/* Conflict resolution
------------------------------------------------------- */
padding: 20px;
}
-.ideditor.mode-save button.conflicts-button {
+.ideditor button.conflicts-button {
float: left;
}
.ideditor .notice .zoom-to {
margin: auto;
width: 300px;
- height: 70px;
+ padding: 20px 5px;
font-size: 150%;
border-radius: 8px;
+ font-weight: bold;
}
.ideditor .notice .zoom-to:focus,
/* dark tooltips for sidebar / panels */
.ideditor .tooltip.dark.top .popover-arrow,
.ideditor .map-pane .tooltip.top .popover-arrow,
-.ideditor .sidebar .tooltip.top .popover-arrow {
+.ideditor .sidebar .tooltip.top .popover-arrow,
+.ideditor .modal .tooltip.top .popover-arrow {
border-top-color: #000;
}
.ideditor .tooltip.dark.bottom .popover-arrow,
.ideditor .map-pane .tooltip.bottom .popover-arrow,
-.ideditor .sidebar .tooltip.bottom .popover-arrow {
+.ideditor .sidebar .tooltip.bottom .popover-arrow,
+.ideditor .modal .tooltip.bottom .popover-arrow {
border-bottom-color: #000;
}
.ideditor .tooltip.dark.left .popover-arrow,
.ideditor .map-pane .tooltip.left .popover-arrow,
-.ideditor .sidebar .tooltip.left .popover-arrow {
+.ideditor .sidebar .tooltip.left .popover-arrow,
+.ideditor .modal .tooltip.left .popover-arrow {
border-left-color: #000;
}
.ideditor .tooltip.dark.right .popover-arrow,
.ideditor .map-pane .tooltip.right .popover-arrow,
-.ideditor .sidebar .tooltip.right .popover-arrow {
+.ideditor .sidebar .tooltip.right .popover-arrow,
+.ideditor .modal .tooltip.right .popover-arrow {
border-right-color: #000;
}
.ideditor .tooltip.dark .popover-inner,
.ideditor .map-pane .keyhint-wrap,
.ideditor .sidebar .popover-inner,
.ideditor .sidebar .tooltip-heading,
-.ideditor .sidebar .keyhint-wrap {
+.ideditor .sidebar .keyhint-wrap,
+.ideditor .modal .popover-inner {
background: #000;
color: #ccc;
}
background-color: #666;
border: solid 1px #444;
border-bottom-color: #333;
- -webkit-box-shadow: inset 0 -1px 0 #333;
- box-shadow: inset 0 -1px 0 #333;
+ box-shadow: inset 0 -1px 0 #333;
color: #eee;
}
------------------------------------------------------- */
.ideditor .edit-menu {
position: absolute;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
+ flex-direction: column;
background: #fff;
border-radius: 4px;
/* padding is set in edit_menu.js */
}
.ideditor .edit-menu-item {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-align: center;
- -webkit-align-items: center;
- -ms-flex-align: center;
- align-items: center;
+ align-items: center;
border-radius: 0;
padding: 0 12px;
/* height is set in edit_menu.js */
max-width: 120px;
text-align: initial;
line-height: 1.1em;
+ font-weight: bold;
}
.ideditor[dir='ltr'] .edit-menu-item .label {
margin-left: 8px;
/* Scrollbars
----------------------------------------------------- */
.ideditor ::-webkit-scrollbar {
- height: 20px;
+ height: 10px;
overflow: visible;
width: 10px;
- background: #fff;
border-left: 1px solid #DDD;
}
background-color: rgba(0,0,0,.05);
}
}
+body {
+ scrollbar-width: 10px;
+}
/* Intro walkthrough
}
.ideditor .intro-nav-wrap {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
+ flex-direction: row;
position: absolute;
left: 0;
right: 0;
}
.ideditor .intro-nav-wrap .intro-nav-wrap-logo {
- -webkit-box-flex: 0;
- -webkit-flex: 0 0 auto;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
+ flex: 0 0 auto;
height: 40px;
width: 40px;
color: #fff;
}
.ideditor .intro-nav-wrap .joined {
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 auto;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
+ flex: 1 1 auto;
display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
+ flex-direction: row;
}
.ideditor .intro-nav-wrap button.chapter {
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 100%;
- -ms-flex: 1 1 100%;
- flex: 1 1 100%;
+ flex: 1 1 100%;
padding: 0px 5px;
+ font-weight: bold;
}
.ideditor .intro-nav-wrap button.chapter.next {
- -webkit-animation-duration: 1s;
- animation-duration: 1s;
- -webkit-animation-name: pulse;
- animation-name: pulse;
- -webkit-animation-iteration-count: infinite;
- animation-iteration-count: infinite;
- -webkit-animation-direction: alternate;
- animation-direction: alternate;
-}
-@-webkit-keyframes pulse {
- from { background: #7092ff; }
- to { background: #c6d4ff; }
+ animation-duration: 1s;
+ animation-name: pulse;
+ animation-iteration-count: infinite;
+ animation-direction: alternate;
}
@keyframes pulse {
from { background: #7092ff; }
.ideditor .curtain-tooltip.intro-mouse {
-webkit-user-select: none;
-moz-user-select: none;
- -ms-user-select: none;
user-select: none;
}
.ideditor .huge-modal-button {
width: 100%;
- height: auto;
padding: 20px;
}
projects / rails.git / blobdiff