Skip to content

Instantly share code, notes, and snippets.

@aleckyann

aleckyann/.css

Created November 21, 2024 20:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save aleckyann/3231fd833af2f8033a46234a5a6be4cc to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save aleckyann/3231fd833af2f8033a46234a5a6be4cc to your computer and use it in GitHub Desktop.
Download ZIP
Drawflow Zapisp basics
Raw
.css
:root {
--dfBackgroundColor: #ffffff;
--dfBackgroundSize: 12px;
--dfBackgroundImage: radial-gradient(rgba(53, 120, 245, 1) 1px, transparent 1px);
--dfNodeType: flex;
--dfNodeTypeFloat: none;
--dfNodeBackgroundColor: #ffffff;
--dfNodeTextColor: rgba(56, 76, 116, 1);
--dfNodeBorderSize: 1px;
--dfNodeBorderColor: rgba(56, 76, 116, 1);
--dfNodeBorderRadius: 5px;
--dfNodeMinHeight: 30px;
--dfNodeMinWidth: 160px;
--dfNodePaddingTop: 10px;
--dfNodePaddingBottom: 10px;
--dfNodeBoxShadowHL: 0px;
--dfNodeBoxShadowVL: 0px;
--dfNodeBoxShadowBR: 8px;
--dfNodeBoxShadowS: 1px;
--dfNodeBoxShadowColor: rgba(56, 76, 116, 1);
--dfNodeHoverBackgroundColor: rgba(255, 255, 255, 1);
--dfNodeHoverTextColor: rgba(56, 76, 116, 1);
--dfNodeHoverBorderSize: 1px;
--dfNodeHoverBorderColor: rgba(56, 76, 116, 1);
--dfNodeHoverBorderRadius: 4px;
--dfNodeHoverBoxShadowHL: 0px;
--dfNodeHoverBoxShadowVL: 0px;
--dfNodeHoverBoxShadowBR: 10px;
--dfNodeHoverBoxShadowS: 2px;
--dfNodeHoverBoxShadowColor: rgba(56, 76, 116, 1);
--dfNodeSelectedBackgroundColor: rgba(255, 255, 255, 1);
--dfNodeSelectedTextColor: rgba(56, 76, 116, 1);
--dfNodeSelectedBorderSize: 1px;
--dfNodeSelectedBorderColor: rgba(78, 169, 255, 1);
--dfNodeSelectedBorderRadius: 4px;
--dfNodeSelectedBoxShadowHL: 0px;
--dfNodeSelectedBoxShadowVL: 0px;
--dfNodeSelectedBoxShadowBR: 10px;
--dfNodeSelectedBoxShadowS: 2px;
--dfNodeSelectedBoxShadowColor: #4ea9ff;
--dfInputBackgroundColor: #ffffff;
--dfInputBorderSize: 2px;
--dfInputBorderColor: rgba(56, 76, 116, 1);
--dfInputBorderRadius: 50px;
--dfInputLeft: -27px;
--dfInputHeight: 20px;
--dfInputWidth: 20px;
--dfInputHoverBackgroundColor: #ffffff;
--dfInputHoverBorderSize: 2px;
--dfInputHoverBorderColor: rgba(56, 76, 116, 1);
--dfInputHoverBorderRadius: 50px;
--dfOutputBackgroundColor: #ffffff;
--dfOutputBorderSize: 2px;
--dfOutputBorderColor: rgba(56, 76, 116, 1);
--dfOutputBorderRadius: 50px;
--dfOutputRight: -3px;
--dfOutputHeight: 20px;
--dfOutputWidth: 20px;
--dfOutputHoverBackgroundColor: #ffffff;
--dfOutputHoverBorderSize: 2px;
--dfOutputHoverBorderColor: rgba(56, 76, 116, 1);
--dfOutputHoverBorderRadius: 50px;
--dfLineWidth: 5px;
--dfLineColor: rgba(56, 76, 116, 1);
--dfLineHoverColor: rgba(78, 169, 255, 1);
--dfLineSelectedColor: rgba(78, 169, 255, 1);
--dfRerouteBorderWidth: 2px;
--dfRerouteBorderColor: rgba(78, 169, 255, 1);
--dfRerouteBackgroundColor: #ffffff;
--dfRerouteHoverBorderWidth: 2px;
--dfRerouteHoverBorderColor: rgba(78, 169, 255, 1);
--dfRerouteHoverBackgroundColor: #ffffff;
--dfDeleteDisplay: block;
--dfDeleteColor: #ffffff;
--dfDeleteBackgroundColor: rgba(56, 76, 116, 1);
--dfDeleteBorderSize: 2px;
--dfDeleteBorderColor: #ffffff;
--dfDeleteBorderRadius: 50px;
--dfDeleteTop: -15px;
--dfDeleteHoverColor: rgba(56, 76, 116, 1);
--dfDeleteHoverBackgroundColor: #ffffff;
--dfDeleteHoverBorderSize: 2px;
--dfDeleteHoverBorderColor: rgba(56, 76, 116, 1);
--dfDeleteHoverBorderRadius: 50px;
}
#drawflow {
background: var(--dfBackgroundColor);
background-size: var(--dfBackgroundSize) var(--dfBackgroundSize);
background-image: var(--dfBackgroundImage);
}
.drawflow .drawflow-node {
display: var(--dfNodeType);
background: var(--dfNodeBackgroundColor);
color: var(--dfNodeTextColor);
border: var(--dfNodeBorderSize) solid var(--dfNodeBorderColor);
border-radius: var(--dfNodeBorderRadius);
min-height: var(--dfNodeMinHeight);
width: auto;
min-width: var(--dfNodeMinWidth);
padding-top: var(--dfNodePaddingTop);
padding-bottom: var(--dfNodePaddingBottom);
-webkit-box-shadow: var(--dfNodeBoxShadowHL) var(--dfNodeBoxShadowVL) var(--dfNodeBoxShadowBR) var(--dfNodeBoxShadowS) var(--dfNodeBoxShadowColor);
box-shadow: var(--dfNodeBoxShadowHL) var(--dfNodeBoxShadowVL) var(--dfNodeBoxShadowBR) var(--dfNodeBoxShadowS) var(--dfNodeBoxShadowColor);
}
.drawflow .drawflow-node:hover {
background: var(--dfNodeHoverBackgroundColor);
color: var(--dfNodeHoverTextColor);
border: var(--dfNodeHoverBorderSize) solid var(--dfNodeHoverBorderColor);
border-radius: var(--dfNodeHoverBorderRadius);
-webkit-box-shadow: var(--dfNodeHoverBoxShadowHL) var(--dfNodeHoverBoxShadowVL) var(--dfNodeHoverBoxShadowBR) var(--dfNodeHoverBoxShadowS) var(--dfNodeHoverBoxShadowColor);
box-shadow: var(--dfNodeHoverBoxShadowHL) var(--dfNodeHoverBoxShadowVL) var(--dfNodeHoverBoxShadowBR) var(--dfNodeHoverBoxShadowS) var(--dfNodeHoverBoxShadowColor);
}
.drawflow .drawflow-node.selected {
background: var(--dfNodeSelectedBackgroundColor);
color: var(--dfNodeSelectedTextColor);
border: var(--dfNodeSelectedBorderSize) solid var(--dfNodeSelectedBorderColor);
border-radius: var(--dfNodeSelectedBorderRadius);
-webkit-box-shadow: var(--dfNodeSelectedBoxShadowHL) var(--dfNodeSelectedBoxShadowVL) var(--dfNodeSelectedBoxShadowBR) var(--dfNodeSelectedBoxShadowS) var(--dfNodeSelectedBoxShadowColor);
box-shadow: var(--dfNodeSelectedBoxShadowHL) var(--dfNodeSelectedBoxShadowVL) var(--dfNodeSelectedBoxShadowBR) var(--dfNodeSelectedBoxShadowS) var(--dfNodeSelectedBoxShadowColor);
}
.drawflow .drawflow-node .input {
left: var(--dfInputLeft);
background: var(--dfInputBackgroundColor);
border: var(--dfInputBorderSize) solid var(--dfInputBorderColor);
border-radius: var(--dfInputBorderRadius);
height: var(--dfInputHeight);
width: var(--dfInputWidth);
}
.drawflow .drawflow-node .input:hover {
background: var(--dfInputHoverBackgroundColor);
border: var(--dfInputHoverBorderSize) solid var(--dfInputHoverBorderColor);
border-radius: var(--dfInputHoverBorderRadius);
}
.drawflow .drawflow-node .outputs {
float: var(--dfNodeTypeFloat);
}
.drawflow .drawflow-node .output {
right: var(--dfOutputRight);
background: var(--dfOutputBackgroundColor);
border: var(--dfOutputBorderSize) solid var(--dfOutputBorderColor);
border-radius: var(--dfOutputBorderRadius);
height: var(--dfOutputHeight);
width: var(--dfOutputWidth);
}
.drawflow .drawflow-node .output:hover {
background: var(--dfOutputHoverBackgroundColor);
border: var(--dfOutputHoverBorderSize) solid var(--dfOutputHoverBorderColor);
border-radius: var(--dfOutputHoverBorderRadius);
}
.drawflow .connection .main-path {
stroke-width: var(--dfLineWidth);
stroke: var(--dfLineColor);
}
.drawflow .connection .main-path:hover {
stroke: var(--dfLineHoverColor);
}
.drawflow .connection .main-path.selected {
stroke: var(--dfLineSelectedColor);
}
.drawflow .connection .point {
stroke: var(--dfRerouteBorderColor);
stroke-width: var(--dfRerouteBorderWidth);
fill: var(--dfRerouteBackgroundColor);
}
.drawflow .connection .point:hover {
stroke: var(--dfRerouteHoverBorderColor);
stroke-width: var(--dfRerouteHoverBorderWidth);
fill: var(--dfRerouteHoverBackgroundColor);
}
.drawflow-delete {
display: var(--dfDeleteDisplay);
color: var(--dfDeleteColor);
background: var(--dfDeleteBackgroundColor);
border: var(--dfDeleteBorderSize) solid var(--dfDeleteBorderColor);
border-radius: var(--dfDeleteBorderRadius);
}
.parent-node .drawflow-delete {
top: var(--dfDeleteTop);
}
.drawflow-delete:hover {
color: var(--dfDeleteHoverColor);
background: var(--dfDeleteHoverBackgroundColor);
border: var(--dfDeleteHoverBorderSize) solid var(--dfDeleteHoverBorderColor);
border-radius: var(--dfDeleteHoverBorderRadius);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment