Twitch/Chatman
0
0
Fork 0
Code Issues Activity

Update the overlay styling

Browse source
This commit is contained in:
Oliver-Akins 2024-03-10 18:23:05 -06:00
parent ed8512039a
commit de9dd58350
3 changed files with 13 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

3
site/standard/health/app.js
View file

@ -25,9 +25,6 @@ const app = new Vue({
currentHealth() { currentHealth() {
return this.totalHealth - this.lostHealth; return this.totalHealth - this.lostHealth;
}, },
parsedText() {
return this.current.split(` █ `).join(`<br>`);
},
}, },
methods: { methods: {
connected() { connected() {

2
site/standard/health/index.html
View file

@ -25,7 +25,7 @@
<div v-for="_ in currentHealth" class="health filled"></div> <div v-for="_ in currentHealth" class="health filled"></div>
<div v-for="_ in lostHealth" class="health empty"></div> <div v-for="_ in lostHealth" class="health empty"></div>
</div> </div>
<h2 id="word" v-html="parsedText"></h2> <h2 id="word">{{current}}</h2>
</div> </div>
</div> </div>
</transition> </transition>

14
site/standard/health/style.css
View file

@ -20,14 +20,24 @@ html, body, #app {
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
background: rgba(0, 0, 0, .5); background: rgba(60, 51, 146, 0.8);
position: relative; position: relative;
text-align: center; text-align: center;
border-radius: 15px; border-radius: 15px;
padding: 1rem;
color: white;
} }
h1 { h1 {
margin-bottom: 5px; line-height: 2rem;
margin: 5px 0;
letter-spacing: 2px;
}
h2 {
line-height: 1.5rem;
margin: 20px 0 5px;
letter-spacing: 2px;
} }
#health-bar { #health-bar {