polish button css

4 files changed, 14 insertions, 12 deletions

diff --git a/client-web/source/menu.ts b/client-web/source/menu.ts
index 395b7ff..5ac56e3 100644
--- a/client-web/source/menu.ts
+++ b/client-web/source/menu.ts
@@ -62,6 +62,7 @@ export function side_ui(container: HTMLElement, content: HTMLElement, label: str
         onchange: async () => {
             if (last_state == checkbox.checked) return
             if (checkbox.checked) {
+                el.classList.add("checked")
                 if (close_active) {
                     close_active()
                     await sleep(200)
@@ -78,6 +79,7 @@ export function side_ui(container: HTMLElement, content: HTMLElement, label: str
                     handlers.focus()
                 }, 200)
             } else {
+                el.classList.remove("checked")
                 close_active = undefined
                 if (cancel_slide) {
                     clearTimeout(cancel_slide)
@@ -97,8 +99,6 @@ export function side_ui(container: HTMLElement, content: HTMLElement, label: str
         checkbox.checked = s ?? !checkbox.checked;
         if (checkbox.onchange) checkbox.onchange(undefined as unknown as Event)
     }
-    return {
-        el: e("label", { class: "side-ui-control" }, label, checkbox),
-        set_state,
-    }
+    const el = e("label", { class: "side-ui-control" }, label, checkbox)
+    return { el, set_state }
 }
diff --git a/client-web/source/user/remote.ts b/client-web/source/user/remote.ts
index f6b64ea..5e26838 100644
--- a/client-web/source/user/remote.ts
+++ b/client-web/source/user/remote.ts
@@ -164,7 +164,6 @@ export class RemoteUser extends User {
     }
 
     async update_status() {
-
         const states: { [key in RTCIceConnectionState]: [string, string] } = {
             new: ["Not connected", "neutral"],
             checking: ["Checking...", "neutral"],
diff --git a/client-web/style/master.sass b/client-web/style/master.sass
index c4aa50e..c5c1cc9 100644
--- a/client-web/style/master.sass
+++ b/client-web/style/master.sass
@@ -60,20 +60,27 @@ button,
     margin: 0.25em
     background-color: var(--ac)
     border: 0px solid transparent
+    user-select: none
     border-radius: 3px
     font-size: small
     font-weight: 400
     cursor: pointer
+    transition: filter 0.1s
 
 input[type="button"]:hover,
 button:hover,
 .side-ui-control:hover
     filter: brightness(130%)
 
+input:disabled,
+button:disabled,
+.side-ui-control:disabled
+    filter: sepia(90%)
+
 input[type="button"].active,
 button.active,
-.side-ui-control:active
-    filter: hue-rotate(20deg)
+.side-ui-control.checked
+    filter: hue-rotate(30deg)
 
 input[type="text"],
 select,
@@ -85,10 +92,5 @@ button.abort
     left: 0px
     background-color: #9a2020
 
-input:disabled,
-button:disabled,
-.side-ui-control:disabled
-    filter: sepia(90%)
-
 .side-ui-control input
     display: none
diff --git a/client-web/style/menu.sass b/client-web/style/menu.sass
index 2199d06..f2f7868 100644
--- a/client-web/style/menu.sass
+++ b/client-web/style/menu.sass
@@ -19,6 +19,7 @@
     right: 0px
     display: block
     text-align: right
+    z-index: 100
 
 .info-br .version
     font-size: medium