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); }
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
/* PREDEFINED COLORS */
|
||||
$white: rgb(255, 255, 255);
|
||||
|
||||
$lightGray: rgb(208, 208, 208);
|
||||
$lightGray2: rgb(213, 213, 213);
|
||||
$lightGray3: rgb(187, 187, 187);
|
||||
$lightGray4: rgb(172, 172, 172);
|
||||
|
||||
$verylightGray: rgb(242, 242, 242);
|
||||
$verylightGray2: rgb(224, 224, 224);
|
||||
$verylightGray4: rgb(234, 234, 234);
|
||||
$verylightGray5: rgb(229, 229, 229);
|
||||
$verylightGray6: rgb(193, 193, 193);
|
||||
$verylightGray7: rgb(245, 245, 245);
|
||||
|
||||
$darkGray: rgb(140, 140, 140);
|
||||
$darkGray2: rgb(128, 128, 128);
|
||||
$verydarkGray: rgb(70, 70, 70);
|
||||
$verydarkGray2: rgb(95, 95, 95);
|
||||
|
||||
$darkGreen: rgb(27, 94, 32);
|
||||
$darkGreen3: rgb(100, 146, 0);
|
||||
|
||||
$pureBlack: rgb(0, 0, 0);
|
||||
$mostlyBlack: rgb(45, 45, 45);
|
||||
$strongYellow: rgb(200, 200, 50);
|
||||
$strongOrange: rgb(255, 152, 0);
|
||||
$strongRed: rgb(220, 20, 0);
|
||||
$strongGreen: rgb(60, 130, 50);
|
||||
$strongBlue: rgb(0, 178, 238);
|
||||
|
||||
$mostlydesaturateddarkBlue: rgb(94, 134, 152);
|
||||
$lightdesaturateddarkBlue: rgba(120, 170, 195, 0.85);
|
||||
$verypaleYellow: rgb(255, 250, 208);
|
||||
|
||||
$vividBlue: rgb(34, 34, 255);
|
||||
$vividLimeGreen: rgb(34, 255, 34);
|
||||
$vividOrange: rgb(255, 165, 34);
|
||||
$vividRed: rgb(255, 34, 34);
|
||||
|
||||
$palette_premium_blue: rgb(59, 134, 255);
|
||||
$palette_premium_green: rgb(61, 207, 120);
|
||||
$palette_premium_gray: rgb(66, 82, 109);
|
||||
$palette_premium_orange: rgb(255, 157, 0);
|
||||
$palette_premium_red: rgb(214, 36, 77);
|
||||
$palette_premium_turquise: rgb(66, 210, 212);
|
||||
|
||||
$palette_premium_darkgreen: rgb(43, 157, 31);
|
||||
$palette_premium_lightgray: rgb(229, 233, 243);
|
||||
@@ -0,0 +1,106 @@
|
||||
|
||||
@font-face {
|
||||
font-family: "ROBOTO";
|
||||
src: url("/assets/fonts/Roboto-Regular.ttf") format('truetype');
|
||||
font-display: fallback;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "ROBOTO";
|
||||
src: url("/assets/fonts/Roboto-Light.ttf") format('truetype');
|
||||
font-display: fallback;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "ROBOTO";
|
||||
src: url("/assets/fonts/Roboto-Medium.ttf") format('truetype');
|
||||
font-display: fallback;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "ROBOTO";
|
||||
src: url("/assets/fonts/Roboto-Bold.ttf") format('truetype');
|
||||
font-display: fallback;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "FiraSansLight";
|
||||
src: url("/assets/fonts/FiraSans-Light.ttf") format('truetype');
|
||||
font-display: fallback;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "FiraSansLightItalic";
|
||||
src: url("/assets/fonts/FiraSans-LightItalic.ttf") format('truetype');
|
||||
font-display: fallback;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "FiraSansMedium";
|
||||
src: url("/assets/fonts/FiraSans-Medium.ttf") format('truetype');
|
||||
font-display: fallback;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "SourceSans";
|
||||
src: url("/assets/fonts/SourceSansPro-Regular.ttf") format('truetype');
|
||||
font-display: fallback;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "FiraSans";
|
||||
src: url("/assets/fonts/FiraSans-Regular.ttf") format('truetype');
|
||||
font-display: fallback;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "FiraSansItalic";
|
||||
src: url("/assets/fonts/FiraSans-Italic.ttf") format('truetype');
|
||||
font-display: fallback;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "FiraSansMedium";
|
||||
src: url("/assets/fonts/FiraSans-Medium.ttf") format('truetype');
|
||||
font-display: fallback;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "SourceSans";
|
||||
src: url("/assets/fonts/SourceSansPro-Regular.ttf") format('truetype');
|
||||
font-display: fallback;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "SourceSansLight";
|
||||
src: url("/assets/fonts/SourceSansPro-Light.ttf") format('truetype');
|
||||
font-display: fallback;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "SourceSansSemiBold";
|
||||
src: url("/assets/fonts/SourceSansPro-SemiBold.ttf") format('truetype');
|
||||
font-display: fallback;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Lato";
|
||||
src: url("/assets/fonts/Lato-Regular.ttf") format('truetype');
|
||||
font-display: fallback;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "LatoItalic";
|
||||
src: url("/assets/fonts/Lato-Italic.ttf") format('truetype');
|
||||
font-display: fallback;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "LatoBold";
|
||||
src: url("/assets/fonts/Lato-Bold.ttf") format('truetype');
|
||||
font-display: fallback;
|
||||
}
|
||||
@@ -0,0 +1,202 @@
|
||||
@mixin focus(
|
||||
$outline: $focus_outline,
|
||||
$outline-offset: null,
|
||||
$outline-width: null,
|
||||
$box-shadow: $focus_box_shadow,
|
||||
$border-radius: null,
|
||||
$border: null
|
||||
) {
|
||||
@if $outline != null {
|
||||
outline: $outline;
|
||||
}
|
||||
|
||||
@if $outline-width != null {
|
||||
outline-width: $outline-width;
|
||||
}
|
||||
|
||||
@if $outline-offset != null {
|
||||
outline-offset: $outline-offset;
|
||||
}
|
||||
|
||||
@if $box-shadow != null {
|
||||
box-shadow: $box-shadow;
|
||||
}
|
||||
|
||||
@if $border-radius != null {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
@if $border != null {
|
||||
border: $border;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin gradientBorder($color, $height) {
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($color), to(transparent));
|
||||
background-image: -webkit-linear-gradient(180deg, $color, transparent), -webkit-linear-gradient(180deg, $color, transparent);
|
||||
background-image: -moz-linear-gradient(180deg, $color, transparent), -moz-linear-gradient(180deg, $color, transparent);
|
||||
background-image: -o-linear-gradient(180deg, $color, transparent), -o-linear-gradient(180deg, $color, transparent);
|
||||
background-image: linear-gradient(20deg, $color, transparent), linear-gradient(90deg, $color, transparent);
|
||||
-moz-background-size: 100% $height;
|
||||
background-size: 100% $height;
|
||||
background-position: 0 100%, 0 100%;
|
||||
background-repeat: no-repeat;
|
||||
height: $height;
|
||||
}
|
||||
|
||||
@mixin gradientBg($color1, $color2, $height) {
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($color1), to($color2));
|
||||
background-image: -webkit-linear-gradient(180deg, $color1, $color2), -webkit-linear-gradient(180deg, $color1, $color2);
|
||||
background-image: -moz-linear-gradient(180deg, $color1, $color2), -moz-linear-gradient(180deg, $color1, $color2);
|
||||
background-image: -o-linear-gradient(180deg, $color1, $color2), -o-linear-gradient(180deg, $color1, $color2);
|
||||
background-image: linear-gradient(20deg, $color1, $color2), linear-gradient(90deg, $color1, $color2);
|
||||
-moz-background-size: 100% $height;
|
||||
background-size: 100% $height;
|
||||
background-position: 0 100%, 0 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
@mixin flexDisplay() {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@mixin flexKeepSizeDisplay() {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
flex-grow: 0;
|
||||
-webkit-flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
-webkit-flex-shrink: 0;
|
||||
}
|
||||
|
||||
@mixin flexWrap($wrapMode) {
|
||||
-webkit-flex-wrap: $wrapMode;
|
||||
-ms-flex-wrap: $wrapMode;
|
||||
flex-wrap: $wrapMode;
|
||||
}
|
||||
|
||||
@mixin flexDirection($direction) {
|
||||
-webkit-flex-direction: $direction;
|
||||
-ms-flex-direction: $direction;
|
||||
flex-direction: $direction;
|
||||
}
|
||||
|
||||
@mixin flexJustifyContent($justify, $msjustify) {
|
||||
-webkit-justify-content: $justify;
|
||||
-ms-flex-pack: $msjustify;
|
||||
justify-content: $justify;
|
||||
}
|
||||
|
||||
@mixin flexAlignItems($align, $msalign) {
|
||||
-webkit-align-items: $align;
|
||||
-ms-flex-align: $msalign;
|
||||
align-items: $align;
|
||||
}
|
||||
|
||||
@mixin flexAlignContent($align, $msalign) {
|
||||
-webkit-align-content: $align;
|
||||
-ms-flex-line-pack: $msalign;
|
||||
align-content: $align;
|
||||
}
|
||||
|
||||
@mixin flexAlignSelf($align) {
|
||||
-webkit-align-self: $align;
|
||||
-ms-flex-item-align: $align;
|
||||
align-self: $align;
|
||||
}
|
||||
|
||||
@mixin flexSelf($grow, $shrink, $basis) {
|
||||
-webkit-flex: $grow $shrink $basis;
|
||||
-ms-flex: $grow $shrink $basis;
|
||||
flex: $grow $shrink $basis;
|
||||
}
|
||||
|
||||
@mixin flexOrder($order) {
|
||||
-webkit-order: $order;
|
||||
-ms-flex-order: $order;
|
||||
order: $order;
|
||||
}
|
||||
|
||||
@mixin positionAbsolute($margin) {
|
||||
position: absolute;
|
||||
top: $margin;
|
||||
left: $margin;
|
||||
right: $margin;
|
||||
bottom: $margin;
|
||||
}
|
||||
|
||||
@mixin boxShadow($shadow_color: null) {
|
||||
@if ($shadow_color) {
|
||||
box-shadow: 2px 3px 3px -1px $shadow_color;
|
||||
-webkit-box-shadow: 2px 3px 3px -1px $shadow_color;
|
||||
-moz-box-shadow: 2px 3px 3px -1px $shadow_color;
|
||||
}
|
||||
@else {
|
||||
box-shadow: none;
|
||||
-webkit-box-shadow: 2px 3px 3px -1px none;
|
||||
-moz-box-shadow: 2px 3px 3px -1px none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin flexSelf($grow, $shrink, $basis) {
|
||||
-webkit-flex: $grow $shrink $basis;
|
||||
-ms-flex: $grow $shrink $basis;
|
||||
flex: $grow $shrink $basis;
|
||||
}
|
||||
|
||||
// .fadeInUp :global {
|
||||
// -webkit-animation-name: fadeInUp;
|
||||
// animation-name: fadeInUp;
|
||||
// -webkit-animation-duration: 0.6s;
|
||||
// animation-duration: 0.6s;
|
||||
// -webkit-animation-fill-mode: both;
|
||||
// animation-fill-mode: both;
|
||||
// }
|
||||
|
||||
// .fadeOutDown :global {
|
||||
// -webkit-animation-name: fadeOutDown;
|
||||
// animation-name: fadeOutDown;
|
||||
// -webkit-animation-duration: 0.6s;
|
||||
// animation-duration: 0.6s;
|
||||
// -webkit-animation-fill-mode: both;
|
||||
// animation-fill-mode: both;
|
||||
// }
|
||||
|
||||
@mixin animateFadeInUpFadeOutDown($delay) {
|
||||
-webkit-animation: fadeInUp 0.6s both, fadeOutDown 0.6s $delay forwards;
|
||||
animation: fadeInUp 0.6s both, fadeOutDown 0.6s $delay forwards;
|
||||
}
|
||||
|
||||
@mixin multilineEllipsis($lines) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: $lines;
|
||||
}
|
||||
|
||||
@mixin fullScreenButton() {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
background-color: $field_image_full_screen_bg;
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
right: 15px;
|
||||
z-index: 10000;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: $field_image_full_screen_shadow;
|
||||
}
|
||||
|
||||
@mixin transition($property, $duration, $function, $delay) {
|
||||
-webkit-transition: $property $duration $function $delay;
|
||||
-moz-transition: $property $duration $function $delay;
|
||||
-o-transition: $property $duration $function $delay;
|
||||
-ms-transition: $property $duration $function $delay;
|
||||
transition: $property $duration $function $delay;
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
/* MOON THEME COLORS */
|
||||
$moon_desaturated-gray: rgb(127, 133, 163);
|
||||
$moon_dark-blue: rgb(62, 104, 215);
|
||||
$moon_blue: rgb(130, 170, 255);
|
||||
$moon_sky-blue: rgb(101, 188, 255);
|
||||
$moon_cyan: rgb(134, 225, 252);
|
||||
$moon_red: rgb(255, 117, 127);
|
||||
$moon_dark-red: rgb(255, 83, 112);
|
||||
$moon_light-red: rgb(255, 152, 164);
|
||||
$moon_yellow: rgb(255, 199, 119);
|
||||
$moon_orange: rgb(255, 150, 108);
|
||||
$moon_dark-orange: rgb(252, 123, 123);
|
||||
$moon_teal: rgb(79, 214, 190);
|
||||
$moon_green: rgb(195, 232, 141);
|
||||
$moon_purple: rgb(192, 153, 255);
|
||||
$moon_pink: rgb(252, 167, 234);
|
||||
$moon_indigo: rgb(122, 136, 207);
|
||||
$moon_indigo_light: rgb(162, 177, 255);
|
||||
$moon_bright-cyan: rgb(180, 249, 248);
|
||||
|
||||
$moon_gray-10-alt: rgb(188, 196, 214);
|
||||
$moon_gray-10: rgb(200, 211, 245);
|
||||
$moon_gray-9: rgb(180, 194, 240);
|
||||
$moon_gray-8: rgb(169, 184, 232);
|
||||
$moon_gray-7: rgb(130, 139, 184);
|
||||
$moon_gray-6: rgb(68, 74, 115);
|
||||
$moon_gray-5: rgb(47, 51, 77);
|
||||
$moon_gray-4: rgb(34, 36, 54);
|
||||
$moon_gray-3: rgb(30, 32, 48);
|
||||
$moon_gray-2: rgb(25, 26, 42);
|
||||
$moon_gray-1: rgb(6, 6, 7);
|
||||
@@ -0,0 +1,76 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.splash-screen {
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: $splash_screen_bg;
|
||||
|
||||
svg {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
left: calc(50% - 50px);
|
||||
top: calc(50% - 50px);
|
||||
|
||||
path {
|
||||
fill: $splash_logo !important;
|
||||
}
|
||||
}
|
||||
|
||||
.splash-spinner,
|
||||
.splash-spinner:after {
|
||||
border-radius: 50%;
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
}
|
||||
.splash-spinner {
|
||||
display: none;
|
||||
box-sizing: border-box;
|
||||
font-size: 6px;
|
||||
position: absolute;
|
||||
left: calc(50% - 65px);
|
||||
top: calc(50% - 65px);
|
||||
text-indent: -9999em;
|
||||
border-top: $splash_spinner_track;
|
||||
border-right: $splash_spinner_track;
|
||||
border-bottom: $splash_spinner_track;
|
||||
border-left: $splash_spinner_fill;
|
||||
-webkit-transform: translateZ(0);
|
||||
-ms-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-animation: splashSpinner 1.1s infinite linear;
|
||||
animation: splashSpinner 1.1s infinite linear;
|
||||
}
|
||||
|
||||
@-webkit-keyframes splashSpinner {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes splashSpinner {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.splash-screen {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: $splash_screen_bg;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.svg-section {
|
||||
-webkit-animation: svgSection 1.5s infinite ease-in-out;
|
||||
animation: svgSection 1.5s infinite ease-in-out;
|
||||
|
||||
&.first {
|
||||
fill: $splash_logo_first_section !important;
|
||||
}
|
||||
|
||||
&.second {
|
||||
fill: $splash_logo_second_section !important;
|
||||
}
|
||||
|
||||
&.third {
|
||||
fill: $splash_logo_third_section !important;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
-webkit-animation-delay: .2s;
|
||||
animation-delay: .2s;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
-webkit-animation-delay: .4s;
|
||||
animation-delay: .4s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes svgSection {
|
||||
0% { opacity: .4; }
|
||||
20% { opacity: 1; }
|
||||
100% { opacity: .4; }
|
||||
}
|
||||
|
||||
@keyframes svgSection {
|
||||
0% { opacity: .4; }
|
||||
20% { opacity: 1; }
|
||||
100% { opacity: .4; }
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user