From e642f1a4ac80e160bbccb61238e251f19d52e755 Mon Sep 17 00:00:00 2001
From: PopSlime <popslime@qq.com>
Date: Wed, 12 Oct 2022 23:28:56 +0800
Subject: [PATCH] Add dark mode for skin editor.

---
 Http/SkinEditor/app.css | 266 ++++++++++++++++++++++------------------
 1 file changed, 150 insertions(+), 116 deletions(-)

diff --git a/Http/SkinEditor/app.css b/Http/SkinEditor/app.css
index 756ae24..fc7fa1d 100644
--- a/Http/SkinEditor/app.css
+++ b/Http/SkinEditor/app.css
@@ -1,253 +1,287 @@
 body {
-    overflow: hidden;
-    margin: 0;
-    font-family: sans-serif;
-    font-size: 16px;
+	overflow: hidden;
+	margin: 0;
+	font-family: sans-serif;
+	font-size: 16px;
 }
 
 #app {
-    width: 100vw;
-    height: 100vh;
+	width: 100vw;
+	height: 100vh;
 }
 
 #toolbar {
-    height: 32px;
-    display: flex;
-    align-items: center;
+	height: 32px;
+	display: flex;
 }
 
 .tgbtn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
 }
 
 .tgbtn-active {
-    background-color: lightblue;
+	background-color: lightblue;
 }
 
 .tgbtn:hover {
-    background-color: lightgray;
+	background-color: lightgray;
 }
 
 #toolbar .tgbtn {
-    min-width: 64px;
-    height: 100%;
-    padding: 0 8px;
-    border-right: solid 1px gray;
+	min-width: 64px;
+	height: 100%;
+	padding: 0 8px;
+	border-right: solid 1px gray;
 }
 
 #treeview {
-    height: calc(100% - 32px);
+	height: calc(100% - 32px);
 }
 
 #tree {
-    overflow: auto;
-    height: calc(100% - 10px);
+	overflow: auto;
+	height: calc(100% - 10px);
 }
 
 .t-list {
-    position: absolute;
-    max-width: 100vw;
-    max-height: 100vh;
-    overflow: auto;
-    background-color: floralwhite;
-    border: solid 1px gray;
-    border-radius: 4px;
-    padding: 2px;
-    margin: 0;
+	position: absolute;
+	max-width: 100vw;
+	max-height: 100vh;
+	overflow: auto;
+	background-color: floralwhite;
+	border: solid 1px gray;
+	border-radius: 4px;
+	padding: 2px;
+	margin: 0;
 }
 
 .t-li {
-    list-style: none;
-    padding: 0 4px;
-    margin: 1px;
-    cursor: pointer;
+	list-style: none;
+	padding: 0 4px;
+	margin: 1px;
+	cursor: pointer;
 }
 
-.t-li:hover {
-    background-color: lightblue;
-}
+	.t-li:hover {
+		background-color: lightblue;
+	}
 
 input {
-    border: none;
-    font-family: sans-serif;
-    font-size: 16px;
+	border: none;
+	font-family: sans-serif;
+	font-size: 16px;
 }
 
 .t-node {
-    padding: 1px 4px;
-    margin: 4px 0;
+	padding: 1px 4px;
+	margin: 4px 0;
 }
 
 .t-node, .t-node-sup {
-    transition: 0.25s;
+	transition: 0.25s;
 }
 
-.t-node.t-inline {
-    padding: 0 2px;
-    margin: 4px 2px;
-}
+	.t-node.t-inline {
+		padding: 0 2px;
+		margin: 4px 2px;
+	}
 
 .t-internal {
-    display: none;
+	display: none;
 }
 
 .t-literal {
-    margin: 0;
-    padding: 0;
+	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;
+	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;
+	display: inline-block;
+	width: 0;
+	height: 16px;
+	margin: 0 2px;
 }
 
 .btn:only-child {
-    height: 16px;
+	height: 16px;
 }
 
 .btn.t-inline:only-child {
-    width: 16px;
+	width: 16px;
 }
 
 .t-statement > .btn {
 }
 
 .t-node:hover > .btn {
-    transition: 0.25s;
-    height: 16px;
+	transition: 0.25s;
+	height: 16px;
 }
 
 .t-node:hover > .btn.t-inline {
-    width: 16px;
+	width: 16px;
 }
 
 .btn-add {
-    border: solid 1px green;
+	border: solid 1px green;
 }
 
 .mode-hide-add .btn-add {
-    display: none;
+	display: none;
 }
 
 .btn-delete {
-    border: solid 1px red;
+	border: solid 1px red;
 }
 
 .mode-hide-delete .btn-delete {
-    display: none;
+	display: none;
 }
 
 .t-block {
-    border-left: solid 1px darkcyan;
+	border-left: solid 1px darkcyan;
 }
 
 .t-exp {
-    border-top: solid 1px gray;
+	border-top: solid 1px gray;
 }
 
-.t-exp.t-inline {
-    padding: 2px 4px;
-}
+	.t-exp.t-inline {
+		padding: 2px 4px;
+	}
 
-.t-exp:hover {
-    border-top: solid 3px gray;
-}
+	.t-exp:hover {
+		border-top: solid 3px gray;
+	}
 
 .t-input {
-    display: inline-block;
-    border: solid 1px magenta;
+	display: inline-block;
+	border: solid 1px magenta;
 }
 
 .t-statement {
-    border-left: solid 1px orange;
+	border-left: solid 1px orange;
 }
 
-.t-statement.t-inline {
-    border: solid 1px orange;
-}
+	.t-statement.t-inline {
+		border: solid 1px orange;
+	}
 
 .t-node:hover {
-    transition: 0.25s;
-    border-left-width: 3px;
+	transition: 0.25s;
+	border-left-width: 3px;
 }
 
 .t-inline {
-    display: inline-block;
+	display: inline-block;
+}
+
+.t-internal {
+	background-color: lightgray;
 }
 
 /* Debug Mode */
 .mode-debug .t-internal {
-    display: block;
-    background-color: lightgray;
-    opacity: 0.6;
+	display: block;
+	opacity: 0.6;
 }
 
 /* Sort Mode */
 .mode-sort .t-internal {
-    display: block;
-    background-color: lightgray;
-    opacity: 1;
+	display: block;
+	opacity: 1;
 }
 
 .mode-sort input {
-    cursor: grab;
+	cursor: grab;
 }
 
 .mode-sort .t-node {
-    border-color: lightgray;
+	border-color: lightgray;
 }
 
 .mode-sort .t-statement {
-    cursor: grab;
-    padding-left: 10px;
-    border-color: orange;
-    border-left-width: 2px;
+	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:hover {
+		border-color: yellow;
+		border-left-width: 5px;
+	}
 
-.mode-sort .t-statement.t-inline {
-    border-color: lightgray;
-}
+	.mode-sort .t-statement.t-inline {
+		border-color: lightgray;
+	}
 
 .mode-sort .btn {
-    display: none;
+	display: none;
 }
 
 .mode-sort.state-grabbing .t-node {
-    cursor: grabbing;
+	cursor: grabbing;
 }
 
 .mode-sort.state-grabbing input {
-    cursor: grabbing;
+	cursor: grabbing;
 }
 
 .mode-sort.state-grabbing .t-grabbing {
-    background-color: lightgreen;
-    border-left-color: green;
+	background-color: lightgreen;
+	border-left-color: green;
 }
 
 .grab-ptr {
-    margin: 0;
-    border: solid 1px green;
+	margin: 0;
+	border: solid 1px green;
+}
+
+@media (prefers-color-scheme: dark) {
+	body {
+		background-color: black;
+		color: white;
+	}
+	.t-list {
+		background-color: darkslategray;
+	}
+	.t-li:hover {
+		background-color: darkblue;
+	}
+	input {
+		background-color: black;
+		color: white;
+	}
+	.tgbtn-active {
+		background-color: darkslateblue;
+	}
+	.tgbtn:hover {
+		background-color: gray;
+	}
+	.t-internal {
+		background-color: dimgray;
+	}
+	.mode-sort.state-grabbing .t-grabbing {
+		background-color: green;
+		border-left-color: lightgreen;
+	}
+	.grab-ptr {
+		border: solid 1px lightgreen;
+	}
 }