simplify css

webdata/index.html

@@ -18,32 +18,32 @@
     </div>
     <div id="closed">
         <p>Disconnected</p>
-        <button class="icon" id="reloadbutton">↻</button>
+        <button id="reloadbutton">↻</button>
     </div>
     <div id="pad">
         <div class="buttons">
-            <button class="icon" id="keysbutton">☰</button>
+            <button id="keysbutton">☰</button>
         </div>
         <p id="padlabel">Touchpad</p>
         <div class="buttons">
-            <button class="icon" id="fullscreenbutton">⤢</button>
-            <button class="icon" id="keyboardbutton">⌨</button>
+            <button id="fullscreenbutton">⤢</button>
+            <button id="keyboardbutton">⌨</button>
         </div>
     </div>
     <div id="keyboard">
         <textarea id="text"></textarea>
-        <button class="icon" id="sendbutton">➣</button>
+        <button id="sendbutton">➣</button>
     </div>
     <div id="keys">
         <div class="buttons">
-            <button class="icon" id="prevtrackbutton">⏮</button>
-            <button class="icon" id="playpausebutton">⏯</button>
-            <button class="icon" id="nexttrackbutton">⏭</button>
+            <button id="prevtrackbutton">⏮</button>
+            <button id="playpausebutton">⏯</button>
+            <button id="nexttrackbutton">⏭</button>
         </div>
         <div class="buttons">
-            <button class="icon" id="volumedownbutton">🔉</button>
-            <button class="icon" id="volumemutebutton">🔇</button>
-            <button class="icon" id="volumeupbutton">🔊</button>
+            <button id="volumedownbutton">🔉</button>
+            <button id="volumemutebutton">🔇</button>
+            <button id="volumeupbutton">🔊</button>
         </div>
     </div>
 </body>

webdata/main.css

@@ -1,48 +1,47 @@
+@font-face {
+    font-family: "icon";
+    src: url("icon.woff") format("woff");
+}
+
 html,
 body,
-#pad,
-#keyboard,
-#keys,
-#opening,
-#closed {
+body > div {
     width: 100%;
     height: 100%;
     margin: 0;
 }
 
-body {
-    font-family: sans;
-}
-
-#pad,
-#keys,
-#sendbutton,
-#opening,
-#closed {
+body > div {
     background-color: #404040 !important;
     background-image: url(tex.png);
+    font-family: sans;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
 }
 
 #opening,
 #closed,
-#keys,
-#pad {
-    display: flex;
-    flex-direction: column;
-}
-
-#opening,
-#closed {
-    justify-content: center;
+#keys {
     align-items: center;
-    font-size: 2em;
-    color: white;
-    word-wrap: break-word;
 }
 
 #keys {
     justify-content: flex-end;
-    align-items: center;
+}
+
+#keyboard {
+    flex-direction: row;
+}
+
+p {
+    font-size: 2rem;
+    color: white;
+    word-wrap: break-word;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 
 #padlabel {
@@ -67,23 +66,22 @@ body {
     }
 }
 
-#keysbutton,
-#fullscreenbutton,
-#keyboardbutton,
-#sendbutton,
-#reloadbutton,
-#prevtrackbutton,
-#playpausebutton,
-#nexttrackbutton,
-#volumedownbutton,
-#volumemutebutton,
-#volumeupbutton {
+.buttons {
+    display: flex;
+}
+
+button {
     background-color: transparent;
     border: 1px solid black;
     height: 1.5em;
     width: 2em;
-    font-size: 2em;
+    font-size: 2rem;
     color: white;
+    font-family: "icon";
+}
+
+button:focus {
+    outline: none;
 }
 
 #fullscreenbutton,
@@ -95,7 +93,7 @@ body {
 #keysbutton,
 #fullscreenbutton,
 #playpausebutton,
-#mutebutton {
+#volumemutebutton {
     border-left: none;
 }
 
@@ -104,7 +102,7 @@ body {
 }
 
 #playpausebutton,
-#mutebutton,
+#volumemutebutton,
 #keyboardbutton {
     border-right: none;
 }
@@ -113,22 +111,18 @@ body {
     margin-left: auto;
 }
 
-#keyboard {
-    display: flex;
-    flex-direction: row;
+#reloadbutton {
+    font-size: 4rem;
 }
 
-#text {
+textarea {
     flex: 2;
     border: none;
     resize: none;
-    font-size: 2em;
+    font-size: 2rem;
     background-color: white;
     color: black;
-}
-
-.buttons {
-    display: flex;
+    margin: 0;
 }
 
 #sendbutton {
@@ -170,23 +164,3 @@ body {
         width: 100%;
     }
 }
-
-@font-face {
-    font-family: "icon";
-    src: url("icon.woff") format("woff");
-}
-
-.icon {
-    font-family: "icon";
-}
-
-p {
-    -moz-user-select: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-button:focus {
-    outline: none;
-}