style: Updated mic tally appearance and responsiveness

tv2 · Nov 10, 2021 · 6c6f65d · 6c6f65d
1 parent d74b69b
commit 6c6f65d
Showing 1 changed file with 16 additions and 3 deletions.
diff --git a/client/assets/css/MicTally.css b/client/assets/css/MicTally.css
@@ -23,21 +23,29 @@ body.v-mic-tally {
     flex: 1 1 80px;
     min-width: 80px;
     text-align: center;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 .c-mic-tally:not(:first-child) {
     margin-left: 8px;
 }
 .c-mic-tally__status {
-    box-sizing: border-box;
-    display: block;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     font-weight: bold;
-    padding: 20px 10px;
     border-radius: 100%;
     margin: 0 auto;
     background-color: #444444;
     border: 2px solid #888888;
     width: 60px;
     height: 60px;
+    cursor: pointer;
+}
+
+.c-mic-tally__status:active {
+    background-color: #888888;
 }
 
 .c-mic-tally__status.on {
@@ -47,6 +55,11 @@ body.v-mic-tally {
     font-size: 1em;
 }
 
+.c-mic-tally__status.on:active {
+    background-color: red;
+    color: white;
+}
+
 .c-mic-tally__label {
     display: block;
     color: white;