mirror of
https://github.com/SrIzan10/vdo.ninja.git
synced 2026-05-01 11:05:24 +00:00
attempt at an accurate volume meter
not accurate enough to justify the extra cpu cycles. yet.
This commit is contained in:
Steve Seguin
86
index.html
86
index.html
@@ -54,7 +54,7 @@
|
||||
transition: opacity .1s linear;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="./main.css?ver=146" />
|
||||
<link rel="stylesheet" href="./main.css?ver=150" />
|
||||
<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/adapter.min.js"></script>
|
||||
<style id="lightbox-animations" type="text/css"></style>
|
||||
</head>
|
||||
@@ -66,8 +66,8 @@
|
||||
<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
|
||||
<link itemprop="url" href="./media/vdoNinja_logo_full.png" />
|
||||
</span>
|
||||
<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/CodecsHandler.js?ver=35"></script>
|
||||
<script type="text/javascript" crossorigin="anonymous" src="./webrtc.js?ver=339"></script>
|
||||
<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/CodecsHandler.js?ver=36"></script>
|
||||
<script type="text/javascript" crossorigin="anonymous" src="./webrtc.js?ver=340"></script>
|
||||
<input id="zoomSlider" type="range" style="display: none;" />
|
||||
<div id="header">
|
||||
|
||||
@@ -115,7 +115,12 @@
|
||||
<div id="controlButtons" >
|
||||
<div id="obsState" class="advanced" >ACTIVE</div>
|
||||
<div id="subControlButtons">
|
||||
<div id="queuebutton" title="Load the next guest in queue" alt="Load the next guest in queue" onmousedown="event.preventDefault(); event.stopPropagation();" onclick="session.nextQueue()" tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="advanced float" style="cursor: pointer;" >
|
||||
|
||||
<div id="blindAllGuests" title="Blind all guests in room (toggle)" alt="Blind all guests in room (toggle)" onmousedown="event.preventDefault(); event.stopPropagation();" onclick="blindAllGuests(this, event)" tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="advanced float" style="cursor: pointer;" >
|
||||
<i class="toggleSize las la-eye my-float"></i>
|
||||
</div>
|
||||
|
||||
<div id="queuebutton" title="Load the next guest in queue" alt="Load the next guest in queue" onmousedown="event.preventDefault(); event.stopPropagation();" onclick="nextQueue()" tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="advanced float" style="cursor: pointer;" >
|
||||
<i id="queuetoggle" class="toggleSize las la-stream my-float"></i>
|
||||
<div id="queueNotification"></div>
|
||||
</div>
|
||||
@@ -237,7 +242,7 @@
|
||||
<span data-translate="room-name">Room Name</span>:
|
||||
</b>
|
||||
</div>
|
||||
<input type="text" autocorrect="off" autocapitalize="none" id="videoname1" placeholder="Enter a Room Name here" onkeydown="checkStrengthRoom(event, 'securityLevelRoom');" onchange="checkStrengthRoom(event, 'securityLevelRoom');" onkeyup="enterPressed(event, createRoom);" maxlength="30" style="font-size: 110%; padding: 5px;" />
|
||||
<input type="text" autocorrect="off" autocapitalize="none" id="videoname1" placeholder="Enter a room name here" onkeydown="checkStrengthRoom(event, 'securityLevelRoom');" onchange="checkStrengthRoom(event, 'securityLevelRoom');" onkeyup="enterPressed(event, createRoom);" maxlength="30" style="max-width: 431px;width: 100%;font-size: 110%; padding: 5px;" />
|
||||
<div id="securityLevelRoom" style="display:none;margin-top:3px;position:relative;top:3px;font-size:0.8em;"></div>
|
||||
</th>
|
||||
|
||||
@@ -255,7 +260,7 @@
|
||||
<span data-translate="password-input-field">Password</span>:
|
||||
</b>
|
||||
</div>
|
||||
<input type="text" autocorrect="off" autocapitalize="none" id="passwordRoom" placeholder="Optional room password here" onkeydown="checkStrengthRoom(event, 'securityLevelRoom');" onchange="checkStrengthRoom(event, 'securityLevelRoom');" onkeyup="enterPressed(event, createRoom);" maxlength="30" style="font-size: 110%; padding: 5px;" />
|
||||
<input type="text" autocorrect="off" autocapitalize="none" id="passwordRoom" placeholder="Optional room password here" onkeydown="checkStrengthRoom(event, 'securityLevelRoom');" onchange="checkStrengthRoom(event, 'securityLevelRoom');" onkeyup="enterPressed(event, createRoom);" maxlength="50" style="max-width: 431px;width: 100%;font-size: 110%; padding: 5px;" />
|
||||
</th>
|
||||
|
||||
</tr><tr >
|
||||
@@ -264,7 +269,7 @@
|
||||
<input id="broadcastFlag" type="checkbox" title="For large group rooms, this option can reduce the load on remote guests substantially" />
|
||||
</th><th style="text-align:left;; padding-top: 20px;">
|
||||
<b>
|
||||
<span data-translate="guests-only-see-director" style="cursor: help;" title="For large group rooms, this option can reduce the load on remote guests substantially" >Guests can only see the Director's Video</span>
|
||||
<span data-translate="guests-only-see-director" style="cursor: help;" title="For large group rooms, this option can reduce the load on remote guests substantially" >The guests can see the director, but not other guests' videos</span>
|
||||
</b>
|
||||
</th>
|
||||
</tr><tr>
|
||||
@@ -273,10 +278,10 @@
|
||||
<input id="showdirectorFlag" type="checkbox" title="The director will be visible in scenes as if a performer themselves." />
|
||||
</th><th style="text-align:left;; padding-bottom: 20px;">
|
||||
<b>
|
||||
<span data-translate="scenes-can-see-director" style="cursor: help;" title="If checked, the director can be added to scenes as if a guest. Otherwise, the director will never appear in a scene." >Director will be performing; appearing in scenes</span>
|
||||
<span data-translate="scenes-can-see-director" style="cursor: help;" title="If checked, the director can be added to scenes as if a guest. Otherwise, the director will never appear in a scene." >The director will be performing as well, appearing in group scenes</span>
|
||||
</b>
|
||||
</th>
|
||||
</tr><tr>
|
||||
</tr><tr style="display:none;">
|
||||
<th style="text-align:right; padding: 5px;">
|
||||
|
||||
</th>
|
||||
@@ -295,11 +300,11 @@
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div style="margin: 0 auto; width: 400px; max-width:100%;">
|
||||
<div style="margin: 0 auto; width: 470px; max-width:100%;">
|
||||
<button onclick="createRoom()" class="gobutton" style="width:100%;" alt="Enter the room as the group's director" title="You'll enter as the room's director">
|
||||
<span data-translate="enter-the-rooms-control">Enter the Room's Control Center</span>
|
||||
<span data-translate="enter-the-rooms-control">Enter the room's Control Center in the director's role</span>
|
||||
</button>
|
||||
<br /><br />
|
||||
<br />
|
||||
<button class="white roomnotes" style="display: block;" onclick="toggle(document.getElementById('roomnotes'),this);">
|
||||
<span data-translate="show-tips">Show me some tips..</span>
|
||||
</button>
|
||||
@@ -317,10 +322,10 @@
|
||||
<br />
|
||||
<br />
|
||||
</ul>
|
||||
<br />
|
||||
<br /><br />
|
||||
<i>Looking to just chat and not direct?</i>
|
||||
<button onclick="jumptoroom2()" class="gobutton" style="width:100%;" alt="Enter the room as the group's director" title="You'll enter as the room's director">
|
||||
<span data-translate="join-the-room-basic">Join room as participant</span>
|
||||
<span data-translate="join-the-room-basic">Join the room as a Participant, rather than a director</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -399,7 +404,13 @@
|
||||
<div class="audioTitle">
|
||||
<i class="las la-microphone-alt"></i><span data-translate="select-audio-source"> Audio Source(s) </span>
|
||||
<i id='chevarrow1' class="chevron bottom" aria-hidden="true"></i>
|
||||
<div class="meter" id="meter1"></div><div class="meter2" id="meter2"></div>
|
||||
<div style="width:182px;background-color:#9999;display: inline-block;background-position: left bottom;
|
||||
background-image: linear-gradient(to right, black 3%, rgba(255,255,255,0) 0%);
|
||||
background-size: 30px 1px;
|
||||
background-repeat: repeat-x;
|
||||
margin-bottom: 2px;">
|
||||
<div class="meter" id="meter1"></div><div class="meter2" id="meter2"></div><div class="meter3" id="meter3"></div><div class="meter4" id="meter4"></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<ul id="audioSource" class="multiselect-contents" >
|
||||
@@ -417,7 +428,10 @@
|
||||
<i class="las la-headphones"></i><span data-translate="select-output-source"> Audio Output Destination:
|
||||
</span><button onclick="playtone()" class="white" style="margin:0 0 0 15px;padding: 2px 10px 0px 10px;" type="button">Test</button></div>
|
||||
<select id="outputSource" ></select>
|
||||
|
||||
<div id="headphoneTip1" class="cameraTip advanced">
|
||||
<i class="las la-info-circle"></i>
|
||||
<p><span id="headphoneTipContext1"></span></p>
|
||||
</div>
|
||||
</span>
|
||||
<div id="effectsDiv">
|
||||
<div style="text-align: left;display: inline-block;">
|
||||
@@ -773,10 +787,10 @@
|
||||
Some devices that use hardware encoding can experience video glitching; switching to VP8 or VP9 as a <a target='_blank' title='Jump to the documentation' href='https://docs.vdo.ninja/viewers-settings/codec'>codec</a> may help.
|
||||
</li>
|
||||
<li>
|
||||
Video glitching and random audio-loss can occur when using the OBS browser source. The <a href='https://github.com/steveseguin/electroncapture/blob/master/README.md' target="_blank">Electron Capture app</a> avoids these issues.
|
||||
Windows users, upgrading to OBS 27.2 or newer will fix video glitching issues caused by network packet loss. <a href='https://github.com/obsproject/obs-studio/releases' target="_blank">Grab the newest OBS version here</a>.
|
||||
</li>
|
||||
<li>
|
||||
Samsung smartphones (A-series) may fail to publish video with some mobile browsers; try using Firefox or the native <a href='https://docs.vdo.ninja/getting-started/native-mobile-app-versions#android-download-link'>VDO.Ninja Android app</a> in these cases.
|
||||
Samsung smartphones (A-series) may fail to publish video with some mobile browsers; try using Firefox Mobile or the native <a href='https://docs.vdo.ninja/getting-started/native-mobile-app-versions#android-download-link'>Android app</a> in these cases.
|
||||
</li>
|
||||
<br />
|
||||
<h4>
|
||||
@@ -1182,11 +1196,11 @@
|
||||
</div>
|
||||
<div></div>
|
||||
<div id='guestFeeds' style="display:none"><div id='deleteme'>
|
||||
<div class='vidcon directorMargins' style='min-height: 300px;text-align: center;'><h2>Guest 1</h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
|
||||
<div class='vidcon directorMargins' style='min-height: 300px;text-align: center;'><h2>Guest 2</h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
|
||||
<div class='vidcon directorMargins' style='min-height: 300px;text-align: center;'><h2>Guest 3</h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
|
||||
<div class='vidcon directorMargins' style='min-height: 300px;text-align: center;'><h2>Guest 4</h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
|
||||
<h4 style='color:#CCC;margin:20px 20px 0 20px;' data-translate='more-than-four-can-join' >These four guest slots are just for demonstration. More than four guests can actually join a room.</h4>
|
||||
<div class='vidcon directorMargins' id='fakeguest1' style='min-height: 300px;text-align: center;'><h2>Guest 1</h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
|
||||
<div class='vidcon directorMargins' id='fakeguest2' style='min-height: 300px;text-align: center;'><h2>Guest 2</h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
|
||||
<div class='vidcon directorMargins' id='fakeguest3' style='min-height: 300px;text-align: center;'><h2>Guest 3</h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
|
||||
<div class='vidcon directorMargins' id='fakeguest4' style='min-height: 300px;text-align: center;'><h2>Guest 4</h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
|
||||
<h4 style='color:#CCC;margin:20px 20px 0 20px;' id='fakeguestinfo' data-translate='more-than-four-can-join' >These four guest slots are just for demonstration. More than four guests can actually join a room.</h4>
|
||||
</div></div>
|
||||
</div>
|
||||
<div id="hiddenElements"></div>
|
||||
@@ -1219,6 +1233,15 @@
|
||||
<span data-translate="add-to-scene">add to scene 1</span>
|
||||
</button>
|
||||
|
||||
<button data-action-type="solo-video" style="text-shadow: 0px 0px yellow;" data-value="0" title="Solo this video everywhere" onclick="requestInfocus(this);">
|
||||
<i class="las la-user"></i>
|
||||
<span data-translate="solo-video">Highlight guest</span>
|
||||
</button>
|
||||
|
||||
<font class="tooltip" style="height: 0; border: 0;">
|
||||
<input data-action-type="volume" type="range" min="0" max="200" value="100" title="Remotely change the volume of this guest" oninput="remoteVolumeUI(this)" ondblclick="this.value=100;remoteVolume(this);remoteVolumeUI(this);" onchange="remoteVolume(this);" style="grid-column: 2; margin:5px; width: 93%; position: relative;top: 0.6em; background-color:#fff0;"/><span class="tooltiptext" style='float: right; overflow: auto; left: 40px; width: 3em; top: -13px; margin: 0; position:relative;font-family:"Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", Times, Symbola, Aegyptus,Code2000, Code2001, Code2002, Musica, serif, LastResort;' >100</span>
|
||||
</font>
|
||||
|
||||
<button data-action-type="mute-guest" title="Mute this guest everywhere" onclick="remoteMute(this, event);">
|
||||
<i class="las la-microphone-slash" style="color:#900"></i>
|
||||
<span data-translate="mute-guest" >mute guest</span>
|
||||
@@ -1276,10 +1299,7 @@
|
||||
<span class="hideDropMenu" style="grid-column: 2;" ></span>
|
||||
|
||||
|
||||
<button class="hidden" data-cluster="2" data-action-type="solo-video" style="text-shadow: 0px 0px yellow;" data-value="0" title="Solo this video everywhere" onclick="requestInfocus(this);">
|
||||
<i class="las la-user"></i>
|
||||
<span data-translate="solo-video">Highlight guest</span>
|
||||
</button>
|
||||
|
||||
|
||||
<button class="hidden" data-cluster="2" data-action-type="hide-guest" title="Hide this guest everywhere" onclick="remoteMuteVideo(this, event);">
|
||||
<i class="las la-video-slash"></i>
|
||||
@@ -1294,9 +1314,6 @@
|
||||
<i class="las la-eye-slash"></i> <span data-translate="toggle-remote-display">Blind Guest</span>
|
||||
</button>
|
||||
|
||||
<font class="tooltip hidden" data-cluster="2" style="height: 0; border: 0;">
|
||||
<input data-action-type="volume" type="range" min="0" max="200" value="100" title="Remotely change the volume of this guest" oninput="remoteVolumeUI(this)" ondblclick="this.value=100;remoteVolume(this);remoteVolumeUI(this);" onchange="remoteVolume(this);" style="grid-column: 2; margin:5px; width: 93%; position: relative;top: 0.6em; background-color:#fff0;"/><span class="tooltiptext" style='float: right; overflow: auto; left: 40px; width: 2.5em; top: -13px; margin: 0; position:relative;font-family:"Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", Times, Symbola, Aegyptus,Code2000, Code2001, Code2002, Musica, serif, LastResort;' >100</span>
|
||||
</font>
|
||||
|
||||
<span class="hidden" data-cluster="2" data-action-type="change-quality">
|
||||
<button style="width: 35.2px" data-action-type="change-quality1" title="Disable Video Preview" onclick="toggleQualityDirector(0, this.dataset.UUID, this);">
|
||||
@@ -1756,7 +1773,8 @@
|
||||
<i class="las la-fire-alt"></i>
|
||||
</div>
|
||||
<div id="batteryMeterTemplate" class="battery advanced" data-plugged="1">
|
||||
<div class="battery-level" style="height:100%;">🔌</div>
|
||||
<div class="battery-level" style="height:100%;"></div>
|
||||
<div class="battery-charging">+</div>
|
||||
</div>
|
||||
<div id="voiceMeterTemplate" class="video-meter advanced">
|
||||
</div>
|
||||
@@ -1840,7 +1858,7 @@
|
||||
|
||||
|
||||
var session = WebRTC.Media; // session is a required global variable if configuring manually. Run before loading main.js but after webrtc.js.
|
||||
session.version = "20.1";
|
||||
session.version = "20.2";
|
||||
session.streamID = session.generateStreamID(); // randomly generates a streamID for this session. You can set your own programmatically if needed
|
||||
|
||||
session.defaultPassword = "someEncryptionKey123"; // Change this password if self-deploying for added security/privacy
|
||||
@@ -1905,11 +1923,11 @@
|
||||
// session.introOnClean = true; // this will load the page with the webcam selection screen if &push or &room is in the URL; no need to use &webcam.
|
||||
</script>
|
||||
<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/aes.js"></script>
|
||||
<script type="text/javascript" crossorigin="anonymous" id="lib-js" src="./lib.js?ver=247"></script>
|
||||
<script type="text/javascript" crossorigin="anonymous" id="lib-js" src="./lib.js?ver=250"></script>
|
||||
<!--
|
||||
// If you wish to change branding, blank offers a good clean start.
|
||||
<script type="text/javascript" id="main-js" src="./main.js" data-translation="blank"></script>
|
||||
-->
|
||||
<script type="text/javascript" crossorigin="anonymous" id="main-js" src="./main.js?ver=288"></script>
|
||||
<script type="text/javascript" crossorigin="anonymous" id="main-js" src="./main.js?ver=289"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
164
main.css
164
main.css
@@ -111,7 +111,21 @@ th {
|
||||
background: yellow;
|
||||
transition: all 50ms linear;
|
||||
}
|
||||
|
||||
.meter3 {
|
||||
display: inline-block;
|
||||
width: 0px;
|
||||
height: 10px;
|
||||
background: red;
|
||||
transition: all 25ms linear;
|
||||
}
|
||||
.meter4 {
|
||||
display: inline-block;
|
||||
width: 2px;
|
||||
height: 10px;
|
||||
background: black;
|
||||
position:relative;
|
||||
float:left;
|
||||
}
|
||||
#mynetwork {
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
@@ -344,6 +358,7 @@ button.white:active {
|
||||
}
|
||||
|
||||
|
||||
|
||||
body.darktheme .credits {
|
||||
color: #707a93;
|
||||
}
|
||||
@@ -539,6 +554,8 @@ hr {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.battery {
|
||||
border: 3px solid #4192c5;
|
||||
width: 11px;
|
||||
@@ -551,10 +568,20 @@ hr {
|
||||
font-size: 1.5em;
|
||||
z-index: 2;
|
||||
cursor: help;
|
||||
display:block;
|
||||
display:none;
|
||||
}
|
||||
.battery[data-plugged="1"]{
|
||||
font-size:0px;
|
||||
|
||||
.battery-charging{
|
||||
margin: 0;
|
||||
left: -1px;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
font-size: 0.55em;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.battery[data-plugged="1"] > .battery-charging {
|
||||
display:block;
|
||||
}
|
||||
.battery.warn {
|
||||
border: 3px solid #EFAF13;
|
||||
@@ -566,8 +593,15 @@ hr {
|
||||
background: #30b455;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
font-size: 0.7em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.hasMedia > .battery {
|
||||
display:block;
|
||||
}
|
||||
|
||||
.signal-meter{
|
||||
@@ -578,10 +612,13 @@ hr {
|
||||
top: 1px;
|
||||
background-color: #FFF2;
|
||||
font-size: 1.5em;
|
||||
display:block;
|
||||
display:none;
|
||||
z-index: 2;
|
||||
cursor: help;
|
||||
}
|
||||
.hasMedia > .signal-meter {
|
||||
display:block;
|
||||
}
|
||||
.signal-meter[data-cpu="0"]>.la-signal {
|
||||
display:block;
|
||||
}
|
||||
@@ -900,9 +937,6 @@ button.btnArmTransferRoom.selected{
|
||||
#head4{
|
||||
display:none;
|
||||
}
|
||||
#head5{
|
||||
display:none;
|
||||
}
|
||||
#head2{
|
||||
display:none;
|
||||
}
|
||||
@@ -1034,7 +1068,27 @@ input[type='radio'] { cursor:pointer; }
|
||||
margin: 44vh auto;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
#retryimage{
|
||||
display: block;
|
||||
margin: 25vh auto;
|
||||
max-width: 50%;
|
||||
max-height: 50%;
|
||||
animation: fadeIn 2s;
|
||||
}
|
||||
#retrymessage{
|
||||
display: block;
|
||||
margin: 80vh auto;
|
||||
animation: fadeIn 2s;
|
||||
color: white;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
float: left;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
@keyframes spin-animation {
|
||||
0% {
|
||||
@@ -1072,6 +1126,22 @@ body {
|
||||
margin: 0;
|
||||
opacity: 1;
|
||||
transition: opacity .1s linear;
|
||||
scrollbar-color:#666 #201c29;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: inset 0 0 13px rgb(0 0 0 / 90%);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: inset 0 0 16px rgb(150 150 150 / 100%);
|
||||
border: solid 3px transparent;
|
||||
}
|
||||
|
||||
.previewWebcam {
|
||||
@@ -1280,6 +1350,31 @@ input[type=range]:focus::-ms-fill-upper {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 1220px) {
|
||||
#fakeguest4{
|
||||
display: none!important;
|
||||
}
|
||||
#fakeguestinfo{
|
||||
display: none!important;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 933px) {
|
||||
#fakeguest3{
|
||||
display: none!important;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 641px) {
|
||||
#fakeguest2{
|
||||
display: none!important;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 292px) {
|
||||
#fakeguest1{
|
||||
display: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
#popOutChat{
|
||||
display: none;
|
||||
@@ -2684,14 +2779,24 @@ a.task {
|
||||
.shift {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin: 7px 0 0 4px;
|
||||
margin: 0 0 0 4px;
|
||||
padding: 0;
|
||||
width: 27px;
|
||||
width: 33px;
|
||||
font-size: 0.8em;
|
||||
top: -7px;
|
||||
top: -4.9px;
|
||||
}
|
||||
.shift>i {
|
||||
cursor:pointer;
|
||||
width: 10px;
|
||||
margin: 0 auto;
|
||||
left: -1.1px;
|
||||
position: relative;
|
||||
}
|
||||
.shift.locked>i{
|
||||
display:none;
|
||||
}
|
||||
.shift.locked>span{
|
||||
margin-left: 7px;
|
||||
}
|
||||
#toggleroomnotes {
|
||||
grid-column: 4;
|
||||
@@ -2744,19 +2849,19 @@ i.las.la-circle {
|
||||
}
|
||||
.streamID {
|
||||
text-align: right;
|
||||
margin: 5px 5px 5px 0px;
|
||||
margin: 5px 5px 2px 0px;
|
||||
font-size: 0.7em;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 230px;
|
||||
width: 227px;
|
||||
display: inline-block;
|
||||
}
|
||||
.streamID i {
|
||||
margin-left: 5px;
|
||||
font-size: 1.3em;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
top: 1px;
|
||||
}
|
||||
.soloLink {
|
||||
background: none;
|
||||
@@ -2776,7 +2881,7 @@ div#guestFeeds {
|
||||
background: var(--container-color);
|
||||
padding: 5px 0 15px 20px;
|
||||
display: inline-block;
|
||||
margin: 0px var(--regular-margin);
|
||||
margin: 0px var(--regular-margin) 80px var(--regular-margin);
|
||||
}
|
||||
|
||||
div#guestFeeds:empty {
|
||||
@@ -2917,7 +3022,7 @@ span#guestTips {
|
||||
|
||||
.video-meter {
|
||||
padding:0.5vh;
|
||||
display:block;
|
||||
display:none;
|
||||
width:0.5vh;
|
||||
height:0.5vh;
|
||||
min-width:10px;
|
||||
@@ -2933,7 +3038,7 @@ span#guestTips {
|
||||
|
||||
.video-meter-2 {
|
||||
padding:0;
|
||||
display:block;
|
||||
display:none;
|
||||
width:100%;
|
||||
height:100%;
|
||||
min-width:10px;
|
||||
@@ -2954,6 +3059,7 @@ span#guestTips {
|
||||
right: 10px;
|
||||
}
|
||||
.video-meter2 {
|
||||
display:none;
|
||||
padding:0;
|
||||
width: 4px;
|
||||
height:0%;
|
||||
@@ -2968,6 +3074,18 @@ span#guestTips {
|
||||
transition: height 0.1s ease, background-color 0.1s ease;
|
||||
}
|
||||
|
||||
|
||||
.hasMedia > .video-meter2 {
|
||||
display:block;
|
||||
}
|
||||
.hasMedia > .video-meter-2 {
|
||||
display:block;
|
||||
}
|
||||
.hasMedia > .video-meter {
|
||||
display:block;
|
||||
}
|
||||
|
||||
|
||||
#voiceMeterTemplate{
|
||||
display:none;
|
||||
}
|
||||
@@ -3204,7 +3322,7 @@ input:checked + .slider:before {
|
||||
.promptModalMessage {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 98%;
|
||||
width: 93%;
|
||||
margin: 0 5%;
|
||||
}
|
||||
|
||||
@@ -3643,7 +3761,10 @@ input:checked + .slider:before {
|
||||
content: "\f0a0"; }
|
||||
.la-signal:before {
|
||||
content: "\f012"; }
|
||||
|
||||
.la-unlock:before {
|
||||
content: "\f023"; }
|
||||
.la-lock-open:before {
|
||||
content: "\f3c1"; }
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-mode: dark;
|
||||
@@ -3653,6 +3774,7 @@ input:checked + .slider:before {
|
||||
|
||||
body.darktheme {
|
||||
color: white;
|
||||
scrollbar-color: #000 #333;
|
||||
}
|
||||
body.darktheme form>label{
|
||||
color: white;
|
||||
|
||||
Reference in New Issue
Block a user