mirror of
https://github.com/eliasstepanik/vdo.ninja.git
synced 2026-01-11 21:58:35 +00:00
parent 8b53a0a8b47c60a0c63bac0675c79f24977eb991
author lindenkron <lindenkron@hotmail.com> 1680868460 +0200 committer lindenkron <lindenkron@hotmail.com> 1680872353 +0200 [Initial] Discord Dark Theme
This commit is contained in:
lindenkron
parent
8b53a0a8b4
commit
f7a5d8bce5
@ -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>
|
||||
|
||||
8
lib.js
8
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>";
|
||||
}
|
||||
|
||||
@ -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.'> \
|
||||
<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>";
|
||||
}
|
||||
|
||||
|
||||
124
main.css
124
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;
|
||||
@ -622,14 +647,6 @@ body.darktheme .credits>a:visited {
|
||||
height: 24px;
|
||||
|
||||
}
|
||||
.advancedAudioSettings div:nth-child(1) {
|
||||
display: unset;
|
||||
width: 100%;
|
||||
padding: unset;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.advancedVideoSettings div:nth-child(2) {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
@ -2237,13 +2254,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 +2716,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 +2742,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 +2872,6 @@ button.toggleSettings{
|
||||
display: block;
|
||||
padding: 10px 10px;
|
||||
border: 1px solid #ccc;
|
||||
vertical-align: middle;
|
||||
}
|
||||
#effectsDiv {
|
||||
user-select: none;
|
||||
@ -3597,18 +3610,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 +3732,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 +3768,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);
|
||||
@ -4795,7 +4836,8 @@ body.darktheme h2 {
|
||||
color: #DDD;
|
||||
}
|
||||
body.darktheme button {
|
||||
filter: brightness(0.70);
|
||||
background-color: var(--discord-grey-7);
|
||||
color: var(--discord-text);
|
||||
}
|
||||
body.darktheme .column .las {
|
||||
color: black;
|
||||
@ -4840,8 +4882,8 @@ 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);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user