Skip to content

Instantly share code, notes, and snippets.

@ParityError

ParityError/blueprint.css

Last active March 8, 2023 01:15
Show Gist options
  • Save ParityError/648ff807c67cb2e36bdf1d6ad42dbf54 to your computer and use it in GitHub Desktop.
Save ParityError/648ff807c67cb2e36bdf1d6ad42dbf54 to your computer and use it in GitHub Desktop.
Download ZIP
blueprint.css stylesheet for automatic1111
Raw
blueprint.css
/*
.-----::...
:++--=*+==::.
.++*= =*+==::.
.+****- =*+==::.
.+******- +*+==::.
.+********- +*+==::.
.+**********: +*+==::.
+************: +*+=-::.
+**************: .**+=-::.
+****************. .**+=-::.
=********-*********. .**==-::.
=********: .*********. :**==-::.
=********: .********* :**==-::.
=********: :********+ :**==-:..
:++++++++- .++++++++= -++--::..
B L U E P R I N T
.css stylesheet for automatic1111
@ParityError
https://github.com/ParityError
03/07/23
*/
/* There are probably some dupes of styling in this .css or likely
something unnessecary. etc.
Thanks to @Gerschel for coding the extension that powers this .css
https://github.com/Gerschel/sd-web-ui-quickcss */
/* Theme & Context Variables */
:root, .dark, * , #context-menu, quickcss_target {
--primary_color: #6d6d6d;
--secondary_color: #222;
--input_text_color_focus: #286c95;
--background_color: #1a1a1a;
--border_app_color: #4999bf;
--border_edge: #979797;
--bone: #c8c7c5;
--caption: #cecece;
--text: #6dbadf;
--subtext1: #d0cdc1;
--subtext0: #626262;
--overlay0: #acacac;
--surface4: #194b77;
--surface3: #186991;
--surface2: #1a4173;
--surface1: #242424;
--surface0: #2194c2;
--base: #151515;
--mesh: #131313;
--area: #131313;
/*ENDCOLORPICKERS*/
--radius: 2;
--UI_radius: 2;
--left_pannel_width: 42;
--cards_size: 50;
/*BREAKFILEREADER*/
--accent: var(--surface0);
--logo: url('file=static/logo.png');
--favicon: url("file=static/favicon.svg");
}
/*----------------------------------------------------------------*/
/*----------------------------------------------------------------*/
/*----------------------------------------------------------------*/
/* General */
.dark :is(h1, h2, h3, h4) {
color: var(--text) !important;
}
#tabs > div:nth-child(1) {
flex-wrap:wrap-reverse;
}
.tabs > div:first-child {
border: none !important;
margin-bottom: 3px;
gap: 3px 0px;
}
.tabs > div:first-child > button {
border-radius: 8px 8px 0px 0px;
/* outline: 1px solid var(--base) !important; */
border-color: var(--base);
border-width: 1px;
border-bottom-width: 0px;
}
.tabs > .tabitem {
outline: 1px solid var(--base);
}
/* UI border radius */
/*----------------------------------------------------------------*/
.dark .gradio-container *,
.dark .gr-compact *,
.dark .rounded-t-lg,
.dark .tabitem *,
.dark .flex-wrap *,
.dark .svelte-10ogue4 > .flex-col {
border-radius: calc(2.25px *var(--radius)) !important;
}
/* Background colors */
/*----------------------------------------------------------------*/
.dark,
.dark .gr-button,
.dark .bg-white,
.dark .gr-panel,
.dark .gr-button-lg,
.dark .gr-box,
.dark .gr-button-tool,
.dark .dark\:bg-gray-700,
.dark .dark\:bg-gray-950,
.dark .bg-gray-700,
.dark .bg-gray-950,
.dark fieldset span.text-gray-500,
.dark .gr-block.gr-box span.text-gray-500,
.dark label.block span,
#quicksettings,
#tabs .tabitem .gr-compact {
background-color: transparent;
}
#quicksettings .gr-button-tool {
margin: 8px 0px 0px 0px;
border-color: unset;
background-color: unset;
}
/* New img2img buttons reposition and border*/
/*----------------------------------------------------------------*/
#tabs .flex-wrap .tabitem .gr-compact{
margin-left:0px;
z-index: 10;
border-color: var(--secondary_color);
}
.dark .gr-compact .flex-col .tabitem .flex-col .gr-compact .gr-button-secondary {
border-width:1px !important;
}
#txt2img_subseed_show_box > div:nth-child(1) {
background-color: var(--base);
}
/*Css show loading text on SD models selector*/
/*----------------------------------------------------------------*/
#setting_sd_model_checkpoint .wrap.svelte-5usjvi,
#setting_sd_model_checkpoint .meta-text-center,
#setting_sd_model_checkpoint .meta-text {
inset: 0 ;
display: flex;
justify-content: center;
opacity: 0.5;
/* color: var(--input_text_color); */
background-color: var(--surface2);
}
#setting_sd_model_checkpoint .wrap.svelte-5usjvi {
inset: 0 ;
display: flex;
justify-content: center;
opacity: 0.5;
/* color: var(--input_text_color); */
background-color: var(--surface2);
}
.wrap.svelte-5usjvi.inset-0.cover-bg {
opacity: 0;
}
.wrap.svelte-5usjvi.inset-0.opacity-0 {
opacity: 0;
}
/* gradio 3.8 adds opacity to progressbar which makes it blink; disable it here */
.dark .transition.opacity-20 {
opacity: 1 ;
}
#txt2img_subseed_strength.gr-block.gr-box.relative.w-full.border-solid.border.border-gray-200.gr-padded {
margin-right: -10px;
}
/* App Colors */
/*----------------------------------------------------------------*/
.dark,
.dark\:bg-gray-900,
.dark .gr-button-primary,
.dark .dark\:text-gray-200,
.dark .text-gray-700,
.dark .text-gray-800,
.dark .text-gray-900,
.dark .text-gray-500,
.dark .\!text-gray-700,
.dark .\!text-gray-800 {
color: var(--caption);
}
.dark .dark\:bg-gray-200,
.dark .bg-gray-200.\!text-gray-700,
#txt2img_toprow,
#txt2img_gallery_container .livePreview {
background-color: transparent !important;
}
.dark .gallery-item.svelte-1g9btlg.svelte-1g9btlg {
--tw-ring-color: var(--primary_color) !important;
}
.dark .dark\:bg-gray-900 {
--tw-bg-opacity: 1;
background-color: var(--background_color) ;
}
/* Context menu */
/*----------------------------------------------------------------*/
#context-menu {
font-family: 'Source Code Pro', monospace ;
font: 'Source Code Pro';
border-color: var(--primary_color);
/*box-shadow: 1px 1px 2px var(--Primary_color) ;*/
}
.dark .context-menu-items a:hover {
background: var(--secondary_color) ;
color: var(--input_text_color_focus) ;
/*box-shadow: 1px 1px 2px var(--Secondary_color) ;*/
}
.dark .context-menu-items {
transition: all 0.3s ease-in-out ;
}
.context-menu-items a,
.context-menu-items,
#context-menu {
background-color: var(--surface1) !important;
color: var(--text) !important;
border-color: var(--accent) !important;
border-radius: 10px;
}
#interrogate_col {
min-width: unset !important;
margin: 18px 4px 8px 8px;
}
#txt2img_settings {
max-width: 60%;
color: var(--subtext1);
}
#txt2img_gallery,
#img2img_gallery {
min-height: 600px;
border-radius: 14px !important;
background-image: var(--logo) !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
.dark .gr-input-label:hover {
border-color: var(--secondary_color)!important;
color: var(--input_text_color_focus)!important;
transition: all 0.3s ease-out;
animation: pulse3 0.5s;
-webkit-animation: pulse3 0.5s;
-moz-animation: pulse3 0.5s;
-o-animation: pulse3 0.5s;
box-shadow: 0 0 0 0.5em transparent;
}
@keyframes pulse3 {
0% { box-shadow: 0 0 0 0 var(--secondary_color); }
}
.dark .border,
.dark .border-gray-100,
.dark .border-gray-200,
.dark .border-gray-300,
.dark .\!border,
.dark .\!border-gray-300 {
border-color: transparent;
}
#subseed_show_box > div {
background-color: var(--base);
}
#txt2img_gallery > div:nth-child(2) > img:nth-child(2) {
border-radius: 10px;
}
.text-gray-400{
color: var(--subtext0);
background-color: var(--area);
}
div[data-testid*=image] [class*=inset-0]{
color: var(--subtext0);
background-color: transparent;
}
.dark .dark\:bg-gray-950 {
background-color: var(--area);
}
.dark .gr-panel {
background-color: var(--radius);
}
.dark .dark\:bg-gray-700 {
background-color: var(--base);
}
.dark .gr-box {
background-color: var(--base);
color: var(--bone);
margin-top: 4px;
}
.dark .gr-input-label {
background: var(--surface1);
}
.dark .gr-check-radio {
background-color: var(--base);
}
.dark .hover\:text-gray-700:hover {
color: var(--text);
}
.dark .gr-button {
border-color: var(--surface2);
background-color: var(--base);
margin-top: 8px;
}
.performance {
color: var(--surface3);
}
.dark fieldset span.text-gray-500,
.dark .gr-block.gr-box span.text-gray-500,
.dark label.block span {
background-color: var(--base);
color: var(--text);
border: transparent;
border-radius: 10px;
margin-top: 4px;
}
.gr-button.gr-button-lg.gr-button-tool {
margin: 20px 0px 0px 0px;
}
.gr-button.gr-button-lg.gr-button-tool:hover {
margin: 20px 0px 0px 0px;
}
.gr-block.gr-box.relative.w-full.border-solid.border.border-gray-200.gr-padded {
/* margin-top: 4px;
margin-bottom: 8px; */
}
.dark .gr-button-primary {
color: var(--base);
border-color: var(--accent);
--tw-gradient-from: var(--accent);
--tw-gradient-stops: var(--accent), var(--accent);
--tw-gradient-to: var(--accent);
max-height: 72px;
}
.dark .bg-white {
background-color: var(--surface1);
color: var(--accent);
}
.dark .bg-gray-200,
.dark .\!bg-gray-200 {
background-color: var(--mesh);
border-radius: 10px;
gap: 0px 5px;
}
.dark .dark\:text-gray-500 {
background-color: var(--area);
}
.dark .dark\:bg-gray-900 {
background-color: var(--base);
}
.border {
border-width: 1px;
}
.gallery-item {
--tw-ring-shadow: none !important;
--tw-ring-offset-color: none !important;
}
.feather-image {
opacity: 0;
}
.dark .gr-check-radio:checked {
background-color: var(--background_color);
}
.dark .gr-input::placeholder {
color: var(--subtext1);
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
color: var(--subtext1);
}
.gr-form > .gr-block {
border-radius: 0.5rem;
margin-bottom: 5px;
}
div.svelte-10ogue4 > :not(.absolute) {
border-radius: 14px;
}
.gr-button-lg {
border-radius: .5rem;
padding: .5rem 1rem;
font-size: .87rem;
line-height: 1.5rem;
font-weight: 500;
}
/*----------------------------------------------------------------*/
/*----------------------------------------------------------------*/
/*----------------------------------------------------------------*/
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type="number"] {
-moz-appearance: textfield;
}
.gr-box > div > div > input.gr-text-input {
width: 4em;
margin: auto;
overflow: auto;
background: linear-gradient(135deg, var(--gradient0) 0%, var(--gradient1) 31.5%, var(--gradient2) 67.3%, var(--gradient3) 100%);
background-size: 120px;
animation: gradient 10s ease infinite;
}
.progressDiv .progress {
background: var(--accent);
color: var(--caption);
}
.dark .progressDiv {
background-color: var(--surface1);
}
/*----------------------------------------------------------------*/
/*----------------------------------------------------------------*/
/*----------------------------------------------------------------*/
/* Range Sliders */
input[type="range"]::-ms-track {
background: transparent;
}
input[type="range"]::-ms-fill-lower {
background: var(--accent);
border-radius: 10px;
}
input[type="range"]::-ms-fill-upper {
background: var(--overlay0);
border-radius: 10px;
}
input[type="range"]:focus::-ms-fill-lower {
background: var(--accent);
}
input[type="range"]:focus::-ms-fill-upper {
background: var(--overlay0);
}
@media (prefers-color-scheme: dark) {
input[type="range"] {
color: var(--accent);
--track-color: var(--surface1);
}
input[type="range"].win10-thumb {
color: var(--accent);
}
}
input[type="range"] {
font-size: 1.5rem;
color: var(--accent);
--thumb-height: 0.5em;
--track-height: 0.125em;
--track-color: var(--surface1);
--brightness-hover: 130%;
--brightness-down: 80%;
--clip-edges: 0.125em;
}
input[type="range"].win10-thumb {
color: var(--accent);
--thumb-height: 0.5em;
--thumb-width: 0.5em;
--clip-edges: 0.0125em;
}
input[type="range"] {
position: relative;
background: #fff0;
overflow: hidden;
}
input[type="range"]:active {
cursor: grabbing;
}
input[type="range"]:disabled {
filter: grayscale(1);
opacity: 0.3;
cursor: not-allowed;
}
/* WebKit Specific */
input[type="range"],
input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
transition: all ease 100ms;
height: var(--thumb-height);
}
input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-thumb {
position: relative;
}
input[type="range"]::-webkit-slider-thumb {
--thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
--clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
--clip-bottom: calc(var(--thumb-height) - var(--clip-top));
--clip-further: calc(100% + 1px);
--box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor;
width: var(--thumb-width, var(--thumb-height));
background: linear-gradient(currentColor 0 0) scroll no-repeat left center / 50% calc(var(--track-height) + 1px);
background-color: currentColor;
box-shadow: var(--box-fill);
border-radius: var(--thumb-width, var(--thumb-height));
filter: brightness(100%);
clip-path: polygon(
100% -1px,
var(--clip-edges) -1px,
0 var(--clip-top),
-100vmax var(--clip-top),
-100vmax var(--clip-bottom),
0 var(--clip-bottom),
var(--clip-edges) 100%,
var(--clip-further) var(--clip-further)
);
}
input[type="range"]:hover::-webkit-slider-thumb {
filter: brightness(var(--brightness-hover));
cursor: grab;
}
input[type="range"]:active::-webkit-slider-thumb {
filter: brightness(var(--brightness-down));
cursor: grabbing;
}
input[type="range"]::-webkit-slider-runnable-track {
background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center / 100% calc(var(--track-height) + 1px);
}
input[type="range"]:disabled::-webkit-slider-thumb {
cursor: not-allowed;
}
/* Firefox Specific */
input[type="range"],
input[type="range"]::-moz-range-track,
input[type="range"]::-moz-range-thumb {
appearance: none;
transition: all ease 100ms;
height: var(--thumb-height);
}
input[type="range"]::-moz-range-track,
input[type="range"]::-moz-range-thumb,
input[type="range"]::-moz-range-progress {
background: #fff0;
}
input[type="range"]::-moz-range-thumb {
background: currentColor;
border: 0;
width: var(--thumb-width, var(--thumb-height));
border-radius: var(--thumb-width, var(--thumb-height));
cursor: grab;
}
input[type="range"]:active::-moz-range-thumb {
cursor: grabbing;
}
input[type="range"]::-moz-range-track {
width: 100%;
background: var(--track-color);
}
input[type="range"]::-moz-range-progress {
appearance: none;
background: currentColor;
transition-delay: 30ms;
}
input[type="range"]::-moz-range-track,
input[type="range"]::-moz-range-progress {
height: calc(var(--track-height) + 1px);
border-radius: var(--track-height);
}
input[type="range"]::-moz-range-thumb,
input[type="range"]::-moz-range-progress {
filter: brightness(100%);
}
input[type="range"]:hover::-moz-range-thumb,
input[type="range"]:hover::-moz-range-progress {
filter: brightness(var(--brightness-hover));
}
input[type="range"]:active::-moz-range-thumb,
input[type="range"]:active::-moz-range-progress {
filter: brightness(var(--brightness-down));
}
input[type="range"]:disabled::-moz-range-thumb {
cursor: not-allowed;
}
/*----------------------------------------------------------------*/
/*----------------------------------------------------------------*/
/*----------------------------------------------------------------*/
/* Buttons */
#txt2img_interrupt,
#img2img_interrupt {
background-color: var(--background_color);
color: var(--border_edge);
}
#txt2img_skip,
#img2img_skip {
background-color: var(--background_color);
color: var(--border_edge);
}
#txt2img_sampling label {
color: var(--text);
}
#txt2img_generate,
#img2img_generate,
#txt2img_interrupt,
#img2img_interrupt {
background: var(--background_color) !important;
background-color: var(--background_color);
color: var(--border_edge);
}
#txt2img_interrupt,
#img2img_interrupt,
#txt2img_skip,
#img2img_skip {
background: var(--background_color) !important;
background-color: var(--background_color);
color: var(--border_edge);
}
#txt2img_interrupt:hover,
#img2img_interrupt:hover,
#txt2img_skip:hover,
#img2img_skip:hover {
background: var(--background_color) !important;
background-color: var(--base) !important;
color: var(--border_edge) !important;
transition: all 0.5s ease-out !important;
}
.dark .gr-button-primary {
font-family: 'Source Code Pro', monospace !important;
text-transform: uppercase;
border-color: var(--secondary_color) !important;
border-width: 3px !important;
background-image: var(--logo) !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
color: var(--border_app_color) !important;
}
.dark .gr-button-primary:hover {
border-color: var(--input_text_color_focus)!important;
border-width: 3px !important;
background-color: var(--secondary_color) !important;
color: var(--input_text_color_focus) !important;
transition: all 0.5s ease-out !important;
}
.dark .gr-button-secondary {
font-family: 'Source Code Pro', monospace !important;
border-color: var(--secondary_color) !important;
border-color: var(--surface2);
border-width: 0.5px !important;
color: var(--surface0);
background-color: var(--base);
--tw-gradient-from: var(--base);
--tw-gradient-to: var(--base);
}
.dark .gr-button-secondary:hover {
border-color: var(--input_text_color_focus)!important;
border-width: 0.5px !important;
background-color: var(--secondary_color)!important;
color: var(--surface0) !important;
transition: all 0.5s ease-out !important;
animation: pulse2 0.5s;
-webkit-animation: pulse2 0.5s;
-moz-animation: pulse2 0.5s;
-o-animation: pulse2 0.5s;
box-shadow: 0 0 0 0.5em transparent;
--tw-gradient-to: var(--surface1);
--tw-gradient-from: var(--surface4);
}
@keyframes pulse2 {
0% { box-shadow: 0 0 0 0 var(--input_text_color_focus); }
}
.dark .gr-button-tool {
margin: 8px 0px 0px 0px;
}
.dark .gr-button-tool:hover {
border-color: var(--input_text_color_focus)!important;
background-color: var(--secondary_color) !important;
color: var(--input_text_color_focus) !important;
transition: all 0.5s ease-out !important;
margin: 8px 0px 0px 0px;
}
/* Generation Buttons */
#txt2img_generate, #img2img_generate {
text-transform: uppercase;
letter-spacing: .2rem;
font-weight: bold;
min-height: 0em;
margin: 0.85em 0.5em 0.5em 0em;
}
#txt2img_generate:hover, #img2img_generate:hover {
animation: pulse 0.5s;
-webkit-animation: pulse 0.5s;
-moz-animation: pulse 0.5s;
-o-animation: pulse 0.5s;
box-shadow: 0 0 0 2em transparent;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 var(--secondary_color) }
}
#txt2img_tools, #img2img_tools {
gap: 0.4em;
justify-content: center;
}
#txt2img_styles, #img2img_styles {
padding: 0;
margin: 2px;
}
#txt2img_styles_row > button, #img2img_styles_row > button {
margin: 2px;
}
#txt2img_styles_row, #img2img_styles_row {
gap: 0.25em;
margin: 4px;
}
.gr-block.gr-box.relative.w-full.border-solid.border.border-gray-200.gr-padded {
margin-top: 4px;
margin-bottom: 4px;
}
/*
.p-2 {
padding: 0.5rem 0rem 0rem 0rem;
}
*/
/*----------------------------------------------------------------*/
/*----------------------------------------------------------------*/
/*----------------------------------------------------------------*/
/* Quickcss Extension */
#hidden{
visibility: hidden;
}
input[type=checkbox]:checked + span, input[type=radio]:checked + span {
color: var(--App_color);
}
#quickcss_colorpicker {
max-width: 10vw;
}
input[type=color] {
width: 100%;
}
.icon-container {
background-image: var(--favicon);
}
/* UI Border Radius */
.gradio-container * {
border-radius: calc(2px *var(--radius)) !important;
}
/* Special FX */
@keyframes gradient {
0% {
background-position: 0% 0%;
}
50% {
background-position: 100% 100%;
}
100% {
background-position: 0% 0%;
}
}
.wave {
background: rgb(255 255 255 / 25%);
border-radius: 1000% 1000% 0 0;
position: fixed;
width: 200%;
height: 12em;
animation: wave 10s -3s linear infinite;
transform: translate3d(0, 0, 0);
opacity: 0.8;
bottom: 0;
left: 0;
z-index: -1;
}
.wave:nth-of-type(2) {
bottom: -1.25em;
animation: wave 18s linear reverse infinite;
opacity: 0.8;
}
.wave:nth-of-type(3) {
bottom: -2.5em;
animation: wave 20s -1s reverse infinite;
opacity: 0.9;
}
@keyframes wave {
2% {
transform: translateX(1);
}
25% {
transform: translateX(-25%);
}
50% {
transform: translateX(-50%);
}
75% {
transform: translateX(-25%);
}
100% {
transform: translateX(1);
}
}
/* Fine Tuning */
#toprow div {
min-width: min(320px, 100%);
flex-grow: 1;
padding-block: 0px 4px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment