HyperSpaceOut/OBS-overlay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: meter gradient now scales correctly across resolutions

Browse Source 
The header element was width:100% so the gradient filled relative to
the viewport, not the visible text. With centered text, low fill
percentages fell entirely outside the text bounds — making the first
player (12.5%) invisible and causing shifts at different resolutions.
Changed to width:fit-content with translateX(-50%) centering so the
gradient maps 1:1 to the text content.

Made-with: Cursor
This commit is contained in:
cottongin
2026-03-20 23:06:45 -04:00
parent fa7363bc78
commit 18d66c2dba
2 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
js/room-code-display.js
View File

@@ -211,7 +211,7 @@ class RoomCodeDisplay {
header.textContent = inputs.headerText.value; header.textContent = inputs.headerText.value;
this.#applyMeterGradient(); this.#applyMeterGradient();
header.style.fontSize = `${inputs.headerSize.value}px`; header.style.fontSize = `${inputs.headerSize.value}px`;
header.style.transform = `translateY(${inputs.headerOffset.value}px)`; header.style.transform = `translateX(-50%) translateY(${inputs.headerOffset.value}px)`;
footer.textContent = inputs.footerText.value; footer.textContent = inputs.footerText.value;
footer.style.color = inputs.footerColor.value; footer.style.color = inputs.footerColor.value;

6
optimized-controls.html
View File

@@ -29,9 +29,9 @@
#header { #header {
position: absolute; position: absolute;
width: 100%; width: fit-content;
text-align: center; left: 50%;
transform: translateY(-220px); transform: translateX(-50%) translateY(-220px);
color: #f35dcb; color: #f35dcb;
font-size: 80px; font-size: 80px;
font-weight: bold; font-weight: bold;