janis/teamspeak-obs-overlay
1
0
Fork 0
mirror of https://github.com/DerTyp7/teamspeak-obs-overlay.git synced 2025-10-30 05:07:12 +01:00
Code Issues Packages Projects Releases Wiki Activity

added style config.js

Browse Source
This commit is contained in:
Janis
2022-10-25 21:01:04 +02:00
parent 3332826404
commit 84c6741944
4 changed files with 21 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
config.js Normal file
View File

@@ -0,0 +1,9 @@
const CONFIG = {
style: {
fontBackground: "rgba(19, 20, 33, 0.5)",
fontColor: "#ffffff",
fontSize: "70pt",
fontStrokeSize: "3px",
fontStrokeColor: "#000000",
},
};

10
css/style.css
View File

@@ -1,12 +1,8 @@
* { * {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-weight: bold; font-weight: bold;
color: white;
font-size: 70pt;
padding: 0; padding: 0;
margin: 0; margin: 0;
-webkit-text-stroke: 3px black;
background-color: transparent;
} }
#content div { #content div {
margin-top: 5px; margin-top: 5px;
@@ -23,3 +19,9 @@
.content-text { .content-text {
margin-left: 130px; margin-left: 130px;
} }
.content-text p {
display: inline;
padding-left: 20px;
padding-right: 20px;
}

7
js/display_content.js
View File

@@ -3,7 +3,8 @@ function drawClients() {
result = ""; result = "";
getClientsInChannel(thisClient.channel).forEach((c) => { getClientsInChannel(thisClient.channel).forEach((c) => {
result += '<div> <div class="content-img">'; result += `<div style="color:${CONFIG.style.fontColor}; font-size:${CONFIG.style.fontSize}">`;
result += '<div class="content-img">';
if (c.outputMuted) { if (c.outputMuted) {
result += ' <img src="img/muted_output.svg" />'; result += ' <img src="img/muted_output.svg" />';
} else if (c.inputMuted) { } else if (c.inputMuted) {
@@ -14,7 +15,9 @@ function drawClients() {
result += ' <img src="img/off.svg" />'; result += ' <img src="img/off.svg" />';
} }
result += "</div>"; result += "</div>";
result += '<div class="content-text">' + c.name + "</div></div>"; result += `<div class="content-text"
style="-webkit-text-stroke:${CONFIG.style.fontStrokeSize} ${CONFIG.style.fontStrokeColor};
"><p style="background:${CONFIG.style.fontBackground};">${c.name}</p></div></div>`;
}); });
elem.innerHTML = result; elem.innerHTML = result;
} }

1
overlay.html
View File

@@ -8,6 +8,7 @@
<title>TS5 - OBS Overlay</title> <title>TS5 - OBS Overlay</title>
</head> </head>
<body> <body>
<script src="config.js"></script>
<script src="js/objects.js"></script> <script src="js/objects.js"></script>
<script> <script>
let clientList = new List(); let clientList = new List();