funcnodes-react-flow 0.3.11__tar.gz → 0.3.12__tar.gz

{funcnodes_react_flow-0.3.11 → funcnodes_react_flow-0.3.12}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.3
 Name: funcnodes-react-flow
-Version: 0.3.11
+Version: 0.3.12
 Summary: funcnodes frontend for react flow
 License: AGPL-3.0
 Author: Julian Kimmig

{funcnodes_react_flow-0.3.11 → funcnodes_react_flow-0.3.12}/funcnodes_react_flow/static/css/style.css

@@ -1,4 +1,104 @@
 @charset "UTF-8";
+: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;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  z-index: 2000;
+}
+
+.dialogconent {
+  background-color: var(--funcnodesbackground1);
+  border-radius: 6px;
+  box-shadow: var(--funheadercolor) 0px 10px 38px -10px, var(--funheadercolor) 0px 10px 20px -15px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 85vw;
+  max-height: 85vh;
+  padding: 25px;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  color: var(--funcnodestextcolor1);
+  border: 1px solid var(--funheadercolor);
+  display: flex;
+  flex-direction: column;
+  z-index: 2001;
+}
+
+.dialogtitle {
+  margin: 0;
+  font-weight: 500;
+  color: var(--funheadercolor);
+  font-size: 17px;
+}
+
+.dialogdescription {
+  margin: 10px 0 20px;
+  font-size: 15px;
+  line-height: 1.5;
+}
+
+.dialogclosebutton {
+  border-radius: 100%;
+  height: 25px;
+  width: 25px;
+  display: inline-flex;
+  background-color: inherit;
+  align-items: center;
+  justify-content: center;
+  color: var(--funheadercolor);
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  border: none;
+}
+.dialogclosebutton:hover {
+  background-color: var(--funheadercolor);
+  color: var(--funcnodesbackground1);
+}
+.dialogclosebutton:active {
+  background-color: var(--funheadercolor);
+  color: var(--funcnodestextcolor1);
+}
+
+.dialogsendbutton {
+  background-color: var(--funcnodesbackground1);
+  color: var(--funheadercolor);
+  border: 1px solid var(--funheadercolor);
+  border-radius: 99rem;
+  padding: 10px 20px;
+  cursor: pointer;
+  font-size: 15px;
+  margin-top: 20px;
+}
+.dialogsendbutton:hover {
+  background-color: var(--funheadercolor);
+  color: var(--funcnodesbackground1);
+}
+.dialogsendbutton:active {
+  background-color: var(--funheadercolor);
+  color: var(--funcnodestextcolor1);
+}
+
+.dialogchildren {
+  margin-top: 20px;
+  overflow: auto;
+}
+
 :root {
   --expandtime: 0.3s;
   --libnodebgcolor: #48465f;
@@ -8,7 +108,7 @@
 .libcontainer {
   top: 0;
   left: 0;
-  height: 100%;
+  min-height: 100%;
   padding: 0.5rem;
   box-sizing: border-box;
   display: flex;
@@ -244,106 +344,6 @@
   color: #0056b3;
 }
 
-.dialogoverlay {
-  background-color: rgba(0, 0, 0, 0.5);
-  position: fixed;
-  inset: 0;
-  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
-  z-index: 2000;
-}
-
-.dialogconent {
-  background-color: var(--funcnodesbackground1);
-  border-radius: 6px;
-  box-shadow: var(--funheadercolor) 0px 10px 38px -10px, var(--funheadercolor) 0px 10px 20px -15px;
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 90vw;
-  max-width: 85vw;
-  max-height: 85vh;
-  padding: 25px;
-  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
-  color: var(--funcnodestextcolor1);
-  border: 1px solid var(--funheadercolor);
-  display: flex;
-  flex-direction: column;
-  z-index: 2001;
-}
-
-.dialogtitle {
-  margin: 0;
-  font-weight: 500;
-  color: var(--funheadercolor);
-  font-size: 17px;
-}
-
-.dialogdescription {
-  margin: 10px 0 20px;
-  font-size: 15px;
-  line-height: 1.5;
-}
-
-.dialogclosebutton {
-  border-radius: 100%;
-  height: 25px;
-  width: 25px;
-  display: inline-flex;
-  background-color: inherit;
-  align-items: center;
-  justify-content: center;
-  color: var(--funheadercolor);
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  border: none;
-}
-.dialogclosebutton:hover {
-  background-color: var(--funheadercolor);
-  color: var(--funcnodesbackground1);
-}
-.dialogclosebutton:active {
-  background-color: var(--funheadercolor);
-  color: var(--funcnodestextcolor1);
-}
-
-.dialogsendbutton {
-  background-color: var(--funcnodesbackground1);
-  color: var(--funheadercolor);
-  border: 1px solid var(--funheadercolor);
-  border-radius: 99rem;
-  padding: 10px 20px;
-  cursor: pointer;
-  font-size: 15px;
-  margin-top: 20px;
-}
-.dialogsendbutton:hover {
-  background-color: var(--funheadercolor);
-  color: var(--funcnodesbackground1);
-}
-.dialogsendbutton:active {
-  background-color: var(--funheadercolor);
-  color: var(--funcnodestextcolor1);
-}
-
-.dialogchildren {
-  margin-top: 20px;
-  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 {
@@ -976,6 +976,7 @@ button {
   --funcnodesbackground_light: hsl(240, 22%, 38%);
   --containerboarderradius: 1rem;
   --funcnodestextcolor1: #ffffff;
+  --funcnodes-z-index: 1000;
 }
 
 .funcnodescontainer {
@@ -990,6 +991,8 @@ button {
 .funcnodesreactflowcontainer {
   width: 100%;
   height: 100%;
+  flex-grow: 1;
+  z-index: var(--funcnodes-z-index);
   background-color: var(--funcnodesbackground1);
   position: relative;
   display: flex;
@@ -1043,12 +1046,20 @@ button {
   position: absolute;
   right: 0;
   padding: 10px;
-  z-index: 1001;
+  z-index: 2;
   display: flex;
   flex-direction: row;
   margin-right: 10px;
 }
 
+.FuncnodesApp {
+  height: 100%;
+  width: 100%;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+
 .funcnodesreactflowheader {
   display: flex;
   flex-direction: row;
@@ -1057,7 +1068,7 @@ button {
   position: relative;
   top: 0;
   left: 0;
-  z-index: 1000;
+  z-index: 1;
 }
 .funcnodesreactflowheader .headerelement {
   height: 100%;
@@ -1116,6 +1127,43 @@ button {
   color: #fff;
 }
 
+.nodesettings_container {
+  min-height: 100%;
+  display: flex;
+  flex-direction: row;
+}
+.nodesettings_expander {
+  min-height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 3px 3px;
+}
+.nodesettings_content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: 0 5px;
+  overflow: auto;
+  transition: width 0.5s;
+}
+.nodesettings_content.expanded {
+  width: 250px;
+}
+.nodesettings_content.collapsed {
+  width: 0;
+}
+.nodesettings_section {
+  margin-bottom: 10px;
+  margin-left: 0.5rem;
+}
+.nodesettings_component {
+  margin-bottom: 0.5rem;
+  margin-left: 0.5rem;
+  margin-top: 0.5rem;
+}
+
 :root {
   --node_border_radius: 5px;
   --handle_outer_radius: 4px;
@@ -1385,41 +1433,23 @@ input.nodedatainput.styledinput,
   transition: width 0.3s ease;
 }
 
-.nodesettings_container {
-  height: 100%;
-  display: flex;
-  flex-direction: row;
-}
-.nodesettings_expander {
+.styled-select__control {
   height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  padding: 3px 3px;
-}
-.nodesettings_content {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  padding: 0 5px;
-  overflow: auto;
-  transition: width 0.5s;
+  min-height: initial;
+  min-width: 10px;
 }
-.nodesettings_content.expanded {
-  width: 250px;
+.styled-select__menu-list {
+  max-height: 200px;
 }
-.nodesettings_content.collapsed {
-  width: 0;
+.styled-select__single-value {
+  text-align: start;
 }
-.nodesettings_section {
-  margin-bottom: 10px;
-  margin-left: 0.5rem;
+.styled-select__option {
+  text-align: start;
+  padding: 2px 5px;
 }
-.nodesettings_component {
-  margin-bottom: 0.5rem;
-  margin-left: 0.5rem;
-  margin-top: 0.5rem;
+.styled-select__option:hover {
+  cursor: pointer;
 }
 
 .tablecontainer {
@@ -1447,25 +1477,6 @@ input.nodedatainput.styledinput,
   font-weight: inherit !important;
 }
 
-.styled-select__control {
-  height: 100%;
-  min-height: initial;
-  min-width: 10px;
-}
-.styled-select__menu-list {
-  max-height: 200px;
-}
-.styled-select__single-value {
-  text-align: start;
-}
-.styled-select__option {
-  text-align: start;
-  padding: 2px 5px;
-}
-.styled-select__option:hover {
-  cursor: pointer;
-}
-
 .colorspace {
   margin: 0.2rem;
   display: grid;