0a1dc5750c
* Set up JS project * Finalise JS library * Update README * Fix package.json repository url * Rename package -> `kokoro-js` * Fix samples in README * Cleanup README * Bump `phonemizer` version * Create web demo * Run prettier * Link to model used in demo * Enable multithreading in HF space demo (~40% faster) * Add link to demo in README * Bump to v1.0.1
101 lines
1.7 KiB
CSS
101 lines
1.7 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/*
|
|
* Wave animations adapted from the following two demos:
|
|
* - https://codepen.io/upasanaasopa/pen/poObEWZ
|
|
* - https://codepen.io/breakstorm00/pen/qBJZQNB
|
|
*/
|
|
|
|
*,
|
|
*:before,
|
|
*:after {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.loading-wave {
|
|
position: relative;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #2c74b3;
|
|
border-radius: 50%;
|
|
box-shadow: inset 0 0 50px 0 rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.loading-wave:before,
|
|
.loading-wave:after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: black;
|
|
transform: translate(-50%, -75%);
|
|
}
|
|
|
|
.loading-wave:before {
|
|
border-radius: 45%;
|
|
background: rgba(255, 255, 255, 1);
|
|
animation: animate 5s linear infinite;
|
|
}
|
|
|
|
.loading-wave:after {
|
|
border-radius: 40%;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
animation: animate 10s linear infinite;
|
|
}
|
|
|
|
.wave {
|
|
background: url(/wave.svg) repeat-x;
|
|
position: absolute;
|
|
top: -198px;
|
|
width: 6400px;
|
|
height: 198px;
|
|
animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
.wave:nth-of-type(2) {
|
|
top: -175px;
|
|
animation:
|
|
wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite,
|
|
swell 7s ease -1.25s infinite;
|
|
opacity: 1;
|
|
}
|
|
|
|
@keyframes wave {
|
|
0% {
|
|
margin-left: 0;
|
|
}
|
|
|
|
100% {
|
|
margin-left: -1600px;
|
|
}
|
|
}
|
|
|
|
@keyframes swell {
|
|
0%,
|
|
100% {
|
|
transform: translate3d(0, -25px, 0);
|
|
}
|
|
|
|
50% {
|
|
transform: translate3d(0, 5px, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes animate {
|
|
0% {
|
|
transform: translate(-50%, -75%) rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: translate(-50%, -75%) rotate(360deg);
|
|
}
|
|
}
|