@font-face { font-family: "Roboto"; font-weight: normal; src: url("../font/roboto-regular.woff2") format("woff2"); } @font-face { font-family: "Roboto"; font-stretch: condensed; src: url("../font/roboto-condensed-regular.woff2") format("woff2"); } ueb-blueprint { --ueb-scale: 1; --ueb-grid-actual-size: var(--ueb-grid-size); --ueb-grid-line-color: #353535; --ueb-grid-set-line-color: #161616; --ueb-grid-axis-line-color: #000; 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 !important; max-width: none !important; } .ueb-viewport-header { display: flex; position: absolute; top: 0; right: 0; left: 0; background: rgba(0, 0, 0, 0.5); z-index: 1; } .ueb-viewport-about { margin-top: -6px; padding: 0 8px; align-self: center; font-size: 20px; font-weight: bolder; cursor: pointer; } @keyframes ueb-zoom-animation { 0% { color: #7f7f7f; } 100% { color: #2b2b2b; } } .ueb-zoom-changed .ueb-viewport-zoom { animation: 1500ms ueb-zoom-animation; } .ueb-viewport-zoom { margin-left: auto; padding: 5px; color: #2b2b2b; /* 154% is to get an effective font size of 20px from --ueb-font-size which is 13 px by default */ font-size: 154%; font-weight: bold; letter-spacing: -1px; } .ueb-viewport-type { position: absolute; right: 10px; bottom: 5px; font-size: 60px; font-weight: 900; color: rgba(128, 128, 128, 0.2509803922); font-stretch: condensed; z-index: 1; pointer-events: none; } .ueb-viewport-body { position: relative; height: var(--ueb-height, 30rem); overflow: hidden; scrollbar-width: 0; } .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; 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.ueb-zoom--4 { --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2); } ueb-blueprint.ueb-zoom--6 { --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3); } ueb-blueprint.ueb-zoom--11 { --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 { position: absolute; } 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-info-dialog { border: 6px solid #202020; padding: 5px 30px; background: #121212; color: #f0f0f0; box-shadow: 0 2px 10px 0 #000; } .ueb-info-dialog a:link, .ueb-info-dialog a:visited, .ueb-info-dialog a:hover, .ueb-info-dialog a:active { outline: none; color: #f0f0f0; } .ueb-info-dialog::backdrop { background-color: rgba(0, 0, 0, 0.6274509804); backdrop-filter: blur(4px); } /* Light mode */ ueb-blueprint.ueb-light-mode { --ueb-grid-line-color: #ddd; --ueb-grid-set-line-color: #c0c0c0; --ueb-grid-axis-line-color: #a0a0a0; } ueb-blueprint.ueb-light-mode .ueb-grid { background-color: #f6f6f6; } ueb-blueprint.ueb-light-mode ueb-node.ueb-node-style-glass .ueb-node-wrapper { background-color: rgba(0, 0, 0, 0.5647058824); } ueb-blueprint.ueb-light-mode ueb-link .ueb-link-path { filter: saturate(200%) brightness(0.6); } ueb-blueprint.ueb-light-mode .ueb-viewport-header { background: rgba(0, 0, 0, 0.3); color: #101010; } ueb-node.ueb-node-style-minimal { box-shadow: none; } ueb-node.ueb-node-style-minimal ueb-pin { margin: 0; padding: 0; min-height: 0; } ueb-node.ueb-node-style-minimal ueb-pin[data-direction=input] { display: none; } ueb-node.ueb-node-style-minimal .ueb-node-border { padding: 8px 16px; background: none !important; } ueb-node.ueb-node-style-minimal .ueb-pin-wrapper { margin: 0; padding: 4px 6px; } ueb-node.ueb-node-style-minimal[data-selected=true] .ueb-node-border { box-shadow: inset 0 0 0px 6px #d29e07; } ueb-link { position: absolute; --ueb-link-color: rgb(var(--ueb-link-color-rgb)); /* when from-y > to-y */ 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 { position: absolute; width: 100% !important; height: 100% !important; min-height: 1px !important; transform: scaleX(var(--ueb-link-scale-x)) scaleY(var(--ueb-link-scale-y)); z-index: 1; } ueb-link .ueb-link-path { visibility: visible; stroke: var(--ueb-link-color); stroke-width: calc(1.5px / var(--ueb-scale)); transition: stroke-width 0.8s; } ueb-link .ueb-link-area { visibility: visible; stroke-width: 20px; } ueb-link[data-dragging=true] .ueb-link-path, .ueb-link-area:hover ~ .ueb-link-path { stroke-width: calc(6px / var(--ueb-scale)); } ueb-link[data-dragging=true] .ueb-link-message { display: block; visibility: visible; } .ueb-link-message { --ueb-link-message-top: calc(50% * (var(--ueb-link-scale-y) + 1) + 22px); --ueb-link-message-left: calc(100% - var(--ueb-start-percentage) + 15px); display: none; position: absolute; top: var(--ueb-link-message-top); left: var(--ueb-link-message-left); border: 1px solid #000; 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-link[data-from-input=true] .ueb-link-message { --ueb-link-message-top: calc(-50% * (var(--ueb-link-scale-y) - 1) + 22px); --ueb-link-message-left: calc(var(--ueb-start-percentage) + 15px); } .ueb-link-message-icon { display: inline-block; padding: 4px; width: 16px; height: 16px; vertical-align: middle; } .ueb-link-message-text { padding: 4px; padding-left: 0; vertical-align: middle; } .ueb-link-message-icon svg { width: 100%; height: 100%; } ueb-node { display: block; position: absolute; min-width: 100px; border-radius: var(--ueb-node-radius); box-shadow: 0 0 1px 0 black, 1px 4px 6px 0 rgba(0, 0, 0, 0.6); font-weight: lighter; } ueb-node.ueb-node-style-minimal, ueb-node.ueb-node-style-comment { min-width: 0; } .ueb-node-border { margin: -3px; padding: 3px; border-radius: calc(var(--ueb-node-radius) * 1.4); } .ueb-zoom--2 .ueb-node-border { margin: 0; padding: 0; } 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; } .ueb-zoom--2 ueb-node[data-selected=true] > .ueb-node-border { background: none !important; outline: 3px solid #ff8d00; } .ueb-zoom--10 ueb-node[data-selected=true] > .ueb-node-border { outline-width: 8px; } .ueb-node-wrapper { 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); overflow: hidden; } .ueb-zoom--2 .ueb-node-wrapper { background: rgb(14, 16, 10); } ueb-node.ueb-node-style-operation .ueb-node-wrapper { grid-template-rows: min-content auto auto min-content min-content; grid-template-columns: 50% 0% 1fr; box-shadow: none; } .ueb-node-outputs ueb-pin[data-type=exec] .ueb-pin-wrapper { min-height: 26px; } ueb-node.ueb-node-style-operation.ueb-node-has-inputs .ueb-node-inputs { align-self: center; padding-right: 40px; } .ueb-node-style-operation:not(.ueb-node-is-variadic) .ueb-node-outputs { grid-row: 2/4; align-self: center; } ueb-blueprint[data-scrolling=false][data-selecting=false] .ueb-draggable { cursor: move; } .ueb-zoom--2 .ueb-node-wrapper { padding: 0; background: #101010; } .ueb-node-top { grid-area: top; color: #d0d0d0; /* 103% is to get an effective font size of 13.4px from --ueb-font-size which is 13 px by default */ font-size: 103%; font-weight: bold; line-height: 120%; white-space: nowrap; } ueb-node.ueb-node-style-setter .ueb-node-top { max-height: 5px; } ueb-node.ueb-node-style-comment .ueb-node-top { white-space: normal; } ueb-node.ueb-node-style-event .ueb-node-top { display: flex; justify-content: space-between; align-items: center; padding-right: 2px; } .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); border-radius: var(--ueb-node-radius) var(--ueb-node-radius) 0 0; background: linear-gradient(rgba(255, 255, 255, 0.1882352941) 1px, transparent 1px), linear-gradient(170deg, rgb(var(--ueb-node-color)) 0%, rgb(var(--ueb-node-color)) 50%, transparent 100%); } .ueb-zoom--2 .ueb-node-style-default .ueb-node-top { background: rgb(var(--ueb-node-color)); } .ueb-node-name { display: flex; align-items: center; background: radial-gradient(ellipse 100% 100% at 35% 55%, rgba(0, 0, 0, 0.5) 15%, transparent 50%); margin: -1px -15px; padding: 2px 15px; } .ueb-node-style-setter .ueb-node-name { justify-content: center; } .ueb-node-name:last-child { padding-right: 26px; } .ueb-zoom--2 .ueb-node-name { background: none; } .ueb-zoom--8 .ueb-node-name { visibility: hidden; } .ueb-node-name-symbol { align-self: flex-start; margin-right: 5px; width: 16px; height: 16px; color: #74bff2; } ueb-node[data-pure-function=true] .ueb-node-name-symbol { color: #aaeda0; } .ueb-node-name-symbol path { vertical-align: middle; } .ueb-node-subtitle-text { padding-top: 1px; padding-right: 5px; /* 0.946154 is to get an effective font size of 12.3px from --ueb-font-size which is 13 px */ font-size: calc(0.946154 * var(--ueb-font-size)); font-weight: 100; font-style: italic; color: #a9b78f; } .ueb-node-inputs { grid-area: input; } ueb-node.ueb-node-has-inputs .ueb-node-inputs { padding-right: 15px; padding-left: 6px; } .ueb-node-outputs { grid-area: output; } .ueb-node-outputs, .ueb-node-variadic { padding-right: 6px; } .ueb-node-variadic { grid-area: variadic; margin-top: 10px; margin-bottom: 5px; align-self: start; justify-self: end; 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); background: repeating-linear-gradient(-45deg, transparent 0, #57590a 1px, #57590a 11px, transparent 12px, transparent 24px); text-align: center; } .ueb-node-developmentonly-text { padding: 0 10px; letter-spacing: 0.04em; text-shadow: 1px 1px 1px black; white-space: nowrap; } .ueb-zoom--6 .ueb-node-developmentonly-text { visibility: hidden; } .ueb-node-expansion { grid-area: expansion; display: none; text-align: center; } ueb-node[data-advanced-display] .ueb-node-expansion { display: block; } ueb-blueprint[data-scrolling=false][data-selecting=false] .ueb-node-expansion:hover { background-color: #656765; cursor: pointer; } .ueb-zoom--8 .ueb-node-expansion { visibility: hidden; } .ueb-node-variadic > svg, .ueb-node-expansion > svg { width: 16px; height: 16px; vertical-align: middle; } ueb-node[data-advanced-display=Shown] .ueb-node-expansion > svg { transform: scaleY(-1); } ueb-node.ueb-node-style-glass .ueb-node-wrapper, ueb-node.ueb-node-style-glass .ueb-node-border, ueb-node.ueb-node-style-glass { min-width: 128px; border-radius: 15px; } ueb-node.ueb-node-style-glass .ueb-node-wrapper { border: 1px solid black; box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6) inset; padding: 3px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0, rgba(255, 255, 255, 0.2) 4px, rgba(0, 0, 0, 0.3) 14px), linear-gradient(to right, transparent 10%, rgba(var(--ueb-node-color), 0.3) 50%, transparent 90%); background-size: 100%, 100% 28px; background-repeat: repeat, no-repeat; } .ueb-zoom--2 ueb-node.ueb-node-style-glass .ueb-node-wrapper { background: #101010; } ueb-node.ueb-node-style-glass .ueb-node-name { padding-right: 0; padding-left: 0; } ueb-node[data-selected=true] .ueb-node-border { box-shadow: inset 0 0 0px 6px #ce8700; background: none; } ueb-node.ueb-node-style-glass .ueb-node-top, ueb-node.ueb-node-style-glass .ueb-node-name { margin: 0; box-shadow: none; border-radius: 0; background: none; } ueb-node.ueb-node-style-glass .ueb-node-outputs:first-child { padding-left: 12px; } ueb-node.ueb-node-style-operation .ueb-node-top { grid-area: center; align-self: center; justify-self: center; padding: 0; /* 215% is to get an effective font size of 28px from --ueb-font-size which is 13 px by default */ font-size: 215%; font-stretch: condensed; font-weight: bold; line-height: 100%; } ueb-node.ueb-node-style-operation.ueb-node-style-metasound .ueb-node-top { font-size: 333%; font-stretch: expanded; } ueb-node.ueb-node-style-operation.ueb-node-style-glass .ueb-node-top { z-index: -1; } 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: 12px; margin-left: -100px; } ueb-node.ueb-node-style-metasound .ueb-node-wrapper { border: 1px solid black; box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4) inset; background: linear-gradient(to bottom, rgba(52, 55, 52, 0.9) 0, rgba(42, 44, 42, 0.9) 8px, rgba(31, 32, 31, 0.8) 16px, rgba(13, 14, 13, 0.9)); } ueb-node.ueb-node-style-metasound .ueb-node-name-text, ueb-node.ueb-node-style-metasound .ueb-node-name-symbol { color: #8cc483; } ueb-node.ueb-node-style-metasound.ueb-node-style-operation .ueb-node-name-text { color: #7c7c7c; } ueb-node.ueb-node-style-metasound .ueb-node-name { margin: 0px; padding: 1px 15px; justify-content: center; background: none; } ueb-node:not(.ueb-node-style-comment) { z-index: 10; } ueb-node.ueb-node-style-comment .ueb-node-border { height: 100%; } ueb-node.ueb-node-style-comment .ueb-node-wrapper { position: relative; padding: 0; height: 100%; border-radius: 0; background: rgba(var(--ueb-node-color), 0.35); box-shadow: none; } ueb-node.ueb-node-style-comment .ueb-node-wrapper::after { content: ""; display: block; position: absolute; right: 3px; bottom: 3px; width: 16px; height: 16px; background: linear-gradient(135deg, transparent 50%, #fff 50%, #fff calc(50% + 2px), transparent calc(50% + 2px), transparent calc(50% + 3px), #fff calc(50% + 3px), #fff calc(50% + 5px), transparent calc(50% + 5px), transparent calc(50% + 7px), #fff calc(50% + 7px), #fff calc(50% + 9px), transparent calc(50% + 9px)); } ueb-node.ueb-node-style-comment .ueb-node-top { position: relative; margin: 3px; padding: 3px 10px; box-shadow: none; border-radius: 0; background: rgb(var(--ueb-node-color)); color: white; /* 185% is to get an effective font size of 24px from --ueb-font-size which is 13 px by default */ font-size: 185%; text-shadow: 2px 1px 1px #444, 0 0 2px #bbb; line-height: 1.22; z-index: 1; } ueb-node.ueb-node-style-conversion .ueb-node-wrapper::after { content: ""; display: block; grid-area: center; align-self: center; justify-self: center; margin: 10px 10px 10px -6px; width: 6px; height: 6px; border-radius: 3px; background: #8f8f8f; } ueb-blueprint { --ueb-pin-color-dim: #afafaf; } 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)); display: block; } .ueb-node-inputs ueb-pin, .ueb-node-outputs ueb-pin { margin: 6px 0; } ueb-pin.ueb-pin-input-wrap .ueb-pin-content { flex-direction: column; align-items: start; } .ueb-node-top ueb-pin { min-height: 0; margin-left: 10px; } .ueb-zoom--10 ueb-pin { visibility: hidden; } ueb-node[data-advanced-display=Hidden] ueb-pin[data-advanced-view=true][data-linked=false] { display: none; } .ueb-pin-wrapper { display: inline-flex; box-sizing: border-box; padding: 3px 6px; min-height: 24px; align-items: center; } ueb-node.ueb-node-style-operation .ueb-pin-wrapper { padding: 0; } ueb-node.ueb-node-style-minimal .ueb-pin-wrapper { min-height: 0; } .ueb-node-top .ueb-pin-wrapper { padding: 2px 4px 2px 10px; min-height: 0; vertical-align: bottom; } ueb-blueprint[data-scrolling=false][data-selecting=false] .ueb-pin-wrapper:hover { background: var(--ueb-pin-background); cursor: crosshair; } .ueb-zoom--8 .ueb-pin-wrapper:hover { background: none !important; } .ueb-pin-required-mark { width: 0; } .ueb-pin-required-mark::before { content: ""; display: block; width: 6px; height: 4px; background: var(--ueb-pin-color); margin-left: -13px; border-radius: 0 2px 2px 0; } .ueb-pin-content { display: flex; align-items: center; } .ueb-node-outputs ueb-pin { text-align: right; } .ueb-pin-icon { color: var(--ueb-pin-color); text-align: left; } ueb-pin[data-connectable=false] .ueb-pin-icon { visibility: hidden; } .ueb-node-inputs .ueb-pin-icon { margin-right: 6px; } .ueb-node-outputs .ueb-pin-icon { margin-left: 4px; } .ueb-pin-icon > svg { display: block; } ueb-pin[data-direction=output] .ueb-pin-reflect-output { transform: scaleX(-1); } ueb-pin[data-type=exec] .ueb-pin-icon { width: 15px; height: 15px; --ueb-pin-color: white; } ueb-pin[data-linked=true] .ueb-pin-tofill { fill: currentColor; } ueb-pin[data-linked=true] .ueb-pin-tostroke { stroke: black; } ueb-pin.ueb-node-variadic-default { position: relative; margin-top: 14px; } ueb-pin.ueb-node-variadic-default::before { content: ""; display: block; position: absolute; width: 100%; height: 1px; top: -8px; left: 6px; background: linear-gradient(90deg, transparent 0, #404240 6px, #404240 calc(100% - 6px), transparent 100%); } .ueb-zoom--6 .ueb-pin-content { visibility: hidden; } ueb-node[data-type="/Script/BlueprintGraph.K2Node_VariableSet"] ueb-pin[data-direction=output] .ueb-pin-content { display: none; } .ueb-pin-input-wrapper { display: flex; padding-left: 8px; } .ueb-pin-input { margin-left: 5px; border: 1px solid #a0a0a0; border-radius: 3px; padding: 0 4px 0 4px; color: #e0e0e0; } .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-input[type=checkbox] { display: grid; place-content: center; appearance: none; width: 18px; height: 18px; border: 1px solid #353535; background: #0f0f0f; } .ueb-pin-input[type=checkbox]:checked::before { content: ""; height: 0.7em; width: 0.8em; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); background: #0070e0; } ueb-pin[data-linked=true] .ueb-pin-input, ueb-pin[data-linked=true] .ueb-pin-input-wrapper { display: 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: 2px; } .ueb-pin-input-label { margin-left: 10px; color: #777777; } .ueb-pin-input-label:first-child { margin-left: 2px; } .ueb-pin-input-content { display: block; outline: none; border: none; padding: 0; min-width: 10px; max-width: 400px; max-height: 16em; /* 97% is to get an effective font size of 12.6px from --ueb-font-size which is 13 px by default */ font-size: 97%; white-space: pre; background: none; color: inherit; overflow: auto; } .ueb-pin-input-content::-webkit-scrollbar { width: 10px; height: 10px; } .ueb-pin-input-content::-webkit-scrollbar-thumb { background: transparent; border-radius: 10px; margin: 4px; } .ueb-pin-input-content:hover::-webkit-scrollbar-thumb { background: #575757; } ueb-blueprint[data-scrolling=false][data-selecting=false] .ueb-pin-input-content:hover { cursor: text; } ueb-dropdown { display: block; } ueb-dropdown.ueb-pin-input { margin-right: 5px; padding-right: 10px; background: #101010 !important; color: #c0c0c0; border-color: #404040; } ueb-dropdown.ueb-pin-input .ueb-pin-input-content { padding: 6px; width: max(170px, var(--ueb-dropdown-width)); max-width: 400px; background: none; font-size: 10px; letter-spacing: -0.2px; cursor: default !important; } .ueb-button { min-width: 60px; border: 1px solid #0f0f0f; border-radius: 4px; padding: 2px 10px; background: #383838; text-align: center; cursor: pointer; } .ueb-button:hover { background: #575757; } .ueb-buttons { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; } .ueb-vertical-slider > ueb-ui-slider { position: relative; padding-bottom: 10px; } .ueb-vertical-slider > ueb-ui-slider::before, .ueb-vertical-slider > ueb-ui-slider::after { content: ""; display: block; position: absolute; width: 0; height: 0; border: 5px solid transparent; } .ueb-vertical-slider > ueb-ui-slider::before { left: -4px; border-left-color: #e0e0e0; } .ueb-vertical-slider > ueb-ui-slider::after { right: -4px; border-right-color: #e0e0e0; } .ueb-horizontal-slider, .ueb-text-input { position: relative; border: 1px solid #383838; border-radius: 6px; background: #0f0f0f; } .ueb-horizontal-slider { position: relative; padding: 1px; } .ueb-horizontal-slider:hover { cursor: ew-resize; } ueb-window .ueb-pin-input-content { padding: 1px 10px; } .ueb-horizontal-slider > ueb-ui-slider { display: block; position: relative; height: 20px; border-radius: 5px; background: #383838; } .ueb-horizontal-slider-text { position: absolute; padding: 0 5px; line-height: 20px; z-index: 1; } .ueb-toggle-control::before { content: ""; display: inline-block; border-top: 5px solid #e0e0e0; border-left: 5px solid transparent; border-right: 5px solid transparent; vertical-align: middle; } .ueb-toggle-control:hover { cursor: pointer; } .ueb-resizeable-top, .ueb-resizeable-top-right, .ueb-resizeable-top-left { position: absolute; top: 0; height: 10px; } .ueb-resizeable-top { right: 0; left: 0; cursor: ns-resize; } .ueb-resizeable-top-right { right: 0; width: 10px; cursor: nesw-resize; } .ueb-resizeable-top-left { left: 0; width: 10px; cursor: nwse-resize; } .ueb-resizeable-right { position: absolute; top: 0; right: 0; bottom: 0; width: 10px; cursor: ew-resize; } .ueb-resizeable-bottom, .ueb-resizeable-bottom-right, .ueb-resizeable-bottom-left { position: absolute; bottom: -3px; height: 10px; cursor: ns-resize; } .ueb-resizeable-bottom { right: 0; left: 0; } .ueb-resizeable-bottom-right { right: 0; width: 10px; cursor: nwse-resize; } .ueb-resizeable-bottom-left { left: 0; width: 10px; cursor: nesw-resize; } .ueb-resizeable-left { position: absolute; top: 0; bottom: 0; left: 0; width: 10px; cursor: ew-resize; } ueb-window { display: block; position: absolute; border: 2px solid #101010; top: 0; left: 0; transform: translateX(calc(var(--ueb-position-x) * 1px)) translateY(calc(var(--ueb-position-y) * 1px)); background: #242424; box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6274509804); z-index: 1000; } .ueb-window-top { display: flex; flex-direction: row; align-items: center; padding: 4px 8px; height: 30px; background: #1a1a1a; } .ueb-window-content { padding: 10px; border: 1px solid #303030; } .ueb-window-name { flex-grow: 1; padding-left: 28px; text-align: center; } .ueb-window-close { padding: 8px; height: 12px; width: 12px; cursor: pointer; } .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; margin-top: -3px; margin-left: -3px; width: 4px; height: 4px; border: 1px solid #000; border-radius: 4px; } .ueb-color-picker-wheel ueb-color-handler { left: var(--ueb-color-wheel-x); top: var(--ueb-color-wheel-y); } .ueb-color-picker-saturation, .ueb-color-picker-value { margin: 0 6px; padding-bottom: 10px; width: 25px; } .ueb-color-picker-saturation { margin-left: 25px; background-image: linear-gradient(to bottom, transparent 10px, #FFFFFF 100%); } .ueb-color-picker-value { margin-right: 25px; background-image: linear-gradient(to bottom, transparent 10px, #000000 100%); } ueb-ui-slider { display: block; } .ueb-color-picker-saturation ueb-ui-slider { top: calc(100% - var(--ueb-color-s) * 100%); } .ueb-color-picker-value ueb-ui-slider { top: calc(100% - var(--ueb-color-v) * 100%); } .ueb-color-picker-preview { position: relative; align-self: flex-start; } .ueb-color-picker-preview::before, .ueb-color-picker-preview::after { content: ""; display: block; position: absolute; top: calc(50% - 1px); width: 5px; border-top: 2px solid black; } .ueb-color-picker-preview::after { right: 0; } .ueb-color-picker-preview-old, .ueb-color-picker-preview-new { width: 100px; height: 40px; } .ueb-color-picker-preview-new { display: flex; } .ueb-color-picker-preview-1, .ueb-color-picker-preview-2 { width: 50%; } .ueb-color-picker-advanced { display: flex; column-gap: 10px; padding-top: 5px; } .ueb-color-picker-advanced .ueb-color-picker-column { display: flex; flex-direction: column; justify-content: space-between; flex-grow: 1; width: 50%; } .ueb-color-picker-advanced .ueb-color-picker-column > div { display: flex; align-items: center; margin-bottom: 8px; } .ueb-color-picker-advanced .ueb-color-picker-column > div > div { flex-grow: 1; } .ueb-color-picker-advanced .ueb-horizontal-slider { flex-grow: 1; } ueb-ui-slider { max-width: 100%; } .ueb-color-picker-r .ueb-horizontal-slider > ueb-ui-slider { width: calc(var(--ueb-color-r) * 100%); } .ueb-color-picker-g .ueb-horizontal-slider > ueb-ui-slider { width: calc(var(--ueb-color-g) * 100%); } .ueb-color-picker-b .ueb-horizontal-slider > ueb-ui-slider { width: calc(var(--ueb-color-b) * 100%); } .ueb-color-picker-a .ueb-horizontal-slider > ueb-ui-slider { width: calc(var(--ueb-color-a) * 100%); } .ueb-color-picker-h .ueb-horizontal-slider > ueb-ui-slider { width: calc(var(--ueb-color-h) * 100%); } .ueb-color-picker-s .ueb-horizontal-slider > ueb-ui-slider { width: calc(var(--ueb-color-s) * 100%); } .ueb-color-picker-v .ueb-horizontal-slider > ueb-ui-slider { width: calc(var(--ueb-color-v) * 100%); } .ueb-color-picker-gradient { height: 6px; } .ueb-color-control { align-self: flex-end; } .ueb-color-control-label { margin-right: 5px; color: #c0c0c0; } .ueb-color-control .ueb-pin-input-content { width: 8ch; line-height: 20px; font-family: monospace; color: #c0c0c0; } /* To improve a bit performance */ .ueb-zoom--2 * { border: none !important; border-radius: 0 !important; box-shadow: none !important; text-shadow: none !important; } /*# sourceMappingURL=ueb-style.css.map */