]> 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 fbc19869e943f5710777fcacf6da9b8fad49c322..9ce30a05b387a816f5155137f108f41e14ad1814 100644 (file)
@@ -1943,120 +1943,238 @@ path.fill.tag-amenity-shelter {
 .turn circle {
     cursor: pointer;
 }
-/* Mapillary Image Layer */
+/* photo viewer div */
+#photoviewer {
+    position: absolute;
+    bottom: 30px;
+    width: 330px;
+    height: 250px;
+    padding: 5px;
+    background-color: #fff;
+}
 
-.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;
     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;
+}
+
+.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;
 }
 
-.mly-wrapper {
-    visibility: hidden;
+.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 */
 
@@ -5072,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;
@@ -5770,8 +5893,7 @@ img.tile-removing {
 
 .notice {
     position: absolute;
-    top: 50%;
-    bottom: 50%;
+    top: 45px;
     left: 0;
     right: 0;
     text-align: center;
@@ -5780,7 +5902,7 @@ img.tile-removing {
 .notice .zoom-to {
     margin: auto;
     width: 300px;
-    height: 80px;
+    height: 70px;
     font-size: 150%;
     border-radius: 8px;
 }