@linkdlab/funcnodes_react_flow 0.3.12 → 0.3.13

package/dist/esm/style.css

@@ -244,6 +244,18 @@
   color: #0056b3;
 }
 
+:root {
+  --funcnodesedgecolor: #7bb3ec;
+}
+
+.funcnodes-edge .react-flow__edge-path {
+  stroke: var(--funcnodesedgecolor);
+  stroke-width: 2px;
+}
+.funcnodes-edge.selected .react-flow__edge-path {
+  stroke: #11ff00;
+}
+
 .dialogoverlay {
   background-color: rgba(0, 0, 0, 0.5);
   position: fixed;
@@ -332,18 +344,6 @@
   overflow: auto;
 }
 
-:root {
-  --funcnodesedgecolor: #7bb3ec;
-}
-
-.funcnodes-edge .react-flow__edge-path {
-  stroke: var(--funcnodesedgecolor);
-  stroke-width: 2px;
-}
-.funcnodes-edge.selected .react-flow__edge-path {
-  stroke: #11ff00;
-}
-
 /* this gets exported as style.css and can be used for the default theming */
 /* these are the necessary styles for React Flow, they get used by base.css and style.css */
 .react-flow {
@@ -961,73 +961,6 @@ button {
   font-size: inherit;
 }
 
-.funcnodesreactflowheader {
-  display: flex;
-  flex-direction: row;
-  height: 50px;
-  justify-content: flex-start;
-  position: relative;
-  top: 0;
-  left: 0;
-  z-index: 1000;
-}
-.funcnodesreactflowheader .headerelement {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  margin: 4px 4px 4px 4px;
-  position: relative;
-  white-space: nowrap;
-}
-.funcnodesreactflowheader .statusbar {
-  width: 250px;
-  height: 1.5rem;
-  background-color: var(--funcnodesbackground2);
-  display: inline-block;
-  margin: 2px 4px 0px 4px;
-  position: relative;
-  border-radius: 0.5rem;
-  overflow: hidden;
-}
-.funcnodesreactflowheader .statusbar-progressbar {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 0;
-  height: 100%;
-  background-color: var(--funheadercolor);
-  display: inline-block;
-}
-.funcnodesreactflowheader .statusbar-message {
-  position: relative;
-  top: 0;
-  left: 0;
-  font-size: 0.8rem;
-  color: var(--funheadercolor);
-  mix-blend-mode: difference;
-}
-
-.headermenucontent {
-  max-height: 90vh;
-  overflow: auto;
-  padding: 5px;
-  border-radius: 0.25rem;
-}
-
-.headermenuitem {
-  padding: 0 5px;
-}
-.headermenuitem[data-highlighted] {
-  background-color: var(--funcnodesbackground_light);
-}
-.headermenuitem[data-state=open] {
-  background-color: var(--funcnodesbackground_light);
-}
-.headermenuitem[data-state=checked] {
-  background-color: var(--funcnodesbackground_light);
-  color: #fff;
-}
-
 :root {
   --funheadercolor: #00d9ff;
   --funcnodesbackground1: hsl(243, 26%, 13%);
@@ -1098,6 +1031,73 @@ button {
   color: red;
 }
 
+.funcnodesreactflowheader {
+  display: flex;
+  flex-direction: row;
+  height: 50px;
+  justify-content: flex-start;
+  position: relative;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+}
+.funcnodesreactflowheader .headerelement {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  margin: 4px 4px 4px 4px;
+  position: relative;
+  white-space: nowrap;
+}
+.funcnodesreactflowheader .statusbar {
+  width: 250px;
+  height: 1.5rem;
+  background-color: var(--funcnodesbackground2);
+  display: inline-block;
+  margin: 2px 4px 0px 4px;
+  position: relative;
+  border-radius: 0.5rem;
+  overflow: hidden;
+}
+.funcnodesreactflowheader .statusbar-progressbar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 100%;
+  background-color: var(--funheadercolor);
+  display: inline-block;
+}
+.funcnodesreactflowheader .statusbar-message {
+  position: relative;
+  top: 0;
+  left: 0;
+  font-size: 0.8rem;
+  color: var(--funheadercolor);
+  mix-blend-mode: difference;
+}
+
+.headermenucontent {
+  max-height: 90vh;
+  overflow: auto;
+  padding: 5px;
+  border-radius: 0.25rem;
+}
+
+.headermenuitem {
+  padding: 0 5px;
+}
+.headermenuitem[data-highlighted] {
+  background-color: var(--funcnodesbackground_light);
+}
+.headermenuitem[data-state=open] {
+  background-color: var(--funcnodesbackground_light);
+}
+.headermenuitem[data-state=checked] {
+  background-color: var(--funcnodesbackground_light);
+  color: #fff;
+}
+
 :root {
   --node_border_radius: 5px;
   --handle_outer_radius: 4px;