LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

Closes #910: make transparency of message bubbles overridable via CSS (#911)

Browse Source 
* Closes #910: make transparency of message bubbles overridable via CSS

* Fix CSS variable declaration
This commit is contained in:
Aral Balkan 2021-04-11 22:08:06 +01:00 committed by GitHub
parent a4309fd899
commit 2409cab5b6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
webroot/js/utils/user-colors.js
View File

@ -8,7 +8,7 @@ export function messageBubbleColorForString(str) {
// Tweak these to adjust the result of the color // Tweak these to adjust the result of the color
const saturation = 25; const saturation = 25;
const lightness = 45; const lightness = 45;
const alpha = 0.3; const alpha = 'var(--message-background-alpha)';
const hue = parseInt(Math.abs(hash), 16) % 360; const hue = parseInt(Math.abs(hash), 16) % 360;
return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`; return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;

6
webroot/styles/chat.css
View File

@ -1,5 +1,11 @@
/* some base styles for chat and messaging components */ /* some base styles for chat and messaging components */
:root {
/* Override this in your custom CSS to change the
opacity of the message backgrounds. */
--message-background-alpha: 0.3;
}
#chat-container { #chat-container {
position: fixed; position: fixed;
z-index: 9; z-index: 9;