all other staff
This commit is contained in:
+14
-285
@@ -33,12 +33,6 @@ export const InputElement = styled.input`
|
||||
max-width: 90vw;
|
||||
`;
|
||||
|
||||
export const LogoImg = styled.img`
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
left: 24px;
|
||||
`;
|
||||
|
||||
export const ArrowImg = styled.img`
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
@@ -65,177 +59,12 @@ const reveal = keyframes`
|
||||
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;
|
||||
width: 650px;
|
||||
height: calc(100vh - 300px);
|
||||
/* 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);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
&::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;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
&: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%;
|
||||
@@ -245,120 +74,20 @@ export const Svg = styled.svg`
|
||||
/* 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 LessonItem = styled.li`
|
||||
list-style: none;
|
||||
background-color: #ffffff;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 2px 2px 6px #0000005c;
|
||||
margin-bottom: 12px;
|
||||
`;
|
||||
|
||||
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 Lessonname = styled.span`
|
||||
display: inline-box;
|
||||
margin-right: 12px;
|
||||
`;
|
||||
|
||||
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: 12px;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
right: 50px;
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, .07);
|
||||
`;
|
||||
|
||||
export const InputHolder = styled.div`
|
||||
background-color: rgba(0, 0, 0, .0);
|
||||
width: calc(100% - 70px);
|
||||
height: 60px;
|
||||
right: 70px;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
position: absolute;
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
const blowAnim = keyframes`
|
||||
to {
|
||||
width: 200vw;
|
||||
height: 200vw;
|
||||
}
|
||||
`;
|
||||
|
||||
type BlowProps = {
|
||||
delay: number;
|
||||
color: string;
|
||||
}
|
||||
|
||||
export const Blow = styled.div<BlowProps>`
|
||||
z-index: 10;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 0;
|
||||
height: 0%;
|
||||
background-color: ${({ color }) => color};
|
||||
animation: ${blowAnim} 1s ease-out forwards;
|
||||
animation-delay: ${({ delay }) => delay}s;
|
||||
transform: translate(-50%, -50%);
|
||||
`;
|
||||
|
||||
const blowAnimShort = keyframes`
|
||||
to {
|
||||
width: 50vw;
|
||||
height: 50vw;
|
||||
}
|
||||
`;
|
||||
|
||||
export const BigLogo = styled.img`
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
animation: ${blowAnimShort} 2s ease-out forwards;
|
||||
animation-delay: .7s;
|
||||
transform: translate(-50%, -50%);
|
||||
export const QRCanvas = styled.canvas`
|
||||
display: block;
|
||||
`;
|
||||
|
||||
Reference in New Issue
Block a user