Updated styling
This commit is contained in:
parent
7beb5c29b2
commit
a711e0d148
@ -51,6 +51,7 @@
|
||||
--color-controls-button-text: var(--color-white);
|
||||
--color-controls-button-border: var(--color-white);
|
||||
--color-controls-button-text-hover: var(--color-white-light1);
|
||||
--color-controls-scroller-label-text: var(--color-black);
|
||||
|
||||
--color-header: var(--color-grey);
|
||||
--color-header-text: var(--color-white);
|
||||
@ -77,6 +78,7 @@
|
||||
--color-table-ram-select: transparent;
|
||||
--color-table-ram-select-text: inherit;
|
||||
--color-table-ram-select-border: var(--color-grey-light2);
|
||||
--color-table-ram-button-border: var(--color-controls-button-border);
|
||||
|
||||
--color-table-cu-head: var(--color-cu-dark1);
|
||||
--color-table-cu-head-text: var(--color-white);
|
||||
@ -85,6 +87,7 @@
|
||||
--color-table-cu-select: transparent;
|
||||
--color-table-cu-select-text: inherit;
|
||||
--color-table-cu-select-border: var(--color-grey-light2);
|
||||
--color-table-cu-button-border: var(--color-controls-button-border);
|
||||
|
||||
--color-arrow: var(--color-arrow-main);
|
||||
--color-arrow-text: var(--color-white);
|
||||
@ -97,6 +100,10 @@
|
||||
|
||||
--color-code: var(--color-black-light1);
|
||||
--color-code-text: var(--color-white);
|
||||
|
||||
--color-loader-text: var(--color-white);
|
||||
--color-loader: var(--color-black-light1);
|
||||
--color-loader-hover: var(--color-black-light2);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -50,6 +50,7 @@
|
||||
--color-controls-button-text: var(--color-black);
|
||||
--color-controls-button-border: var(--color-black);
|
||||
--color-controls-button-text-hover: var(--color-black-light1);
|
||||
--color-controls-scroller-label-text: var(--color-white);
|
||||
|
||||
--color-header: var(--color-grey);
|
||||
--color-header-text: var(--color-white);
|
||||
@ -76,6 +77,7 @@
|
||||
--color-table-ram-select: transparent;
|
||||
--color-table-ram-select-text: inherit;
|
||||
--color-table-ram-select-border: var(--color-grey-light2);
|
||||
--color-table-ram-button-border: var(--color-controls-button-border);
|
||||
|
||||
--color-table-cu-head: var(--color-cu-dark1);
|
||||
--color-table-cu-head-text: var(--color-white);
|
||||
@ -84,6 +86,7 @@
|
||||
--color-table-cu-select: transparent;
|
||||
--color-table-cu-select-text: inherit;
|
||||
--color-table-cu-select-border: var(--color-grey-light2);
|
||||
--color-table-cu-button-border: var(--color-controls-button-border);
|
||||
|
||||
--color-arrow: var(--color-arrow-main);
|
||||
--color-arrow-text: var(--color-white);
|
||||
@ -96,6 +99,10 @@
|
||||
|
||||
--color-code: var(--color-white-light2);
|
||||
--color-code-text: var(--color-black);
|
||||
|
||||
--color-loader-text: var(--color-black);
|
||||
--color-loader: var(--color-grey-light1);
|
||||
--color-loader-hover: var(--color-grey-light2);
|
||||
}
|
||||
|
||||
|
||||
|
||||
310
out/css/loader.css
Normal file
310
out/css/loader.css
Normal file
@ -0,0 +1,310 @@
|
||||
/* Variables */
|
||||
* {
|
||||
--loaderDivCol: var(--color-loader-text);
|
||||
|
||||
--circR: 1rem;
|
||||
--circD: 2rem;
|
||||
--circ6D: 12rem;
|
||||
|
||||
--timing: ease-in-out;
|
||||
--fullCycle: 5s;
|
||||
}
|
||||
|
||||
.loader.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.loader {
|
||||
position: relative;
|
||||
|
||||
box-sizing: border-box;
|
||||
height: var(--circD);
|
||||
width: var(--circ6D);
|
||||
|
||||
margin: calc(var(--circD) * 3) var(--circD);
|
||||
padding: var(--circR) 0;
|
||||
}
|
||||
|
||||
.loader > * {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
height: 0;
|
||||
width: calc(2 * var(--circD));
|
||||
opacity: 0;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
--keyframe-sequence: "loading0";
|
||||
--delay: 0;
|
||||
--animation: var(--keyframe-sequence) var(--fullCycle) var(--timing) calc(0s - var(--fullCycle) * (1 - (var(--delay)) / 8) ) infinite;
|
||||
|
||||
-webkit-animation: var(--animation);
|
||||
-moz-animation: var(--animation);
|
||||
-ms-animation: var(--animation);
|
||||
-o-animation: var(--animation);
|
||||
animation: var(--animation);
|
||||
}
|
||||
|
||||
.loader div::before,
|
||||
.loader div::after {
|
||||
content: "";
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: var(--circD);
|
||||
height: var(--circD);
|
||||
border: 1px solid var(--loaderDivCol);
|
||||
background: var(--loaderDivCol);
|
||||
border-radius: 100%;
|
||||
|
||||
position: absolute;
|
||||
top: calc(0px - var(--circR));
|
||||
}
|
||||
|
||||
.loader div::before {
|
||||
left: calc(0px - var(--circR));
|
||||
}
|
||||
.loader div::after {
|
||||
right: calc(0px - var(--circR));
|
||||
}
|
||||
|
||||
|
||||
@keyframes loading0 {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
12.52% {
|
||||
opacity: 1;
|
||||
}
|
||||
12.56% {
|
||||
opacity: 0;
|
||||
}
|
||||
99.7% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loading2 {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
7% {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
12.47% {
|
||||
opacity: 1;
|
||||
}
|
||||
12.56% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
24.6% {
|
||||
opacity: 0;
|
||||
}
|
||||
24.97% {
|
||||
opacity: 1;
|
||||
}
|
||||
37.52% {
|
||||
opacity: 1;
|
||||
}
|
||||
37.57% {
|
||||
opacity: 0;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
99.95% {
|
||||
opacity: 0;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loading3 {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
7% {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
12.47% {
|
||||
opacity: 1;
|
||||
}
|
||||
12.52% {
|
||||
opacity: 1;
|
||||
}
|
||||
12.56% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
37.4% {
|
||||
opacity: 0;
|
||||
}
|
||||
37.47% {
|
||||
opacity: 1;
|
||||
}
|
||||
50.02% {
|
||||
opacity: 1;
|
||||
}
|
||||
50.1% {
|
||||
opacity: 0;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
99.8% {
|
||||
opacity: 0;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loading5 {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
7% {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
12.47% {
|
||||
opacity: 1;
|
||||
}
|
||||
12.52% {
|
||||
opacity: 1;
|
||||
}
|
||||
12.58% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
62.4% {
|
||||
opacity: 0;
|
||||
}
|
||||
62.47% {
|
||||
opacity: 1;
|
||||
}
|
||||
75.02% {
|
||||
opacity: 1;
|
||||
}
|
||||
75.1% {
|
||||
opacity: 0;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
99.7% {
|
||||
transform: rotate(0deg);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loading6 {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
7% {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
12.47% {
|
||||
opacity: 1;
|
||||
}
|
||||
12.52% {
|
||||
opacity: 1;
|
||||
}
|
||||
12.57% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
74.85% {
|
||||
opacity: 0;
|
||||
}
|
||||
74.97% {
|
||||
opacity: 1;
|
||||
}
|
||||
87.52% {
|
||||
opacity: 1;
|
||||
}
|
||||
87.6% {
|
||||
opacity: 0;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
99.8% {
|
||||
opacity: 0;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.loader :nth-child(1) {
|
||||
width: 66.66%;
|
||||
--keyframe-sequence: "loading5";
|
||||
--delay: 0;
|
||||
}
|
||||
.loader :nth-child(2) {
|
||||
width: 66.66%;
|
||||
margin-left: 0;
|
||||
--keyframe-sequence: "loading2";
|
||||
--delay: 0;
|
||||
}
|
||||
.loader :nth-child(3) {
|
||||
width: 33.33%;
|
||||
margin-left: 33.33%;
|
||||
--keyframe-sequence: "loading2";
|
||||
--delay: 1;
|
||||
}
|
||||
.loader :nth-child(4) {
|
||||
width: 66.66%;
|
||||
margin-left: 33.33%;
|
||||
--keyframe-sequence: "loading6";
|
||||
--delay: 2;
|
||||
}
|
||||
|
||||
.loader :nth-child(5) {
|
||||
width: 100%;
|
||||
--keyframe-sequence: "loading6";
|
||||
--delay: 3;
|
||||
}
|
||||
.loader :nth-child(6) {
|
||||
width: 100%;
|
||||
--keyframe-sequence: "loading3";
|
||||
--delay: 3;
|
||||
}
|
||||
.loader :nth-child(7) {
|
||||
width: 33.33%;
|
||||
--keyframe-sequence: "loading3";
|
||||
--delay: 4;
|
||||
}
|
||||
.loader :nth-child(8) {
|
||||
width: 66.66%;
|
||||
margin-left: 33.33%;
|
||||
--keyframe-sequence: "loading3";
|
||||
--delay: 5;
|
||||
}
|
||||
.loader :nth-child(9) {
|
||||
width: 33.33%;
|
||||
margin-left: 33.33%;
|
||||
--keyframe-sequence: "loading5";
|
||||
--delay: 6;
|
||||
}
|
||||
.loader :nth-child(10) {
|
||||
width: 33.33%;
|
||||
margin-left: 66.66%;
|
||||
--keyframe-sequence: "loading5";
|
||||
--delay: 7;
|
||||
}
|
||||
127
out/css/pc.css
127
out/css/pc.css
@ -68,15 +68,6 @@
|
||||
}
|
||||
|
||||
/* CONTROLS COLORS */
|
||||
.controls button, .controls .button {
|
||||
/* background-color: whitesmoke; */
|
||||
color: var(--color-controls-button-text);
|
||||
border-color: var(--color-controls-button-border);
|
||||
}
|
||||
.controls button:hover, .controls .button:hover{
|
||||
color: var(--color-controls-button-text-hover);
|
||||
}
|
||||
|
||||
.pc .controls .checker::before {
|
||||
border: 1px solid var(--color-controls-button-border);
|
||||
}
|
||||
@ -119,7 +110,7 @@
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
padding: 1em;
|
||||
padding: 1em 0;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto;
|
||||
@ -170,9 +161,9 @@
|
||||
margin: 1em 0 0 0;
|
||||
}
|
||||
|
||||
.pc .scroller:last-child {
|
||||
/*.pc .scroller:last-child {
|
||||
margin-bottom: -1em;
|
||||
}
|
||||
}*/
|
||||
|
||||
.pc .scroller table {
|
||||
margin: 0;
|
||||
@ -182,8 +173,9 @@
|
||||
position: sticky;
|
||||
top: -2px;
|
||||
left: 0;
|
||||
height: 1em;
|
||||
padding: 1em;
|
||||
/*height: 1em;*/
|
||||
/*padding: 1em;*/
|
||||
font-size: .8em;
|
||||
|
||||
transition: 0.2s;
|
||||
}
|
||||
@ -192,21 +184,27 @@
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
width: min-content;
|
||||
}
|
||||
.pc .scroller table thead th:last-child {
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.pc .scroller table thead.head.shrunk {
|
||||
height: .5rem;
|
||||
font-size: .8em;
|
||||
/*height: .5rem;*/
|
||||
/*font-size: .8em;*/
|
||||
}
|
||||
|
||||
.pc .scroller table thead.head th {
|
||||
padding: 12px 4px 12px 15px;
|
||||
padding: .2em 3px;
|
||||
transition: 0.2s;
|
||||
text-align: center;
|
||||
/*border: 1px solid black !important;*/
|
||||
}
|
||||
|
||||
.pc .scroller table thead.head.shrunk th {
|
||||
padding-top: .2em;
|
||||
padding-bottom: .2em;
|
||||
/*padding-top: .2em;
|
||||
padding-bottom: .2em;*/
|
||||
}
|
||||
|
||||
.pc .scroller table .num {
|
||||
@ -214,15 +212,37 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pc .scroller table td:first-child,
|
||||
.pc .scroller table td:last-child {
|
||||
padding: 12px 15px;
|
||||
.pc .scroller table td {
|
||||
padding: 6px 3px;
|
||||
vertical-align: baseline;
|
||||
/*border: 1px solid black !important;*/
|
||||
}
|
||||
|
||||
.pc .scroller table tr.empty td {
|
||||
padding: 3px 15px;
|
||||
.pc .scroller table tr td:first-child {
|
||||
padding: 12px 8px;
|
||||
}
|
||||
|
||||
.pc .scroller table tr.empty td:first-child {
|
||||
padding: 3px 8px;
|
||||
}
|
||||
|
||||
.pc .cu .scroller table tr.empty select {
|
||||
padding: 3px 8px;
|
||||
height: min-content;
|
||||
}
|
||||
|
||||
.pc .scroller table tr td :last-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pc .scroller tr:first-child td {
|
||||
padding-top: 1.5rem !important;
|
||||
}
|
||||
|
||||
/*.pc .ram .comment {
|
||||
padding: 12px 5px;
|
||||
}*/
|
||||
|
||||
.pc .scroller table tbody button:last-child {
|
||||
text-decoration: none;
|
||||
text-transform: none;
|
||||
@ -233,10 +253,6 @@
|
||||
padding: 0px 10px;
|
||||
}
|
||||
|
||||
.pc .scroller tr:first-child td{
|
||||
padding-top: 1.5rem !important;
|
||||
}
|
||||
|
||||
th.address {
|
||||
width: 5rem;
|
||||
padding-left: 8px;
|
||||
@ -331,28 +347,29 @@ th.address {
|
||||
}
|
||||
|
||||
.pc .ram table tr td:nth-child(2){
|
||||
text-align: left;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pc .ram .scroller table tbody button:last-child{
|
||||
.pc .ram .scroller table tbody tr:last-child button{
|
||||
background-color: var(--color-table-ram-select);
|
||||
color: var(--color-table-ram-select-text);
|
||||
border-color: var(--color-table-ram-select-border);
|
||||
border-color: var(--color-table-ram-button-border);
|
||||
width: 9.5em;
|
||||
height: 2.5rem;
|
||||
padding: 2px 1px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.pc .ram .ram-entry:last-child {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.pc .ram .comment {
|
||||
padding: 12px 5px;
|
||||
}
|
||||
|
||||
.pc .ram .comment input{
|
||||
border: none;
|
||||
margin: 0;
|
||||
font-size: .8em;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
@ -384,7 +401,7 @@ th.address {
|
||||
}
|
||||
|
||||
.pc .cu input[type=number] {
|
||||
width: 12.5em;
|
||||
width: 9.5em;
|
||||
}
|
||||
|
||||
.pc .cu label {
|
||||
@ -401,10 +418,19 @@ th.address {
|
||||
border: 1px solid var(--color-table-cu-select-border);
|
||||
}
|
||||
|
||||
.pc .cu .scroller table tbody button:last-child {
|
||||
.pc .cu .scroller table tbody tr:last-child button {
|
||||
background-color: var(--color-table-cu-select);
|
||||
color: var(--color-table-cu-select-text);
|
||||
border: 1px solid var(--color-table-cu-select-border);
|
||||
border: 1px solid var(--color-table-cu-button-border);
|
||||
|
||||
width: 100%;
|
||||
height: min-content;
|
||||
padding: 3px 15px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.pc .cu .scroller table tr td:first-child {
|
||||
padding: 12px 12px 12px 8px;
|
||||
}
|
||||
|
||||
.pc .cu button,
|
||||
@ -417,6 +443,21 @@ th.address {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.pc .modal .download-button {
|
||||
display: block;
|
||||
margin-bottom: 2em;
|
||||
padding: 2px 15px;
|
||||
font-weight: normal;
|
||||
font-size: inherit;
|
||||
height: min-content;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.pc .action-button {
|
||||
width: 8em;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
/* ALU */
|
||||
.pc .alu input, .pc .alu .button, .pc .alu button{
|
||||
color: var(--color-alu-text);
|
||||
@ -525,11 +566,11 @@ th.address {
|
||||
}
|
||||
|
||||
.pc .arrow.up ~ .arrow.up {
|
||||
left: 25%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.pc .arrow.up ~ .arrow.up ~ .arrow.up {
|
||||
left: 50%;
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.pc .arrow.top {
|
||||
@ -642,6 +683,12 @@ th.address {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.input-group > *{
|
||||
margin-right: 0.5em !important;
|
||||
}
|
||||
.input-group :last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
|
||||
@media(max-width: 1000px){
|
||||
|
||||
296
out/css/roller.css
Normal file
296
out/css/roller.css
Normal file
@ -0,0 +1,296 @@
|
||||
|
||||
/*
|
||||
Roller
|
||||
*/
|
||||
|
||||
* {
|
||||
--loaderDivCol: #eee;
|
||||
|
||||
--circD: 1rem;
|
||||
--circ6D: 6rem;
|
||||
--circR: 0.5rem;
|
||||
|
||||
--scrollbarBG: #f5f5f5;
|
||||
--thumbBG: #C1DCEA;
|
||||
}
|
||||
|
||||
#elm {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.roller {
|
||||
margin: 2.5rem 0;
|
||||
}
|
||||
|
||||
@keyframes loading0 {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
7% {
|
||||
transform: rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
12.47% {
|
||||
opacity: 1;
|
||||
}
|
||||
12.52% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loading2 {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
7% {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
12.47% {
|
||||
opacity: 1;
|
||||
}
|
||||
12.52% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
24.97% {
|
||||
opacity: 0;
|
||||
}
|
||||
25.02% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
37.47% {
|
||||
opacity: 1;
|
||||
}
|
||||
37.52% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
99.95% {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loading3 {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
7% {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
12.47% {
|
||||
opacity: 1;
|
||||
}
|
||||
12.52% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
37.47% {
|
||||
opacity: 0;
|
||||
}
|
||||
37.52% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
49.97% {
|
||||
opacity: 1;
|
||||
}
|
||||
50.02% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loading5 {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
7% {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
12.47% {
|
||||
opacity: 1;
|
||||
}
|
||||
12.52% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
62.47% {
|
||||
opacity: 0;
|
||||
}
|
||||
62.52% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
74.97% {
|
||||
opacity: 1;
|
||||
}
|
||||
75.02% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loading6 {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
7% {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
12.47% {
|
||||
opacity: 1;
|
||||
}
|
||||
12.52% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
74.97% {
|
||||
opacity: 0;
|
||||
}
|
||||
75.02% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
87.47% {
|
||||
opacity: 1;
|
||||
}
|
||||
87.52% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.loader {
|
||||
position: relative;
|
||||
height: var(--circD);
|
||||
width: var(--circ6D);
|
||||
padding: var(--circR) 0;
|
||||
box-sizing: border-box;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
||||
.loader :nth-child(n) {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
box-sizing: border-box;
|
||||
width: 0;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.loader div::before,
|
||||
.loader div::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: var(--circD);
|
||||
height: var(--circD);
|
||||
border: 1px solid var(--loaderDivCol);
|
||||
background: var(--loaderDivCol);
|
||||
border-radius: 100%;
|
||||
|
||||
position: absolute;
|
||||
top: var(--circR);
|
||||
}
|
||||
|
||||
.loader div::before {
|
||||
left: calc(-var(--circR));
|
||||
}
|
||||
.loader div::after {
|
||||
right: calc(-var(--circR));
|
||||
}
|
||||
|
||||
|
||||
.loader :nth-child(1) {
|
||||
width: 66.66%;
|
||||
/*^{animation "loading5" (timeDiv 0)}*/
|
||||
|
||||
--timing: "cubic-bezier(.39,.58,.57,1)";
|
||||
--fullCycle: "4s";
|
||||
--animation: "loading5" var(--fullCycle) var(--timing) calc(-(var(--fullCycle) * 1 / 8 )) infinite;
|
||||
-webkit-animation: var(--animation);
|
||||
-moz-animation: var(--animation);
|
||||
-ms-animation: var(--animation);
|
||||
-o-animation: var(--animation);
|
||||
animation: var(--animation);
|
||||
|
||||
/*- fromInteger fullDiv * (1 - (fromInteger a) / 8 )*/
|
||||
}
|
||||
.loader :nth-child(2) {
|
||||
width: 66.66%;
|
||||
margin-left: 0;
|
||||
/*^{animation "loading2" (timeDiv 0)}*/
|
||||
}
|
||||
.loader :nth-child(3) {
|
||||
width: 33.33%
|
||||
margin-left: 33.33%
|
||||
/*^{animation "loading2" (timeDiv 1)}*/
|
||||
}
|
||||
.loader :nth-child(4) {
|
||||
width: 66.66%
|
||||
margin-left: 33.33%
|
||||
/*^{animation "loading6" (timeDiv 2)}*/
|
||||
}
|
||||
|
||||
|
||||
.loader :nth-child(5) {
|
||||
width: 100%
|
||||
/*^{animation "loading6" (timeDiv 3)} */
|
||||
}
|
||||
.loader :nth-child(6) {
|
||||
width: 100%
|
||||
/*^{animation "loading3" (timeDiv 3)}*/
|
||||
}
|
||||
.loader :nth-child(7) {
|
||||
width: 33.33%
|
||||
/*^{animation "loading3" (timeDiv 4)}*/
|
||||
}
|
||||
.loader :nth-child(8) {
|
||||
width: 66.66%
|
||||
margin-left: 33.33%
|
||||
/*^{animation "loading3" (timeDiv 5)}*/
|
||||
}
|
||||
.loader :nth-child(9) {
|
||||
width: 33.33%
|
||||
margin-left: 33.33%
|
||||
/*^{animation "loading5" (timeDiv 6)}*/
|
||||
}
|
||||
.loader :nth-child(10) {
|
||||
width: 33.33%
|
||||
margin-left: 66.66%
|
||||
/*^{animation "loading5" (timeDiv 7)} */
|
||||
}
|
||||
@ -36,8 +36,89 @@ footer{
|
||||
}
|
||||
|
||||
|
||||
.dragDrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
|
||||
background-color: var(--color-loader);
|
||||
color: var(--color-loader-text);
|
||||
|
||||
--transition: all 0.25s ease-in-out 0s;
|
||||
transition: var(--transition);
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
|
||||
z-index: 1000;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.dragDrop.hover, .dragDrop.loading {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
.dragDrop.loading {
|
||||
background-color: var(--color-loader-hover);
|
||||
}
|
||||
/*.dragDrop.loading p:first-child::before {
|
||||
content: "⋮";
|
||||
|
||||
display: inline-flex;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
transform: rotate(0);
|
||||
}*/
|
||||
|
||||
.pc .examples-list {
|
||||
border: 1px solid var(--color-controls-button-border);
|
||||
margin: 0;
|
||||
border-radius: 0 4px 4px 4px;
|
||||
}
|
||||
|
||||
.pc .examples-list table td:first-child {
|
||||
padding: 12px 8px 12px 15px;
|
||||
}
|
||||
|
||||
.pc .example-scroller-label {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
border: 1px solid var(--color-controls-button-border);
|
||||
border-bottom-style: none;
|
||||
color: var(--color-controls-button-text);
|
||||
border-radius: 4px 4px 0 0;
|
||||
padding: 2px 15px;
|
||||
}
|
||||
|
||||
button, .button {
|
||||
/* background-color: whitesmoke; */
|
||||
color: var(--color-controls-button-text);
|
||||
border-color: var(--color-controls-button-border);
|
||||
}
|
||||
button:hover, .button:hover{
|
||||
color: var(--color-controls-button-text-hover);
|
||||
}
|
||||
|
||||
.button-group {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
.button-group > * {
|
||||
border-radius: 0;
|
||||
}
|
||||
.button-group :first-child {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
.button-group :last-child {
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
/* HELPERS */
|
||||
.text-center {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user