mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-09 10:34:17 +00:00
770 lines
15 KiB
SCSS
770 lines
15 KiB
SCSS
@import url('https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css');
|
|
@import url('https://fonts.googleapis.com/css?family=Poppins:300,300i,500,500i,700');
|
|
|
|
.retryBTN{
|
|
margin-top: 150px;
|
|
text-align: center;
|
|
}
|
|
.StateIcon {
|
|
font-size: 24px;
|
|
margin: 13px;
|
|
}
|
|
|
|
.StateIcon_exception {
|
|
color: red;
|
|
font-size: 24px;
|
|
margin: 13px;
|
|
}
|
|
|
|
.mainlp {
|
|
--neutralShade0: #f8f8f8;
|
|
--neutralShade1: #f2f2f2;
|
|
--neutralShade2: #e8e9e9;
|
|
--neutralShade3: #d1d3d4;
|
|
--neutralShade4: #babdbf;
|
|
--neutralShade5: #808488;
|
|
--neutralShade6: #666a6d;
|
|
--neutralShade7: #4d5052;
|
|
--neutralShade8: #212122;
|
|
--grayColor: #999;
|
|
--lightGrayColor: #ddd;
|
|
--borderRadius: 6px;
|
|
--boxShadow: 0 2px 5px rgba(#333, 0.2);
|
|
}
|
|
|
|
/*overall layout*/
|
|
.mainlp {
|
|
width: 90%;
|
|
max-width: 1050px;
|
|
margin: 3em auto 0;
|
|
display: grid;
|
|
grid: repeat(5, fit-content(300px))/100%;
|
|
color: var(--foregroundColor);
|
|
text-align: left;
|
|
}
|
|
|
|
.mainlp .sectionlp {
|
|
border: 1px solid var(--accentColor);
|
|
position: relative;
|
|
padding: 40px 40px 50px;
|
|
}
|
|
.mainlp .sectionlp > h6 {
|
|
color: var(--accentColor);
|
|
background: var(--canvasColor);
|
|
position: absolute;
|
|
top: -10px;
|
|
left: 20px;
|
|
padding: 0 10px;
|
|
}
|
|
.mainlp .sectionlp .h6lp.subheader {
|
|
color: var(--grayColor);
|
|
margin-top: 20px;
|
|
margin-bottom: 20px;
|
|
width: 100%;
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
section:not(:last-child) {
|
|
border-width: 0 0 1px;
|
|
}
|
|
|
|
section:last-child {
|
|
border-width: 0;
|
|
}
|
|
}
|
|
@media (min-width: 992px) {
|
|
main {
|
|
grid: repeat(9, auto)/45% 1fr 45%;
|
|
grid-auto-flow: dense;
|
|
}
|
|
|
|
.media-card-1 {
|
|
grid-column: 1 / 2;
|
|
border-width: 1px 0;
|
|
}
|
|
|
|
.media-card-2 {
|
|
grid-column: 2 / 4;
|
|
border-width: 1px 0 1px 1px;
|
|
}
|
|
|
|
.media-card-3 {
|
|
grid-column: 1 / 4;
|
|
border-width: 0;
|
|
}
|
|
|
|
.filter-section {
|
|
grid-column: 3 / 4;
|
|
grid-row: 1 / 2;
|
|
border-width: 0 0 0 1px;
|
|
}
|
|
|
|
.well-cta-1 {
|
|
grid-row: 3;
|
|
grid-column: 1 / 3;
|
|
border-width: 1px 1px 0 0;
|
|
}
|
|
|
|
.well-cta-2 {
|
|
grid-row: 2;
|
|
grid-column: 2 / 4;
|
|
border-width: 1px 0 0;
|
|
}
|
|
|
|
.tables {
|
|
grid-row: 4;
|
|
grid-column: 1 / -1;
|
|
border-width: 1px 0 0;
|
|
}
|
|
|
|
.forms {
|
|
grid-column: 1 / 3;
|
|
border-width: 0;
|
|
}
|
|
|
|
.comments {
|
|
grid-row: 2;
|
|
grid-column: 1 / 2;
|
|
border-width: 1px 1px 0 0;
|
|
padding-top: 60px;
|
|
}
|
|
|
|
.modals {
|
|
grid-row: 3;
|
|
grid-column: 3 / 4;
|
|
justify-content: center;
|
|
border-width: 1px 0 0;
|
|
}
|
|
}
|
|
|
|
|
|
/*checkboxes*/
|
|
input:disabled ~ * {
|
|
opacity: 0.3;
|
|
user-select: none;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.checkboxtoggle input {
|
|
display: none;
|
|
}
|
|
.checkboxtoggle label {
|
|
outline: 0;
|
|
display: block;
|
|
width: 45px;
|
|
height: 16px;
|
|
background: var(--grayColor);
|
|
position: relative;
|
|
cursor: pointer;
|
|
border-radius: 2em;
|
|
padding: 2px;
|
|
transition: all 0.4s ease;
|
|
margin: 0;
|
|
}
|
|
.checkboxtoggle .labellp:after {
|
|
position: relative;
|
|
display: block;
|
|
content: "";
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
background: #fff;
|
|
transition: all 0.2s ease;
|
|
border: 1px solid var(--grayColor);
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
left: -4px;
|
|
top: -5px;
|
|
}
|
|
.checkboxtoggle input:checked + .labellp {
|
|
background: var(--accent2Color);
|
|
}
|
|
.checkboxtoggle input:checked + .labellp:after {
|
|
left: 52%;
|
|
}
|
|
|
|
.checkbox {
|
|
position: relative;
|
|
user-select: none;
|
|
margin-bottom: 10px;
|
|
}
|
|
.checkbox input {
|
|
display: none;
|
|
}
|
|
.checkbox .labellp {
|
|
position: relative;
|
|
vertical-align: middle;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
padding-left: 35px;
|
|
}
|
|
.checkbox .box {
|
|
display: inline-block;
|
|
width: 20px;
|
|
border-radius: var(--borderRadius);
|
|
border: 1px solid var(--grayColor);
|
|
width: 24px;
|
|
height: 24px;
|
|
vertical-align: middle;
|
|
margin-right: 3px;
|
|
transition: 0.3s ease;
|
|
position: absolute;
|
|
left: 0;
|
|
}
|
|
.checkbox .box:before, .checkbox .box:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 4px;
|
|
height: 16px;
|
|
border-radius: 40px;
|
|
background: var(--backgroundColor);
|
|
transition: all 0.3s ease;
|
|
}
|
|
.checkbox .spanlp.box:before {
|
|
transform: rotate(45deg) translateY(-5px) translateX(10px) scale(0);
|
|
}
|
|
.checkbox .spanlp.box:after {
|
|
height: 8px;
|
|
transform: rotate(-45deg) translateY(10px) translateX(-4px) scale(0);
|
|
}
|
|
.checkbox input:checked + .labellp .spanlp.box {
|
|
background: var(--accent2Color);
|
|
border-color: var(--accent2Color);
|
|
}
|
|
.checkbox input:checked + .labellp .spanlp.box:before {
|
|
transform: rotate(45deg) translateY(-5px) translateX(10px) scale(1);
|
|
}
|
|
.checkbox input:checked + .labellp .spanlp.box:after {
|
|
height: 8px;
|
|
transform: rotate(-45deg) translateY(10px) translateX(-4px) scale(1);
|
|
}
|
|
.checkbox input:disabled:checked + .spanlp.box {
|
|
background: var(--grayColor);
|
|
border: var(--grayColor);
|
|
}
|
|
.checkbox input:disabled:checked ~ .labellp:before, .checkbox input:disabled:checked ~ .labellp:after {
|
|
background: black;
|
|
}
|
|
|
|
/*buttons & links*/
|
|
.links__sec {
|
|
margin: 10px 0 30px;
|
|
}
|
|
.links a.link {
|
|
display: inline;
|
|
margin: 10px 30px 5px 0;
|
|
border-bottom: 2px dashed;
|
|
font-weight: 500;
|
|
line-height: 2.5;
|
|
cursor: pointer;
|
|
color: var(--neutralShade5);
|
|
}
|
|
.links a.link:hover, .links a.link.hover {
|
|
color: var(--neutralShade6);
|
|
border-bottom: 2px solid;
|
|
}
|
|
.links a.link.primary {
|
|
color: var(--primaryColor);
|
|
}
|
|
.links a.link.primary:hover, .links a.link.primary.hover {
|
|
color: var(--primaryShade5);
|
|
}
|
|
.links a.link.secondary {
|
|
color: var(--secondaryColor);
|
|
}
|
|
.links a.link.secondary:hover, .links a.link.secondary.hover {
|
|
color: var(--secondaryShade5);
|
|
}
|
|
|
|
.buttons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
.buttons > * {
|
|
flex: 1 1 calc(50% - 20px);
|
|
margin-top: 20px;
|
|
}
|
|
.buttons > *:nth-child(odd) {
|
|
margin-right: 20px;
|
|
}
|
|
|
|
a.buttonlp,
|
|
input.buttonlp,
|
|
.buttonlp {
|
|
outline: none;
|
|
width: 100%;
|
|
text-align: center;
|
|
display: inline-block;
|
|
border: none;
|
|
font: 500 16px/1 "Poppins", sans-serif;
|
|
padding: 20px;
|
|
cursor: pointer;
|
|
border-radius: var(--borderRadius);
|
|
background: var(--primaryColor);
|
|
color: var(--backgroundColor);
|
|
position: relative;
|
|
top: 0;
|
|
transition: 0.2s ease;
|
|
}
|
|
a.buttonlp:hover, a.buttonlp.hover,
|
|
input.buttonlp:hover,
|
|
input.buttonlp.hover,
|
|
.buttonlp:hover,
|
|
.buttonlp.hover {
|
|
top: -3px;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
|
|
}
|
|
a.buttonlp:active, a.buttonlp.active,
|
|
input.buttonlp:active,
|
|
.input.buttonlp.active,
|
|
.buttonlp:active,
|
|
.buttonlp.active {
|
|
background: var(--primaryShade4);
|
|
outline: none;
|
|
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
top: 0;
|
|
}
|
|
a.buttonlp.disabled,
|
|
input.buttonlp.disabled,
|
|
.buttonlp.disabled {
|
|
opacity: 0.4;
|
|
user-select: none;
|
|
pointer-events: none;
|
|
}
|
|
a.buttonlp.medium,
|
|
input.buttonlp.medium,
|
|
.buttonlp.medium {
|
|
padding: 15px 18px;
|
|
width: auto;
|
|
}
|
|
a.buttonlp.small,
|
|
input.buttonlp.small,
|
|
.buttonlp.small {
|
|
padding: 10px 12px;
|
|
width: auto;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
a.buttonlp.secondary,
|
|
input.buttonlp.secondary,
|
|
.buttonlp.secondary {
|
|
background: var(--secondaryColor);
|
|
}
|
|
a.buttonlp.secondary:active, a.buttonlp.secondary:focus, a.buttonlp.secondary.active,
|
|
input.buttonlp.secondary:active,
|
|
input.buttonlp.secondary:focus,
|
|
input.buttonlp.secondary.active,
|
|
.buttonlp.secondary:active,
|
|
.buttonlp.secondary:focus,
|
|
.buttonlp.secondary.active {
|
|
background: var(--secondaryShade4);
|
|
outline: none;
|
|
}
|
|
a.buttonlp.accent,
|
|
input.buttonlp.accent,
|
|
.buttonlp.accent {
|
|
background: var(--accentColor);
|
|
}
|
|
a.buttonlp.accent:active, a.buttonlp.accent:focus, a.buttonlp.accent.active,
|
|
input.buttonlp.accent:active,
|
|
input.buttonlp.accent:focus,
|
|
input.buttonlp.accent.active,
|
|
.buttonlp.accent:active,
|
|
.buttonlp.accent:focus,
|
|
.buttonlp.accent.active {
|
|
background: var(--accentShade4);
|
|
}
|
|
a.buttonlp.accent2,
|
|
input.buttonlp.accent2,
|
|
.buttonlp.accent2 {
|
|
background: var(--accent2Color);
|
|
}
|
|
a.buttonlp.accent2:active, a.buttonlp.accent2:focus, a.buttonlp.accent2.active,
|
|
input.buttonlp.accent2:active,
|
|
input.buttonlp.accent2:focus,
|
|
input.buttonlp.accent2.active,
|
|
.buttonlp.accent2:active,
|
|
.buttonlp.accent2:focus,
|
|
.buttonlp.accent2.active {
|
|
background: var(--accent2Shade4);
|
|
}
|
|
a.buttonlp.accent3,
|
|
input.buttonlp.accent3,
|
|
.buttonlp.accent3 {
|
|
background: var(--accent3Color);
|
|
}
|
|
a.buttonlp.accent3:active, a.buttonlp.accent3:focus, a.buttonlp.accent3.active,
|
|
input.buttonlp.accent3:active,
|
|
input.buttonlp.accent3:focus,
|
|
input.buttonlp.accent3.active,
|
|
.buttonlp.accent3:active,
|
|
.buttonlp.accent3:focus,
|
|
.buttonlp.accent3.active {
|
|
background: var(--accent3Shade4);
|
|
}
|
|
|
|
/*inputs*/
|
|
.input__wrapper {
|
|
margin-bottom: 10px;
|
|
}
|
|
.inputRG__wrapper {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.labelform {
|
|
font-weight: 500;
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.inputform,
|
|
select,
|
|
textarea {
|
|
height: 50px;
|
|
font-size: 16px;
|
|
border: 2px solid var(--neutralShade3);
|
|
width: 100%;
|
|
padding: 12px;
|
|
font-family: "Poppins";
|
|
border-radius: var(--borderRadius);
|
|
color: var(--foregroundColor);
|
|
background: var(--backgroundColor);
|
|
}
|
|
.inputform:focus, .inputform.active,
|
|
select:focus,
|
|
select.active,
|
|
textarea:focus,
|
|
textarea.active {
|
|
outline: none;
|
|
border-color: var(--primaryColor);
|
|
}
|
|
.inputform:disabled,
|
|
select:disabled,
|
|
textarea:disabled {
|
|
cursor: not-allowed;
|
|
background: var(--neutralShade1);
|
|
opacity: 0.6;
|
|
}
|
|
Input .inputPasswordform {
|
|
height: 50px;
|
|
font-size: 16px;
|
|
border: 2px solid var(--neutralShade3);
|
|
width: 100%;
|
|
padding: 12px;
|
|
font-family: "Poppins";
|
|
border-radius: var(--borderRadius);
|
|
color: var(--foregroundColor);
|
|
background: var(--backgroundColor);
|
|
}
|
|
|
|
Input .inputPasswordform:focus {
|
|
outline: none;
|
|
border-color: var(--primaryColor);
|
|
}
|
|
|
|
.inputform.input {
|
|
height: 56px;
|
|
font-size: 18px;
|
|
padding: 15px;
|
|
}
|
|
|
|
.TOSAccept {
|
|
margin: 7px;
|
|
}
|
|
.TOSAccept span::first-letter {
|
|
color: blue;
|
|
}
|
|
|
|
/*spinner*/
|
|
.spinner + .labellp {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
margin-top: 8px;
|
|
display: inline-block;
|
|
text-transform: uppercase;
|
|
color: var(--primaryShade4);
|
|
}
|
|
|
|
.spinner1 .spinner {
|
|
max-width: 50px;
|
|
margin: auto;
|
|
height: 20px;
|
|
position: relative;
|
|
}
|
|
.spinner1 .spinner:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
left: -10%;
|
|
background: var(--primaryColor);
|
|
animation: spinnerLeftRight 1s infinite;
|
|
}
|
|
.spinner1 .spinner:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
left: -10%;
|
|
background: var(--primaryShade2);
|
|
opacity: 1;
|
|
animation: spinnerLeftRight 1s infinite 0.06s;
|
|
}
|
|
|
|
@keyframes spinnerLeftRight {
|
|
0% {
|
|
left: 85%;
|
|
}
|
|
50% {
|
|
left: -10%;
|
|
}
|
|
100% {
|
|
left: 85%;
|
|
}
|
|
}
|
|
|
|
|
|
#sunset + .labellp {
|
|
background: linear-gradient(to right, #ff9557 50%, #ffcc67 50%);
|
|
}
|
|
.mainlp {
|
|
--canvasColor: #f9f9f9;
|
|
--backgroundColor: #fff;
|
|
--foregroundColor: #111;
|
|
--primaryColor: #373F51;
|
|
--primaryShade1: #ffe2d1;
|
|
--primaryShade2: #ffceb2;
|
|
--primaryShade3: #ffb184;
|
|
--primaryShade4: #e88850;
|
|
--primaryShade5: #d17a48;
|
|
--secondaryColor: #ffcc67;
|
|
--secondaryShade1: #fff1d5;
|
|
--secondaryShade2: #ffde9e;
|
|
--secondaryShade3: #ffd074;
|
|
--secondaryShade4: #e8ba5e;
|
|
--secondaryShade5: #ba954b;
|
|
--accentColor: #4e5166;
|
|
--accentShade1: #cecfd5;
|
|
--accentShade2: #aeafb9;
|
|
--accentShade3: #8e909d;
|
|
--accentShade4: #6e7081;
|
|
--accentShade5: #404354;
|
|
--accent2Color: #588b8b;
|
|
--accent2Shade1: #c2d4d4;
|
|
--accent2Shade2: #a3bfbf;
|
|
--accent2Shade3: #85aaaa;
|
|
--accent2Shade4: #507f7f;
|
|
--accent2Shade5: #497272;
|
|
--accent3Color: #fe5f55;
|
|
--accent3Shade1: #fec4c1;
|
|
--accent3Shade2: #fea7a2;
|
|
--accent3Shade3: #fe7c73;
|
|
--accent3Shade4: #e7574e;
|
|
--accent3Shade5: #b9463e;
|
|
}
|
|
|
|
.formlogin {
|
|
border-radius: 10px;
|
|
padding: 30px;
|
|
box-shadow: 0 3px 15px rgba(51, 51, 51, 0.2);
|
|
background: var(--backgroundColor);
|
|
margin-top: 30px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
vertical-align: middle;
|
|
}
|
|
.formlogin .checkbox {
|
|
margin-bottom: 30px;
|
|
}
|
|
.formlogin .spinner__wrapper {
|
|
place-items: center;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
background: rgba(255, 255, 255, 0.85);
|
|
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.formlogin {
|
|
grid: auto / 1fr 40%;
|
|
}
|
|
.formlogin .input__wrapper {
|
|
grid-column: span 2;
|
|
}
|
|
.formlogin .inputRG__wrapper {
|
|
grid-column: span 2;
|
|
}
|
|
.formlogin .checkbox {
|
|
align-self: center;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
#dark:checked ~ .mainlp .spinner__wrapper,
|
|
#pinkaru:checked ~ .mainlp .spinner__wrapper {
|
|
background: rgba(20, 20, 20, 0.85);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*typography 2*/
|
|
.stonglp {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.emlp {
|
|
font-style: italic;
|
|
}
|
|
|
|
.h1lp {
|
|
font: 700 48px/1.2 "Poppins", sans-serif;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.h2lp {
|
|
font: 700 32px/1.2 "Poppins", sans-serif;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.h3lp {
|
|
font: 700 24px/1.2 "Poppins", sans-serif;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.h4lp {
|
|
font: 700 20px/1.2 "Poppins", sans-serif;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.h5lp {
|
|
font: 500 18px/1.2 "Poppins", sans-serif;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.h6lp {
|
|
font: 500 16px/1.2 "Poppins", sans-serif;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.apierrort {
|
|
font: 700 20px/1.2 "Poppins", sans-serif;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.apierrort::first-letter {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.devServer{
|
|
color: orangered;
|
|
text-align: left;
|
|
margin: 10px;
|
|
float: left;
|
|
position: fixed;
|
|
z-index: 104;
|
|
font-size: 16px;
|
|
|
|
}
|
|
.devServer span{
|
|
text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
|
|
}
|
|
|
|
|
|
.bgHero iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
top: 0;
|
|
z-index: 103;
|
|
}
|
|
|
|
$circle-length: 340px;
|
|
$check-length: 230px;
|
|
|
|
@keyframes scaleAnimation {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(1.5);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes drawCircle {
|
|
0% {
|
|
stroke-dashoffset: $circle-length;
|
|
}
|
|
100% {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes drawCheck {
|
|
0% {
|
|
stroke-dashoffset: $check-length;
|
|
}
|
|
100% {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOut {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
#successAnimationCircle {
|
|
stroke-dasharray: $circle-length $circle-length;
|
|
stroke: #FFF;
|
|
}
|
|
|
|
#successAnimationCheck {
|
|
stroke-dasharray: $check-length $check-length;
|
|
stroke: #FFF;
|
|
}
|
|
|
|
#successAnimationResult {
|
|
fill: #FFF;
|
|
opacity: 0;
|
|
}
|
|
|
|
#successAnimation .animated {
|
|
animation: 1s ease-out 0s 1 both scaleAnimation;
|
|
|
|
#successAnimationCircle {
|
|
animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both drawCircle,
|
|
0.3s linear 0.9s 1 both fadeOut;
|
|
}
|
|
|
|
#successAnimationCheck {
|
|
animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both drawCheck,
|
|
0.3s linear 0.9s 1 both fadeOut;
|
|
}
|
|
|
|
#successAnimationResult {
|
|
animation: 0.3s linear 0.9s both fadeIn;
|
|
}
|
|
}
|