@font-face { font-family: "Roboto"; font-weight: lighter; src: url("../font/roboto-light.woff2") format("woff2"), url("../font/roboto-light.woff") format("woff"); } @font-face { font-family: "Roboto"; font-weight: normal; src: url("../font/roboto-regular.woff2") format("woff2"), url("../font/roboto-regular.woff") format("woff"); } @font-face { font-family: "Roboto"; font-weight: bold; src: url("../font/roboto-bold.woff2") format("woff2"), url("../font/roboto-bold.woff") format("woff"); } ueb-blueprint { --ueb-scale: 1; --ueb-grid-actual-size: var(--ueb-grid-size); display: block; position: relative; font-family: Roboto, Noto, Oxygen, Ubuntu, "Open Sans", "Helvetica Neue", sans-serif; font-size: var(--ueb-font-size); color: #fff; user-select: none; } ueb-blueprint svg { overflow: visible; } .ueb-viewport-header { display: flex; position: absolute; top: 0; right: 0; left: 0; height: 1.5em; background: rgba(0, 0, 0, 0.5); z-index: 1; } .ueb-viewport-zoom { margin-left: auto; color: rgba(77, 77, 77, 0.7176470588); font-size: 20px; } .ueb-viewport-body { position: relative; height: var(--ueb-height, 30rem); overflow: hidden; scrollbar-width: 0; } ueb-blueprint[data-focused=true] .ueb-viewport-body { overflow: scroll; } .ueb-grid { --ueb-grid-line-actual-width: calc(var(--ueb-grid-line-width) / var(--ueb-scale)); position: absolute; min-width: 100%; min-height: 100%; width: calc((100% + 2 * var(--ueb-grid-expand)) / var(--ueb-scale)); height: calc((100% + 2 * var(--ueb-grid-expand)) / var(--ueb-scale)); background-color: #262626; background-image: linear-gradient(var(--ueb-grid-axis-line-color), var(--ueb-grid-axis-line-color)), linear-gradient(var(--ueb-grid-axis-line-color), var(--ueb-grid-axis-line-color)), linear-gradient(to right, var(--ueb-grid-set-line-color), var(--ueb-grid-set-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent), linear-gradient(to bottom, var(--ueb-grid-set-line-color), var(--ueb-grid-set-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent), linear-gradient(to right, var(--ueb-grid-line-color), var(--ueb-grid-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent), linear-gradient(to bottom, var(--ueb-grid-line-color), var(--ueb-grid-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent); background-size: 100% var(--ueb-grid-line-actual-width), var(--ueb-grid-line-actual-width) 100%, calc(var(--ueb-grid-set) * var(--ueb-grid-actual-size)) calc(var(--ueb-grid-set) * var(--ueb-grid-actual-size)), calc(var(--ueb-grid-set) * var(--ueb-grid-actual-size)) calc(var(--ueb-grid-set) * var(--ueb-grid-actual-size)), var(--ueb-grid-actual-size) var(--ueb-grid-actual-size), var(--ueb-grid-actual-size) var(--ueb-grid-actual-size); background-position: calc(var(--ueb-translate-x) * 1px) calc(var(--ueb-translate-y) * 1px); background-repeat: repeat-x, repeat-y, repeat, repeat, repeat, repeat; transform: scale(var(--ueb-scale), var(--ueb-scale)); transform-origin: 0 0; overflow: hidden; } ueb-blueprint[data-scrolling=true] .ueb-grid { cursor: grabbing; } ueb-blueprint[data-scrolling=false] .ueb-grid { cursor: default; } ueb-blueprint[data-zoom="7"] { --ueb-scale: 2; } ueb-blueprint[data-zoom="6"] { --ueb-scale: 1.875; } ueb-blueprint[data-zoom="5"] { --ueb-scale: 1.75; } ueb-blueprint[data-zoom="4"] { --ueb-scale: 1.675; } ueb-blueprint[data-zoom="3"] { --ueb-scale: 1.5; } ueb-blueprint[data-zoom="2"] { --ueb-scale: 1.375; } ueb-blueprint[data-zoom="1"] { --ueb-scale: 1.25; } ueb-blueprint[data-zoom="-1"] { --ueb-scale: 0.875; } ueb-blueprint[data-zoom="-2"] { --ueb-scale: 0.75; } ueb-blueprint[data-zoom="-3"] { --ueb-scale: 0.675; } ueb-blueprint[data-zoom="-4"] { --ueb-scale: 0.5; --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2); } ueb-blueprint[data-zoom="-5"] { --ueb-scale: 0.375; --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2); } ueb-blueprint[data-zoom="-6"] { --ueb-scale: 0.333333; --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3); } ueb-blueprint[data-zoom="-7"] { --ueb-scale: 0.3; --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3); } ueb-blueprint[data-zoom="-8"] { --ueb-scale: 0.266666; --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3); } ueb-blueprint[data-zoom="-9"] { --ueb-scale: 0.233333; --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3); } ueb-blueprint[data-zoom="-10"] { --ueb-scale: 0.2; --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3); } ueb-blueprint[data-zoom="-11"] { --ueb-scale: 0.166666; --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6); } ueb-blueprint[data-zoom="-12"] { --ueb-scale: 0.133333; --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6); } .ueb-grid-content { position: relative; width: 0; height: 0; transform: translateX(calc(var(--ueb-translate-x) * 1px)) translateY(calc(var(--ueb-translate-y) * 1px)); } .ueb-grid-content > div { width: 0; height: 0; } .ueb-positioned, ueb-link, ueb-blueprint[data-selecting=true] ueb-selector { --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)); --ueb-computed-min-y: min(var(--ueb-from-y), var(--ueb-to-y)); --ueb-computed-max-y: max(var(--ueb-from-y), var(--ueb-to-y)); --ueb-computed-width: max(var(--ueb-from-x) - var(--ueb-to-x), var(--ueb-to-x) - var(--ueb-from-x)); --ueb-computed-height: max(var(--ueb-from-y) - var(--ueb-to-y), var(--ueb-to-y) - var(--ueb-from-y)); position: absolute; top: calc(var(--ueb-computed-min-y) * 1px); left: calc(var(--ueb-computed-min-x) * 1px); width: calc(var(--ueb-computed-width) * 1px); height: calc(var(--ueb-computed-height) * 1px); } ueb-selector { display: block; position: absolute; visibility: hidden; top: 0; left: 0; width: 0; height: 0; background-image: repeating-linear-gradient(90deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(2px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))), repeating-linear-gradient(90deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))), repeating-linear-gradient(90deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(2px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))), repeating-linear-gradient(90deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))), repeating-linear-gradient(180deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(1px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))), repeating-linear-gradient(180deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))), repeating-linear-gradient(0deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(2px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))), repeating-linear-gradient(0deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))); background-size: 100% calc(1px / var(--ueb-scale)), 100% calc(3px / var(--ueb-scale)), 100% calc(1px / var(--ueb-scale)), 100% calc(3px / var(--ueb-scale)), calc(1px / var(--ueb-scale)) 100%, calc(3px / var(--ueb-scale)) 100%, calc(1px / var(--ueb-scale)) 100%, calc(3px / var(--ueb-scale)) 100%; background-position: 0 calc(1px / var(--ueb-scale)), 0 0, 0 calc(100% - 1px / var(--ueb-scale)), 0 100%, calc(1px / var(--ueb-scale)) 0, 0 0, calc(100% - 1px / var(--ueb-scale)) 0, 100% 0; background-repeat: no-repeat; } ueb-blueprint[data-selecting=true] ueb-selector { visibility: visible; } ueb-selector > * { visibility: visible; } .ueb-ellipsis-nowrap-text { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 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; margin-left: calc(var(--ueb-link-start) * -1px); 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))); } ueb-link svg path { visibility: visible; stroke: var(--ueb-link-color); stroke-width: 1; } ueb-link[data-dragging=true] 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((1 - var(--ueb-from-input)) * 100% + (var(--ueb-from-input-coefficient)) * var(--ueb-start-percentage) + 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; } 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); font-weight: lighter; } ueb-blueprint[data-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-node[data-selected=true] > .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-wrapper { position: relative; padding: 1px; box-shadow: inset 0 0 2px 0 black; border-radius: var(--ueb-node-radius); background: rgba(10, 10, 10, 0.8); overflow: hidden; } .ueb-node-top { padding: 0.2em 0.7em; box-shadow: inset 5px 1px 5px -3px #7ba1b3, inset 0 1px 0 0 #111213, inset 0 2px 0 0 #7b9eb3; border-radius: var(--ueb-node-radius) var(--ueb-node-radius) 0 0; background: linear-gradient(170deg, #5ca1dd 0%, #466980 50%, transparent 100%); color: #c0c0c0; font-weight: 900; white-space: nowrap; } ueb-node[data-pure-function=true] .ueb-node-top { box-shadow: inset 5px 1px 5px -3px #7aa674, inset 0 1px 0 0 #111213, inset 0 2px 0 0 #7bb386; background: linear-gradient(170deg, #5f815a 0%, #5f815a 50%, transparent 100%); } .ueb-node-name { background: radial-gradient(ellipse 100% 100% at 35% 50%, rgba(0, 0, 0, 0.35) 20%, transparent 50%); margin: -0.1em -1.6em; padding: 0.1em 1.6em; } .ueb-node-name-symbol { color: #74bff2; } .ueb-node-name-symbol svg { vertical-align: middle; } ueb-node[data-pure-function=true] .ueb-node-name-symbol { color: #aaeda0; } .ueb-node-name-symbol path { vertical-align: middle; } .ueb-node-name-text { vertical-align: baseline; } .ueb-node-content { display: flex; padding: 1px 0; font-weight: 100; white-space: nowrap; } .ueb-node-inputs { margin-right: 20px; padding-left: 8px; } .ueb-node-outputs { margin-left: auto; padding-right: 8px; } .ueb-node-developmentonly { display: none; margin-top: 4px; background: repeating-linear-gradient(-45deg, transparent 0, #57590a 1px, #57590a 11px, transparent 12px, transparent 24px); background: repeating-linear-gradient(-45deg, transparent 0, #57590a 1px, #57590a 11px, transparent 12px, transparent 24px); text-align: center; padding: 2px; letter-spacing: 0.04em; text-shadow: 1px 1px 1px black; } ueb-node[data-enabled-state=DevelopmentOnly] .ueb-node-developmentonly { display: block; } .ueb-node-expansion { display: none; text-align: center; } .ueb-node-expansion-icon { vertical-align: middle; } ueb-blueprint[data-scrolling=false][data-selecting=false] .ueb-node-expansion:hover { background-color: #656765; cursor: pointer; } ueb-node[data-advanced-display] .ueb-node-expansion { display: block; } ueb-node[data-advanced-display=Shown] .ueb-node-expansion-icon { transform: scaleY(-1); } ueb-pin { display: block; min-height: 30px; } ueb-node[data-advanced-display=Hidden] ueb-pin[data-advanced-view=true] { display: none; } .ueb-pin-wrapper { display: inline-block; margin: 4px 0 0 0; padding: 2px 2px; } .ueb-pin-wrapper > * { display: inline-block; vertical-align: middle; } ueb-blueprint[data-scrolling=false][data-selecting=false] .ueb-pin-wrapper:hover { background: var(--ueb-pin-background); cursor: crosshair; } .ueb-node-outputs ueb-pin { text-align: right; } ueb-pin[data-type=exec] .ueb-pin-icon { --ueb-pin-color: white; width: 15px; height: 15px; } .ueb-pin-icon { width: 11px; height: 11px; margin-right: 0.5em; color: var(--ueb-pin-color); } .ueb-pin-icon svg { display: block; width: 100%; height: 100%; } ueb-pin[data-linked=true] .ueb-pin-tofill { fill: currentColor; } .ueb-pin-name { display: inline-block; vertical-align: middle; } ueb-pin[data-type=exec] .ueb-pin-name { display: none; } .ueb-pin-input-wrapper { padding-left: 8px; } .ueb-pin-input { display: inline-block; vertical-align: middle; margin-left: 3px; border: 1px solid #a0a0a0; border-radius: 3px; padding: 0 3px 0 3px; color: #c0c0c0; } .ueb-pin-input:hover, .ueb-pin-input:active, .ueb-pin-input:focus, .ueb-pin-input:focus-within { background: rgba(255, 255, 255, 0.2745098039); outline: none; } ueb-pin[data-type=bool] .ueb-pin-input { appearance: none; padding: 0; height: 18px; width: 18px; background-color: #0f0f0f; color: var(--ueb-pin-color); } ueb-pin[data-type=bool] .ueb-pin-input:checked { background-image: url('data:image/svg+xml,'); } ueb-pin[data-type="/Script/CoreUObject.LinearColor"] .ueb-pin-input { padding: 0; width: 18px; height: 18px; border-color: #505050; border-radius: 0; background-color: var(--ueb-linear-color); } .ueb-pin-input-label ~ .ueb-pin-input { margin-left: 0; } .ueb-pin-input-label { vertical-align: middle; margin-left: 3px; color: #777777; } .ueb-pin-input-content { display: block; outline: none; border: none; padding: 0; min-width: 10px; max-width: 400px; max-height: 16em; line-height: calc(1em + 1px); background: none; color: inherit; cursor: text; overflow: auto; } .ueb-pin-input-content::-webkit-scrollbar { width: 10px; height: 10px; } .ueb-pin-input-content::-webkit-scrollbar-thumb { background: #575757; border-radius: 10px; margin: 4px; } ueb-blueprint { --ueb-pin-color-dim: #afafaf; } ueb-link { --ueb-link-color: rgb(var(--ueb-link-color-rgb)); } ueb-pin { --ueb-pin-background: linear-gradient(90deg, rgba(var(--ueb-pin-color-rgb), 0.15), rgba(var(--ueb-pin-color-rgb), 0.8) 15%, rgba(var(--ueb-pin-color-rgb), 0.5) 60%, rgba(var(--ueb-pin-color-rgb), 0.35) 95%, transparent); --ueb-pin-color: rgb(var(--ueb-pin-color-rgb)); } ueb-pin[data-type=bool] { --ueb-pin-color-rgb: var(--ueb-pin-color-bool); } ueb-pin[data-type=class] { --ueb-pin-color-rgb: var(--ueb-pin-color-class); } ueb-pin[data-type=exec] { --ueb-pin-color-rgb: var(--ueb-pin-color-exec); } ueb-pin[data-type=int] { --ueb-pin-color-rgb: var(--ueb-pin-color-int); } ueb-pin[data-type=name] { --ueb-pin-color-rgb: var(--ueb-pin-color-name); } ueb-pin[data-type=object] { --ueb-pin-color-rgb: var(--ueb-pin-color-object); } ueb-pin[data-type=real] { --ueb-pin-color-rgb: var(--ueb-pin-color-real); } ueb-pin[data-type=rotator] { --ueb-pin-color-rgb: var(--ueb-pin-color-rotator); } ueb-pin[data-type=string] { --ueb-pin-color-rgb: var(--ueb-pin-color-string); } ueb-pin[data-type="/Script/CoreUObject.LinearColor"] { --ueb-pin-color-rgb: var(--ueb-pin-color-linear-color); } ueb-pin[data-type="/Script/CoreUObject.Rotator"] { --ueb-pin-color-rgb: var(--ueb-pin-color-rotator); } ueb-pin[data-type="/Script/CoreUObject.Transform"] { --ueb-pin-color-rgb: var(--ueb-pin-color-transform); } ueb-pin[data-type="/Script/CoreUObject.Vector"] { --ueb-pin-color-rgb: var(--ueb-pin-color-vector); } ueb-pin[data-type=vector] { --ueb-pin-color-rgb: var(--ueb-pin-color-vector); } ueb-window { display: block; position: absolute; top: 0; left: 0; transform: translateX(calc(var(--ueb-position-x) * 1px)) translateY(calc(var(--ueb-position-y) * 1px)); background: #242424; z-index: 1000; } .ueb-window-top { display: flex; flex-direction: row; align-items: center; padding: 4px 8px; height: 30px; background: #1a1a1a; } .ueb-window-name { flex-grow: 1; padding-left: 28px; text-align: center; } .ueb-window-close { padding: 8px; height: 12px; width: 12px; } .ueb-color-picker-theme, .ueb-color-picker-srgb { display: inline-block; vertical-align: middle; } .ueb-color-picker-main { display: grid; grid-template: 1fr/auto min-content min-content min-content; } .ueb-color-picker-wheel { position: relative; padding-top: 100%; min-width: 200px; border-radius: 100%; background: radial-gradient(white 5%, transparent 85%), conic-gradient(from 90deg, #FF0000 0deg, #FFFF00 60deg, #00FF00 120deg, #00FFFF 180deg, #0000FF 240deg, #FF00FF 300deg, #FF0000 360deg); } ueb-color-handler { display: block; position: absolute; top: -3px; left: -3px; width: 4px; height: 4px; transform: translateX(calc(var(--ueb-position-x) * 1px)) translateY(calc(var(--ueb-position-y) * 1px)); border: 1px solid #000; border-radius: 4px; } .ueb-color-picker-saturation, .ueb-color-picker-value { margin: 0 8px; width: 30px; background: linear-gradient(to bottom, transparent 10%, #000000 100%), rebeccapurple; } .ueb-color-picker-value { background: linear-gradient(to bottom, transparent 10%, #FFFFFF 100%), rebeccapurple; } /*# sourceMappingURL=ueb-style.css.map */