sugoidogo/twitch-subathon-countdown
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

convert to sugoi web services

Browse Source
This commit is contained in:
josephsmendoza
2023-07-14 19:05:49 -07:00
parent a88a096af8
commit aca8b21945
17 changed files with 370 additions and 1131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+22 -172
View File
@@ -2,7 +2,8 @@
font-family: 'Ubuntu', sans-serif !important;
}
body, body * {
body,
body * {
padding: 0;
margin: 0;
font-family: 'Manrope', sans-serif;
@@ -13,16 +14,12 @@ body {
height: 100vh;
}
:root {
--background-color: #A020F0;
--shadow-color: #00000090;
--text-color: #FFFFFF;
}
#container {
position: absolute;
top: 50%;
@@ -30,63 +27,17 @@ body {
transform: translate(-50%, -50%);
/*background-color: var(--background-color);*/
background-image:
-webkit-linear-gradient(-45deg,
transparent 33%, rgba(0, 0, 0, .1) 33%,
rgba(0,0, 0, .1) 66%, transparent 66%),
-webkit-linear-gradient(top,
rgba(255, 255, 255, .25),
rgba(0, 0, 0, .25)),
-webkit-linear-gradient(left, #0074cc, #a700cc);
-webkit-linear-gradient(-45deg,
transparent 33%, rgba(0, 0, 0, .1) 33%,
rgba(0, 0, 0, .1) 66%, transparent 66%),
-webkit-linear-gradient(top,
rgba(255, 255, 255, .25),
rgba(0, 0, 0, .25)),
-webkit-linear-gradient(left, #0074cc, #a700cc);
box-shadow: 0 0 1.25rem 0.5rem var(--shadow-color);
width: 500px;
height: 180px;
border-radius: 30px;
visibility: hidden;
}
#SpecialHourText {
opacity: 0;
font-size: 2.5rem;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
/* #HappyHourDeactive {
visibility: hidden;
font-size: 3rem;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
#HappyHourError {
visibility: hidden;
font-size: 3rem;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
} */
#SpecialHourHTML {
top:-200px;
position: relative;
}
#startPage {
position: absolute;
align-items: center;
top: 75%;
left: 50%;
transform: translate(-50%, -50%);
/*background-color: var(--background-color);*/
width: 150px;
height: 50px;
border-radius: 30px;
background:none;
}
#textDiv {
@@ -96,79 +47,6 @@ body {
height: 100%;
}
.button {
border-radius: 30px;
box-shadow: 0 0 1.25rem 0.5rem var(--shadow-color);
justify-content: center;
align-items: center;
display: flex;
height: 100%;
width: 150px;
height: 50px;
top: 50%;
left: 50%;
color:white;
/*background-image:
-webkit-linear-gradient(-45deg,
transparent 33%, rgba(0, 0, 0, .1) 33%,
rgba(0,0, 0, .1) 66%, transparent 66%),
-webkit-linear-gradient(top,
rgba(255, 255, 255, .25),
rgba(0, 0, 0, .25)),
-webkit-linear-gradient(left, #0074cc, #a700cc);*/
background:none;
}
#firstButtonDiv, #secondButtonDiv {
background-image:
-webkit-linear-gradient(-45deg,
transparent 33%, rgba(0, 0, 0, .1) 33%,
rgba(0,0, 0, .1) 66%, transparent 66%),
-webkit-linear-gradient(top,
rgba(255, 255, 255, .25),
rgba(0, 0, 0, .25)),
-webkit-linear-gradient(left, #0074cc, #a700cc);
width: 150px;
height: 50px;
display: inline-block;
}
#firstButtonDiv:hover, #secondButtonDiv:hover {
background-image:
-webkit-linear-gradient(-45deg,
transparent 33%, rgba(0, 0, 0, .1) 33%,
rgba(0,0, 0, .1) 66%, transparent 66%),
-webkit-linear-gradient(top,
rgba(255, 255, 255, .25),
rgba(0, 0, 0, .25)),
-webkit-linear-gradient(left, #0061ac, #8e00ad)!important;
}
#firstButtonDiv, #secondButtonDiv {
border-radius: 30px;
justify-content: center;
align-items: center;
display: flex;
height: 100%;
width: 150px;
height: 50px;
top: 50%;
left: 50%;
color:white;
background-image:
-webkit-linear-gradient(-45deg,
transparent 33%, rgba(0, 0, 0, .1) 33%,
rgba(0,0, 0, .1) 66%, transparent 66%),
-webkit-linear-gradient(top,
rgba(255, 255, 255, .25),
rgba(0, 0, 0, .25)),
-webkit-linear-gradient(left, #0074cc, #a700cc);
}
#secondButtonDiv {
margin-top:10px;
}
p {
color: var(--text-color);
font-size: 5.8rem;
@@ -176,54 +54,26 @@ p {
text-shadow: 0px 0px 10px var(--shadow-color);
}
img {
position: absolute;
top: 0;
bottom: 0;
}
canvas {
width: 500px;
height: 180px;
border-radius: 20px;
position: absolute;
top: 0;
bottom: 0;
z-index: 2;
}
.addedTime {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
display: none;
z-index: 5;
font-weight: 400;
font-size: 3.25rem;
/*color: var(--background-color);*/
color:white;
transition: top 1s ease-out, opacity .5s ease-out;
color: white;
animation: slidefadeout 2s ease-out;
opacity: 0;
}
.gold {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
display: none;
z-index: 5;
font-weight: 400;
font-size: 3.25rem;
/*color: var(--background-color);*/
color:gold;
background: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: top 1s ease-out, opacity .5s ease-out;
text-shadow:none !important;
}
@keyframes slidefadeout {
0% {
opacity: 1;
top: 50%;
}
100% {
opacity: 0;
top: 25%;
}
}