( ′∀`)σ≡σ☆))Д′)レ(゚∀゚;)ヘ=З=З=Зε≡(ノ´_ゝ`)ノ
/* ================= GENERAL ================== */
.aibrand-loader {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 98;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
display: none;
}
#brand-apps-content {
padding-bottom: 20px;
}
#sketch-to-image-wrap {
position: relative;
z-index: 9;
overflow: hidden;
display: block;
opacity: 0;
}
.sketch-to-image-buttons {
padding-top: 5px;
}
.sketch-to-image-buttons button .material-icons {
font-size: 18px;
}
#oai-variation,
#oai-edit,
#sai-imgtoimg-generate,
#sai-upscale,
#clipdrop-replace-background,
#clipdrop-upscale,
#clipdrop-uncrop {
margin-top: 15px !important;
}
#aibrand-oai-variation .arrow,
#aibrand-oai-edit .arrow,
#aibrand-sai-regenerator .arrow,
#aibrand-sai-upscaler .arrow,
#aibrand-clipdrop-remove-background .arrow,
#aibrand-clipdrop-replace-background .arrow,
#aibrand-clipdrop-remove-text .arrow,
#aibrand-clipdrop-upscaler .arrow,
#aibrand-clipdrop-inpainting .arrow,
#aibrand-clipdrop-reimagine .arrow,
#aibrand-clipdrop-uncrop .arrow {
margin-left: 0;
}
#aibrand-clipdrop-remove-background .brand-control-desc,
#aibrand-clipdrop-inpainting .brand-control-desc,
#aibrand-clipdrop-remove-text .brand-control-desc {
padding-top: 0;
padding-right: 0;
padding-left: 0;
padding-bottom: 15px;
}
#brand-removebg-settings .brand-control-desc,
#brand-clean-settings .brand-control-desc,
#brand-removetext-settings .brand-control-desc {
padding-top: 0;
padding-right: 0;
padding-left: 0;
padding-bottom: 15px;
}
.brand-control-desc.aibrand-desc {
padding-top: 10px
}
#sai-balance-notice {
display: flex;
align-items: center;
justify-content: space-between;
}
#sai-balance-check {
color: #fff;
line-height: 1;
transition: opacity 0.2s ease-in-out;
opacity: 0.7;
}
#sai-balance-check .material-icons {
font-size: 1.4rem;
}
#sai-balance-check:hover {
opacity: 1;
}
#sai-balance-check.loading {
-webkit-animation: thebrandSpin 1s infinite linear;
animation: thebrandSpin 1s infinite linear;
pointer-events: none;
opacity: 0.7;
}
.aibrand-user-credits .material-icons {
font-size: 1.1rem;
margin-right: 0.25rem;
color: #FFC107;
}
/* ================= GRID ================== */
.brand-grid.aibrand-grid {
grid-template-columns: 1fr 1fr;
column-gap: 1rem;
row-gap: 1rem;
}
#oai-images.brand-grid.aibrand-grid,
#clipdrop-images.brand-grid.aibrand-grid {
grid-template-columns: 1fr;
}
.aibrand-grid.aibrand-grid-placeholder,
.brand-img-wrap.error {
pointer-events: none;
}
.aibrand-grid.aibrand-grid-placeholder .brand-img-wrap:before,
.brand-img-wrap.error:before {
font-family: 'Material Icons';
content: 'landscape';
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
font-size: 40px;
}
.brand-img-wrap.error:before {
content: 'image_not_supported';
}
.modal-ai-image-wrap {
display: flex;
}
.modal-ai-image-column-left {
padding-right: 0px;
width: 65%;
position: relative;
}
.modal-ai-image-column-right {
padding-left: 40px;
width: 35%;
}
.modal-ai-image-column-right ul.brand-accordion {
margin-bottom: 15px;
}
.modal-ai-image-wrap .brand-form-field {
margin: 0;
}
.modal-ai-image-wrap textarea {
min-height: 140px;
max-width: 100%;
}
.modal-ai-image-wrap .brand-control-label {
margin-bottom: 5px;
}
.modal-ai-image-wrap .brand-control-wrap {
margin: 0 0 1rem 0;
}
.modal-ai-image-wrap .brand-control-wrap:last-child {
margin: 0;
}
#modal-ai-image .brand-control-desc {
padding: 0 0 15px 0;
margin-top: -5px;
}
#modal-ai-image .brand-control-desc:last-of-type {
padding: 0;
}
.aibrand-img-card {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
transition: all 0.2s ease-in-out;
opacity: 0;
visibility: hidden;
overflow: hidden;
}
.aibrand-img-card-inner {
max-width: 240px;
width: 100%;
padding: 1.5rem;
margin: auto;
}
.aibrand-grid .brand-masonry-item:hover .aibrand-img-card {
opacity: 1;
visibility: visible;
}
.aibrand-grid .brand-masonry-item {
cursor: inherit;
}
.aibrand-img-seed-wrap {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.aibrand-img-seed-wrap span {
padding: 0 7px;
font-weight: 700;
font-size: 0.9rem;
}
.aibrand-img-seed-wrap .brand-form-field {
padding: 7px 10px;
}
.aibrand-img-select,
.aibrand-img-save {
margin-top: 0.5rem;
}
.aibrand-img-btns .brand-btn:hover {
border-color: transparent
}
/* ================= SKETCH TO IMG ================== */
#sai-text-to-text-tab .modal-ai-image-column-left {
width: 70%;
}
#sai-text-to-text-tab .modal-ai-image-column-right {
width: 30%;
}
#sketch-to-image-wrap {
position: relative;
z-index: 9;
overflow: hidden;
display: block;
opacity: 0;
}
.sketch-to-image-buttons {
padding-top: 5px;
}
.sketch-to-image-buttons button .material-icons {
font-size: 18px;
}
#clipdrop-sketch-images {
grid-template-columns: 1fr;
margin-bottom: 15px;
}
#clipdrop-sketch-images.aibrand-grid-placeholder {
display: none;
}
#clipdrop-sketch-to-image-tab .brand-control-desc {
margin-top: 10px;
}
#sketch-to-image-prompt {
min-height: 100px;
}
/* ================= COLORS ================== */
/* DARK THEME */
body.dark-theme #sketch-to-image-wrap {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='%23000000'/%3E%3C/svg%3E") left top/contain #333;
background-size: 15px 15px;
}
body.dark-theme .aibrand-loader {
background: #121212;
}
body.dark-theme .brand-grid.aibrand-grid .brand-masonry-item-inner {
border: 1px solid #303030 !important;
}
body.dark-theme .aibrand-img-card {
background: rgba(18, 18, 18, 0.8);
}
body.dark-theme .aibrand-img-card-inner {
background: #121212;
border: 1px solid #303030;
}
body.dark-theme .aibrand-img-seed-wrap {
background: #303030;
}
body.dark-theme .aibrand-img-seed-wrap span {
color: #fff;
}
body.dark-theme .aibrand-img-seed-wrap .brand-form-field {
border: 1px solid #303030;
}
body.dark-theme .aibrand-user-credits {
border: 1px solid #303030;
}
body.dark-theme #sketch-to-image-wrap {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='%23000000'/%3E%3C/svg%3E") left top/contain #333;
background-size: 15px 15px;
}
/* LIGHT THEME */
body.light-theme #sketch-to-image-wrap {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='%23FFFFFF'/%3E%3C/svg%3E") left top/contain #ccc;
background-size: 15px 15px;
}
body.light-theme .aibrand-loader {
background: #fff;
}
body.light-theme .brand-grid.aibrand-grid .brand-masonry-item-inner {
border: 1px solid #bcbcbc !important;
}
body.light-theme .aibrand-img-card {
background: rgba(255, 255, 255, 0.5);
}
body.light-theme .aibrand-img-card-inner {
background: #fff;
border: 1px solid #bcbcbc;
}
body.light-theme .aibrand-img-seed-wrap {
background: #bcbcbc;
}
body.light-theme .aibrand-img-seed-wrap span {
color: #111;
}
body.light-theme .aibrand-img-seed-wrap .brand-form-field {
border: 1px solid #bcbcbc;
}
body.light-theme .aibrand-user-credits {
border: 1px solid #bcbcbc;
}
body.light-theme #sketch-to-image-wrap {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='%23FFFFFF'/%3E%3C/svg%3E") left top/contain #ccc;
background-size: 15px 15px;
}
/* ================= MEDIA QUERIES ================== */
@media only screen and (max-width: 900px) {
#sai-text-to-text-tab .modal-ai-image-column-left,
.modal-ai-image-column-left {
width: 60%;
}
#sai-text-to-text-tab .modal-ai-image-column-right,
.modal-ai-image-column-right {
width: 40%;
}
.brand-grid.aibrand-grid {
grid-template-columns: 1fr;
}
}
@media only screen and (max-width: 700px) {
.modal-ai-image-wrap {
display: block;
}
#sai-text-to-text-tab .modal-ai-image-column-left,
#sai-text-to-text-tab .modal-ai-image-column-right,
.modal-ai-image-column-left,
.modal-ai-image-column-right {
width: 100%;
padding: 0;
}
.modal-ai-image-column-left {
padding-bottom: 1rem
}
#sketch-to-image-wrap {
margin-bottom: 30px;
}
}