Updated Coloring for loader

This commit is contained in:
Christian 2021-05-09 19:03:32 +02:00
parent 75a3da7d95
commit 2202149116
4 changed files with 16 additions and 13 deletions

View File

@ -101,9 +101,10 @@
--color-code: var(--color-black-light1); --color-code: var(--color-black-light1);
--color-code-text: var(--color-white); --color-code-text: var(--color-white);
--color-loader-text: var(--color-white); --color-dragdrop: var(--color-code);
--color-loader: var(--color-black-light1); --color-dragdrop-text: var(--color-white);
--color-loader-hover: var(--color-black-light2); --color-dragdrop-processing: var(--color-cu-main);
--color-dragdrop-processing-text: var(--color-white);
} }

View File

@ -100,9 +100,10 @@
--color-code: var(--color-white-light2); --color-code: var(--color-white-light2);
--color-code-text: var(--color-black); --color-code-text: var(--color-black);
--color-loader-text: var(--color-black); --color-dragdrop: var(--color-code);
--color-loader: var(--color-grey-light1); --color-dragdrop-text: var(--color-black);
--color-loader-hover: var(--color-grey-light2); --color-dragdrop-processing: var(--color-cu-light1);
--color-dragdrop-processing-text: var(--color-black);
} }

View File

@ -1,6 +1,6 @@
/* Variables */ /* Variables */
* { * {
--loaderDivCol: var(--color-loader-text); --loaderDivCol: var(--color-dragdrop-processing-text);
--circR: 1rem; --circR: 1rem;
--circD: 2rem; --circD: 2rem;

View File

@ -43,27 +43,28 @@ footer{
height: 100vh; height: 100vh;
width: 100%; width: 100%;
background-color: var(--color-loader); background-color: var(--color-dragdrop);
color: var(--color-loader-text); color: var(--color-dragdrop-text);
--transition: all 0.25s ease-in-out 0s;
transition: var(--transition);
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
z-index: 1000; z-index: 1000;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
--transition: all 0.25s ease-in-out 0s;
transition: var(--transition);
} }
.dragDrop.hover, .dragDrop.loading { .dragDrop.hover, .dragDrop.loading {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
} }
.dragDrop.loading { .dragDrop.loading {
background-color: var(--color-loader-hover); background-color: var(--color-dragdrop-processing);
color: var(--color-dragdrop-processing-text);
} }
.dragDrop .loader { .dragDrop .loader {
display: none; display: none;