Style the CSS zoom control to match the layer switcher

diff --git a/app/assets/openlayers/theme/default/style.css.scss b/app/assets/openlayers/theme/default/style.css.scss
index 1851075c661d6480cd4f87ea02646e7c6c1416da..6c833aea8ba6dac10a500c37a0e5f366890e2a95 100644 (file)
--- a/app/assets/openlayers/theme/default/style.css.scss
+++ b/app/assets/openlayers/theme/default/style.css.scss
@@ -443,7 +443,7 @@ div.olControlZoom a {
     display: block;
     margin: 1px;
     padding: 0;
-    color: white;
+    color: black;
     font-size: 18px;
     font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
     font-weight: bold;
@@ -452,19 +452,11 @@ div.olControlZoom a {
     height: 22px;
     width:22px;
     line-height: 19px;
-    background: #130085; /* fallback for IE - IE6 requires background shorthand*/
-    background: rgba(0, 60, 136, 0.5);
-    filter: alpha(opacity=80);
+    background: #ffffff;
+    border: 1px solid #cccccc;
 }
 div.olControlZoom a:hover {
-    background: #130085; /* fallback for IE */
-    background: rgba(0, 60, 136, 0.7);
-    filter: alpha(opacity=100);
-}
-@media only screen and (max-width: 600px) {
-    div.olControlZoom a:hover {
-        background: rgba(0, 60, 136, 0.5);
-    }
+    background: #f5f5f5;
 }
 a.olControlZoomIn {
     border-radius: 4px 4px 0 0;