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.