mirror of
https://github.com/eliasstepanik/vdo.ninja.git
synced 2026-01-14 07:08:32 +00:00
Merge pull request #1027 from lindenkron/Dark-theme-including-mixer
Dark theme including mixer
This commit is contained in:
Steve Seguin
GitHub
commit
1b1eb7d0ee
@ -1391,7 +1391,7 @@
|
||||
<span data-translate="solo-video">Highlight guest</span>
|
||||
</button>
|
||||
<button data-action-type="addToScene" class="btn-HL-peach advanced" title="Add this Video to any remote '&scene=1'" data-scene="1" onclick="directEnable(this, event);">
|
||||
<i class="las la-plus-square" style="color:#060"></i>
|
||||
<i class="las la-plus-square" style="color:#090"></i>
|
||||
<span data-translate="add-to-scene">add to scene 1</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
14
lib.js
14
lib.js
@ -15700,7 +15700,7 @@ async function createDirectorOnlyBox() {
|
||||
controls.innerHTML += "<div style='padding:5px;word-wrap: break-word; overflow:hidden; white-space: nowrap; overflow: hidden; font-size:0.7em; text-overflow: ellipsis;' title='A direct solo view of the video/audio stream with nothing else'> \
|
||||
<a class='soloLink advanced task' data-menu='context-menu' data-sololink='true' data-drag='1' draggable='true' onclick='copyFunction(this,event)' \
|
||||
value='" + soloLink + "' href='" + soloLink + "'/>" + sanitizeChat(soloLink) + "</a>\
|
||||
<button class='pull-right' style='width:100%;background-color:#ecfaff;' onclick='copyFunction(this.previousElementSibling,event)'><i class='las la-user'></i> copy solo view link</button>\
|
||||
<button class='pull-right' style='width:100%;' onclick='copyFunction(this.previousElementSibling,event)'><i class='las la-user'></i> copy solo view link</button>\
|
||||
</div>\
|
||||
<div id='groups'></div>";
|
||||
if (session.directorUUID){
|
||||
@ -15863,7 +15863,7 @@ async function createDirectorScreenshareOnlyBox() { // sstype=3
|
||||
controls.innerHTML += "<div style='padding:5px;word-wrap: break-word; overflow:hidden; white-space: nowrap; overflow: hidden; font-size:0.7em; text-overflow: ellipsis;' title='A direct solo view of the video/audio stream with nothing else'> \
|
||||
<a class='soloLink advanced task' data-menu='context-menu' data-sololink='true' data-drag='1' draggable='true' onclick='copyFunction(this,event)' \
|
||||
value='" + soloLink + "' href='" + soloLink + "'/>" + sanitizeChat(soloLink) + "</a>\
|
||||
<button class='pull-right' style='width:100%;background-color:#ecfaff;' onclick='copyFunction(this.previousElementSibling,event)'><i class='las la-user'></i> copy solo view link</button>\
|
||||
<button class='pull-right' style='width:100%;' onclick='copyFunction(this.previousElementSibling,event)'><i class='las la-user'></i> copy solo view link</button>\
|
||||
</div>\
|
||||
<div id='groups'></div>";
|
||||
if (session.directorUUID){
|
||||
@ -16352,7 +16352,7 @@ function createControlBox(UUID, soloLink, streamID) {
|
||||
controls.innerHTML += "<div class='soloButton' title='A direct solo view of the video/audio stream with nothing else. Its audio can be remotely controlled from here'> \
|
||||
<a class='soloLink advanced task' data-menu='context-menu' data-sololink='true' data-drag='1' draggable='true' onclick='copyFunction(this,event)' \
|
||||
value='" + soloLink + "' href='" + soloLink + "'/>" + sanitizeChat(soloLink) + "</a>\
|
||||
<button class='pull-right' style='width:100%;background-color:#ecfaff;' onclick='copyFunction(this.previousElementSibling,event)'><i class='las la-user'></i> copy solo view link</button>\
|
||||
<button class='pull-right' style='width:100%;' onclick='copyFunction(this.previousElementSibling,event)'><i class='las la-user'></i> copy solo view link</button>\
|
||||
</div>";
|
||||
}
|
||||
|
||||
@ -24147,6 +24147,7 @@ function updateDirectorsAudio(dataN, UUID) {
|
||||
if (("micDelay" in data) && n==0) {
|
||||
var label = document.createElement("label");
|
||||
var i = "micDelay";
|
||||
var div = document.createElement("div");
|
||||
label.id = "label_" + i + "_"+UUID;
|
||||
label.htmlFor = "constraints_" + i + "_"+UUID;
|
||||
|
||||
@ -24198,8 +24199,9 @@ function updateDirectorsAudio(dataN, UUID) {
|
||||
}
|
||||
};
|
||||
|
||||
audioEle.appendChild(label);
|
||||
audioEle.appendChild(manualInput);
|
||||
audioEle.appendChild(div)
|
||||
div.appendChild(label);
|
||||
div.appendChild(manualInput);
|
||||
audioEle.appendChild(input);
|
||||
}
|
||||
|
||||
@ -35046,7 +35048,7 @@ function createControlBoxScreenshare(UUID, soloLink, streamID) {
|
||||
controls.innerHTML += "<div class='soloButton' title='A direct solo view of the video/audio stream with nothing else.'> \
|
||||
<a class='soloLink advanced task' data-menu='context-menu' data-sololink='true' data-drag='1' draggable='true' onclick='copyFunction(this,event)' \
|
||||
value='" + soloLink + "' href='" + soloLink + "'/>" + sanitizeChat(soloLink) + "</a>\
|
||||
<button class='pull-right' style='width:100%;background-color:#ecfaff;' onclick='copyFunction(this.previousElementSibling,event)'><i class='las la-user'></i> copy Solo view link</button>\
|
||||
<button class='pull-right' style='width:100%;' onclick='copyFunction(this.previousElementSibling,event)'><i class='las la-user'></i> copy Solo view link</button>\
|
||||
</div>";
|
||||
}
|
||||
|
||||
|
||||
160
main.css
160
main.css
@ -1,4 +1,20 @@
|
||||
:root {
|
||||
/* Discord Greys - Dark to Lighter */
|
||||
--discord-grey-1: #1e1f22;
|
||||
--discord-grey-2: #232428;
|
||||
--discord-grey-3: #2b2d31;
|
||||
--discord-grey-4: #2e3035;
|
||||
--discord-grey-5: #313338;
|
||||
--discord-grey-6: #383a40;
|
||||
--discord-grey-7: #404249;
|
||||
--discord-text: hsl( 210 calc(1 * 9.1%) 87.1% /1);
|
||||
|
||||
--darktheme-blue: rgb(33 69 114);
|
||||
--darktheme-green: rgb(36 88 49);
|
||||
--darktheme-brown: rgb(72 47 33);
|
||||
--darktheme-yellow: rgb(84 70 9);
|
||||
|
||||
/* Discord Greys */
|
||||
--background-color: #141926;
|
||||
--dark-background-color: #02050c;
|
||||
--container-color: #373737;
|
||||
@ -168,20 +184,29 @@ th {
|
||||
a {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
a:link {
|
||||
text-decoration: none;
|
||||
.darktheme a:link {
|
||||
color: #B9DFF9;
|
||||
}
|
||||
a:visited {
|
||||
.darktheme a:visited {
|
||||
text-decoration: none;
|
||||
color: #99BFD9;
|
||||
}
|
||||
a:hover {
|
||||
.darktheme a:active {
|
||||
color: #B9DFF9;
|
||||
}
|
||||
a:link {
|
||||
text-decoration: none;
|
||||
color: #508fbb;
|
||||
}
|
||||
a:visited {
|
||||
text-decoration: none;
|
||||
color: #508fbb;
|
||||
}
|
||||
.darktheme a:hover, a:hover {
|
||||
color: #048AE8;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: #D9E4EB;
|
||||
color: #508fbb;
|
||||
}
|
||||
|
||||
input {
|
||||
@ -465,7 +490,7 @@ button.white:active {
|
||||
position: fixed;
|
||||
overflow-wrap: anywhere;
|
||||
padding:2% 3%;
|
||||
}.
|
||||
}
|
||||
.avatarSelection{
|
||||
vertical-align: top;
|
||||
margin: 10px 0;
|
||||
@ -600,13 +625,14 @@ body.darktheme .credits>a:visited {
|
||||
border-radius: 0px 0px 4px 4px;
|
||||
background-color: #ccc;
|
||||
width: 100%;
|
||||
gap: 4px;
|
||||
}
|
||||
.advancedAudioSettings div {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px;
|
||||
}
|
||||
.advancedAudioSettings div button {
|
||||
padding: 4px;
|
||||
@ -623,11 +649,10 @@ body.darktheme .credits>a:visited {
|
||||
|
||||
}
|
||||
.advancedAudioSettings div:nth-child(1) {
|
||||
display: unset;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
padding: unset;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.advancedVideoSettings div:nth-child(2) {
|
||||
@ -2237,13 +2262,10 @@ span[data-action-type="stats-graphs-details-container"]>span{
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.soloButton{
|
||||
word-wrap: break-word;
|
||||
overflow:hidden;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
font-size:0.7em;
|
||||
text-overflow: ellipsis;
|
||||
margin-top: 5px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: 0.7em;
|
||||
overflow: hidden;
|
||||
}
|
||||
.soloButton button {
|
||||
margin: 5px 0px 0px 0px;
|
||||
@ -2702,7 +2724,7 @@ audio.fileshare::-webkit-media-controls-play-button, video.fileshare::-webkit-me
|
||||
-webkit-transform: scaleX(-1);
|
||||
}
|
||||
.popup-screen {
|
||||
align-text: center;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
display:none;
|
||||
top:0;
|
||||
@ -2728,7 +2750,7 @@ audio.fileshare::-webkit-media-controls-play-button, video.fileshare::-webkit-me
|
||||
}
|
||||
.popup-message {
|
||||
display: none;
|
||||
align-text: center;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
z-index: 35 !important;
|
||||
padding: 3px !important;
|
||||
@ -2858,7 +2880,6 @@ button.toggleSettings{
|
||||
display: block;
|
||||
padding: 10px 10px;
|
||||
border: 1px solid #ccc;
|
||||
vertical-align: middle;
|
||||
}
|
||||
#effectsDiv {
|
||||
user-select: none;
|
||||
@ -3490,11 +3511,20 @@ div#roomnotes2 {
|
||||
}
|
||||
|
||||
/* ---- DIRECTORS PAGE - Guest Controls Box ---- */
|
||||
.darktheme .controlCenterBox button {
|
||||
background-color: var(--discord-grey-7);
|
||||
color: var(--discord-text);
|
||||
filter: brightness(1);
|
||||
}
|
||||
.darktheme .controlCenterBox button:hover {
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
.controlsGrid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.controlsGrid .group {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@ -3535,6 +3565,14 @@ div#roomnotes2 {
|
||||
}
|
||||
|
||||
/* Specitic CSS for different elements inside the guest control-buttons */
|
||||
.darktheme .controlsGrid .director-message-box {
|
||||
background-color: var(--discord-grey-1);
|
||||
}
|
||||
|
||||
.darktheme .controlsGrid .director-message-box button {
|
||||
background-color: var(--discord-grey-3);
|
||||
}
|
||||
|
||||
.controlsGrid .director-message-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@ -3543,12 +3581,23 @@ div#roomnotes2 {
|
||||
padding: 5px;
|
||||
background: rgba(0, 0, 0, .15);
|
||||
border-radius: 4px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.darktheme .controlsGrid .director-message-box textarea {
|
||||
background-color: var(--discord-grey-4);
|
||||
color: var(--discord-text);
|
||||
}
|
||||
|
||||
|
||||
.controlsGrid .director-message-box textarea {
|
||||
flex: 1 100%;
|
||||
padding: 5px;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.controlsGrid .director-message-box .message-close {
|
||||
flex: 1;
|
||||
}
|
||||
@ -3597,18 +3646,37 @@ div#roomnotes2 {
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
/* Hightlight */
|
||||
[data-action-type="solo-video"] {
|
||||
box-shadow: 0 0 3px rgb(175 165 122), inset 0 0 2px yellow;
|
||||
}
|
||||
|
||||
/* Hightlights for buttons in the guest control-buttons */
|
||||
/* Dark theme */
|
||||
.darktheme .controlsGrid .btn-HL-yellow {
|
||||
background-color: var(--darktheme-yellow);
|
||||
}
|
||||
.darktheme .controlsGrid .btn-HL-peach {
|
||||
background-color: var(--darktheme-brown);
|
||||
}
|
||||
.darktheme .controlsGrid .btn-HL-green {
|
||||
background-color: var(--darktheme-green);
|
||||
}
|
||||
.darktheme .controlsGrid .btn-HL-blue {
|
||||
background-color: var(--darktheme-blue);
|
||||
}
|
||||
/* Light theme */
|
||||
.controlsGrid .btn-HL-yellow {
|
||||
background: rgb(255, 229, 127);
|
||||
background-color: rgb(255, 229, 127);
|
||||
}
|
||||
.controlsGrid .btn-HL-peach {
|
||||
background: rgb(228, 203, 189);
|
||||
background-color: rgb(228, 203, 189);
|
||||
}
|
||||
.controlsGrid .btn-HL-green {
|
||||
background: rgb(189, 228, 199);
|
||||
background-color: rgb(189, 228, 199);
|
||||
}
|
||||
.controlsGrid .btn-HL-blue {
|
||||
background: rgb(170, 204, 248)
|
||||
background-color: rgb(170, 204, 248)
|
||||
}
|
||||
|
||||
/* Hides buttons that are supposed to be hidden when &novice is added to URL */
|
||||
@ -3700,15 +3768,19 @@ i.las.la-circle {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
.darktheme .soloLink {
|
||||
background-color: var(--discord-grey-6);
|
||||
}
|
||||
.soloLink {
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
cursor: grab;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 1.2em;
|
||||
font-weight: 700;
|
||||
background-color: #CCC;
|
||||
cursor: grab;
|
||||
font-size: 1.2em;
|
||||
font-weight: 700;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.vidcon>h2 {
|
||||
font-size: 1em;
|
||||
@ -3732,8 +3804,13 @@ i.las.la-circle {
|
||||
box-shadow: inset 0px 0px 17px #4b4b4b;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.darktheme div#guestFeeds {
|
||||
background-color: var(--discord-grey-1)
|
||||
}
|
||||
|
||||
div#guestFeeds {
|
||||
background: var(--container-color);
|
||||
background-color: var(--container-color);
|
||||
padding: 5px 0 15px 20px;
|
||||
display: inline-block;
|
||||
margin: 0px var(--regular-margin) 80px var(--regular-margin);
|
||||
@ -4196,6 +4273,7 @@ input:checked + .slider:before {
|
||||
margin:5px;
|
||||
padding:10px;
|
||||
}
|
||||
|
||||
#promptModal, .customModelPopup, .promptModal {
|
||||
position: absolute;
|
||||
background-color: rgb(221 221 221);
|
||||
@ -4795,7 +4873,7 @@ body.darktheme h2 {
|
||||
color: #DDD;
|
||||
}
|
||||
body.darktheme button {
|
||||
filter: brightness(0.70);
|
||||
filter: brightness(0.70);
|
||||
}
|
||||
body.darktheme .column .las {
|
||||
color: black;
|
||||
@ -4840,11 +4918,12 @@ body.darktheme .white {
|
||||
filter: brightness(0.85);
|
||||
}
|
||||
body.darktheme .directorsgrid .vidcon {
|
||||
background-color: #2b2b2bdd;
|
||||
color: #978c8c;
|
||||
background-color: var(--discord-grey-3);
|
||||
color: var(--discord-text);
|
||||
}
|
||||
body.darktheme .promptModalInner{
|
||||
filter: brightness(0.65);
|
||||
body.darktheme .promptModal {
|
||||
background-color: var(--discord-grey-5);
|
||||
color: var(--discord-text);
|
||||
}
|
||||
body.darktheme .infoblob{
|
||||
color: #CCC;
|
||||
@ -4921,9 +5000,6 @@ body.darktheme #outputSource3{
|
||||
body.darktheme #videoSettings3{
|
||||
background-color: #414141;
|
||||
}
|
||||
body.darktheme .promptModalInner{
|
||||
background-color: #ccc;
|
||||
}
|
||||
body.darktheme .alertModal{
|
||||
background-color: #ccc;
|
||||
filter:brightness(0.85);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user