From 36cda4a9b4297ea3fcf7888eaed2d17bee4be593 Mon Sep 17 00:00:00 2001
From: John Livingston <git@john-livingston.fr>
Date: Sun, 7 Aug 2022 11:51:07 +0200
Subject: [PATCH] Adding an easy way to customize background transparency in
 OBS and co.

---
 CHANGELOG.md                                    | 4 ++++
 conversejs/custom/shared/styles/_variables.scss | 3 +++
 conversejs/custom/shared/styles/livechat.scss   | 8 ++++----
 documentation/prosody.md                        | 7 +++++++
 4 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8ca5c81e..9856c45d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 5.7.1
+
+* Adding an easy way to customize background transparency in OBS and co.
+
 ## 5.7.0
 
 ### New features
diff --git a/conversejs/custom/shared/styles/_variables.scss b/conversejs/custom/shared/styles/_variables.scss
index 506fa979..4d2d4c52 100644
--- a/conversejs/custom/shared/styles/_variables.scss
+++ b/conversejs/custom/shared/styles/_variables.scss
@@ -11,6 +11,9 @@
   --peertube-button-background: #f2690d;
   --peertube-link: #000;
   --peertube-link-hover: #000;
+
+  // we add --livechat-transparent variable, so that users can customize transparent background in OBS (for example).
+  --livechat-transparent: rgba(0 0 0 / 0%);
 }
 
 .conversejs.theme-peertube,
diff --git a/conversejs/custom/shared/styles/livechat.scss b/conversejs/custom/shared/styles/livechat.scss
index 2459e4e0..80b09dc0 100644
--- a/conversejs/custom/shared/styles/livechat.scss
+++ b/conversejs/custom/shared/styles/livechat.scss
@@ -65,18 +65,18 @@ body[livechat-viewer-mode="on"] {
 
 // Transparent mode
 body.livechat-transparent {
-  // --peertube-main-background: rgba(0 0 0 / 0%) !important;
-  // --peertube-menu-background: rgba(0 0 0 / 0%) !important;
+  // --peertube-main-background: var(--livechat-transparent) !important;
+  // --peertube-menu-background: var(--livechat-transparent) !important;
 
   &.converse-fullscreen {
-    background-color: rgba(0 0 0 / 0%) !important;
+    background-color: var(--livechat-transparent) !important;
   }
 
   .chat-body,
   .conversejs .chatroom .box-flyout,
   .conversejs .chatbox .chat-content,
   .conversejs .chatbox .chat-content .chat-content__notifications {
-    background-color: rgba(0 0 0 / 0%) !important;
+    background-color: var(--livechat-transparent) !important;
   }
 
   // Hide the background_logo
diff --git a/documentation/prosody.md b/documentation/prosody.md
index 2a444feb..09ae0eb0 100644
--- a/documentation/prosody.md
+++ b/documentation/prosody.md
@@ -174,6 +174,13 @@ Check the «readonly» checkbox in the modal.
 Then use this link as a «web browser source» in OBS.
 
 You can use the «Transparent background» to have a transparent background in OBS.
+If you want to customize the background transparency, you can add this CSS in your OBS browser source's settings:
+
+```css
+:root {
+  --livechat-transparent: rgba(255 255 255 / 90%) !important;
+}
+```
 
 Note: you can customize colors. This is undocumented yet, but you can try this:
 in the modal, check «use curent theme colors», then you can try to manually change color values in the URL.