datagraph/static/less/main.less

html {
	box-sizing: border-box;
	font-family: sans-serif;
	font-size: 14pt;
	margin: 0px;
	padding: 0px;
}

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

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

*:focus {
	outline: none;
}

[onClick] {
	cursor: pointer;
}

.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 min-content min-content;
		align-items: center;
		grid-gap: 8px;

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

#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;
		}
	}

	&.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;
}