adjust zoom button design

diff --git a/index.html b/index.html
index 3a17444a1b61845df91f06d6a8657a74850bd020..596cdd8bc04dd3cfa3811c8be9c3657efe8b8bf9 100644 (file)
--- a/index.html
+++ b/index.html
@@ -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>
 

diff --git a/style/lantea.css b/style/lantea.css
index e4e62a6eaf532d47d03b5d94b72d18753a36b7e6..6fac89ece19e8260527aa2cc1e4a852ad2208b3f 100644 (file)
--- a/style/lantea.css
+++ b/style/lantea.css
@@ -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,