index.css

@import './node_modules/audio-stats/index.css';
@import './node_modules/dialog-component/dialog.css';
@import './node_modules/overlay-component/overlay.css';
@import './node_modules/popoff/index.css';
@import './node_modules/codemirror/lib/codemirror.css';


[hidden] {
	visibility: hidden!important;
}
input {
	display: block;
}


/** Lab container */
.lab {
	position: relative;
	/*padding-top: 2rem;*/
	min-height: 30rem;
}



/** Appender button & dialog */
.lab-append {
	width: 3rem;
	height: 3rem;
	line-height: 3rem;
	font-weight: normal;
	color: white;
	text-align: center;
	background: black;
	border-radius: 1.5rem;
	margin-top: 1rem;
	margin-left: 1rem;
	font-size: 2.4rem;
	cursor: pointer;
}
.lab-append.lab-append-active {
	background: lightgray;
	color: darkgray;
}
.lab-appender {
	max-width: 50vw;
	display: flex;
	flex-flow: row wrap;
}
.lab-appender-item {
	position: relative;
	flex: 1 0 4rem;
	margin: .5rem;
	cursor: pointer;
	width: 4rem;
	height: 4rem;
	text-align: center;
	line-height: 3rem;
}
.lab-appender-item:after {
	content: attr(data-append-block-name);
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	line-height: 1rem;
	font-size: .8rem;
}
.lab-appender-item svg {
	display: inline-block;
	vertical-align: middle;
	max-width: 60%;
	max-height: 60%;
}


/** Deleter area */
.lab-deleter {
	cursor: pointer;
	position: absolute;
	bottom: 0;
	left: 50%;
	height: 4rem;
	line-height: 4rem;
	width: 4rem;
	margin-left: -2rem;
	border-radius: 2rem;
	color: white;
	text-align: center;
	font-size: 3.2rem;
	font-weight: bolder;
	display: none;
	opacity: .1;
}
.lab-deleter svg {
	width: 4rem;
	position: relative;
	z-index: 1;
}
.lab-deletable .lab-deleter {
	display: block;
}
.lab-deleter.droppable-active {
	opacity: 1;
}


/** Blocks */
.block {
	position: absolute;
	top: 0;
	left: 0;
	/*height: 4em;*/
}
.block-error:after {
	content: '';
	background: rgb(255,200,200);
	position: absolute;
	top: 0;
	left: 0;
	height: 3px;
	right: -30%;
	transform-origin: 0 0;
	transform: rotate(45deg);
}
.block:hover .block-thumbnail {
}
.block-thumbnail {
	z-index: 2;
	position: relative;
	cursor: default;
	width: 4rem;
	height: 4rem;
	text-align: center;
	line-height: 4rem;
}
.block-thumbnail svg {
	display: inline-block;
	vertical-align: middle;
	max-width: 60%;
	max-height: 60%;
}
.block-label {
	box-shadow: none;
	padding: 0;
	margin: 0;
	text-align: center;
	border: 0;
	display: block;
	width: 6rem;
	margin-left: -1rem;
	resize: none;
	background: none;
	max-height: 4rem;
	position: absolute;
}

.block-out, .block-in {
	position: absolute;
	top: 1rem;
	left: 2rem;
	width: 4rem;
	height: 2rem;
	transform-origin: 0 50%;
	z-index: 1;
	color: rgb(215, 220, 219);
	visibility: hidden;
}
.block-out:after, .block-in:after {
	content: '';
	position: absolute;
	right: 1rem;
	top: 0;
	border-left: 1rem solid;
	border-top: 1rem solid transparent;
	border-bottom: 1rem solid transparent;
	border-right: none;
}
.block-in {
	color: rgb(225,222,222);
	transform: rotate(180deg);
}
.block-in:after {
	border-right: 1rem solid;
	border-top: 1rem solid transparent;
	border-bottom: 1rem solid transparent;
	border-left: none;
}
.block-potential-target .block-in {
	visibility: visible;
}
.block-potential-source .block-out {
	visibility: visible;
}
.block-target .block-in {
	color: black;
}

.block-connecting .block-in {
	visibility: hidden;
}
.block-error-message {
	display: block;
	color: rgb(255,200,200);
}


/** Connections */
.connection {
	z-index: 0;
	position: absolute;
	min-width: 4rem;
	min-height: 2rem;
	transform-origin: 0 50%;
	color: rgb(216, 216, 216);
}
.connection:after {
	content: '';
	position: absolute;
	left: 2.2rem;
	right: 2.2rem;
	top: 50%;
	height: 0;
	margin-top: -1px;
	border: 1px solid;
}
.connection-start, .connection-end {
	position: absolute;
	z-index: 2;
	left: 2rem;
	top: 0rem;
	height: 0;
	width: 0;
	border-left: 1rem solid;
	border-top: 1rem solid transparent;
	border-bottom: 1rem solid transparent;
	border-right: none;
	color: transparent;
}
.connection-end {
	left: auto;
	right: 2rem;
	color: rgb(216, 216, 216);
}
.connection-connected:hover .connection-end {
}
.connection-hangling:after {
	right: 0;
}
.connection-hangling .connection-start {
	color: rgb(216, 216, 216);
}
.connection-available {
	color: black;
}
.connection-available .connection-start {
	color: black;
}
.connection-hangling .connection-end {
	visibility: hidden;
}



/** Specific blocks */
.block-code {
	display: block;
	tab-size: 4;
	width: 100%;
	margin: 0;
	padding: 0;
}
.block-input {
	width: 100%;
}
.block-analyser .audio-stats {
	position: absolute;
	top: 1rem;
	left: 1.5rem;
	bottom: 1rem;
	right: 2.5rem;
}

.poppy-close {
	z-index: 999;
}

.CodeMirror {
	height: auto;
}

canvas {
	outline: 1px solid lightgray;
	display: inline-block;
	margin-right: 5px;
}