Style tweaks based on feedback

This commit is contained in:
Misode
2020-10-05 00:23:43 +02:00
parent dbb07ea4bc
commit f7869edbad
+33 -1
View File
@@ -14,8 +14,10 @@
--node-popup-text: #dadada; --node-popup-text: #dadada;
--category-predicate: #65b5b8; --category-predicate: #65b5b8;
--category-predicate-border: #187e81; --category-predicate-border: #187e81;
--category-predicate-background: #95c5c7;
--category-function: #979fa7; --category-function: #979fa7;
--category-function-border: #788086; --category-function-border: #788086;
--category-function-background: #dce0e4;
} }
:root[data-theme=dark] { :root[data-theme=dark] {
@@ -34,8 +36,10 @@
--node-popup-text: #dadada; --node-popup-text: #dadada;
--category-predicate: #306163; --category-predicate: #306163;
--category-predicate-border: #224849; --category-predicate-border: #224849;
--category-predicate-background: #1d3333;
--category-function: #838383; --category-function: #838383;
--category-function-border: #6b6b6b; --category-function-border: #6b6b6b;
--category-function-background: #414141;
} }
#tree-view-output > .object-node > .node-body { #tree-view-output > .object-node > .node-body {
@@ -254,7 +258,7 @@ button.remove {
.node-body { .node-body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-left: 14px; padding-left: 18px;
} }
.node-entry > .object-node > .node-body { .node-entry > .object-node > .node-body {
@@ -278,6 +282,24 @@ button.remove {
margin-top: 2px; margin-top: 2px;
} }
.node-entry > .object-node[data-category] {
width: 100%;
padding: 5px;
padding-left: 0px;
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] {
margin-top: 4px;
}
.node-entry > .node.object-node[data-category] > .node-body {
border: none;
}
/* Node type specifics */ /* Node type specifics */
.range-node select { .range-node select {
@@ -304,6 +326,11 @@ button.remove {
border-color: var(--category-predicate-border) !important; border-color: var(--category-predicate-border) !important;
} }
.node-entry > .node.object-node[data-category=predicate] {
background-color: var(--category-predicate-background);
border-color: var(--category-predicate-border);
}
[data-category=function] > .node-header > label, [data-category=function] > .node-header > label,
[data-category=function] > .node-body > .node.node-header > label, [data-category=function] > .node-body > .node.node-header > label,
[data-category=function] > .node-body > .node > .node-header > label { [data-category=function] > .node-body > .node > .node-header > label {
@@ -316,3 +343,8 @@ button.remove {
[data-category=function] > .node-body > .node > .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) !important;
} }
.node-entry > .node.object-node[data-category=function] {
background-color: var(--category-function-background);
border-color: var(--category-function-border);
}