diff --git a/timer.css b/timer.css index dacb766..5212bc2 100644 --- a/timer.css +++ b/timer.css @@ -28,7 +28,7 @@ main { h1 { margin: 0; - font-size: 3.4em; + font-size: 3.6em; color: #404145; font-weight: normal; } @@ -49,8 +49,7 @@ h3 { p { margin: 0; - font-size: 1.4em; - line-height: 95%; + font-size: 1.3em; } .contentContainer { @@ -98,15 +97,18 @@ p { height: auto; width: 100%; font-size: 4cqh; - transform: translate(12%, -68%); } #InfoBox1 { - + transform: translate(-2%, 0%); + margin-top: -50%; } #InfoBox2 { - transform: translate(-1%, -88%); + /* -- !!DO NOT REMOVE!! -- + Removing this transform kills the goal label and I do not know why + */ + transform: translate(0%, 0%); } #InfoBox3 { @@ -117,20 +119,15 @@ p { border: .4cqh solid; border-color: #00A0F3; background-color: white; -} - -.rightFadeWrap { - mask-image: linear-gradient(to right, black 85%, transparent 100%); -} - -#RightFadeWrapInfoBox3 { - + padding: .4ch 0 .4ch 0; } #Timer { + /* margin-top: 10%; margin-bottom: 2%; - transform: translate(-7.5%, 3%) scale(.95, 1.2); + */ + transform: translate(0%, 0%) scale(.95, 1.2); } #TimerInfo { @@ -139,7 +136,6 @@ p { } #GoalLabel { - transform: translate(5%, 0%) scale(1); color: #404145; } @@ -168,11 +164,10 @@ p { width: fit-content; padding-left: .8cqh; padding-right: .8cqh; - transform: translate(7%, 0%) scale(1, 1); border-radius: 3cqh; border: .4cqh solid; border-color: #404145; - margin: 0 auto .8cqh auto; + margin: .4ch auto 0 auto; } #GoalProgress { @@ -198,7 +193,6 @@ p { text-wrap: nowrap; overflow: hidden; text-align: center; - transform: translate(0%, 0%) scale(1, 1); } .giftUserName { @@ -228,12 +222,10 @@ p { #GiftUserName2 { /* --- animation-duration = JS VAR --- */ - animation-delay: 3s; } #GiftUserName3 { /* --- animation-duration = JS VAR --- */ - animation-delay: 6s; } #GiftUserNameDupe1 { @@ -242,24 +234,30 @@ p { #GiftUserNameDupe2 { /* --- animation-duration = JS VAR --- */ - animation-delay: 3s; } #GiftUserNameDupe3 { /* --- animation-duration = JS VAR --- */ - animation-delay: 6s; } .scrollWrap { width: 100%; } +.rightFadeWrap { + mask-image: linear-gradient(to right, black 75%, transparent 90%); +} + +#RightFadeWrapInfoBox3 { + +} + .fadeLeft { mask-image: linear-gradient(to right, transparent 0%, black 1ch); } #ScrollWrapGoal { - transform: translate(8%, -10%) scale(1); + transform: translate(1ch, 0%) scale(1); } .scrollWrapName { diff --git a/timer.js b/timer.js index 7ffc723..20b8395 100644 --- a/timer.js +++ b/timer.js @@ -133,7 +133,7 @@ class TimerRenderer { if (this.scrollboxes[i].id == 'ScrollWrapGoal') { // Check if element text overflows - if (this.goal_name.getBoundingClientRect().width > (this.scrollboxes[i].getBoundingClientRect().width * .95) ) { + if (this.goal_name.getBoundingClientRect().width > (this.scrollboxes[i].getBoundingClientRect().width * .85) ) { // Toggle animation this.goal_name.classList.add("scrollAnim"); this.goal_namedupe.classList.add("scrollAnim"); @@ -152,7 +152,7 @@ class TimerRenderer { } else { // Check if element text overflows - if (this.userboxes[i].getBoundingClientRect().width > (this.scrollboxes[i].getBoundingClientRect().width * .8) ) { + if (this.userboxes[i].getBoundingClientRect().width > (this.scrollboxes[i].getBoundingClientRect().width * .75) ) { // Toggle animation this.userboxes[i].classList.add("scrollAnim"); this.userdupeboxes[i].classList.add("scrollAnim"); @@ -178,20 +178,20 @@ class TimerRenderer { reset() { this.timer.textContent = "00:00"; this.goal_label.textContent = "Next Goal:"; - this.goal_name.textContent = "The answer was.."; - this.goal_namedupe.textContent = "The answer was.."; + this.goal_name.textContent = "The answer is..."; + this.goal_namedupe.textContent = "The answer is..."; this.goal_progress.textContent = "0000/0000"; this.topusers_label.textContent = "Leaderboard:"; this.topusers_user1_num.textContent = "1"; - this.topusers_user1_name.textContent = "Username_Very_Super_Long12"; - this.topusers_userdupe1_name.textContent = "Username_Very_Super_Long12"; + this.topusers_user1_name.textContent = "Username4"; + this.topusers_userdupe1_name.textContent = "Username4"; this.topusers_user2_num.textContent = "2"; this.topusers_user2_name.textContent = "User"; this.topusers_userdupe2_name.textContent = "User"; this.topusers_user3_num.textContent = "3"; - this.topusers_user3_name.textContent = "Username48"; - this.topusers_userdupe3_name.textContent = "Username48"; + this.topusers_user3_name.textContent = "Username_Very_Super_Long12"; + this.topusers_userdupe3_name.textContent = "Username_Very_Super_Long12"; }