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-text: var(--color-white);
|
||||||
--color-controls-button-border: var(--color-white);
|
--color-controls-button-border: var(--color-white);
|
||||||
--color-controls-button-text-hover: var(--color-white-light1);
|
--color-controls-button-text-hover: var(--color-white-light1);
|
||||||
|
--color-controls-scroller-label-text: var(--color-black);
|
||||||
|
|
||||||
--color-header: var(--color-grey);
|
--color-header: var(--color-grey);
|
||||||
--color-header-text: var(--color-white);
|
--color-header-text: var(--color-white);
|
||||||
@ -77,6 +78,7 @@
|
|||||||
--color-table-ram-select: transparent;
|
--color-table-ram-select: transparent;
|
||||||
--color-table-ram-select-text: inherit;
|
--color-table-ram-select-text: inherit;
|
||||||
--color-table-ram-select-border: var(--color-grey-light2);
|
--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: var(--color-cu-dark1);
|
||||||
--color-table-cu-head-text: var(--color-white);
|
--color-table-cu-head-text: var(--color-white);
|
||||||
@ -85,6 +87,7 @@
|
|||||||
--color-table-cu-select: transparent;
|
--color-table-cu-select: transparent;
|
||||||
--color-table-cu-select-text: inherit;
|
--color-table-cu-select-text: inherit;
|
||||||
--color-table-cu-select-border: var(--color-grey-light2);
|
--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: var(--color-arrow-main);
|
||||||
--color-arrow-text: var(--color-white);
|
--color-arrow-text: var(--color-white);
|
||||||
@ -97,6 +100,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-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-text: var(--color-black);
|
||||||
--color-controls-button-border: var(--color-black);
|
--color-controls-button-border: var(--color-black);
|
||||||
--color-controls-button-text-hover: var(--color-black-light1);
|
--color-controls-button-text-hover: var(--color-black-light1);
|
||||||
|
--color-controls-scroller-label-text: var(--color-white);
|
||||||
|
|
||||||
--color-header: var(--color-grey);
|
--color-header: var(--color-grey);
|
||||||
--color-header-text: var(--color-white);
|
--color-header-text: var(--color-white);
|
||||||
@ -76,6 +77,7 @@
|
|||||||
--color-table-ram-select: transparent;
|
--color-table-ram-select: transparent;
|
||||||
--color-table-ram-select-text: inherit;
|
--color-table-ram-select-text: inherit;
|
||||||
--color-table-ram-select-border: var(--color-grey-light2);
|
--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: var(--color-cu-dark1);
|
||||||
--color-table-cu-head-text: var(--color-white);
|
--color-table-cu-head-text: var(--color-white);
|
||||||
@ -84,6 +86,7 @@
|
|||||||
--color-table-cu-select: transparent;
|
--color-table-cu-select: transparent;
|
||||||
--color-table-cu-select-text: inherit;
|
--color-table-cu-select-text: inherit;
|
||||||
--color-table-cu-select-border: var(--color-grey-light2);
|
--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: var(--color-arrow-main);
|
||||||
--color-arrow-text: var(--color-white);
|
--color-arrow-text: var(--color-white);
|
||||||
@ -96,6 +99,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-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 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 {
|
.pc .controls .checker::before {
|
||||||
border: 1px solid var(--color-controls-button-border);
|
border: 1px solid var(--color-controls-button-border);
|
||||||
}
|
}
|
||||||
@ -119,7 +110,7 @@
|
|||||||
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
padding: 1em;
|
padding: 1em 0;
|
||||||
|
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: auto auto auto;
|
grid-template-columns: auto auto auto;
|
||||||
@ -170,9 +161,9 @@
|
|||||||
margin: 1em 0 0 0;
|
margin: 1em 0 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pc .scroller:last-child {
|
/*.pc .scroller:last-child {
|
||||||
margin-bottom: -1em;
|
margin-bottom: -1em;
|
||||||
}
|
}*/
|
||||||
|
|
||||||
.pc .scroller table {
|
.pc .scroller table {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@ -182,8 +173,9 @@
|
|||||||
position: sticky;
|
position: sticky;
|
||||||
top: -2px;
|
top: -2px;
|
||||||
left: 0;
|
left: 0;
|
||||||
height: 1em;
|
/*height: 1em;*/
|
||||||
padding: 1em;
|
/*padding: 1em;*/
|
||||||
|
font-size: .8em;
|
||||||
|
|
||||||
transition: 0.2s;
|
transition: 0.2s;
|
||||||
}
|
}
|
||||||
@ -192,21 +184,27 @@
|
|||||||
position: -webkit-sticky;
|
position: -webkit-sticky;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
width: min-content;
|
||||||
|
}
|
||||||
|
.pc .scroller table thead th:last-child {
|
||||||
|
width: max-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pc .scroller table thead.head.shrunk {
|
.pc .scroller table thead.head.shrunk {
|
||||||
height: .5rem;
|
/*height: .5rem;*/
|
||||||
font-size: .8em;
|
/*font-size: .8em;*/
|
||||||
}
|
}
|
||||||
|
|
||||||
.pc .scroller table thead.head th {
|
.pc .scroller table thead.head th {
|
||||||
padding: 12px 4px 12px 15px;
|
padding: .2em 3px;
|
||||||
transition: 0.2s;
|
transition: 0.2s;
|
||||||
|
text-align: center;
|
||||||
|
/*border: 1px solid black !important;*/
|
||||||
}
|
}
|
||||||
|
|
||||||
.pc .scroller table thead.head.shrunk th {
|
.pc .scroller table thead.head.shrunk th {
|
||||||
padding-top: .2em;
|
/*padding-top: .2em;
|
||||||
padding-bottom: .2em;
|
padding-bottom: .2em;*/
|
||||||
}
|
}
|
||||||
|
|
||||||
.pc .scroller table .num {
|
.pc .scroller table .num {
|
||||||
@ -214,15 +212,37 @@
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pc .scroller table td:first-child,
|
.pc .scroller table td {
|
||||||
.pc .scroller table td:last-child {
|
padding: 6px 3px;
|
||||||
padding: 12px 15px;
|
vertical-align: baseline;
|
||||||
|
/*border: 1px solid black !important;*/
|
||||||
}
|
}
|
||||||
|
|
||||||
.pc .scroller table tr.empty td {
|
.pc .scroller table tr td:first-child {
|
||||||
padding: 3px 15px;
|
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 {
|
.pc .scroller table tbody button:last-child {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
@ -233,10 +253,6 @@
|
|||||||
padding: 0px 10px;
|
padding: 0px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pc .scroller tr:first-child td{
|
|
||||||
padding-top: 1.5rem !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
th.address {
|
th.address {
|
||||||
width: 5rem;
|
width: 5rem;
|
||||||
padding-left: 8px;
|
padding-left: 8px;
|
||||||
@ -331,28 +347,29 @@ th.address {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.pc .ram table tr td:nth-child(2){
|
.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);
|
background-color: var(--color-table-ram-select);
|
||||||
color: var(--color-table-ram-select-text);
|
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 {
|
.pc .ram .ram-entry:last-child {
|
||||||
margin-right: 0 !important;
|
margin-right: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pc .ram .comment {
|
|
||||||
padding: 12px 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pc .ram .comment input{
|
.pc .ram .comment input{
|
||||||
border: none;
|
border: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: .8em;
|
font-size: .8em;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -384,7 +401,7 @@ th.address {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.pc .cu input[type=number] {
|
.pc .cu input[type=number] {
|
||||||
width: 12.5em;
|
width: 9.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pc .cu label {
|
.pc .cu label {
|
||||||
@ -401,10 +418,19 @@ th.address {
|
|||||||
border: 1px solid var(--color-table-cu-select-border);
|
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);
|
background-color: var(--color-table-cu-select);
|
||||||
color: var(--color-table-cu-select-text);
|
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,
|
.pc .cu button,
|
||||||
@ -417,6 +443,21 @@ th.address {
|
|||||||
background-color: transparent;
|
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 */
|
/* ALU */
|
||||||
.pc .alu input, .pc .alu .button, .pc .alu button{
|
.pc .alu input, .pc .alu .button, .pc .alu button{
|
||||||
color: var(--color-alu-text);
|
color: var(--color-alu-text);
|
||||||
@ -525,11 +566,11 @@ th.address {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.pc .arrow.up ~ .arrow.up {
|
.pc .arrow.up ~ .arrow.up {
|
||||||
left: 25%;
|
left: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pc .arrow.up ~ .arrow.up ~ .arrow.up {
|
.pc .arrow.up ~ .arrow.up ~ .arrow.up {
|
||||||
left: 50%;
|
left: 25%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pc .arrow.top {
|
.pc .arrow.top {
|
||||||
@ -642,6 +683,12 @@ th.address {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.input-group > *{
|
||||||
|
margin-right: 0.5em !important;
|
||||||
|
}
|
||||||
|
.input-group :last-child {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@media(max-width: 1000px){
|
@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 */
|
/* HELPERS */
|
||||||
.text-center {
|
.text-center {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user