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