matty/peertube-plugin-livechat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adding an easy way to customize background transparency in OBS and co.

Browse Source
This commit is contained in:
John Livingston 2022-08-07 11:51:07 +02:00
parent 68dc74d630
commit 36cda4a9b4
No known key found for this signature in database
GPG Key ID: B17B5640CE66CDBC
4 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -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

3
conversejs/custom/shared/styles/_variables.scss
View File

@ -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,

8
conversejs/custom/shared/styles/livechat.scss
View File

@ -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

7
documentation/prosody.md
View File

@ -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.