Pop_Slime/crtr
1
0
Fork 0
Code Issues 6 Pull Requests Projects 1 Releases Activity

Add dark mode for skin editor.

Browse Source
This commit is contained in:
PopSlime
2022-10-12 23:28:56 +08:00
parent 7704fb6682
commit e642f1a4ac
1 changed files with 150 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
Http/SkinEditor/app.css
View File

@@ -13,7 +13,6 @@ body {
#toolbar { #toolbar {
height: 32px; height: 32px;
display: flex; display: flex;
align-items: center;
} }
.tgbtn { .tgbtn {
@@ -66,9 +65,9 @@ body {
cursor: pointer; cursor: pointer;
} }
.t-li:hover { .t-li:hover {
background-color: lightblue; background-color: lightblue;
} }
input { input {
border: none; border: none;
@@ -85,10 +84,10 @@ input {
transition: 0.25s; transition: 0.25s;
} }
.t-node.t-inline { .t-node.t-inline {
padding: 0 2px; padding: 0 2px;
margin: 4px 2px; margin: 4px 2px;
} }
.t-internal { .t-internal {
display: none; display: none;
@@ -162,13 +161,13 @@ input {
border-top: solid 1px gray; border-top: solid 1px gray;
} }
.t-exp.t-inline { .t-exp.t-inline {
padding: 2px 4px; padding: 2px 4px;
} }
.t-exp:hover { .t-exp:hover {
border-top: solid 3px gray; border-top: solid 3px gray;
} }
.t-input { .t-input {
display: inline-block; display: inline-block;
@@ -179,9 +178,9 @@ input {
border-left: solid 1px orange; border-left: solid 1px orange;
} }
.t-statement.t-inline { .t-statement.t-inline {
border: solid 1px orange; border: solid 1px orange;
} }
.t-node:hover { .t-node:hover {
transition: 0.25s; transition: 0.25s;
@@ -192,17 +191,19 @@ input {
display: inline-block; display: inline-block;
} }
.t-internal {
background-color: lightgray;
}
/* Debug Mode */ /* Debug Mode */
.mode-debug .t-internal { .mode-debug .t-internal {
display: block; display: block;
background-color: lightgray;
opacity: 0.6; opacity: 0.6;
} }
/* Sort Mode */ /* Sort Mode */
.mode-sort .t-internal { .mode-sort .t-internal {
display: block; display: block;
background-color: lightgray;
opacity: 1; opacity: 1;
} }
@@ -221,14 +222,14 @@ input {
border-left-width: 2px; border-left-width: 2px;
} }
.mode-sort .t-statement:hover { .mode-sort .t-statement:hover {
border-color: yellow; border-color: yellow;
border-left-width: 5px; border-left-width: 5px;
} }
.mode-sort .t-statement.t-inline { .mode-sort .t-statement.t-inline {
border-color: lightgray; border-color: lightgray;
} }
.mode-sort .btn { .mode-sort .btn {
display: none; display: none;
@@ -251,3 +252,36 @@ input {
margin: 0; margin: 0;
border: solid 1px green; 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;
}
}