🎨 Improved style

src/renderer/index.html

@@ -32,7 +32,7 @@
           <h2 class="card-title">Floppy Drive</h2>
         </div class="card-header">
         <div class="card-body">
-          <input id="floppy-input" type='file'>
+          <input id="floppy-input" type='file' style="display: none">
           <p>windows95 comes with a virtual floppy drive. If you have floppy disk images in the "img" format, you can
             mount them here.</p>
           <p>Back in the 90s and before CD-ROM became a popular format, software was typically distributed on floppy

src/renderer/style/resets.css

@@ -0,0 +1,33 @@
+/* GENERAL RESETS */
+
+.windows95 nav .nav-link,
+.windows95 nav .nav-logo {
+  height: 30px;
+  line-height: 1.5;
+}
+
+.windows95 nav .nav-logo img {
+  margin-left: 2px;
+  max-height: 20px;
+}
+
+.windows95 nav .nav-logo > span {
+  position: absolute;
+  top: 9px;
+  left: 37px;
+  font-weight: bold;
+}
+
+.windows95 .btn:focus {
+  border-color: #fff #000 #000 #fff;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+.windows95 .btn.active:before,
+.windows95 .btn:focus:before,
+.windows95 button.active:before,
+.windows95 button:focus:before,
+.windows95 input[type=submit].active:before,
+.windows95 input[type=submit]:focus:before {
+  border-color: #dedede grey grey #dedede;
+}

src/renderer/style/status.css

@@ -0,0 +1,16 @@
+#status {
+  user-select: none;
+  position: absolute;
+  z-index: 100;
+  left: calc(50vw - 110px);
+  background: white;
+  font-size: 10px;
+  padding-bottom: 3px;
+  border-bottom-left-radius: 15px;
+  border-bottom-right-radius: 15px;
+  overflow: hidden;
+  padding-left: 10px;
+  padding-right: 10px;
+  max-height: 18px;
+  top: 0;
+}

src/renderer/style/style.css

@@ -1,3 +1,6 @@
+@import "./resets.css";
+@import "./status.css";
+
 html, body {
   margin: 0;
   padding: 0;
@@ -20,23 +23,6 @@ body.paused {
   user-select: none;
 }
 
-#status {
-  user-select: none;
-  position: absolute;
-  z-index: 100;
-  left: calc(50vw - 110px);
-  background: white;
-  font-size: 10px;
-  padding-bottom: 3px;
-  border-bottom-left-radius: 15px;
-  border-bottom-right-radius: 15px;
-  overflow: hidden;
-  padding-left: 10px;
-  padding-right: 10px;
-  max-height: 18px;
-  top: 0;
-}
-
 #floppy-path {
   font-size: .6rem;
   width: 100%;
@@ -69,24 +55,6 @@ body.paused {
   display: none;
 }
 
-.windows95 nav .nav-link,
-.windows95 nav .nav-logo {
-  height: 30px;
-  line-height: 1.5;
-}
-
-.windows95 nav .nav-logo img {
-  margin-left: 2px;
-  max-height: 20px;
-}
-
-.windows95 nav .nav-logo > span {
-  position: absolute;
-  top: 9px;
-  left: 37px;
-  font-weight: bold;
-}
-
 section {
   display: none;
 }