mirror of
https://github.com/barsdeveloper/ueblueprint.git
synced 2026-02-04 08:50:33 +08:00
Style files refactoring
This commit is contained in:
barsdeveloper
1
dist/css/ueb-style.css
vendored
Normal file
1
dist/css/ueb-style.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/css/ueb-style.css.map
vendored
Normal file
1
dist/css/ueb-style.css.map
vendored
Normal file
@@ -0,0 +1 @@
|
||||
{"version":3,"sourceRoot":"","sources":["../../scss/style.scss","../../scss/ueb-node.scss","../../scss/ueb-pin.scss","../../scss/ueb-type-color.scss"],"names":[],"mappings":"AAAA,WACI,qBACA,iBACA,IACI,kGAIR,WACI,qBACA,mBACA,IACI,sGAIR,cACI,cACA,kBACA,8EACA,+BACA,iBAGJ,qBACI,aACA,kBACA,MACA,QACA,OACA,aACA,0BACA,UAGJ,mBACI,iBACA,gBACA,eAGJ,mBACI,kBACA,aACA,gBACA,kBAGJ,oDACI,gBAGJ,UACI,kFACA,kBACA,eACA,gBACA,kEACA,mEACA,yBACA,iBAEI,s3BA0BJ,gBAEI,sZAQJ,sFACA,gEACA,oDACA,qBACA,gBAGJ,kDACI,gBAGJ,mDACI,eAGJ,qBAEI,eACA,6CAGJ,gBACI,eAGJ,gBACI,mBAGJ,gBACI,kBAGJ,gBACI,mBAGJ,gBACI,iBAGJ,gBACI,mBAGJ,gBACI,kBAGJ,iBACI,mBAGJ,iBACI,kBAGJ,iBACI,mBAGJ,iBACI,iBACA,uDAGJ,iBACI,mBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,iBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,sBACA,uDAGJ,kBACI,iBACA,uDAGJ,kBACI,sBACA,uDAGJ,kBACI,sBACA,uDAGJ,kBACI,kBACA,QACA,SACA,wGAGJ,gEACI,8DACA,8DACA,8DACA,8DACA,oGACA,qGACA,kBACA,wCACA,yCACA,0CACA,4CAGJ,aACI,cACA,kBACA,kBACA,MACA,OACA,QACA,SACA,iBAEI,wlDAmDJ,gBAEI,gQAWJ,oBAEI,wJAOJ,4BAGJ,gDACI,mBAIJ,eACI,mBC7TJ,SACI,cACA,kBACA,sGACA,qCACA,uDAGJ,wEACI,YAGJ,iBACI,YACA,YACA,+CAGJ,+BACI,iBACI,kNAIJ,oDACA,0CACA,sDACA,0BACA,oBAGJ,kBACI,kBACA,YACA,gCACA,qCACA,0BACA,gBAGJ,iBACI,kBACA,6DACA,gEACA,8EACA,aACA,gBACA,mBAGJ,eACI,iFACA,qBACA,mBAGJ,eACI,aACA,cACA,WACA,gBACA,mBAGJ,iBACI,kBACA,iBAGJ,kBACI,kBAGJ,iBACI,aAGJ,iDACI,cC9EJ,QACI,cACA,aACA,gBAEA,UACI,qBACA,sBAIR,wEACI,aAGJ,6EACI,qCACA,iBAGJ,0BACI,iBAGJ,mBACI,qBACA,wBAGJ,oBACI,qBACA,kBACA,YACA,aACA,wBACA,wBAGJ,4BACI,WACA,cACA,kBACA,MACA,QACA,SACA,OACA,sCACA,kBAGJ,iDACI,gCAGJ,2BACI,WACA,cACA,kBACA,qBACA,sBACA,QACA,SACA,kCACA,qCACA,4CAGJ,sBACI,qBACA,sBAGJ,4BACI,aAGJ,eACI,gBACA,yBACA,kBACA,gBACA,eACA,gBACA,gBACA,gBACA,cACA,YACA,cACA,mBAEA,gEAGI,mBACA,aC9FR,KAGI,uBACA,6BAGJ,iBAEI,yBAGJ,eAEI,yBAGJ,eAEI,yBAGJ,aAEI,yBAGJ,cAEI,yBAGJ,gBAGI,yBAGJ,iBAEI,yBAGJ,gBAEI,yBACA,mGAGJ,gBAEI","file":"ueb-style.css"}
|
||||
@@ -1 +0,0 @@
|
||||
.ueb{--ueb-pin-color: white;--ueb-pin-dim-color: #afafaf}.ueb-pin-boolean{--ueb-pin-color: #4d0000}.ueb-pin-class{--ueb-pin-color: #5800bb}.ueb-pin-float{--ueb-pin-color: #9ffb44}.ueb-pin-int{--ueb-pin-color: #1fe0ad}.ueb-pin-name{--ueb-pin-color: #cb81fc}.ueb-pin-object{--ueb-pin-color: #006603}.ueb-pin-rotator{--ueb-pin-color: #9eb1fc}.ueb-pin-string{--ueb-pin-color: #fc00d2;--ueb-pin-background: linear-gradient(90deg, #fc00d220, #fc00d280 15%, #fc00d250 85%, transparent)}.ueb-pin-vector{--ueb-pin-color: #fcc823}/*# sourceMappingURL=ueblueprint-node-value-type-color.css.map */
|
||||
@@ -1 +0,0 @@
|
||||
{"version":3,"sourceRoot":"","sources":["../../scss/ueblueprint-node-value-type-color.scss"],"names":[],"mappings":"AAAA,KAGI,uBACA,6BAGJ,iBAEI,yBAGJ,eAEI,yBAGJ,eAEI,yBAGJ,aAEI,yBAGJ,cAEI,yBAGJ,gBAGI,yBAGJ,iBAEI,yBAGJ,gBAEI,yBACA,mGAGJ,gBAEI","file":"ueblueprint-node-value-type-color.css"}
|
||||
1
dist/css/ueblueprint-style.css
vendored
1
dist/css/ueblueprint-style.css
vendored
File diff suppressed because one or more lines are too long
1
dist/css/ueblueprint-style.css.map
vendored
1
dist/css/ueblueprint-style.css.map
vendored
@@ -1 +0,0 @@
|
||||
{"version":3,"sourceRoot":"","sources":["../../scss/ueblueprint-style.scss"],"names":[],"mappings":"AAAA,WACI,qBACA,iBACA,IACI,kGAIR,WACI,qBACA,mBACA,IACI,sGAIR,cACI,cACA,kBACA,8EACA,+BACA,iBAGJ,qBACI,aACA,kBACA,MACA,QACA,OACA,aACA,0BACA,UAGJ,mBACI,gBAGJ,mBACI,kBACA,aACA,gBACA,qBAGJ,oDACI,gBAGJ,UACI,kFACA,kBACA,eACA,gBACA,kEACA,mEACA,yBACA,iBAEI,s3BA0BJ,gBAEI,sZAQJ,sFACA,gEACA,oDACA,qBACA,2BACA,gBAGJ,kDACI,gBAGJ,mDACI,eAGJ,qBAEI,eACA,6CAGJ,gBACI,eAGJ,gBACI,mBAGJ,gBACI,kBAGJ,gBACI,mBAGJ,gBACI,iBAGJ,gBACI,mBAGJ,gBACI,kBAGJ,iBACI,mBAGJ,iBACI,kBAGJ,iBACI,mBAGJ,iBACI,iBACA,uDAGJ,iBACI,mBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,iBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,sBACA,uDAGJ,kBACI,iBACA,uDAGJ,kBACI,sBACA,uDAGJ,kBACI,sBACA,uDAGJ,kBACI,kBACA,QACA,SACA,wGAGJ,SACI,cACA,kBACA,sGACA,qCACA,uDAGJ,wEACI,YAGJ,iBACI,YACA,YACA,+CAGJ,+BACI,iBACI,kNAIJ,oDACA,0CACA,sDACA,0BACA,oBAGJ,kBACI,kBACA,YACA,gCACA,qCACA,0BACA,gBAGJ,iBACI,kBACA,6DACA,gEACA,8EACA,aACA,gBACA,mBAGJ,eACI,iFACA,qBACA,mBAGJ,eACI,aACA,cACA,WACA,gBACA,mBAGJ,iBACI,kBACA,iBAGJ,kBACI,kBAGJ,iBACI,aAGJ,iDACI,cAGJ,QACI,cACA,gBAGJ,wEACI,aAGJ,6EACI,qCACA,iBAGJ,0BACI,iBAGJ,cACI,qBACA,kBACA,YACA,aACA,wBACA,wBAGJ,sBACI,WACA,cACA,kBACA,MACA,QACA,SACA,OACA,sCACA,kBAGJ,2CACI,gCAGJ,qBACI,WACA,cACA,kBACA,qBACA,sBACA,QACA,SACA,kCACA,qCACA,4CAGJ,gEACI,8DACA,8DACA,8DACA,8DACA,oGACA,qGACA,kBACA,wCACA,yCACA,0CACA,4CAGJ,aACI,cACA,kBACA,kBACA,MACA,OACA,QACA,SACA,iBAEI,wlDAmDJ,gBAEI,gQAWJ,oBAEI,wJAOJ,4BAGJ,gDACI,mBAIJ,eACI,mBAGJ,SACI,kEAEA,uEACA,cACA,8CAKA,kBAGJ,aACI,iEACA,kBACA,MACA,OACA,WACA,YACA,eACA,8FACA,iBAGJ,kBACI,mBACA,4BACA,eAGJ,8DAEI,eACA,4BAGJ,iBACI,cACA,mBACA,kBACA,kDACA,qHAOA,sBACA,gBACA,kBACA,4EACA,+BACA,mBACA","file":"ueblueprint-style.css"}
|
||||
@@ -8,7 +8,7 @@
|
||||
<style>
|
||||
</style>
|
||||
<link rel="stylesheet" href="dist/css/ueblueprint-node-value-type-color.css">
|
||||
<link rel="stylesheet" href="dist/css/ueblueprint-style.css">
|
||||
<link rel="stylesheet" href="dist/css/ueb-style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
"description": "Unreal Engine's Blueprint visualisation library",
|
||||
"main": "ueblueprint.js",
|
||||
"scripts": {
|
||||
"build": "rollup --config && sass scss:dist/css --style=compressed"
|
||||
"build": "rollup --config && sass scss/export.scss:dist/css/ueb-style.css --style=compressed"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@@ -34,4 +34,4 @@
|
||||
"dependencies": {
|
||||
"parsimmon": "^1.18.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
4
scss/export.scss
Normal file
4
scss/export.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
@use "style.scss";
|
||||
@use "ueb-node.scss";
|
||||
@use "ueb-pin.scss";
|
||||
@use "ueb-type-color.scss";
|
||||
@@ -34,14 +34,16 @@ ueb-blueprint {
|
||||
}
|
||||
|
||||
.ueb-viewport-zoom {
|
||||
color: #4d4d4db7;
|
||||
margin-left: auto;
|
||||
color : #4d4d4db7;
|
||||
font-size : 20px;
|
||||
}
|
||||
|
||||
.ueb-viewport-body {
|
||||
position : relative;
|
||||
height : 30rem;
|
||||
overflow : hidden;
|
||||
scrollbar-width: none;
|
||||
scrollbar-width: 0;
|
||||
}
|
||||
|
||||
ueb-blueprint[data-focused="true"] .ueb-viewport-body {
|
||||
@@ -98,7 +100,6 @@ ueb-blueprint[data-focused="true"] .ueb-viewport-body {
|
||||
background-repeat : repeat-x, repeat-y, repeat, repeat, repeat, repeat;
|
||||
transform : scale(var(--ueb-scale), var(--ueb-scale));
|
||||
transform-origin : 0 0;
|
||||
backface-visibility: hidden;
|
||||
overflow : hidden;
|
||||
}
|
||||
|
||||
@@ -208,143 +209,6 @@ ueb-blueprint[data-drag-scrolling="false"] .ueb-grid {
|
||||
transform: translateX(calc(var(--ueb-translate-x) * 1px)) translateY(calc(var(--ueb-translate-y) * 1px));
|
||||
}
|
||||
|
||||
ueb-node {
|
||||
display : block;
|
||||
position : absolute;
|
||||
transform : translateX(calc(var(--ueb-position-x) * 1px)) translateY(calc(var(--ueb-position-y) * 1px));
|
||||
border-radius: var(--ueb-node-radius);
|
||||
box-shadow : 0 0 1px 0 black, 1px 4px 6px 0 rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] ueb-node {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.ueb-node-border {
|
||||
margin : -3px;
|
||||
padding : 3px;
|
||||
border-radius: calc(var(--ueb-node-radius) * 1.4);
|
||||
}
|
||||
|
||||
.ueb-selected>.ueb-node-border {
|
||||
background-image:
|
||||
linear-gradient(to right, #f1b000 0%, #f1b000 100%),
|
||||
linear-gradient(to bottom, #f1b000 0%, #cc6700 100%),
|
||||
linear-gradient(to right, #cc6700 0%, #cc6700 100%),
|
||||
linear-gradient(to bottom, #f1b000 0%, #cc6700 100%);
|
||||
background-size : 100% 7px, 7px 100%, 100% 7px, 7px 100%;
|
||||
background-position: top, right, bottom, left;
|
||||
background-repeat : repeat-x, repeat-y, repeat-x, repeat-y;
|
||||
outline : 3px solid #cc6700;
|
||||
outline-offset : -6px;
|
||||
}
|
||||
|
||||
.ueb-node-content {
|
||||
position : relative;
|
||||
padding : 1px;
|
||||
box-shadow : inset 0 0 2px 0 black;
|
||||
border-radius: var(--ueb-node-radius);
|
||||
background : rgba(0, 0, 0, 0.7);
|
||||
overflow : hidden;
|
||||
}
|
||||
|
||||
.ueb-node-header {
|
||||
padding : 0.2em 0.7em;
|
||||
box-shadow : inset 0 1px 2px 0 #313631, inset 0 2px 0 0 #92c381;
|
||||
border-radius: var(--ueb-node-radius) var(--ueb-node-radius) 0 0;
|
||||
background : linear-gradient(170deg, #5f815a 0%, #5f815a 50%, transparent 100%);
|
||||
color : #c0c0c0;
|
||||
font-weight : 600;
|
||||
white-space : nowrap;
|
||||
}
|
||||
|
||||
.ueb-node-name {
|
||||
background: radial-gradient(closest-side, rgba(0, 0, 0, 0.5) 0%, transparent 90%);
|
||||
margin : -0.1em -1.6em;
|
||||
padding : 0.1em 1.6em;
|
||||
}
|
||||
|
||||
.ueb-node-body {
|
||||
display : flex;
|
||||
padding : 6px 0;
|
||||
color : white;
|
||||
font-weight: 100;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ueb-node-inputs {
|
||||
margin-right: auto;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.ueb-node-outputs {
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.ueb-node-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ueb-node[data-advanced-display] .ueb-node-expand {
|
||||
display: block;
|
||||
}
|
||||
|
||||
ueb-pin {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
}
|
||||
|
||||
ueb-node[data-advanced-display="Hidden"] ueb-pin[data-advanced-view="true"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] ueb-pin:hover {
|
||||
background: var(--ueb-pin-background);
|
||||
cursor : crosshair;
|
||||
}
|
||||
|
||||
.ueb-node-outputs ueb-pin {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.ueb-pin-icon {
|
||||
display : inline-block;
|
||||
position : relative;
|
||||
width : 0.85em;
|
||||
height : 0.85em;
|
||||
vertical-align: baseline;
|
||||
margin : 0 0.4em -1px 0.1em;
|
||||
}
|
||||
|
||||
.ueb-pin-icon::before {
|
||||
content : "";
|
||||
display : block;
|
||||
position : absolute;
|
||||
top : 0;
|
||||
right : 0;
|
||||
bottom : 0;
|
||||
left : 0;
|
||||
border : 2px solid var(--ueb-pin-color);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
ueb-pin.ueb-pin-fill .ueb-pin-icon::before {
|
||||
background: var(--ueb-pin-color);
|
||||
}
|
||||
|
||||
.ueb-pin-icon::after {
|
||||
content : "";
|
||||
display : block;
|
||||
position : absolute;
|
||||
top : calc(50% - 0.3em);
|
||||
left : calc(100% + 1px);
|
||||
width : 0;
|
||||
height : 0;
|
||||
border-top : 0.3em solid transparent;
|
||||
border-bottom: 0.3em solid transparent;
|
||||
border-left : 0.3em solid var(--ueb-pin-color);
|
||||
}
|
||||
|
||||
.ueb-positioned {
|
||||
--ueb-computed-min-x : min(var(--ueb-from-x), var(--ueb-to-x));
|
||||
--ueb-computed-max-x : max(var(--ueb-from-x), var(--ueb-to-x));
|
||||
@@ -452,62 +316,4 @@ ueb-blueprint[data-selecting="true"] ueb-selector {
|
||||
|
||||
ueb-selector>* {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
ueb-link {
|
||||
--ueb-from-input-coefficient: calc(2 * var(--ueb-from-input) - 1);
|
||||
/* when from-y > to-y */
|
||||
--ueb-y-opposite : clamp(0, var(--ueb-from-y) - var(--ueb-to-y) - 1, 1);
|
||||
display : block;
|
||||
min-width : calc(var(--ueb-link-min-width) * 1px);
|
||||
/*
|
||||
* This makes the element transparent to the hover events so that multiple path elements can stand nearby and have
|
||||
* their hover behavior correctly firing.
|
||||
*/
|
||||
visibility : hidden;
|
||||
}
|
||||
|
||||
ueb-link svg {
|
||||
--ueb-y-opposite-coefficient: calc(2* var(--ueb-y-opposite) - 1);
|
||||
position : absolute;
|
||||
top : 0;
|
||||
left : 0;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
min-height : 1px;
|
||||
transform : scaleY(calc(var(--ueb-y-opposite-coefficient) * var(--ueb-from-input-coefficient)));
|
||||
overflow : visible;
|
||||
}
|
||||
|
||||
ueb-link svg path {
|
||||
visibility : visible;
|
||||
stroke : var(--ueb-pin-color);
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
ueb-link.ueb-link-dragging svg path,
|
||||
ueb-link svg g:hover path {
|
||||
stroke-width: 5;
|
||||
transition : stroke-width 0.8s;
|
||||
}
|
||||
|
||||
ueb-link-message {
|
||||
display : block;
|
||||
visibility: visible;
|
||||
position : absolute;
|
||||
top : calc(100% * (1 - var(--ueb-y-opposite)) + 22px);
|
||||
left : calc(
|
||||
/* If originates from an output pin, start with 100% */
|
||||
(1 - var(--ueb-from-input)) * 100%
|
||||
/* If originates from an input pin, then sum, otherwise subtract */
|
||||
+ (var(--ueb-from-input-coefficient)) * var(--ueb-start-percentage)
|
||||
/* Fixed offset */
|
||||
+ 15px);
|
||||
border : 1px solid #000;
|
||||
padding : 4px 8px;
|
||||
border-radius: 2px;
|
||||
background : linear-gradient(to bottom, #2a2a2a 0, #151515 50%, #2a2a2a 100%);
|
||||
color : var(--ueb-pin-dim-color);
|
||||
white-space : nowrap;
|
||||
z-index : 1000000;
|
||||
}
|
||||
57
scss/ueb-link.scss
Normal file
57
scss/ueb-link.scss
Normal file
@@ -0,0 +1,57 @@
|
||||
ueb-link {
|
||||
--ueb-from-input-coefficient: calc(2 * var(--ueb-from-input) - 1);
|
||||
/* when from-y > to-y */
|
||||
--ueb-y-opposite : clamp(0, var(--ueb-from-y) - var(--ueb-to-y) - 1, 1);
|
||||
display : block;
|
||||
min-width : calc(var(--ueb-link-min-width) * 1px);
|
||||
/*
|
||||
* This makes the element transparent to the hover events so that multiple path elements can stand nearby and have
|
||||
* their hover behavior correctly firing.
|
||||
*/
|
||||
visibility : hidden;
|
||||
}
|
||||
|
||||
ueb-link svg {
|
||||
--ueb-y-opposite-coefficient: calc(2* var(--ueb-y-opposite) - 1);
|
||||
position : absolute;
|
||||
top : 0;
|
||||
left : 0;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
min-height : 1px;
|
||||
transform : scaleY(calc(var(--ueb-y-opposite-coefficient) * var(--ueb-from-input-coefficient)));
|
||||
overflow : visible;
|
||||
}
|
||||
|
||||
ueb-link svg path {
|
||||
visibility : visible;
|
||||
stroke : var(--ueb-pin-color);
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
ueb-link.ueb-link-dragging svg path,
|
||||
ueb-link svg g:hover path {
|
||||
stroke-width: 5;
|
||||
transition : stroke-width 0.8s;
|
||||
}
|
||||
|
||||
ueb-link-message {
|
||||
display : block;
|
||||
visibility: visible;
|
||||
position : absolute;
|
||||
top : calc(100% * (1 - var(--ueb-y-opposite)) + 22px);
|
||||
left : calc(
|
||||
/* If originates from an output pin, start with 100% */
|
||||
(1 - var(--ueb-from-input)) * 100%
|
||||
/* If originates from an input pin, then sum, otherwise subtract */
|
||||
+ (var(--ueb-from-input-coefficient)) * var(--ueb-start-percentage)
|
||||
/* Fixed offset */
|
||||
+ 15px);
|
||||
border : 1px solid #000;
|
||||
padding : 4px 8px;
|
||||
border-radius: 2px;
|
||||
background : linear-gradient(to bottom, #2a2a2a 0, #151515 50%, #2a2a2a 100%);
|
||||
color : var(--ueb-pin-dim-color);
|
||||
white-space : nowrap;
|
||||
z-index : 1000000;
|
||||
}
|
||||
80
scss/ueb-node.scss
Normal file
80
scss/ueb-node.scss
Normal file
@@ -0,0 +1,80 @@
|
||||
ueb-node {
|
||||
display : block;
|
||||
position : absolute;
|
||||
transform : translateX(calc(var(--ueb-position-x) * 1px)) translateY(calc(var(--ueb-position-y) * 1px));
|
||||
border-radius: var(--ueb-node-radius);
|
||||
box-shadow : 0 0 1px 0 black, 1px 4px 6px 0 rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] ueb-node {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.ueb-node-border {
|
||||
margin : -3px;
|
||||
padding : 3px;
|
||||
border-radius: calc(var(--ueb-node-radius) * 1.4);
|
||||
}
|
||||
|
||||
.ueb-selected>.ueb-node-border {
|
||||
background-image:
|
||||
linear-gradient(to right, #f1b000 0%, #f1b000 100%),
|
||||
linear-gradient(to bottom, #f1b000 0%, #cc6700 100%),
|
||||
linear-gradient(to right, #cc6700 0%, #cc6700 100%),
|
||||
linear-gradient(to bottom, #f1b000 0%, #cc6700 100%);
|
||||
background-size : 100% 7px, 7px 100%, 100% 7px, 7px 100%;
|
||||
background-position: top, right, bottom, left;
|
||||
background-repeat : repeat-x, repeat-y, repeat-x, repeat-y;
|
||||
outline : 3px solid #cc6700;
|
||||
outline-offset : -6px;
|
||||
}
|
||||
|
||||
.ueb-node-content {
|
||||
position : relative;
|
||||
padding : 1px;
|
||||
box-shadow : inset 0 0 2px 0 black;
|
||||
border-radius: var(--ueb-node-radius);
|
||||
background : rgba(0, 0, 0, 0.7);
|
||||
overflow : hidden;
|
||||
}
|
||||
|
||||
.ueb-node-header {
|
||||
padding : 0.2em 0.7em;
|
||||
box-shadow : inset 0 1px 2px 0 #313631, inset 0 2px 0 0 #92c381;
|
||||
border-radius: var(--ueb-node-radius) var(--ueb-node-radius) 0 0;
|
||||
background : linear-gradient(170deg, #5f815a 0%, #5f815a 50%, transparent 100%);
|
||||
color : #c0c0c0;
|
||||
font-weight : 600;
|
||||
white-space : nowrap;
|
||||
}
|
||||
|
||||
.ueb-node-name {
|
||||
background: radial-gradient(closest-side, rgba(0, 0, 0, 0.5) 0%, transparent 90%);
|
||||
margin : -0.1em -1.6em;
|
||||
padding : 0.1em 1.6em;
|
||||
}
|
||||
|
||||
.ueb-node-body {
|
||||
display : flex;
|
||||
padding : 3px 0;
|
||||
color : white;
|
||||
font-weight: 100;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ueb-node-inputs {
|
||||
margin-right: auto;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.ueb-node-outputs {
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.ueb-node-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ueb-node[data-advanced-display] .ueb-node-expand {
|
||||
display: block;
|
||||
}
|
||||
97
scss/ueb-pin.scss
Normal file
97
scss/ueb-pin.scss
Normal file
@@ -0,0 +1,97 @@
|
||||
ueb-pin {
|
||||
display: block;
|
||||
margin : 5px 0;
|
||||
padding: 2px 2px;
|
||||
|
||||
&>* {
|
||||
display : inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
ueb-node[data-advanced-display="Hidden"] ueb-pin[data-advanced-view="true"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] ueb-pin:hover {
|
||||
background: var(--ueb-pin-background);
|
||||
cursor : crosshair;
|
||||
}
|
||||
|
||||
.ueb-node-outputs ueb-pin {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.ueb-pin-icon-exec {
|
||||
display : inline-block;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
.ueb-pin-icon-value {
|
||||
display : inline-block;
|
||||
position : relative;
|
||||
width : 0.85em;
|
||||
height : 0.85em;
|
||||
vertical-align: baseline;
|
||||
margin : 0 0.4em -1px 0.1em;
|
||||
}
|
||||
|
||||
.ueb-pin-icon-value::before {
|
||||
content : "";
|
||||
display : block;
|
||||
position : absolute;
|
||||
top : 0;
|
||||
right : 0;
|
||||
bottom : 0;
|
||||
left : 0;
|
||||
border : 2px solid var(--ueb-pin-color);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
ueb-pin.ueb-pin-fill .ueb-pin-icon-value::before {
|
||||
background: var(--ueb-pin-color);
|
||||
}
|
||||
|
||||
.ueb-pin-icon-value::after {
|
||||
content : "";
|
||||
display : block;
|
||||
position : absolute;
|
||||
top : calc(50% - 0.3em);
|
||||
left : calc(100% + 1px);
|
||||
width : 0;
|
||||
height : 0;
|
||||
border-top : 0.3em solid transparent;
|
||||
border-bottom: 0.3em solid transparent;
|
||||
border-left : 0.3em solid var(--ueb-pin-color);
|
||||
}
|
||||
|
||||
.ueb-pin-content>span {
|
||||
display : inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ueb-pin-exec .ueb-pin-name {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ueb-pin-input {
|
||||
margin-left : 3px;
|
||||
border : 1px solid #a0a0a0;
|
||||
border-radius: 3px;
|
||||
padding : 1px 4px;
|
||||
min-width : 10px;
|
||||
max-width : 400px;
|
||||
max-height : 14em;
|
||||
background : none;
|
||||
color : #a0a0a0;
|
||||
cursor : text;
|
||||
overflow : auto;
|
||||
white-space : normal;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
background: #505250;
|
||||
outline : none;
|
||||
}
|
||||
}
|
||||
104
scss/ueblueprint-node-value-type-color.scss → scss/ueb-type-color.scss
Executable file → Normal file
104
scss/ueblueprint-node-value-type-color.scss → scss/ueb-type-color.scss
Executable file → Normal file
@@ -1,53 +1,53 @@
|
||||
.ueb {
|
||||
$ueb-pin-color : white;
|
||||
$ueb-pin-dim-color : #afafaf;
|
||||
--ueb-pin-color : #{$ueb-pin-color};
|
||||
--ueb-pin-dim-color: #{$ueb-pin-dim-color};
|
||||
}
|
||||
|
||||
.ueb-pin-boolean {
|
||||
$ueb-pin-color : rgb(30%, 0, 0);
|
||||
--ueb-pin-color: #{$ueb-pin-color};
|
||||
}
|
||||
|
||||
.ueb-pin-class {
|
||||
$ueb-pin-color : #5800bb;
|
||||
--ueb-pin-color: #{$ueb-pin-color};
|
||||
}
|
||||
|
||||
.ueb-pin-float {
|
||||
$ueb-pin-color : #9ffb44;
|
||||
--ueb-pin-color: #{$ueb-pin-color};
|
||||
}
|
||||
|
||||
.ueb-pin-int {
|
||||
$ueb-pin-color : #1fe0ad;
|
||||
--ueb-pin-color: #{$ueb-pin-color};
|
||||
}
|
||||
|
||||
.ueb-pin-name {
|
||||
$ueb-pin-color : #cb81fc;
|
||||
--ueb-pin-color: #{$ueb-pin-color};
|
||||
}
|
||||
|
||||
.ueb-pin-object {
|
||||
$ueb-pin-color : #00a8f2;
|
||||
$ueb-pin-color : rgba(0%, 40%, 01%);
|
||||
--ueb-pin-color: #{$ueb-pin-color};
|
||||
}
|
||||
|
||||
.ueb-pin-rotator {
|
||||
$ueb-pin-color : #9eb1fc;
|
||||
--ueb-pin-color: #{$ueb-pin-color};
|
||||
}
|
||||
|
||||
.ueb-pin-string {
|
||||
$ueb-pin-color : #fc00d2;
|
||||
--ueb-pin-color : #{$ueb-pin-color};
|
||||
--ueb-pin-background: linear-gradient(90deg, #fc00d220, #fc00d280 15%, #fc00d250 85%, transparent);
|
||||
}
|
||||
|
||||
.ueb-pin-vector {
|
||||
$ueb-pin-color : #fcc823;
|
||||
--ueb-pin-color: #{$ueb-pin-color};
|
||||
.ueb {
|
||||
$ueb-pin-color : white;
|
||||
$ueb-pin-dim-color : #afafaf;
|
||||
--ueb-pin-color : #{$ueb-pin-color};
|
||||
--ueb-pin-dim-color: #{$ueb-pin-dim-color};
|
||||
}
|
||||
|
||||
.ueb-pin-boolean {
|
||||
$ueb-pin-color : rgb(30%, 0, 0);
|
||||
--ueb-pin-color: #{$ueb-pin-color};
|
||||
}
|
||||
|
||||
.ueb-pin-class {
|
||||
$ueb-pin-color : #5800bb;
|
||||
--ueb-pin-color: #{$ueb-pin-color};
|
||||
}
|
||||
|
||||
.ueb-pin-float {
|
||||
$ueb-pin-color : #9ffb44;
|
||||
--ueb-pin-color: #{$ueb-pin-color};
|
||||
}
|
||||
|
||||
.ueb-pin-int {
|
||||
$ueb-pin-color : #1fe0ad;
|
||||
--ueb-pin-color: #{$ueb-pin-color};
|
||||
}
|
||||
|
||||
.ueb-pin-name {
|
||||
$ueb-pin-color : #cb81fc;
|
||||
--ueb-pin-color: #{$ueb-pin-color};
|
||||
}
|
||||
|
||||
.ueb-pin-object {
|
||||
$ueb-pin-color : #00a8f2;
|
||||
$ueb-pin-color : rgba(0%, 40%, 01%);
|
||||
--ueb-pin-color: #{$ueb-pin-color};
|
||||
}
|
||||
|
||||
.ueb-pin-rotator {
|
||||
$ueb-pin-color : #9eb1fc;
|
||||
--ueb-pin-color: #{$ueb-pin-color};
|
||||
}
|
||||
|
||||
.ueb-pin-string {
|
||||
$ueb-pin-color : #fc00d2;
|
||||
--ueb-pin-color : #{$ueb-pin-color};
|
||||
--ueb-pin-background: linear-gradient(90deg, #fc00d220, #fc00d280 15%, #fc00d250 85%, transparent);
|
||||
}
|
||||
|
||||
.ueb-pin-vector {
|
||||
$ueb-pin-color : #fcc823;
|
||||
--ueb-pin-color: #{$ueb-pin-color};
|
||||
}
|
||||
Reference in New Issue
Block a user