API tools faq
paste
Advertisement
Guest User

user.css

a guest
Dec 26th, 2022
155
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 6.81 KB | None | 0 0
raw download clone embed print report
  1. /*
  2. * user.css / ml-a1111-sdwebui-styles.css
  3. *
  4. * Minimal dark theme stylesheet
  5. * for AUTOMATIC1111 Stable Diffusion web UI
  6. *
  7. * @Version: 0.3
  8. * @Author: Masslevel
  9. * @Date: 2022-09-28 21:09:44
  10. * @Last Modified time: 2022-12-27 04:30:44
  11. */
  12.  
  13. /* gradio ml-styles */
  14.  
  15. /* colors */
  16. :root, * {
  17.   --ml-color-grey:rgb(64, 68, 77)!important;
  18.   --ml-color-lightgrey:rgb(107,114,128)!important;
  19.   --ml-color-highlight:rgb(101, 246, 192)!important;
  20.   --ml-color-dark:rgb(15, 15, 15)!important;
  21.   --ml-color-pink: rgb(255, 32, 95)!important;
  22.   --ml-color-range-accent:rgb(107,114,128)!important;
  23.   --ml-color-range-accent-darker: rgb(255, 32, 95)!important;
  24.   --ml-color-range-border:rgb(107,114,128)!important;
  25.   --ml-color-range-shadow:rgb(107,114,128)!important;
  26. }
  27.  
  28. /* global */
  29. * {
  30.     border-radius: 0 !important;
  31. }
  32.  
  33. .gradio-container {
  34.     font-family: PragmataPro, 'Source Code Pro', monospace, Arial, sans-serif;
  35. }
  36.  
  37. /*#quicksettings {
  38.     scale: 0.6;
  39. }*/
  40.  
  41. /* gradio theme overwrites */
  42. .dark,
  43. .gradio-container,
  44. .dark .dark\:bg-gray-950,
  45. .dark .gr-box,
  46. .dark .bg-white,
  47. .dark .gr-panel
  48. {
  49.     background: var(--ml-color-dark);
  50. }
  51.  
  52. /* quick settings */
  53. #setting_sd_hypernetwork_strength input {
  54.     font-size: .5rem;
  55.     border: 0;
  56.     background: none!important;
  57. }
  58.  
  59. /* tabs */
  60. #tabs > div:first-of-type button {
  61.     font-size: 75% !important
  62. }
  63.  
  64. /* value input boxes */
  65. input.gr-box.gr-input.gr-text-input.text-center.h-6 {
  66.     color: var(--ml-color-highlight);
  67.     background-color: var(--ml-color-dark) !important;
  68. }
  69.  
  70. /* input */
  71. .dark .gr-check-radio:checked {
  72.     --tw-bg-opacity: 1;
  73.     background-color: var(--ml-color-pink);
  74. }
  75.  
  76. /* drop down */
  77. .dark .gr-input,
  78. .dark .gr-input:focus
  79. {
  80.     color: var(--ml-color-highlight);
  81.     background-color: var(--ml-color-dark) !important;
  82. }
  83.  
  84. /* form fields */
  85. .gr-form,
  86. #negative_prompt label,
  87. .gr-form .gr-box,
  88. .gr-form .dark .bg-gray-5
  89. {
  90.     background: none !important;
  91.     /*border: 1px solid rgb(25, 25, 25) !important;*/
  92. }
  93.  
  94. #negative_prompt label {
  95.     border: 1px solid var(--ml-color-grey);
  96. }
  97.  
  98. textarea {
  99. /*  border: 1px solid rgb(64, 68, 77) !important;*/
  100. }
  101.  
  102. .dark fieldset span.text-gray-500, .dark .gr-block.gr-box span.text-gray-500, .dark label.block span  /* container names */ {
  103.     color: var(--ml-color-lightgrey);
  104.     background-color: var(--ml-color-dark);
  105. }
  106.  
  107. /* buttons */
  108. .gr-button.gr-button-primary,
  109. .dark .gr-button,
  110. .dark .bg-gray-50,
  111. .bg-gray-50,
  112. .dark fieldset span.text-gray-500, .dark .gr-block.gr-box span.text-gray-500, .dark label.block span,  /* container names */
  113. label,
  114. .gr-form div /* number */
  115. {
  116.     background-image: transparent !important;
  117.     background: 0;
  118.     color: var(--ml-color-lightgrey);
  119. }
  120.  
  121. button.gr-button.gr-button-lg.gr-button-primary {
  122.     border: 1px solid var(--ml-color-pink) !important;
  123. }
  124. button.gr-button.gr-button-lg.gr-button-primary:hover {
  125.     border: 1px solid white !important;
  126. }
  127.  
  128. label.gr-input-label,
  129. label span
  130. {
  131.     color: var(--ml-color-lightgrey);
  132. }
  133.  
  134. #txt2img_generate {
  135.     border: 1px solid var(--ml-color-highlight);
  136.     transition: all .1s ease-in;
  137. }
  138.  
  139. #txt2img_generate:hover {
  140.     color: black !important;
  141.     background: var(--ml-color-highlight) !important;
  142. }
  143.  
  144. .gr-button:hover,
  145. #txt2img_sampling label:hover {
  146.     border: 1px solid white;
  147. }
  148.  
  149. label {
  150.     background-color: transparent !important;
  151.     background-image: transparent !important;
  152.     background: 0 !important;
  153.     color: var(--ml-color-lightgrey);
  154. }
  155.  
  156. .dark fieldset span.text-gray-500, .dark .gr-block.gr-box span.text-gray-500, .dark label.block span  /* container names */ {
  157.     background-color: var(--ml-color-dark);
  158.     background: var(--ml-color-dark);
  159. }
  160.  
  161. /* prompts */
  162. #component-5 > div:nth-child(1) > div:nth-child(1) > label:nth-child(2) > textarea:nth-child(2),
  163. #component-15 > div:nth-child(1) > div:nth-child(1) > label:nth-child(2) > textarea:nth-child(2) {
  164.     border: 1px solid var(--ml-color-grey);
  165. }
  166.  
  167. /* image preview bg */
  168. #txt2img_gallery {
  169.     border: 1px solid var(--ml-color-grey) !important;
  170. }
  171.  
  172. /*#txt2img_gallery {
  173.     border:  1px solid rgb(64, 68, 77)!important;
  174. }
  175. */
  176.  
  177. /* image preview bg after render */
  178. .dark .dark\:bg-gray-900 {
  179.     background-color: var(--ml-color-dark);
  180. }
  181.  
  182. /* range sliders */
  183.  
  184. .gradio-container input[type=range] {
  185.     -webkit-appearance: none;
  186.     background: transparent;
  187. }
  188.  
  189. .gradio-container input[type=range]:focus {
  190.     outline: none;
  191. }
  192.  
  193. .gradio-container input[type=range]::-webkit-slider-runnable-track {
  194.     cursor: pointer;
  195.     height: 6px;
  196.     border-radius: 3px;
  197.     background:  var(--ml-color-range-accent);
  198. }
  199.  
  200. .gradio-container input[type=range]:hover::-webkit-slider-runnable-track {
  201.     background: var(--ml-color-range-accent-darker);
  202. }
  203.  
  204. .gradio-container input[type=range]::-moz-range-track {
  205.     cursor: pointer;
  206.     height: 6px;
  207.     border-radius: 3px;
  208.     background:  var(--ml-color-range-accent);
  209. }
  210.  
  211. .gradio-container input[type=range]:hover::-moz-range-track {
  212.     background: var(--ml-color-range-accent-darker);
  213. }
  214.  
  215. .gradio-container input[type=range]::-ms-fill-upper,
  216. .gradio-container input[type=range]::-ms-fill-lower {
  217.     cursor: pointer;
  218.     height: 6px;
  219.     border-radius: 3px;
  220.     background:   var(--ml-color-range-accent);
  221. }
  222.  
  223. .gradio-container input[type=range]:hover::-ms-fill-upper,
  224. .gradio-container input[type=range]:hover::-ms-fill-lower {
  225.     background:   var(--ml-color-range-accent-darker);
  226. }
  227.  
  228. .gradio-container input[type=range]::-webkit-slider-thumb {
  229.     box-shadow: 0 0 3px var(--ml-color-range-shadow);
  230.     border: 2px solid var(--ml-color-range-border);
  231.     height: 16px;
  232.     width: 16px;
  233.     border-radius: 16px;
  234.     background:   var(--ml-color-range-accent);
  235.     cursor: pointer;
  236.     -webkit-appearance: none;
  237.     margin-top: -5px;
  238. }
  239.  
  240. .gradio-container input[type=range]:active::-webkit-slider-thumb {
  241.     background:   var(--ml-color-range-accent-darker);
  242. }
  243.  
  244. .gradio-container input[type=range]::-moz-range-thumb {
  245.     box-shadow: 0 0 3px var(--ml-color-range-shadow);
  246.     border: 2px solid  var(--ml-color-range-border);
  247.     height: 16px;
  248.     width: 16px;
  249.     border-radius: 16px;
  250.     background:   var(--ml-color-range-accent);
  251.     cursor: pointer;
  252.     margin-top: -5px;
  253. }
  254.  
  255. .gradio-container input[type=range]:active::-moz-range-thumb {
  256.     background:   var(--ml-color-range-accent-darker);
  257. }
  258.  
  259. .gradio-container input[type=range]::-ms-thumb {
  260.     box-shadow: 0 0 3px var(--ml-color-range-shadow);
  261.     border: 2px solid  var(--ml-color-range-border);
  262.     height: 16px;
  263.     width: 16px;
  264.     border-radius: 16px;
  265.     background:   var(--ml-color-range-accent);
  266.     cursor: pointer;
  267.     margin-top: -5px;
  268. }
  269.  
  270. .gradio-container input[type=range]:active::-ms-thumb {
  271.     background:   var(--ml-color-range-accent-darker);
  272. }
Tags: Stable Diffusion automatic1111 custom theme
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!