* { 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); } .image_preview_container { margin-top: 10pt; } .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; } .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; } .imgItemInfo { padding-bottom: 0.5em; display: flex; align-items: flex-end; flex-direction: column; position: absolute; padding: 5px; opacity: 0; transition: 0.1s all; } .imgContainer:hover > .imgItemInfo { opacity: 1; } .imgItemInfo * { margin-bottom: 7px; } #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 370pt; } #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: rgb(255, 221, 255); 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); width: 100%; height: 30pt; border-radius: 6px; display: none; margin-top: 2pt; } #stopImage:hover { background: rgb(177, 27, 0); } .flex-container { display: flex; width: 100%; } .col-free { flex: 1; } .collapsible { cursor: pointer; } .collapsible-content { display: block; padding-left: 15px; } .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); } .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; margin-bottom: 10pt; } #coffeeButton { height: 23px; transform: translateY(25%); } #inpaintingEditor { width: 300pt; height: 300pt; margin-top: 5pt; } .drawing-board-canvas-wrapper { background-size: 100% 100%; } .drawing-board-controls { min-width: 273px; } .drawing-board-control > button { background-color: #eee; border-radius: 3pt; } .drawing-board-control-inner { background-color: #eee; border-radius: 3pt; } #inpaintingEditor canvas { opacity: 0.6; } #enable_mask { margin-top: 8pt; } #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; background: var(--background-color4); border: 2px solid var(--background-color2); border-radius: 7px; 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; } .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; } .taskStatusLabel { float: left; font-size: 8pt; background:var(--background-color2); border: 1px solid rgb(61, 62, 66); padding: 2pt 4pt; border-radius: 2pt; margin-right: 5pt; } .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); } .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); } .useSettings { background: var(--accent-color); border: 1px solid var(--accent-color); color: rgb(255, 221, 255); padding: 3pt 6pt; margin-right: 6pt; float: right; } .useSettings:hover { background: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 6%)); } .stopTask { float: right; } #preview-tools { display: none; padding: 4pt; } .taskConfig { font-size: 10pt; color: #aaa; margin-bottom: 5pt; } .img-batch { display: inline; } #prompt_from_file { display: none; } #init_image_preview { max-width: 150px; 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_wrapper { position: relative; width: fit-content; } #init_image_size_box { position: absolute; right: 0px; bottom: 3px; padding: 3px; background: black; color: white; text-shadow: 0px 0px 4px black; opacity: 60%; font-size: 12px; border-radius: 6px 0px; } #editor-settings { min-width: 500px; } #editor-settings-entries { display: flex; flex-direction: column; } #editor-settings-entries > div { margin-top: 15px; } #editor-settings-entries ul { margin: 0px; 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, 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 { padding: 2px 4px; border-radius: 4px; background: var(--button-color); color: var(--button-text-color); border: var(--button-border); } 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; } /* MOBILE SUPPORT */ @media screen and (max-width: 700px) { #top-nav { flex-direction: column; } 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; } .dropdown-content { width: auto !important; transform: none !important; left: 0px; right: 0px; } #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 { display: none; } .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; } } @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; } .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; white-space: nowrap; padding: 8px 12px; transition: 0.3s all; pointer-events: none; } @media (hover: hover) { :hover > .simple-tooltip { opacity: 1; visibility: visible; } } .simple-tooltip.right { right: 0px; top: 50%; transform: translate(calc(100% - 15%), -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%); } /* 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; } .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 { border-top: 8px solid var(--background-color1); } .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; } #save-system-settings-btn { padding: 4pt 8pt; }