From ac45368eb86d7264e81a043c3bbcbddb0d1b3044 Mon Sep 17 00:00:00 2001
From: Robert Kaiser <kairo@kairo.at>
Date: Fri, 1 May 2015 01:28:22 +0200
Subject: [PATCH] adjust zoom button design

---
 index.html       |  6 +++---
 style/lantea.css | 20 ++++++++++++++++++++
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 3a17444..596cdd8 100644
--- 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 e4e62a6..6fac89e 100644
--- 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,
-- 
2.35.3