elias/vdo.ninja
1
0
Fork 0
mirror of https://github.com/eliasstepanik/vdo.ninja.git synced 2026-01-27 05:18:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1041 from lindenkron/Fix-Darkmode-Globally

Browse Source 
Lot of style changes.
This commit is contained in:
Steve Seguin 2023-04-10 20:13:55 -04:00 committed by GitHub
commit 854698084d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 63 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -350,7 +350,7 @@
<span data-translate="enter-the-rooms-control">Enter the room's Control Center in the director's role</span> <span data-translate="enter-the-rooms-control">Enter the room's Control Center in the director's role</span>
</button> </button>
<br /> <br />
<button class="white roomnotes" style="display: block;" onclick="toggle(document.getElementById('roomnotes'),this);"> <button class="roomnotes" style="display: block;" onclick="toggle(document.getElementById('roomnotes'),this);">
<span data-translate="show-tips">Show me some tips..</span> <span data-translate="show-tips">Show me some tips..</span>
</button> </button>
@ -621,7 +621,7 @@
<div id="headphonesDiv2"> <div id="headphonesDiv2">
<i class="las la-headphones"></i> <i class="las la-headphones"></i>
<span data-translate="select-output-source"> Audio Output Destination: <button onclick="playtone(true)" class="white" style="padding:3px 5px 2px 5px; margin:0; margin-left:15px; position: relative; " type="button">Test</button></span> <span data-translate="select-output-source"> Audio Output Destination: <button onclick="playtone(true)" class="white" style="padding:3px 5px 2px 5px; margin:0; margin-left:15px; position: relative; " type="button">Test</button></span>
<select id="outputSourceScreenshare" style="background-color: #FFF; margin-top:5px; padding:10px 5px; width:100%; display:inline-block; vertical-align: middle;" onclick="requestOutputAudioStream();"> <select id="outputSourceScreenshare" onclick="requestOutputAudioStream();">
<option value="default"> <option value="default">
Default Device Default Device
</option> </option>

100
main.css
View File

@ -1688,6 +1688,8 @@ select{
vertical-align: middle; vertical-align: middle;
font-size: 100%; font-size: 100%;
max-width: 260px; max-width: 260px;
border: solid 1px #AAA;
border-radius: 4px;
} }
#effectSelector3{ #effectSelector3{
background-color: #FFF; background-color: #FFF;
@ -1697,6 +1699,8 @@ select{
font-size: 93%; font-size: 93%;
max-width: 100%; max-width: 100%;
width: 90%; width: 90%;
border: solid 1px #AAA;
border-radius: 4px;
} }
/*https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/*/ /*https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/*/
@ -2004,6 +2008,8 @@ input[type=range]:focus::-ms-fill-upper {
overflow: auto; overflow: auto;
padding: 5px; padding: 5px;
resize: both; resize: both;
border: solid 1px #AAA;
border-radius: 4px;
} }
@ -2981,6 +2987,8 @@ button.toggleSettings{
vertical-align: middle; vertical-align: middle;
font-size: 100%; font-size: 100%;
max-width: 260px; max-width: 260px;
border: solid 1px #AAA;
border-radius: 4px;
} }
#gear_webcam{ #gear_webcam{
cursor: pointer; cursor: pointer;
@ -3075,6 +3083,8 @@ button.toggleSettings{
padding: 4px; padding: 4px;
font-size: 93%; font-size: 93%;
max-width: 100%; max-width: 100%;
border: solid 1px #AAA;
border-radius: 4px;
} }
#outputSource3 { #outputSource3 {
display: inline-block; display: inline-block;
@ -3099,6 +3109,16 @@ button.toggleSettings{
vertical-align: middle; vertical-align: middle;
} }
#outputSourceScreenshare {
margin-top: 5px;
padding: 10px 5px;
width: 100%;
display: inline-block;
vertical-align: middle;
border-radius: 4px;
border: solid 1px #AAA;
}
.videoMenu { .videoMenu {
background-color: #f3f3f3; background-color: #f3f3f3;
width: 450px; width: 450px;
@ -3151,11 +3171,10 @@ div.multiselect {
margin: 0; margin: 0;
font-size: 80%; font-size: 80%;
padding: 3px 5px 1px; padding: 3px 5px 1px;
border-top: 0;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
text-align: left; text-align: left;
background-color: white; background-color: white;
border: solid 1px #AAA;
border-radius: 4px;
} }
.multiselect .multiselect-contents li { .multiselect .multiselect-contents li {
list-style: none; list-style: none;
@ -4196,7 +4215,7 @@ div.message-card a {
background: #e6e8f0; background: #e6e8f0;
} }
.darktheme #guestTips { .darktheme #guestTips {
background-color: #414141; background-color: var(--discord-grey-7);
} }
.darktheme #guestTips .las { .darktheme #guestTips .las {
color: #FFF; color: #FFF;
@ -4910,15 +4929,18 @@ body.darktheme form>label{
} }
body.darktheme .container-inner{ body.darktheme .container-inner{
background-color: #40444E background-color: var(--discord-grey-3);
} }
body.darktheme .card{ body.darktheme .card{
background-color: #40444E background-color: var(--discord-grey-3);
} }
body.darktheme input{ body.darktheme input{
background-color: var(--discord-grey-7); background-color: var(--discord-grey-7);
color: var(--discord-text); color: var(--discord-text);
} }
body.darktheme input::placeholder {
color: var(--discord-) !important;
}
body.darktheme .column>h2{ body.darktheme .column>h2{
color: #b6b6b6; color: #b6b6b6;
} }
@ -4929,8 +4951,8 @@ body.darktheme .directorsgrid .vidcon > .las {
background-color: #424242; background-color: #424242;
} }
body.darktheme .form-group .multiselect { body.darktheme .form-group .multiselect {
background-color: #414141; background-color: var(--discord-grey-7);
padding: 10px; background-color:#f3f3f3; padding: 10px;
} }
body.darktheme h2 { body.darktheme h2 {
color: #DDD; color: #DDD;
@ -4939,25 +4961,25 @@ body.darktheme button {
/* filter: brightness(0.70); */ /* filter: brightness(0.70); */
} }
body.darktheme .column .las { body.darktheme .column .las {
color: black; color: var(--discord-text);
} }
body.darktheme label { body.darktheme label {
filter: brightness(0.85); color: var(--discord-text);
} }
body.darktheme #roomHeader{ body.darktheme #roomHeader{
filter: brightness(0.85); color: var(--discord-text);
} }
body.darktheme div.multiselect { body.darktheme div.multiselect {
background-color: #414141; background-color: var(--discord-grey-7);
} }
body.darktheme .videoMenu { body.darktheme .videoMenu {
background-color: #414141; background-color: var(--discord-grey-7);
} }
body.darktheme .audioMenu{ body.darktheme .audioMenu{
background-color: #414141; background-color: var(--discord-grey-7);
} }
body.darktheme #avatarDiv{ body.darktheme #avatarDiv{
background-color: #414141; background-color: var(--discord-grey-7);
} }
body.darktheme .selected { body.darktheme .selected {
border: solid 3px #f8f7f7; border: solid 3px #f8f7f7;
@ -4969,17 +4991,17 @@ body.darktheme .avatarLabel {
color: #f8f7f7; color: #f8f7f7;
} }
body.darktheme #headphonesDiv{ body.darktheme #headphonesDiv{
background-color: #414141; background-color: var(--discord-grey-7);
} }
body.darktheme #headphonesDiv3{ body.darktheme #headphonesDiv3{
background-color: #414141; background-color: var(--discord-grey-7);
} }
body.darktheme select{ 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 {
filter: brightness(0.85); color: var(--discord-text);
} }
body.darktheme .directorsgrid .vidcon { body.darktheme .directorsgrid .vidcon {
background-color: var(--discord-grey-3); background-color: var(--discord-grey-3);
@ -4993,13 +5015,13 @@ body.darktheme .infoblob{
color: #CCC; color: #CCC;
} }
body.darktheme #addPasswordBasic{ body.darktheme #addPasswordBasic{
background-color: #414141; background-color: var(--discord-grey-7);
} }
body.darktheme #effectsDiv{ body.darktheme #effectsDiv{
background-color: #414141; background-color: var(--discord-grey-7);
} }
body.darktheme #effectsDiv3{ body.darktheme #effectsDiv3{
background-color: #414141; background-color: var(--discord-grey-7);
} }
body.darktheme .outMessage{ body.darktheme .outMessage{
background-color: #7f89a7; background-color: #7f89a7;
@ -5017,52 +5039,52 @@ body.darktheme .popup-message{
background-color: #9b9b9b !important; background-color: #9b9b9b !important;
} }
body.darktheme #audioScreenShare1{ body.darktheme #audioScreenShare1{
background-color: #414141; background-color: var(--discord-grey-3);
} }
body.darktheme #webcamstats2{ body.darktheme #webcamstats2{
background-color: #414141; background-color: var(--discord-grey-3);
} }
body.darktheme #audioSourceScreenshare{ body.darktheme #audioSourceScreenshare{
background-color: #e4e4e4; background-color: var(--discord-grey-7);
} }
body.darktheme #headphonesDiv2{ body.darktheme #headphonesDiv2{
background-color: #414141; background-color: var(--discord-grey-3);
} }
body.darktheme #outputSourceScreenshare{ body.darktheme #outputSourceScreenshare{
background-color: #e4e4e4; background-color: var(--discord-grey-7);
} }
body.darktheme #audioSource{ body.darktheme #audioSource{
background-color: #e4e4e4; background-color: var(--discord-grey-3);
} }
body.darktheme #outputSource{ body.darktheme #outputSource{
background-color: #e4e4e4; background-color: var(--discord-grey-3);
} }
body.darktheme #videoSourceSelect{ body.darktheme #videoSourceSelect{
background-color: #e4e4e4; background-color: var(--discord-grey-3);
} }
body.darktheme #videoSettings{ body.darktheme #videoSettings{
background-color: #414141; background-color: var(--discord-grey-7);
} }
body.darktheme #effectSelector{ body.darktheme #effectSelector{
background-color: #e4e4e4; background-color: var(--discord-grey-3);
} }
body.darktheme #effectSelector3{ body.darktheme #effectSelector3{
background-color: #e4e4e4; background-color: var(--discord-grey-3);
} }
body.darktheme #audioSource3{ body.darktheme #audioSource3{
background-color: #e4e4e4; background-color: var(--discord-grey-3);
} }
body.darktheme #videoSource3{ body.darktheme #videoSource3{
background-color: #e4e4e4; background-color: var(--discord-grey-3);
} }
body.darktheme #videoMenu3{ body.darktheme #videoMenu3{
background-color: #414141; background-color: var(--discord-grey-7);
} }
body.darktheme #outputSource3{ body.darktheme #outputSource3{
background-color: #e4e4e4; background-color: var(--discord-grey-3);
} }
body.darktheme #videoSettings3{ body.darktheme #videoSettings3{
background-color: #414141; background-color: var(--discord-grey-7);
} }
body.darktheme .alertModal{ body.darktheme .alertModal{
background-color: #ccc; background-color: #ccc;
@ -5072,10 +5094,10 @@ body.darktheme .directorContainer{
filter: brightness(0.85); filter: brightness(0.85);
} }
body.darktheme #grabDirectorSoloLinkParent{ body.darktheme #grabDirectorSoloLinkParent{
background-color: #414141; background-color: var(--discord-grey-7);
} }
body.darktheme #grabDirectorSoloLink{ body.darktheme #grabDirectorSoloLink{
background-color: #e4e4e4; background-color: var(--discord-grey-3);
} }
body.darktheme .cameraTip{ body.darktheme .cameraTip{
background-color: #27354b; background-color: #27354b;