293 lines
6.8 KiB
TypeScript
293 lines
6.8 KiB
TypeScript
import styled from '@emotion/styled';
|
|
import { css, keyframes } from '@emotion/react';
|
|
|
|
export const MainWrapper = styled.main`
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
`;
|
|
|
|
export const InputWrapper = styled.div`
|
|
position: relative;
|
|
padding: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
`;
|
|
export const InputLabel = styled.label`
|
|
position: absolute;
|
|
top: -8px;
|
|
left: 24px;
|
|
z-index: 2;
|
|
`;
|
|
export const InputElement = styled.input`
|
|
border: 1px solid #ccc;
|
|
padding: 12px;
|
|
font-size: 24px;
|
|
border-radius: 8px;
|
|
color: #117623;
|
|
`;
|
|
|
|
export const LogoImg = styled.img`
|
|
position: absolute;
|
|
top: 24px;
|
|
left: 24px;
|
|
`;
|
|
|
|
export const ArrowImg = styled.img`
|
|
width: 48px;
|
|
height: 48px;
|
|
`;
|
|
|
|
export const IconButton = styled.button`
|
|
border: none;
|
|
background-color: rgba(0, 0, 0, 0);
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
`;
|
|
|
|
const reveal = keyframes`
|
|
0% {
|
|
transform: scale(0.1, 0.1);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
`;
|
|
|
|
export const StartWrapper = styled.div`
|
|
animation: ${reveal} 1s ease forwards;
|
|
/* box-shadow: 0 -2px 5px rgba(255,255,255,0.05), 0 2px 5px rgba(255,255,255,0.1); */
|
|
width: 350px;
|
|
height: 350px;
|
|
/* margin: 60px auto; */
|
|
position: relative;
|
|
`;
|
|
|
|
export const StartLabel = styled.label`
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
background: #b25244;
|
|
/* background: linear-gradient(#f7f2f6, #b2ac9e); */
|
|
/* background: linear-gradient(#b52a2a, #e10ff1); */
|
|
background: linear-gradient(rgb(255 251 251), rgb(140 219 35));
|
|
position: relative;
|
|
color: #a5a39d;
|
|
font-size: 70px;
|
|
text-align: center;
|
|
line-height: 150px;
|
|
transition: all 0.3s ease-out;
|
|
text-shadow: 0 2px 1px rgba(0,0,0,0.25);
|
|
z-index: 1;
|
|
box-shadow:
|
|
inset 0 2px 3px rgba(255,255,255,0.13),
|
|
0 5px 8px rgba(0,0,0,0.3),
|
|
0 10px 10px 4px rgba(0,0,0,0.3);
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: -20px;
|
|
right: -20px;
|
|
top: -20px;
|
|
bottom: -20px;
|
|
z-index: -2;
|
|
border-radius: inherit;
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255,255,255,0.1),
|
|
0 1px 2px rgba(0,0,0,0.3),
|
|
0 0 10px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: -10px;
|
|
right: -10px;
|
|
top: -10px;
|
|
bottom: -10px;
|
|
z-index: -1;
|
|
border-radius: inherit;
|
|
box-shadow: inset 0 10px 10px rgba(0,0,0,0.13);
|
|
-webkit-filter:blur(1px);
|
|
filter: blur(1px);
|
|
}
|
|
`;
|
|
|
|
export const StartInput = styled.input`
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
z-index: 100;
|
|
position: absolute;
|
|
cursor: pointer;
|
|
|
|
&:checked ~ label {
|
|
box-shadow:
|
|
inset 0 2px 3px rgba(255,255,255,0.13),
|
|
0 5px 8px rgba(0,0,0,0.35),
|
|
0 3px 10px 4px rgba(0,0,0,0.2);
|
|
color: #9abb82;
|
|
}
|
|
`;
|
|
|
|
export const StartI = styled.i`
|
|
content: "";
|
|
display: flex;
|
|
position: absolute;
|
|
width: 70%;
|
|
height: 70%;
|
|
left: 50%;
|
|
top: 50%;
|
|
z-index: 1;
|
|
color: white;
|
|
margin: -35% 0 0 -35%;
|
|
border-radius: 50%;
|
|
background: linear-gradient(#22a037, #98e221);
|
|
box-shadow:
|
|
0 -2px 5px rgba(255,255,255,0.05),
|
|
0 2px 5px rgba(255,255,255,0.1);
|
|
-webkit-filter:blur(1px);
|
|
filter: blur(1px);
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-style: normal;
|
|
`;
|
|
|
|
// const LineRotation = keyframes
|
|
//`
|
|
// 0% {
|
|
// transform: translate(-50%, -100%) rotate(0);
|
|
// }
|
|
|
|
// 100% {
|
|
// transform: translate(-50%, -100%) rotate(1turn);
|
|
// }
|
|
// `;
|
|
|
|
|
|
// type LineProps = {
|
|
// radius: number;
|
|
// width: number;
|
|
|
|
// }
|
|
|
|
// export const HalfLine = styled.div<LineProps>(({
|
|
// radius,
|
|
// width,
|
|
// }) =>css`
|
|
// transform-origin: 50% 100%;
|
|
// animation: ${LineRotation} 3s linear infinite;
|
|
// width: ${radius * 2}px;
|
|
// height: ${radius}px;
|
|
// border-top-left-radius: ${radius}px;
|
|
// border-top-right-radius: ${radius}px;
|
|
// border: ${width}px solid gray;
|
|
// border-bottom: 0;
|
|
// position: absolute;
|
|
// top: 50%;
|
|
// left: 50%;
|
|
// transform: translate(-50%, -100%);
|
|
// `);
|
|
|
|
const LineRotation = keyframes`
|
|
0% {
|
|
transform: translate(-50%, -50%) rotate(0);
|
|
}
|
|
|
|
100% {
|
|
transform: translate(-50%, -50%) rotate(1turn);
|
|
}
|
|
`;
|
|
|
|
const LineHideAnimation = keyframes`
|
|
0% {
|
|
/* transform: scale(1); */
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
/* transform: scale(0); */
|
|
opacity: 0;
|
|
}
|
|
`;
|
|
|
|
export const Svg = styled.svg`
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform-origin: 50% 50%;
|
|
transform: translate(-50%, -50%);
|
|
/* stroke-dasharray: 600; */
|
|
`;
|
|
|
|
export const CircleDiv = styled.div`
|
|
width: 700px;
|
|
height: 700px;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform-origin: 50% 50%;
|
|
transform: translate(-50%, -50%) rotate(270deg);
|
|
border-radius: 50%;
|
|
background: radial-gradient(
|
|
farthest-side at bottom center,
|
|
rgba(35, 235, 4, 0.709),
|
|
rgba(255, 255, 255, 0) 65%
|
|
),
|
|
radial-gradient(
|
|
farthest-corner at bottom left,
|
|
rgba(244, 244, 8, 0.9),
|
|
rgba(255, 255, 255, 0) 40%
|
|
),
|
|
radial-gradient(
|
|
farthest-side at bottom right,
|
|
rgba(0, 195, 255, 0.648),
|
|
rgba(255, 255, 255, 0) 65%
|
|
);
|
|
`;
|
|
|
|
export const LineSvg = styled.svg<{ animationSpeed: number; delay: number; reverse: boolean }>`
|
|
animation: ${LineRotation} ${({ animationSpeed }) => animationSpeed}s linear infinite${({ reverse }) => reverse ? ' reverse' : ''};
|
|
animation-delay: -${({ delay }) => delay}s;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform-origin: 50% 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 2;
|
|
`;
|
|
|
|
export const HideGroup = styled.g<{ hide: boolean; delay: number; }>`
|
|
animation: ${({ hide }) => hide ? css`${LineHideAnimation} 3s ease-in forwards`: ''};
|
|
transform-origin: 50% 50%;
|
|
animation-delay: ${({ delay }) => delay / 10}s;
|
|
`;
|
|
export const Circle = styled.circle<{ circumference: number; percent: number }>`
|
|
transition: 0.35s stroke-dashoffset;
|
|
transform: rotate(-90deg);
|
|
transform-origin: 50% 50%;
|
|
stroke-dasharray: ${({ circumference }) => `${circumference} ${circumference}`};
|
|
stroke-dashoffset: ${({ circumference, percent }) => circumference - percent / 100 * circumference};
|
|
`;
|
|
|
|
export const FullScreenButton = styled.button`
|
|
padding: 24px;
|
|
position: absolute;
|
|
top: 50px;
|
|
right: 50px;
|
|
`;
|
|
|
|
export const InputHolder = styled.div`
|
|
background-color: rgba(0, 0, 0, .0);
|
|
width: calc(100% - 70px);
|
|
height: 100%;
|
|
right: 70px;
|
|
position: absolute;
|
|
`;
|