soneta-ui-style
This commit is contained in:
Marcin Wojas
@@ -0,0 +1,782 @@
|
||||
@import "PredefinedFonts";
|
||||
|
||||
$font_size_body: 10pt;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
|
||||
body {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
line-height: 20px;
|
||||
display: block;
|
||||
font-size: $font_size_body;
|
||||
font-family: var(--defaultFont);
|
||||
background: var(--theme_body_bg);
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
color: pink;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
overscroll-behavior: none;
|
||||
@extend .unselectable;
|
||||
|
||||
.dx-overlay-wrapper.dx-toast-wrapper {
|
||||
z-index: 10000 !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.stop-scrolling {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
//będzie potrzebne by nie tworzył mechanizmu zazaczania na nie potrzebnych elementach
|
||||
.unselectable {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
@extend .unselectable;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
background-color: var(--theme_bg);
|
||||
|
||||
[contenteditable="true"] {
|
||||
-webkit-user-select: text;
|
||||
-webkit-user-modify: read-write;
|
||||
user-select: text;
|
||||
}
|
||||
}
|
||||
|
||||
.noscroll {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
input[type=text]::-ms-clear,
|
||||
input[role=textbox]::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Animation
|
||||
|
||||
/**
|
||||
* ----------------------------------------
|
||||
* animation text from left to right
|
||||
* ----------------------------------------
|
||||
*/
|
||||
@keyframes backAndForth {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
10% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
45% {
|
||||
transform: translateX(calc(-100%));
|
||||
}
|
||||
|
||||
55% {
|
||||
transform: translateX(calc(-100%));
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ----------------------------------------
|
||||
* slide in from top
|
||||
* ----------------------------------------
|
||||
*/
|
||||
.animationLightSpeedIn :global {
|
||||
animation-duration: 0.8s;
|
||||
animation-fill-mode: both;
|
||||
animation-name: lightSpeedIn;
|
||||
animation-timing-function: ease-out;
|
||||
-webkit-animation-duration: 0.5s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
-webkit-animation-name: lightSpeedIn;
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
@-webkit-keyframes lightSpeedIn {
|
||||
0% {
|
||||
-webkit-transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
60% {
|
||||
-webkit-transform: translateY(20%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
80% {
|
||||
-webkit-transform: translateY(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateY(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes lightSpeedIn {
|
||||
0% {
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translateY(20%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translateY(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ----------------------------------------
|
||||
* slide left and right
|
||||
* ----------------------------------------
|
||||
*/
|
||||
.animationLightSpeedRollLeft :global {
|
||||
animation-duration: 0.5s;
|
||||
animation-fill-mode: both;
|
||||
animation-name: RollXLeft;
|
||||
animation-timing-function: ease-out;
|
||||
-webkit-animation-duration: 0.5s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
-webkit-animation-name: RollXLeft;
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
@-webkit-keyframes RollXLeft {
|
||||
0% {
|
||||
-webkit-transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
60% {
|
||||
-webkit-transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
80% {
|
||||
-webkit-transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes RollXLeft {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.animationLightSpeedRollRight :global {
|
||||
animation-duration: 0.5s;
|
||||
animation-fill-mode: both;
|
||||
animation-name: RollXRight;
|
||||
animation-timing-function: ease-out;
|
||||
-webkit-animation-duration: 0.5s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
-webkit-animation-name: RollXRight;
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
@-webkit-keyframes RollXRight {
|
||||
0% {
|
||||
-webkit-transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
60% {
|
||||
-webkit-transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
80% {
|
||||
-webkit-transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes RollXRight {
|
||||
0% {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes anim-open {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale3d(0, 0, 1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes anim-close {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale3d(0, 0, 1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes anim-open {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale3d(0, 0, 1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes anim-close {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale3d(0, 0, 1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ----------------------------------------
|
||||
* BounceIn
|
||||
* ----------------------------------------
|
||||
*/
|
||||
@-webkit-keyframes bounceIn {
|
||||
0%, 20%, 40%, 60%, 80%, 100% {
|
||||
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
||||
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
||||
}
|
||||
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale3d(.3, .3, .3);
|
||||
transform: scale3d(.3, .3, .3);
|
||||
}
|
||||
|
||||
20% {
|
||||
-webkit-transform: scale3d(1.1, 1.1, 1.1);
|
||||
transform: scale3d(1.1, 1.1, 1.1);
|
||||
}
|
||||
|
||||
40% {
|
||||
-webkit-transform: scale3d(.9, .9, .9);
|
||||
transform: scale3d(.9, .9, .9);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale3d(1.03, 1.03, 1.03);
|
||||
transform: scale3d(1.03, 1.03, 1.03);
|
||||
}
|
||||
|
||||
80% {
|
||||
-webkit-transform: scale3d(.97, .97, .97);
|
||||
transform: scale3d(.97, .97, .97);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounceIn {
|
||||
0%, 20%, 40%, 60%, 80%, 100% {
|
||||
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
||||
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
||||
}
|
||||
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale3d(.3, .3, .3);
|
||||
transform: scale3d(.3, .3, .3);
|
||||
}
|
||||
|
||||
20% {
|
||||
-webkit-transform: scale3d(1.1, 1.1, 1.1);
|
||||
transform: scale3d(1.1, 1.1, 1.1);
|
||||
}
|
||||
|
||||
40% {
|
||||
-webkit-transform: scale3d(.9, .9, .9);
|
||||
transform: scale3d(.9, .9, .9);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale3d(1.03, 1.03, 1.03);
|
||||
transform: scale3d(1.03, 1.03, 1.03);
|
||||
}
|
||||
|
||||
80% {
|
||||
-webkit-transform: scale3d(.97, .97, .97);
|
||||
transform: scale3d(.97, .97, .97);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ----------------------------------------
|
||||
* FadeInUp
|
||||
* ----------------------------------------
|
||||
*/
|
||||
@-webkit-keyframes fadeInUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* ----------------------------------------
|
||||
* FadeOutDown
|
||||
* ----------------------------------------
|
||||
*/
|
||||
|
||||
@-webkit-keyframes fadeOutDown {
|
||||
0% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0%);
|
||||
transform: translateY(0%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(100%);
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOutDown {
|
||||
0% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0%);
|
||||
transform: translateY(0%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(100%);
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* ----------------------------------------
|
||||
* LightSpeedIn
|
||||
* ----------------------------------------
|
||||
*/
|
||||
.lightSpeedIn :global {
|
||||
-webkit-animation-name: lightSpeedIn;
|
||||
animation-name: lightSpeedIn;
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
animation-timing-function: ease-out;
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
@-webkit-keyframes lightSpeedIn {
|
||||
0% {
|
||||
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
|
||||
transform: translate3d(100%, 0, 0) skewX(-30deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
60% {
|
||||
-webkit-transform: skewX(20deg);
|
||||
transform: skewX(20deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
80% {
|
||||
-webkit-transform: skewX(-5deg);
|
||||
transform: skewX(-5deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes lightSpeedIn {
|
||||
0% {
|
||||
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
|
||||
transform: translate3d(100%, 0, 0) skewX(-30deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
60% {
|
||||
-webkit-transform: skewX(20deg);
|
||||
transform: skewX(20deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
80% {
|
||||
-webkit-transform: skewX(-5deg);
|
||||
transform: skewX(-5deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* ----------------------------------------
|
||||
* animation shadow-drop-center
|
||||
* ----------------------------------------
|
||||
*/
|
||||
@-webkit-keyframes shadow-drop-center {
|
||||
0% {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateZ(50px);
|
||||
transform: translateZ(50px);
|
||||
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shadow-drop-center {
|
||||
0% {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateZ(50px);
|
||||
transform: translateZ(50px);
|
||||
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ----------------------------------------
|
||||
* animation shadow-inset-center
|
||||
* ----------------------------------------
|
||||
*/
|
||||
@-webkit-keyframes shadow-inset-center {
|
||||
0% {
|
||||
box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: inset 0 0 14px 0px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shadow-inset-center {
|
||||
0% {
|
||||
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0 0 1px 1px rgba(175, 175, 175, 0.1), 0 0 1px 1px rgba(175, 175, 175, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* ----------------------------------------
|
||||
* animation swing-in-top-fwd
|
||||
* ----------------------------------------
|
||||
*/
|
||||
@-webkit-keyframes swing-in-top-fwd {
|
||||
0% {
|
||||
-webkit-transform: rotateX(-100deg);
|
||||
transform: rotateX(-100deg);
|
||||
-webkit-transform-origin: top;
|
||||
transform-origin: top;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotateX(0deg);
|
||||
transform: rotateX(0deg);
|
||||
-webkit-transform-origin: top;
|
||||
transform-origin: top;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes swing-in-top-fwd {
|
||||
0% {
|
||||
-webkit-transform: rotateX(-100deg);
|
||||
transform: rotateX(-100deg);
|
||||
-webkit-transform-origin: top;
|
||||
transform-origin: top;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotateX(0deg);
|
||||
transform: rotateX(0deg);
|
||||
-webkit-transform-origin: top;
|
||||
transform-origin: top;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ----------------------------------------
|
||||
* animation flip-in-hor-bottom
|
||||
* ----------------------------------------
|
||||
*/
|
||||
@-webkit-keyframes flip-in-hor-bottom {
|
||||
0% {
|
||||
-webkit-transform: rotateX(80deg);
|
||||
transform: rotateX(80deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotateX(0);
|
||||
transform: rotateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flip-in-hor-bottom {
|
||||
0% {
|
||||
-webkit-transform: rotateX(80deg);
|
||||
transform: rotateX(80deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotateX(0);
|
||||
transform: rotateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ----------------------------------------
|
||||
* animations for spinner
|
||||
* ----------------------------------------
|
||||
*/
|
||||
|
||||
@keyframes loaderEnter {
|
||||
0% { opacity: 0; }
|
||||
100% { opacity: 0.7; }
|
||||
}
|
||||
|
||||
@-webkit-keyframes loaderEnter {
|
||||
0% { opacity: 0; }
|
||||
100% { opacity: 0.7; }
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes rotate {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dash {
|
||||
0% {
|
||||
stroke-dasharray: 1, 200;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
50% {
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: -35px;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: -124px;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes dash {
|
||||
0% {
|
||||
stroke-dasharray: 1, 200;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
50% {
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: -35px;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: -124px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes color {
|
||||
100%, 0% { stroke: var(--loader_color1); }
|
||||
40% { stroke: var(--loader_color2); }
|
||||
66% { stroke: var(--loader_color3); }
|
||||
80%, 90% { stroke: var(--loader_color4); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes color {
|
||||
100%, 0% { stroke: var(--loader_color1); }
|
||||
40% { stroke: var(--loader_color2); }
|
||||
66% { stroke: var(--loader_color3); }
|
||||
80%, 90% { stroke: var(--loader_color4); }
|
||||
}
|
||||
|
||||
@keyframes wait-color {
|
||||
100%, 0% { stroke: var(--spinner_wait_color); }
|
||||
40% { stroke: var(--spinner_wait_color); }
|
||||
66% { stroke: var(--spinner_wait_color); }
|
||||
80%, 90% { stroke: var(--spinner_wait_color); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes wait-color {
|
||||
100%, 0% { stroke: var(--spinner_wait_color); }
|
||||
40% { stroke: var(--spinner_wait_color); }
|
||||
66% { stroke: var(--spinner_wait_color); }
|
||||
80%, 90% { stroke: var(--spinner_wait_color); }
|
||||
}
|
||||
Reference in New Issue
Block a user