datagraph/static/less/main.less

:root {
  --textsize: 12pt;
  --section-color: #73a44d;
  --je-color: #73a44d;
  --border-radius: 5px;
}

html {
	box-sizing: border-box;
	margin: 0px;
	padding: 0px;


	font-family: "Roboto", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-size: var(--textsize);
}

body {
	margin: 0px;
	padding: 0px;
	background-color: #444 !important;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

*:focus {
	outline: none;
}

[onClick] {
	cursor: pointer;
}

button {
	padding: 4px 8px;
}

.page {
	display: none;

	&.show {
		display: block;
	}
}

.section {
	background-color: #fff;
	padding: 32px;
	border-radius: 8px;
}

#layout {
	display: grid;
	grid-template-areas:
	     "menu       menu"
	     "navigation details"
	;
	grid-template-columns: min-content 1fr;
	grid-gap: 32px;
	padding: 32px;
}

#menu {
	grid-area: menu;
	grid-template-columns: repeat(100, min-content);
	grid-gap: 16px;
	align-items: center;

	&.page {
		display: grid;
		padding: 16px 32px;
	}

	.item {
		cursor: pointer;

		&.selected {
			font-weight: bold;
		}
	}
}

#logo {
	img {
		height: 96px;
		margin-right: 32px;
	}
}


#nodes {
	grid-area: navigation;
	width: min-content;
}

#editor-node {
	grid-area: details;
	grid-gap: 16px;
	grid-template-rows:
		min-content
		1fr
		min-content
		;

	&.show {
		display: grid;
	}

	& > div.ops {
		display: grid;
		grid-template-columns: min-content 1fr repeat(4, min-content);
		align-items: center;
		grid-gap: 8px;

		#editor-node-name {
			font-weight: bold;
		}

		img {
			display: block;
			height: 32px;

			&.highlight {
				filter: invert(.7) sepia(.5) hue-rotate(50deg) saturate(300%) brightness(0.85);
			}
		}
	}
}

#types {
	grid-area: navigation;

	.group {
		font-weight: bold;
		white-space: nowrap;
		margin-top: 32px;
		margin-bottom: 8px;

		&:first-child {
			margin-top: 0px;
		}
	}

	.type {
		display: grid;
		grid-template-columns: min-content 1fr;
		grid-gap: 8px;
		align-items: center;
		cursor: pointer;
		margin-bottom: 8px;

		.img {
			img {
				height: 24px;
				display: inline;
			}
		}

		.title {
			white-space: nowrap;
			line-height: 24px;
		}
	}
}

#editor-type-schema {
	grid-area: details;
}

.node {
	display: grid;
	grid-template-columns: min-content min-content 100%;
	white-space: nowrap;
	user-select: none;

	img {
		height: 24px;
	}

	&.selected {
		& > .name {
			font-weight: bold;
		}
	}
	
	&.marked {
		& > .name {
			color: #a00;
		}
	}

	&.expanded  {
		&>.children {
			display: block;
		}
	}

	.expand-status {
		padding-left: 8px;
		padding-right: 8px;

		&.leaf {
			width: 40px;
			img {
				display: none;
			}
		}

		img {
			cursor: pointer;
		}
	}

	.type-icon {
		padding-right: 4px;

		img {
			filter: invert(.7) sepia(.5) hue-rotate(50deg) saturate(300%) brightness(0.85);
		}
	}

	.name {
		margin-bottom: 8px;
		line-height: 24px;
		cursor: pointer;
	}

	.children {
		display: none;
		grid-column: 1 / -1;
		border-left: 1px solid #ccc;
		padding-left: 12px;
		margin-left: 19px;
	}
}

select {
	font-size: 1em;
	border: 1px solid #bcc3ce;
	background: #fff;
	color: #444;
	padding: 4px;

	optgroup {
		color: #a22;
	}

}


datalist {
	div:before {
		display: block;
		content: 'group';
		font-weight: bold;
	}
}

dialog#create-type {
	min-width: 400px;

	& > div {
		display: grid;
		grid-gap: 8px;
	}
}

dialog::backdrop {
	background-color: rgba(0, 0, 0, 0.75);
}

select:focus {
	outline: 2px solid #888;
	outline-offset: -2px;
}

#connected-nodes {
	& > .label {
		color: var(--section-color);
		font-weight: bold;
		font-size: 1.25em;
		margin-bottom: 8px;
	}

	& > .add {
		margin-bottom: 8px;

		img {
			height: 24px;
		}
	}

	.connected-nodes {
		display: flex;
		align-items: start;
		flex-flow: row wrap;
		gap: 32px;

		.type-group {
			display: grid;
			grid-template-columns: 24px 1fr;
			grid-gap: 8px;
			align-items: center;

			.type-name {
				font-weight: bold;
				grid-column: 1 / -1;
			}

			.type-icon, .node-name {
				cursor: pointer;
			}
		}
	}

	.type-icon {
		img {
			display: block;
			height: 24px;
		}
	}
}

#select-node {
	padding: 32px;
	display: grid;
	grid-template-columns: min-content;
	grid-gap: 8px;
	justify-items: start;

	& > * {
		min-width: 300px;
		width: 100%;
	}

	button {
		width: 100px !important;
	}

	.more-exist {
		color: #a44;
	}

	.search-results {
		.node-table {
			display: flex;
			align-items: start;
			gap: 32px;

			.group {
				margin-top: 16px;
				.label {
					font-weight: bold;
					color: var(--section-color);
					margin-bottom: 8px;
					white-space: nowrap;
				}

				.children {
					display: grid;
					grid-template-columns: min-content 1fr;
					grid-gap: 8px;

					.node {
						cursor: pointer;
					}

					img {
						cursor: pointer;
						height: 24px;
					}
				}
			}
		}
	}
}

dialog#connection-data {
	padding: 24px;

	.label {
		font-size: 1.25em;
		font-weight: bold;
		color: var(--section-color);
	}

	img {
		height: 32px;
	}

	textarea {
		margin-top: 16px;
		width: 300px;
		height: 200px;
	}

	div.button {
		text-align: center;
		margin-top: 8px;
	}
}

#editor-type-schema {
	.label {
		font-size: 1.25em;
		font-weight: bold;
		color: var(--section-color);
	}

	textarea {
		font-family: monospace;
		font-size: 0.85em;
		margin-top: 16px;
		width: 100%;
		height: calc(100% - 96px);
		min-height: calc(100vh - 380px);
	}

	img {
		height: 32px;

		&.saving {
			filter: invert(.7) sepia(.5) hue-rotate(0deg) saturate(600%) brightness(0.75);
		}
	}
}

@keyframes example {
	  0% { opacity: 0%   }
	 50% { opacity: 0%   }
	100% { opacity: 100% }
}

.tooltip {
	position: relative;

	&.left::after {
		right: 0px;
	}

	&.right::after {
		left: 0px;
	}

	&:hover::after {
		animation-name: example;
		animation-duration: 1s;

		white-space: nowrap;
		background-color: var(--section-color);
		box-shadow: 5px 5px 21px -4px rgba(0,0,0,0.75);

		position: absolute;
		top: 48px;
		content: attr(data-tooltip);
		display: block;
		padding: 8px 16px;
		border-radius: 4px;
		color: #fff;
		z-index: 8192;
	}
}