styles.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --vertical-bar: 60%;
  --background-color: #8686868c;
  --lightgrey-0: #ced4da;
  /* old yellow - #f4e6d0 */
  --construction-paper: #fff4e6;
  --construction-paper-transparent: #fff4e5e3;
}

html,
body {
	font-family: system-ui;
	font-size: 12pt;
	margin: 0px;
	overscroll-behavior: none; /*this stops the back swipe*/
	overflow: hidden;
}

input {
	font-size: 11pt;
}

.no-select {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

/* ///////////////////////////////////////////////////// */
/* GENERAL SET-UP */
/* ///////////////////////////////////////////////////// */

/*
#root {
  display: grid;
  width: 100vw;
  height: 100vh;
  grid-template:
 	  "top-menu top-menu" 30px
    "editor view" 1fr
    / var(--vertical-bar) 1fr;
}
*/

#root {
  display: flex;
  width: 100vw;
  height: 100vh;
  flex-direction: column;
  position: fixed;
}

.content {
	display: flex;
	width: 100%;
	flex: 1;
	overflow: hidden;
}

.left-side {
	width: calc(var(--vertical-bar) - 5px);
	display: flex;
  flex-direction: column;
}

.right-side {
    flex: 1;
    height: 100%;
    position: relative;
}

/*codemirror-2 {
	background: var(--construction-paper);
  flex: 1;
  overflow: hidden;
}*/

.code-editor {
	background: var(--construction-paper);
  flex: 1;
  overflow: hidden;
}

.cm-editor {
	height: 100%;
}

.cm-path-button {
	background: #c0fdc0d1;
	padding-left: 3px;
	padding-right: 3px;
	border-radius: 5px;
}

.cm-path-button:hover {
	cursor: pointer;
	background: #2ef72ecf;
}

.error-log {
	background: #c92a2a;
  color: #ffffff;
  min-height: 80px;
  padding: 5px;
  box-sizing: border-box;
  overflow-y: auto;
}

.modal-error {
	color: red;
	padding: 10px;
	border: 1px solid red;
	margin-top: 10px;
	margin-bottom: 5px;
	display: inline-block;
}

.footprint-toolbox {
	width: 300px;
	height: 100%;
	max-height: 100%;
	background: var(--construction-paper-transparent);
	position: absolute;
	right: 0px;
	top: 0px;
	padding: 5px 0px 5px 5px;
	display: flex;
	flex-direction: column;
	transition: right 0.5s ease;
	box-sizing: border-box;
	border-left: solid 1px black;
	border-bottom: solid 1px black;
}

.footprint-toolbox-closed {
	right: -300px;
}

.logo {
	margin-right: -10px;
	width: 40px; 
	padding: 5px;
	padding-right: 15px;
}

.footprint-item {
	display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
}

.footprint-item-icon {
	width: 20px;
	height: 20px;
	border-radius: 50px;
	border: 5px grey solid;
	box-sizing: border-box;
	margin: 5px;
}

.footprint-item-icon:hover {
	background: #fab005;
}

.top-menu {
	grid-area: top-menu;
	display: flex;
	place-items: center;
	width: 100%;
	height: max-content;
	max-height: max-content;
	min-height: max-content;
	background: var(--lightgrey-0);
	box-shadow: #979090 0px 1px 2px;
  z-index: 10000;
}

.top-menu > .left > .menu-item {
	padding-top: 7px;
	padding-bottom: 7px;
	box-sizing: border-box;
	height: 100%;
}

.left {
  margin-left: 10px;
  height: 100%;
  display: flex;
  align-items: center;
}

.right {
	margin-left: auto;
	margin-right: 20px;
	height: 100%;
  display: grid;
  place-content: center;
}

.separator {
	margin: 5px;
}

.menu-item {
	cursor: pointer;
	padding: 3px;
	padding-left: 5px;
	padding-right: 5px;
	display: flex;
	align-items: center;
}

.menu-item:hover {
	background: black;
	color: white;
}

.dropdown-container {
	position: relative;
	cursor: pointer;
	z-index: 100;
}

.dropdown-content {
	color: black;
	visibility: hidden;
	display: flex;
	flex-direction: column;
	position: absolute;
	z-index: 10;
	left: 0px;
	top: 100%;
	background: var(--lightgrey-0);
	width: max-content;
	min-width: 100%;
	border-top: 5px solid var(--lightgrey-0);
	max-height: 50vh;
	overflow: scroll;
	box-sizing: border-box;
}

.dropdown-content-right {
	left: revert;
	right: 0px;
}


.dropdown-container:hover .dropdown-content {
	visibility: visible;
}

.check-item, .input-item {
	padding: 3px;
  padding-left: 5px;
  padding-right: 5px;
}

/*
.import-item:hover {
	background: blue;
	color: white;
}
*/
.canvas-container {
	display: grid;
	place-items: center;
	overflow: scroll;
	width: 100%;
	height: 100%;
}

#gl-canvas {
	border: 2px solid black
}

#vertical-bar {
  position: absolute;
  left: calc( var(--vertical-bar) - 5px);
  background: black;
  width: 10px;
  height: 100%;
  z-index: 10;
}

#vertical-bar:hover {
  cursor: col-resize;
  background: var(--lightgrey-0);
}

.CodeMirror {
	height: 100% !important;
	background: #f4e6d0 !important; /* #ebd5b3 */
	z-index: 0;
}

.ͼd {
  border: solid 1px rgb(0, 0, 0, 0);
}

.ͼd:hover {
  background: #e4e0e0;
  border: solid 1px grey;
  box-sizing: border-box;
  cursor: col-resize;
}

.selectBox {
  fill: blue;
  opacity: .2;
}

/*.menu {
  position: absolute;
}*/

/*.console {
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
	height: 0px;
	box-sizing: border-box;
	z-index: 10;
}

.console-show {
	background: lightgreen;
	height: 80px;
	padding: 10px;
}

.console-erred {
	background: #d83030c4;
}*/

.translate-handle {
    opacity: 0.6;
}

.translate-handle:hover {
	filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(2476%) hue-rotate(330deg);
}

.draggable-pt {
	opacity: 0.6;
	fill: red;
	z-index: 100;
}

.draggable-pt:hover {
	fill: orange;
}

.path-selected {
	position: absolute;
  left: 15px;
  bottom: 10px;
  padding: 5px;
  border-radius: 10px;
  background: floralwhite;
}

.clear-selected-path {
	padding: 3px;
	margin: 3px;
	border-radius: 5px;
	border: 1px solid black;
	background: #efe4e4;
	cursor: pointer;
  transition: all .1s ease-in-out; 
  color: red;
}

.clear-selected-path:hover {
	transform: scale(1.02);
}

.github-logo {
	color: inherit;
	position: absolute;
  right: 10px;
}

.github-logo:hover {
	cursor: pointer;
	opacity: .8;
}


/* ---------------- */

.layer-item {
	display: flex;
	align-items: center;
  justify-content: space-between;
  height: 25px;
}

.layer-name {
	width: 175px;
}

/* ---------------------------- */

.component-menu {
	position: absolute;
	background: var(--lightgrey-0);
	width: clamp(600px, 70%, 800px);
	max-width: 80%;
	height: 60%;
	left: 50%;
	top: 100px;
	transform: translate(-50%, 0);
	display: flex;
	flex-direction: column;
	padding: 10px;
	z-index: 99999;
	border-radius: 5px;
	border: black 1px solid;
}

.component-menu .search-container {
	width: 100%;
	justify-content: center;
	display: flex;
	padding: 5px;
}

.component-menu .search-container input {
	width: 80%;
	padding: 3px;
}

.component-menu .file-menu {
	overflow: scroll;
}

.component-menu .header {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.component-menu .close {
	color: #f03e3e;
	cursor: pointer;
	padding: 10px;
}

.component-menu .sub-header {
	font-size: .8rem;
}

.component-menu .close:hover {
	transform: scale(1.1);
}

/* -------------- */

.component-list {
	padding-top: 5px;
	padding-bottom: 5px;
}

.import-button-container {
	display: flex;
	align-items: center;
  justify-content: center;
}

.import-button {
	cursor: pointer;
  width: 80%;
  background: #ced4da;
  padding: 4px;
  text-align: center;
  border-radius: 5px;
/*  transition: transform .2s ease-in-out;*/
	border: transparent solid 1px;
}


.import-button:hover {
	border: black solid 1px;
/*	transform: scale(1.02);*/
}

/* ------------------ */

.nub {
	width: 20px;
	height: 50px;
	background: var(--construction-paper);
	border: black solid;
	border-width: 1px 0px 1px 1px;
	border-radius: 10px 0px 0px 10px;
	position: absolute;
	top: 50%;
	left: 0px;
	transform: translate(-100%, -50%);
}

.nub:hover {
	background: #f0e5d7;
	cursor: pointer;
}

/* ------------------ */

.range-input {
	display: flex;
}


.toolbox-title {
	padding: 5px 0px 5px 5px;
	font-weight: bold;
}

.toolbox-title:hover {
	cursor: pointer;
}

/* ------------------ */

.drop-modal {
  position: absolute;
  left: 0px;
  top: 0px;
  border: 3px dashed black;
  background: #8bf6dfd9;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  z-index: 9999999999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.drop-info {
	font-size: 1.4em;
  text-align: center;
}

.toolbox-title::after {
	content: "▼";
  padding-left: 5px;
  vertical-align: middle;
}

.inner-hidden::after {
	content: "▶";
  padding-left: 5px;
  vertical-align: middle;
}

.hidden {
	display: none;
}

.modal {
	background-color: rgba(0, 0, 0, 0.5);
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 999999;
	text-align: center;
	overflow: auto;
}

.modal, 
.modal h3,
.modal h4 {
	font-size: 12;
}

.modal h4 {
	margin: 15px 0 7px 0;
}

.modal h4:first-of-type {
	margin-top: 0;
}

.modal h4:last-of-type {
	margin-bottom: 0;
}

.modal input {
	margin: 0;
	vertical-align: top;
	line-height: 1;
}

.modal input[type="text"] {
	background-color: #fafafa;
	font-size: 12px;
	border-color: #121212;
	border-collapse: collapse;
	border-style: solid;
	border-width: 1px;
	padding: 3px;
}

.modal input[type="text"]:focus {	
	outline: none;
}

.modal-content {
	display: inline-block;
	background-color: #fafafa;
	padding: 3px;
	width: 50%;
	position:fixed;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.modal-header {
	display: flex;
	align-items: left;
	border-bottom: 1px solid #ddd;
	background-color: blue;
	color: #fafafa;
	padding: 5px;
}

.modal-header .icon {
	font-size: 20px;
	vertical-align: top;
}

.modal-body {
	text-align: left;
	font-size: 12px;
	padding: 10px;
}

.modal-footer {
	text-align: right;
	border-top: 1px solid #ddd;
	padding: 10px;
}

.modal-title {
	margin: 0;
	padding: 0;
	text-align: left;
	font-size: 12px;
	line-height: 20px;
	margin-left: 5px;
	display: inline-block;
}

.modal-line {
	margin: 7px 0 7px 0;
}

.btn {
	height: 30px;
	padding: 7px;
	border: none;
	background-color: #cccccc;
	display: inline-block;
	line-height: 1;
	font-size: 12px;
	color: #121212;
}

.btn:hover, 
.btn:focus {
	background-color: #ababab;
	cursor: pointer;
}

.btn-primary {
	background-color: blue;
	color: #fafafa;
}

.btn-primary:hover,
.btn-primary:focus {
	background-color: navy;
	color: #fafafa;
}

.close {
	color: #fafafa;
	position: relative;
	right: 0;
	font-size: 20px;
	font-weight: bold;
	line-height: 0;
}
  
.close:hover,
.close:focus {
	color: #ababab;
	text-decoration: none;
	cursor: pointer;
}

/* Grid */

.col-25,
.col-33,
.col-50,
.col-75 {
	display: inline-block;
	vertical-align: top;
}

.col-25 {
	width: 25%;
}

.col-33 {
	width: 33.3%;
}

.col-50 {
	width: 49%;
}

.col-75 {
	width: 75%;
}

/* Utility */

.align-left {
	text-align: left;
}

.align-right {
	text-align: right;
}


/* selectable paths */
.selectable-path {
	stroke: #00000000;
}

.selectable-path:hover {
	stroke-width: 10;
	stroke: #fdc81d;
}


/* -------- */

.layer-grabber {
	cursor: grab;
}

.code-highlight {
	background-color: yellow;
}