dark.css 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. /* ../../../../var/folders/xk/3z83zd3j7rsb_9ztht_1mk8c0000gn/T/tmp-68410-EWG07XjCeYwz/shoelace/src/styles/dark.css */
  2. .sl-theme-dark {
  3. --sl-input-background-color: var(--sl-color-gray-900);
  4. --sl-input-background-color-hover: var(--sl-color-gray-900);
  5. --sl-input-background-color-focus: var(--sl-color-gray-900);
  6. --sl-input-background-color-disabled: var(--sl-color-gray-800);
  7. --sl-input-border-color: var(--sl-color-gray-700);
  8. --sl-input-border-color-hover: var(--sl-color-gray-600);
  9. --sl-input-border-color-focus: var(--sl-color-primary-500);
  10. --sl-input-border-color-disabled: var(--sl-color-gray-200);
  11. --sl-input-border-color-invalid: var(--sl-color-danger-500);
  12. --sl-input-font-family: var(--sl-font-sans);
  13. --sl-input-font-weight: var(--sl-font-weight-normal);
  14. --sl-input-font-size-small: var(--sl-font-size-small);
  15. --sl-input-font-size-medium: var(--sl-font-size-medium);
  16. --sl-input-font-size-large: var(--sl-font-size-large);
  17. --sl-input-letter-spacing: var(--sl-letter-spacing-normal);
  18. --sl-input-border-color: var(--sl-color-gray-700);
  19. --sl-input-border-color-hover: var(--sl-color-gray-600);
  20. --sl-input-border-color-focus: var(--sl-color-primary-400);
  21. --sl-input-border-color-disabled: var(--sl-color-gray-700);
  22. --sl-input-border-color-invalid: var(--sl-color-danger-500);
  23. --sl-input-color: var(--sl-color-gray-200);
  24. --sl-input-color-hover: var(--sl-color-gray-200);
  25. --sl-input-color-focus: var(--sl-color-gray-200);
  26. --sl-input-color-disabled: var(--sl-color-gray-100);
  27. --sl-input-color-invalid: var(--sl-color-danger-600);
  28. --sl-input-icon-color: var(--sl-color-gray-500);
  29. --sl-input-icon-color-hover: var(--sl-color-gray-300);
  30. --sl-input-icon-color-focus: var(--sl-color-gray-300);
  31. --sl-input-placeholder-color: var(--sl-color-gray-600);
  32. --sl-input-placeholder-color-disabled: var(--sl-color-gray-500);
  33. --sl-overlay-background-color: #d1d5db22;
  34. --sl-panel-background-color: var(--sl-color-gray-900);
  35. --sl-panel-border-color: var(--sl-color-gray-800);
  36. --sl-tooltip-background-color: var(--sl-color-gray-200);
  37. --sl-tooltip-color: var(--sl-color-black);
  38. }
  39. .sl-theme-dark sl-alert::part(base) {
  40. background-color: var(--sl-color-gray-900);
  41. border-left-color: var(--sl-color-gray-800);
  42. border-right-color: var(--sl-color-gray-800);
  43. border-bottom-color: var(--sl-color-gray-800);
  44. color: var(--sl-color-gray-200);
  45. }
  46. .sl-theme-dark sl-avatar::part(base) {
  47. background-color: var(--sl-color-gray-700);
  48. color: var(--sl-color-gray-300);
  49. }
  50. .sl-theme-dark sl-button[type=default]::part(base) {
  51. background-color: var(--sl-color-gray-900);
  52. border-color: var(--sl-color-gray-700);
  53. color: var(--sl-color-gray-400);
  54. }
  55. .sl-theme-dark sl-button[type=default]:not([disabled])::part(base):hover {
  56. background-color: var(--sl-color-primary-950);
  57. border-color: var(--sl-color-primary-800);
  58. color: var(--sl-color-primary-400);
  59. }
  60. .sl-theme-dark sl-button[type=default]:not([disabled])::part(base):focus {
  61. background-color: var(--sl-color-primary-950);
  62. border-color: var(--sl-color-primary-800);
  63. color: var(--sl-color-primary-400);
  64. box-shadow: 0 0 0 var(--sl-focus-ring-width) hsla(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 50%, var(--sl-focus-ring-alpha));
  65. }
  66. .sl-theme-dark sl-button[type=default]:not([disabled])::part(base):active {
  67. background-color: var(--sl-color-primary-900);
  68. border-color: var(--sl-color-primary-700);
  69. color: var(--sl-color-primary-300);
  70. }
  71. .sl-theme-dark sl-card::part(base) {
  72. background-color: var(--sl-color-gray-900);
  73. --border-color: var(--sl-color-gray-800);
  74. }
  75. .sl-theme-dark sl-checkbox::part(control),
  76. .sl-theme-dark sl-radio::part(control) {
  77. color: var(--sl-color-gray-900);
  78. }
  79. .sl-theme-dark sl-color-picker::part(format-button) {
  80. background-color: var(--sl-color-gray-900);
  81. border-color: var(--sl-color-gray-700);
  82. color: var(--sl-color-gray-400);
  83. }
  84. .sl-theme-dark sl-color-picker::part(format-button):hover {
  85. background-color: var(--sl-color-primary-950);
  86. border-color: var(--sl-color-primary-800);
  87. color: var(--sl-color-primary-400);
  88. }
  89. .sl-theme-dark sl-color-picker::part(format-button):focus {
  90. background-color: var(--sl-color-primary-950);
  91. border-color: var(--sl-color-primary-800);
  92. color: var(--sl-color-primary-400);
  93. box-shadow: 0 0 0 var(--sl-focus-ring-width) hsla(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 50%, var(--sl-focus-ring-alpha));
  94. }
  95. .sl-theme-dark sl-color-picker::part(format-button):active {
  96. background-color: var(--sl-color-primary-900);
  97. border-color: var(--sl-color-primary-700);
  98. color: var(--sl-color-primary-300);
  99. }
  100. .sl-theme-dark sl-color-picker::part(panel) {
  101. background-color: var(--sl-color-gray-900);
  102. border-color: var(--sl-color-gray-800);
  103. }
  104. .sl-theme-dark sl-color-picker::part(slider-handle) {
  105. background-color: var(--sl-color-gray-800);
  106. box-shadow: 0 0 0 1px var(--sl-color-gray-600);
  107. }
  108. .sl-theme-dark sl-color-picker::part(slider-handle):focus {
  109. box-shadow: 0 0 0 1px var(--sl-color-primary-500), 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
  110. }
  111. .sl-theme-dark sl-color-picker::part(grid-handle) {
  112. border-color: var(--sl-color-gray-900);
  113. }
  114. .sl-theme-dark sl-color-picker::part(preview),
  115. .sl-theme-dark sl-color-picker::part(opacity-slider),
  116. .sl-theme-dark sl-color-picker::part(trigger) {
  117. background-image:
  118. linear-gradient(45deg, #333 25%, transparent 25%),
  119. linear-gradient(45deg, transparent 75%, #333 75%),
  120. linear-gradient(45deg, transparent 75%, #333 75%),
  121. linear-gradient(45deg, #333 25%, transparent 25%);
  122. }
  123. .sl-theme-dark sl-color-picker::part(swatches) {
  124. border-top-color: var(--sl-color-gray-800);
  125. }
  126. .sl-theme-dark sl-details::part(base) {
  127. border-color: var(--sl-color-gray-800);
  128. }
  129. .sl-theme-dark sl-icon-button::part(base) {
  130. color: var(--sl-color-gray-400);
  131. }
  132. .sl-theme-dark sl-icon-button:not([disabled])::part(base):hover,
  133. .sl-theme-dark sl-icon-button:not([disabled])::part(base):focus {
  134. color: var(--sl-color-primary-500);
  135. }
  136. .sl-theme-dark sl-icon-button:not([disabled])::part(base):active {
  137. color: var(--sl-color-primary-400);
  138. }
  139. .sl-theme-dark sl-image-comparer::part(divider),
  140. .sl-theme-dark sl-image-comparer::part(handle) {
  141. background-color: var(--sl-color-gray-900);
  142. color: var(--sl-color-gray-400);
  143. }
  144. .sl-theme-dark sl-menu-item::part(base) {
  145. color: var(--sl-color-gray-200);
  146. }
  147. .sl-theme-dark sl-menu-item::part(base):focus {
  148. background-color: var(--sl-color-primary-600);
  149. color: var(--sl-color-white);
  150. }
  151. .sl-theme-dark sl-menu-item[disabled]::part(base) {
  152. color: var(--sl-color-gray-600);
  153. }
  154. .sl-theme-dark sl-menu-label::part(base) {
  155. color: var(--sl-color-gray-600);
  156. }
  157. .sl-theme-dark sl-progress-bar::part(base) {
  158. background-color: var(--sl-color-gray-800);
  159. }
  160. .sl-theme-dark sl-progress-bar::part(indicator) {
  161. color: var(--sl-color-gray-900);
  162. }
  163. .sl-theme-dark sl-progress-ring::part(base) {
  164. --track-color: var(--sl-color-gray-800);
  165. }
  166. .sl-theme-dark sl-range {
  167. --track-color: var(--sl-color-gray-800);
  168. }
  169. .sl-theme-dark sl-rating {
  170. --symbol-color: var(--sl-color-gray-700);
  171. }
  172. .sl-theme-dark sl-select::part(tag) {
  173. background-color: var(--sl-color-info-800);
  174. border-color: var(--sl-color-info-700);
  175. color: var(--sl-color-info-300);
  176. }
  177. .sl-theme-dark sl-skeleton {
  178. --color: var(--sl-color-gray-800);
  179. --sheen-color: var(--sl-color-gray-700);
  180. }
  181. .sl-theme-dark sl-spinner {
  182. --track-color: #f9fafb20;
  183. }
  184. .sl-theme-dark sl-switch::part(thumb) {
  185. background-color: var(--sl-color-gray-900);
  186. }
  187. .sl-theme-dark sl-switch::part(control) {
  188. background-color: var(--sl-color-gray-700);
  189. border-color: var(--sl-color-gray-700);
  190. }
  191. .sl-theme-dark sl-switch:not([disabled])::part(control):hover {
  192. background-color: var(--sl-color-gray-600);
  193. border-color: var(--sl-color-gray-600);
  194. }
  195. .sl-theme-dark sl-switch[checked]::part(control) {
  196. background-color: var(--sl-color-primary-600);
  197. border-color: var(--sl-color-primary-600);
  198. }
  199. .sl-theme-dark sl-switch[checked]::part(control):hover {
  200. background-color: var(--sl-color-primary-500);
  201. border-color: var(--sl-color-primary-500);
  202. }
  203. .sl-theme-dark sl-tab-group::part(tabs) {
  204. --tabs-border-color: var(--sl-color-gray-800);
  205. }
  206. .sl-theme-dark sl-tab::part(base) {
  207. color: var(--sl-color-gray-400);
  208. }
  209. .sl-theme-dark sl-tab:not([disabled])::part(base):hover,
  210. .sl-theme-dark sl-tab[active]::part(base) {
  211. color: var(--sl-color-primary-500);
  212. }
  213. .sl-theme-dark sl-tag[type=primary]::part(base) {
  214. background-color: var(--sl-color-primary-950);
  215. border-color: var(--sl-color-primary-900);
  216. color: var(--sl-color-primary-300);
  217. }
  218. .sl-theme-dark sl-tag[type=success]::part(base) {
  219. background-color: var(--sl-color-success-950);
  220. border-color: var(--sl-color-success-900);
  221. color: var(--sl-color-success-300);
  222. }
  223. .sl-theme-dark sl-tag[type=info]::part(base) {
  224. background-color: var(--sl-color-info-800);
  225. border-color: var(--sl-color-info-700);
  226. color: var(--sl-color-info-300);
  227. }
  228. .sl-theme-dark sl-tag[type=warning]::part(base) {
  229. background-color: var(--sl-color-warning-950);
  230. border-color: var(--sl-color-warning-900);
  231. color: var(--sl-color-warning-300);
  232. }
  233. .sl-theme-dark sl-tag[type=danger]::part(base) {
  234. background-color: var(--sl-color-danger-950);
  235. border-color: var(--sl-color-danger-900);
  236. color: var(--sl-color-danger-300);
  237. }