From dbcefb4b7bb9362d9ccb269fc9491fd97de53268 Mon Sep 17 00:00:00 2001
From: Felix Rieseberg <felix@felixrieseberg.com>
Date: Mon, 19 Aug 2019 08:41:14 -0700
Subject: [PATCH] :art: Improved style

---
 src/renderer/index.html       |  2 +-
 src/renderer/style/resets.css | 33 ++++++++++++++++++++++++++++++
 src/renderer/style/status.css | 16 +++++++++++++++
 src/renderer/style/style.css  | 38 +++--------------------------------
 4 files changed, 53 insertions(+), 36 deletions(-)
 create mode 100644 src/renderer/style/resets.css
 create mode 100644 src/renderer/style/status.css

diff --git a/src/renderer/index.html b/src/renderer/index.html
index 7dfed2f..348bbf8 100644
--- a/src/renderer/index.html
+++ b/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
diff --git a/src/renderer/style/resets.css b/src/renderer/style/resets.css
new file mode 100644
index 0000000..077fe1f
--- /dev/null
+++ b/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;
+}
diff --git a/src/renderer/style/status.css b/src/renderer/style/status.css
new file mode 100644
index 0000000..425df3e
--- /dev/null
+++ b/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;
+}
diff --git a/src/renderer/style/style.css b/src/renderer/style/style.css
index ef2e309..ab853c5 100644
--- a/src/renderer/style/style.css
+++ b/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;
 }