mirror of
https://github.com/Sygil-Dev/sygil-webui.git
synced 2024-12-15 22:42:14 +03:00
210 lines
5.3 KiB
CSS
210 lines
5.3 KiB
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;
|
|
}
|
|
|