From f7a5d8bce54edc20b614e2e203b7f6bbdfd3472e Mon Sep 17 00:00:00 2001 From: lindenkron Date: Fri, 7 Apr 2023 13:54:20 +0200 Subject: [PATCH 1/5] parent 8b53a0a8b47c60a0c63bac0675c79f24977eb991 author lindenkron 1680868460 +0200 committer lindenkron 1680872353 +0200 [Initial] Discord Dark Theme --- index.html | 2 +- lib.js | 8 ++-- main.css | 124 +++++++++++++++++++++++++++++++++++------------------ 3 files changed, 88 insertions(+), 46 deletions(-) diff --git a/index.html b/index.html index d7368f0..84089b9 100644 --- a/index.html +++ b/index.html @@ -1391,7 +1391,7 @@ Highlight guest diff --git a/lib.js b/lib.js index 9f910f9..453955e 100644 --- a/lib.js +++ b/lib.js @@ -15700,7 +15700,7 @@ async function createDirectorOnlyBox() { controls.innerHTML += "
\ " + sanitizeChat(soloLink) + "\ - \ + \
\
"; if (session.directorUUID){ @@ -15863,7 +15863,7 @@ async function createDirectorScreenshareOnlyBox() { // sstype=3 controls.innerHTML += "
\ " + sanitizeChat(soloLink) + "\ - \ + \
\
"; if (session.directorUUID){ @@ -16352,7 +16352,7 @@ function createControlBox(UUID, soloLink, streamID) { controls.innerHTML += "
\ " + sanitizeChat(soloLink) + "\ - \ + \
"; } @@ -35046,7 +35046,7 @@ function createControlBoxScreenshare(UUID, soloLink, streamID) { controls.innerHTML += "
\ " + sanitizeChat(soloLink) + "\ - \ + \
"; } diff --git a/main.css b/main.css index 5086bb6..73aa53b 100644 --- a/main.css +++ b/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); From 78f33690666219af0b346b44eca76be6be3c765b Mon Sep 17 00:00:00 2001 From: lindenkron Date: Fri, 7 Apr 2023 18:24:38 +0200 Subject: [PATCH 2/5] Darkthemed Message box --- main.css | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/main.css b/main.css index 73aa53b..54d036c 100644 --- a/main.css +++ b/main.css @@ -3548,6 +3548,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; @@ -3556,12 +3564,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; } From 5f9056d966e49366f8601185e50a4020bc2ed412 Mon Sep 17 00:00:00 2001 From: lindenkron Date: Fri, 7 Apr 2023 18:32:30 +0200 Subject: [PATCH 3/5] Apparently my version lost this commit? --- main.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/main.css b/main.css index 54d036c..92fa91f 100644 --- a/main.css +++ b/main.css @@ -647,6 +647,12 @@ body.darktheme .credits>a:visited { height: 24px; } +.advancedAudioSettings div:nth-child(1) { + display: unset; + width: 100%; + padding: unset; +} + .advancedVideoSettings div:nth-child(2) { display: flex; width: 100%; From b5d37f3f6be8bc2cdd96cb6ee138788b6a035d07 Mon Sep 17 00:00:00 2001 From: lindenkron Date: Fri, 7 Apr 2023 19:08:58 +0200 Subject: [PATCH 4/5] Light/Dark Modal fixes --- main.css | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/main.css b/main.css index 92fa91f..bef7c54 100644 --- a/main.css +++ b/main.css @@ -3509,11 +3509,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; @@ -4262,6 +4271,7 @@ input:checked + .slider:before { margin:5px; padding:10px; } + #promptModal, .customModelPopup, .promptModal { position: absolute; background-color: rgb(221 221 221); @@ -4861,8 +4871,7 @@ body.darktheme h2 { color: #DDD; } body.darktheme button { - background-color: var(--discord-grey-7); - color: var(--discord-text); + filter: brightness(0.70); } body.darktheme .column .las { color: black; @@ -4910,8 +4919,9 @@ body.darktheme .directorsgrid .vidcon { 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; @@ -4988,9 +4998,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); From baf0c9812c0592bd6843f868ad1b3c9ab12d9531 Mon Sep 17 00:00:00 2001 From: lindenkron Date: Fri, 7 Apr 2023 19:30:59 +0200 Subject: [PATCH 5/5] Extra div for elements & styling changes. --- lib.js | 6 ++++-- main.css | 6 ++++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/lib.js b/lib.js index 453955e..54c75ad 100644 --- a/lib.js +++ b/lib.js @@ -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); } diff --git a/main.css b/main.css index bef7c54..a70d5d0 100644 --- a/main.css +++ b/main.css @@ -625,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; @@ -648,7 +649,8 @@ body.darktheme .credits>a:visited { } .advancedAudioSettings div:nth-child(1) { - display: unset; + flex-direction: column; + align-items: flex-start; width: 100%; padding: unset; }