elias/vdo.ninja
1
0
Fork 0
mirror of https://github.com/eliasstepanik/vdo.ninja.git synced 2026-01-22 10:58:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

parent 8b53a0a8b47c60a0c63bac0675c79f24977eb991

Browse Source 
author lindenkron <lindenkron@hotmail.com> 1680868460 +0200
committer lindenkron <lindenkron@hotmail.com> 1680872353 +0200

[Initial] Discord Dark Theme
This commit is contained in:
lindenkron 2023-04-07 13:54:20 +02:00
parent 8b53a0a8b4
commit f7a5d8bce5
3 changed files with 88 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -1391,7 +1391,7 @@
<span data-translate="solo-video">Highlight guest</span> <span data-translate="solo-video">Highlight guest</span>
</button> </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);"> <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> <span data-translate="add-to-scene">add to scene 1</span>
</button> </button>
</div> </div>

8
lib.js
View File

@ -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'> \ 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)' \ <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>\ 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>\
<div id='groups'></div>"; <div id='groups'></div>";
if (session.directorUUID){ 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'> \ 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)' \ <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>\ 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>\
<div id='groups'></div>"; <div id='groups'></div>";
if (session.directorUUID){ 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'> \ 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)' \ <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>\ 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>";
} }
@ -35046,7 +35046,7 @@ function createControlBoxScreenshare(UUID, soloLink, streamID) {
controls.innerHTML += "<div class='soloButton' title='A direct solo view of the video/audio stream with nothing else.'> \ 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)' \ <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>\ 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>";
} }

124
main.css
View File

@ -1,4 +1,20 @@
:root { :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; --background-color: #141926;
--dark-background-color: #02050c; --dark-background-color: #02050c;
--container-color: #373737; --container-color: #373737;
@ -168,20 +184,29 @@ th {
a { a {
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
} }
a:link { .darktheme a:link {
text-decoration: none;
color: #B9DFF9; color: #B9DFF9;
} }
a:visited { .darktheme a:visited {
text-decoration: none; text-decoration: none;
color: #99BFD9; 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; color: #048AE8;
} }
a:active { a:active {
color: #D9E4EB; color: #508fbb;
} }
input { input {
@ -465,7 +490,7 @@ button.white:active {
position: fixed; position: fixed;
overflow-wrap: anywhere; overflow-wrap: anywhere;
padding:2% 3%; padding:2% 3%;
}. }
.avatarSelection{ .avatarSelection{
vertical-align: top; vertical-align: top;
margin: 10px 0; margin: 10px 0;
@ -622,14 +647,6 @@ body.darktheme .credits>a:visited {
height: 24px; height: 24px;
} }
.advancedAudioSettings div:nth-child(1) {
display: unset;
width: 100%;
padding: unset;
align-items: center;
gap: 4px;
}
.advancedVideoSettings div:nth-child(2) { .advancedVideoSettings div:nth-child(2) {
display: flex; display: flex;
width: 100%; width: 100%;
@ -2237,13 +2254,10 @@ span[data-action-type="stats-graphs-details-container"]>span{
padding-bottom: 20px; padding-bottom: 20px;
} }
.soloButton{ .soloButton{
word-wrap: break-word; display: flex;
overflow:hidden; flex-wrap: wrap;
white-space: nowrap; font-size: 0.7em;
overflow: hidden; overflow: hidden;
font-size:0.7em;
text-overflow: ellipsis;
margin-top: 5px;
} }
.soloButton button { .soloButton button {
margin: 5px 0px 0px 0px; margin: 5px 0px 0px 0px;
@ -2702,7 +2716,7 @@ audio.fileshare::-webkit-media-controls-play-button, video.fileshare::-webkit-me
-webkit-transform: scaleX(-1); -webkit-transform: scaleX(-1);
} }
.popup-screen { .popup-screen {
align-text: center; text-align: center;
position: absolute; position: absolute;
display:none; display:none;
top:0; top:0;
@ -2728,7 +2742,7 @@ audio.fileshare::-webkit-media-controls-play-button, video.fileshare::-webkit-me
} }
.popup-message { .popup-message {
display: none; display: none;
align-text: center; text-align: center;
position: absolute; position: absolute;
z-index: 35 !important; z-index: 35 !important;
padding: 3px !important; padding: 3px !important;
@ -2858,7 +2872,6 @@ button.toggleSettings{
display: block; display: block;
padding: 10px 10px; padding: 10px 10px;
border: 1px solid #ccc; border: 1px solid #ccc;
vertical-align: middle;
} }
#effectsDiv { #effectsDiv {
user-select: none; user-select: none;
@ -3597,18 +3610,37 @@ div#roomnotes2 {
width: max-content; 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 */ /* 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 { .controlsGrid .btn-HL-yellow {
background: rgb(255, 229, 127); background-color: rgb(255, 229, 127);
} }
.controlsGrid .btn-HL-peach { .controlsGrid .btn-HL-peach {
background: rgb(228, 203, 189); background-color: rgb(228, 203, 189);
} }
.controlsGrid .btn-HL-green { .controlsGrid .btn-HL-green {
background: rgb(189, 228, 199); background-color: rgb(189, 228, 199);
} }
.controlsGrid .btn-HL-blue { .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 */ /* Hides buttons that are supposed to be hidden when &novice is added to URL */
@ -3700,15 +3732,19 @@ i.las.la-circle {
position: relative; position: relative;
top: 1px; top: 1px;
} }
.darktheme .soloLink {
background-color: var(--discord-grey-6);
}
.soloLink { .soloLink {
background: none; background-color: #CCC;
border-radius: 0; cursor: grab;
width: 100%; font-size: 1.2em;
cursor: grab; font-weight: 700;
white-space: nowrap; padding: 5px;
text-overflow: ellipsis; border-radius: 5px;
font-size: 1.2em; white-space: nowrap;
font-weight: 700; overflow: hidden;
text-overflow: ellipsis;
} }
.vidcon>h2 { .vidcon>h2 {
font-size: 1em; font-size: 1em;
@ -3732,8 +3768,13 @@ i.las.la-circle {
box-shadow: inset 0px 0px 17px #4b4b4b; box-shadow: inset 0px 0px 17px #4b4b4b;
outline: none; outline: none;
} }
.darktheme div#guestFeeds {
background-color: var(--discord-grey-1)
}
div#guestFeeds { div#guestFeeds {
background: var(--container-color); background-color: var(--container-color);
padding: 5px 0 15px 20px; padding: 5px 0 15px 20px;
display: inline-block; display: inline-block;
margin: 0px var(--regular-margin) 80px var(--regular-margin); margin: 0px var(--regular-margin) 80px var(--regular-margin);
@ -4795,7 +4836,8 @@ body.darktheme h2 {
color: #DDD; color: #DDD;
} }
body.darktheme button { body.darktheme button {
filter: brightness(0.70); background-color: var(--discord-grey-7);
color: var(--discord-text);
} }
body.darktheme .column .las { body.darktheme .column .las {
color: black; color: black;
@ -4840,8 +4882,8 @@ body.darktheme .white {
filter: brightness(0.85); filter: brightness(0.85);
} }
body.darktheme .directorsgrid .vidcon { body.darktheme .directorsgrid .vidcon {
background-color: #2b2b2bdd; background-color: var(--discord-grey-3);
color: #978c8c; color: var(--discord-text);
} }
body.darktheme .promptModalInner{ body.darktheme .promptModalInner{
filter: brightness(0.65); filter: brightness(0.65);