161 lines
3.5 KiB
TypeScript
161 lines
3.5 KiB
TypeScript
import styled from '@emotion/styled';
|
|
import { 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: transparent;
|
|
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);
|
|
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(#cbc7bc, #d2cbc3); */
|
|
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;
|
|
`;
|