user.css

a guest

Dec 18th, 2022

1,010

Never

Add comment

Not a member of Pastebin yet? Sign Up, it unlocks many cool features!

CSS 5.83 KB | Source Code | 0 0

raw download clone embed print report

/* user.css
Custom Dark theme for Stable Diffusion WebUI alpha-v1.01
Original Style.css Edit
/*================================================ */
/* Changes */
/*================================================ */
/*css hide Gradio animations*/
.dark .wrap .m-12 svg, .dark .wrap .z-20 svg, .dark .meta-text-center, .dark .meta-text {
display:none !important;
}
.dark .wrap .m-12::before, .dark .wrap .z-20::before {
content:"Loading..." !important;
}
/*Gradio Progrees bar color change*/
.dark .progress-bar {
background-color: #ff205f !important;
}
/* Import font */
@font-face {
font-family: 'Source Code Pro', monospace !important;
src: url('SourceCodePro-Regular.otf') !important;
}
.dark fieldset span.text-gray-500, .dark .gr-block.gr-box span.text-gray-500, .dark label.block span{
border: 1px solid #ff205f75!important;
}
.dark .dark\:bg-gray-900, .dark, .dark .gr-button-primary, .dark .dark\:text-gray-200, .dark .text-gray-700, .dark .text-gray-800, .dark .text-gray-900, .dark .\!text-gray-700, .dark .\!text-gray-800 {
color: #a7abb1 !important;
}
.dark .gr-input {
font-family: 'Source Code Pro', monospace !important;
font: 'Source Code Pro' !important;
color: #65f6ae !important;
}
.dark .gr-input::selection, .dark .gr-input:focus, .dark .gr-input:hover {
color: white !important;
background-color: #ff205f75 !important;
}
.dark, .dark .gr-button, .dark .bg-white, .dark .gr-panel, .gr-button-lg, .gr-box, .dark .dark\:bg-gray-700, .dark .dark\:bg-gray-950,
.dark fieldset span.text-gray-500, .dark .gr-block.gr-box span.text-gray-500,
.dark label.block span {
background-color: #000000 !important;
}
.dark .gr-radio, gr-check-radio gr-checkbox, .dark .gr-button-lg, .dark .gr-box, .dark .rounded-lg, .dark div.svelte-10ogue4 > :last-child, .dark div.svelte-10ogue4 > :first-child, rounded-t-lg {
border-radius: 0px !important;
}
.dark .gr-input-label, .dark .gr-button {
background-image: none !important;
}
.dark .gr-check-radio:checked, .dark gr-check-radio gr-checkbox {
background-color: #ff205f !important;
}
#txt2img_gallery, #img2img_gallery {
border-width: 1px !important;
border-radius: 0 !important;
background-image: url('file=logo.png') !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
#modelmerger_merge, #deforum_generate, #depthmap_generate, #vxa_gen_btn {
border-color: #ff205f !important;
}
#txt2img_generate:after, #img2img_generate:after, #extras_generate:after {
background-image: text !important;
}
#txt2img_interrupt, #img2img_interrupt, #txt2img_skip, #img2img_skip {
background: #333 !important;
}
#txt2img_gallery svg, #img2img_gallery svg {
display: none !important;
}
/* Generation progress bar Color */
.dark .progressDiv .progress {
font-family: 'Source Code Pro', monospace !important;
font: 'Source Code Pro'!important;
width: 0% !important;
height: 20px !important;
background: #ff205f !important;
color: white !important;
font-weight: bold !important;
line-height: 20px !important;
padding: 0 8px 0 0 !important;
text-align: right !important;
border-radius: 7px !important;
}
.dark .gr-button-primary {
font-family: 'Source Code Pro', monospace !important;
font: 'Source Code Pro' !important;
border-color: #ff205f !important;
border-width: 3px !important;
background-image: url('file=logo.png') !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
.dark .gr-button-primary:hover {
border-color: #ff205f !important;
border-width: 3px !important;
background-color: #ff205f75 !important;
}
.dark .gr-button-secondary {
font-family: 'Source Code Pro', monospace !important;
font: 'Source Code Pro' !important;
border-color: #ff205f75 !important;
border-width: 1px !important;
}
.dark .gr-button-secondary:hover {
border-color: #ff205f75 !important;
border-width: 1px !important;
background-color: #ff205f75 !important;
}
/* gradio 3.4.1 stuff for editable scrollbar values */
.dark .gr-box > div > div > input.gr-text-input{
position: absolute !important;
right: 0.5em !important;
top: -0.6em !important;
z-index: 200 !important;
width: 8em !important;
border-color: #ff205f75 !important;
border-width: 1px !important;
}
#gallery_item {
border-width: 1px !important;
border-radius: 0 !important;
background-image: url('file=logo.png') !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
.dark .gallery-item.svelte-1g9btlg.svelte-1g9btlg {
--tw-ring-color: #ff205f !important;
}
.dark .dark\:bg-gray-900 {
background-image: url('file=logo.png') !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
--tw-bg-opacity: 1 !important;
background-color: rgb(10, 10, 10) !important;
}
#context-menu {
font-family: 'Source Code Pro', monospace !important;
font: 'Source Code Pro'!important;
border: 2px solid #ff205f75 !important;
border-radius: 1px !important;
box-shadow: 1px 1px 2px #ff205f75 !important;
}
.context-menu-items a:hover {
background: #ff205f75 !important;
}
#txt2img_interrupt, #img2img_interrupt, #txt2img_skip, #img2img_skip {
background: rgb(10, 10, 10) !important;
}
#txt2img_interrupt:hover, #img2img_interrupt:hover, #txt2img_skip:hover, #img2img_skip:hover {
background: #ff205f !important;
}

Tags: user.css

Add Comment

Please, Sign In to add comment