Polishing the UI

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;

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;
 }

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;
+}

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.