|
|
|
|
|
.loader-container { |
|
display: flex; |
|
align-items: center; |
|
white-space: nowrap; |
|
} |
|
|
|
.loader { |
|
border: 8px solid #f3f3f3; |
|
border-top: 8px solid #3498db; |
|
border-radius: 50%; |
|
width: 30px; |
|
height: 30px; |
|
animation: spin 2s linear infinite; |
|
} |
|
|
|
@keyframes spin { |
|
0% { transform: rotate(0deg); } |
|
100% { transform: rotate(360deg); } |
|
} |
|
|
|
|
|
progress { |
|
appearance: none; |
|
height: 20px; |
|
border-radius: 5px; |
|
background-color: #f3f3f3; |
|
width: 100%; |
|
} |
|
|
|
|
|
.progress-container { |
|
margin-left: 20px; |
|
margin-right: 20px; |
|
flex-grow: 1; |
|
} |
|
|
|
|
|
progress::-webkit-progress-value { |
|
background-color: #3498db; |
|
} |
|
|
|
progress::-moz-progress-bar { |
|
background-color: #3498db; |
|
} |
|
|
|
|
|
progress::after { |
|
content: attr(value '%'); |
|
position: absolute; |
|
top: 50%; |
|
left: 50%; |
|
transform: translate(-50%, -50%); |
|
color: white; |
|
font-size: 14px; |
|
} |
|
|
|
|
|
.loader-container > span { |
|
margin-left: 5px; |
|
} |
|
|
|
.progress-bar > .generating { |
|
display: none !important; |
|
} |
|
|
|
.progress-bar{ |
|
height: 30px !important; |
|
} |
|
|
|
.type_row{ |
|
height: 80px !important; |
|
} |
|
|
|
.type_row_half{ |
|
height: 32px !important; |
|
} |
|
|
|
.scroll-hide{ |
|
resize: none !important; |
|
} |
|
|
|
.refresh_button{ |
|
border: none !important; |
|
background: none !important; |
|
font-size: none !important; |
|
box-shadow: none !important; |
|
} |
|
|
|
.advanced_check_row{ |
|
width: 250px !important; |
|
} |
|
|
|
.min_check{ |
|
min-width: min(1px, 100%) !important; |
|
} |
|
|
|
.resizable_area { |
|
resize: vertical; |
|
overflow: auto !important; |
|
} |
|
|
|
.aspect_ratios label { |
|
width: 140px !important; |
|
} |
|
|
|
.aspect_ratios label span { |
|
white-space: nowrap !important; |
|
} |
|
|
|
.aspect_ratios label input { |
|
margin-left: -5px !important; |
|
} |
|
|
|
.lora_enable label { |
|
height: 100%; |
|
} |
|
|
|
.lora_enable label input { |
|
margin: auto; |
|
} |
|
|
|
.lora_enable label span { |
|
display: none; |
|
} |
|
|
|
@-moz-document url-prefix() { |
|
.lora_weight input[type=number] { |
|
width: 80px; |
|
} |
|
} |
|
|
|
#context-menu{ |
|
z-index:9999; |
|
position:absolute; |
|
display:block; |
|
padding:0px 0; |
|
border:2px solid #a55000; |
|
border-radius:8px; |
|
box-shadow:1px 1px 2px #CE6400; |
|
width: 200px; |
|
} |
|
|
|
.context-menu-items{ |
|
list-style: none; |
|
margin: 0; |
|
padding: 0; |
|
} |
|
|
|
.context-menu-items a{ |
|
display:block; |
|
padding:5px; |
|
cursor:pointer; |
|
} |
|
|
|
.context-menu-items a:hover{ |
|
background: #a55000; |
|
} |
|
|
|
.canvas-tooltip-info { |
|
position: absolute; |
|
top: 28px; |
|
left: 2px; |
|
cursor: help; |
|
background-color: rgba(0, 0, 0, 0.3); |
|
width: 20px; |
|
height: 20px; |
|
border-radius: 50%; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
flex-direction: column; |
|
|
|
z-index: 100; |
|
} |
|
|
|
.canvas-tooltip-info::after { |
|
content: ''; |
|
display: block; |
|
width: 2px; |
|
height: 7px; |
|
background-color: white; |
|
margin-top: 2px; |
|
} |
|
|
|
.canvas-tooltip-info::before { |
|
content: ''; |
|
display: block; |
|
width: 2px; |
|
height: 2px; |
|
background-color: white; |
|
} |
|
|
|
.canvas-tooltip-content { |
|
display: none; |
|
background-color: #f9f9f9; |
|
color: #333; |
|
border: 1px solid #ddd; |
|
padding: 15px; |
|
position: absolute; |
|
top: 40px; |
|
left: 10px; |
|
width: 250px; |
|
font-size: 16px; |
|
opacity: 0; |
|
border-radius: 8px; |
|
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); |
|
|
|
z-index: 100; |
|
} |
|
|
|
.canvas-tooltip:hover .canvas-tooltip-content { |
|
display: block; |
|
animation: fadeIn 0.5s; |
|
opacity: 1; |
|
} |
|
|
|
@keyframes fadeIn { |
|
from {opacity: 0;} |
|
to {opacity: 1;} |
|
} |
|
|
|
.styler { |
|
overflow:inherit !important; |
|
} |
|
|
|
.gradio-container{ |
|
overflow: visible; |
|
} |
|
|
|
|
|
|
|
#lightboxModal{ |
|
display: none; |
|
position: fixed; |
|
z-index: 1001; |
|
left: 0; |
|
top: 0; |
|
width: 100%; |
|
height: 100%; |
|
overflow: auto; |
|
background-color: rgba(20, 20, 20, 0.95); |
|
user-select: none; |
|
-webkit-user-select: none; |
|
flex-direction: column; |
|
} |
|
|
|
.modalControls { |
|
display: flex; |
|
position: absolute; |
|
right: 0px; |
|
left: 0px; |
|
gap: 1em; |
|
padding: 1em; |
|
background-color:rgba(0,0,0,0); |
|
z-index: 1; |
|
transition: 0.2s ease background-color; |
|
} |
|
.modalControls:hover { |
|
background-color:rgba(0,0,0,0.9); |
|
} |
|
.modalClose { |
|
margin-left: auto; |
|
} |
|
.modalControls span{ |
|
color: white; |
|
text-shadow: 0px 0px 0.25em black; |
|
font-size: 35px; |
|
font-weight: bold; |
|
cursor: pointer; |
|
width: 1em; |
|
} |
|
|
|
.modalControls span:hover, .modalControls span:focus{ |
|
color: #999; |
|
text-decoration: none; |
|
} |
|
|
|
#lightboxModal > img { |
|
display: block; |
|
margin: auto; |
|
width: auto; |
|
} |
|
|
|
#lightboxModal > img.modalImageFullscreen{ |
|
object-fit: contain; |
|
height: 100%; |
|
width: 100%; |
|
min-height: 0; |
|
} |
|
|
|
.modalPrev, |
|
.modalNext { |
|
cursor: pointer; |
|
position: absolute; |
|
top: 50%; |
|
width: auto; |
|
padding: 16px; |
|
margin-top: -50px; |
|
color: white; |
|
font-weight: bold; |
|
font-size: 20px; |
|
transition: 0.6s ease; |
|
border-radius: 0 3px 3px 0; |
|
user-select: none; |
|
-webkit-user-select: none; |
|
} |
|
|
|
.modalNext { |
|
right: 0; |
|
border-radius: 3px 0 0 3px; |
|
} |
|
|
|
.modalPrev:hover, |
|
.modalNext:hover { |
|
background-color: rgba(0, 0, 0, 0.8); |
|
} |
|
|
|
#imageARPreview { |
|
position: absolute; |
|
top: 0px; |
|
left: 0px; |
|
border: 2px solid red; |
|
background: rgba(255, 0, 0, 0.3); |
|
z-index: 900; |
|
pointer-events: none; |
|
display: none; |
|
} |
|
|
|
#stylePreviewOverlay { |
|
opacity: 0; |
|
pointer-events: none; |
|
width: 128px; |
|
height: 128px; |
|
position: fixed; |
|
top: 0px; |
|
left: 0px; |
|
border: solid 1px lightgrey; |
|
transform: translate(-140px, 20px); |
|
background-size: cover; |
|
background-position: center; |
|
background-color: rgba(0, 0, 0, 0.3); |
|
border-radius: 5px; |
|
z-index: 100; |
|
transition: transform 0.1s ease, opacity 0.3s ease; |
|
} |
|
|
|
#stylePreviewOverlay.lower-half { |
|
transform: translate(-140px, -140px); |
|
} |
|
|
|
|
|
.contain .tabs { |
|
height: 100%; |
|
} |
|
|
|
.contain .tabs .tabitem.style_selections_tab { |
|
height: 100%; |
|
} |
|
|
|
.contain .tabs .tabitem.style_selections_tab > div:first-child { |
|
height: 100%; |
|
} |
|
|
|
.contain .tabs .tabitem.style_selections_tab .style_selections { |
|
min-height: 200px; |
|
height: 100%; |
|
} |
|
|
|
.contain .tabs .tabitem.style_selections_tab .style_selections .wrap[data-testid="checkbox-group"] { |
|
position: absolute; |
|
overflow: auto; |
|
padding-right: 2px; |
|
max-height: 100%; |
|
} |
|
|
|
.contain .tabs .tabitem.style_selections_tab .style_selections .wrap[data-testid="checkbox-group"] label { |
|
|
|
flex: calc(50% - 5px) !important; |
|
} |
|
|
|
.contain .tabs .tabitem.style_selections_tab .style_selections .wrap[data-testid="checkbox-group"] label span { |
|
|
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
} |
|
|
|
|
|
.preview-tooltip { |
|
background-color: #fff8; |
|
font-family: monospace; |
|
text-align: center; |
|
border-radius-top: 5px; |
|
display: none; |
|
} |