@font-face { font-family: "Roboto"; font-style: light; src: url("../font/roboto-light.woff2") format("woff2"), url("../font/roboto-light.woff") format("woff"); } @font-face { font-family: "Roboto"; font-style: regular; src: url("../font/roboto-regular.woff2") format("woff2"), url("../font/roboto-regular.woff") format("woff"); } ueb-blueprint { 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: #4d4d4db7; 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% + var(--ueb-additional-x) * 1px) / var(--ueb-scale)); height: calc((100% + var(--ueb-additional-y) * 1px) / 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-drag-scrolling=true] .ueb-grid { cursor: grabbing; } ueb-blueprint[data-drag-scrolling=false] .ueb-grid { cursor: default; } .ueb-zoom--.ueb, .ueb { --ueb-scale: 1; --ueb-grid-actual-size: var(--ueb-grid-size); } .ueb-zoom-7.ueb { --ueb-scale: 2; } .ueb-zoom-6.ueb { --ueb-scale: 1.875; } .ueb-zoom-5.ueb { --ueb-scale: 1.75; } .ueb-zoom-4.ueb { --ueb-scale: 1.675; } .ueb-zoom-3.ueb { --ueb-scale: 1.5; } .ueb-zoom-2.ueb { --ueb-scale: 1.375; } .ueb-zoom-1.ueb { --ueb-scale: 1.25; } .ueb-zoom--1.ueb { --ueb-scale: 0.875; } .ueb-zoom--2.ueb { --ueb-scale: 0.75; } .ueb-zoom--3.ueb { --ueb-scale: 0.675; } .ueb-zoom--4.ueb { --ueb-scale: 0.5; --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2); } .ueb-zoom--5.ueb { --ueb-scale: 0.375; --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2); } .ueb-zoom--6.ueb { --ueb-scale: 0.333333; --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3); } .ueb-zoom--7.ueb { --ueb-scale: 0.3; --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3); } .ueb-zoom--8.ueb { --ueb-scale: 0.266666; --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3); } .ueb-zoom--9.ueb { --ueb-scale: 0.233333; --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3); } .ueb-zoom--10.ueb { --ueb-scale: 0.2; --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3); } .ueb-zoom--11.ueb { --ueb-scale: 0.166666; --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6); } .ueb-zoom--12.ueb { --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-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-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-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-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.3em 0.7em; box-shadow: inset 5px 1px 5px -3px #83b37b, inset 0 1px 0 0 #111311, inset 0 2px 0 0 #83b37b; 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: 900; white-space: nowrap; } .ueb-node-name { background: radial-gradient(ellipse 100% 100% at 30% 50%, rgba(0, 0, 0, 0.45) 20%, transparent 50%); margin: -0.1em -1.6em; padding: 0.1em 1.6em; } .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: 8px; 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.06em; 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-drag-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; } ueb-node[data-advanced-display=Hidden] ueb-pin[data-advanced-view=true] { display: none; } .ueb-pin-wrapper { display: inline-block; margin: 6px 0 0 0; padding: 2px 2px; } .ueb-pin-wrapper > * { display: inline-block; vertical-align: middle; } ueb-blueprint[data-drag-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-icon-exec { display: inline-block; vertical-align: text-top; } .ueb-pin-icon-value { display: inline-block; position: relative; width: 12px; height: 12px; vertical-align: baseline; margin: 0 0.5em -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.ueb-pin-fill .ueb-pin-tofill { fill: currentColor; } .ueb-pin-icon-value::after { content: ""; display: block; position: absolute; top: 3px; left: 13px; 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-name { display: inline-block; vertical-align: middle; } .ueb-pin-exec .ueb-pin-name { display: none; } .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: #ffffff46; outline: none; } .ueb-pin-type-bool .ueb-pin-input { appearance: none; padding: 0; height: 18px; width: 18px; background-color: #0f0f0f; color: var(--ueb-pin-color); } .ueb-pin-type-bool .ueb-pin-input:checked { background-image: url('data:image/svg+xml,'); } .ueb-pin-input-content { display: block; outline: none; border: none; padding: 0; min-width: 10px; max-width: 400px; max-height: 16em; 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-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))); } 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((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 { --ueb-pin-color: white; --ueb-pin-dim-color: #afafaf; } .ueb-pin-type-bool { --ueb-pin-color: #750000; --ueb-pin-background: linear-gradient(90deg, rgba(117, 0, 0, 0.15), rgba(117, 0, 0, 0.8) 15%, rgba(117, 0, 0, 0.5) 60%, rgba(117, 0, 0, 0.35) 95%, transparent); } .ueb-pin-type-class { --ueb-pin-color: #5800bb; --ueb-pin-background: linear-gradient(90deg, rgba(88, 0, 187, 0.15), rgba(88, 0, 187, 0.8) 15%, rgba(88, 0, 187, 0.5) 60%, rgba(88, 0, 187, 0.35) 95%, transparent); } .ueb-pin-type-exec { --ueb-pin-color: #a7a7a7; --ueb-pin-background: linear-gradient(90deg, rgba(167, 167, 167, 0.15), rgba(167, 167, 167, 0.8) 15%, rgba(167, 167, 167, 0.5) 60%, rgba(167, 167, 167, 0.35) 95%, transparent); } .ueb-pin-type-int { --ueb-pin-color: #1fe0ad; --ueb-pin-background: linear-gradient(90deg, rgba(31, 224, 173, 0.15), rgba(31, 224, 173, 0.8) 15%, rgba(31, 224, 173, 0.5) 60%, rgba(31, 224, 173, 0.35) 95%, transparent); } .ueb-pin-type-name { --ueb-pin-color: #cb81fc; --ueb-pin-background: linear-gradient(90deg, rgba(203, 129, 252, 0.15), rgba(203, 129, 252, 0.8) 15%, rgba(203, 129, 252, 0.5) 60%, rgba(203, 129, 252, 0.35) 95%, transparent); } .ueb-pin-type-object { --ueb-pin-color: #00a8f2; --ueb-pin-background: linear-gradient(90deg, rgba(0, 168, 242, 0.15), rgba(0, 168, 242, 0.8) 15%, rgba(0, 168, 242, 0.5) 60%, rgba(0, 168, 242, 0.35) 95%, transparent); } .ueb-pin-type-real { --ueb-pin-color: #32bb00; --ueb-pin-background: linear-gradient(90deg, rgba(50, 187, 0, 0.15), rgba(50, 187, 0, 0.8) 15%, rgba(50, 187, 0, 0.5) 60%, rgba(50, 187, 0, 0.35) 95%, transparent); } .ueb-pin-type-rotator { --ueb-pin-color: #9eb1fc; --ueb-pin-background: linear-gradient(90deg, rgba(158, 177, 252, 0.15), rgba(158, 177, 252, 0.8) 15%, rgba(158, 177, 252, 0.5) 60%, rgba(158, 177, 252, 0.35) 95%, transparent); } .ueb-pin-type-string { --ueb-pin-color: #d500b1; --ueb-pin-background: linear-gradient(90deg, rgba(213, 0, 177, 0.15), rgba(213, 0, 177, 0.8) 15%, rgba(213, 0, 177, 0.5) 60%, rgba(213, 0, 177, 0.35) 95%, transparent); } .ueb-pin-type-struct { --ueb-pin-color: #034ca8; --ueb-pin-background: linear-gradient(90deg, rgba(3, 76, 168, 0.15), rgba(3, 76, 168, 0.8) 15%, rgba(3, 76, 168, 0.5) 60%, rgba(3, 76, 168, 0.35) 95%, transparent); } .ueb-pin-type-vector { --ueb-pin-color: #fcc823; --ueb-pin-background: linear-gradient(90deg, rgba(252, 200, 35, 0.15), rgba(252, 200, 35, 0.8) 15%, rgba(252, 200, 35, 0.5) 60%, rgba(252, 200, 35, 0.35) 95%, transparent); } /*# sourceMappingURL=ueb-style.css.map */