♿ State focus on input

assets/css/styles.scss

@@ -212,12 +212,19 @@ pre {
   font-weight: 700;
   font-size: 18px;
   font-family: monospace;
+  transition: all 0.2s ease-in-out;
 }
 
 select,
 input,
 option {
   height: 41px;
+
+  &:not([readonly]):hover,
+  &:not([readonly]):focus {
+    background-color: var(--bg-color);
+    box-shadow: inset 0 0 0 2px var(--ac-color);
+  }
 }
 
 input[type="checkbox"] {

components/toggle.vue

@@ -25,11 +25,13 @@
 
   div {
     display: inline-block;
+    cursor: pointer;
   }
 
   label.caption {
     margin-left: 4px;
     vertical-align: middle;
+    cursor: pointer;
   }
 
   label.toggle {
@@ -46,6 +48,7 @@
     box-sizing: initial;
     padding: 0;
     margin: 10px 5px;
+    cursor: pointer;
 
     .handle {
       position: absolute;
@@ -62,8 +65,6 @@
 
       pointer-events: none;
       transition: $transition;
-
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
     }
 
     &.on {

pages/settings.vue

@@ -24,9 +24,11 @@
       <ul>
         <li>
           <h3 class="title">Frames</h3>
-          <pw-toggle :on="!settings.DISABLE_FRAME_COLORS" @change="toggleSetting('DISABLE_FRAME_COLORS')">
-            Multi-color {{ settings.DISABLE_FRAME_COLORS ? "disabled" : "enabled" }}
-          </pw-toggle>
+          <span>
+            <pw-toggle :on="!settings.DISABLE_FRAME_COLORS" @change="toggleSetting('DISABLE_FRAME_COLORS')">
+              Multi-color {{ settings.DISABLE_FRAME_COLORS ? "disabled" : "enabled" }}
+            </pw-toggle>
+          </span>
         </li>
       </ul>
     </pw-section>

pages/websocket.vue

@@ -27,7 +27,7 @@
       <ul>
         <li>
           <label for="message">Message</label>
-          <input id="message" name="message" type="text" v-model="communication.input" :disabled="!connectionState" @keyup.enter="connectionState ? sendMessage() : null">
+          <input id="message" name="message" type="text" v-model="communication.input" :readonly="!connectionState" @keyup.enter="connectionState ? sendMessage() : null">
         </li>
         <li>
           <label for="send" class="hide-on-small-screen">&nbsp;</label>