From 7275287264875c015973c5160f3d70a4370c149e Mon Sep 17 00:00:00 2001
From: ReznoRMichael <mic3arena@gmail.com>
Date: Sat, 30 Jan 2021 21:35:33 +0100
Subject: [PATCH] save location input text

---
 docs/index.html   |  2 +-
 docs/main.css     | 14 +++++++++++---
 src/css/style.css | 14 +++++++++++---
 src/index.html    |  2 +-
 4 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 8080c65..ae1cb5d 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -46,7 +46,7 @@
         <a class="link-social" href="https://github.com/ReznoRMichael/hollow-knight-completion-check" target="_blank"><i class="simpleicon-github"></i>GitHub</a>
         <br>
         <!-- <a href="https://pastebin.com/raw/shfZ4Vqs" target="_blank">[ Decoded 5% Save Example ]</a><br> -->
-        <code>%USERPROFILE%\AppData\LocalLow\Team Cherry\Hollow Knight\</code>
+        <input type="text" id="save-location-input" size="57" value="%USERPROFILE%\AppData\LocalLow\Team Cherry\Hollow Knight\" readonly>
         <br>
         Choose a HK user*.dat save OR paste a <a href="https://bloodorca.github.io/hollow/" target="_blank">decoded save</a>.
     </p>
diff --git a/docs/main.css b/docs/main.css
index d763e3d..47875c0 100644
--- a/docs/main.css
+++ b/docs/main.css
@@ -214,17 +214,25 @@ h2 {
     color: rgba(231, 251, 255, 0.6);
 }
 
-code {
+#save-location-input {
     font-family: 'Consolas', monospace;
     font-size: 0.75rem;
+    text-align: center;
+    width: max-content;
+    color: #fff;
     display: inline-block;
     background-color: rgba(128, 128, 128, 0.5);
-    margin: 0.4rem 0;
-    padding: 0.16rem 0.5rem;
+    margin: 0.4rem 0 0.6rem 0;
+    padding: 0.16rem 0.5rem 0.25rem 0.5rem;
     border: 1px solid rgba(231, 251, 255, 0.6);
     border-radius: 3px;
 }
 
+#save-location-input:focus {
+    outline: 0;
+    border: 1px solid rgba(231, 251, 255, 0.8);
+}
+
 input {
     font-family: 'Heebo', sans-serif;
     font-size: 1rem;
diff --git a/src/css/style.css b/src/css/style.css
index ec9c858..d097ca3 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -107,17 +107,25 @@ h2 {
     color: rgba(231, 251, 255, 0.6);
 }
 
-code {
+#save-location-input {
     font-family: 'Consolas', monospace;
     font-size: 0.75rem;
+    text-align: center;
+    width: max-content;
+    color: #fff;
     display: inline-block;
     background-color: rgba(128, 128, 128, 0.5);
-    margin: 0.4rem 0;
-    padding: 0.16rem 0.5rem;
+    margin: 0.4rem 0 0.6rem 0;
+    padding: 0.16rem 0.5rem 0.25rem 0.5rem;
     border: 1px solid rgba(231, 251, 255, 0.6);
     border-radius: 3px;
 }
 
+#save-location-input:focus {
+    outline: 0;
+    border: 1px solid rgba(231, 251, 255, 0.8);
+}
+
 input {
     font-family: 'Heebo', sans-serif;
     font-size: 1rem;
diff --git a/src/index.html b/src/index.html
index 57f5387..a57d689 100644
--- a/src/index.html
+++ b/src/index.html
@@ -46,7 +46,7 @@
         <a class="link-social" href="https://github.com/ReznoRMichael/hollow-knight-completion-check" target="_blank"><i class="simpleicon-github"></i>GitHub</a>
         <br>
         <!-- <a href="https://pastebin.com/raw/shfZ4Vqs" target="_blank">[ Decoded 5% Save Example ]</a><br> -->
-        <code>%USERPROFILE%\AppData\LocalLow\Team Cherry\Hollow Knight\</code>
+        <input type="text" id="save-location-input" size="57" value="%USERPROFILE%\AppData\LocalLow\Team Cherry\Hollow Knight\" readonly>
         <br>
         Choose a HK user*.dat save OR paste a <a href="https://bloodorca.github.io/hollow/" target="_blank">decoded save</a>.
     </p>