funcnodes-react-flow 0.3.10__py3-none-any.whl → 0.3.12__py3-none-any.whl

funcnodes_react_flow/static/css/style.css

@@ -11,6 +11,94 @@
   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;
@@ -20,7 +108,7 @@
 .libcontainer {
   top: 0;
   left: 0;
-  height: 100%;
+  min-height: 100%;
   padding: 0.5rem;
   box-sizing: border-box;
   display: flex;
@@ -256,94 +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;
-}
-
 /* 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 {
@@ -832,14 +832,6 @@
   top: 100%;
 }
 
-.smooth-expand-expanded {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-}
-
 .basicstyleelement, .headermenucontent, .styled-select__menu, .styleelement, .styledcheckbox, .styledinput, .styledbtn, .styleddropdown {
   background-color: var(--funcnodesbackground1);
   color: var(--funcnodestextcolor1);
@@ -969,6 +961,14 @@ button {
   font-size: inherit;
 }
 
+.smooth-expand-expanded {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
 :root {
   --funheadercolor: #00d9ff;
   --funcnodesbackground1: hsl(243, 26%, 13%);
@@ -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%;
@@ -1117,12 +1128,12 @@ button {
 }
 
 .nodesettings_container {
-  height: 100%;
+  min-height: 100%;
   display: flex;
   flex-direction: row;
 }
 .nodesettings_expander {
-  height: 100%;
+  min-height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1153,83 +1164,6 @@ button {
   margin-top: 0.5rem;
 }
 
-.tablecontainer {
-  overflow: auto;
-  background-color: white;
-  min-height: 20rem;
-}
-
-.tableHead {
-  color: var(--funheadercolor) !important;
-  background-color: var(--funcnodesbackground1);
-  font-weight: bold !important;
-}
-
-.tableheadercolor {
-  color: inherit !important;
-  font-family: inherit !important;
-  font-weight: inherit !important;
-}
-
-.indexcol {
-  background-color: var(--funcnodesbackground2);
-  color: var(--funheadercolor) !important;
-  font-family: inherit !important;
-  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;
-  grid-template-columns: auto minmax(0, 1fr);
-}
-.colorspace_title {
-  font-size: 0.7em;
-  font-weight: bold;
-}
-.colorspace label {
-  font-size: 0.7rem;
-}
-.colorspace input {
-  font-size: 0.7rem;
-  max-height: 0.7rem;
-}
-.colorspace input[type=range] {
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  -webkit-appearance: none;
-  background-color: #666;
-  height: 0.7rem;
-  border-radius: 5px;
-}
-.colorspace input[type=range]::-webkit-slider-thumb, .colorspace input[type=range]::-webkit-range-thumb, .colorspace input[type=range]::-moz-range-thumb {
-  width: 0.7rem;
-  height: 0.7rem;
-  background-color: #cc1c1c;
-  border-radius: 50%;
-  cursor: pointer;
-}
-
 :root {
   --node_border_radius: 5px;
   --handle_outer_radius: 4px;
@@ -1499,6 +1433,83 @@ input.nodedatainput.styledinput,
   transition: width 0.3s ease;
 }
 
+.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;
+}
+
+.tablecontainer {
+  overflow: auto;
+  background-color: white;
+  min-height: 20rem;
+}
+
+.tableHead {
+  color: var(--funheadercolor) !important;
+  background-color: var(--funcnodesbackground1);
+  font-weight: bold !important;
+}
+
+.tableheadercolor {
+  color: inherit !important;
+  font-family: inherit !important;
+  font-weight: inherit !important;
+}
+
+.indexcol {
+  background-color: var(--funcnodesbackground2);
+  color: var(--funheadercolor) !important;
+  font-family: inherit !important;
+  font-weight: inherit !important;
+}
+
+.colorspace {
+  margin: 0.2rem;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+}
+.colorspace_title {
+  font-size: 0.7em;
+  font-weight: bold;
+}
+.colorspace label {
+  font-size: 0.7rem;
+}
+.colorspace input {
+  font-size: 0.7rem;
+  max-height: 0.7rem;
+}
+.colorspace input[type=range] {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  -webkit-appearance: none;
+  background-color: #666;
+  height: 0.7rem;
+  border-radius: 5px;
+}
+.colorspace input[type=range]::-webkit-slider-thumb, .colorspace input[type=range]::-webkit-range-thumb, .colorspace input[type=range]::-moz-range-thumb {
+  width: 0.7rem;
+  height: 0.7rem;
+  background-color: #cc1c1c;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
 s slideUpAndFade from {
   opacity: 0;
   transform: translateY(2px);