Marcin Wojas
782 lines
14 KiB
SCSS
782 lines
14 KiB
SCSS
@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); }
|
|
} |