diff --git a/src/assets/stylesheets/2d-hud.scss b/src/assets/stylesheets/2d-hud.scss index f540966b802f198d660c16e886cb6deff5f1007a..2fe1736009876a36c2dd29d0c0e6de6c709220bf 100644 --- a/src/assets/stylesheets/2d-hud.scss +++ b/src/assets/stylesheets/2d-hud.scss @@ -12,104 +12,29 @@ display: flex; justify-content: space-around; align-items: center; - padding: 10px; - background-color: rgba(0, 0, 0, 0.35); + padding: 5px; + background-color: rgba(#4F4F4F, 0.45); } :local(.panel.left) { border-bottom-left-radius: 30px; border-top-left-radius: 30px; - padding-left: 20px; - padding-right: 50px; + padding-left: 5px; + padding-right: 45px; margin-right: -40px; } :local(.panel.right) { border-bottom-right-radius: 30px; border-top-right-radius: 30px; - padding-right: 20px; - padding-left: 50px; + padding-right: 5px; + padding-left: 45px; margin-left: -40px; } -:local(.modeButton) { - width: 80px; - height: 80px; - display: flex; - align-items: center; - justify-content: center; - z-index: 10; - border-radius: 50%; - border: 2px solid white; - cursor: pointer; -} - -:local(.modeButton.frozen) { - border-color: red; -} - -:local(.panel) { - display: flex; - justify-content: space-around; - align-items: center; - padding: 10px; - background-color: rgba(#4F4F4F, 0.45); -} - - -:local(.nametag) { - display: flex; - justify-content: center; - font-size: 32px; - font-family: sans-serif; - color: white; - margin: 0 10px 0 0; -} - -:local(.avatar) { - width: 80px; - height: 80px; - background-size: 100%; - background-image: url(../hud/avatar.png); -} -:local(.mic) { - display: flex; - width: 32px; - height: 32px; - -webkit-mask: url(../hud/unmuted.png); - -webkit-mask-size: 32px; - mask: url(../hud/unmuted.png); - mask-size: 32px; - background-color: white; - cursor: pointer; -} - -:local(.mic:hover) { - background-color: cyan; -} - -:local(.mic.muted:hover) { - background-color: cyan; -} - -:local(.mic:active) { - background-color: red; -} - -:local(.mic.muted) { - -webkit-mask: url(../hud/muted.png); - -webkit-mask-size: 32px; - mask: url(../hud/muted.png); - mask-size: 32px; -} - -:local(.mic.muted:active) { - background-color: green; -} - :local(.iconButton) { - width: 32px; - height: 32px; + width: 40px; + height: 40px; background-size: 100%; cursor: pointer; }