sygil-webui/frontend/css/custom.css

/* ----------------------------------------------
 * Generated by Animista on 2022-9-3 12:0:51
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
 @-webkit-keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  

/* CSS HEX */
:root {
--eerie-black: #141414ff;
--jet: #373737ff;
--white: #ffffffff;
--rajah: #faa549ff;
--tart-orange: #9c85fb;
--light-steel-blue: #b7d0f1ff;
}
/* Gallery items (not working) */
.gallery-item.svelte-1g9btlg.svelte-1g9btlg{
    border: none!important;
}
/* Loading background */
.dark .wrap.svelte-2fvq7v{
    background-color: #373737ff;
}

/* generate button */
#generate, #img2img_mask_btn, #img2img_edit_btn{
    transition: 0.3s;
    color: #9c85fb!important;
    border-color: #9c85fb!important;
}

#generate:hover, #img2img_mask_btn:hover, #img2img_edit_btn:hover{
    color: #141414ff!important;
    background-color: #9c85fb!important;
}


/* Generation paramters */
#highlight > div.textfield.bg-white.dark\:bg-transparent.rounded-sm.text-sm.box-border.max-w-full.break-word.leading-7.mt-7 > span:nth-child(2){
    background: none!important;
    color: white!important;
}
#highlight > div.textfield.bg-white.dark\:bg-transparent.rounded-sm.text-sm.box-border.max-w-full.break-word.leading-7.mt-7 > span:nth-child(4){
    background: none!important;
    color: white!important;
}
#highlight > div.textfield.bg-white.dark\:bg-transparent.rounded-sm.text-sm.box-border.max-w-full.break-word.leading-7.mt-7 > span:nth-child(6){
    background: none!important;
    color: white!important;
}
#highlight > div.textfield.bg-white.dark\:bg-transparent.rounded-sm.text-sm.box-border.max-w-full.break-word.leading-7.mt-7 > span:nth-child(8){
    background: none!important;
    color: white!important;
}
#highlight > div.textfield.bg-white.dark\:bg-transparent.rounded-sm.text-sm.box-border.max-w-full.break-word.leading-7.mt-7 > span:nth-child(10){
    background: none!important;
    color: white!important;
}
#highlight > div.textfield.bg-white.dark\:bg-transparent.rounded-sm.text-sm.box-border.max-w-full.break-word.leading-7.mt-7 > span:nth-child(12){
    background: none!important;
    color: white!important;
}

/* Mask background */
.dark .bg-gray-200{
    background-color:rgba(55, 55, 55, 0.105)!important;
}
.cropper-wrap-box, .cropper-canvas{
    background-color:rgba(55, 55, 55, 0.105)!important;
}
.cropper-bg {
    background: none!important;
}

select {
    background:#000;
    color:#fff;
}

select * {
    background:#373737ff;
    color:#9c85fb;
}

/* General Background */
.gradio-container {background:#141414ff;}

/*General Text color on hover */
.dark .hover\:text-gray-700:hover{
    color: #9d85fb8a!important;
}
/*General Text color */
.text-gray-400{
    color:rgba(255, 255, 255, 0.504);
    transition: 0.3s;
}

/* General container of everything */
.dark .dark\:bg-gray-950 {background-color: #141414ff!important;
    -webkit-animation: fade-in 1s ease-in both;
	        animation: fade-in 1s ease-in both;
}
/* labels in frames of gallery */
.dark .dark\:bg-gray-900 {
background-color:#9d85fbdf!important;
border: none!important;}
/* Background for Gradio stuff along with colors for text */
.dark .gr-box {
	

    background-color:rgba(55, 55, 55, 0.105)!important;
    border: solid 0.5px!important;
    border-color: rgba(55, 55, 55, 0.055)!important;
    /* sampler selector color */
    color: #9c85fb!important;}

/* Secondary Buttons color */
.dark .gr-button-secondary{
    color: #9c85fb;
    border-color: #9d85fb5c;
    transition: 0.3s;}

.dark .gr-button-secondary:hover{
    color: #141414ff!important;
    background-color: #9c85fb!important;}

.dark .gr-button-primary{
    color: #9c85fb;
    border-color: #9d85fb5c;
    transition: 0.3s;}

.dark .gr-button-primary:hover{
    color: #141414ff!important;
    background-color: #9c85fb!important;}

/* image lab process button */
div[id*="111"]{
    width: 50% !important;
    align-self: center !important;
}
/* Selected tabs color */
button, input, optgroup, select, textarea {color: #9c85fb!important}

/* -or- text color wtf */
.text-gray-300{
    color:rgba(255, 255, 255, 0.504);
}

/* Sliders colors */
button, input, optgroup, select, textarea{
accent-color: #9c85fb!important;
}
/* Text color for placeholder in prompt */
input.scroll-hide.block.gr-box.gr-input.w-full.gr-text-input::placeholder{
    color: #9d85fb5c;
    transition: 0.3s;
}
/* disabling borders for stuff */
.border-gray-200{
    /* no border */
    border: none;
}

.border-b-2{
    /* no border */
    border: none;
}
/* disabling backgrounds for labels and buttons */
button, select, textarea {
    background: none!important;
}
/* radio selection border and background */
.dark .gr-input-label{
    background: none!important;
    border: none!important;
}
/* checkbox and radio buttons color when checked */
.dark .gr-check-radio:checked{
    background-color: #9c85fb!important;
}
/* checkbox and radio buttons color when unchecked */
.dark .gr-check-radio{
    background-color: #373737ff!important;
}