Spaces:
Runtime error
Runtime error
.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; | |
} | |
.image-editor-popup .load_mask { | |
display: none; | |
} | |
.inpainter .load_mask { | |
display: flex; | |
} |