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 # Changelog
## 5.7.1
* Adding an easy way to customize background transparency in OBS and co.
## 5.7.0 ## 5.7.0
### New features ### New features

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

@ -11,6 +11,9 @@
--peertube-button-background: #f2690d; --peertube-button-background: #f2690d;
--peertube-link: #000; --peertube-link: #000;
--peertube-link-hover: #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, .conversejs.theme-peertube,

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

@ -65,18 +65,18 @@ body[livechat-viewer-mode="on"] {
// Transparent mode // Transparent mode
body.livechat-transparent { body.livechat-transparent {
// --peertube-main-background: rgba(0 0 0 / 0%) !important; // --peertube-main-background: var(--livechat-transparent) !important;
// --peertube-menu-background: rgba(0 0 0 / 0%) !important; // --peertube-menu-background: var(--livechat-transparent) !important;
&.converse-fullscreen { &.converse-fullscreen {
background-color: rgba(0 0 0 / 0%) !important; background-color: var(--livechat-transparent) !important;
} }
.chat-body, .chat-body,
.conversejs .chatroom .box-flyout, .conversejs .chatroom .box-flyout,
.conversejs .chatbox .chat-content, .conversejs .chatbox .chat-content,
.conversejs .chatbox .chat-content .chat-content__notifications { .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 // 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. Then use this link as a «web browser source» in OBS.
You can use the «Transparent background» to have a transparent background 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: 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. in the modal, check «use curent theme colors», then you can try to manually change color values in the URL.