mirror of
https://github.com/barsdeveloper/ueblueprint.git
synced 2026-02-04 08:50:33 +08:00
Simplify layout using grid (#7)
* Various style fix WIP * Removing pin wrapper WIP * Restore pin wrapper * WIP * Several style fixes * Fix dropdown resizing * Minor style adjustment, dorpdown bug fix * Pins sizing * Additional tests and style fixes * More size tests and fixes * More robust styling * Small format fix
This commit is contained in:
barsdeveloper
130
dist/css/ueb-style.css
vendored
130
dist/css/ueb-style.css
vendored
@@ -153,6 +153,8 @@ ueb-node.ueb-node-style-minimal {
|
||||
}
|
||||
|
||||
ueb-node.ueb-node-style-minimal ueb-pin {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
@@ -166,6 +168,7 @@ ueb-node.ueb-node-style-minimal .ueb-node-border {
|
||||
}
|
||||
|
||||
ueb-node.ueb-node-style-minimal .ueb-pin-wrapper {
|
||||
margin: 0;
|
||||
padding: 4px 6px;
|
||||
}
|
||||
|
||||
@@ -294,8 +297,11 @@ ueb-node[data-selected=true] > .ueb-node-border {
|
||||
}
|
||||
|
||||
.ueb-node-wrapper {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template: "top top top" min-content "input center output" min-content "input center variadic" 1fr "development development development" min-content "expansion expansion expansion" min-content/min-content auto min-content;
|
||||
justify-items: space-between;
|
||||
padding: 1px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: inset 0 0 2px 0 black;
|
||||
border-radius: var(--ueb-node-radius);
|
||||
background: rgba(14, 16, 10, 0.8);
|
||||
@@ -304,6 +310,7 @@ ueb-node[data-selected=true] > .ueb-node-border {
|
||||
|
||||
.ueb-node-outputs ueb-pin[data-type=exec] .ueb-pin-wrapper {
|
||||
margin-right: -3px;
|
||||
min-height: 26px;
|
||||
}
|
||||
|
||||
ueb-blueprint[data-scrolling=false][data-selecting=false] .ueb-node-wrapper,
|
||||
@@ -318,8 +325,9 @@ ueb-blueprint[data-scrolling=false][data-selecting=false] ueb-node.ueb-node-styl
|
||||
}
|
||||
|
||||
.ueb-node-top {
|
||||
grid-area: top;
|
||||
color: #d0d0d0;
|
||||
font-size: calc(var(--ueb-font-size) + 1px);
|
||||
font-size: calc(var(--ueb-font-size) + 0.5px);
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -335,10 +343,6 @@ ueb-node.ueb-node-style-event .ueb-node-top {
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
ueb-node.ueb-node-style-event .ueb-node-top ueb-pin {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.ueb-node-style-default .ueb-node-top {
|
||||
padding: 2px 20px 2px 8px;
|
||||
box-shadow: inset 5px 1px 5px -3px rgba(255, 255, 255, 0.2509803922), inset 0 1px 2px 0 rgba(255, 255, 255, 0.2509803922);
|
||||
@@ -362,6 +366,10 @@ ueb-node.ueb-node-style-event .ueb-node-top ueb-pin {
|
||||
padding: 2px 15px;
|
||||
}
|
||||
|
||||
.ueb-node-name:last-child {
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
.ueb-zoom--2 .ueb-node-name {
|
||||
background: none;
|
||||
}
|
||||
@@ -393,41 +401,37 @@ ueb-node[data-pure-function=true] .ueb-node-name-symbol {
|
||||
color: #a9b78f;
|
||||
}
|
||||
|
||||
.ueb-node-content {
|
||||
display: grid;
|
||||
grid-template: min-content 1fr/min-content min-content;
|
||||
justify-content: space-between;
|
||||
padding: 2px 0;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.ueb-node-style-default .ueb-node-content {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.ueb-node-has-inputs .ueb-node-inputs {
|
||||
grid-column: 1;
|
||||
grid-row: 1/span 2;
|
||||
padding-left: 10px;
|
||||
grid-area: input;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.ueb-node-outputs {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
padding-left: 20px;
|
||||
grid-area: output;
|
||||
}
|
||||
|
||||
.ueb-node-outputs,
|
||||
.ueb-node-variadic {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.ueb-node-has-inputs .ueb-node-outputs,
|
||||
.ueb-node-has-inputs .ueb-node-variadic {
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
.ueb-node-variadic {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
grid-area: variadic;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 5px;
|
||||
align-self: start;
|
||||
justify-self: end;
|
||||
padding: 4px 6px;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ueb-node-developmentonly {
|
||||
grid-area: development;
|
||||
margin-top: 4px;
|
||||
padding: 2px;
|
||||
background: repeating-linear-gradient(-45deg, transparent 0, #57590a 1px, #57590a 11px, transparent 12px, transparent 24px);
|
||||
@@ -447,6 +451,7 @@ ueb-node[data-pure-function=true] .ueb-node-name-symbol {
|
||||
}
|
||||
|
||||
.ueb-node-expansion {
|
||||
grid-area: expansion;
|
||||
display: none;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -509,29 +514,27 @@ ueb-node.ueb-node-style-glass .ueb-node-name {
|
||||
background: none;
|
||||
}
|
||||
|
||||
ueb-node.ueb-node-style-glass .ueb-node-top {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
translate: -50%;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
ueb-node.ueb-node-style-glass .ueb-node-outputs:first-child {
|
||||
padding-left: 8px;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
ueb-node.ueb-node-style-operation .ueb-node-top {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
translate: -50% -50%;
|
||||
padding: 0 50px;
|
||||
grid-area: center;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
padding: 5px;
|
||||
font-size: 28px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
ueb-node.ueb-node-style-operation .ueb-node-inputs {
|
||||
margin-right: 100px;
|
||||
ueb-node.ueb-node-style-operation .ueb-node-outputs {
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
ueb-node.ueb-node-style-operation .ueb-node-variadic {
|
||||
align-self: start;
|
||||
margin-top: 10px;
|
||||
margin-left: -12px;
|
||||
}
|
||||
|
||||
ueb-node:not(.ueb-node-style-comment) {
|
||||
@@ -575,12 +578,13 @@ ueb-node.ueb-node-style-comment .ueb-node-top {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
ueb-node.ueb-node-style-conversion .ueb-node-content::after {
|
||||
ueb-node.ueb-node-style-conversion .ueb-node-wrapper::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: calc(50% - 3px);
|
||||
left: calc(50% - 3px);
|
||||
grid-area: center;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
margin: 10px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
@@ -599,11 +603,12 @@ ueb-pin {
|
||||
rgba(var(--ueb-pin-color-rgb), 0.35) 95%,
|
||||
transparent);
|
||||
--ueb-pin-color: rgb(var(--ueb-pin-color-rgb));
|
||||
display: block;
|
||||
}
|
||||
|
||||
ueb-pin {
|
||||
display: block;
|
||||
min-height: 32px;
|
||||
.ueb-node-inputs ueb-pin,
|
||||
.ueb-node-outputs ueb-pin {
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
ueb-pin.ueb-pin-input-wrap .ueb-pin-content {
|
||||
@@ -612,6 +617,7 @@ ueb-pin.ueb-pin-input-wrap .ueb-pin-content {
|
||||
|
||||
.ueb-node-top ueb-pin {
|
||||
min-height: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.ueb-zoom--10 ueb-pin {
|
||||
@@ -624,18 +630,20 @@ ueb-node[data-advanced-display=Hidden] ueb-pin[data-advanced-view=true][data-lin
|
||||
|
||||
.ueb-pin-wrapper {
|
||||
display: inline-flex;
|
||||
box-sizing: border-box;
|
||||
padding: 3px 5px;
|
||||
min-height: 24px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
ueb-node.ueb-node-style-minimal .ueb-pin-wrapper {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.ueb-node-top .ueb-pin-wrapper {
|
||||
padding: 2px 4px 2px 10px;
|
||||
}
|
||||
|
||||
.ueb-node-content .ueb-pin-wrapper {
|
||||
margin: 4px 0 0 0;
|
||||
padding: 2px 2px;
|
||||
}
|
||||
|
||||
ueb-blueprint[data-scrolling=false][data-selecting=false] .ueb-pin-wrapper:hover {
|
||||
background: var(--ueb-pin-background);
|
||||
cursor: crosshair;
|
||||
@@ -678,11 +686,6 @@ ueb-pin[data-connectable=false] .ueb-pin-icon {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
ueb-node.ueb-node-style-minimal .ueb-pin-wrapper,
|
||||
ueb-node.ueb-node-style-minimal .ueb-pin-icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ueb-pin-icon > svg {
|
||||
vertical-align: top;
|
||||
}
|
||||
@@ -699,6 +702,7 @@ ueb-pin[data-linked=true] .ueb-pin-tofill {
|
||||
|
||||
ueb-pin.ueb-node-variadic-default {
|
||||
position: relative;
|
||||
margin-top: 14px;
|
||||
}
|
||||
ueb-pin.ueb-node-variadic-default::before {
|
||||
content: "";
|
||||
@@ -706,7 +710,7 @@ ueb-pin.ueb-node-variadic-default::before {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
top: 0;
|
||||
top: -8px;
|
||||
left: 6px;
|
||||
background: linear-gradient(90deg, transparent 0, #404240 6px, #404240 calc(100% - 6px), transparent 100%);
|
||||
}
|
||||
@@ -814,16 +818,16 @@ ueb-dropdown {
|
||||
}
|
||||
|
||||
ueb-dropdown.ueb-pin-input {
|
||||
margin-right: 15px;
|
||||
margin-right: 5px;
|
||||
padding-right: 10px;
|
||||
background: #101010 !important;
|
||||
color: #c0c0c0;
|
||||
border-color: #404040;
|
||||
}
|
||||
|
||||
ueb-dropdown.ueb-pin-input select {
|
||||
ueb-dropdown.ueb-pin-input .ueb-pin-input-content {
|
||||
padding: 6px;
|
||||
min-width: 170px;
|
||||
width: max(170px, var(--ueb-dropdown-width));
|
||||
max-width: 400px;
|
||||
background: none;
|
||||
font-size: 10px;
|
||||
|
||||
Reference in New Issue
Block a user