From 7cbc19ed39c360dfa9bc9345b301802849b161df Mon Sep 17 00:00:00 2001
From: He4eT <He4eTHb1u@gmail.com>
Date: Wed, 3 Mar 2021 16:33:58 +0500
Subject: [PATCH] Polishing the UI

---
 src/components/Player/player.css |  8 ++++++++
 src/style/base.css               | 23 +++++++++++++++++++----
 src/style/views/HomeView.css     | 16 ++++++++++++++--
 src/views/HomeView.jsx           |  5 -----
 4 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/src/components/Player/player.css b/src/components/Player/player.css
index 5e6edf2..1485b76 100644
--- a/src/components/Player/player.css
+++ b/src/components/Player/player.css
@@ -22,6 +22,14 @@
   margin-top: var(--input-box-margin);
 }
 
+.ifplayer .inputBox::placeholder {
+  color: var(--main-color);
+  opacity: 1;
+}
+.ifplayer .inputBox:focus::placeholder {
+  opacity: 0.5;
+}
+
 .ifplayer .textBuffer {
   flex: 2 1 auto;
   overflow-y: scroll;
diff --git a/src/style/base.css b/src/style/base.css
index bdad34e..a5529de 100644
--- a/src/style/base.css
+++ b/src/style/base.css
@@ -53,12 +53,19 @@ summary {
 }
 
 a:focus,
-summary:focus {
-  background-color: hsl(0, 0%, 0%, 0.1);
+a:hover,
+summary:focus,
+summary:hover {
+  opacity: 0.8;
 }
 
-a:hover,
-summary:hover {
+*:focus {
+  outline: 1px solid var(--main-color);
+  outline-offset: 3px;
+}
+
+input::placeholder {
+  color: var(--main-color);
   opacity: 0.8;
 }
 
@@ -66,6 +73,14 @@ ul {
   list-style: square;
 }
 
+hr {
+  border: 0;
+  height: 0;
+  border-top: 2px solid var(--main-color);
+}
+
+/*  */
+
 .status {
   padding: 8px;
 }
diff --git a/src/style/views/HomeView.css b/src/style/views/HomeView.css
index cdb5169..a81420c 100644
--- a/src/style/views/HomeView.css
+++ b/src/style/views/HomeView.css
@@ -14,13 +14,25 @@
   font: inherit;
 }
 
+.view.home select {
+  cursor: pointer;
+  appearance: none;
+  width: 200px;
+}
+
 .view.home label {
   display: inline-block;
   width: 100%;
   max-width: 400px;
 }
 
-.view.home label input,
-.view.home label select {
+.view.home label input {
   width: 100%;
 }
+
+.view.home input[type='file'] {
+  position: relative;
+  font-size: 0;
+  text-indent: -100%;
+  cursor: pointer;
+}
diff --git a/src/views/HomeView.jsx b/src/views/HomeView.jsx
index e6a9e68..f83585c 100644
--- a/src/views/HomeView.jsx
+++ b/src/views/HomeView.jsx
@@ -49,11 +49,6 @@ export default function ({ themeEngine }) {
         }} />
 
         <p>
-          <small>
-            Themes without borders
-            are better suited for small screens.
-          </small>
-          <br />
           <small>
             Double-click the input field during the game
             to enter full-screen mode.