Adachi
c49cae39e2
Node display names, category, descriptions, tooltips and all frontend labels are now English so the nodes are usable for the general Manager audience. Node class IDs, parameter identifiers and enum values are unchanged, so existing workflows stay compatible. Also documents how this pack differs from ComfyUI's built-in modal mask editor and Painter node.
99 lines
10 KiB
CSS
99 lines
10 KiB
CSS
.dd-inpaint {
|
|
--dd-bg: #20242b; --dd-panel: #292f38; --dd-line: #414955; --dd-text: #edf0f4; --dd-muted: #a8b2c1; --dd-accent: #ffc079;
|
|
color-scheme: dark; color: var(--dd-text); background: var(--dd-bg); border: 1px solid var(--dd-line); border-radius: 8px;
|
|
font: 12px/1.4 "Segoe UI", "Microsoft YaHei", sans-serif; width: 100%; min-width: 0; height: 100%;
|
|
display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; outline: none; user-select: none; container-type: inline-size;
|
|
}
|
|
.dd-inpaint *, .dd-inpaint *::before, .dd-inpaint *::after { box-sizing: border-box; }
|
|
.dd-inpaint:focus-within { border-color: #9f7950; }
|
|
.dd-inpaint .dd-head { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: flex-end; padding: 6px 12px 2px; align-items: center; }
|
|
.dd-inpaint .dd-brand { font-size: 11px; letter-spacing: 1.5px; font-weight: 700; color: var(--dd-accent); }
|
|
.dd-inpaint .dd-dimensions, .dd-inpaint .dd-zoom { font-size: 11px; color: var(--dd-muted); font-variant-numeric: tabular-nums; }
|
|
.dd-inpaint .dd-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 5px 10px; }
|
|
.dd-inpaint button { color: var(--dd-text); background: var(--dd-panel); border: 1px solid var(--dd-line); border-radius: 4px; padding: 5px 9px; min-height: 28px; font: inherit; cursor: pointer; white-space: nowrap; }
|
|
.dd-inpaint button:hover { background: #39424e; border-color: #707c8d; }
|
|
.dd-inpaint button:focus-visible, .dd-inpaint input:focus-visible { outline: 2px solid var(--dd-accent); outline-offset: 2px; }
|
|
.dd-inpaint button.dd-primary { background: #57432e; color: #ffe0b8; border-color: #87613b; }
|
|
.dd-inpaint button.dd-active { color: #ffd8a4; background: #57432e; border-color: #b28552; }
|
|
.dd-inpaint button:disabled { opacity: .38; cursor: default; }
|
|
.dd-inpaint .dd-tools button { flex: 1; }
|
|
.dd-inpaint .dd-files { flex-wrap: nowrap; }
|
|
.dd-inpaint .dd-filename { font-size: 11px; color: var(--dd-muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-left: 5px; }
|
|
.dd-inpaint .dd-settings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 6px 12px 9px; }
|
|
.dd-inpaint .dd-slider { min-width: 0; }
|
|
.dd-inpaint .dd-slider-label { display: flex; justify-content: space-between; gap: 4px; font-size: 11px; color: var(--dd-muted); }
|
|
.dd-inpaint .dd-slider output { color: var(--dd-text); font-variant-numeric: tabular-nums; }
|
|
.dd-inpaint input[type="range"] { display: block; width: 100%; min-width: 0; height: 18px; margin: 3px 0 0; accent-color: #f3b06a; cursor: pointer; }
|
|
.dd-inpaint .dd-stage { position: relative; flex: 1 1 290px; min-height: 170px; overflow: hidden; border-top: 1px solid var(--dd-line); border-bottom: 1px solid var(--dd-line); background-color: #161a20; background-image: linear-gradient(45deg, #222831 25%, transparent 25%), linear-gradient(-45deg, #222831 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #222831 75%), linear-gradient(-45deg, transparent 75%, #222831 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; }
|
|
.dd-inpaint .dd-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
|
|
.dd-inpaint .dd-stage.dd-pan canvas { cursor: grab; }
|
|
.dd-inpaint .dd-stage.dd-erasing canvas { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M6 19 18 7a3 3 0 0 1 4 0l5 5a3 3 0 0 1 0 4L16 27h-5l-5-5a2 2 0 0 1 0-3Z' fill='%23ffb3c0' stroke='%23151a22' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='m7 19 7-7 10 10-5 5h-8l-4-4a3 3 0 0 1 0-4Z' fill='%23fff4f6'/%3E%3Cpath d='m13 13 10 10M11 28h17' fill='none' stroke='%23151a22' stroke-width='2'/%3E%3C/svg%3E") 16 16, crosshair; }
|
|
.dd-inpaint .dd-stage.dd-drop { outline: 3px solid var(--dd-accent); outline-offset: -3px; }
|
|
.dd-inpaint .dd-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; gap: 6px; color: var(--dd-muted); padding: 15px; text-align: center; }
|
|
.dd-inpaint .dd-empty[hidden] { display: none; }
|
|
.dd-inpaint .dd-empty-symbol { font-size: 34px; color: var(--dd-accent); line-height: 1; font-weight: 200; }
|
|
.dd-inpaint .dd-empty strong { font-weight: 500; color: var(--dd-text); }
|
|
.dd-inpaint .dd-actions { padding-top: 8px; }
|
|
.dd-inpaint .dd-actions button { font-size: 11px; padding-inline: 8px; }
|
|
.dd-inpaint .dd-viewbar { padding-top: 2px; padding-bottom: 4px; }
|
|
.dd-inpaint .dd-viewbar button { min-height: 24px; padding: 3px 7px; font-size: 11px; }
|
|
.dd-inpaint .dd-spacer { flex: 1; }
|
|
.dd-inpaint .dd-embed { display: flex; align-items: center; gap: 5px; padding: 4px 10px 0; font-size: 11px; color: var(--dd-muted); cursor: pointer; }
|
|
.dd-inpaint .dd-embed input { accent-color: #e9ab68; margin: 0; }
|
|
.dd-inpaint .dd-status { padding: 5px 11px 8px; color: var(--dd-muted); font-size: 10px; min-height: 27px; overflow-wrap: anywhere; }
|
|
.dd-inpaint .dd-error { color: #ff9c92; }
|
|
.dd-inpaint [hidden] { display: none !important; }
|
|
.dd-inpaint .dd-parameters { flex: 0 0 auto; padding: 10px 12px 8px; border-top: 1px solid var(--dd-line); }
|
|
.dd-inpaint .dd-param-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 7px; }
|
|
.dd-inpaint .dd-param-header strong { font-weight: 500; font-size: 12px; }
|
|
.dd-inpaint .dd-param-placeholder { color: var(--dd-muted); padding-block: 4px; font-size: 11px; }
|
|
.dd-inpaint .dd-param-body { display: flex; flex-direction: column; gap: 8px; }
|
|
.dd-inpaint .dd-param-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
|
|
.dd-inpaint .dd-param-label { color: var(--dd-muted); font-size: 11px; }
|
|
.dd-inpaint .dd-param-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
|
|
.dd-inpaint .dd-param-pills { display: flex; flex-wrap: wrap; gap: 4px; }
|
|
.dd-inpaint .dd-param-pills button { flex: 1; font-size: 11px; padding: 5px 7px; }
|
|
.dd-inpaint .dd-param-number-label { display: flex; align-items: center; justify-content: space-between; gap: 5px; color: var(--dd-muted); font-size: 11px; }
|
|
.dd-inpaint .dd-param-field input[type="number"] { width: 86px; min-width: 0; padding: 4px 5px; border: 1px solid var(--dd-line); border-radius: 4px; background: var(--dd-panel); color: var(--dd-text); font: inherit; font-variant-numeric: tabular-nums; }
|
|
.dd-inpaint .dd-param-field select, .dd-inpaint .dd-param-header select { min-width: 0; max-width: 100%; color: var(--dd-text); background: var(--dd-panel); border: 1px solid var(--dd-line); border-radius: 4px; padding: 5px; font: inherit; }
|
|
.dd-inpaint .dd-param-field:has(input[aria-label="Seed"]) input { width: 130px; }
|
|
.dd-inpaint .dd-param-resolution { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
|
|
.dd-inpaint .dd-param-resolution button { font-size: 11px; }
|
|
.dd-inpaint .dd-param-advanced { border-top: 1px solid var(--dd-line); padding-top: 7px; }
|
|
.dd-inpaint .dd-param-advanced summary { color: var(--dd-muted); cursor: pointer; font-size: 11px; }
|
|
.dd-inpaint .dd-param-advanced-body { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; }
|
|
.dd-inpaint .dd-param-toggle { display: flex; gap: 6px; align-items: center; color: var(--dd-muted); font-size: 11px; }
|
|
.dd-inpaint .dd-param-toggle input { margin: 0; accent-color: #e9ab68; }
|
|
.dd-inpaint .dd-resize-handle { flex: 0 0 18px; display: flex; align-items: center; justify-content: center; color: var(--dd-muted); background: var(--dd-panel); border-top: 1px solid var(--dd-line); cursor: ns-resize; touch-action: none; font-size: 14px; line-height: 1; }
|
|
.dd-inpaint .dd-resize-handle:hover, .dd-inpaint .dd-resize-handle:focus-visible { color: var(--dd-accent); background: #39424e; outline: none; }
|
|
.dd-comparer .dd-compare-toolbar, .dd-comparer .dd-adoption { flex-wrap: nowrap; }
|
|
.dd-comparer .dd-compare-label { color: var(--dd-muted); font-size: 11px; white-space: nowrap; }
|
|
.dd-comparer select { min-width: 0; color: var(--dd-text); background: var(--dd-panel); border: 1px solid var(--dd-line); border-radius: 4px; padding: 5px; font: inherit; }
|
|
.dd-comparer select:focus-visible { outline: 2px solid var(--dd-accent); }
|
|
.dd-comparer .dd-adoption { padding-block: 10px 4px; }
|
|
.dd-comparer .dd-adoption select { flex: 1; }
|
|
.dd-comparer .dd-compare-stage { min-height: 220px; }
|
|
.dd-comparer .dd-compare-stage canvas { cursor: ew-resize; }
|
|
.dd-inline-minimal { position: relative; border: 0; border-radius: 0; background: transparent; }
|
|
.dd-inline-minimal .dd-stage { border: 0; min-height: 170px; flex-basis: 0; }
|
|
.dd-inline-minimal > .dd-files { position: absolute; z-index: 2; left: 5px; top: 5px; padding: 0; }
|
|
.dd-inline-minimal > .dd-files button { min-height: 23px; padding: 2px 6px; font-size: 11px; opacity: .85; }
|
|
.dd-inline-minimal > .dd-files button:hover { opacity: 1; }
|
|
.dd-inline-minimal > .dd-resize-handle { position: absolute; z-index: 2; bottom: 0; width: 100%; height: 5px; min-height: 5px; border: 0; color: transparent; background: transparent; }
|
|
.dd-inline-minimal > .dd-resize-handle:hover { background: #ffc07966; }
|
|
.dd-inline-minimal > .dd-status:not([hidden]) { position: absolute; bottom: 6px; left: 0; right: 0; background: #20242bee; }
|
|
.dd-editor-controls { height: auto; flex: 0 0 auto; border: 0; border-radius: 0; background: transparent; overflow: visible; }
|
|
.dd-editor-controls .dd-source-info { justify-content: space-between; }
|
|
.dd-editor-controls .dd-filename { padding-left: 0; flex: 1; }
|
|
.dd-workbench { height: 100%; border: 0; border-radius: 0; }
|
|
.dd-workbench-tools { flex: 0 0 auto; }
|
|
.dd-tools-placeholder { padding: 8px 12px; }
|
|
.dd-comparer { border: 0; border-radius: 0; }
|
|
.dd-comparer .dd-compare-stage { border: 0; }
|
|
.dd-comparer .dd-compare-toolbar { padding-top: 5px; padding-bottom: 2px; }
|
|
.dd-comparer .dd-compare-toolbar .dd-dimensions { margin-left: 5px; }
|
|
.dd-comparer .dd-adoption { padding-top: 3px; padding-bottom: 5px; }
|
|
.dd-comparer .dd-compare-captions { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; justify-content: space-between; pointer-events: none; }
|
|
.dd-comparer .dd-compare-captions span { background: #171d27cc; color: #f1e3cf; padding: 3px 7px; border-radius: 3px; font-size: 11px; }
|
|
@container (max-width: 380px) { .dd-inpaint .dd-settings { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 12px; } }
|