crtr/Http/SkinEditor/app.css

body {
	text-size-adjust: none;
	margin: 0;
	font-family: sans-serif;
	font-size: 16px;
}

#app {
	width: 100vw;
	height: 100vh;
}

#toolbar {
	height: 32px;
	display: flex;
}

.tgbtn {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.tgbtn:hover {
	background-color: lightgray;
}

.tgbtn-active, .tgbtn-active:hover {
	background-color: lightblue;
}

#toolbar .tgbtn {
	min-width: 64px;
	height: 100%;
	padding: 0 8px;
	border-right: solid 1px gray;
}

#treeview {
	position: absolute;
	top: 32px;
	width: 100%;
	height: calc(100% - 32px);
	overflow: auto;
}

.t-list-container {
	position: absolute;
	overflow: auto;
	background-color: floralwhite;
	box-sizing: border-box;
	border: solid 1px gray;
	border-radius: 4px;
}

.t-list-composed {
	max-width: 100vw;
	max-height: 100vh;
}

.t-list {
	padding: 2px;
	margin: 0;
	list-style: none;
}

.t-li {
	padding: 0 4px;
	margin: 1px;
	cursor: pointer;
	break-before: avoid;
}

	.t-li:hover {
		background-color: lightblue;
	}

.t-li-cat {
	padding: 0 4px;
	margin: 1px;
	border-bottom: solid 1px dimgray;
	color: dimgray;
	font-size: small;
}

.t-li-cat-2 {
	border-bottom-style: dashed;
	font-size: x-small;
}

input {
	border: none;
	font-family: sans-serif;
	font-size: 16px;
}

.t-node {
	padding: 1px 4px;
	margin: 4px 0;
}

.t-node, .t-node-sup {
	transition: 0.25s;
}

	.t-node.t-inline {
		padding: 0 2px;
		margin: 4px 2px;
	}

.t-internal {
	display: none;
}

.t-literal {
	margin: 0;
	padding: 0;
}

.btn {
	width: 16px;
	height: 0px;
	font-size: small;
	text-align: center;
	vertical-align: middle;
	overflow: hidden;
	cursor: pointer;
	transition: 0.25s;
	display: block;
}

.btn.t-inline {
	display: inline-block;
	width: 0;
	height: 16px;
	margin: 0 2px;
}

.t-node:hover > .btn {
	transition: 0.25s;
	height: 16px;
}

.t-node:hover > .btn.t-inline {
	width: 16px;
}

.btn-add {
	border: solid 1px green;
}

.btn-add:only-child {
	height: 16px;
}

.btn-add.t-inline:only-child {
	width: 16px;
}

.mode-hide-add .btn-add {
	display: none;
}

.btn-delete {
	border: solid 1px red;
}

.mode-hide-delete .btn-delete {
	display: none;
}

.t-block {
	border-left: solid 1px darkcyan;
}

.t-exp {
	border-top: solid 1px gray;
	vertical-align: top;
}

	.t-exp.t-inline {
		margin: 0 2px;
		padding: 2px 1px;
	}
	
	.t-exp .t-inline {
		margin: 0 0 2px 0;
	}
	
	.mode-hide-delete .t-exp .t-inline {
		margin-bottom: 0;
	}
	
	.mode-hide-delete .t-exp.t-inline {
		padding-bottom: 0;
	}
	
	.t-exp > .t-statement {
		margin: 0;
		border-left: solid 1px orangered;
		padding: 0 2px;
	}
	
	.t-exp:hover {
		border-top: solid 3px gray;
	}
	
	.t-exp > .btn-add:not(:only-child) {
		display: none;
	}

.t-input {
	display: inline-block;
	border: solid 1px magenta;
}

.t-statement {
	border-left: solid 1px orange;
}

	.t-statement.t-inline {
		border: solid 1px orange;
	}

.t-node:hover {
	transition: 0.25s;
	border-left-width: 3px;
}

.t-inline {
	display: inline-block;
}

.t-internal {
	background-color: lightgray;
}

/* Debug Mode */
.mode-debug .t-internal {
	display: block;
	opacity: 0.6;
}

/* Sort Mode */
.mode-sort .t-internal {
	display: block;
	opacity: 1;
}

.mode-sort input {
	cursor: grab;
}

.mode-sort .t-node {
	border-color: lightgray;
}

.mode-sort .t-statement {
	cursor: grab;
	padding-left: 10px;
	border-color: orange;
	border-left-width: 2px;
}

	.mode-sort .t-statement:hover {
		border-color: yellow;
		border-left-width: 5px;
	}

	.mode-sort .t-statement.t-inline,
	.mode-sort .t-exp > .t-statement {
		border-color: lightgray;
	}

.mode-sort .btn {
	display: none;
}

.mode-sort.state-grabbing .t-node {
	cursor: grabbing;
}

.mode-sort.state-grabbing input {
	cursor: grabbing;
}

.mode-sort.state-grabbing .t-grabbing {
	background-color: lightgreen;
	border-left-color: green;
}

.grab-ptr {
	margin: 0;
	border: solid 1px green;
}

@media (prefers-color-scheme: dark) {
	body {
		background-color: black;
		color: white;
	}
	.t-list-container {
		background-color: darkslategray;
	}
	.t-li:hover {
		background-color: darkblue;
	}
	.t-li-cat {
		border-bottom-color: lightgray;
		color: lightgray;
	}
	input {
		background-color: black;
		color: white;
	}
	.tgbtn:hover {
		background-color: gray;
	}
	.tgbtn-active, .tgbtn-active:hover {
		background-color: darkslateblue;
	}
	.t-internal {
		background-color: dimgray;
	}
	.btn-add {
		border-color: lime;
	}
	.t-block {
		border-color: cyan;
	}
	.mode-sort.state-grabbing .t-grabbing {
		background-color: green;
		border-left-color: lightgreen;
	}
	.grab-ptr {
		border: solid 1px lightgreen;
	}
}