* { font-family: Work Sans, Verdana, Geneva, sans-serif; box-sizing: border-box; } html { position: relative; } body { margin: 0; font-size: 11pt; background-color: var(--background-color1); color: var(--text-color); } a { color: rgb(0, 102, 204); } a:visited { color: rgb(0, 102, 204); } label { font-size: 10pt; } code { background: var(--background-color4); padding: 2px 4px; border-radius: 4px; } #prompt { width: 100%; height: 65pt; font-size: 14px; margin-bottom: 6px; margin-top: 5px; display: block; border: 2px solid var(--background-color2); } #negative_prompt { width: 100%; height: 50pt; font-size: 13px; margin-bottom: 5px; margin-top: 5px; display: block; } .image_clear_btn { position: absolute; transform: translate(30%, -30%); background: black; color: white; border: 2pt solid #ccc; padding: 0; cursor: pointer; outline: inherit; border-radius: 8pt; width: 16pt; height: 16pt; font-family: Verdana; font-size: 8pt; top: 0px; right: 0px; } .image_clear_btn:active { position: absolute; top: 0px; left: auto; } .settings-box ul { font-size: 9pt; margin-bottom: 5px; padding-left: 10px; list-style-type: none; } .settings-box li { padding-bottom: 4pt; } .editor-slider { vertical-align: middle; } .outputMsg { font-size: small; padding-bottom: 3pt; } #footer { font-size: small; padding: 10pt; background: none; } #footer-legal { font-size: 8pt; } #footer-spacer { flex: 0.7 } .imgSeedLabel { font-size: 0.8em; background-color: var(--background-color2); border-radius: 3px; padding: 5px; } .imgItem { display: inline-block; margin-top: 1em; margin-right: 1em; } .imgContainer { display: flex; justify-content: flex-end; position: relative; } .imgItemInfo { padding-bottom: 0.5em; display: flex; align-items: flex-end; flex-direction: column; position: absolute; padding-right: 5pt; padding-top: 6pt; opacity: 0; transition: 0.1s all; } .imgPreviewItemClearBtn { opacity: 0; } .imgContainer .img_bottom_label { opacity: 0; } .imgPreviewItemClearBtn:hover { background: rgb(177, 27, 0); } .imgContainer:hover > .imgItemInfo { opacity: 1; } .imgContainer:hover > .imgPreviewItemClearBtn { opacity: 1; } .imgContainer:hover > .img_bottom_label { opacity: 60%; } .imgItemInfo * { margin-bottom: 7px; } .imgItem .image_clear_btn { transform: translate(40%, -50%); } #container { min-height: 100vh; width: 100%; margin: 0px; display: flex; flex-direction: column; } #logo small { font-size: 11pt; } #editor { background: var(--background-color1); padding: 16px; display: flex; flex-direction: column; flex: 0 0 380pt; } #editor label { font-weight: normal; } #editor h4 { margin: 0px; white-space: nowrap; } #editor .collapsible-content { width: 100%; } .settings-box label small { color: rgb(153, 153, 153); margin-right: 10px; } #preview { padding: 8px; background: var(--background-color1); } #preview .collapsible-content { padding: 0px 15px; } #editor-inputs-prompt { flex: 1; } #editor-inputs .row { padding-bottom: 10px; } #makeImage { border-radius: 6px; } #editor-modifiers h5 { padding: 5pt 0; margin: 0; } #makeImage { flex: 0 0 70px; background: var(--accent-color); border: var(--primary-button-border); color: var(--accent-text-color); width: 100%; height: 30pt; } #makeImage:hover { background: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 6%)); } #stopImage { flex: 0 0 70px; background: rgb(132, 8, 0); border: 2px solid rgb(122, 29, 0); color: rgb(255, 221, 255); height: 30pt; border-radius: 6px; flex-grow: 2; } #stopImage:hover { background: rgb(177, 27, 0); } div#render-buttons { gap: 3px; margin-top: 4px; display: none; } button#pause { flex-grow: 1; background: var(--accent-color); } button#resume { flex-grow: 1; background: var(--accent-color); display: none; } .flex-container { display: flex; width: 100%; } .col-free { flex: 1; } .collapsible { cursor: pointer; } .collapsible-content { display: block; padding-left: 10px; } .collapsible-content h5 { padding: 5pt 0pt; margin: 0; font-size: 10pt; } .collapsible-handle { color: white; padding-right: 5px; } .collapsible:not(.active) ~ .collapsible-content { display: none !important; } #editor-modifiers { overflow-y: auto; overflow-x: hidden; } #editor-modifiers .editor-modifiers-leaf { padding-top: 10pt; padding-bottom: 10pt; } img { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15); } div.img-preview img { width:100%; height: 100%; max-height: 70vh; } .line-separator { background: var(--background-color3); height: 1pt; margin: 16px 0px; } #editor-inputs-tags-container { margin-top: 5pt; display: none; } #server-status { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); text-align: right; } #server-status-color { font-size: 14pt; color: rgb(200, 139, 0); display: inline; } #server-status-msg { color: rgb(200, 139, 0); padding-left: 2pt; font-size: 10pt; } .preview-prompt { font-size: 13pt; display: inline; } #coffeeButton { height: 23px; transform: translateY(25%); } #top-nav { position: relative; background: var(--background-color4); display: flex; } .tab .icon { padding-right: 4pt; font-size: 14pt; transform: translateY(1pt); } #logo { display: inline; padding: 12px; white-space: nowrap; } #logo h1 { display: inline; } #top-nav-items { list-style-type: none; display: inline; float: right; } #top-nav-items > li { float: left; display: inline; padding-left: 20pt; } #top-nav-items > li:first-child { cursor: default; } #initial-text { padding-top: 15pt; padding-left: 4pt; } .settings-subheader { font-size: 10pt; font-weight: bold; } .pl-5 { padding-left: 5pt; } #community-links { display: inline-block; list-style-type: none; text-align: left; margin: auto; padding: 0px; } #community-links li { padding-bottom: 12pt; display: block; font-size: 10pt; } #community-links li .fa-fw { padding-right: 2pt; } #community-links li a { color: var(--text-color); text-decoration: none; } .float-child h1 { border-bottom: var(--button-border); } #help-links { display: inline-block; list-style-type: none; text-align: left; margin: auto; padding: 0px; } #help-links li { padding-bottom: 12pt; display: block; font-size: 10pt; } #help-links li .fa-fw { padding-right: 2pt; } #help-links li a { color: var(--text-color); text-decoration: none; } #help-links li ul { padding-inline-start: 10px; margin-top: 8px; } .help-section { font-size: 130%; } .dropdown { overflow: hidden; } .dropdown-content { display: none; position: absolute; z-index: 2; width: max-content; padding: 5px; margin-bottom: 15px; box-shadow: 0 20px 28px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15); } .dropdown:hover .dropdown-content { display: block; } .dropdown:hover + .dropdown-content { display: block; } .dropdown-content:hover { display: block; } .display-settings { float: right; position: relative; } .display-settings .dropdown-content { right: 0px; top: 12pt; } .dropdown-item { padding: 4px; background: var(--background-color4); border: 2px solid var(--background-color2); } .dropdown-item:first-child { border-radius: 7px 7px 0px 0px; } .dropdown-item:last-child { border-radius: 0px 0px 7px 7px; } .imageTaskContainer { border: 1px solid var(--background-color2); margin-bottom: 10pt; padding: 5pt; border-radius: 5pt; box-shadow: 0 20px 28px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15); } .imageTaskContainer > div > .collapsible-handle { display: none; } .dropTargetBefore::before{ content: ""; border: 1px solid #fff; margin-bottom: -2px; display: block; box-shadow: 0 0 5px #fff; transform: translate(0px, -14px); } .dropTargetAfter::after{ content: ""; border: 1px solid #fff; margin-bottom: -2px; display: block; box-shadow: 0 0 5px #fff; transform: translate(0px, 14px); } .drag-handle { margin-right: 6px; cursor: move; } .taskStatusLabel { font-size: 8pt; background:var(--background-color2); border: 1px solid rgb(61, 62, 66); padding: 2pt 4pt; border-radius: 2pt; margin-right: 5pt; display: inline; } .activeTaskLabel { background:rgb(0, 90, 30); border: 1px solid rgb(0, 75, 19); color:rgb(222, 253, 230) } .waitingTaskLabel { background:rgb(128, 89, 0); border: 1px solid rgb(107, 75, 0); color:rgb(255, 242, 211) } .primaryButton { flex: 0 0 70px; background: var(--accent-color); border: var(--primary-button-border); color: rgb(255, 221, 255); padding: 3pt 6pt; } .secondaryButton { background: rgb(132, 8, 0); border: 1px solid rgb(122, 29, 0); color: rgb(255, 221, 255); padding: 3pt 6pt; border-radius: 5px; } .secondaryButton:hover { background: rgb(177, 27, 0); } .tertiaryButton { background: var(--tertiary-background-color); color: var(--tertiary-color); border: 1px solid var(--tertiary-border-color); padding: 3pt 6pt; border-radius: 5px; } .tertiaryButton:hover { background: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 6%)); color: var(--accent-text-color); } .tertiaryButton.pressed { border-style: inset; background: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 6%)); color: var(--accent-text-color); } .useSettings { margin-right: 6pt; float: right; } .stopTask { float: right; } #preview-tools { display: none; padding: 4pt; } .taskConfig { font-size: 10pt; color: #aaa; margin-bottom: 5pt; margin-top: 5pt; } .img-batch { display: inline; } #prompt_from_file { display: none; } #init_image_preview_container { display: flex; margin-top: 6px; margin-bottom: 8px; } #init_image_preview_container:not(.has-image) #init_image_wrapper, #init_image_preview_container:not(.has-image) #inpaint_button_container { display: none; } #init_image_buttons { display: flex; gap: 8px; } #init_image_preview_container.has-image #init_image_buttons { flex-direction: column; padding-left: 8px; } #init_image_buttons .button { position: relative; height: 32px; width: 150px; } #init_image_buttons .button > input { position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: 0; } #inpaint_button_container { display: flex; align-items: center; gap: 8px; } #init_image_wrapper { grid-row: span 3; position: relative; width: fit-content; max-height: 150px; } #init_image_preview { max-height: 150px; height: 100%; width: 100%; object-fit: contain; border-radius: 6px; transition: all 1s ease-in-out; } /* #init_image_preview:hover { max-width: 500px; max-height: 1000px; transition: all 1s 0.5s ease-in-out; } */ #init_image_size_box { border-radius: 6px 0px; } .img_bottom_label { position: absolute; right: 0px; bottom: 0px; padding: 3px; background: black; color: white; text-shadow: 0px 0px 4px black; opacity: 60%; font-size: 12px; } #editor-settings { min-width: 350px; } #editor-settings-entries { display: flex; flex-direction: column; } #editor-settings-entries > div { margin-top: 15px; } #editor-settings-entries ul { padding: 0px; } #editor-settings-entries table td { padding: 0px; line-height: 28px; } #editor-settings-entries table td:first-child { float: right; padding-right: 4px; white-space: nowrap; } #negative_prompt { width: 100%; } /* INPUTS STYLING */ button, input[type="file"], input[type="checkbox"], select, option { cursor: pointer; } input[type="file"] * { cursor: pointer; } input, select, textarea { border-radius: var(--input-border-radius); padding: 4px; accent-color: var(--accent-color); background: var(--input-background-color); border: var(--input-border-size) solid var(--input-border-color); color: var(--input-text-color); font-size: 9pt; } input:hover { accent-color: var(--accent-color-hover); } input { padding: 4px 6px; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-color); } input[disabled], select[disabled], textarea[disabled] { opacity: 0.5; } input[type="file"] { width: 100%; padding: 2px; } button, input::file-selector-button, .button { padding: 2px 4px; border-radius: var(--input-border-radius); background: var(--button-color); color: var(--button-text-color); border: var(--button-border); align-items: center; justify-content: center; cursor: pointer; } .button i { margin-right: 8px; } button:hover, .button:hover { transition-duration: 0.1s; background: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 6%)); } input::file-selector-button { padding: 0px 4px; height: 19px; } .input-toggle { display: inline-block; position: relative; vertical-align: middle; width: calc(var(--input-height) * 2); user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; margin-right: 4px; } .input-toggle > input { position: absolute; opacity: 0; pointer-events: none; } .input-toggle > label { display: block; overflow: hidden; cursor: pointer; height: var(--input-height); padding: 0; line-height: var(--input-height); border: var(--input-border-size) solid var(--input-border-color); border-radius: var(--input-height); background: var(--input-background-color); transition: background 0.2s ease-in; } .input-toggle > label:before { content: ""; display: block; width: calc(var(--input-height) - ((var(--input-border-size) + var(--input-switch-padding)) * 2)); margin: 0px; background: var(--input-text-color); position: absolute; top: calc(var(--input-border-size) + var(--input-switch-padding)); bottom: calc(var(--input-border-size) + var(--input-switch-padding)); right: calc(var(--input-border-size) + var(--input-switch-padding) + var(--input-height)); border-radius: calc(var(--input-height) - ((var(--input-border-size) + var(--input-switch-padding)) * 2)); transition: all 0.2s ease-in 0s; opacity: 0.8; } .input-toggle > input:checked + label { background: var(--accent-color); } .input-toggle > input:checked + label:before { right: calc(var(--input-border-size) + var(--input-switch-padding)); opacity: 1; } .model-filter { width: 90%; padding-right: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Small screens */ @media screen and (max-width: 1265px) { #top-nav { flex-direction: column; } } /* MOBILE SUPPORT */ @media screen and (max-width: 700px) { body { margin: 0px; } #container { margin: 0px; } .flex-container { flex-direction: column; } #preview { margin: 0px; padding: 0px; } #preview .collapsible-content { padding: 0px; } #preview .collapsible-content { padding: 0px; } .imgItem { margin-right: 0px; } .imgItem img { height: 100%; width: 100%; object-fit: contain; } #editor { padding: 16px 8px; } #editor-settings { min-width: 0px; } .tab-content-inner { margin: 0px; } .tab { font-size: 0; } .tab .icon { padding-right: 0px; } #server-status { top: 75%; } .popup > div { padding-left: 5px !important; padding-right: 5px !important; } .popup > div input, .popup > div select { max-width: 40vw; } .popup .close-button { padding: 0px !important; margin: 24px !important; } .simple-tooltip { display: none; } #preview-tools button { font-size: 0px; } #preview-tools button .icon { font-size: 12pt; } } @media screen and (max-width: 500px) { #server-status #server-status-msg { display: none; } #server-status:hover #server-status-msg { display: inline; } } @media (min-width: 700px) { /* #editor { max-width: 480px; }*/ .float-container { padding: 20px; } .float-child { width: 50%; float: left; padding: 20px; } } .help-btn { position: relative; } #promptsFromFileBtn { font-size: 9pt; display: inline; padding: 2pt; } .section-button { position: relative; transform: translateY(-13%); } .collapsible:not(.active) #copy-image-settings { display: none; } .section-button { cursor: pointer; float: right; padding: 8px; opacity: 1; transition: opacity 0.5; } .section-button { cursor: pointer; float: right; padding: 8px; opacity: 1; transition: opacity 0.5; } .collapsible:not(.active) .section-button { display: none; } /* SIMPLE TOOTIP */ .simple-tooltip { border-radius: 3px; font-weight: bold; font-size: 12px; background-color: var(--background-color3); visibility: hidden; opacity: 0; position: absolute; width: max-content; max-width: 300px; padding: 8px 12px; transition: 0.3s all; z-index: 1000; pointer-events: none; } @media (hover: hover) { :hover > .simple-tooltip { opacity: 1; visibility: visible; } } .simple-tooltip.right { right: 0px; top: 50%; transform: translate(100%, -50%); } :hover > .simple-tooltip.right { transform: translate(100%, -50%); } .simple-tooltip.top { top: 0px; left: 50%; transform: translate(-50%, calc(-100% + 15%)); } :hover > .simple-tooltip.top { transform: translate(-50%, -100%); } .simple-tooltip.left { left: 0px; top: 50%; transform: translate(calc(-100% + 15%), -50%); } :hover > .simple-tooltip.left { transform: translate(-100%, -50%); } .simple-tooltip.bottom { bottom: 0px; left: 50%; transform: translate(-50%, calc(100% - 15%)); } :hover > .simple-tooltip.bottom { transform: translate(-50%, 100%); } .simple-tooltip.top-left { top: 0px; left: 0px; transform: translate(calc(-100% + 15%), calc(-100% + 15%)); } :hover > .simple-tooltip.top-left { transform: translate(-80%, -100%); } /* PROGRESS BAR */ .progress-bar { background: var(--background-color3); border-radius: 4px; border: 2px solid var(--background-color3); height: 16px; position: relative; transition: 0.25s 1s border, 0.25s 1s height; clear: both; } .progress-bar > div { background: var(--accent-color); border-radius: 4px; position: absolute; left: 0; top: 0; bottom: 0; width: 0%; transition: width 1s ease-in-out; } .progress-bar.active { background: repeating-linear-gradient(-65deg, var(--background-color2), var(--background-color2) 4px, var(--background-color3) 5px, var(--background-color3) 9px, var(--background-color2) 10px); background-size: 200% auto; background-position: 0 100%; animation: progress-anim 2s infinite; animation-fill-mode: forwards; animation-timing-function: linear; } @keyframes progress-anim { 0% { background-position: -55px 0; } 100% { background-position: 0 0; } } /* POPUPS */ .popup:not(.active) { visibility: hidden; opacity: 0; } .popup { position: absolute; background: rgba(32, 33, 36, 50%); top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1000; opacity: 1; transition: 0s visibility, 0.3s opacity; } @media only screen and (min-height: 1050px) { .popup { position: fixed; } } .popup > div { position: relative; background: var(--background-color2); border: solid 1px var(--background-color3); max-width: 700px; margin: auto; margin-top: 50px; border-radius: 6px; padding: 30px; text-align: center; box-shadow: 0px 0px 30px black; } .popup .close-button { position: absolute; right: 0px; top: 0px; transform: scale(150%); cursor: pointer; padding: 24px; } /* TABS */ .tab-container { display: flex; align-items: flex-end; } .tab { padding: 8px 16px; border-radius: 4px 4px 0px 0px; margin-left: 8px; cursor: pointer; background: var(--background-color1); opacity: 50%; transition: opacity 0.25s; } .tab:hover { opacity: 75%; } .tab.active { opacity: 100%; } .tab-content:not(.active) { display: none; } #tab-content-wrapper > * { padding-top: 8px; } .tab-content-inner { margin: auto; max-width: 600px; text-align: center; padding: 20px 10px; } .panel-box { background: var(--background-color2); border: 1px solid var(--background-color3); border-radius: 7px; padding: 7px; margin-bottom: 15px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15); } i.active { background: var(--accent-color); } .primaryButton.active { background: hsl(var(--accent-hue), 100%, 50%); } #system-info { max-width: 800px; font-size: 10pt; } #system-info .value { text-align: left; padding-left: 10pt; } #system-info label { float: right; font-weight: bold; } button:active { transition-duration: 0.1s; background-color: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 24%)); position: relative; top: 1px; left: 1px; } div.task-initimg > img { margin-right: 6px; display: block; } div.task-fs-initimage { display: none; position: absolute; } div.task-initimg:hover div.task-fs-initimage { display: block; position: absolute; z-index: 9999; box-shadow: 0 0 30px #000; margin-top:-64px; max-width: 75vw; max-height: 75vh; } div.top-right { position: absolute; top: 8px; right: 8px; } #small_image_warning { font-size: smaller; color: var(--status-orange); } button#save-system-settings-btn { padding: 4pt 8pt; } #ip-info a { color:var(--text-color) } #ip-info div { line-height: 200%; } /* SCROLLBARS */ :root { --scrollbar-width: 14px; --scrollbar-radius: 10px; } .scrollbar-editor::-webkit-scrollbar { width: 8px; } .scrollbar-editor::-webkit-scrollbar-track { border-radius: 10px; } .scrollbar-editor::-webkit-scrollbar-thumb { background: --background-color2; border-radius: 10px; } ::-webkit-scrollbar { width: var(--scrollbar-width); } ::-webkit-scrollbar-track { box-shadow: inset 0 0 5px var(--input-border-color); border-radius: var(--input-border-radius); } ::-webkit-scrollbar-thumb { background: var(--background-color2); border-radius: var(--scrollbar-radius); } body.pause { border: solid 12px var(--accent-color); } body.wait-pause { animation: blinker 2s linear infinite; } @keyframes blinker { 0% { border: solid 12px var(--accent-color); } 50% { border: solid 12px var(--background-color1); } 100% { border: solid 12px var(--accent-color); } } .jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-title-c { color: var(--button-text-color); } .jconfirm.jconfirm-modern .jconfirm-box { background-color: var(--background-color1); } .displayNone { display:none !important; }