diff --git a/bar.html b/bar.html new file mode 100644 index 0000000..0168fad --- /dev/null +++ b/bar.html @@ -0,0 +1,21 @@ + + + + + + + + + + + Lilac Timer + + +
+
+
+
+
+
+ + \ No newline at end of file diff --git a/timer.css b/timer.css index 0ab19d5..8cf533f 100644 --- a/timer.css +++ b/timer.css @@ -52,283 +52,315 @@ p { font-size: 1.3em; } -.contentContainer { - height: fit-content; - width: fit-content; - position: relative; - text-align: center; - } -.mainHeart { - max-height: 100vh; - max-width: 72vw; - } - #SecondHeart { - position: absolute; - top: 0px; - left: 0px; - } +/* +*** Timer Widget *** +*/ -.infoWrap { - container-type: size; - height: 100%; - width: 100%; - position: absolute; - left: 0px; - top: 0px; - display: grid; - grid-template-columns: 56% 34% 1fr; - grid-template-rows: 11% 1fr 29%; - place-items: center; - text-wrap: nowrap; -} -.infoGroup { - height: 100%; - width: 100%; - grid-column-start: 2; - grid-column-end: 2; - grid-row-start: 2; - grid-row-end: 2; -} -.infoBox { - height: auto; - width: 100%; - font-size: 4cqh; -} + .contentContainer { + height: fit-content; + width: fit-content; + position: relative; + text-align: center; + } -#InfoBox1 { - transform: translate(-2%, 0%); - margin-top: -50%; -} + .mainHeart { + max-height: 100vh; + max-width: 72vw; + } -#InfoBox2 { - /* -- !!DO NOT REMOVE!! -- - Removing this transform kills the goal label and I do not know why + #SecondHeart { + position: absolute; + top: 0px; + left: 0px; + } + + .infoWrap { + container-type: size; + height: 100%; + width: 100%; + position: absolute; + left: 0px; + top: 0px; + display: grid; + grid-template-columns: 56% 34% 1fr; + grid-template-rows: 11% 1fr 29%; + place-items: center; + text-wrap: nowrap; + } + + .infoGroup { + height: 100%; + width: 100%; + grid-column-start: 2; + grid-column-end: 2; + grid-row-start: 2; + grid-row-end: 2; + } + + .infoBox { + height: auto; + width: 100%; + font-size: 4cqh; + } + + #InfoBox1 { + transform: translate(-2%, 0%); + margin-top: -50%; + } + + #InfoBox2 { + /* -- !!DO NOT REMOVE!! -- + Removing this transform kills the goal label and I do not know why + */ + transform: translate(0%, 0%); + } + + #InfoBox3 { + width: 142%; + position: relative; + transform: translate(65%, 10%) scale(1, 1); + border-radius: 3cqh; + border: .4cqh solid; + border-color: #00A0F3; + background-color: white; + padding: .4ch 0 .4ch 0; + } + + #Timer { + /* + margin-top: 10%; + margin-bottom: 2%; */ - transform: translate(0%, 0%); -} + transform: translate(0%, 0%) scale(.95, 1.2); + } -#InfoBox3 { - width: 142%; - position: relative; - transform: translate(65%, 10%) scale(1, 1); - border-radius: 3cqh; - border: .4cqh solid; - border-color: #00A0F3; - background-color: white; - padding: .4ch 0 .4ch 0; -} + #TimerInfo { + transform: translate(0%, -60%); + display: none; + } -#Timer { - /* - margin-top: 10%; - margin-bottom: 2%; - */ - transform: translate(0%, 0%) scale(.95, 1.2); -} + #GoalLabel { + color: #404145; + } -#TimerInfo { - transform: translate(0%, -60%); - display: none; -} + #GoalName { + width: fit-content; + position: relative; + color: #32B993; + text-wrap: nowrap; + display: inline-block; + padding-right: 4%; + transform: translate(.5ch, 0%); + /* --- animation-duration = JS VAR --- */ + } -#GoalLabel { - color: #404145; -} + #GoalNameDupe { + width: fit-content; + position: relative; + color: #32B993; + text-wrap: nowrap; + padding-right: 4%; + transform: translate(.5ch, 0%); + /* --- animation-duration = JS VAR --- */ + } -#GoalName { - width: fit-content; - position: relative; - color: #32B993; - text-wrap: nowrap; - display: inline-block; - padding-right: 4%; - transform: translate(.5ch, 0%); - /* --- animation-duration = JS VAR --- */ -} + #GoalProgressWrap { + width: fit-content; + padding-left: .8cqh; + padding-right: .8cqh; + border-radius: 3cqh; + border: .4cqh solid; + border-color: #404145; + margin: .4ch auto 0 auto; + overflow: hidden; + } -#GoalNameDupe { - width: fit-content; - position: relative; - color: #32B993; - text-wrap: nowrap; - padding-right: 4%; - transform: translate(.5ch, 0%); - /* --- animation-duration = JS VAR --- */ -} + #GoalProgressBar { + width: 110%; + background-color: #FC98B3; + transform: translate(-5%, 0%) scale(1, 1.5); + } -#GoalProgressWrap { - width: fit-content; - padding-left: .8cqh; - padding-right: .8cqh; - border-radius: 3cqh; - border: .4cqh solid; - border-color: #404145; - margin: .4ch auto 0 auto; - overflow: hidden; -} + #GoalProgress { + transform: translate(0%, -8%) scale(1); + text-align: center; + margin-top: -19%; + color: #404145; + } -#GoalProgressBar { - width: 110%; - background-color: #FC98B3; - transform: translate(-5%, 0%) scale(1, 1.5); -} + #TopUsers { + margin-bottom: 2%; + font-weight: normal; + color: #404145; + } -#GoalProgress { - transform: translate(0%, -8%) scale(1); - text-align: center; - margin-top: -19%; - color: #404145; -} + .giftUserWrap { + transform: translate(9%, -8%) scale(1, 1); + } -#TopUsers { - margin-bottom: 2%; - font-weight: normal; - color: #404145; -} + .giftUserRow { + width: 100%; + display: grid; + grid-template-columns: 2ch 14ch 5ch; + grid-template-rows: 1fr; + text-wrap: nowrap; + overflow: hidden; + text-align: center; + } -.giftUserWrap { - transform: translate(9%, -8%) scale(1, 1); -} + .giftUserNum { + border-right: 1.5px solid #00A0F3; + border-image: linear-gradient(to top, + transparent 0%, + transparent 5%, + #00A0F3 35%, + #00A0F3 65%, + transparent 95%) 1; + } -.giftUserRow { - width: 100%; - display: grid; - grid-template-columns: 2ch 14ch 5ch; - grid-template-rows: 1fr; - text-wrap: nowrap; - overflow: hidden; - text-align: center; -} + .giftUserScore { + border-left: 1.5px solid #00A0F3; + border-image: linear-gradient(to top, + transparent 0%, + transparent 5%, + #00A0F3 40%, + #00A0F3 60%, + transparent 95%) 1; + text-align: right; + padding-right: .25ch; + } -.giftUserNum { - border-right: 1.5px solid #00A0F3; - border-image: linear-gradient(to top, - transparent 0%, - transparent 5%, - #00A0F3 35%, - #00A0F3 65%, - transparent 95%) 1; -} + .giftUserName { + width: fit-content; + margin-left: 0%; + position: relative; + color: #32B993; + text-align: left; + display: inline-block; + padding-right: 4%; + transform: translate(.5ch, 0%); + } -.giftUserScore { - border-left: 1.5px solid #00A0F3; - border-image: linear-gradient(to top, - transparent 0%, - transparent 5%, - #00A0F3 40%, - #00A0F3 60%, - transparent 95%) 1; - text-align: right; - padding-right: .25ch; -} + .giftUserNameDupe { + width: fit-content; + margin-left: 0%; + position: relative; + color: #32B993; + text-align: left; + padding-right: 4%; + transform: translate(.5ch, 0%); + } -.giftUserName { - width: fit-content; - margin-left: 0%; - position: relative; - color: #32B993; - text-align: left; - display: inline-block; - padding-right: 4%; - transform: translate(.5ch, 0%); -} + #GiftUserName1 { + /* --- animation-duration = JS VAR --- */ + } -.giftUserNameDupe { - width: fit-content; - margin-left: 0%; - position: relative; - color: #32B993; - text-align: left; - padding-right: 4%; - transform: translate(.5ch, 0%); -} + #GiftUserName2 { + /* --- animation-duration = JS VAR --- */ + } -#GiftUserName1 { - /* --- animation-duration = JS VAR --- */ -} + #GiftUserName3 { + /* --- animation-duration = JS VAR --- */ + } -#GiftUserName2 { - /* --- animation-duration = JS VAR --- */ -} + #GiftUserNameDupe1 { + /* --- animation-duration = JS VAR --- */ + } -#GiftUserName3 { - /* --- animation-duration = JS VAR --- */ -} + #GiftUserNameDupe2 { + /* --- animation-duration = JS VAR --- */ + } -#GiftUserNameDupe1 { - /* --- animation-duration = JS VAR --- */ -} + #GiftUserNameDupe3 { + /* --- animation-duration = JS VAR --- */ + } -#GiftUserNameDupe2 { - /* --- animation-duration = JS VAR --- */ -} + .scrollWrap { + width: 100%; + } -#GiftUserNameDupe3 { - /* --- animation-duration = JS VAR --- */ -} + .rightFadeWrap { + /* + mask-image: linear-gradient(to right, black 75%, transparent 90%); + */ + } -.scrollWrap { - width: 100%; -} + #RightFadeWrapInfoBox2 { + width: 90%; + border-left: 1.5px solid #00A0F3; + border-right: 1.5px solid #00A0F3; + border-image: linear-gradient(to top, + transparent 0%, + transparent 5%, + #00A0F3 40%, + #00A0F3 60%, + transparent 95%) 1; + transform: translate(1ch, 0%) scale(1); + } -.rightFadeWrap { - /* - mask-image: linear-gradient(to right, black 75%, transparent 90%); - */ -} + .fadeLeft { + mask-image: linear-gradient(to right, + transparent 0%, + black 1ch, + black calc(100% - 2ch), + transparent 100%); + } -#RightFadeWrapInfoBox2 { - width: 90%; - border-left: 1.5px solid #00A0F3; - border-right: 1.5px solid #00A0F3; - border-image: linear-gradient(to top, - transparent 0%, - transparent 5%, - #00A0F3 40%, - #00A0F3 60%, - transparent 95%) 1; - transform: translate(1ch, 0%) scale(1); -} + #ScrollWrapGoal { + /* + width: 90%; + */ + } -.fadeLeft { - mask-image: linear-gradient(to right, - transparent 0%, - black 1ch, - black calc(100% - 2ch), - transparent 100%); -} + .scrollWrapName { + } -#ScrollWrapGoal { - /* - width: 90%; - */ -} + .scrollWrapW { + width: fit-content; + display: flex; + } -.scrollWrapName { -} + #ScrollWrapGoalW { + } -.scrollWrapW { - width: fit-content; - display: flex; -} + .hide { + display: none; + } -#ScrollWrapGoalW { -} + .scrollAnim { + animation: myScroll linear infinite; + } -.hide { - display: none; -} + @keyframes myScroll { + 0% {left: 0%; top: 0%;} + 42% {left: 0%; top: 0%;} + 100% {left: -54%; top: 0%;} + } -.scrollAnim { - animation: myScroll linear infinite; -} -@keyframes myScroll { - 0% {left: 0%; top: 0%;} - 42% {left: 0%; top: 0%;} - 100% {left: -54%; top: 0%;} -} \ No newline at end of file + +/* +*** Progres Bar Widget *** +*/ + + + .widgetContainer { + max-height: 16vh; + max-width: 100vw; + position: relative; + text-align: center; + background-color: lightblue; + container-type: inline-size; + container-name: sidebar; + } + .layoutContainer { + height: clamp(64px, calc(.164*100vw), calc(.164*100vw)); + width: clamp(36.563px, 100vw, 100vw); + position: relative; + text-align: center; + background-color: grey; + } \ No newline at end of file