diff options
Diffstat (limited to 'lib/chips.css')
| -rw-r--r-- | lib/chips.css | 218 |
1 files changed, 218 insertions, 0 deletions
diff --git a/lib/chips.css b/lib/chips.css new file mode 100644 index 0000000..12a3704 --- /dev/null +++ b/lib/chips.css @@ -0,0 +1,218 @@ +/* +Hello! This is a big fat CSS file for rendering CV2 chips, maintained +by Aleteoryx. If you need help, ask around for me in the #circuits-v2 +discord channel, or just ping me if you want. (Not too much!) + +To render a chip, create a .chip <div>. Inside it, put +.chipheader, .input, and .output divs. In the header, simply put +your chip's name. Then, in the input and output divs, add divs +with your chip's ports and types. +.bool, .int, .float, .string, .exec, and .special are all supported. + +A finished chip should look something like this: + +<div class="chip"> + <div class="chipheader">If</div> + <div class="input"> + <div class="exec"></div> + <div class="bool">Condition</div> + </div> + <div class="output"> + <div class="exec">Then</div> + <div class="Exec">Else</div> + </div> +</div> + +Currently, only regular chips are supported, though this will change +soon! +*/ +@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); + +@media (orientation: portrait) { + body { + --chip-scale: 6vw; + } +} +@media (orientation: landscape) { + body { + --chip-scale: 2rem; + } +} + +body { + /*chip bit colors*/ + --color-top: hsl(300,1%,32%); + --color-bottom: hsl(300,0%,50%); + + /*port colors*/ + --color-float: hsl(215, 80%, 48%); + --color-int: hsl(133,73%,23%); + --color-exec: hsl(18,92%,53%); + --color-string: hsl(290,33%,39%); + --color-bool: hsl(349,82%,55%); + --color-any: hsl(26,44%,94%); + --color-special: hsl(47,91%,54%); + + + --chipOffsetX: 0; + --chipOffsetY: 0; +} + +/*apply colors to classes*/ +.input > .float::before, .output > .float::after { + background-color: var(--color-float); +} +.input > .int::before, .output > .int::after { + background-color: var(--color-int); +} +.input > .exec::before, .output > .exec::after { + background-color: var(--color-exec); +} +.input > .string::before, .output > .string::after { + background-color: var(--color-string); +} +.input > .bool::before, .output > .bool::after { + background-color: var(--color-bool); +} +.input > .any::before, .output > .any::after { + background-color: var(--color-any); +} +.input > .special::before, .output > .special::after { + background-color: var(--color-special); +} + +.chip { + font-size: calc(var(--chip-scale) * .5); + font-family: 'Roboto', sans-serif; + color: white; + background-color: var(--color-bottom); + + position: relative; + display: inline-grid; + overflow: visible; + + grid-template-areas: "header header" "input output"; + + grid-gap: calc(var(--chip-scale) * .5); + margin: calc(var(--chip-scale) * 0.8); + padding: calc(var(--chip-scale) / 3); + border-radius: calc(var(--chip-scale) / 4); + min-width: 0; +} + +.input, .output { + display: inline-block; + margin-right: calc(var(--chip-scale) / 3); + margin-top: calc(var(--chip-scale) / -2); + margin-bottom: calc(var(--chip-scale) / -5); +} + +.chipheader { + margin: calc(var(--chip-scale) / -3); + margin-bottom: 0; + + padding: calc(var(--chip-scale) / 2); + text-align: center; + background-color: var(--color-top); + + border-top-left-radius: calc(var(--chip-scale) / 4); + border-top-right-radius: calc(var(--chip-scale) / 4); + + grid-area: header; + + font-size: calc(var(--chip-scale) * 0.75); + + -ms-high-contrast: white-on-black; +} + +.input { + grid-area: input; +} + +.output { + grid-area: output; + text-align: right; +} + +.type { + color: #fff0; + background-color: #0000; + position: fixed; + padding: calc(var(--chip-scale) * 0.1); + border: 0 solid #aaa0; + top: 0; + left: 0; + white-space: nowrap; +} + +:is(.exec, .float, .int, .bool, .string, .special, .any):hover + .type { + color: #fff; + background-color: #000; + border: calc(var(--chip-scale) * 0.1) solid #aaa; + z-index: 99; + top: calc(var(--mouse-y) + 10px - (var(--chipOffsetY) * 1px)); + left: calc(var(--mouse-x) + 10px - (var(--chipOffsetX) * 1px)); +} + +.input > .exec::before, +.output > .exec::after { + height: calc(.75 * var(--chip-scale)); + width: calc(1 * var(--chip-scale)); + background-color: var(--color-exec); + + clip-path: polygon(0 0, 62.5% 0, 100% 50%, 62.5% 100%, 0 100%); + top: calc(var(--chip-scale) * -0.075); +} + +:is(.exec, .float, .int, .bool, .string, .special, .any) { + margin-top: calc(var(--chip-scale) * 0.3); + margin-bottom: calc(var(--chip-scale) * 0.3); + position: relative; + clip-path: none; + overflow: visible; +} + +.input > :is(.exec, .float, .int, .bool, .string, .special, .any) { + margin-left: calc(var(--chip-scale) * 0.5); +} +.output > :is(.exec, .float, .int, .bool, .string, .special, .any) { + margin-right: calc(var(--chip-scale) * -0.05); +} + +.input > :is(.exec, .float, .int, .bool, .string, .special, .any)::before, +.output > :is(.exec, .float, .int, .bool, .string, .special, .any)::after { + position: absolute; + content: ""; + overflow: visible; +} + +.input > :is(.float, .int, .bool, .string, .special, .any)::before { + left: calc(var(--chip-scale) * -1.1); +} +.output > :is(.float, .int, .bool, .string, .special, .any)::after { + right: calc(var(--chip-scale) * -0.9); +} + +.input > .exec::before { + left: calc(var(--chip-scale) * -1.2); +} +.output > .exec::after { + right: calc(var(--chip-scale) * -1.2); +} + +.input > .list::before, +.output > .list::after { + color: black; + content: "[ ]"; + font-size: calc(var(--chip-scale) * 0.3); + display: flex; + align-content: center; + justify-content: center; +} + +.input > :is(.float, .int, .bool, .string, .special, .any)::before, +.output > :is(.float, .int, .bool, .string, .special, .any)::after { + height: calc(.5 * var(--chip-scale)); + width: calc(0.625 * var(--chip-scale)); + top: 1px; +}
\ No newline at end of file |