forked from extern/easydiffusion
cb618efb98
* fixed tools for image editor to be more modular and made cursor an actual cursor change * fixed eraser cursor positioning * updated opacity to not have a 100 option * separated clear into an actions section * added history support for image editor. ctrl-z and ctrl-y both work now * removed extra console log debugging stuff * updated buttons style * updated the button ui on the main page as requested * updated with a bunch of bugfixes
204 lines
3.7 KiB
CSS
204 lines
3.7 KiB
CSS
.editor-controls-left {
|
|
padding-left: 32px;
|
|
text-align: left;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.editor-options-container {
|
|
display: flex;
|
|
row-gap: 10px;
|
|
max-width: 210px;
|
|
}
|
|
|
|
.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: 2px 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);
|
|
}
|
|
|
|
#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;
|
|
}
|
|
|
|
.image-editor-popup > div {
|
|
margin: var(--popup-margin);
|
|
padding: var(--popup-padding);
|
|
min-height: calc(100vh - (2 * var(--popup-margin)));
|
|
max-width: none;
|
|
}
|
|
|
|
.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(100vh - (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;
|
|
}
|
|
|
|
.image-editor-popup .button {
|
|
display: flex;
|
|
}
|
|
.image-editor-popup h4 {
|
|
text-align: left;
|
|
} |