You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
1.3 KiB
70 lines
1.3 KiB
#grist-logo-wrapper {
|
|
position: absolute;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: flex;
|
|
background-color: var(--color-logo-bg);
|
|
}
|
|
|
|
.grist-logo {
|
|
background: var(--color-bg);
|
|
margin: auto;
|
|
padding: 20px 28px;
|
|
}
|
|
|
|
.grist-logo-grain {
|
|
display: inline-block;
|
|
width: 42px;
|
|
height: 40px;
|
|
|
|
margin: 1px;
|
|
|
|
border-radius: 22px 0 18px 0;
|
|
}
|
|
|
|
.grist-logo-grain.grain-flip {
|
|
border-radius: 0 22px 0 18px;
|
|
}
|
|
|
|
.grist-logo-grain.grain-empty {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.grist-logo-grain.grain-col {
|
|
background: var(--color-logo-col);
|
|
}
|
|
|
|
.grist-logo-grain.grain-row {
|
|
background: var(--color-logo-row);
|
|
}
|
|
|
|
.grist-logo-grain.grain-cell {
|
|
background: var(--color-logo-cell);
|
|
}
|
|
|
|
.grist-logo-grain {
|
|
animation: spin-grain 3.2s linear infinite;
|
|
}
|
|
|
|
.grist-logo-grain.grain-2 { animation-delay: .4s; }
|
|
.grist-logo-grain.grain-3 { animation-delay: .8s; }
|
|
.grist-logo-grain.grain-4 { animation-delay: 1.2s; }
|
|
.grist-logo-grain.grain-5 { animation-delay: 0s; }
|
|
.grist-logo-grain.grain-6 { animation-delay: .2s; }
|
|
.grist-logo-grain.grain-7 { animation-delay: .6s; }
|
|
.grist-logo-grain.grain-8 { animation-delay: 1.0s; }
|
|
.grist-logo-grain.grain-9 { animation-delay: 1.4s; }
|
|
|
|
|
|
@keyframes spin-grain {
|
|
0% {
|
|
transform: rotateY(0deg);
|
|
}
|
|
25% {
|
|
transform: rotateY(180deg);
|
|
}
|
|
50% {
|
|
transform: rotateY(0deg);
|
|
}
|
|
}
|