akanealw/misode.github.io
1
0
Fork 0
mirror of https://github.com/misode/misode.github.io.git synced 2026-04-23 23:27:09 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Switch to vite and preact

Browse Source
This commit is contained in:
Misode
2021-06-23 20:44:28 +02:00
parent e551b7ef75
commit 09c851914f
89 changed files with 6398 additions and 15531 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
src/styles/nodes.css
View File

@@ -1,4 +1,30 @@
:root {
--node-border: #4e4e4e;
--node-background-label: #1b1b1b;
--node-background-input: #272727;
--node-text: #dadada;
--node-selected: #ad9715;
--node-selected-border: #8d7a0d;
--node-add: #487c13;
--node-add-border: #3b6e0c;
--node-remove: #9b341b;
--node-remove-border: #7e1d05;
--node-indent-border: #454749;
--node-popup-background: #0a0a0ae6;
--node-popup-text: #dadada;
--node-popup-text-dimmed: #b4b4b4;
--category-predicate: #306163;
--category-predicate-border: #224849;
--category-predicate-background: #1d3333;
--category-function: #838383;
--category-function-border: #6b6b6b;
--category-function-background: #414141;
--category-pool: #386330;
--category-pool-border: #2e4922;
--category-pool-background: #21331d;
}
:root[data-theme=light] {
--node-border: #bcbfc3;
--node-background-label: #e4e4e4;
--node-background-input: #ffffff;
@@ -24,32 +50,33 @@
--category-pool-background: #b1d6a6;
}
:root[data-theme=dark] {
--node-border: #4e4e4e;
--node-background-label: #1b1b1b;
--node-background-input: #272727;
--node-text: #dadada;
--node-selected: #ad9715;
--node-selected-border: #8d7a0d;
--node-add: #5a961e;
--node-add-border: #3b6e0c;
--node-remove: #b64023;
--node-remove-border: #7e1d05;
--node-indent-border: #454749;
--node-popup-background: #0a0a0ae6;
--node-popup-text: #dadada;
--node-popup-text-dimmed: #b4b4b4;
--category-predicate: #306163;
--category-predicate-border: #224849;
--category-predicate-background: #1d3333;
--category-function: #838383;
--category-function-border: #6b6b6b;
--category-function-background: #414141;
--category-pool: #386330;
--category-pool-border: #2e4922;
--category-pool-background: #21331d;
@media (prefers-color-scheme: light) {
:root[data-theme=system] {
--node-border: #bcbfc3;
--node-background-label: #e4e4e4;
--node-background-input: #ffffff;
--node-text: #000000;
--node-selected: #f0e65e;
--node-selected-border: #b9a327;
--node-add: #9bd464;
--node-add-border: #498d09;
--node-remove: #e76f51;
--node-remove-border: #be4b2e;
--node-indent-border: #b9b9b9;
--node-popup-background: #1f2020e6;
--node-popup-text: #dadada;
--node-popup-text-dimmed: #b4b4b4;
--category-predicate: #65b5b8;
--category-predicate-border: #187e81;
--category-predicate-background: #95c5c7;
--category-function: #979fa7;
--category-function-border: #788086;
--category-function-background: #dce0e4;
--category-pool: #76b865;
--category-pool-border: #398118;
--category-pool-background: #b1d6a6;
}
}
/* Node headers */
.node-header {
@@ -64,7 +91,6 @@
border: 1px solid;
color: var(--node-text);
border-color: var(--node-border);
transition: all var(--style-transition);
}
.node-header > label {
@@ -85,7 +111,8 @@
padding: 0 2px;
}
.node-header > select {
.node-header > select,
.node-header > datalist {
font-size: 18px;
padding-left: 6px;
background-color: var(--node-background-input);
@@ -105,6 +132,12 @@
cursor: pointer;
}
.node-error ~ select:last-child,
.node-error ~ input:last-child,
.node-error ~ input[list]:nth-last-child(2) {
border-color: var(--node-remove) !important;
}
/** Rounded corners */
.node-header > .node-icon {
@@ -143,7 +176,6 @@ button.selected {
.collapse svg {
fill: var(--node-text);
transition: fill var(--style-transition);
}
.collapse.closed,
@@ -163,7 +195,6 @@ button.remove {
position: relative;
top: 2px;
fill: var(--node-text);
transition: fill var(--style-transition);
}
.node-header > button.collapse:last-child,
@@ -187,7 +218,7 @@ button.remove {
border-radius: 6px;
padding: 8px 4px;
position: absolute;
z-index: 1;
z-index: 2;
top: 125%;
left: 50%;
margin-left: -120px;
@@ -204,7 +235,7 @@ button.remove {
border-color: transparent transparent var(--node-popup-background) transparent;
}
.node-icon:hover .icon-popup,
.node-icon svg:hover + .icon-popup,
.node-icon .icon-popup.show {
visibility: visible;
}
@@ -215,14 +246,13 @@ button.remove {
min-width: 34px;
margin-left: 6px;
cursor: pointer;
transition: fill var(--style-transition);
}
.node-icon.node-help svg {
fill: var(--node-border);
}
.node-icon.node-error svg {
.node-icon.node-error svg {
fill: var(--node-remove);
}
@@ -290,7 +320,6 @@ span.menu-item {
.node-body {
border-left: 3px solid var(--node-indent-border);
transition: border-color var(--style-transition);
}
.node-body {
@@ -330,7 +359,6 @@ span.menu-item {
margin-top: 8px;
border: 2px solid var(--node-border);
border-radius: 3px;
transition: background-color var(--style-transition);
}
.node-entry:first-child > .object-node[data-category],
@@ -367,13 +395,14 @@ span.menu-item {
[data-category=predicate] > .node-header > label,
[data-category=predicate] > .node-body > .node > .node-header > label {
background-color: var(--category-predicate) !important;
background-color: var(--category-predicate);
}
[data-category=predicate] > .node-body,
[data-category=predicate] > .node-header > label,
[data-category=predicate] > .node-header > *:not(.selected),
[data-category=predicate] > .node-body > .node > .node-header > *:not(.selected) {
border-color: var(--category-predicate-border) !important;
border-color: var(--category-predicate-border);
}
.node-entry > .node.object-node[data-category=predicate],
@@ -385,13 +414,14 @@ span.menu-item {
[data-category=function] > .node-header > label,
[data-category=function] > .node-body > .node > .node-header > label {
background-color: var(--category-function) !important;
background-color: var(--category-function);
}
[data-category=function] > .node-body,
[data-category=function] > .node-header > label,
[data-category=function] > .node-header > *:not(.selected),
[data-category=function] > .node-body > .node > .node-header > *:not(.selected) {
border-color: var(--category-function-border) !important;
border-color: var(--category-function-border);
}
.node-entry > .node.object-node[data-category=function],
@@ -403,13 +433,14 @@ span.menu-item {
[data-category=pool] > .node-header > label,
[data-category=pool] > .node-body > .node > .node-header > label {
background-color: var(--category-pool) !important;
background-color: var(--category-pool);
}
[data-category=pool] > .node-body,
[data-category=pool] > .node-header > label,
[data-category=pool] > .node-header > *:not(.selected),
[data-category=pool] > .node-body > .node > .node-header > *:not(.selected) {
border-color: var(--category-pool-border) !important;
border-color: var(--category-pool-border);
}
.node-entry > .node.object-node[data-category=pool],