elias/vdo.ninja
1
0
Fork 0
mirror of https://github.com/eliasstepanik/vdo.ninja.git synced 2026-01-24 20:08:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1043 from lindenkron/Mobile-fix

Browse Source 
Settings menu & Apple mobile fixes
This commit is contained in:
Steve Seguin 2023-04-12 18:57:38 -04:00 committed by GitHub
commit 484fde4b4e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 404 additions and 334 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

218
index.html
View File

@ -133,100 +133,112 @@
<div id="head8" class="hidden" data-translate="director-video-muted-you">The director has disabled your camera temporarily.</div> <div id="head8" class="hidden" data-translate="director-video-muted-you">The director has disabled your camera temporarily.</div>
</div> </div>
<div id="controlButtons" class="hidden"> <div id="controlButtons" class="hidden">
<div id="obsState" class="hidden" >ACTIVE</div> <div class="controlPositioning">
<div id="subControlButtons"> <div id="obsState" class="hidden" >ACTIVE</div>
<div id="chatModule" style="display:none;">
<div id="blindAllGuests" title="Blind all guests in room (toggle)" alt="Blind all guests in room (toggle)" aria-label="Blind all guests in room" onmousedown="event.preventDefault(); event.stopPropagation();" onclick="blindAllGuests(this, event)" tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="hidden float" style="cursor: pointer;" > <a target="popup" id="popOutChat" style="cursor:pointer;text-align:right;color:#B3C7F9;" onclick="createPopoutChat();"><i class="las la-external-link-alt"></i></a>
<i class="toggleSize las la-eye"></i> <div id="chatBody">
</div> <div class="inMessage" id="welcomeMsg" data-translate='welcome-to-vdo-ninja-chat'>
Welcome to the chat! You can send text messages directly to connected peers from here.
<div id="queuebutton" title="Load the next guest in queue" alt="Load the next guest in queue" aria-label="Load next guest in queue" onmousedown="event.preventDefault(); event.stopPropagation();" onclick="nextQueue()" tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="hidden float" style="cursor: pointer;" > </div>
<i id="queuetoggle" class="toggleSize las la-stream"></i> </div>
<div id="queueNotification"></div> <input type="text" id="chatInput" placeholder="Enter chat message to send here" onkeypress="EnterButtonChat(event)" />
</div> <button class="chatBarInputButton" onclick="sendChatMessage()" data-translate='send-chat'>Send</button>
</div>
<div id="sharefilebutton" title="Transfer any file to the group" alt="Transfer any file to the group" aria-label="Select file to transfer" onmousedown="event.preventDefault(); event.stopPropagation();" onclick="toggleFileshare()" tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float" style="cursor: pointer;" > <div id="subControlButtons">
<i id="filesharetoggle" class="toggleSize las la-file-upload"></i>
<div id="transferNotification"></div> <div id="blindAllGuests" title="Blind all guests in room (toggle)" alt="Blind all guests in room (toggle)" aria-label="Blind all guests in room" onmousedown="event.preventDefault(); event.stopPropagation();" onclick="blindAllGuests(this, event)" tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="hidden float" style="cursor: pointer;" >
</div> <i class="toggleSize las la-eye"></i>
</div>
<div id="chatbutton" title="Toggle the Chat" alt="Toggle the Chat" aria-label="Text chat" onmousedown="event.preventDefault(); event.stopPropagation();" onclick="toggleChat()" tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="hidden float" style="cursor: pointer;" >
<i id="chattoggle" class="toggleSize las la-comment-alt"></i> <div id="queuebutton" title="Load the next guest in queue" alt="Load the next guest in queue" aria-label="Load next guest in queue" onmousedown="event.preventDefault(); event.stopPropagation();" onclick="nextQueue()" tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="hidden float" style="cursor: pointer;" >
<div id="chatNotification"></div> <i id="queuetoggle" class="toggleSize las la-stream"></i>
</div> <div id="queueNotification"></div>
<div id="mutespeakerbutton" onmousedown="event.preventDefault(); event.stopPropagation();" alt="Toggle the speaker output." aria-label="Mute Speaker output" title="Mute the Speaker" onclick="toggleSpeakerMute()" tabindex="17" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="hidden float" style="cursor: pointer;" > </div>
<i id="mutespeakertoggle" class="toggleSize las la-volume-up" style="position: relative; top: 0.5px;"></i>
</div> <div id="sharefilebutton" title="Transfer any file to the group" alt="Transfer any file to the group" aria-label="Select file to transfer" onmousedown="event.preventDefault(); event.stopPropagation();" onclick="toggleFileshare()" tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float" style="cursor: pointer;" >
<div id="mutebutton" onmousedown="toggleMute(false, event);event.preventDefault(); event.stopPropagation();" alt="Mute the Mic" aria-label="Mute Microphone" title="Mute the Mic" ontouchstart="toggleMute(false, event);event.preventDefault(); event.stopPropagation();" tabindex="18" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="hidden float" style="cursor: pointer;"> <i id="filesharetoggle" class="toggleSize las la-file-upload"></i>
<i id="mutetoggle" class="toggleSize las la-microphone" style="position: relative; top: 0.5px;"></i> <div id="transferNotification"></div>
</div> </div>
<div id="mutevideobutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Disable the Camera" alt="Disable the Camera" aria-label="Mute Camera" onclick="toggleVideoMute()" tabindex="19" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="hidden float" style="cursor: pointer;">
<i id="mutevideotoggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-video"></i> <div id="chatbutton" title="Toggle the Chat" alt="Toggle the Chat" aria-label="Text chat" onmousedown="event.preventDefault(); event.stopPropagation();" onclick="toggleChat()" tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="hidden float" style="cursor: pointer;" >
</div> <i id="chattoggle" class="toggleSize las la-comment-alt"></i>
<div id="screensharebutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Share a Screen with others" alt="Share a Screen with others" aria-label="Share a screen" onclick="screenshareTypeDecider(1)" tabindex="20" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float hidden task" data-menu="context-menu-screen-share" style="cursor: pointer;"> <div id="chatNotification"></div>
<i id="screensharetoggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-desktop"></i> </div>
</div> <div id="mutespeakerbutton" onmousedown="event.preventDefault(); event.stopPropagation();" alt="Toggle the speaker output." aria-label="Mute Speaker output" title="Mute the Speaker" onclick="toggleSpeakerMute()" tabindex="17" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="hidden float" style="cursor: pointer;" >
<div id="screenshare2button" onmousedown="event.preventDefault(); event.stopPropagation();" title="Add a Screen Share" alt="Add a Screen Share" aria-label="Share a screen" onclick="screenshareTypeDecider(2)" tabindex="20" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float hidden task" data-menu="context-menu-screen-share" style="cursor: pointer;"> <i id="mutespeakertoggle" class="toggleSize las la-volume-up" style="position: relative; top: 0.5px;"></i>
<i id="screenshare2toggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-tv"></i> </div>
</div> <div id="mutebutton" onmousedown="toggleMute(false, event);event.preventDefault(); event.stopPropagation();" alt="Mute the Mic" aria-label="Mute Microphone" title="Mute the Mic" ontouchstart="toggleMute(false, event);event.preventDefault(); event.stopPropagation();" tabindex="18" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="hidden float" style="cursor: pointer;">
<div id="screenshare3button" onmousedown="event.preventDefault(); event.stopPropagation();" title="Share a Screen with others" alt="Add a Screen Share" aria-label="Share a screen" onclick="screenshareTypeDecider(3)" tabindex="20" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float hidden task" data-menu="context-menu-screen-share" style="cursor: pointer;"> <i id="mutetoggle" class="toggleSize las la-microphone" style="position: relative; top: 0.5px;"></i>
<i id="screenshare3toggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-tv"></i> </div>
</div> <div id="mutevideobutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Disable the Camera" alt="Disable the Camera" aria-label="Mute Camera" onclick="toggleVideoMute()" tabindex="19" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="hidden float" style="cursor: pointer;">
<div id="websitesharebutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Share a website with your guests (IFRAME)" aria-label="Share a website" alt="Share a website with your guests (IFRAME)" onclick="shareWebsite(false, event)" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float hidden" style="cursor: pointer;"> <i id="mutevideotoggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-video"></i>
<i id="websitesharetoggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-window-maximize"></i> </div>
</div> <div id="screensharebutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Share a Screen with others" alt="Share a Screen with others" aria-label="Share a screen" onclick="screenshareTypeDecider(1)" tabindex="20" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float hidden task" data-menu="context-menu-screen-share" style="cursor: pointer;">
<div id="websitesharebutton2" onmousedown="event.preventDefault(); event.stopPropagation();" title="Hold CTRL (or CMD) and click to spotlight this video" alt="Share a website as an embedded iFRAME" aria-label="Share a website" onclick="shareWebsite(false, event)" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float2 orange shake hidden" style="cursor: pointer;max-width: 200px;margin: auto;padding: 0 10px;"> <i id="screensharetoggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-desktop"></i>
<i onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-window-close" style="display: inline-block;"></i> </div>
<div style="display: inline-block;width: 85px;line-height: 1; font-size: 0.9em;"> <div id="screenshare2button" onmousedown="event.preventDefault(); event.stopPropagation();" title="Add a Screen Share" alt="Add a Screen Share" aria-label="Share a screen" onclick="screenshareTypeDecider(2)" tabindex="20" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float hidden task" data-menu="context-menu-screen-share" style="cursor: pointer;">
Stop Sharing Website <i id="screenshare2toggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-tv"></i>
</div> </div>
</div> <div id="screenshare3button" onmousedown="event.preventDefault(); event.stopPropagation();" title="Share a Screen with others" alt="Add a Screen Share" aria-label="Share a screen" onclick="screenshareTypeDecider(3)" tabindex="20" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float hidden task" data-menu="context-menu-screen-share" style="cursor: pointer;">
<div id="fullscreenPage" onmousedown="event.preventDefault(); event.stopPropagation();" title="Full-screen the page" alt="Full-screen the page" aria-label="Full screen" onclick="fullscreenPageToggle()" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float hidden" style="cursor: pointer;"> <i id="screenshare3toggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-tv"></i>
<i id="fullscreenPageToggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-expand-arrows-alt"></i> </div>
</div> <div id="websitesharebutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Share a website with your guests (IFRAME)" aria-label="Share a website" alt="Share a website with your guests (IFRAME)" onclick="shareWebsite(false, event)" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float hidden" style="cursor: pointer;">
<div id="flipcamerabutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Cycle the Cameras" onclick="cycleCameras()" class="hidden float" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" aria-label="Cycle Cameras" alt="Cycle the Cameras"> <i id="websitesharetoggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-window-maximize"></i>
<i id="settingstoggle" class="toggleSize las la-sync-alt"></i> </div>
</div> <div id="websitesharebutton2" onmousedown="event.preventDefault(); event.stopPropagation();" title="Hold CTRL (or CMD) and click to spotlight this video" alt="Share a website as an embedded iFRAME" aria-label="Share a website" onclick="shareWebsite(false, event)" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float2 orange shake hidden" style="cursor: pointer;max-width: 200px;margin: auto;padding: 0 10px;">
<i onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-window-close" style="display: inline-block;"></i>
<div id="obscontrolbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="OBS Remote Controller; start/stop and change scenes." onclick="toggleOBSControls();" class="hidden float" tabindex="22" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" aria-label="Remote OBS control menu" alt="Toggle the Remote OBS Controls Menu"> <div style="display: inline-block;width: 85px;line-height: 1; font-size: 0.9em;">
<i id="obscontroltoggle" class="toggleSize las la-gamepad"></i> Stop Sharing Website
</div> </div>
</div>
<div id="roomsettingsbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Room Settings" onclick="toggleRoomSettings();" class="hidden float" tabindex="22" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" alt="Toggle the Room Settings Menu" aria-label="Room settings menu"> <div id="fullscreenPage" onmousedown="event.preventDefault(); event.stopPropagation();" title="Full-screen the page" alt="Full-screen the page" aria-label="Full screen" onclick="fullscreenPageToggle()" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float hidden" style="cursor: pointer;">
<i id="roomsettingstoggle" class="toggleSize las la-users-cog"></i> <i id="fullscreenPageToggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-expand-arrows-alt"></i>
</div> </div>
<div id="flipcamerabutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Cycle the Cameras" onclick="cycleCameras()" class="hidden float" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" aria-label="Cycle Cameras" alt="Cycle the Cameras">
<div id="settingsbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Your audio and video Settings" onclick="toggleSettings()" class="hidden float" tabindex="22" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" alt="Toggle Settings Menu" aria-label="Settings menu"> <i id="settingstoggle" class="toggleSize las la-sync-alt"></i>
<i id="settingstoggle" class="toggleSize las la-cog"></i> </div>
</div>
<div id="obscontrolbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="OBS Remote Controller; start/stop and change scenes." onclick="toggleOBSControls();" class="hidden float" tabindex="22" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" aria-label="Remote OBS control menu" alt="Toggle the Remote OBS Controls Menu">
<div id="hangupbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Hangup the Call" aria-label="Hang up" alt="Hangup the Call" onclick="hangup()" class="hidden float" tabindex="23" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" > <i id="obscontroltoggle" class="toggleSize las la-gamepad"></i>
<i class="toggleSize las la-phone rotate225" aria-hidden="true"></i> </div>
</div>
<div id="raisehandbutton" onmousedown="event.preventDefault(); event.stopPropagation();" data-raised="0" title="Alert the host you want to speak" aria-label="Raise hand" alt="Alert the host you want to speak" tabindex="24" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="raisehand()" class="hidden float" style="cursor: pointer;"> <div id="roomsettingsbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Room Settings" onclick="toggleRoomSettings();" class="hidden float" tabindex="22" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" alt="Toggle the Room Settings Menu" aria-label="Room settings menu">
<i class="toggleSize las la-hand-paper" style="position: relative; right: 1px;" aria-hidden="true"></i> <i id="roomsettingstoggle" class="toggleSize las la-users-cog"></i>
</div> </div>
<div id="pptbackbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Go back a slide" aria-label="Back a slide" alt="Go back a slide" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="gobackSlide()" class="hidden float red" style="cursor: pointer;"> <div id="settingsbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Your audio and video Settings" onclick="toggleSettings()" class="hidden float" tabindex="22" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" alt="Toggle Settings Menu" aria-label="Settings menu">
<i class="toggleSize las la-chevron-left" style="position: relative; right: 1px;" aria-hidden="true"></i> <i id="settingstoggle" class="toggleSize las la-cog"></i>
</div> </div>
<div id="pptnextbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Next slide" aria-label="Next slide" alt="Next slide" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="nextSlide()" class="hidden float" style="cursor: pointer;">
<i class="toggleSize las la-chevron-right" style="position: relative; right: 1px;" aria-hidden="true"></i> <div id="hangupbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Hangup the Call" aria-label="Hang up" alt="Hangup the Call" onclick="hangup()" class="hidden float" tabindex="23" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" >
</div> <i class="toggleSize las la-phone rotate225" aria-hidden="true"></i>
</div>
<div id="recordLocalbutton" onmousedown="event.preventDefault(); event.stopPropagation();" data-state="0" title="Record your stream to disk" aria-label="Record your stream to disk" alt="Record your stream to disk" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="recordLocalVideoToggle();" class="hidden float" style="cursor: pointer;"> <div id="raisehandbutton" onmousedown="event.preventDefault(); event.stopPropagation();" data-raised="0" title="Alert the host you want to speak" aria-label="Raise hand" alt="Alert the host you want to speak" tabindex="24" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="raisehand()" class="hidden float" style="cursor: pointer;">
<i class="toggleSize las la-dot-circle" style="position: relative;" aria-hidden="true"></i> <i class="toggleSize las la-hand-paper" style="position: relative; right: 1px;" aria-hidden="true"></i>
</div> </div>
<div id="recordLocalScreenbutton" onmousedown="event.preventDefault(); event.stopPropagation();" data-state="0" title="Stop screen share recording" aria-label="Stop screen share recording" alt="Stop screen recording" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="recordLocalScreenStopRecord();" class="hidden float" style="cursor: pointer;">
<small>Stop<br>Screen<br>Record</small> <div id="pptbackbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Go back a slide" aria-label="Back a slide" alt="Go back a slide" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="gobackSlide()" class="hidden float red" style="cursor: pointer;">
</div> <i class="toggleSize las la-chevron-left" style="position: relative; right: 1px;" aria-hidden="true"></i>
<span id="miniPerformer" style="pointer-events: auto;" class="hidden"></span> </div>
<span id="rooms" class="hidden" style="padding-top:3px;padding-left:6px;pointer-events: auto;color:#fff;"></span> <div id="pptnextbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Next slide" aria-label="Next slide" alt="Next slide" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="nextSlide()" class="hidden float" style="cursor: pointer;">
<span id="groups" class="hidden" style="padding-top:3px;padding-left:6px;pointer-events: auto;color:#fff;text-align: center;"></span> <i class="toggleSize las la-chevron-right" style="position: relative; right: 1px;" aria-hidden="true"></i>
<div id="hangupbutton2" onmousedown="event.preventDefault(); event.stopPropagation();" title="Cancel the Director's Video/Audio" onclick="hangup2()" class="hidden float" tabindex="26" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" aria-label="stop publishing audio and video" alt="Disconnect Direcotor's cam"> </div>
<i class="toggleSize las la-phone rotate225" aria-hidden="true"></i>
</div> <div id="recordLocalbutton" onmousedown="event.preventDefault(); event.stopPropagation();" data-state="0" title="Record your stream to disk" aria-label="Record your stream to disk" alt="Record your stream to disk" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="recordLocalVideoToggle();" class="hidden float" style="cursor: pointer;">
</div> <i class="toggleSize las la-dot-circle" style="position: relative;" aria-hidden="true"></i>
</div>
<div id="recordLocalScreenbutton" onmousedown="event.preventDefault(); event.stopPropagation();" data-state="0" title="Stop screen share recording" aria-label="Stop screen share recording" alt="Stop screen recording" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="recordLocalScreenStopRecord();" class="hidden float" style="cursor: pointer;">
<small>Stop<br>Screen<br>Record</small>
</div>
<span id="miniPerformer" style="pointer-events: auto;" class="hidden"></span>
<span id="rooms" class="hidden" style="padding-top:3px;padding-left:6px;pointer-events: auto;color:#fff;"></span>
<span id="groups" class="hidden" style="padding-top:3px;padding-left:6px;pointer-events: auto;color:#fff;text-align: center;"></span>
<div id="hangupbutton2" onmousedown="event.preventDefault(); event.stopPropagation();" title="Cancel the Director's Video/Audio" onclick="hangup2()" class="hidden float" tabindex="26" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" aria-label="stop publishing audio and video" alt="Disconnect Direcotor's cam">
<i class="toggleSize las la-phone rotate225" aria-hidden="true"></i>
</div>
</div>
</div>
</div> </div>
<span id="miniTaskBar" style="float: right; bottom: 0px;right:0; position:fixed; display:flex;"> <span id="miniTaskBar" style="float: right; bottom: 0px;right:0; position:fixed; display:flex;">
<div id="closedList_connectUsers" class="hidden" onclick="getById('connectUsers').classList.remove('hidden');getById('closedList_connectUsers').classList.add('hidden');"> <div id="closedList_connectUsers" class="hidden" onclick="getById('connectUsers').classList.remove('hidden');getById('closedList_connectUsers').classList.add('hidden');">
@ -411,8 +423,8 @@
<span><i class="las la-headphones"></i><span data-translate="you-are-using-headphones-earphones">You are using headphones / earphones</span></span> <span><i class="las la-headphones"></i><span data-translate="you-are-using-headphones-earphones">You are using headphones / earphones</span></span>
</div> </div>
<div id="videoMenu" class="videoMenu"> <div id="videoMenu" class="videoMenu">
<span style="padding-right:2px;display:inline-block;position:relative;top:1px;"><i class="las la-video"></i><span data-translate="video-source"> Video Source </span></span> <span style="display:inline-block;position:relative;padding: 7px 0px;"><i class="las la-video"></i><span data-translate="video-source"> Video Source </span></span>
<span style="display:inline-block;padding-top: 5px;"> <span style="display:flex;align-items: center;">
<select id="videoSourceSelect" alt="Video source list"></select> <select id="videoSourceSelect" alt="Video source list"></select>
<span id="gear_webcam" onclick="toggle(document.getElementById('videoSettings'));"> <span id="gear_webcam" onclick="toggle(document.getElementById('videoSettings'));">
<i class="las la-cog" style="font-size: 140%; vertical-align: middle;" aria-hidden="true"></i> <i class="las la-cog" style="font-size: 140%; vertical-align: middle;" aria-hidden="true"></i>
@ -2046,19 +2058,7 @@
</li> </li>
</ul> </ul>
</nav> </nav>
<div id="chatModule" style="display:none;text-align:right">
<a target="popup" id="popOutChat" style="cursor:pointer;text-align:right;color:#B3C7F9;" onclick="createPopoutChat();"><i class="las la-external-link-alt"></i></a>
<div id="chatBody">
<div class="inMessage" id="welcomeMsg" data-translate='welcome-to-vdo-ninja-chat'>
Welcome to the chat! You can send text messages directly to connected peers from here.
</div>
</div>
<input type="text" id="chatInput" placeholder="Enter chat message to send here" onkeypress="EnterButtonChat(event)" />
<button class="chatBarInputButton" onclick="sendChatMessage()" data-translate='send-chat'>Send</button>
</div>
<div id="roomSettings" class="customModelPopup" style="display:none; user-select: none;"> <div id="roomSettings" class="customModelPopup" style="display:none; user-select: none;">
<div class="promptModalInner"> <div class="promptModalInner">
<span class='modalClose' onclick="toggleRoomSettings();">×</span> <span class='modalClose' onclick="toggleRoomSettings();">×</span>

260
lib.js
View File

@ -2010,7 +2010,7 @@ function makeMiniDraggableElement(elmnt) {
try { try {
elmnt.dragElement = false; elmnt.dragElement = false;
elmnt.style.bottom = "auto"; // elmnt.style.bottom = "auto";
elmnt.style.cursor = "grab"; elmnt.style.cursor = "grab";
elmnt.stashonmouseup = null; elmnt.stashonmouseup = null;
@ -2168,110 +2168,192 @@ function makeMiniDraggableElement(elmnt) {
elmnt.ontouchstart = dragMouseDown; elmnt.ontouchstart = dragMouseDown;
} }
function makeDraggableElement(elmnt, absolute=false) { function makeDraggableElement(element) {
let isDragging = false;
let initialX;
let currentX;
let xOffset = 0;
let initialY;
let currentY;
let yOffset = 0;
element.addEventListener('mousedown', dragStart);
document.addEventListener('mouseup', dragEnd);
function dragStart(e) {
initialX = e.clientX - xOffset;
initialY = e.clientY - yOffset;
document.addEventListener('mousemove', drag);
isDragging = true;
}
function dragEnd(e) {
initialX = currentX;
initialY = currentY;
document.removeEventListener('mousemove', drag);
isDragging = false;
updateMixer();
}
function drag(e) {
if (isDragging) {
currentX = (e.clientX - initialX);
currentY = (e.clientY - initialY);
// Get the dimensions of the viewport
let vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
let vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
// Get the dimensions of the object
let elementWidth = element.offsetWidth;
let elementHeight = element.offsetHeight;
// console.log('elementWidth:\n',elementWidth)
// console.log('elementHeight:\n',elementHeight)
// Calculate the boundaries
let maxX = vw - elementWidth;
let maxY = vh - elementHeight;
let minX = 0;
let minY = 0;
// Calculate real boundaries (parent position: fixed issues)
let topOffset = 0;
let leftOffset = 0;
let elementOffset = element;
while (elementOffset) {
topOffset += elementOffset.offsetTop;
leftOffset += elementOffset.offsetLeft;
elementOffset = elementOffset.offsetParent;
}
// Adjust the position if it's going beyond the boundaries
let realX = currentX + leftOffset;
let realY = currentY + topOffset;
if (realX > maxX) {
currentX = maxX - leftOffset;
} else if (realX < minX) {
currentX = minX - leftOffset;
}
if (realY > maxY) {
currentY = maxY - topOffset;
} else if (realY < minY) {
currentY = minY - topOffset;
}
// Update the position and offset
xOffset = currentX;
yOffset = currentY;
element.style.transform = `translate(${currentX}px, ${currentY}px)`;
}
}
if (session.disableMouseEvents){return;} // if (session.disableMouseEvents){return;}
try { // try {
elmnt.dragElement = false; // elmnt.dragElement = false;
elmnt.style.bottom = "auto"; // elmnt.style.bottom = "auto";
elmnt.style.cursor = "grab"; // elmnt.style.cursor = "grab";
elmnt.stashonmouseup = null; // elmnt.stashonmouseup = null;
elmnt.stashonmousemove = null; // elmnt.stashonmousemove = null;
} catch (e) { // } catch (e) {
errorlog(e); // errorlog(e);
return; // return;
} // }
var pos1 = 0; // var pos1 = 0;
var pos2 = 0; // var pos2 = 0;
var pos3 = 0; // var pos3 = 0;
var pos4 = 0; // var pos4 = 0;
var timestamp = false; // var timestamp = false;
var enterEventCount = 0; // var enterEventCount = 0;
var leaveEventCount = 0; // var leaveEventCount = 0;
function dragMouseDown(e) { // function dragMouseDown(e) {
timestamp = Date.now(); // timestamp = Date.now();
e = e || window.event; // e = e || window.event;
e.preventDefault(); // e.preventDefault();
pos3 = e.clientX; // pos3 = e.clientX;
pos4 = e.clientY; // pos4 = e.clientY;
//elmnt.stashonmouseup = document.onmouseup; // I don't want to interfere with other drag events. // //elmnt.stashonmouseup = document.onmouseup; // I don't want to interfere with other drag events.
//elmnt.stashonmousemove = document.onmousemove; // //elmnt.stashonmousemove = document.onmousemove;
//elmnt.stashonclick = document.onclick; // //elmnt.stashonclick = document.onclick;
document.onmouseup = function(event){closeDragElement(event, elmnt);}; // document.onmouseup = function(event){closeDragElement(event, elmnt);};
document.onmousemove = function(event){elementDrag(elmnt,event);}; // document.onmousemove = function(event){elementDrag(elmnt,event);};
if ("stopDragTimeout" in elmnt){clearTimeout(elmnt.stopDragTimeout);} // if ("stopDragTimeout" in elmnt){clearTimeout(elmnt.stopDragTimeout);}
elmnt.onmouseleave = function(event){ // elmnt.onmouseleave = function(event){
leaveEventCount+=1; // leaveEventCount+=1;
elmnt.stopDragTimeout = setTimeout(function(ele,evt1){ // elmnt.stopDragTimeout = setTimeout(function(ele,evt1){
closeDragElement(evt1, ele);} // closeDragElement(evt1, ele);}
,100, elmnt, event); // ,100, elmnt, event);
}; // };
elmnt.onmouseenter = function(event){ // elmnt.onmouseenter = function(event){
enterEventCount+=1; // enterEventCount+=1;
if (enterEventCount>=leaveEventCount){ // if (enterEventCount>=leaveEventCount){
if ("stopDragTimeout" in elmnt){clearTimeout(elmnt.stopDragTimeout);} // if ("stopDragTimeout" in elmnt){clearTimeout(elmnt.stopDragTimeout);}
} else { // } else {
if (("stopDragTimeout" in elmnt) && (elmnt.stopDragTimeout)){ // if (("stopDragTimeout" in elmnt) && (elmnt.stopDragTimeout)){
clearTimeout(elmnt.stopDragTimeout); // clearTimeout(elmnt.stopDragTimeout);
elmnt.stopDragTimeout = setTimeout(function(ele,evt1){ // elmnt.stopDragTimeout = setTimeout(function(ele,evt1){
closeDragElement(evt1, ele);} // closeDragElement(evt1, ele);}
,100, elmnt, event); // ,100, elmnt, event);
} // }
} // }
}; // };
} // }
function elementDrag(ele,e) { // function elementDrag(ele,e) {
e = e || window.event; // e = e || window.event;
if (("buttons" in e) && (e.buttons!==1)){return;} // if (("buttons" in e) && (e.buttons!==1)){return;}
e.preventDefault(); // e.preventDefault();
ele.dragElement = true; // ele.dragElement = true;
pos1 = pos3 - e.clientX; // pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY; // pos2 = pos4 - e.clientY;
pos3 = e.clientX; // pos3 = e.clientX;
pos4 = e.clientY; // pos4 = e.clientY;
var topDrag = (ele.offsetTop - pos2 ); // var topDrag = (ele.offsetTop - pos2 );
if (absolute){ // if (absolute){
if (topDrag > (-3 + (window.innerHeight - ele.clientHeight))){ // if (topDrag > (-3 + (window.innerHeight - ele.clientHeight))){
topDrag = (-3 + (window.innerHeight - ele.clientHeight)); // topDrag = (-3 + (window.innerHeight - ele.clientHeight));
} // }
} else { // } else {
if (topDrag > -3){ // if (topDrag > -3){
topDrag = -3; // topDrag = -3;
} // }
} // }
ele.style.top = topDrag + "px"; // ele.style.top = topDrag + "px";
ele.style.left = (ele.offsetLeft - pos1) + "px"; // ele.style.left = (ele.offsetLeft - pos1) + "px";
} // }
function closeDragElement(event=false, ele=false) { // function closeDragElement(event=false, ele=false) {
document.onmouseup = null; // document.onmouseup = null;
document.onmousemove = null // document.onmousemove = null
ele.onmouseleave = null; // ele.onmouseleave = null;
ele.onmouseenter = null; // ele.onmouseenter = null;
enterEventCount = 0; // enterEventCount = 0;
leaveEventCount = 0; // leaveEventCount = 0;
updateMixer(); // updateMixer();
//document.onclick = elmnt.stashonclick; // //document.onclick = elmnt.stashonclick;
} // }
elmnt.onmousedown = dragMouseDown; // elmnt.onmousedown = dragMouseDown;
} }
function removeStorage(cname){ function removeStorage(cname){
@ -10520,7 +10602,7 @@ function toggleChat(event = null) { // TODO: I need to have this be MUTE, toggle
session.chat = true; session.chat = true;
getById("chattoggle").className = "las la-comment-dots toggleSize"; getById("chattoggle").className = "las la-comment-dots toggleSize";
getById("chatbutton").className = "float"; getById("chatbutton").className = "float";
getById("chatModule").style.display = "block"; getById("chatModule").style.display = "flex";
getById("chatInput").focus(); // give it keyboard focus getById("chatInput").focus(); // give it keyboard focus
} else { } else {
session.chat = false; session.chat = false;
@ -10537,7 +10619,7 @@ function toggleChat(event = null) { // TODO: I need to have this be MUTE, toggle
if (getById("chatNotification").value) { if (getById("chatNotification").value) {
getById("chatNotification").value = 0; getById("chatNotification").value = 0;
} }
getById("chatNotification").classList.remove("notification"); getById("chatNotification").classList.remove("notification", "red");
} }
function directorAdvanced(ele) { function directorAdvanced(ele) {
@ -22734,7 +22816,7 @@ function addDownloadLink(fileList, UUID, pc){
} else { } else {
getById("chatNotification").value = 1; getById("chatNotification").value = 1;
} }
getById("chatNotification").classList.add("notification"); getById("chatNotification").classList.add("notification", "red");
} }
//if (session.broadcastChannel !== false) { //if (session.broadcastChannel !== false) {
@ -29470,7 +29552,7 @@ function getChatMessage(msg, label = false, director = false, overlay = false) {
} else { } else {
getById("chatNotification").value = 1; getById("chatNotification").value = 1;
} }
getById("chatNotification").classList.add("notification"); getById("chatNotification").classList.add("notification", "red");
} }

260
main.css
View File

@ -249,11 +249,6 @@ button.hint {
visibility: hidden; visibility: hidden;
} }
/* #screenshare3button.green{
animation: pulse 5s infinite;
} */
/* Clicked buttons overwrite */ /* Clicked buttons overwrite */
.red { .red {
background-color: #840000 !important; background-color: #840000 !important;
@ -296,15 +291,6 @@ button.hint {
background-color: #5c7785 !important; background-color: #5c7785 !important;
} }
/* button.red {
-webkit-app-region: no-drag;
padding: 10px;
margin: 10px 0px;
cursor: pointer;
border-radius: 2px;
color: white;
} */
button { button {
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
padding: 7px 10px 6px 6px; padding: 7px 10px 6px 6px;
@ -1167,16 +1153,15 @@ hr {
} }
.notification { .notification {
position: relative; position: absolute;
top: -40px; top: -4px;
right: -33px; right: -4px;
padding: 2px 0; padding: 2px 0;
border-radius: 50%; border-radius: 50%;
background: red; color: white;
color: white; width: 11px;
width: 11px; height: 11px;
height: 11px; margin: 0;
margin: 0;
} }
.queueNotification { .queueNotification {
position: relative; position: relative;
@ -1222,9 +1207,10 @@ button.glyphicon-button.active.focus {
position: fixed; position: fixed;
z-index: 995; z-index: 995;
padding: 0px 10px; padding: 0px 10px;
bottom: 0; bottom: 10px;
padding: 0 10px;
border: 0; border: 0;
min-height: 52px; min-height: 0; /* Must have a min-height or drag-drop doesn't work */
pointer-events: none; pointer-events: none;
width: 100%; width: 100%;
justify-content: center; justify-content: center;
@ -1235,6 +1221,16 @@ button.glyphicon-button.active.focus {
display: none; display: none;
} }
.controlPositioning {
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
width: 100%;
height: 100%;
align-items: center;
}
#subControlButtons { #subControlButtons {
display: flex; display: flex;
position: absolute; position: absolute;
@ -1246,8 +1242,9 @@ button.glyphicon-button.active.focus {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
bottom: 3px; bottom: 0px;
min-width: 230px; min-width: 230px;
cursor: grab;
} }
#subControlButtons:empty{ #subControlButtons:empty{
@ -1270,6 +1267,11 @@ button.glyphicon-button.active.focus {
border-radius: 4px; border-radius: 4px;
} }
/* Set for the notification button to use as offset */
#chatbutton {
position: relative;
}
#container.vidcon { #container.vidcon {
height:100%; height:100%;
@ -1295,10 +1297,6 @@ button.glyphicon-button.active.focus {
} }
@media only screen and (max-width: 640px){ @media only screen and (max-width: 640px){
#controlButtons {
/* transform: scale(0.9); */
}
.labelSmall { .labelSmall {
display:inherit; display:inherit;
padding:5px; padding:5px;
@ -1323,17 +1321,6 @@ button.glyphicon-button.active.focus {
margin-right: 1px; margin-right: 1px;
} }
} }
@media only screen and (max-width: 400px){
#controlButtons {
/* transform: scale(0.8); */
}
}
@media only screen and (max-width: 300px){
#controlButtons {
/* transform: scale(0.7); */
}
}
.orange{ .orange{
background-color: #8d5e1a background-color: #8d5e1a
@ -1403,9 +1390,6 @@ button.btnArmTransferRoom.selected{
#gridlayout>#container.vidcon { #gridlayout>#container.vidcon {
height:85% height:85%
} }
#controlButtons {
/* transform: scale(0.9); */
}
#header{ #header{
min-height:0px; min-height:0px;
} }
@ -1423,9 +1407,6 @@ button.btnArmTransferRoom.selected{
#gridlayout>#container.vidcon { #gridlayout>#container.vidcon {
height:78% height:78%
} }
#controlButtons {
/* transform: scale(0.8); */
}
} }
@media only screen and (max-height: 190px){ @media only screen and (max-height: 190px){
#gridlayout>#container.vidcon { #gridlayout>#container.vidcon {
@ -1436,9 +1417,6 @@ button.btnArmTransferRoom.selected{
#gridlayout>#container.vidcon { #gridlayout>#container.vidcon {
height:70% height:70%
} }
#controlButtons {
/* transform: scale(0.7); */
}
} }
@media only screen and (max-height: 120px){ @media only screen and (max-height: 120px){
#gridlayout>#container.vidcon { #gridlayout>#container.vidcon {
@ -1803,6 +1781,73 @@ input[type=range]:focus::-ms-fill-upper {
} }
/* ////// Icon resizing for mobile subControl bar ////// */
@media only screen and (max-width: 500px) {
#subControlButtons {
position: unset;
min-width: unset;
}
#subControlButtons > div {
min-width: 40px;
min-height: 40px;
margin: 4px;
}
#SubControlButtons > div i {
font-size: 28px;
}
}
@media only screen and (max-width: 410px) {
#subControlButtons > div {
min-width: 35px;
min-height: 35px;
border-radius: 6px;
margin: 3px;
}
#SubControlButtons > div i {
font-size: 24px;
}
}
@media only screen and (max-width: 360px) {
#subControlButtons > div {
min-width: 30px;
min-height: 30px;
border-radius: 4px;
margin: 3px;
}
#SubControlButtons > div i {
font-size: 20px;
}
}
@media only screen and (max-width: 320px) {
#subControlButtons > div {
min-width: 28px;
min-height: 28px;
border-radius: 4px;
margin: 3px;
}
#SubControlButtons > div i {
font-size: 18px;
}
}
@media only screen and (max-width: 280px) {
#subControlButtons > div {
min-width: 25px;
min-height: 25px;
border-radius: 4px;
margin: 3px;
}
#SubControlButtons > div i {
font-size: 16px;
}
}
/* //////////////////////////////////// */
@media only screen and (max-height: 650px) { @media only screen and (max-height: 650px) {
body { body {
@ -1848,9 +1893,8 @@ input[type=range]:focus::-ms-fill-upper {
#fakeguest2{ #fakeguest2{
display: none!important; display: none!important;
} }
#subControlButtons { #chatModule {
position: unset; margin-bottom: 5px !important;
min-width: unset;
} }
} }
@media only screen and (max-width: 292px) { @media only screen and (max-width: 292px) {
@ -1925,11 +1969,6 @@ input[type=range]:focus::-ms-fill-upper {
min-width: 90% !important; min-width: 90% !important;
overflow: hidden !important; overflow: hidden !important;
} }
/* #popupSelector {
padding: 20px 5px 0px 15px !important;
font-size: 92%;
width: 385px !important
} */
.popupSelector_constraints{ .popupSelector_constraints{
margin:25px 15% 0 1%; margin:25px 15% 0 1%;
} }
@ -1949,19 +1988,8 @@ input[type=range]:focus::-ms-fill-upper {
.popupSelector_constraints{ .popupSelector_constraints{
margin:20px 12% 0 2%; margin:20px 12% 0 2%;
} }
/* #popupSelector {
padding: 0 0 20px 0 !important;
} */
} }
/* @media only screen and (max-height: 330px) {
#popupSelector {
font-size: 92%;
}
} */
#popupSelector_user_settings label{ #popupSelector_user_settings label{
color:white; color:white;
text-shadow: 0px 0px 6px #000000FF; text-shadow: 0px 0px 6px #000000FF;
@ -2998,10 +3026,9 @@ button.toggleSettings{
} }
#videoSourceSelect { #videoSourceSelect {
display: inline-block; flex: 1;
vertical-align: middle; vertical-align: middle;
font-size: 100%; font-size: 100%;
max-width: 260px;
border: solid 1px #AAA; border: solid 1px #AAA;
border-radius: 4px; border-radius: 4px;
} }
@ -3146,6 +3173,7 @@ button.toggleSettings{
vertical-align: middle; vertical-align: middle;
text-align: left; text-align: left;
} }
#videoMenu3{ #videoMenu3{
background-color: #f3f3f3; background-color: #f3f3f3;
width: 450px; width: 450px;
@ -3290,23 +3318,20 @@ input[type=checkbox] {
} }
.outMessage { .outMessage {
color: #000; color: #000;
margin: 3px;
border-radius: 5px; border-radius: 5px;
background: #BCF; background: #BCF;
padding: 5px; padding: 5px;
text-align: right; text-align: right;
margin: 10px 3px; margin-bottom: 5px;
} }
#chatBody { #chatBody {
z-index: 12; z-index: 12;
background-color: #0004; background-color: #0004;
width: 100%; width: 100%;
border-radius: 5px; border-radius: 5px;
padding: 1px 7px; overflow-y: scroll;
overflow-y:scroll; overflow-wrap: anywhere;
overflow-wrap: anywhere; max-height: 500px;
max-height: 800px;
line-height: 22px;
} }
#chatBody::-webkit-scrollbar { #chatBody::-webkit-scrollbar {
@ -3325,31 +3350,24 @@ div#chatBody a {
} }
#chatModule { #chatModule {
bottom: 50px; display: flex;
position: fixed; flex-wrap: wrap;
margin: 10px; z-index: 3;
align-self: center; width: 100%;
width: 574px; max-width: 500px;
min-width: 300px; z-index: 3;
max-width: 100%; margin-bottom: 65px;
z-index:3; gap: 0px 5px;
} }
#chatInput { #chatInput {
color: #000; color: #000;
background-color: #FFFE; background-color: #FFFE;
max-width: 700px; width: 70%;
min-width: 320px;
width: calc(100% - 89px);
font-size: 105%;
padding: 3px; padding: 3px;
border: 3px solid black;
} }
.chatBarInputButton { .chatBarInputButton {
width:60px; width: calc(30% - 5px);
background-color:#EEE; margin: unset;
top: -1px;
position: relative;
margin-right: 10px;
} }
.debugStats { .debugStats {
@ -3447,32 +3465,7 @@ div#chatBody a {
font-weight: bold; font-weight: bold;
border-bottom: 2px solid #364c84; border-bottom: 2px solid #364c84;
} }
@media only screen and (max-width: 390px) {
#chatBody {
z-index: 12;
background-color: #FFF1;
width: 100%;
border-radius: 5px;
padding: 1px 7px;
margin: 0px;
}
#chatModule {
bottom: 50px;
position: fixed;
margin: 0px;
align-self: center;
width: 400px;
max-width: 100%;
}
#chatInput {
max-width: 99%;
min-width: 240px;
margin-left: 11px;
font-size: 100%;
}
}
.directorMargins { .directorMargins {
margin: var(--director-margin); margin: var(--director-margin);
} }
@ -4980,9 +4973,6 @@ body.darktheme .form-group .multiselect {
body.darktheme h2 { body.darktheme h2 {
color: #DDD; color: #DDD;
} }
body.darktheme button {
/* filter: brightness(0.70); */
}
body.darktheme .column .las { body.darktheme .column .las {
color: var(--discord-text); color: var(--discord-text);
} }
@ -5023,9 +5013,9 @@ body.darktheme select{
background-color: var(--discord-grey-7); background-color: var(--discord-grey-7);
color: var(--discord-text); color: var(--discord-text);
} }
body.darktheme .white { /* body.darktheme .white {
color: var(--discord-text); color: var(--discord-text);
} } */
body.darktheme .directorsgrid .vidcon { body.darktheme .directorsgrid .vidcon {
background-color: var(--discord-grey-3); background-color: var(--discord-grey-3);
color: var(--discord-text); color: var(--discord-text);
@ -5056,7 +5046,8 @@ body.darktheme .actionMessage {
background-color: #b1b1b1; background-color: #b1b1b1;
} }
body.darktheme #chatInput{ body.darktheme #chatInput{
background-color:#ccc; background-color: var(--discord-grey-7);
color: var(--discord-text)
} }
body.darktheme .popup-message{ body.darktheme .popup-message{
background-color: #9b9b9b !important; background-color: #9b9b9b !important;
@ -5148,9 +5139,6 @@ body.darktheme .invite_setting_group_links a {
color:#d2e5ff!important; color:#d2e5ff!important;
} }
/* ---- BASIC CSS CLASSES ---- */ /* ---- BASIC CSS CLASSES ---- */
.pressed { .pressed {
background: #1e0000 !important; background: #1e0000 !important;