aboutsummaryrefslogtreecommitdiffstats
path: root/chips.css
diff options
context:
space:
mode:
authoralyx <alyx@aleteoryx.me>2022-05-31 15:15:17 +0000
committerAleteoryx <alyx@aleteoryx.me>2022-05-31 15:15:17 +0000
commitb1ec23e3579b1528e6e7eb12f5c9f89793b5390e (patch)
tree56f714ba893ec54a27937cae912006dd5b369204 /chips.css
parent68dff8c1685c25bb829cbc5d2a396cd96ab35708 (diff)
downloadRRCUtils-b1ec23e3579b1528e6e7eb12f5c9f89793b5390e.tar.gz
RRCUtils-b1ec23e3579b1528e6e7eb12f5c9f89793b5390e.tar.bz2
RRCUtils-b1ec23e3579b1528e6e7eb12f5c9f89793b5390e.zip
moved some stuff around, updated circuitsv2.json, linked the grapher from the searcher
Diffstat (limited to 'chips.css')
-rw-r--r--chips.css218
1 files changed, 0 insertions, 218 deletions
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 <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