diff --git a/main.css b/main.css index 7a8cdb8..81c8c37 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,6 +28,7 @@ --color-mode: light; --video-background-image-size: auto 30%; } + @media (prefers-color-scheme: dark) { :root { --color-mode: dark; @@ -46,46 +47,47 @@ 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 { @@ -111,20 +113,24 @@ 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; @@ -132,6 +138,7 @@ th { background: green; transition: all 100ms linear; } + .meter2 { display: inline-block; width: 0px; @@ -139,6 +146,7 @@ th { background: yellow; transition: all 50ms linear; } + .meter3 { display: inline-block; width: 0px; @@ -146,14 +154,16 @@ 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; @@ -165,17 +175,21 @@ 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; } @@ -206,7 +220,8 @@ button.hint { box-shadow: inset 0px 0px 25px #0004; } -#miniPerformer > video, #miniPerformer > canvas{ +#miniPerformer>video, +#miniPerformer>canvas { width: 80px; height: 45px; margin: 5px; @@ -214,7 +229,7 @@ button.hint { background-size: 50%; } -#reportbutton{ +#reportbutton { visibility: hidden; } @@ -225,6 +240,7 @@ button.hint { .red2 { background-color: #840000 !important; } + .blue { background-color: #000084 !important; } @@ -277,10 +293,12 @@ button.white:active { color: white; border: 1px solid black; } -#meshcastMenu{ + +#meshcastMenu { display: inline-block; - color: #e0dfdf; + color: #e0dfdf; } + #header { width: 100%; padding: 1px; @@ -288,30 +306,35 @@ 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; @@ -322,9 +345,10 @@ 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; @@ -344,7 +368,8 @@ button.white:active { pointer-events: none; font-weight: 700; } -#overlayClockContainer{ + +#overlayClockContainer { margin: 0 auto; background-color: #0000; color: white; @@ -355,51 +380,60 @@ 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; -} -#overlayClockContainer.vmiddle { - bottom:48%; - top:unset; -} -#overlayClockContainer.bottom { - bottom:0%; - top:unset; -} -#overlayClockContainer.left { - right:unset; - left:0; -} -#overlayClockContainer.hmiddle { - right:45%; - left:unset; -} -#overlayClockContainer.right { - right:0; - left:unset; + top: 0%; + bottom: unset; } -#overlayClock{ - padding:2px 20px; - background-color: #0009; +#overlayClockContainer.vmiddle { + bottom: 48%; + top: unset; } + +#overlayClockContainer.bottom { + bottom: 0%; + top: unset; +} + +#overlayClockContainer.left { + right: unset; + left: 0; +} + +#overlayClockContainer.hmiddle { + right: 45%; + left: unset; +} + +#overlayClockContainer.right { + right: 0; + left: unset; +} + +#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; @@ -411,105 +445,116 @@ 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; -} -#overlayClockContainer2.vmiddle { - bottom:48%; - top:unset; -} -#overlayClockContainer2.bottom { - bottom:0%; - top:unset; -} -#overlayClockContainer2.left { - right:unset; - left:0; -} -#overlayClockContainer2.hmiddle { - right:45%; - left:unset; -} -#overlayClockContainer2.right { - right:0; - left:unset; + top: 0%; + bottom: unset; } -#overlayClock2{ - padding:0 5px; +#overlayClockContainer2.vmiddle { + bottom: 48%; + top: unset; +} + +#overlayClockContainer2.bottom { + bottom: 0%; + top: unset; +} + +#overlayClockContainer2.left { + right: unset; + left: 0; +} + +#overlayClockContainer2.hmiddle { + right: 45%; + left: unset; +} + +#overlayClockContainer2.right { + right: 0; + left: unset; +} + +#overlayClock2 { + padding: 0 5px; background-color: #0009; } -#overlayClock2:empty{ - display:none; -} -#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%; - z-index: 7; - vertical-align: top; - text-align: center; - position: fixed; - overflow-wrap: anywhere; - padding:2% 3%; -}. -.avatarSelection{ - vertical-align: top; - margin: 10px 0; - width:130px; - display:inline-block; - margin:0 1px; - text-align: center; - cursor:pointer; -} -.overlayCloseBtn{ - padding: 0; - margin: 10px; - width: 16px; - height: 16px; - position: relative; - bottom: 10px; - background-color: #DDDD; + +#overlayClock2:empty { + display: none; } -#overlayMsgs{ - 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%; - height:100vh; + 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%; + padding: 2% 3%; +} + +. .avatarSelection { + vertical-align: top; + margin: 10px 0; + width: 130px; + display: inline-block; + margin: 0 1px; + text-align: center; + cursor: pointer; +} + +.overlayCloseBtn { + padding: 0; + margin: 10px; + width: 16px; + height: 16px; + position: relative; + bottom: 10px; + background-color: #DDDD; +} + +#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; + z-index: 7; + vertical-align: top; + text-align: center; + position: fixed; + overflow-wrap: anywhere; + 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 } @@ -520,7 +565,7 @@ button.white:active { right: 0; z-index: -1; font-size: 80%; - margin-right:100px; + margin-right: 100px; } .credits>a { @@ -532,7 +577,6 @@ button.white:active { } - body.darktheme .credits { color: #707a93; } @@ -589,8 +633,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 { @@ -611,6 +655,7 @@ body.darktheme .credits>a:visited { text-align: center; margin-top: 10px; } + #mainmenu .row:after { content: ""; display: table; @@ -646,7 +691,8 @@ hr { border-radius: var(--video-rounded); } -#gridlayout,#directorlayout { +#gridlayout, +#directorlayout { padding: 0; width: 100%; height: 100%; @@ -659,9 +705,11 @@ hr { border: 0; margin: 0; } -#gridlayout{ - z-index:-1; + +#gridlayout { + z-index: -1; } + .invite_setting_group { margin: 20px 0px; background-color: #d2d2d2; @@ -676,7 +724,8 @@ 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; } @@ -690,7 +739,7 @@ hr { .directorsgrid .vidcon video { margin: 0 5px; - padding:0; + padding: 0; width: 100%; height: 148px; max-width: 260px; @@ -719,11 +768,13 @@ 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); @@ -733,57 +784,68 @@ 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; @@ -796,10 +858,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; @@ -808,17 +870,20 @@ 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; @@ -828,60 +893,75 @@ 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; @@ -896,16 +976,18 @@ 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; @@ -917,7 +999,8 @@ hr { border-radius: 4px; padding: 1px 4px 1px 0px; } -.signal-meter{ + +.signal-meter { width: 22px; height: 22px; position: absolute; @@ -928,42 +1011,54 @@ 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 { @@ -977,10 +1072,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); @@ -992,27 +1087,31 @@ 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); } @@ -1028,6 +1127,7 @@ hr { height: 11px; margin: 0; } + .queueNotification { position: relative; top: -40px; @@ -1055,7 +1155,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); @@ -1063,10 +1163,15 @@ 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; +} #controlButtons { position: fixed; @@ -1080,6 +1185,7 @@ button.glyphicon-button.active.focus { pointer-events: none; display: flex; } + #controlButtons:empty { display: none; } @@ -1092,20 +1198,21 @@ 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 { @@ -1116,51 +1223,53 @@ 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 } @@ -1170,148 +1279,210 @@ 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%; - } -} -@media only screen and (max-height: 500px){ - #subControlButtons { - transform: scale(0.87); - } - #gridlayout>#container.vidcon { - height:87% - } - #controlButtons { - height:54px; - } -} -@media only screen and (max-height: 400px){ - #subControlButtons { - transform: scale(0.85); - } - #logoname{ - display:none; - } - #head4{ - display:none; - } - #head2{ - display:none; - } - #gridlayout>#container.vidcon { - height:85% - } - #controlButtons { - height:50px; - } - #header{ - min-height:0px; - } -} -@media only screen and (max-height: 300px){ - #gridlayout>#container.vidcon { - height:81% - } - #subControlButtons { - transform: scale(0.81); - } - #controlButtons { - height:46.2px; - } - #head2 { - display:none !important; - } - -} -@media only screen and (max-height: 240px){ - #gridlayout>#container.vidcon { - height:78% - } - #subControlButtons { - transform: scale(0.77); - } - #controlButtons { - height:46.2px; - } -} -@media only screen and (max-height: 190px){ - #gridlayout>#container.vidcon { - height:75% - } - #subControlButtons { - transform: scale(0.73); - } - #controlButtons { - height:42px - } -} -@media only screen and (max-height: 160px){ - #gridlayout>#container.vidcon { - height:70% - } - #subControlButtons { - transform: scale(0.65); - } - #controlButtons { - height:38px - } -} -@media only screen and (max-height: 120px){ - #gridlayout>#container.vidcon { - height:70% - } - #subControlButtons { - transform: scale(0.52); - } - #controlButtons { - height:30px + font-size: 80%; } } -#header:empty{ - display:none; +@media only screen and (max-height: 500px) { + #subControlButtons { + transform: scale(0.87); + } + + #gridlayout>#container.vidcon { + height: 87% + } + + #controlButtons { + height: 54px; + } +} + +@media only screen and (max-height: 400px) { + #subControlButtons { + transform: scale(0.85); + } + + #logoname { + display: none; + } + + #head4 { + display: none; + } + + #head2 { + display: none; + } + + #gridlayout>#container.vidcon { + height: 85% + } + + #controlButtons { + height: 50px; + } + + #header { + min-height: 0px; + } +} + +@media only screen and (max-height: 300px) { + #gridlayout>#container.vidcon { + height: 81% + } + + #subControlButtons { + transform: scale(0.81); + } + + #controlButtons { + height: 46.2px; + } + + #head2 { + display: none !important; + } + +} + +@media only screen and (max-height: 240px) { + #gridlayout>#container.vidcon { + height: 78% + } + + #subControlButtons { + transform: scale(0.77); + } + + #controlButtons { + height: 46.2px; + } +} + +@media only screen and (max-height: 190px) { + #gridlayout>#container.vidcon { + height: 75% + } + + #subControlButtons { + transform: scale(0.73); + } + + #controlButtons { + height: 42px + } +} + +@media only screen and (max-height: 160px) { + #gridlayout>#container.vidcon { + height: 70% + } + + #subControlButtons { + transform: scale(0.65); + } + + #controlButtons { + height: 38px + } +} + +@media only screen and (max-height: 120px) { + #gridlayout>#container.vidcon { + height: 70% + } + + #subControlButtons { + transform: scale(0.52); + } + + #controlButtons { + height: 30px + } +} + +#header:empty { + display: none; } @keyframes pulse { @@ -1319,18 +1490,22 @@ 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); @@ -1338,19 +1513,24 @@ 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; @@ -1373,7 +1553,8 @@ input[type='radio'] { cursor:pointer; } margin: 44vh auto; cursor: help; } -#retryimage{ + +#retryimage { display: block; margin: auto; max-width: 100%; @@ -1383,7 +1564,8 @@ input[type='radio'] { cursor:pointer; } animation: fadeIn 2s; object-fit: contain; } -#retrymessage{ + +#retrymessage { display: block; margin: 80vh auto; animation: fadeIn 2s; @@ -1402,6 +1584,7 @@ input[type='radio'] { cursor:pointer; } 0% { transform: rotate(0deg); } + 100% { transform: rotate(359deg); } @@ -1434,9 +1617,10 @@ 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); } @@ -1460,18 +1644,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 { @@ -1482,35 +1666,53 @@ 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%; @@ -1535,33 +1737,34 @@ 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; @@ -1577,9 +1780,11 @@ 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; @@ -1589,6 +1794,7 @@ 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; @@ -1600,9 +1806,11 @@ 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; @@ -1612,6 +1820,7 @@ 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; @@ -1621,6 +1830,7 @@ input[type=range]::-moz-range-thumb { background: #ffffff; cursor: pointer; } + input[type=range]::-ms-track { width: 100%; height: 8.4px; @@ -1630,18 +1840,21 @@ 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; @@ -1651,22 +1864,25 @@ 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; - + } @@ -1674,22 +1890,27 @@ 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; @@ -1698,102 +1919,130 @@ 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%; @@ -1803,9 +2052,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 { @@ -1820,17 +2069,19 @@ 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; @@ -1843,25 +2094,30 @@ 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 { @@ -1879,7 +2135,7 @@ input[type=range]:focus::-ms-fill-upper { } #audioSourceScreenshare { - display:block; + display: block; height: 60px; width: 100%; overflow: auto; @@ -1888,7 +2144,7 @@ input[type=range]:focus::-ms-fill-upper { } -#headphonesDiv2{ +#headphonesDiv2 { background-color: #f3f3f3; min-width: 350px; display: none; @@ -1898,19 +2154,21 @@ 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; @@ -1945,10 +2203,11 @@ 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, @@ -1989,27 +2248,33 @@ 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; @@ -2051,45 +2316,51 @@ label { .fadeout { animation: fadeout 1s; - opacity: 0!important; -} -.zeroHeight { - max-height:0!important; - height:0!important; - bottom:30px!important; + opacity: 0 !important; } -.partialFadeout{ +.zeroHeight { + max-height: 0 !important; + height: 0 !important; + bottom: 30px !important; +} + +.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 } @@ -2099,6 +2370,7 @@ span[data-action-type="stats-graphs-details-container"]>span{ 0% { opacity: 1 } + 100% { opacity: 0 } @@ -2113,18 +2385,21 @@ 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; @@ -2133,12 +2408,14 @@ 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; @@ -2147,7 +2424,7 @@ span[data-action-type="stats-graphs-details-container"]>span{ } .controlVideoBox { - position:relative; + position: relative; } .container-inner { @@ -2155,18 +2432,21 @@ 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; @@ -2174,26 +2454,29 @@ 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; @@ -2204,8 +2487,9 @@ 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; @@ -2217,7 +2501,7 @@ span[data-action-type="stats-graphs-details-container"]>span{ z-index: 10; margin: 5px; pointer-events: auto; - outline:none; + outline: none; } .rotate225 { @@ -2226,10 +2510,11 @@ 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; } @@ -2247,15 +2532,18 @@ 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; @@ -2267,27 +2555,32 @@ 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 { @@ -2308,8 +2601,9 @@ img { top: 0; left: 0; } -.skip-animation .container-inner{ - display:block; + +.skip-animation .container-inner { + display: block; } .out-animation { @@ -2319,13 +2613,14 @@ img { .pointer { cursor: pointer; } + @keyframes inlightbox { 50% { width: 100%; left: 0; height: 200px; } - + 100% { height: 100%; width: 100%; @@ -2333,20 +2628,23 @@ 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; @@ -2358,6 +2656,7 @@ img { background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.5); } + .modal-content { position: relative; background-color: white; @@ -2365,30 +2664,33 @@ 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; @@ -2398,48 +2700,54 @@ 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; } @@ -2449,11 +2757,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; } @@ -2463,8 +2771,13 @@ img { } @keyframes flip180 { - 0% {transform: rotate(0);} - 100% {transform: rotate(180deg);} + 0% { + transform: rotate(0); + } + + 100% { + transform: rotate(180deg); + } } .flip2 { @@ -2473,8 +2786,13 @@ img { } @keyframes flip1802 { - 0% {transform: rotate(180deg)} - 100% {transform: rotate(360deg);} + 0% { + transform: rotate(180deg) + } + + 100% { + transform: rotate(360deg); + } } @-webkit-keyframes animatetop { @@ -2482,24 +2800,26 @@ 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; @@ -2517,7 +2837,7 @@ img { max-width: 100%; max-height: 100%; object-fit: contain; - overflow:hidden; + overflow: hidden; display: flex; align-items: center; justify-content: center; @@ -2539,28 +2859,53 @@ 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 { @@ -2571,19 +2916,24 @@ 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; @@ -2597,12 +2947,14 @@ 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 { @@ -2625,12 +2977,14 @@ 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 { @@ -2639,21 +2993,23 @@ audio.fileshare::-webkit-media-controls-play-button, video.fileshare::-webkit-me 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; @@ -2664,6 +3020,7 @@ audio.fileshare::-webkit-media-controls-play-button, video.fileshare::-webkit-me border: solid 1px #dfdfdf !important; box-shadow: 1px 1px 2px #cfcfcf !important; } + .popup-message { display: none; align-text: center; @@ -2675,74 +3032,89 @@ audio.fileshare::-webkit-media-controls-play-button, video.fileshare::-webkit-me 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; @@ -2750,17 +3122,21 @@ audio.fileshare::-webkit-media-controls-play-button, video.fileshare::-webkit-me 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; @@ -2770,27 +3146,31 @@ audio.fileshare::-webkit-media-controls-play-button, video.fileshare::-webkit-me 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; @@ -2798,12 +3178,13 @@ 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; @@ -2811,6 +3192,7 @@ button.toggleSettings{ border: 1px solid #ccc; vertical-align: middle; } + #effectsDiv3 { text-align: left; width: 450px; @@ -2820,6 +3202,7 @@ button.toggleSettings{ vertical-align: middle; margin: 17px 0 0 0; } + #avatarDiv3 { text-align: left; width: 450px; @@ -2829,6 +3212,7 @@ button.toggleSettings{ vertical-align: middle; margin: 17px 0 0 0; } + #videoSettings { margin: auto auto; background-color: #f3f3f3; @@ -2837,6 +3221,7 @@ button.toggleSettings{ margin: 0px 0 0px 0; border: 1px solid #ccc; } + #audioMenu { margin: 15px 0 0 0; } @@ -2848,12 +3233,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 { @@ -2862,15 +3247,18 @@ 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; @@ -2880,12 +3268,15 @@ 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; } @@ -2897,20 +3288,21 @@ 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 { @@ -2923,15 +3315,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 { @@ -2942,6 +3334,7 @@ button.toggleSettings{ font-size: 90%; margin: 10px 0 0 0; } + #videoSource3 { display: inline-block; vertical-align: middle; @@ -2949,6 +3342,7 @@ button.toggleSettings{ font-size: 93%; max-width: 235px; } + #outputSource { display: inline-block; vertical-align: middle; @@ -2956,6 +3350,7 @@ button.toggleSettings{ font-size: 93%; max-width: 100%; } + #outputSource3 { display: inline-block; vertical-align: middle; @@ -2963,6 +3358,7 @@ button.toggleSettings{ font-size: 93%; max-width: 100%; } + #addPasswordBasic { width: 450px; white-space: nowrap; @@ -2988,10 +3384,11 @@ 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; @@ -3000,7 +3397,7 @@ button.toggleSettings{ margin: 0 0 15px 0; } -.audioMenu{ +.audioMenu { text-align: left; margin: 17px 0px 0px; max-width: 550px; @@ -3022,10 +3419,12 @@ 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; @@ -3037,27 +3436,32 @@ 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; @@ -3067,24 +3471,31 @@ 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 */ @@ -3098,6 +3509,7 @@ input[type=checkbox] { padding: 5px; margin: 0 5px 0 1px; } + #screenshare { height: 300px; display: inline-block; @@ -3113,6 +3525,7 @@ input[type=checkbox] { background-size: contain; background-color: rgba(0, 0, 0, 0); } + .inMessage { color: #000; margin: 3px; @@ -3122,6 +3535,7 @@ input[type=checkbox] { text-align: left; margin: 10px 3px; } + .actionMessage { color: #000; margin: 3px; @@ -3131,6 +3545,7 @@ input[type=checkbox] { text-align: left; margin: 10px 3px; } + .outMessage { color: #000; margin: 3px; @@ -3140,31 +3555,33 @@ 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 { @@ -3175,8 +3592,9 @@ div#chatBody a { width: 574px; min-width: 300px; max-width: 100%; - z-index:3; + z-index: 3; } + #chatInput { color: #000; background-color: #FFFE; @@ -3187,14 +3605,15 @@ 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; @@ -3210,12 +3629,14 @@ 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; @@ -3230,6 +3651,7 @@ div#chatBody a { background: rgb(158, 158, 158); ; } + .debugStats h1 { font-size: 1rem; text-align: left; @@ -3237,6 +3659,7 @@ div#chatBody a { margin-bottom: 10px; margin-top: -5px; } + .debugStats h2 { font-size: 0.8rem; text-align: left; @@ -3247,27 +3670,33 @@ 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; @@ -3280,6 +3709,7 @@ div#chatBody a { top: 10px; right: 10px; } + .debugStats button:not(.close) { margin: 10px 0px; padding: 10px 0px; @@ -3290,6 +3720,7 @@ div#chatBody a { font-weight: bold; border-bottom: 2px solid #364c84; } + @media only screen and (max-width: 390px) { #chatBody { z-index: 12; @@ -3299,7 +3730,7 @@ div#chatBody a { padding: 1px 7px; margin: 0px; } - + #chatModule { bottom: 50px; position: fixed; @@ -3308,7 +3739,7 @@ div#chatBody a { width: 400px; max-width: 100%; } - + #chatInput { max-width: 99%; min-width: 240px; @@ -3316,29 +3747,33 @@ 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; @@ -3346,43 +3781,53 @@ 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; @@ -3392,51 +3837,56 @@ 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; @@ -3451,26 +3901,32 @@ 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; @@ -3484,6 +3940,7 @@ div#roomnotes2 { width: 100%; height: 5px; } + .controlsGrid .spacer.big { height: 15px; } @@ -3499,30 +3956,35 @@ 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%; @@ -3531,6 +3993,7 @@ div#roomnotes2 { font-size: 80%; cursor: pointer; } + .controlsGrid .orderspan { font-size: 50%; display: flex; @@ -3540,8 +4003,9 @@ div#roomnotes2 { text-align: center; position: relative; - user-select: none; + user-select: none; } + .controlsGrid .orderspan .order-label { width: max-content; } @@ -3550,44 +4014,47 @@ 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; } @@ -3597,7 +4064,8 @@ div#roomnotes2 { margin-left: 5px; position: relative; cursor: pointer; -} +} + .fullwindowButton { transition: opacity 0.3s; width: 4vh; @@ -3610,34 +4078,39 @@ 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; @@ -3648,12 +4121,14 @@ 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; @@ -3664,28 +4139,34 @@ 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; @@ -3694,16 +4175,18 @@ 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; @@ -3718,6 +4201,7 @@ a#reshare { padding: 0; display: inline; } + #copythisurl+i { display: inline; font-size: 130%; @@ -3727,6 +4211,7 @@ a#reshare { border-radius: 0; padding: 5px; } + #joinroomID+button { margin: 0px var(--regular-margin); } @@ -3751,12 +4236,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; } @@ -3770,19 +4255,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; } @@ -3791,7 +4276,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; } @@ -3830,34 +4315,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; } @@ -3867,46 +4352,50 @@ 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; -} -#voiceMeterTemplate2{ - display:none; +#voiceMeterTemplate { + display: none; } -#userList{ +#voiceMeterTemplate2 { + display: none; +} + +#userList { line-height: 1.3em; } -#userList > div > .video-meter { +#userList>div>.video-meter { padding: 5px; margin-left: 5px; top: 0; @@ -3914,42 +4403,45 @@ 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 { @@ -3976,22 +4468,28 @@ 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%; @@ -4023,16 +4521,24 @@ 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; @@ -4040,7 +4546,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; @@ -4056,10 +4562,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; } @@ -4094,31 +4600,35 @@ 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; @@ -4129,14 +4639,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; @@ -4147,20 +4657,22 @@ 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; @@ -4174,16 +4686,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; @@ -4194,27 +4706,28 @@ 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; @@ -4228,24 +4741,26 @@ 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; } @@ -4260,11 +4775,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; @@ -4295,7 +4810,7 @@ input:checked + .slider:before { color: blue; } - #alertModal a:active { +#alertModal a:active { color: blue; } @@ -4324,7 +4839,8 @@ input:checked + .slider:before { z-index: 0; opacity: 0.8; } -#modalBackdrop.darktheme{ + +#modalBackdrop.darktheme { background-color: var(--dark-background-color); } @@ -4339,11 +4855,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; @@ -4353,11 +4869,12 @@ 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%; } @@ -4376,18 +4893,20 @@ 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; @@ -4398,10 +4917,12 @@ 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; @@ -4415,48 +4936,57 @@ 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; @@ -4464,424 +4994,697 @@ 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 #grabDirectorSoloLinkParent{ + +body.darktheme .directorContainer { + filter: brightness(0.85); +} + +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;