.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"] {
- box-sizing: border-box; /* 1 */
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
.ideditor input[type="search"] {
-webkit-appearance: none; /* 1 */
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box; /* 2 */
- box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
}
/*
pointer-events: none;
}
-.ideditor .lasso #map {
+.ideditor .lasso .main-map {
pointer-events: visibleStroke;
}
/* `.target` objects are interactive */
/* They can be picked up, clicked, hovered, or things can connect to them */
-.ideditor .qa_error.target,
+.ideditor .qaItem.target,
.ideditor .note.target,
.ideditor .node.target,
.ideditor .turn .target {
stroke-linejoin: round;
}
+.ideditor[pointer='pen'] .way.target {
+ stroke-width: 18;
+}
+.ideditor[pointer='touch'] .way.target {
+ stroke-width: 32;
+}
+.ideditor[pointer='touch'] .node.vertex.target {
+ pointer-events: painted;
+ stroke: currentColor;
+ stroke-width: 10;
+}
/* `.target-nope` objects are explicitly forbidden to join to */
.ideditor .surface:not(.nope-disabled) .node.target.target-nope,
/* points, notes & QA */
/* points, notes, markers */
-.ideditor g.qa_error .stroke,
+.ideditor g.qaItem .stroke,
.ideditor g.note .stroke {
stroke: #222;
stroke-width: 1;
opacity: 0.6;
}
-.ideditor g.qa_error.active .stroke,
+.ideditor g.qaItem.active .stroke,
.ideditor g.note.active .stroke {
stroke: #222;
stroke-width: 1;
}
-.ideditor g.qa_error .shadow,
+.ideditor g.qaItem .shadow,
.ideditor g.point .shadow,
.ideditor g.note .shadow {
fill: none;
stroke-opacity: 0;
}
-.ideditor g.qa_error.hover:not(.selected) .shadow,
+.ideditor g.qaItem.hover:not(.selected) .shadow,
.ideditor g.note.hover:not(.selected) .shadow,
.ideditor g.point.related:not(.selected) .shadow,
.ideditor g.point.hover:not(.selected) .shadow {
stroke-opacity: 0.5;
}
-.ideditor g.qa_error.selected .shadow,
+.ideditor g.qaItem.selected .shadow,
.ideditor g.note.selected .shadow,
.ideditor g.point.selected .shadow {
stroke-opacity: 0.7;
font-weight: bold;
fill: #333;
-webkit-transition: opacity 100ms linear;
+ -o-transition: opacity 100ms linear;
transition: opacity 100ms linear;
- -moz-transition: opacity 100ms linear;
}
/* Opera doesn't support dominant-baseline. See #715 */
.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 .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,
}
/* service roads */
-.ideditor .preset-icon .icon.tag-highway-service {
- color: #fff;
- fill: #666;
-}
.ideditor path.line.stroke.tag-highway-service,
.ideditor path.line.stroke.tag-service {
stroke: #fff;
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 {
stroke: #39a;
}
-/* narrow width miscellanous things */
+/* narrow width miscellaneous things */
.ideditor path.line.shadow.tag-aerialway,
.ideditor path.line.shadow.tag-attraction-summer_toboggan,
.ideditor path.line.shadow.tag-attraction-water_slide,
}
.ideditor .map-in-map,
-.ideditor #map {
+.ideditor .main-map {
cursor: auto; /* Opera */
cursor: url(<%= asset_path("iD/img/cursor-grab.png") %>) 9 9, auto; /* FF */
}
.ideditor.mode-browse .point,
-.ideditor.mode-select .point {
+.ideditor.mode-select .point,
+.ideditor.mode-select-data .point,
+.ideditor.mode-select-error .point,
+.ideditor.mode-select-note .point {
cursor: pointer; /* Opera */
cursor: url(<%= asset_path("iD/img/cursor-select-point.png") %>), pointer; /* FF */
}
+.ideditor.mode-browse .vertex,
.ideditor.mode-select .vertex,
-.ideditor.mode-browse .vertex {
+.ideditor.mode-select-data .vertex,
+.ideditor.mode-select-error .vertex,
+.ideditor.mode-select-note .vertex {
cursor: pointer; /* Opera */
cursor: url(<%= asset_path("iD/img/cursor-select-vertex.png") %>), pointer; /* FF */
}
.ideditor.mode-browse .line,
-.ideditor.mode-select .line {
+.ideditor.mode-select .line,
+.ideditor.mode-select-data .line,
+.ideditor.mode-select-error .line,
+.ideditor.mode-select-note .line {
cursor: pointer; /* Opera */
cursor: url(<%= asset_path("iD/img/cursor-select-line.png") %>), pointer; /* FF */
}
+.ideditor.mode-browse .area,
.ideditor.mode-select .area,
-.ideditor.mode-browse .area {
+.ideditor.mode-select-data .area,
+.ideditor.mode-select-error .area,
+.ideditor.mode-select-note .area {
cursor: pointer; /* Opera */
cursor: url(<%= asset_path("iD/img/cursor-select-area.png") %>), pointer; /* FF */
}
+.ideditor.mode-browse .midpoint,
.ideditor.mode-select .midpoint,
-.ideditor.mode-browse .midpoint {
+.ideditor.mode-select-data .midpoint,
+.ideditor.mode-select-error .midpoint,
+.ideditor.mode-select-note .midpoint {
cursor: pointer; /* Opera */
cursor: url(<%= asset_path("iD/img/cursor-select-split.png") %>), pointer; /* FF */
}
cursor: url(<%= asset_path("iD/img/cursor-select-remove.png") %>), pointer; /* FF */
}
-.ideditor.mode-add-preset #map,
-.ideditor.mode-draw-line #map,
-.ideditor.mode-draw-area #map,
-.ideditor.mode-add-line #map,
-.ideditor.mode-add-area #map,
-.ideditor.mode-drag-node #map,
-.ideditor.mode-drag-note #map {
+.ideditor.mode-add-preset .main-map,
+.ideditor.mode-draw-line .main-map,
+.ideditor.mode-draw-area .main-map,
+.ideditor.mode-add-line .main-map,
+.ideditor.mode-add-area .main-map,
+.ideditor.mode-drag-node .main-map,
+.ideditor.mode-drag-note .main-map {
cursor: crosshair; /* Opera */
cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */
}
cursor: url(<%= asset_path("iD/img/cursor-draw-connect-vertex.png") %>) 9 9, crosshair; /* FF */
}
-.ideditor.mode-add-point #map,
-.ideditor.mode-add-note #map,
-.ideditor.mode-browse.lasso #map,
+.ideditor.mode-add-point .main-map,
+.ideditor.mode-add-note .main-map,
+.ideditor.mode-browse.lasso .main-map,
.ideditor.mode-browse.lasso .way,
.ideditor.mode-browse.lasso .vertex,
.ideditor.mode-browse.lasso .midpoint,
-.ideditor.mode-select.lasso #map,
+.ideditor.mode-select.lasso .main-map,
.ideditor.mode-select.lasso .way,
.ideditor.mode-select.lasso .vertex,
.ideditor.mode-select.lasso .midpoint {
}
.ideditor.mode-browse .note,
-.ideditor.mode-browse .qa_error,
.ideditor.mode-select .note,
-.ideditor.mode-select .qa_error,
+.ideditor.mode-select-data .note,
+.ideditor.mode-select-error .note,
+.ideditor.mode-select-note .note {
+ cursor: pointer;
+}
+
+.ideditor.mode-browse .qaItem,
+.ideditor.mode-select .qaItem,
+.ideditor.mode-select-data .qaItem,
+.ideditor.mode-select-error .qaItem,
+.ideditor.mode-select-note .qaItem {
+ cursor: pointer;
+}
+
+/* turn restriction editor */
.ideditor .turn rect,
.ideditor .turn circle {
cursor: pointer;
}
/* photo viewer div */
-.ideditor #photoviewer {
+.ideditor .photoviewer {
position: relative;
- flex-shrink: 0;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
margin-bottom: 10px;
width: 330px;
height: 250px;
padding: 5px;
background-color: #fff;
}
-.ideditor[dir='ltr'] #photoviewer {
+.ideditor[dir='ltr'] .photoviewer {
margin-left: 10px;
margin-right: 2px;
}
-.ideditor[dir='rtl'] #photoviewer {
+.ideditor[dir='rtl'] .photoviewer {
margin-right: 10px;
margin-left: 2px;
}
@media screen and (min-width: 1600px) {
- .ideditor #photoviewer {
+ .ideditor .photoviewer {
width: 490px;
height: 370px;
}
}
-.ideditor #photoviewer button.thumb-hide {
+.ideditor .photoviewer button.thumb-hide {
border-radius: 0;
padding: 5px;
position: absolute;
z-index: 50;
}
-.ideditor #photoviewer button.resize-handle-xy {
+.ideditor .photoviewer button.resize-handle-xy {
border-radius: 0;
position: absolute;
top: 0;
width: 25px;
}
-.ideditor #photoviewer button.resize-handle-x {
+.ideditor .photoviewer button.resize-handle-x {
border-radius: 0;
position: absolute;
top: 0;
width: 6px;
}
-.ideditor #photoviewer button.resize-handle-y {
+.ideditor .photoviewer button.resize-handle-y {
border-radius: 0;
position: absolute;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
- object-fit: cover;
+ -o-object-fit: cover;
+ object-fit: cover;
}
.ideditor .photo-wrapper .photo-attribution {
pointer-events: none;
}
.ideditor.mode-browse .viewfield-group,
-.ideditor.mode-select .viewfield-group {
+.ideditor.mode-select .viewfield-group,
+.ideditor.mode-select-data .viewfield-group,
+.ideditor.mode-select-error .viewfield-group,
+.ideditor.mode-select-note .viewfield-group {
pointer-events: visible;
cursor: pointer;
}
}
.ideditor .viewfield-group.currentView .viewfield-scale {
- transform: scale(2,2);
+ -webkit-transform: scale(2,2);
+ -ms-transform: scale(2,2);
+ transform: scale(2,2);
}
.ideditor .sequence {
.ideditor .layer-mapillary-detections .icon-detected rect {
fill: none;
}
-.ideditor .layer-mapillary-detections .icon-detected:hover rect {
+.ideditor .layer-mapillary-detections .icon-detected:active {
+ opacity: 1;
+}
+.ideditor .layer-mapillary-detections .icon-detected:active rect {
outline: 3px solid rgba(255, 238, 0, 0.6);
}
-.ideditor .layer-mapillary-detections .icon-detected.currentView rect {
- outline: 3px solid rgba(255, 238, 0, 1);
+@media (hover: hover) {
+ .ideditor .layer-mapillary-detections .icon-detected:hover {
+ opacity: 1;
+ }
+ .ideditor .layer-mapillary-detections .icon-detected:hover rect {
+ outline: 3px solid rgba(255, 238, 0, 0.6);
+ }
}
-.ideditor .layer-mapillary-detections .icon-detected:hover,
.ideditor .layer-mapillary-detections .icon-detected.currentView {
opacity: 1;
}
+.ideditor .layer-mapillary-detections .icon-detected.currentView rect {
+ outline: 3px solid rgba(255, 238, 0, 1);
+}
/* OpenStreetCam Image Layer */
display: block;
}
.ideditor .ms-wrapper .photo-attribution .attribution-row {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- flex-flow: row nowrap;
- justify-content: space-between;
- align-items: center;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
padding: 0 5px;
}
.ideditor .ms-wrapper .photo-attribution .image-view-link {
text-align: right;
}
-.ideditor .ms-wrapper .photo-attribution a:active,
-.ideditor .ms-wrapper .photo-attribution a:hover {
+.ideditor .ms-wrapper .photo-attribution a:active {
color: #0fffc4;
}
+@media (hover: hover) {
+ .ideditor .ms-wrapper .photo-attribution a:hover {
+ color: #0fffc4;
+ }
+}
.ideditor .ms-wrapper .pnlm-compass.pnlm-control {
width: 26px;
/* Mapillary viewer */
-.ideditor #mly .domRenderer .TagSymbol {
+.ideditor #ideditor-mly .domRenderer .TagSymbol {
font-size: 10px;
background-color: rgba(0,0,0,0.4);
padding: 0 4px;
border-radius: 4px;
top: -25px;
}
-.ideditor #mly .domRenderer .Attribution {
- /* we will roll our own to avoid async update issues like #4526 */
- display: none;
-}
-.ideditor .mly-wrapper .photo-attribution a:active,
-.ideditor .mly-wrapper .photo-attribution a:hover {
- color: #35af6d;
+.ideditor .mly-wrapper .AttributionContainer .AttributionIconContainer .AttributionMapillaryLogo {
+ margin-top: 3px;
}
-.ideditor .mly-wrapper .mapillary-js-dom {
- z-index: 9;
+.ideditor .mly-wrapper .AttributionContainer .AttributionImageContainer {
+ color: #fff;
+ font-size: 10px;
+ font-weight: 300;
+ overflow: hidden;
}
background-repeat: no-repeat;
}
-.ideditor .osc-wrapper .photo-attribution a:active,
-.ideditor .osc-wrapper .photo-attribution a:hover {
+.ideditor .osc-wrapper .photo-attribution a:active {
color: #20c4ff;
}
+@media (hover: hover) {
+ .ideditor .osc-wrapper .photo-attribution a:hover {
+ color: #20c4ff;
+ }
+}
.ideditor .osc-image-wrap {
width: 100%;
height: 100%;
- transform-origin:0 0;
- -ms-transform-origin:0 0;
-webkit-transform-origin:0 0;
- -moz-transform-origin:0 0;
- -o-transform-origin:0 0;
+ -ms-transform-origin:0 0;
+ transform-origin:0 0;
}
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:last-of-type {
border-radius: 0 3px 3px 0;
}
-.ideditor .photo-controls button:hover,
.ideditor .photo-controls button:active {
background: rgba(0,0,0,0.85);
color: #fff;
}
+@media (hover: hover) {
+ .ideditor .photo-controls button:hover {
+ background: rgba(0,0,0,0.85);
+ color: #fff;
+ }
+}
-/* OSM Notes and KeepRight Layers */
+/* OSM Notes and QA Layers */
-.ideditor .error-header-icon .qa_error-fill,
-.ideditor .layer-keepRight .qa_error .qa_error-fill,
-.ideditor .layer-improveOSM .qa_error .qa_error-fill {
+.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 */
}
height: 15px;
}
-/* adjustment for error icon */
-
-.ideditor .error-header-icon .preset-icon-28 {
+/* adjustment to center QA icons */
+.ideditor .qa-header-icon .preset-icon-28 {
top: auto;
left: auto;
}
-
-.ideditor .error-header-icon {
+.ideditor .qa-header-icon {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- align-items: center;
- justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
}
-/* Keep Right Errors
+/* Keep Right Issues
------------------------------------------------------- */
-.ideditor .keepRight.error_type-20,
-.ideditor .keepRight.error_type-40,
-.ideditor .keepRight.error_type-210,
-.ideditor .keepRight.error_type-270,
-.ideditor .keepRight.error_type-310,
-.ideditor .keepRight.error_type-320,
-.ideditor .keepRight.error_type-350 { /* improper bridge tag */
+.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;
}
-.ideditor .keepRight.error_type-50 { /* almost junctions */
+.ideditor .keepRight.itemType-50 { /* almost junctions */
color: #88f;
}
-.ideditor .keepRight.error_type-60,
-.ideditor .keepRight.error_type-70,
-.ideditor .keepRight.error_type-90,
-.ideditor .keepRight.error_type-100,
-.ideditor .keepRight.error_type-110,
-.ideditor .keepRight.error_type-150,
-.ideditor .keepRight.error_type-220,
-.ideditor .keepRight.error_type-380 { /* non-physical sport tag */
+.ideditor .keepRight.itemType-60,
+.ideditor .keepRight.itemType-70,
+.ideditor .keepRight.itemType-90,
+.ideditor .keepRight.itemType-100,
+.ideditor .keepRight.itemType-110,
+.ideditor .keepRight.itemType-150,
+.ideditor .keepRight.itemType-220,
+.ideditor .keepRight.itemType-380 { /* non-physical sport tag */
color: #5d0;
}
-.ideditor .keepRight.error_type-130 { /* disconnected ways */
+.ideditor .keepRight.itemType-130 { /* disconnected ways */
color: #fa3;
}
-.ideditor .keepRight.error_type-170 { /* FIXME tag */
+.ideditor .keepRight.itemType-170 { /* FIXME tag */
color: #ff0;
}
-.ideditor .keepRight.error_type-190 { /* intersection without junction */
+.ideditor .keepRight.itemType-190 { /* intersection without junction */
color: #f33;
}
-.ideditor .keepRight.error_type-200 { /* overlapping ways */
+.ideditor .keepRight.itemType-200 { /* overlapping ways */
color: #fdbf6f;
}
-.ideditor .keepRight.error_type-160,
-.ideditor .keepRight.error_type-230 { /* layer conflict */
+.ideditor .keepRight.itemType-160,
+.ideditor .keepRight.itemType-230 { /* layer conflict */
color: #b60;
}
-.ideditor .keepRight.error_type-280 { /* boundary issues */
+.ideditor .keepRight.itemType-280 { /* boundary issues */
color: #5f47a0;
}
-.ideditor .keepRight.error_type-180,
-.ideditor .keepRight.error_type-290 { /* turn restriction issues */
+.ideditor .keepRight.itemType-180,
+.ideditor .keepRight.itemType-290 { /* turn restriction issues */
color: #ace;
}
-.ideditor .keepRight.error_type-300,
-.ideditor .keepRight.error_type-390 { /* missing tracktype */
+.ideditor .keepRight.itemType-300,
+.ideditor .keepRight.itemType-390 { /* missing tracktype */
color: #090;
}
-.ideditor .keepRight.error_type-360,
-.ideditor .keepRight.error_type-370,
-.ideditor .keepRight.error_type-410 { /* website issues */
+.ideditor .keepRight.itemType-360,
+.ideditor .keepRight.itemType-370,
+.ideditor .keepRight.itemType-410 { /* website issues */
color: #f9b;
}
-.ideditor .keepRight.error_type-120,
-.ideditor .keepRight.error_type-400 { /* geometry / turn angles */
+.ideditor .keepRight.itemType-120,
+.ideditor .keepRight.itemType-400 { /* geometry / turn angles */
color: #c35;
}
-/* ImproveOSM Errors
+/* ImproveOSM Issues
------------------------------------------------------- */
-.ideditor .improveOSM.error_type-ow { /* missing one way */
+.ideditor .improveOSM.itemType-ow { /* missing one way */
color: #1E90FF;
}
-.ideditor .improveOSM.error_type-mr-road { /* missing road */
+.ideditor .improveOSM.itemType-mr-road { /* missing road */
color: #B452CD;
}
-.ideditor .improveOSM.error_type-mr-path { /* missing path */
+.ideditor .improveOSM.itemType-mr-path { /* missing path */
color: #A0522D;
}
-.ideditor .improveOSM.error_type-mr-parking { /* missing parking */
+.ideditor .improveOSM.itemType-mr-parking { /* missing parking */
color: #EEEE00;
}
-.ideditor .improveOSM.error_type-mr-both { /* missing road+parking */
+.ideditor .improveOSM.itemType-mr-both { /* missing road+parking */
color: #FFA500;
}
-.ideditor .improveOSM.error_type-tr { /* missing turn restriction */
+.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-width: 20px;
}
.ideditor.mode-browse .fill-partial path.area.fill,
-.ideditor.mode-select .fill-partial path.area.fill {
+.ideditor.mode-select .fill-partial path.area.fill,
+.ideditor.mode-select-data .fill-partial path.area.fill,
+.ideditor.mode-select-error .fill-partial path.area.fill,
+.ideditor.mode-select-note .fill-partial path.area.fill {
pointer-events: visibleStroke;
}
/* Basics
border: 0;
overflow: hidden;
- font: normal 12px/1.6667 "-apple-system", BlinkMacSystemFont,
+ /* Establish a local stacking context so all elements within iD are on the
+ same layer relative to elements outside iD - #7457.
+ https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+ */
+ position: relative;
+ z-index: 0;
+
+ font: normal 12px/1.6667 ui-sans-serif, "-apple-system", BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
sans-serif;
color: #333;
+ -ms-touch-action: none;
+
+ touch-action: none;
-ms-user-select: none;
-ms-content-zooming: none;
-
- /* Establish a local stacking context so all elements within iD are on the
- same layer relative to elements outside iD - #7457.
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
- */
- position: relative;
- z-index: 0;
+}
+.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;
}
-.ideditor #content {
+.ideditor .main-content {
position: relative;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
overflow: hidden;
height: 100%;
+ -ms-touch-action: none;
+ touch-action: none;
}
-.ideditor #content.active {
+.ideditor .main-content.active {
-webkit-filter: none !important;
- filter: none !important;
- -webkit-duration: 200ms;
- transition-duration: 200ms;
+ filter: none !important;
+ -webkit-transition-duration: 200ms;
+ -o-transition-duration: 200ms;
+ transition-duration: 200ms;
}
-.ideditor #content.inactive {
+.ideditor .main-content.inactive {
-webkit-filter: grayscale(80%) brightness(80%);
- filter: grayscale(80%) brightness(80%);
- -webkit-duration: 200ms;
- transition-duration: 200ms;
+ filter: grayscale(80%) brightness(80%);
+ -webkit-transition-duration: 200ms;
+ -o-transition-duration: 200ms;
+ transition-duration: 200ms;
}
-.ideditor #defs {
+.ideditor #ideditor-defs {
/* Can't be display: none or the clippaths are ignored. */
position: absolute;
width: 0;
}
.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 {
- -moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
- box-sizing: border-box;
+ box-sizing: border-box;
}
.ideditor a, .ideditor button, .ideditor input, .ideditor textarea {
}
.ideditor a,
-.ideditor button,
-.ideditor .radial-menu-item {
+.ideditor button {
cursor: pointer;
}
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 ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+.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 { /* Internet Explorer 10-11 */
+
+.ideditor ::-ms-input-placeholder {
color: #aaa;
+ opacity: 1; /* Firefox */
}
-.ideditor ::-ms-input-placeholder { /* Microsoft Edge */
+
+.ideditor ::placeholder {
color: #aaa;
+ opacity: 1; /* Firefox */
}
.ideditor p {
.ideditor strong {
font-weight: bold;
}
-.ideditor a:visited, .ideditor a {
+.ideditor a,
+.ideditor a:visited,
+.ideditor a:active {
color: #7092ff;
}
-.ideditor a:hover {
+.ideditor a:focus {
color: #597be7;
}
+@media (hover: hover) {
+ .ideditor a:hover {
+ color: #597be7;
+ }
+}
.ideditor kbd {
display: inline-block;
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;
- box-shadow: inset 0 -1px 0 #bbb;
+ -webkit-box-shadow: inset 0 -1px 0 #bbb;
+ box-shadow: inset 0 -1px 0 #bbb;
}
-/* 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 code {
+ font-family: ui-monospace, monospace, monospace;
+ background: rgba(174, 174, 174, 0.25);
+ padding: 1px 2px;
}
+/* Forms
+------------------------------------------------------- */
.ideditor textarea,
.ideditor input[type=text],
.ideditor input[type=search],
.ideditor input[type=number],
.ideditor input[type=url],
.ideditor input[type=tel],
-.ideditor input[type=email] {
+.ideditor input[type=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;
- text-overflow: ellipsis;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ overflow: auto;
+}
+.ideditor input[type=text],
+.ideditor input[type=search],
+.ideditor input[type=number],
+.ideditor input[type=url],
+.ideditor input[type=tel],
+.ideditor input[type=email],
+.ideditor input[type=date] {
+ /* need this since line-height interpretation may vary by font or browser */
+ height: 2.585em;
}
-.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 textarea {
+ min-height: 2em;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ resize: vertical;
+ font:normal 12px/20px "-apple-system", BlinkMacSystemFont,
+ "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
+ "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
+ sans-serif;
}
+.ideditor textarea:active,
+.ideditor input:active,
.ideditor textarea:focus,
.ideditor input:focus {
background-color: #f1f1f1;
.ideditor input[type="checkbox"],
.ideditor input[type="radio"] {
- float: left;
width: 14px;
height: 14px;
margin-right: 5px;
- margin-top: 3px;
cursor: pointer;
+ vertical-align: middle;
}
.ideditor[dir='rtl'] input[type="checkbox"],
.ideditor[dir='rtl'] input[type="radio"] {
- float: right;
margin-left: 5px;
margin-right: 0;
}
+.ideditor input.mixed::-webkit-input-placeholder, .ideditor textarea.mixed::-webkit-input-placeholder {
+ font-style: italic;
+}
+
+.ideditor input.mixed::-moz-placeholder, .ideditor textarea.mixed::-moz-placeholder {
+ font-style: italic;
+}
+
+.ideditor input.mixed:-ms-input-placeholder, .ideditor textarea.mixed:-ms-input-placeholder {
+ font-style: italic;
+}
+
+.ideditor input.mixed::-ms-input-placeholder, .ideditor textarea.mixed::-ms-input-placeholder {
+ font-style: italic;
+}
+
+.ideditor input.mixed::placeholder,
+.ideditor textarea.mixed::placeholder {
+ font-style: italic;
+}
+
+/* keytraps need to be invisible yet not be display:none or visibility:hidden */
+.ideditor .keytrap {
+ width: 0;
+ height: 0;
+ padding: 0;
+ margin: 0;
+ border: 0;
+}
+
/* tables */
.ideditor table {
background-color: #fff;
color: #a9a9a9;
}
.ideditor .content {
- box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
+ -webkit-box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
+ box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
}
.ideditor .loading {
background: url(<%= asset_path("iD/img/loader_bg.gif") %>);
------------------------------------------------------- */
.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:hover {
+.ideditor button:active,
+.ideditor button.hover {
background-color: #ececec;
}
+@media (hover: hover) {
+ .ideditor button:hover {
+ background-color: #ececec;
+ }
+}
.ideditor button.active {
background: #7092ff;
}
.ideditor button.action {
background: #7092ff;
color: #fff;
+ font-weight: bold;
}
.ideditor button.action:focus,
-.ideditor button.action:hover {
+.ideditor button.action:active {
background: #597be7;
}
.ideditor button.secondary-action {
background: #ececec;
+ font-weight: bold;
}
.ideditor button.secondary-action:focus,
-.ideditor button.secondary-action:hover {
+.ideditor button.secondary-action:active {
background: #cccccc;
}
.ideditor button.action.disabled,
-.ideditor button.action.disabled:hover,
-.ideditor button[disabled].action,
-.ideditor button[disabled].action:hover {
+.ideditor button[disabled].action {
background: #cccccc;
color: #888;
cursor: not-allowed;
}
+.ideditor button.action,
+.ideditor button.secondary-action {
+ padding: 10px 5px;
+}
+
+@media (hover: hover) {
+ .ideditor button.action:hover {
+ background: #597be7;
+ }
+ .ideditor button.secondary-action:hover {
+ background: #cccccc;
+ }
+ .ideditor button.action.disabled:hover,
+ .ideditor button[disabled].action:hover {
+ background: #cccccc;
+ color: #888;
+ cursor: not-allowed;
+ }
+}
+
/* Icons
------------------------------------------------------- */
.ideditor .icon {
- vertical-align: top;
+ vertical-align: middle;
width: 20px;
height: 20px;
}
+.ideditor .icon.operation use {
+ fill: #222;
+ color: #79f;
+}
+.ideditor button.disabled .icon.operation use,
+.ideditor .icon.operation.disabled use {
+ fill: rgba(32,32,32,.2);
+ color: rgba(40,40,40,.2);
+}
+
+.ideditor .icon.monochrome use {
+ fill: currentColor;
+}
+
.ideditor .icon.inline {
vertical-align: text-top;
- width: 14px;
- height: 14px;
+ display: inline-block;
+ width: 1.17em;
+ height: 1.17em;
margin: 0px 3px;
}
.ideditor .icon.light {
color: #fff;
+ fill: currentColor;
}
.ideditor .icon.created {
color: #00ca07;
color: #333;
}
-.ideditor .notification-badge {
- display: block;
- position: absolute;
- width: 10px;
- height: 10px;
- right: 7px;
- top: 9px;
-}
-
-.ideditor .notification-badge.hide {
- display: none;
-}
-
/* Toolbar / Persistent UI Elements
------------------------------------------------------- */
-.ideditor #bar-wrap {
- position: absolute;
- left: 0;
- top: 0;
- right: 0;
+.ideditor .top-toolbar-wrap {
+ position: relative;
z-index: 101;
}
-.ideditor #bar {
+.ideditor .top-toolbar {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- flex-flow: row nowrap;
- justify-content: space-between;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
padding: 10px 0 0 0;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE, Edge */
}
-.ideditor #bar::-webkit-scrollbar {
+.ideditor .top-toolbar::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
-.ideditor #bar .toolbar-item {
+.ideditor .top-toolbar .toolbar-item {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- flex: 0 1 auto;
- flex-flow: column wrap;
- justify-content: center;
-}
-.ideditor #bar .toolbar-item .item-content {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: column wrap;
+ flex-flow: column wrap;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.ideditor .top-toolbar .toolbar-item .item-content {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- flex: 0 1 auto;
- flex-flow: row nowrap;
- justify-content: center;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
height: 40px;
width: auto;
margin: 0 5px;
}
-.ideditor[dir='ltr'] #bar .toolbar-item:last-child .item-content,
-.ideditor[dir='rtl'] #bar .toolbar-item:first-child .item-content {
+.ideditor[dir='ltr'] .top-toolbar .toolbar-item:last-child .item-content,
+.ideditor[dir='rtl'] .top-toolbar .toolbar-item:first-child .item-content {
margin-right: 10px;
}
-.ideditor[dir='ltr'] #bar .toolbar-item:first-child .item-content,
-.ideditor[dir='rtl'] #bar .toolbar-item:last-child .item-content {
+.ideditor[dir='ltr'] .top-toolbar .toolbar-item:first-child .item-content,
+.ideditor[dir='rtl'] .top-toolbar .toolbar-item:last-child .item-content {
margin-left: 10px;
}
-.ideditor #bar .toolbar-item .item-label {
+.ideditor[dir='ltr'] .top-toolbar .toolbar-item:last-child .item-label,
+.ideditor[dir='rtl'] .top-toolbar .toolbar-item:first-child .item-label {
+ padding-right: 5px;
+}
+.ideditor[dir='ltr'] .top-toolbar .toolbar-item:first-child .item-label,
+.ideditor[dir='rtl'] .top-toolbar .toolbar-item:last-child .item-label {
+ padding-left: 5px;
+}
+.ideditor .top-toolbar .toolbar-item .item-label {
text-align: center;
font-size: 11px;
white-space: nowrap;
margin: 1px 2px 2px 2px;
}
-.ideditor #bar .toolbar-item.spacer {
+.ideditor .top-toolbar .toolbar-item.spacer {
width: 100%;
- flex-grow: 2;
+ -webkit-box-flex: 2;
+ -ms-flex-positive: 2;
+ flex-grow: 2;
}
-.ideditor #bar .toolbar-item:first-child {
- justify-content: flex-start;
+.ideditor .top-toolbar .toolbar-item:first-child {
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
}
-.ideditor #bar .toolbar-item:last-child {
- justify-content: flex-end;
+.ideditor .top-toolbar .toolbar-item:last-child {
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
}
-.ideditor #bar .toolbar-item:empty:not(.spacer) {
+.ideditor .top-toolbar .toolbar-item:empty:not(.spacer) {
display: none;
}
.ideditor button.bar-button {
- flex: 0 0 auto;
- flex-flow: row nowrap;
- align-items: center;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
padding: 0 10px;
min-width: 30px;
white-space: nowrap;
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
+ font-weight: bold;
}
.ideditor button.bar-button .icon {
- flex: 0 0 20px;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 20px;
+ flex: 0 0 20px;
}
.ideditor button.bar-button .label {
- flex: 0 1 auto;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
padding: 0 5px;
}
text-align: center;
}
-.ideditor .help-wrap 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-wrap 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 {
- -moz-transform: scaleX(-1);
- -o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
- transform: scaleX(-1);
- filter: FlipH;
+ -ms-transform: scaleX(-1);
+ transform: scaleX(-1);
+ -webkit-filter: FlipH;
+ filter: FlipH;
-ms-filter: "FlipH";
}
-.ideditor #bar.narrow .spinner,
-.ideditor #bar.narrow button.bar-button .label {
+.ideditor .top-toolbar.narrow .spinner,
+.ideditor .top-toolbar.narrow button.bar-button .label {
display: none;
}
-.ideditor #bar.narrow button .count {
+.ideditor .top-toolbar.narrow button .count {
border-left-width: 0;
border-right-width: 0;
}
------------------------------------------------------- */
.ideditor .header {
border-bottom: 1px solid #ccc;
- height: 60px;
+ padding: 20px 40px;
position: relative;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
}
.ideditor .header h3 {
text-align: center;
margin-bottom: 0;
- white-space: nowrap;
- text-overflow: ellipsis;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
overflow: hidden;
- padding: 20px;
+ padding: 0;
}
.ideditor .header button,
}
.ideditor .field-help-title button.close,
-.ideditor .sidebar-component .header button.data-editor-close,
-.ideditor .sidebar-component .header button.note-editor-close,
-.ideditor .sidebar-component .header button.error-editor-close,
-.ideditor .entity-editor-pane .header button.preset-close,
+.ideditor .sidebar .header button.close,
.ideditor .preset-list-pane .header button.preset-choose {
position: absolute;
right: 0;
top: 0;
}
.ideditor[dir='rtl'] .field-help-title button.close,
-.ideditor[dir='rtl'] .sidebar-component .header button.data-editor-close,
-.ideditor[dir='rtl'] .sidebar-component .header button.note-editor-close,
-.ideditor[dir='rtl'] .sidebar-component .header button.error-editor-close,
-.ideditor[dir='rtl'] .entity-editor-pane .header button.preset-close,
+.ideditor[dir='rtl'] .sidebar .header button.close,
.ideditor[dir='rtl'] .preset-list-pane .header button.preset-choose {
left: 0;
right: auto;
position: absolute;
bottom: 0;
margin: 0;
- padding: 5px 20px 5px 20px;
+ padding: 0 15px;
border-top: 1px solid #ccc;
background-color: #f6f6f6;
width: 100%;
+ height: 2.5em;
z-index: 1;
- flex-wrap: wrap;
- justify-content: space-between;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
list-style: none;
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
}
.ideditor .footer > a {
- justify-content: center;
-}
-
-.ideditor .header-container {
- display: flex;
- justify-content: space-between;
-}
-
-.ideditor .header-block-outer {
- width: 20%;
-}
-
-.ideditor .header-block-close {
- display: flex;
- justify-content: flex-end;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
}
-/* Hide/Toggle collapsable sections (aka Disclosure)
+/* 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;
}
/* Sidebar / Inspector
------------------------------------------------------- */
-.ideditor #sidebar {
+.ideditor .sidebar {
position: relative;
float: left;
height: 100%;
border: 0px solid #ccc;
border-right-width: 1px;
}
-.ideditor[dir='rtl'] #sidebar {
+.ideditor[dir='rtl'] .sidebar {
float: right;
border-right-width: 0px;
border-left-width: 1px;
}
-.ideditor #sidebar-resizer {
+.ideditor .sidebar-resizer {
position: absolute;
top: 0;
- right: -6px;
+ right: -10px;
+ width: 10px;
height: 100%;
- width: 6px;
cursor: col-resize;
+ /* disable drag-to-select */
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
}
-.ideditor[dir='rtl'] #sidebar-resizer {
+.ideditor[dir='rtl'] .sidebar-resizer {
right: auto;
left: -6px;
}
-.ideditor #sidebar.collapsed #sidebar-resizer {
+.ideditor .sidebar.collapsed .sidebar-resizer {
/* make target wider to avoid the user accidentally resizing window */
width: 10px;
right: -10px;
}
-.ideditor[dir='rtl'] #sidebar.collapsed #sidebar-resizer {
+.ideditor[dir='rtl'] .sidebar.collapsed .sidebar-resizer {
left: -10px;
}
left: 0;
bottom: 0;
right: 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
}
.ideditor .sidebar-component .body {
width: 100%;
+ height: 100%;
overflow: auto;
- top: 60px;
- bottom: 0;
- position: absolute;
+ position: relative;
}
.ideditor .panewrap {
position: absolute;
width: 50%;
top: 0;
- bottom: 30px;
+ bottom: 2.5em;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
}
.ideditor .pane:first-child {
.ideditor .pane:last-child {
right: 0;
}
+.ideditor .feature-list-pane {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ height: 100%;
+}
.ideditor .inspector-wrap {
width: 100%;
.ideditor .inspector-body {
overflow-y: scroll;
overflow-x: hidden;
- position: absolute;
- right: 0;
- left: 0;
- bottom: 0;
+ position: relative;
+ height: 100%;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 100%;
+ flex: 1 1 100%;
}
-
-.ideditor .feature-list-pane .inspector-body,
-.ideditor .preset-list-pane .inspector-body {
- top: 120px;
+.ideditor .entity-editor {
+ padding: 20px;
}
-.ideditor .entity-editor-pane .inspector-body,
-.ideditor .selection-list-pane .inspector-body {
- top: 60px;
+/* preserve extra space at bottom of inspector to allow for dropdown options - #5280 */
+.ideditor .entity-editor > div:last-child {
+ margin-bottom: 150px;
}
-.ideditor .inspector-inner {
- padding: 20px 20px 5px 20px;
+.ideditor .sidebar .search-header {
position: relative;
+ overflow: hidden;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
}
-
-.ideditor #sidebar .search-header .icon {
- display: block;
+.ideditor .sidebar .search-header .icon {
+ display: inline-block;
position: absolute;
left: 10px;
- top: 80px;
+ height: 100%;
pointer-events: none;
}
-.ideditor[dir='rtl'] #sidebar .search-header .icon {
+.ideditor[dir='rtl'] .sidebar .search-header .icon {
left: auto;
right: 10px;
}
-.ideditor #sidebar .search-header input {
- position: absolute;
- top: 60px;
- height: 60px;
+.ideditor .sidebar .search-header input {
width: 100%;
- padding: 5px 10px;
+ padding: 0 10px;
+ height: 3em;
border-radius: 0;
border-width: 0;
border-bottom-width: 1px;
font-weight: bold;
}
+.ideditor .section:not(:last-child),
+.ideditor .map-pane .section {
+ margin-bottom: 30px;
+}
+
/* Feature List / Search Results
------------------------------------------------------- */
width: 100%;
}
.ideditor .no-results-item,
-.ideditor .geocode-item,
.ideditor .feature-list-item {
width: 100%;
position: relative;
border-bottom: 1px solid #ccc;
border-radius: 0;
}
+.ideditor .no-results-item {
+ padding: 10px;
+ font-weight: bold;
+}
.ideditor .geocode-item {
- width: 50%;
- background-color: #ccc;
- left: 25%;
- margin-top: 30px;
- border-radius: 2px;
-}
-
-.ideditor[dir='rtl'] .geocode-item {
- left: -25%;
-}
-
-.ideditor .geocode-item:hover {
- background-color: #aaa;
+ width: 100%;
+ max-width: 200px;
+ margin: 30px auto;
+ min-height: 40px;
}
.ideditor .feature-list-item {
- background-color: #fff;
- font-weight: bold;
- height: 40px;
- line-height: 20px;
-}
-.ideditor .feature-list-item:hover {
- background-color: #ececec;
-}
-.ideditor .feature-list-item button {
- background: transparent;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
}
.ideditor .feature-list-item .label {
text-align: left;
- padding: 10px 10px;
+ padding: 10px;
white-space: nowrap;
- text-overflow: ellipsis;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
overflow: hidden;
- border-left: 1px solid rgba(0, 0, 0, .1);
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
}
.ideditor[dir='rtl'] .feature-list-item .label {
text-align: right;
opacity: .5;
}
.ideditor .feature-list-item .close {
- float: right;
padding: 10px;
+
}
.ideditor .feature-list-item .close .icon {
- opacity: 1;
+ opacity: 0.5;
}
.ideditor .feature-list-item .entity-type {
color: #7092ff;
+ font-weight: bold;
}
-.ideditor .feature-list-item:hover .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:hover .entity-type {
+ color: #597be7;
+ }
+}
.ideditor .feature-list-item .entity-name {
- font-weight: normal;
color: #666;
padding-left: 10px;
}
padding-left: 0;
padding-right: 10px;
}
-
+.ideditor .section-selected-features .feature-list {
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ overflow: hidden;
+ margin-top: 5px;
+}
+.ideditor .section-selected-features .feature-list-item:last-child {
+ border: none;
+}
/* Preset List and Icons
------------------------------------------------------- */
.ideditor .preset-list {
width: 100%;
padding: 20px 20px 10px 20px;
- border-bottom: 1px solid #ccc;
}
.ideditor .preset-list-item {
}
.ideditor .preset-list-button-wrap {
- height: 62px;
+ min-height: 62px;
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
border: 1px solid #ccc;
border-radius: 4px;
width: 100%;
height: 100%;
position: relative;
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
}
.ideditor .preset-list.filtered .preset-list-item:first-child .preset-list-button {
width: 60px;
height: 60px;
text-align: center;
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- align-items: center;
- justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
}
.ideditor .preset-icon-container.small {
width: 40px;
height: 40px;
- flex: 0 0 auto;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
}
.ideditor .preset-icon-container img.image-icon {
width: 50px;
height: 50px;
- object-fit: contain;
+ -o-object-fit: contain;
+ object-fit: contain;
border-radius: 2px;
z-index: 2;
visibility: hidden;
stroke-width: 1.5px;
stroke: #333;
fill: #efefef;
- backface-visibility: hidden;
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
}
.ideditor .preset-icon {
right: 0;
width: 100%;
height: 100%;
- transform: scale(0.48);
+ -webkit-transform: scale(0.48);
+ -ms-transform: scale(0.48);
+ transform: scale(0.48);
}
.ideditor .preset-icon-container.small .preset-icon.point-geom .icon {
- transform: translateY(-7%) scale(0.27);
+ -webkit-transform: translateY(-7%) scale(0.27);
+ -ms-transform: translateY(-7%) scale(0.27);
+ transform: translateY(-7%) scale(0.27);
}
.ideditor .preset-icon-container.small .preset-icon.point-geom.preset-icon-iD .icon {
- transform: translateY(-9%) scale(0.5);
+ -webkit-transform: translateY(-9%) scale(0.5);
+ -ms-transform: translateY(-9%) scale(0.5);
+ transform: translateY(-9%) scale(0.5);
}
.ideditor .preset-icon.framed .icon {
- transform: scale(0.4);
+ -webkit-transform: scale(0.4);
+ -ms-transform: scale(0.4);
+ transform: scale(0.4);
}
.ideditor .preset-icon.framed.line-geom .icon,
.ideditor .preset-icon.framed.route-geom .icon {
top: 20%;
- transform: translateY(-30%) scale(0.4);
+ -webkit-transform: translateY(-30%) scale(0.4);
+ -ms-transform: translateY(-30%) scale(0.4);
+ transform: translateY(-30%) scale(0.4);
}
.ideditor .preset-icon-iD .icon {
- transform: scale(1);
+ -webkit-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1);
}
.ideditor .preset-icon-iD.framed .icon {
- transform: scale(0.74);
+ -webkit-transform: scale(0.74);
+ -ms-transform: scale(0.74);
+ transform: scale(0.74);
}
.ideditor .preset-icon-iD.framed.line-geom .icon,
.ideditor .preset-icon-iD.framed.route-geom .icon {
- transform: translateY(-30%) scale(0.74);
+ -webkit-transform: translateY(-30%) scale(0.74);
+ -ms-transform: translateY(-30%) scale(0.74);
+ transform: translateY(-30%) scale(0.74);
}
.ideditor .preset-icon-container.fallback .preset-icon .icon {
- transform: scale(0.5) !important;
+ -webkit-transform: scale(0.5) !important;
+ -ms-transform: scale(0.5) !important;
+ transform: scale(0.5) !important;
}
.ideditor .preset-list-button .label {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- flex-flow: row wrap;
- align-items: center;
- background-color: #f6f6f6;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ background: #f6f6f6;
text-align: left;
- position: absolute;
- top: 0;
- bottom: 0;
- right: 0;
padding: 5px 10px;
- left: 60px;
border-left: 1px solid rgba(0, 0, 0, .1);
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 100%;
+ flex: 1 1 100%;
+ -ms-flex-item-align: stretch;
+ align-self: stretch;
}
.ideditor[dir='rtl'] .preset-list-button .label {
text-align: right;
- left: 0;
- right: 60px;
border-left: none;
border-right: 1px solid rgba(0, 0, 0, .1);
}
+.ideditor[dir='ltr'] .preset-list-item.mixed-types .preset-list-button .label {
+ border-top-right-radius: 4px;
+ border-bottom-right-radius: 4px;
+}
+.ideditor[dir='rtl'] .preset-list-item.mixed-types .preset-list-button .label {
+ border-top-left-radius: 4px;
+ border-bottom-left-radius: 4px;
+}
.ideditor[dir='ltr'] .category .preset-list-button .label {
border-radius: 0px 4px 4px 0px;
}
border-radius: 4px 0px 0px 4px;
}
+.ideditor .preset-list-item.mixed-types .label {
+ font-style: italic;
+}
+
.ideditor .preset-list-button .label-inner {
width: 100%;
+ line-height: 1.35em;
}
.ideditor .preset-list-button .label-inner .namepart {
- height: 17px;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
+ -o-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:hover .label,
.ideditor .preset-list-button:focus .label,
+.ideditor .preset-list-button:active .label,
.ideditor .preset-list-button.disabled,
.ideditor .preset-list-button.disabled .label {
background-color: #ececec;
}
+@media (hover: hover) {
+ .ideditor .preset-list-button:hover .label {
+ background-color: #ececec;
+ }
+}
-.ideditor .preset-list-item button.tag-reference-button {
- height: 100%;
+.ideditor .preset-list-button-wrap button.tag-reference-button {
width: 32px;
- flex: 0 0 auto;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+}
+.ideditor .preset-list-button-wrap button.tag-reference-button:not(:hover):not(:active):not(:focus) {
background: #f6f6f6;
}
-.ideditor[dir='ltr'] .preset-list-item button.tag-reference-button {
+.ideditor[dir='ltr'] .preset-list-button-wrap button.tag-reference-button {
border-left: 1px solid #ccc;
}
-.ideditor[dir='rtl'] .preset-list-item button.tag-reference-button {
+.ideditor[dir='rtl'] .preset-list-button-wrap button.tag-reference-button {
border-right: 1px solid #ccc;
}
-.ideditor[dir='ltr'] .preset-list-item button:last-child {
+.ideditor[dir='ltr'] .preset-list-button-wrap:not(.category) button:last-child {
border-radius: 0 4px 4px 0;
}
-.ideditor[dir='rtl'] .preset-list-item button:last-child {
+.ideditor[dir='rtl'] .preset-list-button-wrap:not(.category) button:last-child {
border-radius: 4px 0 0 4px;
}
-
-.ideditor .preset-list-item button.tag-reference-button:hover {
- background: #f1f1f1;
-}
-.ideditor .preset-list-item button.tag-reference-button .icon {
+.ideditor .preset-list-button-wrap button.tag-reference-button .icon {
opacity: .5;
}
+.ideditor .preset-list-button-wrap .accessory-buttons {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
.ideditor .current .preset-list-button,
}
.ideditor .subgrid .preset-list {
+ width: auto;
padding: 10px;
- margin-top: 0;
+ margin: 0 -10px;
border: 0;
border-radius: 8px;
- width: -webkit-calc(100% + 20px);
- margin-left: -10px;
}
.ideditor .subgrid .preset-list > *:last-child {
margin-bottom: 0;
width: 0;
height: 0;
margin-left: 50%;
- margin-left: -webkit-calc(50% - 10px);
+ margin-left: calc(50% - 10px);
}
/* Quick links
------------------------------------------------------- */
.ideditor .quick-links {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- flex-flow: row wrap;
- justify-content: flex-end;
- padding: 0 20px;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+ padding: 5px 0 0 0;
}
.ideditor .quick-link {
margin: 0 5px;
}
-.ideditor .data-editor .quick-links,
-.ideditor .error-editor .quick-links,
-.ideditor .note-editor .quick-links {
- padding: 5px 0 0 0;
-}
-
/* Entity/Preset Editor
------------------------------------------------------- */
-.ideditor .entity-issues,
-.ideditor .preset-editor {
- overflow: hidden;
- padding: 10px 0px 5px 0px;
-}
-.ideditor .entity-issues a.hide-toggle,
-.ideditor .preset-editor a.hide-toggle {
- margin: 0 20px 5px 20px;
-}
-.ideditor .entity-issues .disclosure-wrap-entity_issues,
-.ideditor .preset-editor .form-fields-container {
+.ideditor .section .grouped-items-area {
padding: 10px;
- margin: 0 10px 10px 10px;
+ margin: 0 -10px 10px -10px;
border-radius: 8px;
background: #ececec;
}
-.ideditor .entity-issues .disclosure-wrap-entity_issues:empty,
-.ideditor .preset-editor .form-fields-container:empty {
+.ideditor .section .grouped-items-area:empty {
display: none;
}
-.ideditor .entity-editor-pane .preset-list-item {
- margin-bottom: 0;
-}
/*
The parts of a field:
*/
.ideditor .form-field {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- flex-flow: row wrap;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
margin-bottom: 10px;
width: 100%;
-webkit-transition: margin-bottom 200ms;
- -moz-transition: margin-bottom 200ms;
- -o-transition: margin-bottom 200ms;
- transition: margin-bottom 200ms;
+ -o-transition: margin-bottom 200ms;
+ transition: margin-bottom 200ms;
}
.ideditor .form-field.nowrap,
/* A `label` element that wraps the top section */
.ideditor .field-label {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- flex-flow: row nowrap;
- flex: 1 1 100%;
- height: 30px;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 100%;
+ flex: 1 1 100%;
position: relative;
font-weight: bold;
color: #333;
overflow: hidden;
}
.ideditor .field-label .label-text {
- flex: 1 1 auto;
- padding: 5px 0 5px 10px;
+ overflow: hidden;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ padding: 5px 0 4px 10px;
}
.ideditor[dir='rtl'] .field-label .label-text {
- padding: 5px 10px 5px 0;
+ padding: 5px 10px 4px 0;
+}
+.ideditor .field-label .label-text span {
+ white-space: nowrap;
}
.ideditor .label-text .label-textannotation svg.icon {
}
.ideditor .field-label button {
- flex: 0 0 32px;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ 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: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: -ms-flexbox;
display: flex;
- flex-flow: row nowrap;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
width: 100%;
- flex: 1 1 auto;
- min-height: 30px;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ 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 {
- flex: 1 1 auto;
- min-height: 30px;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ 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 {
- flex: 0 0 auto;
- height: 30px;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
width: 32px;
position: relative;
background-color: #fff;
border-left-width: 1px;
border-right-width: 0;
}
-.ideditor .form-field-button:hover {
+.ideditor .form-field-button:active,
+.ideditor .form-field-button:focus {
background-color: #f1f1f1;
}
+@media (hover: hover) {
+ .ideditor .form-field-button:hover {
+ background-color: #f1f1f1;
+ }
+}
.ideditor .form-field-button .icon {
fill: #333;
opacity: .5;
------------------------------------------------------- */
.ideditor .form-field-input-access,
.ideditor .form-field-input-cycleway {
- flex: 1 1 auto;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- flex-flow: row wrap;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
}
/* Field - lists with labeled input items
------------------------------------------------------- */
.ideditor .form-field ul.rows {
- flex: 1 1 auto;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
border: 1px solid #ccc;
border-top: 0;
border-radius: 0 0 4px 4px;
border-top: 0;
}
.ideditor .form-field ul.rows li {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- flex-flow: row nowrap;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
}
.ideditor .form-field ul.rows li.labeled-input > span,
.ideditor .form-field ul.rows li.labeled-input > div {
- flex: 1 1 auto;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
width: 100%;
border-radius: 0;
}
------------------------------------------------------- */
.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 {
}
.ideditor .form-field-input-multicombo li {
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
display: inline-flex;
- flex-flow: row nowrap;
- align-items: center;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
margin-bottom: 3px;
margin-top: 3px;
border-radius: 4px;
.ideditor .form-field-input-multicombo li.chip {
background-color: #eff2f7;
border: 1px solid #ccd5e3;
- line-height: 25px;
max-width: 100%;
}
.ideditor[dir='ltr'] .form-field-input-multicombo li.chip {
padding: 2px 5px 2px 0px;
}
.ideditor .form-field-input-multicombo li.chip.draggable {
+ cursor: -webkit-grab;
cursor: grab;
}
.ideditor .form-field-input-multicombo li.chip.dragging {
opacity: 0.75;
z-index: 3000;
+ cursor: -webkit-grabbing;
cursor: grabbing;
}
+.ideditor .form-field-input-multicombo li.mixed {
+ border-color: #eff2f7;
+ color: #888;
+ font-style: italic;
+}
.ideditor .form-field-input-multicombo li.chip span {
display: block;
- flex: 1 1 auto;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
overflow: hidden;
word-wrap: break-word;
}
color: #a6b4ce;
display: block;
text-align: center;
- flex: 0 0 auto;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
}
.ideditor .form-field-input-multicombo .input-wrap {
border: 1px solid #ddd;
width: 100px;
- height: 31px;
}
.ideditor .form-field-input-multicombo input {
border: none;
width: 100%;
- height: 100%;
}
.ideditor .form-field-input-multicombo input:focus {
/* Field - Checkbox
------------------------------------------------------- */
.ideditor .form-field-input-check {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
background: #fff;
padding: 5px 10px;
color: #7092ff;
cursor: pointer;
}
.ideditor .form-field-input-check > input[type="checkbox"] {
- flex: 0 1 auto;
- min-height: 20px;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
width: 20px;
margin-top: 0;
}
.ideditor .form-field-input-check > span {
- flex: 1 1 auto;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+}
+.ideditor .form-field-input-check > span.mixed {
+ font-style: italic;
}
-.ideditor .form-field-input-check > .reverser.button {
- flex: 0 1 auto;
+.ideditor .form-field-input-check > .reverser {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
background-color: #eff2f7;
border: 1px solid #ccd5e3;
border-radius: 2px;
padding: 0px 8px;
+ color: inherit;
}
-.ideditor[dir='ltr'] .form-field-input-check > .reverser.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.hide {
display: none;
}
-
-.ideditor .form-field-input-check:hover {
+.ideditor .form-field-input-check:active,
+.ideditor .form-field-input-check:focus {
background: #f1f1f1;
}
+@media (hover: hover) {
+ .ideditor .form-field-input-check:hover {
+ background: #f1f1f1;
+ }
+}
.ideditor .form-field-input-check .set {
color: inherit;
}
/* Field - Radio button
------------------------------------------------------- */
.ideditor .form-field-input-radio {
- flex: 1 1 auto;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- flex-flow: row wrap;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
}
.ideditor .form-field-input-radio > label {
- flex: 1 1 auto;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- flex-flow: row nowrap;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
width: 100%;
padding: 5px 10px;
- height: 30px;
background-color: #fff;
color: #7092ff;
cursor: pointer;
}
+.ideditor .form-field-input-radio > label.mixed {
+ font-style: italic;
+}
.ideditor .form-field-input-radio > label:last-child {
border-radius: 0 0 4px 4px;
}
-.ideditor .form-field-input-radio > label:hover {
+.ideditor .form-field-input-radio > label:active,
+.ideditor .form-field-input-radio > label:focus {
background-color: #ececec;
}
+@media (hover: hover) {
+ .ideditor .form-field-input-radio > label:hover {
+ background-color: #ececec;
+ }
+}
.ideditor .form-field-input-radio > label.active {
background-color: #e8ebff;
}
border-bottom: 1px solid #ccc;
}
.ideditor .form-field-input-radio > label > input[type="radio"] {
- flex: 0 1 auto;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
width: 20px;
}
.ideditor .form-field-input-radio > label > span {
- flex: 1 1 auto;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
overflow: hidden;
white-space: nowrap;
- text-overflow: ellipsis;
+ -o-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
------------------------------------------------------- */
-.ideditor .form-field-input-maxspeed > input:first-of-type {
+.ideditor .form-field-input-maxspeed input.maxspeed-number {
+ -ms-flex-preferred-size: 0;
+ flex-basis: 0;
+}
+.ideditor .form-field-input-maxspeed input.maxspeed-unit {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
+ width: 80px;
+}
+.ideditor[dir='ltr'] .form-field-input-maxspeed > input:first-of-type {
border-radius: 0 0 0 4px;
}
.ideditor[dir='rtl'] .form-field-input-maxspeed > input:first-of-type {
border-radius: 0 0 4px 0;
}
-.ideditor .form-field-input-maxspeed > input:last-of-type { /* unit field */
- flex: 0 1 80px;
- width: 80px;
+.ideditor[dir='ltr'] .form-field-input-maxspeed > input:last-of-type {
border-left: 0;
border-radius: 0 0 4px 0;
}
/* nested subfields for name in different languages */
.ideditor .localized-multilingual {
padding: 0 10px;
- flex-basis: 100%;
+ -ms-flex-preferred-size: 100%;
+ flex-basis: 100%;
}
.ideditor .localized-multilingual .entry {
position: relative;
/* Field - Address
------------------------------------------------------- */
.ideditor .form-field-input-address {
- flex: 1 1 auto;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- flex-flow: row wrap;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
border: 1px solid #ccc;
border-top: 0px;
}
.ideditor .addr-row {
- flex: 1 1 auto;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
width: 100%;
- min-height: 30px;
}
.ideditor .addr-row > input {
- flex: 1 1 auto;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
border-radius: 0;
border-right: 0;
border-bottom: 0;
/* Field - Wikipedia
------------------------------------------------------- */
.ideditor .form-field-input-wikipedia {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- flex-flow: row wrap;
- flex: 1 1 auto;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
}
.ideditor .wiki-lang-container,
.ideditor .wiki-title-container {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- flex-flow: row nowrap;
- flex: 1 1 auto;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
width: 100%;
}
.ideditor .wiki-lang-container > input.wiki-lang,
.ideditor .wiki-title-container > input.wiki-title {
- flex: 1 1 auto;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
border-top: 0;
border-radius: 0;
}
.ideditor .restriction-controls-container .restriction-controls {
display: table;
- -moz-user-select: none;
-webkit-user-select: none;
- -ms-user-select: none;
- user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
}
.ideditor .restriction-controls .restriction-control {
}
.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;
}
color: #888;
text-align: center;
pointer-events: none;
-
- -moz-user-select: none;
-webkit-user-select: none;
- -ms-user-select: none;
- user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
}
.ideditor .restriction-help span {
/* 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;
- box-shadow: 0 4px 10px 1px rgba(0,0,0,.2);
+ -webkit-box-shadow: 0 4px 10px 1px rgba(0,0,0,.2);
+ box-shadow: 0 4px 10px 1px rgba(0,0,0,.2);
margin-top: -1px;
background: #fff;
max-height: 245px;
display: block;
padding: 5px 10px;
border-top: 1px solid #ccc;
- text-overflow: ellipsis;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.ideditor .combobox a.selected,
-.ideditor .combobox a:hover {
+.ideditor .combobox a:active,
+.ideditor .combobox a:focus {
background: #ececec;
}
+@media (hover: hover) {
+ .ideditor .combobox a:hover {
+ background: #ececec;
+ }
+}
.ideditor .combobox a:first-child {
border-top: 0;
.ideditor .combobox-caret {
display: inline-block;
position: relative;
- height: 30px;
+ height: 5px;
width: 30px !important;
margin-left: -30px;
- vertical-align: top;
+ -ms-flex-item-align: center;
+ align-self: center;
+ vertical-align: middle;
cursor: pointer;
}
.ideditor[dir='rtl'] .combobox-caret {
border-radius: 0 0 4px 4px;
z-index: 20;
background: rgba(255,255,255,0.95);
- box-shadow: 0 0 30px 5px rgba(0,0,0,.4);
+ -webkit-box-shadow: 0 0 30px 5px rgba(0,0,0,.4);
+ box-shadow: 0 0 30px 5px rgba(0,0,0,.4);
}
.ideditor .field-help-title h2 {
color: #7092ff;
border-bottom: 2px solid;
}
-.ideditor .field-help-nav-item:hover {
+.ideditor .field-help-nav-item:active,
+.ideditor .field-help-nav-item:focus {
color: #597be7;
background-color: #efefef;
}
+@media (hover: hover) {
+ .ideditor .field-help-nav-item:hover {
+ color: #597be7;
+ background-color: #efefef;
+ }
+}
.ideditor .field-help-content {
padding: 10px;
/* More Fields dropdown
------------------------------------------------------- */
.ideditor .more-fields {
- padding: 0 20px 20px 20px;
+ margin-top: 10px;
font-weight: bold;
}
-.ideditor .changeset-editor .more-fields {
- padding: 15px 20px 0 20px;
-}
.ideditor .more-fields label {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- flex-flow: row nowrap;
- justify-content: space-between;
- align-items: center;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
}
.ideditor .more-fields input {
margin-left: 10px;
- flex: 1 1 50%;
+ -webkit-box-flex: 1;
+ -ms-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: -ms-flexbox;
display: flex;
- flex-flow: row nowrap;
- flex-direction: row-reverse;
- margin-top: -25px;
- padding: 0 3px;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+ margin-top: -28px;
}
.ideditor button.raw-tag-option {
- flex: 0 0 20px;
- height: 20px;
- width: 20px;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ padding: 3px;
background: #aaa;
color: #eee;
margin: 0 3px;
}
.ideditor button.raw-tag-option:focus,
-.ideditor button.raw-tag-option:hover,
.ideditor button.raw-tag-option.active {
color: #fff;
background: #597be7;
}
+@media (hover: hover) {
+ .ideditor button.raw-tag-option:hover {
+ color: #fff;
+ background: #597be7;
+ }
+}
.ideditor button.raw-tag-option.selected {
color: #fff;
background: #7092ff;
.ideditor button.raw-tag-option svg.icon {
width: 14px;
height: 14px;
- vertical-align: text-bottom;
+ display: block;
}
.ideditor[dir='ltr'] button.raw-tag-option-list {
- -moz-transform: scaleX(-1);
- -o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
- transform: scaleX(-1);
- filter: FlipH;
+ -ms-transform: scaleX(-1);
+ transform: scaleX(-1);
+ -webkit-filter: FlipH;
+ filter: FlipH;
-ms-filter: "FlipH";
}
.ideditor .tag-text {
width: 100%;
height: 100%;
+ min-height: 32px;
font-family: monospace;
white-space: pre;
}
position: relative;
}
.ideditor .tag-row .inner-wrap {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- flex-flow: row nowrap;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
width: 100%;
position: relative;
}
.ideditor .tag-row .key-wrap,
.ideditor .tag-row .value-wrap {
- flex: 1 1 50%;
+ -webkit-box-flex: 1;
+ -ms-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 {
- flex: 0 0 32px;
- height: 31px;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
width: 32px;
border: 1px solid #ccc;
border-top-width: 0;
border-right-width: 0;
}
-.ideditor .tag-row button:hover {
+.ideditor .tag-row button:active,
+.ideditor .tag-row button:focus {
background: #f1f1f1;
}
+@media (hover: hover) {
+ .ideditor .tag-row button:hover {
+ background: #f1f1f1;
+ }
+}
.ideditor .tag-row button .icon {
opacity: .5;
}
}
.ideditor .tag-reference-body {
- flex: 1 1 auto;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
width: 100%;
overflow: hidden;
display: none;
/* Raw Member / Membership Editor
------------------------------------------------------- */
+.ideditor .section-raw-member-editor .member-list:empty,
+.ideditor .section-raw-membership-editor .member-list:empty {
+ display: none;
+}
-.ideditor .raw-member-editor .member-list,
-.ideditor .raw-membership-editor .member-list {
- padding-top: 10px;
+.ideditor .section-raw-member-editor .member-list,
+.ideditor .section-raw-membership-editor .member-list {
+ position: relative; /* required for drag-and-drop */
+ padding-top: 5px;
}
-.ideditor .raw-member-editor .member-list li,
-.ideditor .raw-membership-editor .member-list li {
+.ideditor .section-raw-member-editor .member-list li,
+.ideditor .section-raw-membership-editor .member-list li {
position: relative;
border-radius: 4px;
margin: 0;
padding-bottom: 10px;
}
-.ideditor .raw-member-editor .member-row .member-entity-name,
-.ideditor .raw-membership-editor .member-row .member-entity-name {
+.ideditor .section-raw-member-editor .member-row .member-entity-name,
+.ideditor .section-raw-membership-editor .member-row .member-entity-name {
font-weight: normal;
padding-left: 10px;
}
-.ideditor[dir='rtl'] .raw-member-editor .member-row .member-entity-name,
-.ideditor[dir='rtl'] .raw-membership-editor .member-row .member-entity-name {
+.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 .form-field-input-member > input.member-role {
- border-radius: 0 0 0 4px;
-}
-.ideditor[dir='rtl'] .form-field-input-member > input.member-role {
- border-radius: 0 0 4px 0;
-}
-
-.ideditor .member-incomplete .form-field-input-member > input.member-role,
-.ideditor[dir='rtl'] .member-incomplete .form-field-input-member > input.member-role {
border-radius: 0 0 4px 4px;
}
-.ideditor .member-incomplete .member-delete {
- display: none;
-}
-
.ideditor .member-row-new .member-entity-input {
- flex: 1 1 100%;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 100%;
+ flex: 1 1 100%;
border-radius: 4px 4px 0 0;
border: 0;
}
-.ideditor .raw-member-editor .member-row.dragging {
+.ideditor .section-raw-member-editor .member-row.dragging {
opacity: 0.75;
z-index: 3000;
/*
- -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
- -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
*/
}
-/* preserve extra space at bottom of inspector to allow for dropdown options - #5280 */
-.ideditor .raw-membership-editor.inspector-inner {
- margin-bottom: 150px;
-}
-
-/* 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: -ms-flexbox;
display: flex;
width: 100%;
- flex-flow: row nowrap;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
}
.ideditor .add-row .add-tag,
.ideditor .add-row .add-relation,
.ideditor .add-row .space-value {
- flex: 1 1 50%;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 50%;
+ flex: 1 1 50%;
}
.ideditor .add-row .space-buttons {
- flex: 0 0 62px;
+ -webkit-box-flex: 0;
+ -ms-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,
-.ideditor .add-row button:hover {
+.ideditor .add-row button:active {
background: rgba(0,0,0,.8);
}
+@media (hover: hover) {
+ .ideditor .add-row button:hover {
+ background: rgba(0,0,0,.8);
+ }
+}
.ideditor .add-tag {
border-radius: 0 0 4px 4px;
}
-/* OSM Note / KeepRight Editors
+/* OSM Note / QA Editors
------------------------------------------------------- */
.ideditor .note-header,
-.ideditor .error-header {
+.ideditor .qa-header {
background-color: #f6f6f6;
border-radius: 5px;
border: 1px solid #ccc;
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- flex-flow: row nowrap;
- align-items: center;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
}
.ideditor .note-header-icon,
-.ideditor .error-header-icon {
+.ideditor .qa-header-icon {
background-color: #fff;
padding: 10px;
- flex: 0 0 62px;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
position: relative;
width: 60px;
height: 60px;
border-radius: 5px 0 0 5px;
}
.ideditor[dir='rtl'] .note-header-icon,
-.ideditor[dir='rtl'] .error-header-icon {
+.ideditor[dir='rtl'] .qa-header-icon {
border-right: unset;
border-left: 1px solid #ccc;
border-radius: 0 5px 5px 0;
}
.ideditor .note-header-icon .icon-wrap,
-.ideditor .error-header-icon .icon-wrap {
+.ideditor .qa-header-icon .icon-wrap {
position: absolute;
top: 0px;
}
}
.ideditor .note-header-label,
-.ideditor .error-header-label {
+.ideditor .qa-header-label {
background-color: #f6f6f6;
padding: 0 15px;
- flex: 1 1 100%;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 100%;
+ flex: 1 1 100%;
font-size: 14px;
font-weight: bold;
border-radius: 0 5px 5px 0;
}
.ideditor[dir='rtl'] .note-header-label,
-.ideditor[dir='rtl'] .error-header-label {
+.ideditor[dir='rtl'] .qa-header-label {
border-radius: 5px 0 0 5px;
}
border-radius: 5px;
border: 1px solid #ccc;
margin: 10px auto;
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- flex-flow: row nowrap;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
}
.ideditor .comment-avatar {
padding: 10px;
- flex: 0 0 62px;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
}
.ideditor .comment-avatar .icon.comment-avatar-icon {
width: 40px;
height: 40px;
- object-fit: cover;
+ -o-object-fit: cover;
+ object-fit: cover;
border: 1px solid #ccc;
border-radius: 20px;
}
.ideditor .comment-main {
padding: 10px 10px 10px 0;
- flex: 1 1 100%;
- flex-flow: column nowrap;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 100%;
+ flex: 1 1 100%;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: column nowrap;
+ flex-flow: column nowrap;
overflow: hidden;
overflow-wrap: break-word;
}
}
.ideditor .comment-metadata {
- flex-flow: row nowrap;
- justify-content: space-between;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
}
.ideditor .comment-author {
font-weight: bold;
}
.ideditor .note-save,
-.ideditor .error-save {
+.ideditor .qa-save {
padding-top: 20px;
}
-.ideditor .error-details {
- padding: 10px;
-}
-.ideditor .error-details-container {
+.ideditor .qa-details-container {
background: #ececec;
padding: 10px;
margin-top: 20px;
border-radius: 4px;
border: 1px solid #ccc;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
}
-.ideditor .error-details-description {
- margin-bottom: 10px;
-}
-.ideditor .error-details-description-text::first-letter {
+.ideditor .qa-details-description-text::first-letter {
text-transform: capitalize;
}
-.ideditor[dir='rtl'] .error-details-description-text::first-letter {
+.ideditor[dir='rtl'] .qa-details-description-text::first-letter {
text-transform: none; /* #5877 */
}
+.ideditor .qa-details-subsection h4 {
+ padding-bottom: 2px;
+}
+.ideditor .qa-details-subsection:not(:last-child) {
+ margin-bottom: 10px;
+}
+.ideditor .qa-details-subsection:empty {
+ display: none;
+}
.ideditor .note-save .new-comment-input,
-.ideditor .error-save .new-comment-input {
+.ideditor .qa-save .new-comment-input {
width: 100%;
height: 100px;
max-height: 300px;
}
.ideditor .note-save .detail-section,
-.ideditor .error-save .detail-section {
+.ideditor .qa-save .detail-section {
margin: 10px 0;
}
background-color: #f6f6f6;
border-radius: 5px;
border: 1px solid #ccc;
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- flex-flow: row nowrap;
- align-items: center;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
}
.ideditor .data-header-icon {
background-color: #fff;
padding: 10px;
- flex: 0 0 62px;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
position: relative;
width: 60px;
height: 60px;
.ideditor .data-header-label {
background-color: #f6f6f6;
padding: 0 15px;
- flex: 1 1 100%;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 100%;
+ flex: 1 1 100%;
font-size: 14px;
font-weight: bold;
border-radius: 0 5px 5px 0;
}
+.ideditor .over-map {
+ position: relative;
+ height: 100%;
+ pointer-events: none;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: reverse;
+ -ms-flex-direction: row-reverse;
+ flex-direction: row-reverse;
+ -webkit-box-align: end;
+ -ms-flex-align: end;
+ align-items: flex-end;
+ overflow: hidden;
+}
+.ideditor .over-map > * {
+ pointer-events: auto;
+}
+/* offscreen this without hiding it */
+.ideditor .over-map .select-trap {
+ position: absolute;
+ right: -1000%;
+ opacity: 0;
+}
+
/* Map Controls
------------------------------------------------------- */
.ideditor .map-controls {
right: 0;
- top: 141px;
+ top: 0;
width: 40px;
position: absolute;
z-index: 100;
+ bottom: 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ padding: 5px 0;
+ pointer-events: none;
+}
+.ideditor .map-controls:before {
+ content: '';
+ display: inline-block;
+ pointer-events: none;
+ width: 40px;
+ height: 100%;
+ max-height: 70px;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
}
.ideditor[dir='rtl'] .map-controls {
left: 0;
right: auto;
}
+.ideditor .map-control {
+ position: relative;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
.ideditor .map-control > button {
position: relative;
width: 40px;
+ height: 40px;
background: rgba(0,0,0,.5);
border-radius: 0;
+ pointer-events: auto;
}
-.ideditor .map-control > button:not(.disabled):hover,
-.ideditor .map-control > button:not(.disabled):focus {
+.ideditor .map-control > button:not(.disabled):focus,
+.ideditor .map-control > button:not(.disabled):active {
background: rgba(0, 0, 0, .8);
}
-
.ideditor .map-control > button.active,
-.ideditor .map-control > button.active:hover {
+.ideditor .map-control > button.active:active {
background: #7092ff;
}
+@media (hover: hover) {
+ .ideditor .map-control > button:not(.disabled):hover {
+ background: rgba(0, 0, 0, .8);
+ }
+ .ideditor .map-control > button.active:hover {
+ background: #7092ff;
+ }
+}
.ideditor .map-control > button.disabled .icon {
color: rgba(255, 255, 255, 0.5);
height: 40px;
background: transparent;
}
-
-.ideditor div.full-screen > button:hover {
+.ideditor div.full-screen > button:active,
+.ideditor div.full-screen > button:focus {
background-color: rgba(0, 0, 0, .8);
}
+@media (hover: hover) {
+ .ideditor div.full-screen > button:hover {
+ background-color: rgba(0, 0, 0, .8);
+ }
+}
-/* Zoom Buttons
+/* Map Controls
------------------------------------------------------- */
+
+/* Zoom in/out buttons */
.ideditor .zoombuttons > button.zoom-in {
border-radius: 4px 0 0 0;
}
border-radius: 0 4px 0 0;
}
-
-/* Geolocate Button
-------------------------------------------------------- */
+/* Geolocate button */
.ideditor .geolocate-control {
margin-bottom: 10px;
}
border-radius: 0 0 4px 0;
}
+/* Zoom to selection button */
+.ideditor .zoom-to-selection-control .icon {
+ width: 22px;
+ height: 22px;
+}
+
/* Background / Map Data / Help Pane buttons
------------------------------------------------------- */
/* 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: -ms-flexbox;
display: flex;
}
.ideditor .layer-list li:not(:last-child) {
border-bottom: 1px solid #ccc;
}
-.ideditor .layer-list li:hover {
+.ideditor .layer-list li:active {
background-color: #ececec;
}
+@media (hover: hover) {
+ .ideditor .layer-list li:hover {
+ background-color: #ececec;
+ }
+}
.ideditor .layer-list li.active button,
.ideditor .layer-list li.switch button,
.ideditor .layer-list li.best > div.best {
padding: 5px;
- flex: 0 0 auto;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
}
.ideditor[dir='rtl'] .list-item-data-browse svg {
- transform: rotateY(180deg);
+ -webkit-transform: rotateY(180deg);
+ transform: rotateY(180deg);
}
/* make sure tooltip fits in map-control panel */
.ideditor .layer-list label {
padding: 5px 10px;
cursor: pointer;
- flex: 1 1 auto;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ overflow: hidden;
}
.ideditor[dir='ltr'] .layer-list .indented label {
display: block;
overflow: hidden;
white-space: nowrap;
- text-overflow: ellipsis;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+}
+
+.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: -ms-flexbox;
display: flex;
- flex-flow: row nowrap;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
cursor: pointer;
+ text-align: initial;
+ background: none;
}
.ideditor .issue-text .issue-icon {
- flex: 0 0 auto;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
padding: 5px 7px;
}
.ideditor .issue-text .issue-message {
- flex: 1 1 auto;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
padding: 5px 0;
}
.ideditor .issue-label .issue-autofix {
- flex: 0 0 auto;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
padding: 5px 8px;
}
.ideditor .issue-label .issue-info-button {
height: unset;
width: 32px;
- flex: 0 0 auto;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
border-left: 1px solid #ccc;
background-color: rgba(0,0,0,0);
}
}
.ideditor button.autofix.action {
- flex: 0 0 20px;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 20px;
+ flex: 0 0 20px;
height: 20px;
width: 20px;
background: #7092ff;
color: #fff;
}
.ideditor button.autofix.action:focus,
-.ideditor button.autofix.action:hover,
+.ideditor button.autofix.action:active,
.ideditor button.autofix.action.active {
background: #597be7;
}
+@media (hover: hover) {
+ .ideditor button.autofix.action:hover {
+ background: #597be7;
+ }
+}
/* fix all */
.ideditor .autofix-all {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- flex-flow: row nowrap;
- flex-direction: row-reverse;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
margin-top: -25px;
padding-bottom: 5px;
}
.ideditor .warnings-list .issue.severity-warning .issue-label,
.ideditor .issue.severity-warning .issue-fix-list,
-.ideditor.mode-save .warning-section {
+.ideditor .warning-section {
background: #ffc;
}
background: #ffa;
}
-.ideditor .warnings-list .issue.severity-warning .issue-label:hover,
-.ideditor .issue.severity-warning .issue-fix-item.actionable:hover {
- background: #ff8;
-}
-
.ideditor .issue.severity-warning .issue-icon {
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;
- /*color: #7092ff;*/
- /*fill: #7092ff;*/
}
-.ideditor .issue.severity-warning .issue-fix-item.actionable:hover,
-.ideditor .issue-container.active .issue.severity-warning .issue-info-button:hover {
+.ideditor .warnings-list .issue.severity-warning .issue-label:active,
+.ideditor .warnings-list .issue.severity-warning .issue-label:focus,
+.ideditor .issue.severity-warning .issue-fix-item button.actionable:active,
+.ideditor .issue.severity-warning .issue-fix-item button.actionable:focus {
+ background: #ff8;
+}
+.ideditor .issue.severity-warning .issue-fix-item button.actionable:active,
+.ideditor .issue.severity-warning .issue-fix-item button.actionable:focus,
+.ideditor .issue-container.active .issue.severity-warning .issue-info-button:active,
+.ideditor .issue-container.active .issue.severity-warning .issue-info-button:focus {
color: #7f3d00;
fill: #7f3d00;
- /*color: #597be7;*/
- /*fill: #597be7;*/
}
-
-.ideditor .notification-badge.warning {
- color: #ffdf5c;
+@media (hover: hover) {
+ .ideditor .warnings-list .issue.severity-warning .issue-label:hover,
+ .ideditor .issue.severity-warning .issue-fix-item button.actionable:hover {
+ background: #ff8;
+ }
+ .ideditor .issue.severity-warning .issue-fix-item button.actionable:hover,
+ .ideditor .issue-container.active .issue.severity-warning .issue-info-button:hover {
+ color: #7f3d00;
+ fill: #7f3d00;
+ }
}
.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 .errors-list .issue.severity-error .issue-label:hover,
-.ideditor .issue.severity-error .issue-fix-item.actionable:hover {
- background: #ffb6b6;
+.ideditor .issue.severity-error .issue-fix-item button.actionable,
+.ideditor .issue-container.active .issue.severity-error .issue-info-button {
+ color: #b91201;
+ fill: #b91201;
}
-
.ideditor .issue.severity-error .issue-icon {
color: #dd1400;
}
-
-.ideditor .issue.severity-error .issue-fix-item.actionable,
-.ideditor .issue-container.active .issue.severity-error .issue-info-button {
- color: #b91201;
- fill: #b91201;
- /*color: #7092ff;*/
- /*fill: #7092ff;*/
+.ideditor .errors-list .issue.severity-error .issue-label:active,
+.ideditor .errors-list .issue.severity-error .issue-label:focus,
+.ideditor .issue.severity-error .issue-fix-item button.actionable:active,
+.ideditor .issue.severity-error .issue-fix-item button.actionable:focus {
+ background: #ffb6b6;
}
-.ideditor .issue.severity-error .issue-fix-item.actionable:hover,
-.ideditor .issue-container.active .issue.severity-error .issue-info-button:hover {
+.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;
- /*color: #597be7;*/
- /*fill: #597be7;*/
}
-
-.ideditor .notification-badge.error {
- color: #ff0c05;
+@media (hover: hover) {
+ .ideditor .errors-list .issue.severity-error .issue-label:hover,
+ .ideditor .issue.severity-error .issue-fix-item button.actionable:hover {
+ background: #ffb6b6;
+ }
+ .ideditor .issue.severity-error .issue-fix-item button.actionable:hover,
+ .ideditor .issue-container.active .issue.severity-error .issue-info-button:hover {
+ color: #840c00;
+ fill: #840c00;
+ }
}
.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: -ms-flexbox;
display: flex;
- flex-flow: row nowrap;
- flex-direction: row-reverse;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
height: 30px;
}
.ideditor .section-footer a {
padding: 5px;
}
-.ideditor .issues-none .box {
+.ideditor .section-issues-status .box {
border-radius: 4px;
border: 1px solid #72d979;
background: #c6ffca;
padding: 5px !important;
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
}
-.ideditor .issues-none .icon {
+.ideditor .section-issues-status .icon {
color: #05ac10;
}
.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;
/* Entity Issues List */
-.ideditor .entity-issues .issue-container .issue {
+.ideditor .section-entity-issues .issue-container .issue {
border-radius: 4px;
border: 1px solid #ccc;
background: #f6f6f6;
}
-.ideditor .entity-issues .issue-container:not(.active) .issue-text:hover,
-.ideditor .entity-issues .issue-container:not(.active) .issue-info-button:hover {
+.ideditor .section-entity-issues .issue-container:not(.active) .issue-text:active,
+.ideditor .section-entity-issues .issue-container:not(.active) .issue-text:focus,
+.ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:active,
+.ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:focus {
background: #f1f1f1;
}
-.ideditor .entity-issues .issue .issue-label .issue-text {
+@media (hover: hover) {
+ .ideditor .section-entity-issues .issue-container:not(.active) .issue-text:hover,
+ .ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:hover {
+ background: #f1f1f1;
+ }
+}
+.ideditor .section-entity-issues .issue .issue-label .issue-text {
padding-right: 10px;
}
-.ideditor[dir='rtl'] .entity-issues .issue .issue-label .issue-text {
+.ideditor[dir='rtl'] .section-entity-issues .issue .issue-label .issue-text {
padding-right: unset;
padding-left: 10px;
}
-.ideditor .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 .entity-issues .issue-container:not(:last-of-type) {
+.ideditor .section-entity-issues .issue-container:not(:last-of-type) {
margin-bottom: 5px;
}
-.ideditor .entity-issues .issue-container.active:not(:first-of-type) {
+.ideditor .section-entity-issues .issue-container.active:not(:first-of-type) {
margin-top: 10px;
}
-.ideditor .entity-issues .issue-container.active:not(:last-of-type) {
+.ideditor .section-entity-issues .issue-container.active:not(:last-of-type) {
margin-bottom: 10px;
}
/* fixes */
-.ideditor .entity-issues .issue-fix-list {
+.ideditor .section-entity-issues .issue-fix-list {
border-top: 1px solid;
border-color: inherit;
}
-.ideditor .entity-issues .issue-container.active .issue-fix-list:empty {
+.ideditor .section-entity-issues .issue-container.active .issue-fix-list:empty {
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-info {
- flex: 1 1 auto;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
width: 100%;
overflow: hidden;
display: none;
margin: 5px;
}
+.ideditor .display-control .control-wrap {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ width: 100%;
+}
.ideditor .display-control .display-option-input {
height: 20px;
- width: 155px;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 100%;
+ flex: 1 1 100%;
}
.ideditor .display-control button {
margin-right: 0px;
vertical-align: text-bottom;
border-radius: 4px;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ 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: -ms-flexbox;
display: flex;
- justify-content: center;
- align-items: center;
- margin: 0 auto;
- margin-top: 20px;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ margin: 45px;
cursor: move;
+ /* prevent scrolling pane while dragging on touchscreen */
+ -ms-touch-action: none;
+ touch-action: none;
+ /* disable drag-to-select */
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ position: relative;
}
.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 {
- flex: 0 1 auto;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
position: relative;
height: 100%;
+ max-width: 100%;
}
.ideditor .map-pane {
position: relative;
top: 0;
width: 400px;
+ max-width: 100%;
height: 100%;
- padding-bottom: 60px;
- overflow: hidden;
z-index: 10;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
}
-.ideditor .map-pane.help-wrap {
+.ideditor .map-pane.help-pane {
width: 600px;
}
.ideditor .pane-heading {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- flex-flow: row nowrap;
- justify-content: space-between;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
border-bottom: 1px solid #ccc;
- height: 60px;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
}
.ideditor .pane-heading h2 {
.ideditor .pane-heading button {
width: 40px;
- height: 100%;
border-radius: 0;
}
.ideditor .pane-content {
height: 100%;
- padding: 10px 40px 20px 20px;
+ padding: 10px 50px 20px 20px;
overflow-x: hidden;
overflow-y: scroll;
position: relative;
}
.ideditor[dir='rtl'] .pane-content {
- padding: 10px 20px 20px 40px;
+ padding: 10px 20px 20px 50px;
}
-.ideditor .pane-content > div {
+.ideditor .help-pane .pane-content > div {
padding-bottom: 15px;
}
/* Help
------------------------------------------------------- */
-.ideditor .help-wrap p {
+.ideditor .help-pane p {
font-size: 15px;
margin-bottom: 20px;
}
-.ideditor .help-wrap .left-content .body p code {
- padding: 3px 4px;
- font-size: 12px;
- color: #555;
- vertical-align: baseline;
- background-color: #f6f6f6;
- border: solid 1px #ccc;
- margin: 0 2px;
- border-bottom-color: #bbb;
- border-radius: 3px;
- box-shadow: inset 0 -1px 0 #bbb;
-}
-
-.ideditor .help-wrap .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-wrap .toc {
- width: 40%;
+.ideditor .help-pane .toc {
+ width: 100%;
+ max-width: 200px;
float: right;
margin-left: 20px;
margin-bottom: 20px;
padding-left: 5px;
}
-.ideditor .help-wrap .toc li a,
-.ideditor .help-wrap .nav a {
+.ideditor .help-pane .toc li a,
+.ideditor .help-pane .nav a {
display: block;
border: 1px solid #ccc;
padding: 5px 10px;
}
-.ideditor .help-wrap .toc li a {
+.ideditor .help-pane .toc li a {
border-bottom: 0;
}
-
-.ideditor .help-wrap .toc li a:hover,
-.ideditor .help-wrap .nav a:hover {
+.ideditor .help-pane .toc li a:focus,
+.ideditor .help-pane .nav a:focus,
+.ideditor .help-pane .toc li a:active,
+.ideditor .help-pane .nav a:active {
background: #ececec;
}
+@media (hover: hover) {
+ .ideditor .help-pane .toc li a:hover,
+ .ideditor .help-pane .nav a:hover {
+ background: #ececec;
+ }
+}
-.ideditor .help-wrap .toc li a.selected {
+.ideditor .help-pane .toc li a.selected {
background: #e8ebff;
}
-.ideditor .help-wrap .toc li:first-child a {
+.ideditor .help-pane .toc li:first-child a {
border-radius: 4px 4px 0 0;
}
-.ideditor .help-wrap .toc li:nth-last-child(3) a {
+.ideditor .help-pane .toc li:nth-last-child(3) a {
border-bottom: 1px solid #ccc;
border-radius: 0 0 4px 4px
}
-.ideditor .help-wrap .toc li.shortcuts a,
-.ideditor .help-wrap .toc li.walkthrough a {
+.ideditor .help-pane .toc li.shortcuts a,
+.ideditor .help-pane .toc li.walkthrough a {
overflow: hidden;
margin-top: 10px;
border-bottom: 1px solid #ccc;
border-radius: 4px;
}
-.ideditor .help-wrap .toc li.walkthrough a {
+.ideditor .help-pane .toc li.walkthrough a {
text-align: center;
}
-.ideditor .help-wrap .nav {
+.ideditor .help-pane .nav {
position: relative;
padding-bottom: 30px;
}
-.ideditor .help-wrap .nav a {
+.ideditor .help-pane .nav a {
float: left;
width: 50%;
text-align: center;
}
-.ideditor .help-wrap .nav a:first-child {
+.ideditor .help-pane .nav a:first-child {
border-radius: 4px 0 0 4px;
}
-.ideditor .help-wrap .nav a:last-child:not(:only-child) {
+.ideditor .help-pane .nav a:last-child:not(:only-child) {
border-radius: 0 4px 4px 0;
border-left: 0;
}
-.ideditor .help-wrap .nav a:only-child {
+.ideditor .help-pane .nav a:only-child {
width: 100%;
border-radius: 4px;
}
/* Inspector (hover styles)
------------------------------------------------------- */
-.ideditor .inspector-hover .entity-issues .issue-container .issue .issue-label,
+.ideditor .inspector-hover .section-entity-issues .issue-container .issue .issue-label,
.ideditor .inspector-hover .form-field-input-wrap .label,
.ideditor .inspector-hover .form-field-input-multicombo .chiplist,
.ideditor .inspector-hover .form-field-button,
.ideditor .inspector-hover a,
.ideditor .inspector-hover .form-field-input-multicombo .chip,
.ideditor .inspector-hover .form-field-input-check span,
-.ideditor .inspector-hover .entity-issues .issue .icon {
+.ideditor .inspector-hover .section-entity-issues .issue .icon {
color: #666;
}
/* no scrollbars */
.ideditor .inspector-hover div {
- overflow-x: hidden;
- overflow-y: hidden;
+ overflow-x: visible;
+ overflow-y: visible;
}
/* hide and remove from layout */
.ideditor .inspector-hover .form-field-input-radio label,
.ideditor .inspector-hover .form-field-input-radio label span,
.ideditor .inspector-hover .form-field-input-radio label.remove .icon,
-.ideditor .inspector-hover .inspector-inner .add-row,
-.ideditor .inspector-hover .entity-issues .issue-container .issue-fix-list,
-.ideditor .inspector-hover .entity-issues .issue-container .issue-info-button {
+.ideditor .inspector-hover .add-row,
+.ideditor .inspector-hover .section-entity-issues .issue-container .issue-fix-list,
+.ideditor .inspector-hover .section-entity-issues .issue-container .issue-info-button {
display: none;
}
}
/* Unstyle the active entity issue on hover */
-.ideditor .inspector-hover .entity-issues .issue-container.active {
+.ideditor .inspector-hover .section-entity-issues .issue-container.active {
margin-top: 1px;
margin-bottom: 1px;
}
-.ideditor .inspector-hover .entity-issues .issue-container * {
+.ideditor .inspector-hover .section-entity-issues .issue-container * {
border-color: #ccc !important;
}
-.ideditor .inspector-hover .entity-issues .issue-container.active .issue-label {
+.ideditor .inspector-hover .section-entity-issues .issue-container.active .issue-label {
border-bottom: 0;
}
-.ideditor .inspector-hover .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;
- transform-origin: 0 0;
- -ms-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
- -moz-transform-origin: 0 0;
- -o-transform-origin: 0 0;
+ -ms-transform-origin: 0 0;
+ transform-origin: 0 0;
- -moz-user-select: none;
-webkit-user-select: none;
- -ms-user-select: none;
- user-select: none;
+
+ -moz-user-select: none;
+
+ -ms-user-select: none;
+
+ user-select: none;
+
+ pointer-events: none;
+
+ -webkit-user-drag: none;
opacity: 0;
-webkit-transition: opacity 200ms linear;
- -moz-transition: opacity 200ms linear;
+
+ -o-transition: opacity 200ms linear;
+
transition: opacity 200ms linear;
}
margin-left: -70px;
margin-top: -20px;
- transform-origin: 0 0;
- -ms-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
- -moz-transform-origin: 0 0;
- -o-transform-origin: 0 0;
- -moz-user-select: none;
+ -ms-transform-origin: 0 0;
+
+ transform-origin: 0 0;
+
-webkit-user-select: none;
- -ms-user-select: none;
- user-select: none;
+
+ -moz-user-select: none;
+
+ -ms-user-select: none;
+
+ user-select: none;
}
.ideditor img.tile-debug {
/* Map
------------------------------------------------------- */
-.ideditor #map {
- position: relative;
+.ideditor .main-map {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
overflow: hidden;
height: 100%;
+ width: 100%;
background: #000;
- -moz-user-select: none;
-webkit-user-select: none;
- -ms-user-select: none;
- user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ -ms-touch-action: none;
+ touch-action: none;
+ -webkit-touch-callout: none;
+}
+.ideditor .main-map * {
+ -ms-touch-action: none;
+ touch-action: none;
}
-.ideditor #supersurface {
- transform-origin: 0 0;
- -ms-transform-origin: 0 0;
+.ideditor .supersurface {
-webkit-transform-origin: 0 0;
- -moz-transform-origin: 0 0;
- -o-transform-origin: 0 0;
+ -ms-transform-origin: 0 0;
+ transform-origin: 0 0;
}
-.ideditor #supersurface, .ideditor .layer {
+.ideditor .supersurface, .ideditor .layer {
position: absolute;
top: 0;
left: 0;
z-index: 5;
background: #000;
border: #aaa 1px solid;
- box-shadow: 0 0 2em black;
+ -webkit-box-shadow: 0 0 2em black;
+ box-shadow: 0 0 2em black;
}
.ideditor[dir='ltr'] .map-in-map {
left: 10px;
}
.ideditor .map-in-map-tiles {
- transform-origin: 0 0;
- -ms-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
- -moz-transform-origin: 0 0;
- -o-transform-origin: 0 0;
-
- -moz-user-select: none;
+ -ms-transform-origin: 0 0;
+ transform-origin: 0 0;
-webkit-user-select: none;
- -ms-user-select: none;
- user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
}
.ideditor .map-in-map-viewport,
}
-.ideditor .over-map {
- position: absolute;
- left: 0;
- right: 0;
- top: 71px;
- bottom: 30px;
- pointer-events: none;
- display: flex;
- flex-direction: row-reverse;
- align-items: flex-end;
-}
-.ideditor .over-map > * {
- pointer-events: auto;
-}
-
/* Information Panels
------------------------------------------------------- */
.ideditor .info-panels {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- flex-flow: row-reverse wrap-reverse;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row wrap-reverse;
+ flex-flow: row wrap-reverse;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
width: 100%;
z-index: 1;
-ms-user-select: element;
pointer-events: none;
+ overflow: hidden;
}
.ideditor .panel-container h1,
}
.ideditor .panel-container {
- flex: 0 0 auto;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
margin: 0 2px 2px 0;
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.75);
padding-bottom: 10px;
width: 250px;
+ max-width: 100%;
pointer-events: auto;
}
.ideditor .panel-title {
padding: 5px 10px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
}
.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:hover {
+.ideditor .panel-title button.close:focus,
+.ideditor .panel-title button.close:active {
color: #fff;
}
+@media (hover: hover) {
+ .ideditor .panel-title button.close:hover {
+ color: #fff;
+ }
+}
.ideditor .panel-title button.close .icon {
height: 20px;
width: 16px;
position: relative;
}
-.ideditor .panel-content li span {
+.ideditor .panel-content ul:empty {
+ display: none;
+}
+
+.ideditor .panel-content li span:not(.localized-text) {
display: inline-block;
white-space: nowrap;
margin: 0 8px;
}
-/* About Section, Attribution, Footer
+/* Map Footer
------------------------------------------------------- */
-.ideditor #about {
+.ideditor .map-footer {
width: 100%;
- position: absolute;
- right: 0;
- bottom: 0;
+ position: relative;
border-radius: 0;
pointer-events: none;
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- flex-direction: column;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
-ms-user-select: element;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
}
-.ideditor #attrib {
- width: 100%;
- height: 20px;
- margin-bottom: 5px;
+.ideditor .map-footer-bar {
+ pointer-events: all;
+ display: block;
+ height: 2.5em;
+ position: relative;
}
-.ideditor #attrib * { pointer-events: all; }
-
-.ideditor .base-layer-attribution,
-.ideditor .overlay-layer-attribution {
+.ideditor .main-footer-wrap,
+.ideditor .flash-wrap {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 100%;
+ flex: 0 0 100%;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ height: 100%;
position: absolute;
- color: #ccc;
- font-size: 10px;
+ right: 0;
+ left: 0;
}
-.ideditor .base-layer-attribution {
- left: 10px;
+.ideditor .footer-show {
+ bottom: 0px;
+ -webkit-transition: bottom 75ms linear;
+ -o-transition: bottom 75ms linear;
+ transition: bottom 75ms linear;
}
-.ideditor .overlay-layer-attribution {
- right: 10px;
+.ideditor .footer-hide {
+ bottom: -100%;
+ -webkit-transition: bottom 75ms linear;
+ -o-transition: bottom 75ms linear;
+ transition: bottom 75ms linear;
+}
+
+
+/* Attribution
+------------------------------------------------------- */
+.ideditor .attribution-wrap {
+ position: absolute;
+ bottom: 5px;
+ left: 5px;
+ right: 5px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-box-align: end;
+ -ms-flex-align: end;
+ align-items: flex-end;
+}
+
+.ideditor .attribution-wrap * { pointer-events: all; }
+
+.ideditor .attribution-wrap .base-layer-attribution,
+.ideditor .attribution-wrap .overlay-layer-attribution {
+ color: #ccc;
+ font-size: 10px;
+}
+.ideditor .attribution-wrap .overlay-layer-attribution {
+ text-align: right;
}
-.ideditor .overlay-layer-attribution .attribution:not(:last-child):after {
+.ideditor .attribution-wrap .overlay-layer-attribution .attribution:not(:last-child):after {
content: '; ';
}
-.ideditor .attribution a,
-.ideditor .attribution a:visited {
+.ideditor .attribution-wrap .attribution a,
+.ideditor .attribution-wrap .attribution a:visited {
color: #ccf;
}
-
-.ideditor .attribution a:hover {
+.ideditor .attribution-wrap .attribution a:focus,
+.ideditor .attribution-wrap .attribution a:hover {
color: #aaf;
}
+@media (hover: hover) {
+ .ideditor .attribution-wrap .attribution a:hover {
+ color: #aaf;
+ }
+}
-.ideditor .attribution .source-image {
+.ideditor .attribution-wrap .attribution .source-image {
height: 20px;
vertical-align: middle;
border-radius: 3px;
}
-.ideditor .attribution span {
+.ideditor .attribution-wrap .attribution span {
margin: 0 3px;
}
-.ideditor #footer {
- pointer-events: all;
- display: block;
- height: 30px;
-}
-
/* Footer - Flash messages
------------------------------------------------------- */
-.ideditor #flash-wrap {
- display: flex;
- flex: 0 0 100%;
- flex-flow: row nowrap;
- justify-content: space-between;
- max-height: 30px;
- position: absolute;
- right: 0;
- left: 0;
-}
-
.ideditor .flash-content {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- flex: 1 0 auto;
- flex-flow: row nowrap;
- align-items: center;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 0 auto;
+ flex: 1 0 auto;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
padding: 2px;
- height: 30px;
}
.ideditor .flash-icon {
- flex: 0 0 auto;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
width: 20px;
height: 20px;
margin: 0 8px;
.ideditor .flash-icon use {
color: #222;
}
-.ideditor .flash-icon.disabled use {
- color: rgba(32,32,32,0.7);
-}
-
-.ideditor .flash-icon.operation use {
- fill: #222;
- color: #79f;
-}
+.ideditor .flash-icon.disabled use,
.ideditor .flash-icon.operation.disabled use {
fill: rgba(32,32,32,0.7);
color: rgba(40,40,40,0.7);
}
.ideditor .flash-text {
- flex: 1 1 auto;
-}
-
-.ideditor #footer-wrap {
- display: flex;
- flex: 0 0 100%;
- flex-flow: row nowrap;
- justify-content: space-between;
- max-height: 30px;
- position: absolute;
- right: 0;
- left: 0;
-}
-
-.ideditor .footer-show {
- bottom: 0px;
- transition: bottom 75ms linear;
- -moz-transition: bottom 75ms linear;
- -webkit-transition: bottom 75ms linear;
-}
-
-.ideditor .footer-hide {
- bottom: -35px;
- transition: bottom 75ms linear;
- -moz-transition: bottom 75ms linear;
- -webkit-transition: bottom 75ms linear;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
}
-
-/* Footer - Scale bar, About, Source Switcher
+/* Scale bar
------------------------------------------------------- */
-.ideditor #scale-block {
+.ideditor .map-footer-bar .scale-block {
vertical-align: bottom;
width: 250px;
- max-height: 30px;
- flex: 0 0 250px;
- -moz-user-select: none;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
-webkit-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.ideditor #info-block {
- max-height: 30px;
- flex: 1 1 auto;
-}
-
-.ideditor #scale {
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
height: 30px;
- width: 100%;
-}
-.ideditor[dir='rtl'] #scale {
- transform: scaleX(-1);
+ -ms-flex-item-align: center;
+ align-self: center;
}
-.ideditor #scale:hover {
+.ideditor .scale-block .scale {
+ height: 100%;
+ width: 100%;
cursor: pointer;
+ display: block;
}
-
-.ideditor #scale text {
- font: 12px sans-serif;
- stroke: none;
- fill: #ccc;
- text-anchor: start;
+.ideditor[dir='rtl'] .scale-block .scale {
+ -webkit-transform: scaleX(-1);
+ -ms-transform: scaleX(-1);
+ transform: scaleX(-1);
}
-.ideditor[dir='rtl'] #scale text {
- transform: scaleX(-1);
+
+.ideditor .scale-block .scale-text {
+ display: inline-block;
+ position: absolute;
+ color: #ccc;
+ top: 0.45em;
}
-.ideditor #scale path {
+.ideditor .scale-block .scale path {
fill: none;
stroke: #ccc;
stroke-width: 1;
shape-rendering: crispEdges;
}
-.ideditor #about-list {
- text-align: right;
- margin-right: 10px;
- clear: right;
+/* Footer - About, Source Switcher
+------------------------------------------------------- */
+.ideditor .map-footer-bar .info-block {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 100%;
+ flex: 1 1 100%;
overflow: hidden;
}
-.ideditor[dir='rtl'] #about-list {
- text-align: left;
- clear: left;
- margin-left: 10px;
- margin-right: 0;
+
+.ideditor .map-footer-list {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ height: 100%;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
}
-.ideditor #about-list li {
- float: right;
- border-left: 1px solid rgba(255,255,255,.5);
- padding: 5px 0 5px 5px;
- margin-left: 5px;
+.ideditor .map-footer-list li {
+ height: 100%;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ white-space: nowrap;
+ padding: 5px;
}
-.ideditor[dir='rtl'] #about-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 #about-list li:empty {
- display: none;
}
-
-.ideditor #about-list li:last-child {
- border-left: 0;
- margin-left: 0;
- padding-left: 0;
+.ideditor[dir='rtl'] .map-footer-list li:not(:last-child) {
+ border-left: 1px solid rgba(255,255,255,.5);
}
-.ideditor[dir='rtl'] #about-list li:last-child {
- border-right: none;
+.ideditor .map-footer-list li:empty {
+ display: none;
}
-.ideditor #about-list a.chip {
- padding: 2px 4px 3px 4px;
+.ideditor .map-footer-list a.chip {
+ padding: 1px 4px 1px 4px;
border-radius: 2px;
color: #eee;
}
-.ideditor #about-list a.chip .icon {
+.ideditor .map-footer-list a.chip .icon {
width: 14px;
height: 14px;
- margin-top: 3px;
-}
-.ideditor[dir='ltr'] #about-list a.chip .icon,
-.ideditor[dir='ltr'] #about-list a.chip span {
- margin-right: 3px;
+ margin-top: -2px;
}
-.ideditor[dir='rtl'] #about-list a.chip .icon,
-.ideditor[dir='rtl'] #about-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;
- flex: 1 1 auto;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
}
.ideditor[dir='rtl'] .api-status {
text-align: left;
}
+.ideditor .api-status:empty {
+ display: none;
+}
.ideditor .api-status.offline,
.ideditor .api-status.readonly,
color: #ccc;
pointer-events: all;
}
-.ideditor .api-status a:hover {
+.ideditor .api-status a:focus,
+.ideditor .api-status a:active {
color: inherit;
}
+@media (hover: hover) {
+ .ideditor .api-status a:hover {
+ color: inherit;
+ }
+}
/* Notification Badges
------------------------------------------------------- */
/* Modals / Prompts
------------------------------------------------------- */
.ideditor .modal {
- top: 40px;
- display: inline-block;
- position: absolute;
+ top: 5%;
+ max-height: 90%;
+ position: relative;
border-radius: 3px;
overflow: hidden;
- left: 0;
- right: 0;
margin: auto;
z-index: 50;
- width: 50%;
+ width: 80%;
min-width: 200px;
- max-width: 600px;
+ max-width: 550px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+
+.ideditor .modal .content {
+ overflow-x: hidden;
+ overflow-y: auto;
}
.ideditor .modal .loader {
.ideditor .modal-section p:not(:last-of-type) {
padding-bottom: 20px;
}
-.ideditor .modal-section.header h3 {
- padding: 0;
+.ideditor .modal-section h4 {
+ padding-bottom: 0;
}
.ideditor .modal-section.buttons {
text-align: center;
.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: -ms-flexbox;
display: flex;
- flex-wrap: wrap;
- justify-content: space-around;
- margin-bottom: 30px;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -ms-flex-pack: distribute;
+ justify-content: space-around;
}
.ideditor .save-section .buttons .action,
text-align: center;
}
.ideditor .modal-actions {
+ display: -webkit-box;
+ 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 .modal-actions button:hover {
- background-color: #ececec;
-}
.ideditor .logo-small {
height: 40px;
------------------------------------------------------- */
.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:hover {
+.ideditor .modal-shortcuts a.tab:focus,
+.ideditor .modal-shortcuts a.tab:active {
color: #597be7;
background-color: #efefef;
}
+@media (hover: hover) {
+ .ideditor .modal-shortcuts a.tab:hover {
+ color: #597be7;
+ background-color: #efefef;
+ }
+}
.ideditor .modal-shortcuts .shortcut-tab {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- flex-flow: row wrap;
- justify-content: space-around;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+ -ms-flex-pack: distribute;
+ justify-content: space-around;
}
.ideditor .modal-shortcuts .shortcut-column {
}
.ideditor .modal-shortcuts .shortcut-tab-tools .shortcut-column {
- flex: 1 1 100%;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 100%;
+ flex: 1 1 100%;
width: 100%;
}
color: #555;
}
-.ideditor svg.mouseclick use.left {
- fill: rgba(112, 146, 255, 1);
- color: rgba(112, 146, 255, 0);
-}
-.ideditor svg.mouseclick use.right {
- fill: rgba(112, 146, 255, 0);
- color: rgba(112, 146, 255, 1);
-}
-
.ideditor .modal-shortcuts .shortcut-keys .gesture {
color: #333;
padding: 3px;
.ideditor .settings-custom-background .instructions-template {
margin-bottom: 20px;
}
+.ideditor .settings-custom-background .instructions-template p {
+ margin-bottom: 0;
+}
+.ideditor .settings-custom-background .instructions-template ul {
+ padding-bottom: 20px;
+}
+.ideditor .settings-custom-background .instructions-template ul li {
+ list-style-type: disc;
+ list-style-position: inside;
+}
.ideditor .settings-custom-data .instructions-url {
margin-bottom: 10px;
/* 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 .field-warning,
+.ideditor .changeset-info,
+.ideditor .request-review,
+.ideditor .commit-info {
margin-bottom: 10px;
}
-.ideditor.mode-save .request-review label {
+.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 .changeset-list li button {
+ padding: 5px 10px;
+ width: 100%;
+ border-radius: 0;
+ text-align: initial;
}
-
-.ideditor.mode-save .changeset-list li {
- position: relative;
+.ideditor .changeset-list li {
border-top: 1px solid #ccc;
- padding: 5px 10px;
- cursor: pointer;
}
-
-.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.mode-save .commit-section .changeset-list button {
- border-left: 1px solid #ccc;
-}
-
-.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:hover,
-.ideditor .notice .zoom-to:focus {
+.ideditor .notice .zoom-to:focus,
+.ideditor .notice .zoom-to:active {
background: rgba(0,0,0,0.6);
}
+@media (hover: hover) {
+ .ideditor .notice .zoom-to:hover {
+ background: rgba(0,0,0,0.6);
+ }
+}
.ideditor .notice .zoom-to .icon {
width: 30px;
background-color: #fff;
}
-.ideditor .tail {
- width: 200px;
- height: 400px;
- pointer-events: none;
- opacity: .8;
- margin-top: -200px;
- position: absolute;
- background: transparent;
-}
-.ideditor .tail::after {
- content: "";
- position: absolute;
- width: 0;
- height: 0;
- border-color: transparent;
- border-style: solid;
- top: 50%;
- right: -5px;
- margin-top: -5px;
- border-left-color: #fff;
- border-width: 5px 0 5px 5px;
-}
-
-.ideditor .tail div {
- border-radius: 3px;
- padding: 10px;
- background: #fff;
- position: absolute;
- top: 180px;
- left: 0;
- right: 0;
- margin: auto;
-}
-
-.ideditor .left.tail::after {
- content: "";
- position: absolute;
- width: 0;
- height: 0;
- border-color: transparent;
- border-style: solid;
- top: 50%;
- left: -5px;
- margin-top: -5px;
- border-right-color: #fff;
- border-width: 5px 5px 5px 0;
-}
.ideditor .popover-arrow {
position: absolute;
width: 0;
/* 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 {
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 {
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 {
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 {
border-right-color: #000;
}
.ideditor .tooltip.dark .popover-inner,
.ideditor .map-pane .popover-inner,
.ideditor .map-pane .tooltip-heading,
.ideditor .map-pane .keyhint-wrap,
-.ideditor #sidebar .popover-inner,
-.ideditor #sidebar .tooltip-heading,
-.ideditor #sidebar .keyhint-wrap {
+.ideditor .sidebar .popover-inner,
+.ideditor .sidebar .tooltip-heading,
+.ideditor .sidebar .keyhint-wrap {
background: #000;
color: #ccc;
}
.ideditor .tooltip.dark kbd,
.ideditor .map-pane .tooltip kbd,
-.ideditor #sidebar .tooltip kbd {
+.ideditor .sidebar .tooltip kbd {
background-color: #666;
border: solid 1px #444;
border-bottom-color: #333;
- box-shadow: inset 0 -1px 0 #333;
+ -webkit-box-shadow: inset 0 -1px 0 #333;
+ box-shadow: inset 0 -1px 0 #333;
color: #eee;
}
}
-/* Contextual Radial Menu (deprecated)
-------------------------------------------------------- */
-.ideditor .radial-menu-tooltip {
- opacity: 0.8;
- display: none;
- position: absolute;
- width: 200px;
-}
-
-.ideditor .radial-menu-background {
- fill: none;
- stroke: black;
- stroke-opacity: 0.5;
-}
-
-.ideditor .radial-menu-item circle {
- fill: #eee;
-}
-
-.ideditor .radial-menu-item circle:active,
-.ideditor .radial-menu-item circle:hover {
- fill: #fff;
-}
-
-.ideditor .radial-menu-item.disabled circle {
- cursor: auto;
- fill: rgba(255,255,255,.5);
-}
-
-.ideditor .radial-menu-item use {
- fill: #222;
- color: #79f;
-}
-
-.ideditor .radial-menu-item.disabled use {
- fill: rgba(32,32,32,.5);
- color: rgba(40,40,40,.5);
-}
-
-
/* Contextual Edit Menu
------------------------------------------------------- */
-.ideditor .edit-menu-tooltip {
- width: 200px;
+.ideditor .edit-menu {
+ position: absolute;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ background: #fff;
+ border-radius: 4px;
+ /* padding is set in edit_menu.js */
}
-.ideditor .edit-menu-background {
- fill: #eee;
+.ideditor .edit-menu .tooltip {
+ width: 200px; /* see also edit_menu.js */
}
-.ideditor .edit-menu-item rect {
- fill: #eee;
- cursor: default;
+.ideditor .edit-menu-item {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ border-radius: 0;
+ padding: 0 12px;
+ /* height is set in edit_menu.js */
}
-
-.ideditor .edit-menu-item rect:active,
-.ideditor .edit-menu-item rect:hover {
- fill: #ccc;
+.ideditor .edit-menu-item .label {
+ max-width: 120px;
+ text-align: initial;
+ line-height: 1.1em;
+ font-weight: bold;
}
-
-.ideditor .edit-menu-item.disabled rect {
- cursor: not-allowed;
+.ideditor[dir='ltr'] .edit-menu-item .label {
+ margin-left: 8px;
}
-.ideditor .edit-menu-item.disabled rect:hover {
- cursor: not-allowed;
- fill: #eee;
+.ideditor[dir='rtl'] .edit-menu-item .label {
+ margin-right: 8px;
}
.ideditor .edit-menu-item use {
- fill: #222;
- color: #79f;
pointer-events: none;
}
-.ideditor .edit-menu-item.disabled use {
- fill: rgba(32,32,32,.2);
- color: rgba(40,40,40,.2);
-}
-
/* Lasso
------------------------------------------------------- */
border-width: 3px 3px 3px 4px;
border-radius: 6px;
}
-.ideditor ::-webkit-scrollbar-track:hover,
.ideditor ::-webkit-scrollbar-track:active {
background-color: rgba(0,0,0,.05);
}
+@media (hover: hover) {
+ .ideditor ::-webkit-scrollbar-track:hover {
+ background-color: rgba(0,0,0,.05);
+ }
+}
/* Intro walkthrough
----------------------------------------------------- */
+.ideditor .curtain {
+ z-index: 1000;
+ pointer-events: none;
+ position: absolute;
+}
+
.ideditor .curtain-darkness {
pointer-events: all;
fill-opacity: 0.7;
}
.ideditor .intro-nav-wrap {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- flex-direction: row;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
position: absolute;
left: 0;
right: 0;
}
.ideditor .intro-nav-wrap .intro-nav-wrap-logo {
- flex: 0 0 auto;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
height: 40px;
width: 40px;
color: #fff;
}
.ideditor .intro-nav-wrap .joined {
- flex: 1 1 auto;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- flex-direction: row;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
}
.ideditor .intro-nav-wrap button.chapter {
- flex: 1 1 100%;
- padding: 0px 20px;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 100%;
+ flex: 1 1 100%;
+ padding: 0px 5px;
+ font-weight: bold;
}
.ideditor .intro-nav-wrap button.chapter.next {
- animation-duration: 1s;
- animation-name: pulse;
- animation-iteration-count: infinite;
- animation-direction: alternate;
+ -webkit-animation-duration: 1s;
+ animation-duration: 1s;
+ -webkit-animation-name: pulse;
+ animation-name: pulse;
+ -webkit-animation-iteration-count: infinite;
+ animation-iteration-count: infinite;
+ -webkit-animation-direction: alternate;
+ animation-direction: alternate;
+}
+@-webkit-keyframes pulse {
+ from { background: #7092ff; }
+ to { background: #c6d4ff; }
}
@keyframes pulse {
from { background: #7092ff; }
display: inline-block;
}
+.ideditor .curtain-tooltip {
+ z-index: 1002;
+}
+
.ideditor .curtain-tooltip.tooltip.in {
opacity: 1;
}
}
.ideditor .curtain-tooltip.intro-mouse {
- -moz-user-select: none;
-webkit-user-select: none;
- -ms-user-select: none;
- user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
}
.ideditor .curtain-tooltip.intro-mouse .counter {
.ideditor .huge-modal-button {
width: 100%;
- height: auto;
padding: 20px;
}
width: 100px;
color: #7092ff;
}
-
-
-.ideditor .list-item-photos.list-item-mapillary-map-features .request-data-link {
- float: right;
- margin-top: -20px;
-}
-.ideditor[dir='rtl'] .list-item-photos.list-item-mapillary-map-features .request-data-link {
- float: left;
-}
projects / rails.git / blobdiff