From 919df01275e5503c651c81c793afd38e9a1f29e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Anders=20Christiansen=20S=C3=B8rby?= <anders@sorby.xyz>
Date: Tue, 23 Feb 2021 23:13:47 +0100
Subject: [PATCH] Always show the corner buttons

---
 webdata/index.html | 80 ++++++++++++++++++++++++----------------------
 webdata/main.css   |  3 ++
 2 files changed, 44 insertions(+), 39 deletions(-)
diff --git a/webdata/index.html b/webdata/index.html
index 6c80bed..9a6cd65 100644
--- a/webdata/index.html
+++ b/webdata/index.html
@@ -1,47 +1,49 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
-<meta http-equiv="X-UA-Compatible" content="IE=edge">
-<script src="fn.js"></script>
-<script src="sha256.js"></script>
-<title>Remote Touchpad</title>
-<link href="main.css" media="screen" rel="stylesheet">
-<link href="icon.png" type="image/png" rel="shortcut icon">
-
-<div id="opening">
-    <noscript><p>JavaScript is required!</p></noscript>
-    <p>Connecting…</p>
-</div>
-<div id="closed" class="hidden">
-    <p>Disconnected</p>
-    <button id="reloadbutton">↻</button>
-</div>
-<div id="pad" class="hidden">
-    <p id="padlabel">Touchpad</p>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <script src="fn.js"></script>
+    <script src="sha256.js"></script>
+    <title>Remote Touchpad</title>
+    <link href="main.css" media="screen" rel="stylesheet">
+    <link href="icon.png" type="image/png" rel="shortcut icon">
+</head>
+<body>
     <button id="keysbutton">☰</button>
     <button id="fullscreenbutton">⤢</button>
     <button id="keyboardbutton">⌨</button>
-</div>
-<div id="keyboard" class="hidden">
-    <textarea id="text" cols=1 rows=1></textarea>
-    <button id="sendbutton">➣</button>
-</div>
-<div id="keys" class="hidden">
-    <div class="buttons">
-        <button id="browserbackbutton">⭠</button>
-        <button id="superbutton">🪟</button>
-        <button id="browserforwardbutton">⭢</button>
+    <div id="opening">
+        <noscript><p>JavaScript is required!</p></noscript>
+        <p>Connecting…</p>
     </div>
-    <div class="buttons">
-        <button id="prevtrackbutton">⏮</button>
-        <button id="playpausebutton">⏯</button>
-        <button id="nexttrackbutton">⏭</button>
+    <div id="closed" class="hidden">
+        <p>Disconnected</p>
+        <button id="reloadbutton">↻</button>
     </div>
-    <div class="buttons">
-        <button id="volumedownbutton">🔉</button>
-        <button id="volumemutebutton">🔇</button>
-        <button id="volumeupbutton">🔊</button>
+    <div id="pad" class="hidden">
+        <p id="padlabel">Touchpad</p>
     </div>
-</div>
+    <div id="keyboard" class="hidden">
+        <textarea id="text" cols=1 rows=1></textarea>
+        <button id="sendbutton">➣</button>
+    </div>
+    <div id="keys" class="hidden">
+        <div class="buttons">
+            <button id="browserbackbutton">⭠</button>
+            <button id="superbutton">🪟</button>
+            <button id="browserforwardbutton">⭢</button>
+        </div>
+        <div class="buttons">
+            <button id="prevtrackbutton">⏮</button>
+            <button id="playpausebutton">⏯</button>
+            <button id="nexttrackbutton">⏭</button>
+        </div>
+        <div class="buttons">
+            <button id="volumedownbutton">🔉</button>
+            <button id="volumemutebutton">🔇</button>
+            <button id="volumeupbutton">🔊</button>
+        </div>
+    </div>
+</body>
diff --git a/webdata/main.css b/webdata/main.css
index c5ac0ff..743e9a8 100644
--- a/webdata/main.css
+++ b/webdata/main.css
@@ -103,6 +103,7 @@ button:focus {
     bottom: 0;
     border-bottom: none;
     border-left: none;
+    position: absolute;
 }
 
 #keyboardbutton {
@@ -110,6 +111,7 @@ button:focus {
     bottom: 0;
     border-right: none;
     border-bottom: none;
+    position: absolute;
 }
 
 #keysbutton {
@@ -117,6 +119,7 @@ button:focus {
     top: 0;
     border-top: none;
     border-left: none;
+    position: absolute;
 }
 
 textarea {
