From eb952e27b3dd353da1255416d054271b06dfb51c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= <hugo@lysator.liu.se>
Date: Tue, 28 Apr 2020 22:20:30 +0200
Subject: .btn click area now fixed.

---
 static/style.css | 29 +++++++++++++++++++++++------
 1 file changed, 23 insertions(+), 6 deletions(-)

(limited to 'static')

diff --git a/static/style.css b/static/style.css
index 0116a924..a057ff36 100644
--- a/static/style.css
+++ b/static/style.css
@@ -104,20 +104,33 @@ html, body {
 }
 
 .btn {
-    padding: 0.5em;
-    background-color: #3399ff;
-    color: white;
-
-    box-shadow: var(--btn-height) var(--btn-height) gray;
+    padding: 0;
 
     /* if a */
     text-decoration: none;
 
     /* if button */
     border: none;
+    background-color: inherit;
+}
+
+.btn > div {
+    padding: 0.5em;
+    background-color: #3399ff;
+    color: white;
+
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    box-shadow: var(--btn-height) var(--btn-height) gray;
 }
 
-.btn:active {
+.btn:active > div {
     transform: translate(var(--btn-height), var(--btn-height));
     box-shadow: none;
 }
@@ -639,6 +652,10 @@ along with their colors.
 .popup .popup-control {
     display: flex;
     flex-direction: column;
+
+    /* not needed, but the icons aren't text
+       and should therefor not be copied */
+    user-select: none;
 }
 
 .popup-control .btn {
-- 
cgit v1.2.3