h2{margin-top:0}h4{margin-top:.6em;margin-bottom:.3em}#pipeline{max-width:none;display:grid;margin:0;padding:0;background-color:var(--background);input, textarea, select { width: 100%; }}#pipeline.submit{grid-template-columns:420px auto;.side-menu { background-color: var(--surface); width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 14px; padding: 20px; overflow-y: hidden; height: calc(100vh - var(--nav-height)); h5 { margin-top: auto; } .table-container { flex-grow: 1; height: 100%; width: 100%; max-height: 360px; overflow-y: auto; th { min-width: 8ch; } } .btn-submit { width: 100%; gap: .8em; } } dialog.add { .nodes { --gap: 16px; --node-min-width: 320px; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(var(--node-min-width), 1fr)); .node { max-width: 340px; cursor: pointer; padding: 16px; background-color: var(--surface); border: solid 1px var(--accent); border-radius: 5px; transition: border-color .3s; } .node:hover { border-color: var(--primary); } } } dialog.import textarea { margin: 20px 0px; } dialog.export .code { width: 100%; background-color: var(--surface); border-color: var(--accent); padding: 10px; border-radius: 4px; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; word-wrap: break-word; margin-bottom: 10px; } dialog.templates { .items { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 20px; div { cursor: pointer; padding: 10px; background: var(--surface); border: solid 1px var(--accent); border-radius: 4px; transition: border-color .3s; } div:hover { border-color: var(--primary); } } }}#pipeline.progress{grid-template-rows:420px auto auto; #drawflow { height: 100%; } #pipeline-jobs .row { display: flex; flex-direction: row; align-items: center; gap: 1rem; } #pipeline-aggregator { label { font-weight: 600; margin-bottom: 0.2em; } input, select { background: var(--surface); margin-top: .5em; } .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .focus-text { margin-top: 1em; } } #pipeline-info { table { background: var(--surface); td { min-width: 22ch; } } } .content { width: 100%; display: none; } .content.active { display: block; }}.drawflow{.drawflow-node { display: flex; background: var(--surface); border: solid 1px var(--accent); border-radius: 4px; min-height: 40px; width: 380px; padding-top: 10px; padding-bottom: 10px; transition: background-color .3s, border-color .3s; .input, .output { height: 24px; width: 24px; border: solid 2px var(--primary); border-radius: 50px; background: var(--background); transition: background-color .3s, border-color .3s; } .input:hover, .output:hover { background: color-mix(in srgb, var(--background) 70%, var(--primary)); border-color: var(--primary); } .input { left: -27px; } .input.error { background: color-mix(in srgb, var(--background) 75%, var(--error)); border-color: var(--error); } .output { right: -3px; } } .drawflow-node:hover { background: color-mix(in srgb, var(--surface) 93%, gray); border: solid 1px var(--primary); } .drawflow-node.selected { background: color-mix(in srgb, var(--surface) 86%, gray); border-color: var(--primary); } .drawflow-node.error { background: color-mix(in srgb, var(--surface) 92%, var(--error)); border-color: var(--error); } .drawflow-node.node-readonly { .drawflow_content_node { display: flex; flex-direction: column; gap: 0.7rem; } .readonly-summary { display: flex; flex-direction: column; gap: 0.35rem; p { margin: 0; color: color-mix(in srgb, var(--on-surface) 82%, var(--accent)); } } .readonly-actions { display: flex; justify-content: flex-end; } .node-info-btn { --main: var(--primary); --main-alt: var(--secondary); --img: url('/assets/icons/info.svg'); --size: 2.4rem; border-radius: 999px; padding: 0.35rem; } .readonly-json { max-height: 280px; overflow: auto; padding: 0.85rem 1rem; border: 1px solid var(--accent); border-radius: 0.5rem; background: color-mix(in srgb, var(--surface) 90%, black); color: var(--on-surface); font-size: 0.84rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; } } .connection .main-path { --border-color: var(--accent); filter: drop-shadow(0 0 0 var(--border-color)) drop-shadow(1px 0 0 var(--border-color)) drop-shadow(-1px 0 0 var(--border-color)) drop-shadow(0 1px 0 var(--border-color)) drop-shadow(0 -1px 0 var(--border-color)); stroke-width: 8px; stroke: var(--surface); transition: stroke .3s, filter .3s; } .connection .main-path:hover { --border-color: var(--primary); stroke: color-mix(in srgb, var(--primary) 10%, var(--surface)); ; } .connection .main-path.selected { --border-color: var(--success); stroke: color-mix(in srgb, var(--success) 10%, var(--surface)); ; } .connection .point { stroke: var(--accent); stroke-width: 2px; fill: var(--surface); } .drawflow-delete { --main: var(--warn); --main-alt: var(--error); --size: 35px; --opacity: 90%; position: absolute; cursor: pointer; z-index: 4; border: 1px solid var(--main); } .drawflow-delete::after { background: white; } >.drawflow-delete { transform: translate(-50%, -50%); } .parent-node .drawflow-delete { right: -15px; top: -15px }}#drawflow{position:relative;width:100%;height:calc(100vh - var(--nav-height));overflow-y:hidden;background:var(--background);background-image:radial-gradient(#7d7d7d9a 1px,transparent 0);background-size:40px 40px;background-position:50%; #hint-pipeline { position: absolute; bottom: 20px; left: 20px; z-index: 2; } >.icon-container { position: absolute; top: 20px; left: 20px; display: flex; flex-direction: row; gap: 10px; z-index: 2; .btn--icon { --main: var(--primary); --main-alt: var(--secondary); --size: 60px; padding: 10px; border-radius: 4px; } .btn--icon.add { --img: url('/assets/icons/add.svg'); } .btn--icon.export { --img: url('/assets/icons/share.svg'); } .btn--icon.import { --img: url('/assets/icons/clipboard.svg'); } .btn--icon.templates { --img: url('/assets/icons/test-tube.svg'); } .btn--icon.info { --img: url('/assets/icons/info.svg'); } } #legend { position: absolute; right: 20px; top: 20px; max-height: 460px; overflow-y: scroll; z-index: 1; background-color: var(--surface); table { .eye { --main: var(--primary); --main-alt: var(--success); --img: url('/assets/icons/eye.svg'); --size: 2em; } .trash { --main: var(--primary); --main-alt: var(--error); --img: url('/assets/icons/trash.svg'); --size: 2em; } } } .drawflow_content_node { .id { --main: var(--primary); position: absolute; top: 10px; right: 10px; width: 2em; height: 2em; text-align: center; display: flex; align-items: center; justify-content: center; } h3 { padding-right: 1em; } .service-input { width: 100%; display: flex; align-items: center; flex-direction: row; gap: 10px; padding: 4px 0px; .status-icon { width: 1.4em; height: 1.4em; } } .service-input.error { color: var(--error); } .sequence-list-button { margin-top: 1em; } >input { margin-top: 1em; } dialog { overflow-y: scroll; cursor: default; background-color: var(--surface); form { display: flex; flex-direction: column; gap: 24px; padding: 24px 0px; span { display: flex; flex-direction: row; align-items: center; gap: 1em; label { white-space: nowrap; margin: auto 0px; } input[type="checkbox"] { width: auto; } } } } }}