adjust zoom button design
authorRobert Kaiser <kairo@kairo.at>
Thu, 30 Apr 2015 23:28:22 +0000 (01:28 +0200)
committerRobert Kaiser <kairo@kairo.at>
Thu, 30 Apr 2015 23:28:22 +0000 (01:28 +0200)
index.html
style/lantea.css

index 3a17444..596cdd8 100644 (file)
@@ -63,9 +63,9 @@
 
 <div id="zoomArea" class="overlayArea">
 <input type="button" id="zoomInButton" value="+"
-       onclick="zoomIn();"><br/>
-<span id="zoomLevel">Z</span><br/>
-<input type="button" id="zoomOutButton" value="-"
+       onclick="zoomIn();">
+<p id="zoomLevel">Z</p>
+<input type="button" id="zoomOutButton" value="&minus;"
        onclick="zoomOut();">
 </div>
 
index e4e62a6..6fac89e 100644 (file)
@@ -51,6 +51,25 @@ h1 {
   text-align: center;
 }
 
+#zoomArea > input[type="button"] {
+  font-size: 1em;
+  font-weight: bold;
+  width: 2em;
+  height: 2em;
+  border-radius: 2em;
+  background-color: transparent;
+  color: #0000FF;
+  border: 2px solid #0000FF;
+}
+
+#zoomArea > input[type="button"]:hover {
+  background-color: rgba(255, 255, 255, .8);
+}
+
+#zoomArea > input[type="button"]:active {
+  background-color: rgba(255, 255, 127, .8);
+}
+
 #fullscreenArea {
   right: 1%;
   bottom: 2em;
@@ -61,6 +80,7 @@ h1 {
   background-color: rgba(255, 255, 255, .8);
   border-radius: 3px;
   padding: 0 3px;
+  margin: 2px 0;
 }
 
 #settingsArea,