path: root/chips.css

/*
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;
}