From b1ec23e3579b1528e6e7eb12f5c9f89793b5390e Mon Sep 17 00:00:00 2001 From: alyx Date: Tue, 31 May 2022 15:15:17 +0000 Subject: moved some stuff around, updated circuitsv2.json, linked the grapher from the searcher --- chips.css | 218 -------------------------------------------------------------- 1 file changed, 218 deletions(-) delete mode 100644 chips.css (limited to 'chips.css') diff --git a/chips.css b/chips.css deleted file mode 100644 index 12a3704..0000000 --- a/chips.css +++ /dev/null @@ -1,218 +0,0 @@ -/* -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
. 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: - -
-
If
-
-
-
Condition
-
-
-
Then
-
Else
-
-
- -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 -- cgit v1.2.3-54-g00ecf