From 85cd7056b7f2ee0ad209d6610c0369ff91e5220b Mon Sep 17 00:00:00 2001 From: steveseguin Date: Thu, 2 Mar 2023 11:19:55 -0500 Subject: [PATCH] undo; :P --- main.css | 2526 +++++++++++++++++++----------------------------------- 1 file changed, 864 insertions(+), 1662 deletions(-) diff --git a/main.css b/main.css index 81c8c37..2407b39 100644 --- a/main.css +++ b/main.css @@ -17,9 +17,9 @@ --video-border-color: #0000; --video-rounded: 0px; --button-radius: 2px; - --myvideo-max-width: min(800px, 100vw); - --myvideo-width: unset; - --myvideo-height: auto; + --myvideo-max-width: min(800px,100vw); + --myvideo-width:unset; + --myvideo-height:auto; --myvideo-background: #FFF1; --video-background-image: url("data:image/svg+xml,%3Csvg viewBox='-42 0 512 512.002' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m210.351562 246.632812c33.882813 0 63.222657-12.152343 87.195313-36.128906 23.972656-23.972656 36.125-53.304687 36.125-87.191406 0-33.875-12.152344-63.210938-36.128906-87.191406-23.976563-23.96875-53.3125-36.121094-87.191407-36.121094-33.886718 0-63.21875 12.152344-87.191406 36.125s-36.128906 53.308594-36.128906 87.1875c0 33.886719 12.15625 63.222656 36.132812 87.195312 23.976563 23.96875 53.3125 36.125 87.1875 36.125zm0 0'/%3E%3Cpath d='m426.128906 393.703125c-.691406-9.976563-2.089844-20.859375-4.148437-32.351563-2.078125-11.578124-4.753907-22.523437-7.957031-32.527343-3.308594-10.339844-7.808594-20.550781-13.371094-30.335938-5.773438-10.15625-12.554688-19-20.164063-26.277343-7.957031-7.613282-17.699219-13.734376-28.964843-18.199219-11.226563-4.441407-23.667969-6.691407-36.976563-6.691407-5.226563 0-10.28125 2.144532-20.042969 8.5-6.007812 3.917969-13.035156 8.449219-20.878906 13.460938-6.707031 4.273438-15.792969 8.277344-27.015625 11.902344-10.949219 3.542968-22.066406 5.339844-33.039063 5.339844-10.972656 0-22.085937-1.796876-33.046874-5.339844-11.210938-3.621094-20.296876-7.625-26.996094-11.898438-7.769532-4.964844-14.800782-9.496094-20.898438-13.46875-9.75-6.355468-14.808594-8.5-20.035156-8.5-13.3125 0-25.75 2.253906-36.972656 6.699219-11.257813 4.457031-21.003906 10.578125-28.96875 18.199219-7.605469 7.28125-14.390625 16.121094-20.15625 26.273437-5.558594 9.785157-10.058594 19.992188-13.371094 30.339844-3.199219 10.003906-5.875 20.945313-7.953125 32.523437-2.058594 11.476563-3.457031 22.363282-4.148437 32.363282-.679688 9.796875-1.023438 19.964844-1.023438 30.234375 0 26.726562 8.496094 48.363281 25.25 64.320312 16.546875 15.746094 38.441406 23.734375 65.066406 23.734375h246.53125c26.625 0 48.511719-7.984375 65.0625-23.734375 16.757813-15.945312 25.253906-37.585937 25.253906-64.324219-.003906-10.316406-.351562-20.492187-1.035156-30.242187zm0 0'/%3E%3C/svg%3E"); --background-main-image: unset; @@ -28,7 +28,6 @@ --color-mode: light; --video-background-image-size: auto 30%; } - @media (prefers-color-scheme: dark) { :root { --color-mode: dark; @@ -47,47 +46,46 @@ color: #FFF; } -button:hover, -[role="button"]:not(.column):hover { +button:hover,[role="button"]:not(.column):hover{ filter: brightness(90%); } table { display: inline-block; - padding: 10px; - margin: 10px; + padding:10px; + margin:10px; } -#audioSource3 { +#audioSource3{ background-color: #FFF; } -.promptModalLabel { +.promptModalLabel{ cursor: pointer; font-weight: normal; font-size: 1.0em; - display: block; + display:block; margin: 17px 20px 15px 20px; } #bigPlayButton { - margin: 0 auto; + margin:0 auto; background-color: #0000; - cursor: pointer; + cursor:pointer; font-family: Cousine, monospace; font-size: 4em; line-height: 1.5em; letter-spacing: 0.0em; - text-shadow: 0.05em 0.05em 0px rgba(0, 0, 0, 1); - width: 100%; - height: 100vh; + text-shadow: 0.05em 0.05em 0px rgba(0,0,0,1); + width:100%; + height:100vh; z-index: 1; vertical-align: top; text-align: center; top: 0; position: fixed; overflow-wrap: anywhere; - padding: 3%; + padding:3%; } .playButton { @@ -113,24 +111,20 @@ table { position: unset; position: static; } - .paused { cursor: pointer; } tr { - padding: 4px; + padding:4px; } - th { - padding: 4px; + padding:4px; } - .preSelectButton { margin: 4px 0 4px 8px; - padding: 1px 4px; + padding: 1px 4px; } - .meter { display: inline-block; width: 0px; @@ -138,7 +132,6 @@ th { background: green; transition: all 100ms linear; } - .meter2 { display: inline-block; width: 0px; @@ -146,7 +139,6 @@ th { background: yellow; transition: all 50ms linear; } - .meter3 { display: inline-block; width: 0px; @@ -154,16 +146,14 @@ th { background: red; transition: all 25ms linear; } - .meter4 { display: inline-block; width: 2px; height: 10px; background: black; - position: relative; - float: left; + position:relative; + float:left; } - #mynetwork { width: 600px; height: 400px; @@ -175,21 +165,17 @@ th { direction: rtl; user-select: none; } - a { -webkit-app-region: no-drag; } - a:link { text-decoration: none; color: #B9DFF9; } - a:visited { text-decoration: none; color: #99BFD9; } - a:hover { color: #048AE8; } @@ -220,8 +206,7 @@ button.hint { box-shadow: inset 0px 0px 25px #0004; } -#miniPerformer>video, -#miniPerformer>canvas { +#miniPerformer > video, #miniPerformer > canvas{ width: 80px; height: 45px; margin: 5px; @@ -229,7 +214,7 @@ button.hint { background-size: 50%; } -#reportbutton { +#reportbutton{ visibility: hidden; } @@ -240,7 +225,6 @@ button.hint { .red2 { background-color: #840000 !important; } - .blue { background-color: #000084 !important; } @@ -293,12 +277,10 @@ button.white:active { color: white; border: 1px solid black; } - -#meshcastMenu { +#meshcastMenu{ display: inline-block; - color: #e0dfdf; + color: #e0dfdf; } - #header { width: 100%; padding: 1px; @@ -306,35 +288,30 @@ button.white:active { color: #FFF; -webkit-app-region: drag; } - -#head1 { - display: inline-block; - padding: 1px; - position: relative; +#head1{ + display: inline-block; + padding:1px; + position: relative; -webkit-app-region: no-drag; } - -.randomRoomName { +.randomRoomName{ width: 20px; height: 20px; background-size: contain; background-repeat: no-repeat; border-radius: 5px; - background: rgb(238, 238, 238); - background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 29 29'%3E%3Cpath d='M18 9v-3c-1 0-3.308-.188-4.506 2.216l-4.218 8.461c-1.015 2.036-3.094 3.323-5.37 3.323h-3.906v-2h3.906c1.517 0 2.903-.858 3.58-2.216l4.218-8.461c1.356-2.721 3.674-3.323 6.296-3.323v-3l6 4-6 4zm-9.463 1.324l1.117-2.242c-1.235-2.479-2.899-4.082-5.748-4.082h-3.906v2h3.906c2.872 0 3.644 2.343 4.631 4.324zm15.463 8.676l-6-4v3c-3.78 0-4.019-1.238-5.556-4.322l-1.118 2.241c1.021 2.049 2.1 4.081 6.674 4.081v3l6-4z'/%3E%3C/svg%3E"), linear-gradient(135deg, rgba(238, 238, 238, 1) 0%, rgba(204, 204, 204, 1) 100%); + background: rgb(238,238,238); + background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 29 29'%3E%3Cpath d='M18 9v-3c-1 0-3.308-.188-4.506 2.216l-4.218 8.461c-1.015 2.036-3.094 3.323-5.37 3.323h-3.906v-2h3.906c1.517 0 2.903-.858 3.58-2.216l4.218-8.461c1.356-2.721 3.674-3.323 6.296-3.323v-3l6 4-6 4zm-9.463 1.324l1.117-2.242c-1.235-2.479-2.899-4.082-5.748-4.082h-3.906v2h3.906c2.872 0 3.644 2.343 4.631 4.324zm15.463 8.676l-6-4v3c-3.78 0-4.019-1.238-5.556-4.322l-1.118 2.241c1.021 2.049 2.1 4.081 6.674 4.081v3l6-4z'/%3E%3C/svg%3E"), linear-gradient(135deg, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); position: absolute; - margin: 6px; + margin: 6px; } - -.randomRoomName:active { +.randomRoomName:active{ animation: shake 0.2s; animation-iteration-count: once; } - -.randomRoomName:hover { +.randomRoomName:hover{ -webkit-box-shadow: 0px 0px 4px #000; } - #head5 { -webkit-app-region: no-drag; display: inline-block; @@ -345,10 +322,9 @@ button.white:active { cursor: help; float: right; font-size: 90%; - line-height: 100%; - margin-top: 2px; + line-height:100%; + margin-top:2px; } - #head6 { display: inline-block; text-decoration: none; @@ -368,8 +344,7 @@ button.white:active { pointer-events: none; font-weight: 700; } - -#overlayClockContainer { +#overlayClockContainer{ margin: 0 auto; background-color: #0000; color: white; @@ -380,60 +355,51 @@ button.white:active { z-index: 6; vertical-align: top; text-align: right; - right: 0; - bottom: 0; + right:0; + bottom:0; position: fixed; overflow-wrap: anywhere; cursor: pointer; user-select: none; } - #overlayClockContainer.top { - top: 0%; - bottom: unset; + top:0%; + bottom:unset; } - #overlayClockContainer.vmiddle { - bottom: 48%; - top: unset; + bottom:48%; + top:unset; } - #overlayClockContainer.bottom { - bottom: 0%; - top: unset; + bottom:0%; + top:unset; } - #overlayClockContainer.left { - right: unset; - left: 0; + right:unset; + left:0; } - #overlayClockContainer.hmiddle { - right: 45%; - left: unset; + right:45%; + left:unset; } - #overlayClockContainer.right { - right: 0; - left: unset; + right:0; + left:unset; } -#overlayClock { - padding: 2px 20px; - background-color: #0009; +#overlayClock{ + padding:2px 20px; + background-color: #0009; } - #overlayClock video { width: calc(22vh + 22vw / 2); max-width: 100%; - max-height: 25%; + max-height:25%; } - -#overlayClock:empty { - display: none; +#overlayClock:empty{ + display:none; } - -#overlayClockContainer2 { +#overlayClockContainer2{ margin: 0 auto; background-color: #0000; color: white; @@ -445,116 +411,105 @@ button.white:active { vertical-align: top; text-align: right; position: fixed; - right: 0; - bottom: 0; + right:0; + bottom:0; overflow-wrap: anywhere; cursor: pointer; user-select: none; } - #overlayClockContainer2.top { - top: 0%; - bottom: unset; + top:0%; + bottom:unset; } - #overlayClockContainer2.vmiddle { - bottom: 48%; - top: unset; + bottom:48%; + top:unset; } - #overlayClockContainer2.bottom { - bottom: 0%; - top: unset; + bottom:0%; + top:unset; } - #overlayClockContainer2.left { - right: unset; - left: 0; + right:unset; + left:0; } - #overlayClockContainer2.hmiddle { - right: 45%; - left: unset; + right:45%; + left:unset; } - #overlayClockContainer2.right { - right: 0; - left: unset; + right:0; + left:unset; } -#overlayClock2 { - padding: 0 5px; +#overlayClock2{ + padding:0 5px; background-color: #0009; } - -#overlayClock2:empty { - display: none; +#overlayClock2:empty{ + display:none; } - -#stickyMsgs { - margin: 0 auto; +#stickyMsgs{ + margin:0 auto; background-color: #0000; color: white; font-family: Cousine, monospace; font-size: 6vh; line-height: 8vh; letter-spacing: 0.0em; - text-shadow: 0.05em 0.05em 0px rgba(0, 0, 0, 1); - width: 100%; + text-shadow: 0.05em 0.05em 0px rgba(0,0,0,1); + width:100%; z-index: 7; vertical-align: top; text-align: center; position: fixed; overflow-wrap: anywhere; - padding: 2% 3%; -} - -. .avatarSelection { + padding:2% 3%; +}. +.avatarSelection{ vertical-align: top; - margin: 10px 0; - width: 130px; - display: inline-block; - margin: 0 1px; + margin: 10px 0; + width:130px; + display:inline-block; + margin:0 1px; text-align: center; - cursor: pointer; + cursor:pointer; +} +.overlayCloseBtn{ + padding: 0; + margin: 10px; + width: 16px; + height: 16px; + position: relative; + bottom: 10px; + background-color: #DDDD; } -.overlayCloseBtn { - padding: 0; - margin: 10px; - width: 16px; - height: 16px; - position: relative; - bottom: 10px; - background-color: #DDDD; -} - -#overlayMsgs { - margin: 0 auto; +#overlayMsgs{ + margin:0 auto; background-color: #0000; color: white; font-family: Cousine, monospace; font-size: 6vh; line-height: 8vh; letter-spacing: 0.0em; - text-shadow: 0.05em 0.05em 0px rgba(0, 0, 0, 1); - width: 100%; - height: 100vh; + text-shadow: 0.05em 0.05em 0px rgba(0,0,0,1); + width:100%; + height:100vh; z-index: 7; vertical-align: top; text-align: center; position: fixed; overflow-wrap: anywhere; - padding: 2% 3%; + padding:2% 3%; pointer-events: none } - -#overlayMsgs span { +#overlayMsgs span{ background-color: #000B; padding: 2px; margin: 0.5vh; text-align: center; - width: 100%; + width:100%; pointer-events: none } @@ -565,7 +520,7 @@ button.white:active { right: 0; z-index: -1; font-size: 80%; - margin-right: 100px; + margin-right:100px; } .credits>a { @@ -577,6 +532,7 @@ button.white:active { } + body.darktheme .credits { color: #707a93; } @@ -633,8 +589,8 @@ body.darktheme .credits>a:visited { .advDirectGuestSettings { padding: 10px 5px; - max-height: 400px; - overflow-y: auto; + max-height: 400px; + overflow-y: auto; } .darktheme .advDirectGuestSettings label { @@ -655,7 +611,6 @@ body.darktheme .credits>a:visited { text-align: center; margin-top: 10px; } - #mainmenu .row:after { content: ""; display: table; @@ -691,8 +646,7 @@ hr { border-radius: var(--video-rounded); } -#gridlayout, -#directorlayout { +#gridlayout,#directorlayout { padding: 0; width: 100%; height: 100%; @@ -705,11 +659,9 @@ hr { border: 0; margin: 0; } - -#gridlayout { - z-index: -1; +#gridlayout{ + z-index:-1; } - .invite_setting_group { margin: 20px 0px; background-color: #d2d2d2; @@ -724,8 +676,7 @@ hr { margin: 10px 0px; } -.invite_setting_item>input[type="text"], -.invite_setting_item>select { +.invite_setting_item > input[type="text"], .invite_setting_item > select{ padding: 6px; } @@ -739,7 +690,7 @@ hr { .directorsgrid .vidcon video { margin: 0 5px; - padding: 0; + padding:0; width: 100%; height: 148px; max-width: 260px; @@ -768,13 +719,11 @@ hr { background: #999999; width: 90%; } - -#activeShares>div { +#activeShares>div{ font-weight: normal; font-size: 12px; margin: 10px 0 0 0; } - .puslate { border-radius: 50%; box-shadow: 0 0 0 0 rgba(14, 19, 26, 1); @@ -784,68 +733,57 @@ hr { .minimized { float: left; - position: absolute; - bottom: 0; - height: 24px; - overflow: hidden; + position: absolute; + bottom: 0; + height: 24px; + overflow:hidden; box-shadow: inset -1px 1px white } .minimized:nth-child(1) { - left: 0px; - z-index: 10; + left:0px; + z-index:10; } - .minimized:nth-child(2) { - left: max(100px, calc(10% - 260px)); - z-index: 9; + left:max(100px, calc(10% - 260px)); + z-index:9; } - .minimized:nth-child(3) { - left: max(200px, calc(20% - 260px)); - z-index: 8; + left:max(200px, calc(20% - 260px)); + z-index:8; } - .minimized:nth-child(4) { - left: max(250px, calc(30% - 260px)); - z-index: 7; + left:max(250px, calc(30% - 260px)); + z-index:7; } - .minimized:nth-child(5) { - left: max(300px, calc(40% - 260px)); - z-index: 6; + left:max(300px, calc(40% - 260px)); + z-index:6; } - .minimized:nth-child(6) { - left: max(450px, calc(50% - 260px)); - z-index: 5; + left:max(450px, calc(50% - 260px)); + z-index:5; } - .minimized:nth-child(7) { - left: max(500px, calc(60% - 260px)); - z-index: 4; + left:max(500px, calc(60% - 260px)); + z-index:4; } - .minimized:nth-child(8) { - left: max(650px, calc(70% - 260px)); - z-index: 3; + left:max(650px, calc(70% - 260px)); + z-index:3; } - .minimized:nth-child(9) { - left: max(700px, calc(80% - 260px)); - z-index: 2; + left:max(700px, calc(80% - 260px)); + z-index:2; } - .minimized:nth-child(10) { - left: max(850px, calc(90% - 260px)); - z-index: 1; + left:max(850px, calc(90% - 260px)); + z-index:1; } - .minimized:nth-child(11) { - left: max(900px, calc(100% - 260px)); - z-index: 0; + left:max(900px, calc(100% - 260px)); + z-index:0; } - .battery { border: 3px solid #4192c5; width: 11px; @@ -858,10 +796,10 @@ hr { font-size: 1.5em; z-index: 2; cursor: help; - display: none; + display:none; } -.battery-charging { +.battery-charging{ margin: 0; left: -1px; padding: 0; @@ -870,20 +808,17 @@ hr { display: none; } -.battery[data-plugged="1"]>.battery-charging { - display: block; +.battery[data-plugged="1"] > .battery-charging { + display:block; } - .battery.warn { border: 3px solid #EFAF13; } - .battery.alert { border: 3px solid #e81309; } - .battery-level { - background: #30b455; + background: #30b455; position: absolute; bottom: 0px; right: 0; @@ -893,75 +828,60 @@ hr { padding: 0; } -.hasMedia>.battery { - display: block; +.hasMedia > .battery { + display:block; } - .slotsbar { border-radius: 6px; margin: 3.8px 3.8px 0 3.8px; padding: 0 6px; box-shadow: 0 0 1px #111; - cursor: grab; + cursor:grab; color: white; text-shadow: 0 0 1px black; text-align: center; } - -.slotsbar>button { +.slotsbar>button{ margin: 0; padding: 0 10px; } - .slotsbar:active { - cursor: grabbing; + cursor:grabbing; } - [data-slot='0'] { background: linear-gradient(145deg, #dadada, #b8b8b8); } - [data-slot='1'] { background-color: #00AAAA } - [data-slot='2'] { background-color: #FF0000 } - [data-slot='3'] { background-color: #0000FF } - [data-slot='4'] { background-color: #AA00AA } - [data-slot='5'] { background-color: #00FF00 } - [data-slot='6'] { background-color: #AAAA00 } - [data-slot='7'] { background-color: #AACC44 } - [data-slot='8'] { background-color: #CCAA44 } - [data-slot='9'] { background-color: #CC44AA } - [data-slot='10'] { background-color: #44AACC } - -#slotpicker { +#slotpicker{ box-shadow: 0 0 1px #908080; width: 180px; margin: 3px; @@ -976,18 +896,16 @@ hr { border: 1px solid black; outline: 6px solid #444; } - -#slotPicker>[data-slot] { +#slotPicker > [data-slot]{ margin: 2px; width: 50px; height: 34px; border-radius: 3px; display: inline-block; cursor: pointer; - font-size: 12px; + font-size:12px; } - -.rem-con-count { +.rem-con-count{ position: absolute; left: 49px; top: 0px; @@ -999,8 +917,7 @@ hr { border-radius: 4px; padding: 1px 4px 1px 0px; } - -.signal-meter { +.signal-meter{ width: 22px; height: 22px; position: absolute; @@ -1011,54 +928,42 @@ hr { z-index: 2; cursor: help; } - -.hasMedia>.signal-meter { - display: block; +.hasMedia > .signal-meter { + display:block; } - .signal-meter[data-cpu="0"]>.la-signal { - display: block; + display:block; } - .signal-meter[data-cpu="0"]>.la-fire-alt { - display: none; + display:none; } - .signal-meter[data-cpu="1"]>.la-signal { - display: none; + display:none; } - .signal-meter[data-cpu="1"]>.la-fire-alt { - display: block; + display:block; } - .signal-meter[data-cpu="1"] { - display: block !important; + display:block!important; } - .signal-meter[data-level="0"] { - color: #000F; - display: none; + color:#000F; + display:none; } - .signal-meter[data-level="1"] { - color: #FF1B01; + color:#FF1B01; } - .signal-meter[data-level="2"] { - color: #FF8D01; + color:#FF8D01; } - .signal-meter[data-level="3"] { - color: #FFD201; + color:#FFD201; } - .signal-meter[data-level="4"] { - color: #C6FF01; + color:#C6FF01; } - .signal-meter[data-level="5"] { - color: #00FF00; + color:#00FF00; } .volume-control { @@ -1072,10 +977,10 @@ hr { padding: 18px 5% !important; background: #555A; border-radius: 0 !important; - margin: 0 !important; + margin: 0!important; } -.togglePreview { +.togglePreview{ border-radius: 11px; background-color: #00000044; top: calc(19px + 2vh); @@ -1087,31 +992,27 @@ hr { position: absolute; color: white; font-size: 22px; - z-Index: 35; + z-Index:35; height: 22px; } - -.togglePreview>.la-eye-slash { - display: block; +.togglePreview > .la-eye-slash{ + display:block; } -.togglePreview>.la-eye { - display: none; +.togglePreview > .la-eye{ + display:none; } - -.togglePreview.blinded>.la-eye-slash { - display: none !important; +.togglePreview.blinded > .la-eye-slash{ + display:none!important; } - -.togglePreview.blinded>.la-eye { - display: block !important; +.togglePreview.blinded > .la-eye{ + display:block!important; } - -.rounded { +.rounded{ border-radius: 5px; } -.mirror { +.mirror{ transform: scaleX(-1); } @@ -1127,7 +1028,6 @@ hr { height: 11px; margin: 0; } - .queueNotification { position: relative; top: -40px; @@ -1155,7 +1055,7 @@ button.glyphicon-button.active.focus { -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important; -webkit-tap-highlight-color: transparent !important; outline: 0px !important; - height: 100%; + height:100%; animation: fadeIn 0.2s; background-size: cover; background-image: var(--background-main-image); @@ -1163,14 +1063,14 @@ button.glyphicon-button.active.focus { background-attachment: fixed; background-position: center; overflow-x: hidden; - position: absolute; - z-index: 0; + position: absolute; + z-index: 0; } .row { - align-content: center; - text-align: center; - margin-top: 10px; + align-content: center; + text-align: center; + margin-top: 10px; } #controlButtons { @@ -1185,7 +1085,6 @@ button.glyphicon-button.active.focus { pointer-events: none; display: flex; } - #controlButtons:empty { display: none; } @@ -1198,21 +1097,20 @@ button.glyphicon-button.active.focus { position: absolute; pointer-events: auto; } - -#subControlButtons:empty { - display: none; +#subControlButtons:empty{ + display:none; } #container.vidcon { - height: 100%; + height:100%; } .nocontrolbar #container.vidcon { - height: 100% !important; + height:100%!important; } .labelSmall { - display: none; + display:none; } .gobutton { @@ -1223,53 +1121,51 @@ button.glyphicon-button.active.focus { background-color: #99BFD9; color: black; font-weight: bold; - + } -@media only screen and (max-width: 640px) { +@media only screen and (max-width: 640px){ #subControlButtons { transform: scale(0.9) translateY(10%); } - + .labelSmall { - display: inherit; - padding: 5px; + display:inherit; + padding:5px; } - + .labelLarge { - display: none !important; + display:none!important; } - - .gobutton { + + .gobutton{ width: 100vh; margin-left: 10px; margin-right: 10px; max-width: 87%; } - - .roomnotes { - display: none !important; + + .roomnotes{ + display:none!important; } - + #head5 { margin-right: 1px; } } - -@media only screen and (max-width: 400px) { +@media only screen and (max-width: 400px){ #subControlButtons { transform: scale(0.8) translateY(20%); } } - -@media only screen and (max-width: 300px) { +@media only screen and (max-width: 300px){ #subControlButtons { padding: 0px; } - + } -.orange { +.orange{ background-color: #8d5e1a } @@ -1279,210 +1175,148 @@ button.glyphicon-button.active.focus { } @keyframes shake { - 0% { - transform: translate(1px, 1px) rotate(0deg); - } - - 10% { - transform: translate(-1px, -2px) rotate(-1deg); - } - - 20% { - transform: translate(-3px, 0px) rotate(1deg); - } - - 30% { - transform: translate(3px, 2px) rotate(0deg); - } - - 40% { - transform: translate(1px, -1px) rotate(1deg); - } - - 50% { - transform: translate(-1px, 2px) rotate(-1deg); - } - - 60% { - transform: translate(-3px, 1px) rotate(0deg); - } - - 70% { - transform: translate(3px, 1px) rotate(-1deg); - } - - 80% { - transform: translate(-1px, -1px) rotate(1deg); - } - - 90% { - transform: translate(1px, 2px) rotate(0deg); - } - - 100% { - transform: translate(1px, -2px) rotate(-1deg); - } + 0% { transform: translate(1px, 1px) rotate(0deg); } + 10% { transform: translate(-1px, -2px) rotate(-1deg); } + 20% { transform: translate(-3px, 0px) rotate(1deg); } + 30% { transform: translate(3px, 2px) rotate(0deg); } + 40% { transform: translate(1px, -1px) rotate(1deg); } + 50% { transform: translate(-1px, 2px) rotate(-1deg); } + 60% { transform: translate(-3px, 1px) rotate(0deg); } + 70% { transform: translate(3px, 1px) rotate(-1deg); } + 80% { transform: translate(-1px, -1px) rotate(1deg); } + 90% { transform: translate(1px, 2px) rotate(0deg); } + 100% { transform: translate(1px, -2px) rotate(-1deg); } } -button.btnArmTransferRoom { - width: auto; + +button.btnArmTransferRoom{ + width:auto; margin-left: 2px; - height: 38px; + height:38px; border-radius: 15px; } - -button.btnArmTransferRoom i { - margin-right: 3px; +button.btnArmTransferRoom i{ + margin-right:3px; } - -button.btnArmTransferRoom:hover { +button.btnArmTransferRoom:hover{ background-color: var(--green-accent); } -button.btnArmTransferRoom.selected { +button.btnArmTransferRoom.selected{ background-color: #840000; } -@media only screen and (max-height: 540px) { +@media only screen and (max-height: 540px){ #subControlButtons { transform: scale(0.88); } - #gridlayout>#container.vidcon { - height: 88% + height:88% } - #controlButtons { - height: 54px; + height:54px; } - #copythisurl { - font-size: 80%; + font-size:80%; } } - -@media only screen and (max-height: 500px) { +@media only screen and (max-height: 500px){ #subControlButtons { transform: scale(0.87); } - #gridlayout>#container.vidcon { - height: 87% + height:87% } - #controlButtons { - height: 54px; + height:54px; } } - -@media only screen and (max-height: 400px) { +@media only screen and (max-height: 400px){ #subControlButtons { transform: scale(0.85); } - - #logoname { - display: none; + #logoname{ + display:none; } - - #head4 { - display: none; + #head4{ + display:none; } - - #head2 { - display: none; + #head2{ + display:none; } - #gridlayout>#container.vidcon { - height: 85% + height:85% } - #controlButtons { - height: 50px; + height:50px; } - - #header { - min-height: 0px; + #header{ + min-height:0px; } } - -@media only screen and (max-height: 300px) { +@media only screen and (max-height: 300px){ #gridlayout>#container.vidcon { - height: 81% + height:81% } - #subControlButtons { transform: scale(0.81); } - #controlButtons { - height: 46.2px; + height:46.2px; } - #head2 { - display: none !important; + display:none !important; } - + } - -@media only screen and (max-height: 240px) { +@media only screen and (max-height: 240px){ #gridlayout>#container.vidcon { - height: 78% + height:78% } - #subControlButtons { transform: scale(0.77); } - #controlButtons { - height: 46.2px; + height:46.2px; } } - -@media only screen and (max-height: 190px) { +@media only screen and (max-height: 190px){ #gridlayout>#container.vidcon { - height: 75% + height:75% } - #subControlButtons { transform: scale(0.73); } - #controlButtons { - height: 42px + height:42px } } - -@media only screen and (max-height: 160px) { +@media only screen and (max-height: 160px){ #gridlayout>#container.vidcon { - height: 70% + height:70% } - #subControlButtons { transform: scale(0.65); } - #controlButtons { - height: 38px + height:38px } } - -@media only screen and (max-height: 120px) { +@media only screen and (max-height: 120px){ #gridlayout>#container.vidcon { - height: 70% + height:70% } - #subControlButtons { transform: scale(0.52); } - #controlButtons { - height: 30px + height:30px } } -#header:empty { - display: none; +#header:empty{ + display:none; } @keyframes pulse { @@ -1490,22 +1324,18 @@ button.btnArmTransferRoom.selected { transform: scale(1); box-shadow: 0 0 0 0 rgba(14, 19, 26, 0.7); } - 15% { transform: scale(1.2); box-shadow: 0 0 0 10px rgba(2, 3, 4, 0); } - 50% { transform: scale(1.0); box-shadow: 0 0 0 0 rgba(14, 19, 26, 0); } - 85% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(14, 19, 26, 0); } - 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(14, 19, 26, 0); @@ -1513,24 +1343,19 @@ button.btnArmTransferRoom.selected { } .la-sliders-h { - cursor: pointer; + cursor:pointer; } .la-sliders-h { - cursor: pointer; + cursor:pointer; } select { - cursor: pointer; + cursor:pointer; } -input[type='checkbox'] { - cursor: pointer; -} - -input[type='radio'] { - cursor: pointer; -} +input[type='checkbox'] { cursor:pointer; } +input[type='radio'] { cursor:pointer; } .icn-spinner { animation: spin-animation 3s infinite; @@ -1553,8 +1378,7 @@ input[type='radio'] { margin: 44vh auto; cursor: help; } - -#retryimage { +#retryimage{ display: block; margin: auto; max-width: 100%; @@ -1564,8 +1388,7 @@ input[type='radio'] { animation: fadeIn 2s; object-fit: contain; } - -#retrymessage { +#retrymessage{ display: block; margin: 80vh auto; animation: fadeIn 2s; @@ -1584,7 +1407,6 @@ input[type='radio'] { 0% { transform: rotate(0deg); } - 100% { transform: rotate(359deg); } @@ -1617,10 +1439,9 @@ body { margin: 0; opacity: 1; transition: opacity .1s linear; - scrollbar-color: #666 #201c29; + scrollbar-color:#666 #201c29; } - -body.darktheme { +body.darktheme{ background-color: var(--dark-background-color); } @@ -1644,18 +1465,18 @@ body.darktheme { max-width: 640px; max-width: 83vw; height: 30vh; - opacity: 1; + opacity:1; animation: fadeIn 0.2s; } -#getPermissions { +#getPermissions{ font-size: 110%; border: 3px solid #99A; cursor: pointer; background-color: #cce0ff; margin: 20px; padding: 10px 50px; - text-align: center; + text-align:center; } .gowebcam { @@ -1666,53 +1487,35 @@ body.darktheme { margin: 20px; padding: 10px 50px; } - @-webkit-keyframes pulsate { - 0% { - box-shadow: 0 0 31px #244e1c44; - transform: scale(1.0); - } - - 50% { - box-shadow: 0 0 17px #0004; - transform: scale(0.99); - } - - 100% { - box-shadow: 0 0 31px #244e1c44; - transform: scale(1.0); - } + 0% { box-shadow: 0 0 31px #244e1c44; transform: scale(1.0);} + 50% { box-shadow: 0 0 17px #0004; transform: scale(0.99);} + 100% { box-shadow: 0 0 31px #244e1c44; transform: scale(1.0);} } - .gowebcam:enabled { background-color: #26e726 !important; background: radial-gradient(#26e726, #2EeF2E); color: black; font-weight: bold !important; box-shadow: 0 0 31px 0px #244e1c44; - animation: pulsate 2s ease-out infinite; + animation: pulsate 2s ease-out infinite; } - #mainmenu { - height: 100vh; + height:100vh; } - .mainmenuclass { display: inherit; } - -#welcomeImage { - object-fit: cover; - width: 100%; - height: 100%; - display: block; - z-index: 10; +#welcomeImage{ + object-fit:cover; + width:100%; + height:100%; + display:block; + z-index:10; } - div[data-action-type='toggle-group'] { - padding: 0 10px; + padding: 0 10px; } - .infoblob { color: white; width: 100%; @@ -1737,34 +1540,33 @@ div[data-action-type='toggle-group'] { -webkit-app-region: no-drag; } -select { +select{ -webkit-app-region: no-drag; } - .advancedToggle { - display: none; - background-color: #EFEFEF; - padding: 10px 12px 12px 8px; + display:none; + background-color:#EFEFEF; + padding:10px 12px 12px 8px; margin: 0px 0px 0px 10px; } .highlight { - background-color: #ddeeff; + background-color:#ddeeff; } .green { - background-color: #474 !important; + background-color:#474!important; } -#effectSelector { + +#effectSelector{ display: inline-block; vertical-align: middle; font-size: 100%; max-width: 260px; } - -#effectSelector3 { +#effectSelector3{ background-color: #FFF; display: inline-block; vertical-align: middle; @@ -1780,11 +1582,9 @@ input[type=range] { margin: 18px 0; width: 100%; } - input[type=range]:focus { outline: none; } - input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 8.4px; @@ -1794,7 +1594,6 @@ input[type=range]::-webkit-slider-runnable-track { border-radius: 1.3px; border: 0.2px solid #010101; } - input[type=range]::-webkit-slider-thumb { box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; border: 1px solid #000000; @@ -1806,11 +1605,9 @@ input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; margin-top: -11px; } - input[type=range]:focus::-webkit-slider-runnable-track { background: #367ebd; } - input[type=range]::-moz-range-track { width: 100%; height: 8.4px; @@ -1820,7 +1617,6 @@ input[type=range]::-moz-range-track { border-radius: 1.3px; border: 0.2px solid #010101; } - input[type=range]::-moz-range-thumb { box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; border: 1px solid #000000; @@ -1830,7 +1626,6 @@ input[type=range]::-moz-range-thumb { background: #ffffff; cursor: pointer; } - input[type=range]::-ms-track { width: 100%; height: 8.4px; @@ -1840,21 +1635,18 @@ input[type=range]::-ms-track { border-width: 16px 0; color: transparent; } - input[type=range]::-ms-fill-lower { background: #2a6495; border: 0.2px solid #010101; border-radius: 2.6px; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; } - input[type=range]::-ms-fill-upper { background: #3071a9; border: 0.2px solid #010101; border-radius: 2.6px; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; } - input[type=range]::-ms-thumb { box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; border: 1px solid #000000; @@ -1864,25 +1656,22 @@ input[type=range]::-ms-thumb { background: #ffffff; cursor: pointer; } - input[type=range]:focus::-ms-fill-lower { background: #3071a9; } - input[type=range]:focus::-ms-fill-upper { background: #367ebd; } -.popupSelector_constraints { - margin: 25px 9% 0 7%; +.popupSelector_constraints{ + margin:25px 9% 0 7%; } - -.popupSelector_constraints label { - color: white; +.popupSelector_constraints label{ + color:white; text-shadow: 0px 0px 6px #000000FF; font-weight: 700; - + } @@ -1890,27 +1679,22 @@ input[type=range]:focus::-ms-fill-upper { body { font-size: 0.9em; } - .gowebcam { padding: 5px; margin: 5px; } - .infoblob { color: white; width: 100%; padding: 20px; max-width: 1280px; } - #qrcode img { max-height: 150px; } - .outer { width: 50px; } - .close { top: 0px; right: 0px; @@ -1919,130 +1703,102 @@ input[type=range]:focus::-ms-fill-upper { @media only screen and (max-width: 1220px) { - #fakeguest4 { - display: none !important; + #fakeguest4{ + display: none!important; } - - #fakeguestinfo { - display: none !important; + #fakeguestinfo{ + display: none!important; } } - @media only screen and (max-width: 933px) { - #fakeguest3 { - display: none !important; + #fakeguest3{ + display: none!important; } } - @media only screen and (max-width: 641px) { - #fakeguest2 { - display: none !important; + #fakeguest2{ + display: none!important; } } - @media only screen and (max-width: 292px) { - #fakeguest1 { - display: none !important; + #fakeguest1{ + display: none!important; } } @media screen and (max-width: 768px) { - #popOutChat { + #popOutChat{ display: none; } } @media only screen and (max-width: 650px) { - + .mainmenuclass { display: inline-block; } - .outer { width: 50px; } - .close { top: 0; right: 0; } - select { height: 30px; font-size: 120%; } - #reshare { max-width: 650px !important; font-size: 96% !important; width: 300px !important; } - .fa-paperclip { display: none; } - #copythisurl { color: #DDD; display: inline-block; font-size: 75% !important; } - #logoname { font-size: 100%; } - .column { float: none !important; padding: 15px 10px 1px 10px !important; } - - div.multiselect, - .videoMenu, - #videoSettings { + div.multiselect, .videoMenu, #videoSettings { max-width: 100% !important; min-width: 100% !important; } - - #addPasswordBasic, - #headphonesDiv, - #effectsDiv, - #effectsDiv3, - #headphonesDiv3 { + #addPasswordBasic, #headphonesDiv, #effectsDiv, #effectsDiv3, #headphonesDiv3 { max-width: 100% !important; min-width: 100% !important; overflow: hidden !important; } - #outputSource { width: 100% !important; } - #outputSource3 { width: 100% !important; } - - #audioSourceScreenshare, - #videoSettings2 { + #audioSourceScreenshare, #videoSettings2 { max-width: 90% !important; min-width: 90% !important; overflow: hidden !important; } - #popupSelector { padding: 20px 5px 0px 15px !important; font-size: 92%; width: 385px !important } - - .popupSelector_constraints { - margin: 25px 15% 0 1%; + .popupSelector_constraints{ + margin:25px 15% 0 1%; } - - .mobileHide { - display: none !important; + .mobileHide{ + display:none !important; } - #effectSelector { max-width: 100%; width: 100%; @@ -2052,9 +1808,9 @@ input[type=range]:focus::-ms-fill-upper { @media only screen and (max-height: 355px) { - - .popupSelector_constraints { - margin: 20px 12% 0 2%; + + .popupSelector_constraints{ + margin:20px 12% 0 2%; } #popupSelector { @@ -2069,19 +1825,17 @@ input[type=range]:focus::-ms-fill-upper { } -#popupSelector_user_settings label { - color: white; +#popupSelector_user_settings label{ + color:white; text-shadow: 0px 0px 6px #000000FF; font-weight: 700; padding: 0 10px 0 0; } - .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } - .tooltip .tooltiptext { visibility: hidden; width: 10em; @@ -2094,30 +1848,25 @@ input[type=range]:focus::-ms-fill-upper { top: -10px; font-family: "Lato", sans-serif; } - .tooltip:hover .tooltiptext { visibility: visible; } - -#screensharebutton.float2 { +#screensharebutton.float2{ background-color: #335c3a; } - -#screenshare2button.float2 { +#screenshare2button.float2{ background-color: #335c3a; } - -#screenshare3button.float2 { +#screenshare3button.float2{ background-color: #2bf96e88; animation: pulse 5s infinite; } - #previewWebcam.miconly { - display: none; + display:none; } -.notmain>.mainonly { - display: none !important; +.notmain > .mainonly { + display:none!important; } #popupSelector { @@ -2135,7 +1884,7 @@ input[type=range]:focus::-ms-fill-upper { } #audioSourceScreenshare { - display: block; + display:block; height: 60px; width: 100%; overflow: auto; @@ -2144,7 +1893,7 @@ input[type=range]:focus::-ms-fill-upper { } -#headphonesDiv2 { +#headphonesDiv2{ background-color: #f3f3f3; min-width: 350px; display: none; @@ -2154,21 +1903,19 @@ input[type=range]:focus::-ms-fill-upper { margin: 10px 0; text-align: left; } - #audioScreenShare1 { border: 1px solid #ccc; display: inline-block; background: #f3f3f3; padding: 4px 10px 10px 10px; text-align: left; - min-width: 350px; + min-width:350px; } - -#audioScreenShare1>i { +#audioScreenShare1 > i { display: inline-block; } -#audioScreenShare1>span { +#audioScreenShare1 > span { margin: 7px 0px; text-align: left; display: inline-block; @@ -2203,11 +1950,10 @@ h2 { label { color: #000; } - -.generalButton { +.generalButton{ border-radius: 3px; - padding: 5px; - margin: 0 0 10px 0; + padding: 5px; + margin: 0 0 10px 0; } .inner:before, @@ -2248,33 +1994,27 @@ label { .outer:hover .inner:after { bottom: 0; } - -.microphoneBackground { - background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M 13 4 C 11.90625 4 11 4.90625 11 6 L 11 18 C 11 19.09375 11.90625 20 13 20 L 19 20 C 20.09375 20 21 19.09375 21 18 L 21 6 C 21 4.90625 20.09375 4 19 4 Z M 13 6 L 19 6 L 19 18 L 13 18 Z M 7 14 L 7 18 C 7 21.300781 9.699219 24 13 24 L 15 24 L 15 26 L 11 26 L 11 28 L 21 28 L 21 26 L 17 26 L 17 24 L 19 24 C 22.300781 24 25 21.300781 25 18 L 25 14 L 23 14 L 23 18 C 23 20.21875 21.21875 22 19 22 L 13 22 C 10.78125 22 9 20.21875 9 18 L 9 14 Z'/%3E%3C/svg%3E") !important; +.microphoneBackground{ + background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M 13 4 C 11.90625 4 11 4.90625 11 6 L 11 18 C 11 19.09375 11.90625 20 13 20 L 19 20 C 20.09375 20 21 19.09375 21 18 L 21 6 C 21 4.90625 20.09375 4 19 4 Z M 13 6 L 19 6 L 19 18 L 13 18 Z M 7 14 L 7 18 C 7 21.300781 9.699219 24 13 24 L 15 24 L 15 26 L 11 26 L 11 28 L 21 28 L 21 26 L 17 26 L 17 24 L 19 24 C 22.300781 24 25 21.300781 25 18 L 25 14 L 23 14 L 23 18 C 23 20.21875 21.21875 22 19 22 L 13 22 C 10.78125 22 9 20.21875 9 18 L 9 14 Z'/%3E%3C/svg%3E")!important; } -.container-inner>div, -.container-inner>span>div, -.container-inner button:not(.gowebcam), -.message-card, -.cameraTip { - border-radius: 5px; - box-shadow: 10px 8px 32px -10px #8883; +.container-inner > div, .container-inner > span > div, .container-inner button:not(.gowebcam), .message-card, .cameraTip { + border-radius: 5px; + box-shadow: 10px 8px 32px -10px #8883; } -#dropButton { +#dropButton{ font-size: 2em; display: block; margin: auto; background-color: #5555; border-radius: 30px; - cursor: pointer; + cursor:pointer; color: #636363; padding: 3px; width: 100px; } - .fullcolumn { float: left; display: inline-block; @@ -2316,51 +2056,45 @@ label { .fadeout { animation: fadeout 1s; - opacity: 0 !important; + opacity: 0!important; } - .zeroHeight { - max-height: 0 !important; - height: 0 !important; - bottom: 30px !important; + max-height:0!important; + height:0!important; + bottom:30px!important; } -.partialFadeout { +.partialFadeout{ opacity: 0.2 !important; } .greyout { animation: greyout 3s; - opacity: 0.3 !important; + opacity: 0.3!important; } - -.graphSection { - max-width: 50%; +.graphSection{ + max-width:50%; } - .graphSection>span { font-size: 10px; - display: block; - margin: 5px; - margin-top: 0px; + display: block; + margin: 5px; + margin-top: 0px; margin-right: 0px; - height: 50px; + height: 50px; } - -.graphSection>span:last-child { +.graphSection>span:last-child{ margin-bottom: 0px; } - -span[data-action-type="stats-graphs-details-container"]>span { +span[data-action-type="stats-graphs-details-container"]>span{ padding: 1px; - display: block; + display:block; } @keyframes greyout { 0% { opacity: 1 } - 100% { opacity: 0.3 } @@ -2370,7 +2104,6 @@ span[data-action-type="stats-graphs-details-container"]>span { 0% { opacity: 1 } - 100% { opacity: 0 } @@ -2385,21 +2118,18 @@ span[data-action-type="stats-graphs-details-container"]>span { margin: 1.8%; text-align: center; } - #container-1 { background-repeat: no-repeat; background-size: 80px; background-position: 50% 65%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='342.728' height='325.878' viewBox='0 0 90.68 86.222' fill='none' stroke='%23000' stroke-width='5.6' stroke-linejoin='round' stroke-dashoffset='22.7149601' xmlns:v='https://vecta.io/nano'%3E%3Cpath d='M3.15 3.15h37.378v35.24H3.15zm47.002 0H87.53v35.24H50.152zM3.15 47.832h37.378v35.24H3.15zm47.002 0H87.53v35.24H50.152z'/%3E%3C/svg%3E"); } - #container-2 { background-repeat: no-repeat; background-size: 80px; background-position: 50% 65%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='347.569' height='278.797' viewBox='0 0 91.961 73.765' fill='none' stroke='%23000' xmlns:v='https://vecta.io/nano'%3E%3Cpath d='M3.02 3.02h85.921v54.399H3.02z' stroke-width='6.04' stroke-linejoin='round' stroke-dashoffset='22.7149601'/%3E%3Cg stroke-width='6.3'%3E%3Cpath d='M35.607 70.527l21.839.071' stroke-linecap='round' paint-order='markers fill stroke'/%3E%3Cpath d='M46.404 73.517l.142-15.596' paint-order='markers fill stroke'/%3E%3C/g%3E%3C/svg%3E"); } - #container-3 { background-repeat: no-repeat; background-size: 90px; @@ -2408,14 +2138,12 @@ span[data-action-type="stats-graphs-details-container"]>span { background-position: 50% 65%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='347.184' height='187.007' viewBox='0 0 91.859 49.479' fill='none' stroke='%23000' stroke-width='5' stroke-linejoin='round' xmlns:v='https://vecta.io/nano'%3E%3Cpath d='M3.15 3.15h65.569v43.179H3.15z' stroke-dashoffset='22.7149601' paint-order='markers fill stroke'/%3E%3Cpath d='M68.919 28.837L88.709 44.73V7.148L69.019 22.341z'/%3E%3C/svg%3E"); } - #container-4 { background-repeat: no-repeat; background-size: 80px; background-position: 50% 65%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='303.594' height='274.946' viewBox='0 0 80.326 72.746' fill='none' stroke='%23000' stroke-width='4.6' stroke-linejoin='round' stroke-dashoffset='6.01000023' xmlns:v='https://vecta.io/nano'%3E%3Cpath d='M2 51.27L78.326 2l-8.03 63.359-37.093-12.414z'/%3E%3Cpath d='M33.047 70.746l.157-17.802L78.326 2 33.203 52.944l10.314 3.39z'/%3E%3C/svg%3E"); } - #container-5 { background-repeat: no-repeat; background-size: 80px; @@ -2424,7 +2152,7 @@ span[data-action-type="stats-graphs-details-container"]>span { } .controlVideoBox { - position: relative; + position:relative; } .container-inner { @@ -2432,21 +2160,18 @@ span[data-action-type="stats-graphs-details-container"]>span { background-color: rgb(221, 221, 221); max-height: 100%; min-height: 90%; - margin-bottom: 30px; + margin-bottom:30px; } - -.canvasStats { +.canvasStats{ background-color: black; width: calc(100%); height: 50px; margin: 0 5px 5px 0; } - -.canvasStats:last-child { +.canvasStats:last-child{ margin: 0 5px 0 0; } - -.manualInput { +.manualInput{ width: 55px; display: inline-block; overflow: scroll; @@ -2454,29 +2179,26 @@ span[data-action-type="stats-graphs-details-container"]>span { margin-top: 14px; margin-left: 5px; } - #add_screen { padding-bottom: 20px; } - -.soloButton { - padding: 5px; +.soloButton{ + padding:5px; word-wrap: break-word; - overflow: hidden; + overflow:hidden; white-space: nowrap; overflow: hidden; - font-size: 0.7em; + font-size:0.7em; text-overflow: ellipsis; } -.lowerRaisedHand { +.lowerRaisedHand{ margin: auto; - margin-left: 5px; + margin-left: 5px; margin-bottom: 10px; - background-color: yellow; - width: calc(100% - 10px); + background-color: yellow; + width: calc(100% - 10px); } - .float { opacity: 0.8; min-width: 45px; @@ -2487,9 +2209,8 @@ span[data-action-type="stats-graphs-details-container"]>span { text-align: center; margin: 5px; pointer-events: auto; - outline: none; + outline:none; } - .float2 { opacity: 0.8; min-width: 45px; @@ -2501,7 +2222,7 @@ span[data-action-type="stats-graphs-details-container"]>span { z-index: 10; margin: 5px; pointer-events: auto; - outline: none; + outline:none; } .rotate225 { @@ -2510,11 +2231,10 @@ span[data-action-type="stats-graphs-details-container"]>span { top: 1px; } -#previewWebcam.rotate { +#previewWebcam.rotate{ max-width: 30vh; } - -#previewWebcam.rotate { +#previewWebcam.rotate{ max-width: 30vh; } @@ -2532,18 +2252,15 @@ span[data-action-type="stats-graphs-details-container"]>span { object-fit: var(--fit-style); max-width: var(--myvideo-max-width) !important; } - #calendarButton { cursor: pointer; z-index: 1; - display: none; + display:none; } - #translateButton { cursor: pointer; z-index: 1; } - #helpButton { cursor: pointer; z-index: 1; @@ -2555,32 +2272,27 @@ iframe { @media only screen and (max-width: 390px) { #translateButton { - display: none; + display:none; } - #helpButton { - display: none; + display:none; } } -.popup .menu { - margin: 2px; -} +.popup .menu { margin: 2px; } .my-float { margin-top: 7px; opacity: 0.9; } - .toggleSize { font-size: 32px; color: white; } - .controlsGrid-1x1 { margin-left: auto; - margin-right: 0; - text-align: right; + margin-right: 0; + text-align: right; } img { @@ -2601,9 +2313,8 @@ img { top: 0; left: 0; } - -.skip-animation .container-inner { - display: block; +.skip-animation .container-inner{ + display:block; } .out-animation { @@ -2613,14 +2324,13 @@ img { .pointer { cursor: pointer; } - @keyframes inlightbox { 50% { width: 100%; left: 0; height: 200px; } - + 100% { height: 100%; width: 100%; @@ -2628,23 +2338,20 @@ img { left: 0; } } - .column_neon { color: white; animation: neonGlow 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); box-shadow: 0 0 5px rgba(255, 255, 255, .8), 0 0 10px rgba(255, 255, 255, .8), 0 0 20px rgba(66, 220, 219, .5), 0 0 22px rgba(66, 220, 219, .5) } - @keyframes neonGlow { 100% { box-shadow: 0 0 5px rgba(255, 255, 255, .8), 0 0 10px rgba(255, 255, 255, .8), 0 0 20px rgba(66, 220, 219, .5), 0 0 22px rgba(66, 220, 219, .5) } - + 0% { box-shadow: 0 0 2px rgba(255, 255, 255, .8), 0 0 3px rgba(255, 255, 255, .8), 0 0 4px rgba(66, 220, 219, .5) } } - .modal { display: none; position: fixed; @@ -2656,7 +2363,6 @@ img { background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.5); } - .modal-content { position: relative; background-color: white; @@ -2664,33 +2370,30 @@ img { margin: auto; max-width: 400px; } - .close-btn { float: right; color: lightgray; font-size: 24px; font-weight: bold; } - .close-btn:hover { color: darkgray; } - -#chattoggle { +#chattoggle{ top: 0.5px; position: relative; } .la-phone { color: red; - top: 0.5; + top:0.5; } #obsState { - border: #888 solid 2px; - padding: 2px 5px; + border:#888 solid 2px; + padding:2px 5px; color: white; - z-index: 2; + z-index:2; background-color: #222D; display: block; top: 0; @@ -2700,54 +2403,48 @@ img { border-radius: 4px; text-align: center; } - #obsState.larger { - padding: 2px 10px; + padding:2px 10px; font-size: 30px; } -@media only screen and (max-height: 400px) { +@media only screen and (max-height: 400px){ #obsState { transform: scale(0.9); } } - -@media only screen and (max-height: 300px) { +@media only screen and (max-height: 300px){ #obsState { transform: scale(0.8); } } - -@media only screen and (max-width: 620px) { +@media only screen and (max-width: 620px){ #obsState { - top: 20px; + top:20px; transform: scale(0.8); } } - -@media only screen and (max-height: 200px) { +@media only screen and (max-height: 200px){ #obsState { transform: scale(0.7); } } -@media only screen and (max-width: 400px) { +@media only screen and (max-width: 400px){ #obsState { - top: 30px; + top:30px; transform: scale(0.7); - display: none !important; - opacity: 0; + display:none!important; + opacity:0; } } - -@media only screen and (max-width: 300px) { +@media only screen and (max-width: 300px){ #obsState { - display: none !important; - opacity: 0; + display:none!important; + opacity:0; } } - .onair { box-shadow: inset 0 0 max(10vw, 10vh) green; } @@ -2757,11 +2454,11 @@ img { box-shadow: inset 0 0 max(10vw, 10vh) yellow; } -.recording { +.recording{ box-shadow: inset 0 0 max(10vw, 10vh) red } -.raisedHand { +.raisedHand{ background-color: #DD1A !important; } @@ -2771,13 +2468,8 @@ img { } @keyframes flip180 { - 0% { - transform: rotate(0); - } - - 100% { - transform: rotate(180deg); - } + 0% {transform: rotate(0);} + 100% {transform: rotate(180deg);} } .flip2 { @@ -2786,13 +2478,8 @@ img { } @keyframes flip1802 { - 0% { - transform: rotate(180deg) - } - - 100% { - transform: rotate(360deg); - } + 0% {transform: rotate(180deg)} + 100% {transform: rotate(360deg);} } @-webkit-keyframes animatetop { @@ -2800,26 +2487,24 @@ img { top: -300px; opacity: 0 } - + to { top: 0; opacity: 1 } } - @keyframes animatetop { from { top: -300px; opacity: 0 } - + to { top: 0; opacity: 1 } } - -#request_info_prompt { +#request_info_prompt{ z-index: 20; color: white; font-size: 30px; @@ -2837,7 +2522,7 @@ img { max-width: 100%; max-height: 100%; object-fit: contain; - overflow: hidden; + overflow:hidden; display: flex; align-items: center; justify-content: center; @@ -2859,53 +2544,28 @@ img { } @keyframes fadeIn { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } + 0% {opacity:0;} + 100% {opacity:1;} } @-moz-keyframes fadeIn { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } + 0% {opacity:0;} + 100% {opacity:1;} } @-webkit-keyframes fadeIn { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } + 0% {opacity:0;} + 100% {opacity:1;} } @-o-keyframes fadeIn { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } + 0% {opacity:0;} + 100% {opacity:1;} } @-ms-keyframes fadeIn { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } + 0% {opacity:0;} + 100% {opacity:1;} } video { @@ -2916,24 +2576,19 @@ video { background-color: transparent; border: 0; margin: 0; - user-select: none; - -webkit-user-select: none; - /* Chrome/Safari */ - -moz-user-select: none; - /* Firefox */ - -ms-user-select: none; - /* IE10+ */ - -webkit-tap-highlight-color: transparent; - outline-style: none; + user-select:none; + -webkit-user-select: none; /* Chrome/Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+ */ + -webkit-tap-highlight-color:transparent; + outline-style:none; background-size: var(--video-background-image-size); background-repeat: no-repeat; background-position: center; background-image: var(--video-background-image); } -.nogb { - background-image: unset !important -} +.nogb { background-image: unset !important } video::-webkit-media-controls-timeline { display: none; @@ -2947,14 +2602,12 @@ video::-webkit-media-controls-timeline-container { display: none; } -audio::-webkit-media-controls-overlay-play-button, -video::-webkit-media-controls-overlay-play-button { +audio::-webkit-media-controls-overlay-play-button, video::-webkit-media-controls-overlay-play-button { display: none; } -audio::-webkit-media-controls-play-button, -video::-webkit-media-controls-play-button { - display: none; +audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button { + display: none; } video::-webkit-media-controls-toggle-closed-captions-button { @@ -2977,14 +2630,12 @@ video.clean::-webkit-media-controls-timeline-container { display: inherit; } -audio.fileshare::-webkit-media-controls-overlay-play-button, -video.fileshare::-webkit-media-controls-overlay-play-button { +audio.fileshare::-webkit-media-controls-overlay-play-button, video.fileshare::-webkit-media-controls-overlay-play-button { display: inherit; } -audio.fileshare::-webkit-media-controls-play-button, -video.fileshare::-webkit-media-controls-play-button { - display: inherit; +audio.fileshare::-webkit-media-controls-play-button, video.fileshare::-webkit-media-controls-play-button { + display: inherit; } .mirrorControl::-webkit-media-controls-enclosure { @@ -2993,23 +2644,21 @@ video.fileshare::-webkit-media-controls-play-button { transform: scaleX(-1); -webkit-transform: scaleX(-1); } - .popup-screen { align-text: center; position: absolute; - display: none; - top: 0; - left: 0; + display:none; + top:0; + left:0; z-index: 7 !important; padding: 20px; - margin: 15px 15px 80px 15px; + margin:15px 15px 80px 15px; width: 80vh !important; height: 80vh !important; background-color: #ccc !important; border: solid 1px #dfdfdf !important; box-shadow: 1px 1px 2px #cfcfcf !important; } - .context-menu { display: none; position: absolute; @@ -3020,7 +2669,6 @@ video.fileshare::-webkit-media-controls-play-button { border: solid 1px #dfdfdf !important; box-shadow: 1px 1px 2px #cfcfcf !important; } - .popup-message { display: none; align-text: center; @@ -3032,89 +2680,74 @@ video.fileshare::-webkit-media-controls-play-button { border: solid 1px #dfdfdf !important; box-shadow: 1px 1px 2px #cfcfcf !important; } - .context-menu--active { display: block !important; } - .context-menu__items { list-style: none !important; margin: 0; padding: 0; } - .context-menu__item { display: block; margin-bottom: 4px !important; } - .context-menu__item:last-child { margin-bottom: 0 !important; } - .context-menu__link { display: block; padding: 4px 12px; color: #0066aa !important; text-decoration: none; } - .context-menu__link:hover { color: #fff !important; background-color: #0066aa !important; } - .context-menu__tip { - margin-left: 15px; - color: #777; - margin-top: 10px; - padding-top: 10px; - position: relative; - top: 7px; + margin-left: 15px; + color: #777; + margin-top: 10px; + padding-top: 10px; + position: relative; + top: 7px; } - -#bufferSliderValue { - margin-left: 10px; +#bufferSliderValue{ + margin-left:10px; } - -.context-menu__link:hover>#bufferSliderValue { +.context-menu__link:hover > #bufferSliderValue { color: #fff; } - -.selectedTFImage { - box-shadow: 0 0 10px #2c3554; - outline: 2px solid black; +.selectedTFImage{ + box-shadow: 0 0 10px #2c3554; + outline: 2px solid black; } .audioTitle { text-align: left; padding: 7px 0px; } - .audioTitle2 { text-align: left; padding: 0px 10px 6px 1px; } - .multiselect .multiselect-trigger:hover { cursor: pointer; cursor: hand; text-decoration: none; } - .multiselect .multiselect-trigger.open { border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } - .multiselect .multiselect-trigger.closed { border-bottom: 1px solid #ccc; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } - -.gear_microphone { +.gear_microphone{ user-select: none; float: right; height: 0; @@ -3122,21 +2755,17 @@ video.fileshare::-webkit-media-controls-play-button { top: 6px; position: relative; } - -.gear_microphone.gearflat { +.gear_microphone.gearflat{ top: -1px; } - -.gear_microphone>input { +.gear_microphone>input{ top: 1px; - position: relative; + position: relative; } - -#micStereoMonoInput3 { +#micStereoMonoInput3{ width: 10px; - height: 11px; + height: 11px; } - #headphonesDiv3 { text-align: left; margin: 17px 0 0 0; @@ -3146,31 +2775,27 @@ video.fileshare::-webkit-media-controls-play-button { border: 1px solid #ccc; vertical-align: middle; } - #headphonesDiv { width: 450px; background-color: #f3f3f3; border: 1px solid #ccc; } - -button.toggleSettings { +button.toggleSettings{ width: 135px; - background-color: #EFEFEF; - padding: 9px 12px 10px 2px; + background-color:#EFEFEF; + padding:9px 12px 10px 2px; margin: 0px 0px 20px 0 } - .selected { border: solid 3px black; padding: 4px; } - #avatarDiv { user-select: none; - font-size: 100%; - text-align: left; + font-size:100%; + text-align:left; margin: 17px auto; - max-width: 450px; + max-width:450px; min-width: 420px; background-color: #f3f3f3; display: block; @@ -3178,13 +2803,12 @@ button.toggleSettings { border: 1px solid #ccc; vertical-align: middle; } - #effectsDiv { user-select: none; - font-size: 100%; - text-align: left; + font-size:100%; + text-align:left; margin: 17px auto; - max-width: 450px; + max-width:450px; min-width: 420px; background-color: #f3f3f3; display: none; @@ -3192,7 +2816,6 @@ button.toggleSettings { border: 1px solid #ccc; vertical-align: middle; } - #effectsDiv3 { text-align: left; width: 450px; @@ -3202,7 +2825,6 @@ button.toggleSettings { vertical-align: middle; margin: 17px 0 0 0; } - #avatarDiv3 { text-align: left; width: 450px; @@ -3212,7 +2834,6 @@ button.toggleSettings { vertical-align: middle; margin: 17px 0 0 0; } - #videoSettings { margin: auto auto; background-color: #f3f3f3; @@ -3221,7 +2842,6 @@ button.toggleSettings { margin: 0px 0 0px 0; border: 1px solid #ccc; } - #audioMenu { margin: 15px 0 0 0; } @@ -3233,12 +2853,12 @@ button.toggleSettings { } -#minipreview>#videosource { - height: auto !important; - width: auto !important; - max-height: 100% !important; - max-width: 100% !important; - border-radius: 0 !important; +#minipreview > #videosource { + height:auto!important; + width:auto!important; + max-height:100%!important; + max-width:100%!important; + border-radius: 0!important; } #videoSourceSelect { @@ -3247,18 +2867,15 @@ button.toggleSettings { font-size: 100%; max-width: 260px; } - -#gear_webcam { - cursor: pointer; +#gear_webcam{ + cursor: pointer; display: inline-block; padding: 0 0 0 3px; } - .gone { - position: absolute; + position:absolute; top: -150px; } - .grabLinks { display: inline-flex; cursor: grab; @@ -3268,15 +2885,12 @@ button.toggleSettings { margin: 5px 0; word-break: break-all; } - .grabLinks a:hover { color: black !important; } - .grabLinks a:active { color: black !important; } - .grabLinks a:link { color: black !important; } @@ -3288,21 +2902,20 @@ button.toggleSettings { height: 0px; opacity: 0; } - .grabLinks a:visited { color: black !important; } .permahide { - display: none !important; + display: none!important; visibility: hidden; - width: 0px; - height: 0px; - opacity: 0; + width:0px; + height:0px; + opacity: 0; background: #0000; color: #0000; font-size: 0em; - pointer-events: none; + pointer-events:none; } #grabDirectorSoloLinkParent { @@ -3315,15 +2928,15 @@ button.toggleSettings { vertical-align: middle; } -#grabDirectorSoloLink { +#grabDirectorSoloLink{ max-width: 100%; line-break: anywhere; - margin: 0; - display: inline-flex; - padding: 4px 5px 2px 7px; - cursor: grab; + margin:0; + display:inline-flex; + padding:4px 5px 2px 7px; + cursor:grab; background-color: #FFF; - color: darkblue; + color:darkblue; } #videoSettings3 { @@ -3334,7 +2947,6 @@ button.toggleSettings { font-size: 90%; margin: 10px 0 0 0; } - #videoSource3 { display: inline-block; vertical-align: middle; @@ -3342,7 +2954,6 @@ button.toggleSettings { font-size: 93%; max-width: 235px; } - #outputSource { display: inline-block; vertical-align: middle; @@ -3350,7 +2961,6 @@ button.toggleSettings { font-size: 93%; max-width: 100%; } - #outputSource3 { display: inline-block; vertical-align: middle; @@ -3358,7 +2968,6 @@ button.toggleSettings { font-size: 93%; max-width: 100%; } - #addPasswordBasic { width: 450px; white-space: nowrap; @@ -3384,11 +2993,10 @@ button.toggleSettings { vertical-align: middle; text-align: left; } - -#videoMenu3 { +#videoMenu3{ background-color: #f3f3f3; width: 450px; - max-width: 100%; + max-width:100%; display: block; padding: 10px 10px; border: 1px solid #ccc; @@ -3397,7 +3005,7 @@ button.toggleSettings { margin: 0 0 15px 0; } -.audioMenu { +.audioMenu{ text-align: left; margin: 17px 0px 0px; max-width: 550px; @@ -3419,12 +3027,10 @@ div.multiselect { padding: 4px 10px 10px 10px; background-color: #f3f3f3; } - .form-group .multiselect { padding: 10px; - background-color: #f3f3f3; + background-color:#f3f3f3; } - .multiselect .multiselect-contents { display: block; margin: 0; @@ -3436,32 +3042,27 @@ div.multiselect { text-align: left; background-color: white; } - .multiselect .multiselect-contents li { list-style: none; font-size: 120%; padding: 2px; overflow: hidden; } - .select .select-trigger:hover { cursor: pointer; cursor: hand; text-decoration: none; } - .select .select-trigger.open { border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } - .select .select-trigger.closed { border-bottom: 1px solid #ccc; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } - .select .select-contents { display: none; margin: 0; @@ -3471,31 +3072,24 @@ div.multiselect { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } - .select .select-contents li { list-style: none; } - ::-webkit-input-placeholder { color: #555 !important; } - ::-moz-placeholder { color: #555 !important; } - :-ms-input-placeholder { color: #555 !important; } - :-moz-placeholder { color: #555 !important; } - label { font-weight: normal; } - input[type=checkbox] { -ms-transform: scale(1.4); /* IE */ @@ -3509,7 +3103,6 @@ input[type=checkbox] { padding: 5px; margin: 0 5px 0 1px; } - #screenshare { height: 300px; display: inline-block; @@ -3525,7 +3118,6 @@ input[type=checkbox] { background-size: contain; background-color: rgba(0, 0, 0, 0); } - .inMessage { color: #000; margin: 3px; @@ -3535,7 +3127,6 @@ input[type=checkbox] { text-align: left; margin: 10px 3px; } - .actionMessage { color: #000; margin: 3px; @@ -3545,7 +3136,6 @@ input[type=checkbox] { text-align: left; margin: 10px 3px; } - .outMessage { color: #000; margin: 3px; @@ -3555,33 +3145,31 @@ input[type=checkbox] { text-align: right; margin: 10px 3px; } - #chatBody { z-index: 12; background-color: #0004; width: 100%; border-radius: 5px; padding: 1px 7px; - overflow-y: scroll; + overflow-y:scroll; overflow-wrap: anywhere; max-height: 800px; - line-height: 22px; + line-height: 22px; } #chatBody::-webkit-scrollbar { width: 0px; - background: transparent; - /* make scrollbar transparent */ + background: transparent; /* make scrollbar transparent */ } div#chatBody a { - color: blue; - text-decoration: underline; - background-color: #c9c9c9; - border: 2px solid black; - padding: 2px 10px; - border-radius: 6px; - cursor: pointer; + color: blue; + text-decoration: underline; + background-color: #c9c9c9; + border: 2px solid black; + padding: 2px 10px; + border-radius: 6px; + cursor: pointer; } #chatModule { @@ -3592,9 +3180,8 @@ div#chatBody a { width: 574px; min-width: 300px; max-width: 100%; - z-index: 3; + z-index:3; } - #chatInput { color: #000; background-color: #FFFE; @@ -3605,15 +3192,14 @@ div#chatBody a { padding: 3px; border: 3px solid black; } - .chatBarInputButton { - width: 60px; - background-color: #EEE; + width:60px; + background-color:#EEE; top: -1px; position: relative; margin-right: 10px; } - + .debugStats { font-size: 0.8rem; list-style-type: none; @@ -3629,14 +3215,12 @@ div#chatBody a { color: white; padding: 20px; border: 2px solid #1d1d1d; - padding-bottom: 100px !important; - margin-bottom: 100px !important; + padding-bottom: 100px!important; + margin-bottom: 100px!important; } - .debugStats::-webkit-scrollbar { width: 0.5em; } - .debugStats::-webkit-scrollbar-track { background: black; border-radius: 10px; @@ -3651,7 +3235,6 @@ div#chatBody a { background: rgb(158, 158, 158); ; } - .debugStats h1 { font-size: 1rem; text-align: left; @@ -3659,7 +3242,6 @@ div#chatBody a { margin-bottom: 10px; margin-top: -5px; } - .debugStats h2 { font-size: 0.8rem; text-align: left; @@ -3670,33 +3252,27 @@ div#chatBody a { display: block; overflow: hidden; } - .viewstats::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); } - .debugStats li { display: flex; margin: 5px 0px; } - .debugStats li:nth-child(even) { background: rgba(33, 33, 33, 0.8); padding: 2px 0px; } - .debugStats li span:first-child { flex: 1; white-space: nowrap; } - .debugStats li span:last-child { flex: 1; text-align: right; max-height: 49px; - overflow: auto; + overflow: auto; } - .debugStats .close { font-weight: bold; color: white; @@ -3709,7 +3285,6 @@ div#chatBody a { top: 10px; right: 10px; } - .debugStats button:not(.close) { margin: 10px 0px; padding: 10px 0px; @@ -3720,7 +3295,6 @@ div#chatBody a { font-weight: bold; border-bottom: 2px solid #364c84; } - @media only screen and (max-width: 390px) { #chatBody { z-index: 12; @@ -3730,7 +3304,7 @@ div#chatBody a { padding: 1px 7px; margin: 0px; } - + #chatModule { bottom: 50px; position: fixed; @@ -3739,7 +3313,7 @@ div#chatBody a { width: 400px; max-width: 100%; } - + #chatInput { max-width: 99%; min-width: 240px; @@ -3747,33 +3321,29 @@ div#chatBody a { font-size: 100%; } } - .directorMargins { margin: var(--director-margin); } - .hideLinksClass { background-color: var(--container-color); - width: 1191px; + width:1191px; padding: 10px; margin: 5px 10px 10px 10px; - max-width: 100%; + max-width:100%; } - .directorContainer { background-color: var(--container-color); display: grid; - grid-template-columns: 1fr; + grid-template-columns: 1fr ; margin: 10px 0px 10px 10px; padding: 10px; max-width: min(100%, 1191px); - + } -#directorLinksButton { - cursor: pointer; +#directorLinksButton{ + cursor:pointer; } - .directorContainer.half { background-color: var(--container-color); display: grid; @@ -3781,53 +3351,43 @@ div#chatBody a { padding: 10px 10px; width: min(100%, 591px); } - .directorBlock { padding: 10px 10px 5px 10px; margin: var(--regular-margin); color: white; - position: relative; + position:relative; max-width: 100%; overflow: hidden; } - .directorBlock:nth-child(1) { background-color: var(--blue-accent); } - .directorBlock:nth-child(2) { background-color: var(--green-accent); } - .directorBlock:nth-child(3) { background-color: var(--olive-accent); } - .directorBlock:nth-child(4) { background-color: var(--red-accent); } - .directorBlock button { bottom: 0; margin: 10px; } - .directorBlock button i { margin-right: 5px; } - a.task { width: 100%; margin-top: 10px; } - .directorBlock h2 { text-transform: uppercase; margin-bottom: 10px; margin-left: 5px; - font-size: 1.2em; + font-size:1.2em; } - .shift { display: inline-block; position: relative; @@ -3837,56 +3397,51 @@ a.task { font-size: 0.8em; top: -4.9px; } - .shift>i { - cursor: pointer; + cursor:pointer; width: 10px; margin: 0 auto; left: -1.1px; position: relative; } - -.shift.locked>i { - display: none; +.shift.locked>i{ + display:none; } - -.shift.locked>span { +.shift.locked>span{ margin-left: 7px; } - #toggleroomnotes { grid-column: 4; grid-row: 1; } - div#roomnotes2 { background: var(--container-color); padding: 10px !important; margin: 0 var(--regular-margin) 10px var(--regular-margin); width: 100%; } - .directorsgrid .directorContainer:nth-child(2) button { grid-row: 1; grid-column: 4; } - .directorsgrid .directorContainer:nth-child(2) span { grid-row: 1; grid-column: 1; } - .directorsgrid button { text-transform: lowercase; } + + + + /* ---- DIRECTORS PAGE - Guest Controls Box ---- */ .controlsGrid { - display: flex; - flex-wrap: wrap; + display: flex; + flex-wrap: wrap; } - .controlsGrid .group { width: 100%; display: flex; @@ -3901,32 +3456,26 @@ div#roomnotes2 { margin-top: 5px; margin-bottom: 5px; } - -.controlsGrid .row>.row { +.controlsGrid .row > .row { margin: 0; } - -.controlsGrid .row.two>* { +.controlsGrid .row.two > * { flex: 1 33%; } - -.controlsGrid .row.three>* { +.controlsGrid .row.three > * { flex: 1 25%; } - -.controlsGrid .row.four>* { +.controlsGrid .row.four > * { flex: 1 20%; } - -.controlsGrid .row.six>* { +.controlsGrid .row.six > * { flex: 1 13%; } .controlsGrid button { - margin: 0; - text-align: right; + margin: 0; + text-align: right; } - .controlsGrid button.center { display: flex; align-self: center; @@ -3940,7 +3489,6 @@ div#roomnotes2 { width: 100%; height: 5px; } - .controlsGrid .spacer.big { height: 15px; } @@ -3956,35 +3504,30 @@ div#roomnotes2 { flex-wrap: wrap; gap: 5px; } - .controlsGrid .director-message-box textarea { flex: 1 100%; padding: 5px; } - .controlsGrid .director-message-box .message-close { flex: 1; } - .controlsGrid .director-message-box .message-send { flex: 1 33%; } .controlsGrid .tooltip { flex: 1 calc(50% - 10px); - display: flex; - align-items: center; + display: flex; + align-items: center; } - .controlsGrid .tooltip input[type=range] { margin: 0; } - .controlsGrid .tooltip .tooltiptext { top: -25px; } -.controlsGrid .hideDropMenu { +.controlsGrid .hideDropMenu{ user-select: none; grid-column: 1; width: 100%; @@ -3993,7 +3536,6 @@ div#roomnotes2 { font-size: 80%; cursor: pointer; } - .controlsGrid .orderspan { font-size: 50%; display: flex; @@ -4003,9 +3545,8 @@ div#roomnotes2 { text-align: center; position: relative; - user-select: none; + user-select: none; } - .controlsGrid .orderspan .order-label { width: max-content; } @@ -4014,47 +3555,44 @@ div#roomnotes2 { .controlsGrid .btn-HL-yellow { background: rgb(255, 235, 154); } - .controlsGrid .btn-HL-peach { background: rgb(243, 197, 242); } - .controlsGrid .btn-HL-green { background: rgb(130, 223, 128); } - .controlsGrid .btn-HL-blue { background: rgb(170, 204, 248); } /* Hides buttons that are supposed to be hidden when &novice is added to URL */ .controlsGrid .advanced.hide { - display: none; + display: none; } + + + #widget { position: absolute; - width: 25%; - height: 100%; - right: 0; - top: 0; + width: 25%; + height: 100%; + right: 0; + top: 0; } - -#localMuteElement { +#localMuteElement{ top: 1vh; right: 1vh; } - -#localVoiceMeter { +#localVoiceMeter{ width: 10px; height: 10px; top: 8px; right: 10px; } - -.controlCenterBox { - margin-top: 2px; +.controlCenterBox{ + margin-top:2px; padding: 0 5px; } @@ -4064,8 +3602,7 @@ div#roomnotes2 { margin-left: 5px; position: relative; cursor: pointer; -} - +} .fullwindowButton { transition: opacity 0.3s; width: 4vh; @@ -4078,39 +3615,34 @@ div#roomnotes2 { display: none; z-index: 6; right: 4vh; - top: 4vh; + top : 4vh; color: white; cursor: pointer; } - .fullwindowButtonimg { user-select: none; - background-color: #0007; - width: 4vh; + background-color:#0007; + width:4vh; } - #widget { position: absolute; - width: 25%; - height: 100%; - right: 0; - top: 0; + width: 25%; + height: 100%; + right: 0; + top: 0; } .pull-right { float: right; right: 0; } - .pull-left { float: left; left: 0; } - i.las.la-circle { color: red; } - .streamID { text-align: right; margin: 5px 5px 2px 0px; @@ -4121,14 +3653,12 @@ i.las.la-circle { width: 227px; display: inline-block; } - .streamID i { margin-left: 1px; font-size: 1.3em; position: relative; top: 1px; } - .soloLink { background: none; border-radius: 0; @@ -4139,34 +3669,28 @@ i.las.la-circle { font-size: 1.2em; font-weight: 700; } - .vidcon>h2 { font-size: 1em; margin-top: 20px; } - #pptbackbutton { margin-left: 20; } - #pptnextbutton { background-color: #007900; } - #pptbackbutton:active { -webkit-box-shadow: inset 0px 0px 17px #4b4b4b; -moz-box-shadow: inset 0px 0px 17px #4b4b4b; box-shadow: inset 0px 0px 17px #4b4b4b; outline: none; } - #pptnextbutton:active { -webkit-box-shadow: inset 0px 0px 17px #4b4b4b; -moz-box-shadow: inset 0px 0px 17px #4b4b4b; box-shadow: inset 0px 0px 17px #4b4b4b; outline: none; } - div#guestFeeds { background: var(--container-color); padding: 5px 0 15px 20px; @@ -4175,18 +3699,16 @@ div#guestFeeds { } div#guestFeeds:empty { - display: none; + display:none; } - -#hiddenElements { - visibility: hidden; +#hiddenElements{ + visibility:hidden; position: absolute; - left: -9999; - top: -9999; - width: 0px; - height: 0px; + left:-9999; + top:-9999; + width:0px; + height:0px; } - #press2talk[data-enabled="true"] { background: #1e0000; -webkit-box-shadow: inset 0px 0px 1px #b90000; @@ -4201,7 +3723,6 @@ a#reshare { padding: 0; display: inline; } - #copythisurl+i { display: inline; font-size: 130%; @@ -4211,7 +3732,6 @@ a#reshare { border-radius: 0; padding: 5px; } - #joinroomID+button { margin: 0px var(--regular-margin); } @@ -4236,12 +3756,12 @@ a#reshare { color: red; } -#guestTips>span>i { +#guestTips > span > i { font-size: 2.5em; margin-right: 10px; } -#guestTips>span>span { +#guestTips > span > span { line-height: 2.5em; vertical-align: bottom; } @@ -4255,19 +3775,19 @@ a#reshare { padding: 5px 10px; background: rgba(0, 0, 0, .5); font-size: 1em; - pointer-events: none; + pointer-events:none; } .video-label.zoom { bottom: 0; left: 0; - pointer-events: none; + pointer-events:none; } .video-label.teams { background: rgba(0, 0, 0, .4); - pointer-events: none; + pointer-events:none; border-radius: 5px; } @@ -4276,7 +3796,7 @@ a#reshare { left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, .8); - pointer-events: none; + pointer-events:none; border-radius: 5px; font-size: 0.8em; } @@ -4315,34 +3835,34 @@ a#reshare { } .video-meter { - padding: 0.5vh; - display: block; - width: 0.5vh; - height: 0.5vh; - min-width: 10px; - min-height: 10px; + padding:0.5vh; + display:block; + width:0.5vh; + height:0.5vh; + min-width:10px; + min-height:10px; top: 2vh; right: 2vh; - background-color: green; - position: absolute; + background-color:green; + position:absolute; border-radius: 2vh; - pointer-events: none; + pointer-events:none; border: 1px black solid; } .video-meter-2 { - padding: 0; - display: block; - width: 100%; - height: 100%; - min-width: 10px; - min-height: 10px; + padding:0; + display:block; + width:100%; + height:100%; + min-width:10px; + min-height:10px; top: 0; right: 0; - background-color: unset; - position: absolute; + background-color:unset; + position:absolute; border-radius: 5px; - pointer-events: none; + pointer-events:none; border: 5px green solid; } @@ -4352,50 +3872,46 @@ a#reshare { top: 8px; right: 10px; } - .video-meter2 { - display: block; - padding: 0; + display:block; + padding:0; width: 4px; - height: 0%; - min-width: 2px; + height:0%; + min-width:2px; bottom: 1px; right: 5px; - background-color: #0000; - position: absolute; + background-color:#0000; + position:absolute; border-radius: 2vh; - pointer-events: none; + pointer-events:none; border: 1px black solid; transition: height 0.1s ease, background-color 0.1s ease; } -.hasMedia>.video-meter2 { - display: block; +.hasMedia > .video-meter2 { + display:block; } - -.hasMedia>.video-meter-2 { - display: block; +.hasMedia > .video-meter-2 { + display:block; } - -.hasMedia>.video-meter { - display: block; +.hasMedia > .video-meter { + display:block; } -#voiceMeterTemplate { - display: none; +#voiceMeterTemplate{ + display:none; +} +#voiceMeterTemplate2{ + display:none; } -#voiceMeterTemplate2 { - display: none; -} - -#userList { +#userList{ line-height: 1.3em; } -#userList>div>.video-meter { +#userList > div > .video-meter { padding: 5px; margin-left: 5px; top: 0; @@ -4403,45 +3919,42 @@ a#reshare { position: relative; display: inline-block; } - .PPTActive { box-shadow: 0px 0px 10px green; } - .video-mute-state { top: 2vh; right: 2vh; position: absolute; - color: white; + color:white; border-radius: 2vh; - background-color: #b11313; + background-color:#b11313; padding: 2px 2px 2px 1px; } .video-mute-state-userlist { - display: inline-block; - color: white; + display:inline-block; + color:white; border-radius: 2vh; - background-color: #b11313; + background-color:#b11313; padding: 2.2px 1.5px 2px 2px; margin: 0 0 0 5px; } -#help_directors_room { - cursor: pointer; +#help_directors_room{ + cursor:pointer; } -.iframeblob { - padding-top: 18px; +.iframeblob{ + padding-top:18px; text-align: left; width: 600px; display: block; margin: auto; } - -#shareScreenGear { - display: none; +#shareScreenGear{ + display:none; } div.message-card { @@ -4468,28 +3981,22 @@ div.message-card a { border-left: 4px solid #eff150; background: #fffded; } - .info.message-card { border-left: 4px solid #aacefd; background: #e6e8f0; } - .darktheme #guestTips { background-color: #414141; } - .darktheme #guestTips .las { color: #FFF; } - .darktheme .message-card { + background-color: #000; +} +.darktheme input[type='file'] { background-color: #000; } - -.darktheme input[type='file'] { - background-color: #000; -} - .message-card h1 { display: block; font-size: 110%; @@ -4521,24 +4028,16 @@ div.message-card.info:before { } @keyframes floating { - 0% { - transform: translate(0, 0px); - } - - 50% { - transform: translate(0, 15%); - } - - 100% { - transform: translate(0, -0px); - } + 0% { transform: translate(0, 0px); } + 50% { transform: translate(0, 15%); } + 100% { transform: translate(0, -0px); } } .video-label.floating3d { text-transform: uppercase; display: block; color: #FFFFFF; - text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15); + text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); color: #FFFFFF; animation-name: floating; animation-duration: 5s; @@ -4546,7 +4045,7 @@ div.message-card.info:before { animation-timing-function: ease-in-out; width: 100%; font-size: 5em; - font-weight: bold; + font-weight:bold; text-align: center; bottom: 4vh; position: absolute; @@ -4562,10 +4061,10 @@ div.message-card.info:before { .switch { position: relative; - margin: 5px 5px 2px 5px; + margin:5px 5px 2px 5px; width: 40px; height: 24px; - bottom: 20px; + bottom:20px; border-radius: 2px; display: inline-block; } @@ -4600,35 +4099,31 @@ div.message-card.info:before { position: absolute; } -input:checked+.slider { +input:checked + .slider { background-color: #86b98f; } -input:focus+.slider { +input:focus + .slider { box-shadow: 0 0 1px #86b98f; } -input:checked+.slider:before { +input:checked + .slider:before { -webkit-transform: translateX(16px); -ms-transform: translateX(16px); transform: translateX(16px); } - #remoteOBSControl { user-select: none; - z-index: 25; - max-height: calc(100vh - 116px); - overflow-y: auto; + z-index: 25; + max-height: calc(100vh - 116px); + overflow-y: auto; } -#remoteOBSControl button { - margin: 5px; - padding: 10px; +#remoteOBSControl button { + margin:5px; + padding:10px; } - -#promptModal, -.customModelPopup, -.promptModal { +#promptModal, .customModelPopup, .promptModal { position: absolute; background-color: rgb(221 221 221); box-shadow: 0 0 30px 10px #0000005c; @@ -4639,14 +4134,14 @@ input:checked+.slider:before { transform: translate(-50%, -50%); border-radius: 10px; font-weight: bold; - z-index: 31; - width: 550px; - max-width: 100%; + z-index:31; + width:550px; + max-width:100%; overflow: hidden; overflow-wrap: break-word; } -#bufferSettings { +#bufferSettings{ position: absolute; background-color: #ddddddee; box-shadow: 0 0 30px 10px #0000005c; @@ -4657,22 +4152,20 @@ input:checked+.slider:before { transform: translate(-50%, 0%); border-radius: 10px; font-weight: bold; - z-index: 31; - width: 550px; - max-width: 100%; + z-index:31; + width:550px; + max-width:100%; overflow: hidden; overflow-wrap: break-word; } - .largeTextEntry { width: 90%; margin: 10px 5%; font-size: .8em; padding: 0.4em; display: block; - + } - .promptModalInner { position: relative; padding: 1em; @@ -4686,16 +4179,16 @@ input:checked+.slider:before { margin: 0 5%; } -#iframe_source { +#iframe_source{ width: 100%; height: 100%; margin: auto; border: 10px dashed rgb(64 65 62) } -.startupWarning { - max-width: 100%; - display: block; +.startupWarning{ + max-width:100%; + display:block; width: 450px; border-left: 4px solid #eff150; background: #fffded; @@ -4706,28 +4199,27 @@ input:checked+.slider:before { box-shadow: 0px 5px 10px -5px #a9a9a9; text-align: left; } - -.startupWarning>p { +.startupWarning > p { text-align: left; - display: inline-block; + display:inline-block; padding-left: 38px; - + } - -.startupWarning>i { +.startupWarning > i { position: absolute; font-size: 2em; padding: 2px 0 0 0; } -.darktheme .startupWarning { - background: black !important; +.darktheme .startupWarning{ + background: black!important; box-shadow: 0px 5px 10px -5px #a5a566; - color: white !important; + color: white!important; } + .cameraTip { width: 100%; display: block; @@ -4741,26 +4233,24 @@ input:checked+.slider:before { text-align: left; font-size: 97%; } - -.cameraTip>p { +.cameraTip > p { text-align: left; - display: inline-block; + display:inline-block; padding-left: 32px; vertical-align: middle; - + } - -.cameraTip>i { +.cameraTip > i { position: absolute; font-size: 1.5em; padding: 2px 0 0 0; } -#consentWarning { +#consentWarning{ margin: 0 auto 20px auto; } -#consentWarning2 { +#consentWarning2{ margin: 0px auto 10px auto; } @@ -4775,11 +4265,11 @@ input:checked+.slider:before { transform: translate(-50%, -50%); border-radius: 10px; font-weight: bold; - z-index: 32; + z-index:32; overflow-wrap: break-word; } -#connectUsers { +#connectUsers{ float: right; display: none; position: absolute; @@ -4810,7 +4300,7 @@ input:checked+.slider:before { color: blue; } -#alertModal a:active { + #alertModal a:active { color: blue; } @@ -4839,8 +4329,7 @@ input:checked+.slider:before { z-index: 0; opacity: 0.8; } - -#modalBackdrop.darktheme { +#modalBackdrop.darktheme{ background-color: var(--dark-background-color); } @@ -4855,11 +4344,11 @@ input:checked+.slider:before { opacity: 0.8; } -.modalBackdrop.darktheme { +.modalBackdrop.darktheme{ background-color: var(--dark-background-color); } -.opaqueBackdrop { +.opaqueBackdrop{ background: var(--background-color); position: fixed; top: 0; @@ -4869,12 +4358,11 @@ input:checked+.slider:before { z-index: 0; opacity: 1.0; } - -.opaqueBackdrop.darktheme { +.opaqueBackdrop.darktheme{ background-color: var(--dark-background-color); } -.alertModalMessage>select { +.alertModalMessage>select{ font-size: 100%; } @@ -4893,20 +4381,18 @@ input:checked+.slider:before { left: 0; width: 100%; height: 100vh; - background: rgba(30, 30, 30, .75); + background: rgba(30,30,30,.75); color: #fff; z-index: 10000000; display: flex; align-items: center; justify-content: center; } - .desktop-capturer-selection__scroller { width: 100%; max-height: 100vh; overflow-y: auto; } - .desktop-capturer-selection__list { max-width: calc(100% - 100px); margin: 50px; @@ -4917,12 +4403,10 @@ input:checked+.slider:before { overflow: hidden; justify-content: center; } - .desktop-capturer-selection__item { display: flex; margin: 4px; } - .desktop-capturer-selection__btn { display: flex; flex-direction: column; @@ -4936,57 +4420,48 @@ input:checked+.slider:before { text-align: left; transition: background-color .15s, box-shadow .15s; } - .desktop-capturer-selection__btn:hover, .desktop-capturer-selection__btn:focus { - background: rgba(98, 100, 167, .8); + background: rgba(98,100,167,.8); } - .desktop-capturer-selection__thumbnail { width: 100%; height: 81px; object-fit: cover; } - .desktop-capturer-selection__name { margin: 6px 0 6px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } - -.makeSmallerDirectorRoom { +.makeSmallerDirectorRoom{ max-width: calc(100% - 415px); - min-width: min(calc(100% - 395px), 75%); + min-width: min(calc(100% - 395px), 75%); } - -.pinToSide { +.pinToSide{ top: unset; - left: unset; - right: 0; - transform: unset; - border-radius: unset; - height: 100%; + left: unset; + right: 0; + transform: unset; + border-radius: unset; + height: 100%; max-width: min(25%, 415px); min-width: 395px; overflow-y: auto; position: fixed; } - -#roomSettings { +#roomSettings{ max-height: 100%; - overflow: auto; + overflow: auto; } - @font-face { font-family: 'Line Awesome Free'; font-style: normal; font-weight: 900; font-display: auto; src: url("./lineawesome/fonts/la-solid-900.eot"); - src: url("./lineawesome/fonts/la-solid-900.eot?#iefix") format("embedded-opentype"), url("./lineawesome/fonts/la-solid-900.woff2") format("woff2"), url("./lineawesome/fonts/la-solid-900.woff") format("woff"), url("./lineawesome/fonts/la-solid-900.ttf") format("truetype"), url("./lineawesome/fonts/la-solid-900.svg#lineawesome") format("svg"); -} - + src: url("./lineawesome/fonts/la-solid-900.eot?#iefix") format("embedded-opentype"), url("./lineawesome/fonts/la-solid-900.woff2") format("woff2"), url("./lineawesome/fonts/la-solid-900.woff") format("woff"), url("./lineawesome/fonts/la-solid-900.ttf") format("truetype"), url("./lineawesome/fonts/la-solid-900.svg#lineawesome") format("svg"); } .las { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -4994,697 +4469,424 @@ input:checked+.slider:before { font-style: normal; font-variant: normal; text-rendering: auto; - line-height: 1; -} - + line-height: 1; } .las { font-family: 'Line Awesome Free'; - font-weight: 900; -} - + font-weight: 900; } .la-bell:before { - content: "\f0f3"; -} - + content: "\f0f3"; } .la-bell-slash:before { - content: "\f1f6"; -} - + content: "\f1f6"; } .la-long-arrow-alt-right:before { - content: "\f30b"; -} - + content: "\f30b"; } .la-paperclip:before { - content: "\f0c6"; -} - + content: "\f0c6"; } .la-window-close:before { - content: "\f410"; -} - + content: "\f410"; } .la-stream:before { - content: "\f550"; -} - + content: "\f550"; } .la-file-upload:before { - content: "\f574"; -} - + content: "\f574"; } .la-comment-alt:before { - content: "\f27a"; -} - + content: "\f27a"; } .la-tv:before { - content: "\f26c"; -} - + content: "\f26c"; } .la-volume-up:before { - content: "\f028"; -} - + content: "\f028"; } .la-comment-dots:before { - content: "\f4ad"; -} - + content: "\f4ad"; } .la-microphone:before { - content: "\f130"; -} - + content: "\f130"; } .la-microphone-alt:before { - content: "\f3c9"; -} - + content: "\f3c9"; } .la-video:before { - content: "\f03d"; -} - + content: "\f03d"; } .la-desktop:before { - content: "\f108"; -} - + content: "\f108"; } .la-tv:before { - content: "\f26c"; -} - + content: "\f26c"; } .la-window-maximize:before { - content: "\f2d0"; -} - + content: "\f2d0"; } .la-sync-alt:before { - content: "\f2f1"; -} - + content: "\f2f1"; } .la-users-cog:before { - content: "\f509"; -} - + content: "\f509"; } .la-cog:before { - content: "\f013"; -} - + content: "\f013"; } .la-phone:before { - content: "\f095"; -} - + content: "\f095"; } .la-gamepad:before { - content: "\f11b"; -} - + content: "\f11b"; } .la-skull-crossbones:before { - content: "\f714"; -} - + content: "\f714"; } .la-hand-paper:before { - content: "\f256"; -} - + content: "\f256"; } .la-dot-circle:before { - content: "\f192"; -} - + content: "\f192"; } .la-bug:before { - content: "\f188"; -} - + content: "\f188"; } .la-question-circle:before { - content: "\f059"; -} - + content: "\f059"; } .la-language:before { - content: "\f1ab"; -} - + content: "\f1ab"; } .la.la-calendar:before { - content: "\f073"; -} - + content: "\f073"; } .la-exclamation-circle:before { - content: "\f06a"; -} - + content: "\f06a"; } .la-plug:before { - content: "\f1e6"; -} - + content: "\f1e6"; } .la-ethernet:before { - content: "\f796"; -} - + content: "\f796"; } .la-headphones:before { - content: "\f025"; -} - + content: "\f025"; } .la-robot:before { - content: "\f544"; -} - + content: "\f544"; } .la-info-circle:before { - content: "\f05a"; -} - + content: "\f05a"; } .la-play:before { - content: "\f04b"; -} - + content: "\f04b"; } .la-gamepad:before { - content: "\f11b"; -} - + content: "\f11b"; } .la-blender:before { - content: "\f517"; -} - + content: "\f517"; } .la-heartbeat:before { - content: "\f21e"; -} - + content: "\f21e"; } .la-code-branch:before { - content: "\f126"; -} - + content: "\f126"; } .la-info:before { - content: "\f129"; -} - + content: "\f129"; } .la-square:before { - content: "\f0c8"; -} - + content: "\f0c8"; } .la-play-circle:before { - content: "\f144"; -} - + content: "\f144"; } .la.la-hdd-o:before { - content: "\f0a0"; -} - + content: "\f0a0"; } .la-key:before { - content: "\f084"; -} - + content: "\f084"; } .la-broadcast-tower:before { - content: "\f519"; -} - + content: "\f519"; } .la-clock:before { - content: "\f017"; -} - + content: "\f017"; } .la-tachometer-alt:before { - content: "\f3fd"; -} - + content: "\f3fd"; } .la-fire-alt:before { - content: "\f7e4"; -} - + content: "\f7e4"; } .la-book-open:before { - content: "\f518"; -} - + content: "\f518"; } .la-caret-down:before { - content: "\f0d7"; -} - + content: "\f0d7"; } .la-comments:before { - content: "\f086"; -} - + content: "\f086"; } .la-caret-right:before { - content: "\f0da"; -} - + content: "\f0da"; } .la-copy:before { - content: "\f0c5"; -} - + content: "\f0c5"; } .la-tools:before { - content: "\f7d9"; -} - + content: "\f7d9"; } .la-th-large:before { - content: "\f009"; -} - + content: "\f009"; } .la-user-circle:before { - content: "\f2bd"; -} - + content: "\f2bd"; } .la-paper-plane:before { - content: "\f1d8"; -} - + content: "\f1d8"; } .la-envelope:before { - content: "\f0e0"; -} - + content: "\f0e0"; } .la-sign-out-alt:before { - content: "\f2f5"; -} - + content: "\f2f5"; } .la-angle-right:before { - content: "\f105"; -} - + content: "\f105"; } .la-angle-left:before { - content: "\f104"; -} - + content: "\f104"; } .la-plus-square:before { - content: "\f0fe"; -} - + content: "\f0fe"; } .la-microphone-slash:before { - content: "\f131"; -} - + content: "\f131"; } .la-user:before { - content: "\f007"; -} - + content: "\f007"; } .la-video-slash:before { - content: "\f4e2"; -} - + content: "\f4e2"; } .la-volume-off:before { - content: "\f026"; -} - + content: "\f026"; } .la-eye-slash:before { - content: "\f070"; -} - + content: "\f070"; } .la-eye:before { - content: "\f06e"; -} - + content: "\f06e"; } .la-minus:before { - content: "\f068"; -} - + content: "\f068"; } .la-minus-circle:before { - content: "\f056"; -} - + content: "\f056"; } .la-window-minimize:before { - content: "\f2d1"; -} - + content: "\f2d1"; } .la-hat-wizard:before { - content: "\f6e8"; -} - + content: "\f6e8"; } .la-plus:before { - content: "\f067"; -} - + content: "\f067"; } .la-sync:before { - content: "\f021"; -} - + content: "\f021"; } .la-circle:before { - content: "\f111"; -} - + content: "\f111"; } .la-chevron-left:before { - content: "\f053"; -} - + content: "\f053"; } .la-chevron-right:before { - content: "\f054"; -} - + content: "\f054"; } .la-binoculars:before { - content: "\f1e5"; -} - + content: "\f1e5"; } .la-user-cog:before { - content: "\f4fe"; -} - + content: "\f4fe"; } .la-stop-circle:before { - content: "\f28d"; -} - + content: "\f28d"; } .la-redo-alt:before { - content: "\f2f9"; -} - + content: "\f2f9"; } .la-sliders-h:before { - content: "\f1de"; -} - + content: "\f1de"; } .la-compress-arrows-alt:before { - content: "\f78c"; -} - + content: "\f78c"; } .la-users:before { - content: "\f0c0"; -} - + content: "\f0c0"; } .la-spinner:before { - content: "\f110"; -} - + content: "\f110"; } .la-external-link:before { - content: "\f35d"; -} - + content: "\f35d"; } .la-pen:before { - content: "\f304"; -} - + content: "\f304"; } .la-external-link-alt:before { - content: "\f35d"; -} - + content: "\f35d"; } .la-times:before { - content: "\f00d"; -} - + content: "\f00d"; } .la-volume-mute:before { - content: "\f6a9"; -} - + content: "\f6a9"; } .la-plug:before { - content: "\f1e6"; -} - + content: "\f1e6"; } .la-reply:before { - content: "\f3e5"; -} - + content: "\f3e5"; } .la-expand-arrows-alt:before { - content: "\f31e"; -} - + content: "\f31e"; } .la-headset:before { - content: "\f590"; -} - + content: "\f590"; } .la-check:before { - content: "\f00c"; -} - + content: "\f00c"; } .la-exclamation:before { - content: "\f12a"; -} - + content: "\f12a"; } .la-chevron-down:before { - content: "\f078"; -} - + content: "\f078"; } .la-music:before { - content: "\f001"; -} - + content: "\f001"; } .la-thumbtack:before { - content: "\f08d"; -} - + content: "\f08d"; } .la-hdd:before { - content: "\f0a0"; -} - + content: "\f0a0"; } .la-signal:before { - content: "\f012"; -} - + content: "\f012"; } .la-unlock:before { - content: "\f023"; -} - + content: "\f023"; } .la-lock-open:before { - content: "\f3c1"; -} + content: "\f3c1"; } body.darktheme { color: white; scrollbar-color: #000 #333; } - -body.darktheme form>label { +body.darktheme form>label{ color: white; } - -body.darktheme .container-inner { + +body.darktheme .container-inner{ background-color: #40444E } - -body.darktheme .card { +body.darktheme .card{ background-color: #40444E } - -body.darktheme input { +body.darktheme input{ background-color: #ccc; } - -body.darktheme .column>h2 { +body.darktheme .column>h2{ color: #b6b6b6; } - body.darktheme .multiselect .multiselect-contents { - background-color: unset; + background-color:unset; } - -body.darktheme .directorsgrid .vidcon>.las { +body.darktheme .directorsgrid .vidcon > .las { background-color: #424242; } - body.darktheme .form-group .multiselect { background-color: #414141; - padding: 10px; - background-color: #f3f3f3; + padding: 10px; background-color:#f3f3f3; } - body.darktheme h2 { color: #DDD; } - body.darktheme button { filter: brightness(0.70); } - body.darktheme .column .las { color: black; } - body.darktheme label { filter: brightness(0.85); } - -body.darktheme #roomHeader { +body.darktheme #roomHeader{ filter: brightness(0.85); } - body.darktheme div.multiselect { background-color: #414141; } - body.darktheme .videoMenu { background-color: #414141; } - -body.darktheme .audioMenu { +body.darktheme .audioMenu{ background-color: #414141; } - -body.darktheme #avatarDiv { +body.darktheme #avatarDiv{ background-color: #414141; } - body.darktheme .selected { border: solid 3px #f8f7f7; } - body.darktheme #selectAvatarImage label { color: #f8f7f7; } - body.darktheme .avatarLabel { - color: #f8f7f7; + color: #f8f7f7; } - -body.darktheme #headphonesDiv { +body.darktheme #headphonesDiv{ background-color: #414141; } - -body.darktheme #headphonesDiv3 { +body.darktheme #headphonesDiv3{ background-color: #414141; } - -body.darktheme select { +body.darktheme select{ background-color: #b2b2b2; } - body.darktheme .white { filter: brightness(0.85); } - body.darktheme .directorsgrid .vidcon { background-color: #2b2b2bdd; color: #978c8c; } - -body.darktheme .promptModalInner { +body.darktheme .promptModalInner{ filter: brightness(0.65); } - -body.darktheme .infoblob { +body.darktheme .infoblob{ color: #CCC; } - -body.darktheme #addPasswordBasic { +body.darktheme #addPasswordBasic{ background-color: #414141; } - -body.darktheme #effectsDiv { +body.darktheme #effectsDiv{ background-color: #414141; } - -body.darktheme #effectsDiv3 { +body.darktheme #effectsDiv3{ background-color: #414141; } - -body.darktheme .outMessage { +body.darktheme .outMessage{ background-color: #7f89a7; } - body.darktheme .inMessage { background-color: #b1b1b1; } - body.darktheme .actionMessage { background-color: #b1b1b1; } - -body.darktheme #chatInput { - background-color: #ccc; +body.darktheme #chatInput{ + background-color:#ccc; } - -body.darktheme .popup-message { +body.darktheme .popup-message{ background-color: #9b9b9b !important; } - -body.darktheme #audioScreenShare1 { +body.darktheme #audioScreenShare1{ background-color: #414141; } - -body.darktheme #webcamstats2 { +body.darktheme #webcamstats2{ background-color: #414141; } - -body.darktheme #audioSourceScreenshare { +body.darktheme #audioSourceScreenshare{ background-color: #e4e4e4; } - -body.darktheme #headphonesDiv2 { +body.darktheme #headphonesDiv2{ background-color: #414141; } - -body.darktheme #outputSourceScreenshare { +body.darktheme #outputSourceScreenshare{ background-color: #e4e4e4; } - -body.darktheme #audioSource { +body.darktheme #audioSource{ background-color: #e4e4e4; } - -body.darktheme #outputSource { +body.darktheme #outputSource{ background-color: #e4e4e4; } - -body.darktheme #videoSourceSelect { +body.darktheme #videoSourceSelect{ background-color: #e4e4e4; } - -body.darktheme #videoSettings { +body.darktheme #videoSettings{ background-color: #414141; } - -body.darktheme #effectSelector { +body.darktheme #effectSelector{ background-color: #e4e4e4; } - -body.darktheme #effectSelector3 { +body.darktheme #effectSelector3{ background-color: #e4e4e4; } - -body.darktheme #audioSource3 { +body.darktheme #audioSource3{ background-color: #e4e4e4; } - -body.darktheme #videoSource3 { +body.darktheme #videoSource3{ background-color: #e4e4e4; } - -body.darktheme #videoMenu3 { +body.darktheme #videoMenu3{ background-color: #414141; } - -body.darktheme #outputSource3 { +body.darktheme #outputSource3{ background-color: #e4e4e4; } - -body.darktheme #videoSettings3 { +body.darktheme #videoSettings3{ background-color: #414141; } - -body.darktheme .promptModalInner { +body.darktheme .promptModalInner{ background-color: #ccc; } - -body.darktheme .alertModal { +body.darktheme .alertModal{ background-color: #ccc; + filter:brightness(0.85); +} +body.darktheme .directorContainer{ filter: brightness(0.85); } - -body.darktheme .directorContainer { - filter: brightness(0.85); -} - -body.darktheme #grabDirectorSoloLinkParent { +body.darktheme #grabDirectorSoloLinkParent{ background-color: #414141; } - -body.darktheme #grabDirectorSoloLink { +body.darktheme #grabDirectorSoloLink{ background-color: #e4e4e4; } - -body.darktheme .cameraTip { +body.darktheme .cameraTip{ background-color: #27354b; color: #e5dbdb; } - -body.darktheme .invite_setting_group { +body.darktheme .invite_setting_group{ color: black; } - -body.darktheme .invite_setting_item>input { - background-color: white; +body.darktheme .invite_setting_item>input{ + background-color:white; } - -body.darktheme .invite_setting_item>select { - background-color: white; +body.darktheme .invite_setting_item>select{ + background-color:white; } - -.containerGreen { - background-color: #649166 !important; +.containerGreen{ + background-color: #649166!important; } - -body.darktheme .containerGreen { - background-color: #243824 !important; +body.darktheme .containerGreen{ + background-color: #243824!important; } - -body.darktheme .startupWarning>.las { - color: white !important; +body.darktheme .startupWarning>.las { + color:white!important; } - body.darktheme .invite_setting_group_links a { - color: #d2e5ff !important; + color:#d2e5ff!important; } + + /* ---- BASIC CSS CLASSES ---- */ .pressed { background: #1e0000 !important;