]> git.openstreetmap.org Git - rails.git/blobdiff - vendor/assets/iD/iD.css.erb
Update to iD v2.5.0
[rails.git] / vendor / assets / iD / iD.css.erb
index 4c0c6d97b8f6293eb4aec2010666c34dcc0deb11..9ce30a05b387a816f5155137f108f41e14ad1814 100644 (file)
@@ -1539,6 +1539,7 @@ g.midpoint.tag-railway-platform .fill {
 }
 .preset-icon .icon.category-water,
 .preset-icon .icon.tag-route-ferry,
+.preset-icon .icon.tag-type-waterway,
 .preset-icon .icon.tag-waterway {
     color: #77d3de;
     fill: #fff;
@@ -1940,123 +1941,240 @@ path.fill.tag-amenity-shelter {
 
 .turn rect,
 .turn circle {
-    cursor: pointer; /* Opera */
-    cursor: url(<%= asset_path("iD/img/cursor-pointer.png") %>) 6 1, pointer; /* FF */
+    cursor: pointer;
+}
+/* photo viewer div */
+#photoviewer {
+    position: absolute;
+    bottom: 30px;
+    width: 330px;
+    height: 250px;
+    padding: 5px;
+    background-color: #fff;
 }
-/* Mapillary Image Layer */
 
-.layer-mapillary-images {
-    pointer-events: none;
+#photoviewer button.thumb-hide {
+    border-radius: 0;
+    padding: 5px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 500;
 }
 
-.layer-mapillary-images .viewfield-group {
+.photo-wrapper,
+.photo-wrapper img {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+/* markers and sequences */
+.viewfield-group {
     pointer-events: visible;
-    cursor: pointer; /* Opera */
-    cursor: url(<%= asset_path("iD/img/cursor-select-mapillary.png") %>) 6 1, pointer; /* FF */
+    cursor: pointer;
 }
 
-.layer-mapillary-images .viewfield-group * {
-    stroke-width: 1;
-    stroke: #444;
-    fill: #ffc600;
+.viewfield-group * {
     z-index: 50;
 }
-
-.layer-mapillary-images .viewfield-group:hover * {
-    stroke-width: 1;
-    stroke: #333;
-    fill: #ff9900;
+.viewfield-group.selected * {
+    fill: #ffee00 !important;
+    z-index: 60;
+}
+.viewfield-group.hovered * {
+    fill: #eebb00 !important;
+    z-index: 70;
+}
+.viewfield-group.highlighted * {
     z-index: 60;
 }
 
-.layer-mapillary-images .viewfield-group.selected  * {
+.viewfield-group circle {
+    stroke: #555;
+    stroke-width: 1;
+    stroke-opacity: 0.4;
+    fill-opacity: 0.4;
+}
+.viewfield-group.highlighted circle {
+    stroke: #222;
+    stroke-opacity: 0.9;
+    fill-opacity: 0.9;
+}
+.viewfield-group.highlighted.hovered circle {
+    stroke: #222;
     stroke-width: 2;
+    stroke-opacity: 0.9;
+    fill-opacity: 0.9;
+}
+.viewfield-group.highlighted.selected circle {
     stroke: #222;
-    fill: #ff5800;
-    z-index: 60;
+    stroke-width: 2;
+    stroke-opacity: 1;
+    fill-opacity: 1;
 }
 
-.layer-mapillary-images .viewfield-group:hover path.viewfield,
-.layer-mapillary-images .viewfield-group.selected path.viewfield,
-.layer-mapillary-images .viewfield-group path.viewfield {
+.viewfield-group .viewfield {
     stroke-width: 0;
-    fill-opacity: 0.6;
+    stroke: #222;
+    fill-opacity: 0.4;
+}
+.viewfield-group.highlighted .viewfield {
+    stroke-width: 1;
+    fill-opacity: 0.8;
+}
+.viewfield-group.highlighted.hovered .viewfield {
+    stroke-width: 1;
+    fill-opacity: 0.8;
+}
+.viewfield-group.highlighted.selected .viewfield {
+    stroke-width: 1;
+    fill-opacity: 0.9;
 }
 
-/* Mapillary Sign Layer */
+.viewfield-group.selected .viewfield-scale {
+    transform: scale(2,2);
+}
 
-.layer-mapillary-signs {
+.sequence {
+    fill: none;
+    stroke-width: 2;
+    stroke-opacity: 0.4;
+}
+.sequence.highlighted,
+.sequence.selected {
+    stroke-width: 4;
+    stroke-opacity: 1;
+}
+
+
+/* Mapillary Image Layer */
+.layer-mapillary-images {
     pointer-events: none;
 }
+.layer-mapillary-images .viewfield-group * {
+    fill: #55ff22;
+}
+.layer-mapillary-images .sequence {
+    stroke: #55ff22;
+}
+
 
+/* Mapillary Sign Layer */
+.layer-mapillary-signs {
+    pointer-events: none;
+}
 .layer-mapillary-signs .icon-sign .icon-sign-body {
     min-width: 20px;
     height: 24px;
     width: 24px;
     outline: 2px solid transparent;
     pointer-events: visible;
-    cursor: pointer; /* Opera */
-    cursor: url(<%= asset_path("iD/img/cursor-select-mapillary.png") %>) 6 1, pointer; /* FF */
-    z-index: 70;
+    cursor: pointer;
+    z-index: 30;
     overflow: visible;
 }
-
 .layer-mapillary-signs .icon-sign:hover .icon-sign-body {
-    outline: 2px solid rgba(255,198,0,0.8);
-    z-index: 80;
+    outline: 5px solid #eebb00;
+    background-color: #eebb00;
+    z-index: 70;
 }
-
 .layer-mapillary-signs .icon-sign.selected .icon-sign-body {
-    outline: 2px solid rgba(255,0,0,0.8);
-    z-index: 80;
+    outline: 5px solid #ffee00;
+    background-color: #ffee00;
+    z-index: 40;
+}
+
+
+/* OpenStreetCam Image Layer */
+.layer-openstreetcam-images {
+    pointer-events: none;
+}
+.layer-openstreetcam-images .viewfield-group * {
+    fill: #77ddff;
+}
+.layer-openstreetcam-images .sequence {
+    stroke: #77ddff;
 }
 
 
 /* Mapillary viewer */
 #mly .domRenderer .TagSymbol {
     font-size: 10px;
-    background-color: rgba(0, 0, 0, 0.4);
+    background-color: rgba(0,0,0,0.4);
     padding: 0 4px;
     border-radius: 4px;
-    transform: translate(-50%, -120%) !important;
+    top: -25px;
 }
-
 #mly .domRenderer .Attribution {
     width: 100%;
     font-size: 10px;
     text-align: right;
 }
 
-.mapillary-wrap {
-    position: absolute;
-    bottom: 30px;
-    width: 330px;
-    height: 250px;
-    padding: 5px;
-    background-color: #fff;
-}
 
-.mapillary-wrap.hidden {
-    visibility: hidden;
+/* OpenStreetCam viewer */
+.osc-wrapper {
+    position: relative;
+    background-color: #000;
+    background-image: url(<%= asset_path("iD/img/loader-black.gif") %>);
+    background-position: center;
+    background-repeat: no-repeat;
 }
 
-.mapillary-wrap button.thumb-hide {
-    border-radius: 0;
-    padding: 5px;
+.osc-wrapper .osc-attribution {
+    width: 100%;
+    font-size: 10px;
+    text-align: right;
     position: absolute;
+    bottom: 0;
     right: 0;
-    top: 0;
-    z-index: 500;
+    padding: 4px 2px;
+    z-index: 10;
 }
 
-.mly-wrapper {
-    visibility: hidden;
+.osc-attribution a,
+.osc-attribution a:visited,
+.osc-attribution span {
+    padding: 4px 2px;
+    color: #fff;
+}
+.osc-attribution a:active,
+.osc-attribution a:hover {
+    color: #77ddff;
+}
+
+.osc-controls-wrap {
+    text-align: center;
+    position: absolute;
+    top: 10px;
     width: 100%;
-    height: 100%;
+    z-index: 10;
+}
+
+.osc-controls {
+    display: inline-block;
+    z-index: 10;
 }
 
-.mly-wrapper.active {
-    visibility: visible;
+.osc-controls button {
+    height: 18px;
+    width: 18px;
+    background: rgba(0,0,0,0.65);
+    color: #eee;
+    border-radius: 0;
+}
+.osc-controls button:first-of-type {
+    border-radius: 3px 0 0 3px;
+}
+.osc-controls button:last-of-type {
+    border-radius: 0 3px 3px 0;
+}
+.osc-controls button:hover,
+.osc-controls button:active,
+.osc-controls button:focus {
+    background: rgba(0,0,0,0.85);
+    color: #fff;
 }
 /* Fill Styles */
 
@@ -2177,6 +2295,22 @@ body {
     transition-duration: 200ms;
 }
 
+/* Firefox has its own ideas about fixed positioning when a css filter is active - #4348 */
+/* https://stackoverflow.com/questions/37949942/firefox-position-bug-by-parent-with-filter */
+@-moz-document url-prefix() {
+    #content > #bar {
+        width: 100vw;
+    }
+    #content.inactive > #bar > .spacer.col4 {
+        width: 0px;
+    }
+    #content.active > #bar > .spacer.col4 {
+        width: 33.3333%;
+        transition-duration: 200ms;
+        transition-timing-function: step-end;
+    }
+}
+
 #defs {
     /* Can't be display: none or the clippaths are ignored. */
     position: absolute;
@@ -2237,8 +2371,7 @@ button,
 .checkselect label:hover,
 .opacity-options li,
 .radial-menu-item {
-    cursor: pointer; /* Opera */
-    cursor: url(<%= asset_path("iD/img/cursor-pointer.png") %>) 6 1, pointer; /* FF */
+    cursor: pointer;
 }
 
 h2 {
@@ -3526,12 +3659,12 @@ button.save.has-count .count::before {
 /* preset form cycleway */
 /* preset form structure extras */
 
-.form-field-structure .structure-extras-wrap li,
+.structure-extras-wrap li,
 .form-field-cycleway .preset-input-wrap li,
 .form-field-access .preset-input-wrap li {
     border-bottom: 1px solid #ccc;
 }
-.form-field-structure .structure-extras-wrap li:last-child,
+.structure-extras-wrap li:last-child,
 .form-field-cycleway .preset-input-wrap li:last-child,
 .form-field-access .preset-input-wrap li:last-child {
     border-bottom: 0;
@@ -3616,14 +3749,15 @@ button.save.has-count .count::before {
 }
 
 .form-field-multicombo li {
+    display: inline-flex;
+    flex-flow: row nowrap;
+    align-items: center;
     background-color: #eff2f7;
     border: 1px solid #ccd5e3;
     border-radius: 4px;
     line-height: 25px;
-    display: inline-block;
     padding: 2px 5px;
     margin: 3px;
-    height: 30px;
 }
 
 .form-field-multicombo a {
@@ -3641,6 +3775,7 @@ button.save.has-count .count::before {
     border: 1px solid #ddd;
     width: 100px;
     margin: 3px;
+    height: 31px;
 }
 
 .form-field-multicombo .combobox-caret {
@@ -5055,8 +5190,13 @@ img.tile-removing {
     border-radius: 2px;
     padding: 0 4px;
     margin-top: 10px;
+    margin-right: 10px;
     color: white;
 }
+[dir='rtl'] .panel-content .button {
+    margin-right: auto;
+    margin-left: 10px;
+}
 
 .panel-content-history .links a {
     margin-left: 10px;
@@ -5649,10 +5789,15 @@ img.tile-removing {
     margin-bottom: 10px;
 }
 
+.mode-save .request-review label {
+    cursor: pointer;
+}
+
 .mode-save .changeset-list {
     border: 1px solid #ccc;
     border-radius: 4px;
     background: #fff;
+    margin-bottom: 10px;
 }
 
 .mode-save .warning-section {
@@ -5748,30 +5893,28 @@ img.tile-removing {
 
 .notice {
     position: absolute;
-    top: 0;
-    bottom: 0;
+    top: 45px;
     left: 0;
     right: 0;
     text-align: center;
-    background: #fff;
 }
 
 .notice .zoom-to {
     margin: auto;
-    width: 80%;
-    height: 100px;
-    border-radius: 5px;
-    line-height: 40px;
-    color: #000;
-    opacity: 0.9;
+    width: 300px;
+    height: 70px;
+    font-size: 150%;
+    border-radius: 8px;
 }
 
 .notice .zoom-to:hover {
-    background: #d8e1ff;
+    background: rgba(0,0,0,0.6);
 }
 
 .notice .zoom-to .icon {
-    margin-top: 10px;
+    width: 30px;
+    height: 30px;
+    vertical-align: middle;
     margin-right: 10px;
 }
 [dir='rtl'] .notice .zoom-to .icon {
@@ -6323,4 +6466,3 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
     width: 100px;
     color: #7092FF;
 }
-