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

266
Http/SkinEditor/app.css
View File

@@ -1,253 +1,287 @@
body { body {
overflow: hidden; overflow: hidden;
margin: 0; margin: 0;
font-family: sans-serif; font-family: sans-serif;
font-size: 16px; font-size: 16px;
} }
#app { #app {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
} }
#toolbar { #toolbar {
height: 32px; height: 32px;
display: flex; display: flex;
align-items: center;
} }
.tgbtn { .tgbtn {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
} }
.tgbtn-active { .tgbtn-active {
background-color: lightblue; background-color: lightblue;
} }
.tgbtn:hover { .tgbtn:hover {
background-color: lightgray; background-color: lightgray;
} }
#toolbar .tgbtn { #toolbar .tgbtn {
min-width: 64px; min-width: 64px;
height: 100%; height: 100%;
padding: 0 8px; padding: 0 8px;
border-right: solid 1px gray; border-right: solid 1px gray;
} }
#treeview { #treeview {
height: calc(100% - 32px); height: calc(100% - 32px);
} }
#tree { #tree {
overflow: auto; overflow: auto;
height: calc(100% - 10px); height: calc(100% - 10px);
} }
.t-list { .t-list {
position: absolute; position: absolute;
max-width: 100vw; max-width: 100vw;
max-height: 100vh; max-height: 100vh;
overflow: auto; overflow: auto;
background-color: floralwhite; background-color: floralwhite;
border: solid 1px gray; border: solid 1px gray;
border-radius: 4px; border-radius: 4px;
padding: 2px; padding: 2px;
margin: 0; margin: 0;
} }
.t-li { .t-li {
list-style: none; list-style: none;
padding: 0 4px; padding: 0 4px;
margin: 1px; margin: 1px;
cursor: pointer; cursor: pointer;
} }
.t-li:hover { .t-li:hover {
background-color: lightblue; background-color: lightblue;
} }
input { input {
border: none; border: none;
font-family: sans-serif; font-family: sans-serif;
font-size: 16px; font-size: 16px;
} }
.t-node { .t-node {
padding: 1px 4px; padding: 1px 4px;
margin: 4px 0; margin: 4px 0;
} }
.t-node, .t-node-sup { .t-node, .t-node-sup {
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;
} }
.t-literal { .t-literal {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.btn { .btn {
width: 16px; width: 16px;
height: 0px; height: 0px;
font-size: small; font-size: small;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
transition: 0.25s; transition: 0.25s;
display: block; display: block;
} }
.btn.t-inline { .btn.t-inline {
display: inline-block; display: inline-block;
width: 0; width: 0;
height: 16px; height: 16px;
margin: 0 2px; margin: 0 2px;
} }
.btn:only-child { .btn:only-child {
height: 16px; height: 16px;
} }
.btn.t-inline:only-child { .btn.t-inline:only-child {
width: 16px; width: 16px;
} }
.t-statement > .btn { .t-statement > .btn {
} }
.t-node:hover > .btn { .t-node:hover > .btn {
transition: 0.25s; transition: 0.25s;
height: 16px; height: 16px;
} }
.t-node:hover > .btn.t-inline { .t-node:hover > .btn.t-inline {
width: 16px; width: 16px;
} }
.btn-add { .btn-add {
border: solid 1px green; border: solid 1px green;
} }
.mode-hide-add .btn-add { .mode-hide-add .btn-add {
display: none; display: none;
} }
.btn-delete { .btn-delete {
border: solid 1px red; border: solid 1px red;
} }
.mode-hide-delete .btn-delete { .mode-hide-delete .btn-delete {
display: none; display: none;
} }
.t-block { .t-block {
border-left: solid 1px darkcyan; border-left: solid 1px darkcyan;
} }
.t-exp { .t-exp {
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;
border: solid 1px magenta; border: solid 1px magenta;
} }
.t-statement { .t-statement {
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;
border-left-width: 3px; border-left-width: 3px;
} }
.t-inline { .t-inline {
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;
} }
.mode-sort input { .mode-sort input {
cursor: grab; cursor: grab;
} }
.mode-sort .t-node { .mode-sort .t-node {
border-color: lightgray; border-color: lightgray;
} }
.mode-sort .t-statement { .mode-sort .t-statement {
cursor: grab; cursor: grab;
padding-left: 10px; padding-left: 10px;
border-color: orange; border-color: orange;
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;
} }
.mode-sort.state-grabbing .t-node { .mode-sort.state-grabbing .t-node {
cursor: grabbing; cursor: grabbing;
} }
.mode-sort.state-grabbing input { .mode-sort.state-grabbing input {
cursor: grabbing; cursor: grabbing;
} }
.mode-sort.state-grabbing .t-grabbing { .mode-sort.state-grabbing .t-grabbing {
background-color: lightgreen; background-color: lightgreen;
border-left-color: green; border-left-color: green;
} }
.grab-ptr { .grab-ptr {
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;
}
} }