.inpaint-modal-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.7);
z-index:var(--z-modal);
display:flex;
align-items:center;
justify-content:center;
}
.inpaint-modal-content{
display:flex;
flex-direction:row;
width:95vw;
height:90vh;
max-width:1400px;
max-height:900px;
background-color:var(--background-color-A);
border:1px solid var(--fjm-border-color);
border-radius:var(--fjm-border-radius);
overflow:hidden;
position:relative;
}
#inpaint-left-panel{
display:flex;
flex-direction:column;
gap:6px;
padding:10px;
background-color:var(--background-color-B);
border-right:1px solid var(--fjm-border-color);
flex-shrink:0;
width:120px;
}
#inpaint-left-panel .inpaint-section-label{
font-size:11px;
color:var(--color-text-secondary);
margin-top:4px;
}
.inpaint-tool-btn{
padding:6px 10px;
border:1px solid var(--fjm-border-color);
background-color:var(--background-color-A);
color:var(--component-text-color);
cursor:pointer;
border-radius:var(--fjm-button-border-radius);
font-size:12px;
width:100%;
text-align:center;
}
.inpaint-tool-btn:hover{
background-color:var(--background-color-C);
}
.inpaint-tool-btn.inpaint-tool-active{
background-color:var(--accent-color,#4a90d9);
color:#fff;
border-color:var(--accent-color,#4a90d9);
}
.inpaint-action-btn{
padding:6px 10px;
border:1px solid var(--fjm-border-color);
background-color:var(--background-color-A);
color:var(--component-text-color);
cursor:pointer;
border-radius:var(--fjm-button-border-radius);
font-size:12px;
width:100%;
text-align:center;
}
.inpaint-action-btn:hover{
background-color:var(--background-color-C);
}
.inpaint-action-btn:disabled{
opacity:0.5;
cursor:default;
}
.inpaint-separator{
width:100%;
height:1px;
background-color:var(--fjm-border-color);
margin:4px 0;
}
.inpaint-close-btn{
position:absolute;
top:6px;
right:6px;
width:28px;
height:28px;
border:none;
background:none;
color:var(--component-text-color);
font-size:18px;
cursor:pointer;
border-radius:var(--fjm-button-border-radius);
display:flex;
align-items:center;
justify-content:center;
z-index:1;
}
.inpaint-close-btn:hover{
background-color:var(--background-color-C);
}
#inpaint-left-panel input[type="range"]{
width:100%;
}
#inpaint-left-panel label,
#inpaint-left-panel span{
font-size:12px;
color:var(--component-text-color);
}
#inpaint-canvas-area{
flex:1;
display:flex;
align-items:center;
justify-content:center;
overflow:auto;
position:relative;
background-color:#1a1a1a;
min-height:0;
min-width:0;
}
#inpaint-canvas-wrapper{
position:relative;
display:inline-block;
}
#inpaint-image-canvas{
display:block;
}
#inpaint-mask-canvas{
position:absolute;
top:0;
left:0;
cursor:crosshair;
opacity:0.5;
}
#inpaint-right-panel{
display:flex;
flex-direction:column;
gap:8px;
padding:10px;
background-color:var(--background-color-B);
border-left:1px solid var(--fjm-border-color);
flex-shrink:0;
width:240px;
overflow-y:auto;
}
.inpaint-control-row{
display:flex;
flex-direction:column;
gap:4px;
}
.inpaint-control-row label{
font-size:12px;
color:var(--component-text-color);
white-space:nowrap;
}
.inpaint-control-row textarea{
background-color:var(--background-color-A);
color:var(--component-text-color);
border:1px solid var(--fjm-border-color);
border-radius:var(--textarea-border-radius);
padding:4px 6px;
font-size:12px;
resize:vertical;
width:100%;
box-sizing:border-box;
min-height:60px;
}
.inpaint-control-row input[type="range"]{
width:100%;
}
.inpaint-control-row span{
font-size:12px;
color:var(--component-text-color);
}
.inpaint-denoise-row{
display:flex;
align-items:center;
gap:4px;
}
.inpaint-denoise-row label{
font-size:12px;
color:var(--component-text-color);
white-space:nowrap;
}
.inpaint-denoise-row input[type="range"]{
flex:1;
}
.inpaint-denoise-row span{
font-size:12px;
color:var(--component-text-color);
min-width:30px;
}
#inpaint-generate-btn{
padding:8px 20px;
background-color:var(--accent-color,#4a90d9);
color:#fff;
border:none;
border-radius:var(--fjm-button-border-radius);
cursor:pointer;
font-size:13px;
width:100%;
}
#inpaint-generate-btn:hover{
opacity:0.85;
}
#inpaint-generate-btn:disabled{
opacity:0.5;
cursor:default;
}