CSS style improvemens

* white boxes on gray background * small drop-shadow for boxes * faster animations
tableau · Jan 19, 2024 · f64f5ef · f64f5ef
1 parent 6729315
commit f64f5ef
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/query-graphs/src/ui/QueryGraph.css b/query-graphs/src/ui/QueryGraph.css
@@ -1,3 +1,7 @@
+.query-graph .react-flow__pane {
+  background: #fdfdfd;
+}
+
 .query-graph .react-flow__handle {
   background-color: transparent;
   pointer-events: none;

diff --git a/query-graphs/src/ui/QueryNode.css b/query-graphs/src/ui/QueryNode.css
@@ -12,8 +12,9 @@
 .qg-graph-node.qg-collapsed:hover,
 .qg-graph-node.qg-expanded {
     cursor: pointer;
-    background: hsl(0,0%, 95%);
+    background: white;
     border-color: hsl(0,0%, 80%);
+    box-shadow: 1px 2px 5px hsl(0,0%,90%);
 }
 
 .query-graph .react-flow__handle.qg-subtree-handle {
@@ -71,7 +72,7 @@
     max-height: 0;
     overflow: hidden;
     transition-property: max-width, max-height;
-    transition-duration: .5s;
+    transition-duration: .2s;
 }
 .qg-graph-node.qg-expanded .qg-graph-node-body-wrapper {
     max-width: 30em;
@@ -87,4 +88,4 @@
 
 .qg-prop-name {
     color: hsl(0, 0%, 50%);
-}
+}