From f4ad57b5447f55a850b6e2e48e0482f0b82d5ba1 Mon Sep 17 00:00:00 2001 From: Christian Klein Date: Sun, 9 May 2021 15:36:48 +0200 Subject: [PATCH] Updated styling --- out/css/colors-dark.css | 7 + out/css/colors-light.css | 7 + out/css/loader.css | 310 +++++++++++++++++++++++++++++++++++++++ out/css/pc.css | 127 +++++++++++----- out/css/roller.css | 296 +++++++++++++++++++++++++++++++++++++ out/css/style.css | 81 ++++++++++ 6 files changed, 788 insertions(+), 40 deletions(-) create mode 100644 out/css/loader.css create mode 100644 out/css/roller.css diff --git a/out/css/colors-dark.css b/out/css/colors-dark.css index 6f0f2f8..9f0059f 100644 --- a/out/css/colors-dark.css +++ b/out/css/colors-dark.css @@ -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); } diff --git a/out/css/colors-light.css b/out/css/colors-light.css index 98e35d2..955886c 100644 --- a/out/css/colors-light.css +++ b/out/css/colors-light.css @@ -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); } diff --git a/out/css/loader.css b/out/css/loader.css new file mode 100644 index 0000000..b3a8f48 --- /dev/null +++ b/out/css/loader.css @@ -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; +} \ No newline at end of file diff --git a/out/css/pc.css b/out/css/pc.css index ee230d8..f6964c9 100644 --- a/out/css/pc.css +++ b/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){ diff --git a/out/css/roller.css b/out/css/roller.css new file mode 100644 index 0000000..de401a9 --- /dev/null +++ b/out/css/roller.css @@ -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)} */ +} \ No newline at end of file diff --git a/out/css/style.css b/out/css/style.css index dcc6b17..558425c 100644 --- a/out/css/style.css +++ b/out/css/style.css @@ -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 {