update theme

2 files changed, 70 insertions, 72 deletions

diff --git a/client-web/public/assets/style/master.css b/client-web/public/assets/style/master.css
index 8a22d1b..a8e8ce9 100644
--- a/client-web/public/assets/style/master.css
+++ b/client-web/public/assets/style/master.css
@@ -2,114 +2,112 @@
 @import url("./logger.css");
 
 * {
-  font-family: "Ubuntu", sans-serif;
-  font-weight: 300;
-  color: white;
-  margin: 0px;
-  padding: 0px;
+    font-family: "Ubuntu", sans-serif;
+    font-weight: 300;
+    color: white;
+    margin: 0px;
+    padding: 0px;
 }
 
 :root {
-  --bg: #212121;
-  --bg-dark: #070707;
-  --bg-light: #354b58;
-  --bg-lighter: #4f5b62;
-  --bg-disabled: #720000;
-  --bg-enabled: #097200;
-  --ac: #4a148c;
-  --ac-light: #7c43bd;
-  --ac-dark: #12005e;
+    --bg: #151515;
+    --bg-dark: #070707;
+    --bg-light: #494949;
+    --bg-lighter: #949494;
+    --bg-disabled: #720000;
+    --bg-enabled: #097200;
+    --ac: #5e3f84;
+    --ac-light: #7c43bd;
+    --ac-dark: #12005e;
 }
 
 body {
-  background-color: var(--bg-dark);
+    background-color: var(--bg-dark);
 }
 
 h2 {
-  font-weight: 700;
-  margin: 1em;
+    font-weight: 700;
+    margin: 1em;
 }
 
 input[type="button"],
 button {
-  padding: 0.5em;
-  margin: 0.25em;
-  background-color: var(--bg-light);
-  border: 0px solid transparent;
-  border-radius: 3px;
+    padding: 0.5em;
+    margin: 0.25em;
+    background-color: var(--ac);
+    border: 0px solid transparent;
+    border-radius: 3px;
 }
 input[type="button"]:hover,
 button:hover {
-  background-color: var(--bg-lighter);
-}
-input[type="button"].enabled,
-button.enabled {
-  background-color: var(--bg-enabled);
+    filter: brightness(130%);
 }
 input[type="text"] {
-  background-color: var(--bg-dark);
-  border: 1px solid var(--ac-light);
+    background-color: var(--bg-dark);
+    border: 1px solid var(--ac-light);
 }
 
 .local-controls {
-  background-color: var(--bg);
-  padding: 0.5em;
-  position: absolute;
-  bottom: 0.5em;
-  border: 0px solid transparent;
-  border-radius: 5px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 100;
+    background-color: var(--bg);
+    padding: 0.5em;
+    position: absolute;
+    bottom: 0.5em;
+    border: 0px solid transparent;
+    border-radius: 5px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 100;
 }
 
 .room {
-  width: 100%;
-  height: 100%;
+    width: 100%;
+    height: 100%;
 }
 
 .user {
-  background-color: var(--bg);
-  border: 0px soly transparent;
-  border-radius: 5px;
-  padding: 1em;
-  vertical-align: baseline;
-  min-width: 10em;
-  margin: 0.5em;
+    background-color: var(--bg);
+    border: 0px soly transparent;
+    border-radius: 5px;
+    padding: 1em;
+    vertical-align: baseline;
+    min-width: 10em;
+    margin: 0.5em;
 }
 
 .user .info .name {
-  font-weight: 400;
+    font-weight: 400;
 }
 .user.local .info .name {
-  text-decoration: underline;
+    text-decoration: underline;
+}
+.user .info {
+    margin-bottom: 1em;
 }
 
 .media {
-  max-height: 30vh;
-  border: 0px solid transparent;
-  border-radius: 5px;
+    max-height: 30vh;
+    border: 0px solid transparent;
+    border-radius: 5px;
 }
 
 .start-box {
-  position: absolute;
-  top: 50vh;
-  left: 50vw;
-  transform: translate(-50%, -50%);
+    position: absolute;
+    top: 50vh;
+    left: 50vw;
+    transform: translate(-50%, -50%);
 }
 .start-box p {
-  margin-bottom: 0.5em;
+    margin-bottom: 0.5em;
 }
 .start-box input[type="text"] {
-  margin: 0.5em;
-  font-size: 32px;
+    margin: 0.5em;
+    font-size: 32px;
 }
 
 .menu-overlay {
-  position: absolute;
-  bottom: 0px;
-  right: 0px;
-  display: block;
-  text-align: right;
+    position: absolute;
+    bottom: 0px;
+    right: 0px;
+    display: block;
+    text-align: right;
 }
-
diff --git a/client-web/source/user/remote.ts b/client-web/source/user/remote.ts
index 7ded214..eadb11f 100644
--- a/client-web/source/user/remote.ts
+++ b/client-web/source/user/remote.ts
@@ -20,11 +20,11 @@ export class RemoteUser extends User {
         }
         this.peer.ontrack = ev => {
             const t = ev.track
-            log("media", `remote track: ${this.name}`, t)
+            log("media", `remote track: ${this.display_name}`, t)
             this.add_track(new TrackHandle(t))
         }
         this.peer.onnegotiationneeded = async () => {
-            log("webrtc", `negotiation needed: ${this.name}`)
+            log("webrtc", `negotiation needed: ${this.display_name}`)
             while (this.negotiation_busy) {
                 await new Promise<void>(r => setTimeout(() => r(), 100))
             }
@@ -37,12 +37,12 @@ export class RemoteUser extends User {
         const offer_description = await this.peer.createOffer()
         await this.peer.setLocalDescription(offer_description)
         const offer = { type: offer_description.type, sdp: offer_description.sdp }
-        log("webrtc", `sent offer: ${this.name}`, { a: offer })
+        log("webrtc", `sent offer: ${this.display_name}`, { offer })
         this.room.signaling.send_relay({ offer }, this.id)
     }
     async on_offer(offer: RTCSessionDescriptionInit) {
         this.negotiation_busy = true
-        log("webrtc", `got offer: ${this.name}`, { a: offer })
+        log("webrtc", `got offer: ${this.display_name}`, { offer })
         const offer_description = new RTCSessionDescription(offer)
         await this.peer.setRemoteDescription(offer_description)
         this.answer()
@@ -51,12 +51,12 @@ export class RemoteUser extends User {
         const answer_description = await this.peer.createAnswer()
         await this.peer.setLocalDescription(answer_description)
         const answer = { type: answer_description.type, sdp: answer_description.sdp }
-        log("webrtc", `sent answer: ${this.name}`, { a: answer })
+        log("webrtc", `sent answer: ${this.display_name}`, { answer })
         this.room.signaling.send_relay({ answer }, this.id)
         this.negotiation_busy = false
     }
     async on_answer(answer: RTCSessionDescriptionInit) {
-        log("webrtc", `got answer: ${this.name}`, { a: answer })
+        log("webrtc", `got answer: ${this.display_name}`, { answer })
         const answer_description = new RTCSessionDescription(answer)
         await this.peer.setRemoteDescription(answer_description)
         this.negotiation_busy = false
@@ -67,7 +67,7 @@ export class RemoteUser extends User {
     }
 
     leave() {
-        log("usermodel", `remove remote user: ${this.name}`)
+        log("usermodel", `remove remote user: ${this.display_name}`)
         this.peer.close()
         this.room.el.removeChild(this.el)
     }