.editor-controls-left { padding-left: 32px; text-align: left; padding-bottom: 20px; max-width: min-content; } .editor-options-container { display: flex; row-gap: 10px; } .editor-options-container > * { flex: 1; display: flex; justify-content: center; align-items: center; } .editor-options-container > * > * { position: inherit; width: 32px; height: 32px; border-radius: 16px; background: var(--background-color3); cursor: pointer; transition: opacity 0.25s; } .editor-options-container > * > *:hover { opacity: 0.75; } .editor-options-container > * > *.active { border: 1px solid #3584e4; } .image_editor_opacity .editor-options-container > * > *:not(.active) { border: 1px solid var(--background-color3); } .image_editor_color .editor-options-container { flex-wrap: wrap; } .image_editor_color .editor-options-container > * { flex: 20%; } .image_editor_color .editor-options-container > * > * { position: relative; } .image_editor_color .editor-options-container > * > *.active::before { content: "\f00c"; display: var(--fa-display,inline-block); font-style: normal; font-variant: normal; line-height: 1; text-rendering: auto; font-family: var(--fa-style-family, "Font Awesome 6 Free"); font-weight: var(--fa-style, 900); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(125%); color: black; } .image_editor_color .editor-options-container > *:first-child { flex: 100%; } .image_editor_color .editor-options-container > *:first-child > * { width: 100%; } .image_editor_color .editor-options-container > *:first-child > * > input { width: 100%; height: 100%; opacity: 0; cursor: pointer; } .image_editor_color .editor-options-container > *:first-child > * > span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0.5; } .image_editor_color .editor-options-container > *:first-child > *.active > span { opacity: 0; } .image_editor_tool .editor-options-container { flex-wrap: wrap; } .image_editor_tool .editor-options-container > * { padding: 2px; flex: 50%; } .editor-controls-center { /* background: var(--background-color2); */ flex: 1; display: flex; justify-content: center; align-items: center; } .editor-controls-center > div { position: relative; background: black; } .editor-controls-center canvas { position: absolute; left: 0; top: 0; } .editor-controls-right { padding: 32px; display: flex; flex-direction: column; } .editor-controls-right > div:last-child { flex: 1; display: flex; flex-direction: column; min-width: 200px; gap: 5px; justify-content: end; } .image-editor-button { width: 100%; height: 32px; border-radius: 16px; background: var(--background-color3); } .editor-controls-right .image-editor-button { margin-bottom: 4px; } #init_image_button_inpaint .input-toggle { position: absolute; left: 16px; } #init_image_button_inpaint .input-toggle input:not(:checked) ~ label { pointer-events: none; } .image-editor-popup { --popup-margin: 16px; --popup-padding: 24px; } @media screen and (min-width: 700px) { .image-editor-popup { overflow-y: auto; } } .image-editor-popup > div { margin: var(--popup-margin); padding: var(--popup-padding); min-height: calc(99h - (2 * var(--popup-margin))); max-width: none; min-width: fit-content; } .image-editor-popup h1 { position: absolute; top: 32px; left: 50%; transform: translateX(-50%); } @media screen and (max-width: 700px) { .image-editor-popup > div { margin: 0px; padding: 0px; } .image-editor-popup h1 { position: relative; transform: none; left: auto; } } .image-editor-popup > div > div { min-height: calc(99vh - (2 * var(--popup-margin)) - (2 * var(--popup-padding))); } .inpainter .image_editor_color { display: none; } .inpainter .editor-canvas-background { opacity: 0.75; } #init_image_preview_container .button { display: flex; padding: 6px; height: 24px; box-shadow: 2px 2px 1px 1px #00000088; } #init_image_preview_container .button:hover { background: var(--background-color4) } .image-editor-popup .button { display: flex; } .image-editor-popup h4 { text-align: left; }