_index.wxss 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319
  1. @media (prefers-color-scheme: light) {
  2. page,
  3. .page {
  4. --td-primary-color-1: #f2f3ff;
  5. --td-primary-color-2: #d9e1ff;
  6. --td-primary-color-3: #b5c7ff;
  7. --td-primary-color-4: #8eabff;
  8. --td-primary-color-5: #618dff;
  9. --td-primary-color-6: #366ef4;
  10. --td-primary-color-7: #0052d9;
  11. --td-primary-color-8: #003cab;
  12. --td-primary-color-9: #002a7c;
  13. --td-primary-color-10: #001a57;
  14. --td-warning-color-1: #fff1e9;
  15. --td-warning-color-2: #ffd9c2;
  16. --td-warning-color-3: #ffb98c;
  17. --td-warning-color-4: #fa9550;
  18. --td-warning-color-5: #e37318;
  19. --td-warning-color-6: #be5a00;
  20. --td-warning-color-7: #954500;
  21. --td-warning-color-8: #713300;
  22. --td-warning-color-9: #532300;
  23. --td-warning-color-10: #3b1700;
  24. --td-error-color-1: #fff0ed;
  25. --td-error-color-2: #ffd8d2;
  26. --td-error-color-3: #ffb9b0;
  27. --td-error-color-4: #ff9285;
  28. --td-error-color-5: #f6685d;
  29. --td-error-color-6: #d54941;
  30. --td-error-color-7: #ad352f;
  31. --td-error-color-8: #881f1c;
  32. --td-error-color-9: #68070a;
  33. --td-error-color-10: #490002;
  34. --td-success-color-1: #e3f9e9;
  35. --td-success-color-2: #c6f3d7;
  36. --td-success-color-3: #92dab2;
  37. --td-success-color-4: #56c08d;
  38. --td-success-color-5: #2ba471;
  39. --td-success-color-6: #008858;
  40. --td-success-color-7: #006c45;
  41. --td-success-color-8: #005334;
  42. --td-success-color-9: #003b23;
  43. --td-success-color-10: #002515;
  44. --td-gray-color-1: #f3f3f3;
  45. --td-gray-color-2: #eeeeee;
  46. --td-gray-color-3: #e7e7e7;
  47. --td-gray-color-4: #dcdcdc;
  48. --td-gray-color-5: #c5c5c5;
  49. --td-gray-color-6: #a6a6a6;
  50. --td-gray-color-7: #8b8b8b;
  51. --td-gray-color-8: #777777;
  52. --td-gray-color-9: #5e5e5e;
  53. --td-gray-color-10: #4b4b4b;
  54. --td-gray-color-11: #383838;
  55. --td-gray-color-12: #2c2c2c;
  56. --td-gray-color-13: #242424;
  57. --td-gray-color-14: #181818;
  58. --td-font-white-1: #ffffff;
  59. --td-font-white-2: rgba(255, 255, 255, 0.55);
  60. --td-font-white-3: rgba(255, 255, 255, 0.35);
  61. --td-font-white-4: rgba(255, 255, 255, 0.22);
  62. --td-font-gray-1: rgba(0, 0, 0, 0.9);
  63. --td-font-gray-2: rgba(0, 0, 0, 0.6);
  64. --td-font-gray-3: rgba(0, 0, 0, 0.4);
  65. --td-font-gray-4: rgba(0, 0, 0, 0.26);
  66. --td-brand-color: var(--td-primary-color-7);
  67. --td-warning-color: var(--td-warning-color-5);
  68. --td-error-color: var(--td-error-color-6);
  69. --td-success-color: var(--td-success-color-5);
  70. --td-brand-color-focus: var(--td-primary-color-1);
  71. --td-brand-color-active: var(--td-primary-color-8);
  72. --td-brand-color-disabled: var(--td-primary-color-3);
  73. --td-brand-color-light: var(--td-primary-color-1);
  74. --td-brand-color-light-active: var(--td-primary-color-2);
  75. --td-warning-color-active: var(--td-warning-color-6);
  76. --td-warning-color-disabled: var(--td-warning-color-3);
  77. --td-warning-color-focus: var(--td-warning-color-2);
  78. --td-warning-color-light: var(--td-warning-color-1);
  79. --td-warning-color-light-active: var(--td-warning-color-2);
  80. --td-error-color-focus: var(--td-error-color-2);
  81. --td-error-color-active: var(--td-error-color-7);
  82. --td-error-color-disabled: var(--td-error-color-3);
  83. --td-error-color-light: var(--td-error-color-1);
  84. --td-error-color-light-active: var(--td-error-color-2);
  85. --td-success-color-focus: var(--td-success-color-2);
  86. --td-success-color-active: var(--td-success-color-6);
  87. --td-success-color-disabled: var(--td-success-color-3);
  88. --td-success-color-light: var(--td-success-color-1);
  89. --td-success-color-light-active: var(--td-success-color-2);
  90. --td-mask-active: rgba(0, 0, 0, 0.6);
  91. --td-mask-disabled: rgba(255, 255, 255, 0.6);
  92. --td-bg-color-page: var(--td-gray-color-1);
  93. --td-bg-color-container: var(--td-font-white-1);
  94. --td-bg-color-container-active: var(--td-gray-color-3);
  95. --td-bg-color-secondarycontainer: var(--td-gray-color-1);
  96. --td-bg-color-secondarycontainer-active: var(--td-gray-color-4);
  97. --td-bg-color-component: var(--td-gray-color-3);
  98. --td-bg-color-component-active: var(--td-gray-color-6);
  99. --td-bg-color-component-disabled: var(--td-gray-color-2);
  100. --td-bg-color-secondarycomponent: var(--td-gray-color-4);
  101. --td-bg-color-secondarycomponent-active: var(--td-gray-color-6);
  102. --td-bg-color-specialcomponent: #fff;
  103. --td-text-color-primary: var(--td-font-gray-1);
  104. --td-text-color-secondary: var(--td-font-gray-2);
  105. --td-text-color-placeholder: var(--td-font-gray-3);
  106. --td-text-color-disabled: var(--td-font-gray-4);
  107. --td-text-color-anti: var(--td-font-white-1);
  108. --td-text-color-brand: var(--td-brand-color);
  109. --td-text-color-link: var(--td-brand-color);
  110. --td-border-level-1-color: var(--td-gray-color-3);
  111. --td-component-stroke: var(--td-gray-color-3);
  112. --td-border-level-2-color: var(--td-gray-color-4);
  113. --td-component-border: var(--td-gray-color-4);
  114. --td-shadow-1: 0 1px 10px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.12);
  115. --td-shadow-2: 0 3px 14px 2px rgba(0, 0, 0, 0.05), 0 8px 10px 1px rgba(0, 0, 0, 0.06), 0 5px 5px -3px rgba(0, 0, 0, 0.1);
  116. --td-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 0.04), 0 8px 10px -5px rgba(0, 0, 0, 0.08);
  117. --td-shadow-4: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
  118. --td-shadow-inset-top: inset 0 0.5px 0 #dcdcdc;
  119. --td-shadow-inset-right: inset 0.5px 0 0 #dcdcdc;
  120. --td-shadow-inset-bottom: inset 0 -0.5px 0 #dcdcdc;
  121. --td-shadow-inset-left: inset -0.5px 0 0 #dcdcdc;
  122. --td-table-shadow-color: rgba(0, 0, 0, 0.08);
  123. --td-scrollbar-color: rgba(0, 0, 0, 0.1);
  124. --td-scrollbar-hover-color: rgba(0, 0, 0, 0.3);
  125. --td-scroll-track-color: #fff;
  126. }
  127. }
  128. @media (prefers-color-scheme: dark) {
  129. page,
  130. .page {
  131. --td-primary-color-1: #1b2f51;
  132. --td-primary-color-2: #173463;
  133. --td-primary-color-3: #143975;
  134. --td-primary-color-4: #103d88;
  135. --td-primary-color-5: #0d429a;
  136. --td-primary-color-6: #054bbe;
  137. --td-primary-color-7: #2667d4;
  138. --td-primary-color-8: #4582e6;
  139. --td-primary-color-9: #699ef5;
  140. --td-primary-color-10: #96bbf8;
  141. --td-warning-color-1: #4f2a1d;
  142. --td-warning-color-2: #582f21;
  143. --td-warning-color-3: #733c23;
  144. --td-warning-color-4: #a75d2b;
  145. --td-warning-color-5: #cf6e2d;
  146. --td-warning-color-6: #dc7633;
  147. --td-warning-color-7: #e8935c;
  148. --td-warning-color-8: #ecbf91;
  149. --td-warning-color-9: #eed7bf;
  150. --td-warning-color-10: #f3e9dc;
  151. --td-error-color-1: #472324;
  152. --td-error-color-2: #5e2a2d;
  153. --td-error-color-3: #703439;
  154. --td-error-color-4: #83383e;
  155. --td-error-color-5: #a03f46;
  156. --td-error-color-6: #c64751;
  157. --td-error-color-7: #de6670;
  158. --td-error-color-8: #ec888e;
  159. --td-error-color-9: #edb1b6;
  160. --td-error-color-10: #eeced0;
  161. --td-success-color-1: #193a2a;
  162. --td-success-color-2: #1a4230;
  163. --td-success-color-3: #17533d;
  164. --td-success-color-4: #0d7a55;
  165. --td-success-color-5: #059465;
  166. --td-success-color-6: #43af8a;
  167. --td-success-color-7: #46bf96;
  168. --td-success-color-8: #80d2b6;
  169. --td-success-color-9: #b4e1d3;
  170. --td-success-color-10: #deede8;
  171. --td-gray-color-1: #f3f3f3;
  172. --td-gray-color-2: #eee;
  173. --td-gray-color-3: #e8e8e8;
  174. --td-gray-color-4: #ddd;
  175. --td-gray-color-5: #c6c6c6;
  176. --td-gray-color-6: #a6a6a6;
  177. --td-gray-color-7: #8b8b8b;
  178. --td-gray-color-8: #777;
  179. --td-gray-color-9: #5e5e5e;
  180. --td-gray-color-10: #4b4b4b;
  181. --td-gray-color-11: #383838;
  182. --td-gray-color-12: #2c2c2c;
  183. --td-gray-color-13: #242424;
  184. --td-gray-color-14: #181818;
  185. --td-font-white-1: rgba(255, 255, 255, 0.9);
  186. --td-font-white-2: rgba(255, 255, 255, 0.55);
  187. --td-font-white-3: rgba(255, 255, 255, 0.35);
  188. --td-font-white-4: rgba(255, 255, 255, 0.22);
  189. --td-font-gray-1: rgba(0, 0, 0, 0.9);
  190. --td-font-gray-2: rgba(0, 0, 0, 0.6);
  191. --td-font-gray-3: rgba(0, 0, 0, 0.4);
  192. --td-font-gray-4: rgba(0, 0, 0, 0.26);
  193. --td-brand-color: var(--td-primary-color-8);
  194. --td-warning-color: var(--td-warning-color-5);
  195. --td-error-color: var(--td-error-color-6);
  196. --td-success-color: var(--td-success-color-5);
  197. --td-brand-color-focus: var(--td-primary-color-1);
  198. --td-brand-color-active: var(--td-primary-color-9);
  199. --td-brand-color-disabled: var(--td-primary-color-3);
  200. --td-brand-color-light: var(--td-primary-color-1);
  201. --td-brand-color-light-active: var(--td-primary-color-2);
  202. --td-warning-color-focus: var(--td-warning-color-2);
  203. --td-warning-color-active: var(--td-warning-color-4);
  204. --td-warning-color-disabled: var(--td-warning-color-3);
  205. --td-warning-color-light: var(--td-warning-color-1);
  206. --td-warning-color-light-active: var(--td-warning-color-2);
  207. --td-error-color-focus: var(--td-error-color-2);
  208. --td-error-color-active: var(--td-error-color-5);
  209. --td-error-color-disabled: var(--td-error-color-3);
  210. --td-error-color-light: var(--td-error-color-1);
  211. --td-error-color-light-active: var(--td-error-color-2);
  212. --td-success-color-focus: var(--td-success-color-2);
  213. --td-success-color-active: var(--td-success-color-4);
  214. --td-success-color-disabled: var(--td-success-color-3);
  215. --td-success-color-light: var(--td-success-color-1);
  216. --td-success-color-light-active: var(--td-success-color-2);
  217. --td-mask-active: rgba(0, 0, 0, 0.4);
  218. --td-mask-disabled: rgba(0, 0, 0, 0.6);
  219. --td-bg-color-page: var(--td-gray-color-14);
  220. --td-bg-color-container: var(--td-gray-color-13);
  221. --td-bg-color-secondarycontainer: var(--td-gray-color-12);
  222. --td-bg-color-component: var(--td-gray-color-11);
  223. --td-bg-color-container-active: var(--td-gray-color-12);
  224. --td-bg-color-secondarycontainer-active: var(--td-gray-color-11);
  225. --td-bg-color-component-active: var(--td-gray-color-10);
  226. --td-bg-color-component-disabled: var(--td-gray-color-12);
  227. --td-bg-color-specialcomponent: transparent;
  228. --td-text-color-primary: var(--td-font-white-1);
  229. --td-text-color-secondary: var(--td-font-white-2);
  230. --td-text-color-placeholder: var(--td-font-white-3);
  231. --td-text-color-disabled: var(--td-font-white-4);
  232. --td-text-color-anti: var(--td-font-white-1);
  233. --td-text-color-brand: var(--td-primary-color-8);
  234. --td-text-color-link: var(--td-primary-color-8);
  235. --td-border-level-1-color: var(--td-gray-color-11);
  236. --td-component-stroke: var(--td-gray-color-11);
  237. --td-border-level-2-color: var(--td-gray-color-9);
  238. --td-component-border: var(--td-gray-color-9);
  239. --td-shadow-1: 0 4px 6px rgba(0, 0, 0, 0.06), 0 1px 10px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.12);
  240. --td-shadow-2: 0 8px 10px rgba(0, 0, 0, 0.12), 0 3px 14px rgba(0, 0, 0, 0.1), 0 5px 5px rgba(0, 0, 0, 0.16);
  241. --td-shadow-3: 0 16px 24px rgba(0, 0, 0, 0.14), 0 6px 30px rgba(0, 0, 0, 0.12), 0 8px 10px rgba(0, 0, 0, 0.2);
  242. --td-shadow-inset-top: inset 0 0.5px 0 #5e5e5e;
  243. --td-shadow-inset-right: inset 0.5px 0 0 #5e5e5e;
  244. --td-shadow-inset-bottom: inset 0 -0.5px 0 #5e5e5e;
  245. --td-shadow-inset-left: inset -0.5px 0 0 #5e5e5e;
  246. --td-table-shadow-color: rgba(0, 0, 0, 0.55);
  247. --td-scrollbar-color: rgba(255, 255, 255, 0.1);
  248. --td-scroll-track-color: #333;
  249. }
  250. }
  251. page,
  252. .page {
  253. --td-radius-small: 6rpx;
  254. --td-radius-default: 12rpx;
  255. --td-radius-large: 18rpx;
  256. --td-radius-extra-large: 24rpx;
  257. --td-radius-round: 999px;
  258. --td-radius-circle: 50%;
  259. }
  260. page,
  261. .page {
  262. --td-font-family: PingFang SC, Microsoft YaHei, Arial Regular;
  263. --td-font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium;
  264. --td-font-size-link-small: 24rpx;
  265. --td-font-size-link-medium: 28rpx;
  266. --td-font-size-link-large: 32rpx;
  267. --td-font-size-mark-extra-small: 20rpx;
  268. --td-font-size-mark-small: 24rpx;
  269. --td-font-size-mark-medium: 28rpx;
  270. --td-font-size-mark-large: 32rpx;
  271. --td-font-size-body-extra-small: 20rpx;
  272. --td-font-size-body-small: 24rpx;
  273. --td-font-size-body-medium: 28rpx;
  274. --td-font-size-body-large: 32rpx;
  275. --td-font-size-title-small: 28rpx;
  276. --td-font-size-title-medium: 32rpx;
  277. --td-font-size-title-large: 36rpx;
  278. --td-font-size-title-extra-large: 40rpx;
  279. --td-font-size-headline-small: 48rpx;
  280. --td-font-size-headline-medium: 56rpx;
  281. --td-font-size-headline-large: 72rpx;
  282. --td-font-size-display-medium: 96rpx;
  283. --td-font-size-display-large: 128rpx;
  284. --td-font-size: 20rpx;
  285. --td-font-size-xs: var(--td-font-size-body-extra-small);
  286. --td-font-size-s: var(--td-font-size-body-small);
  287. --td-font-size-base: var(--td-font-size-title-small);
  288. --td-font-size-m: var(--td-font-size-title-medium);
  289. --td-font-size-l: var(--td-font-size-title-large);
  290. --td-font-size-xl: var(--td-font-size-title-extra-large);
  291. --td-font-size-xxl: var(--td-font-size-headline-large);
  292. }
  293. page,
  294. .page {
  295. --td-spacer: 16rpx;
  296. --td-spacer-1: 24rpx;
  297. --td-spacer-2: 32rpx;
  298. --td-spacer-3: 48rpx;
  299. --td-spacer-4: 64rpx;
  300. --td-spacer-5: 96rpx;
  301. --td-spacer-6: 160rpx;
  302. }
  303. @media (prefers-color-scheme: light) {
  304. page,
  305. .page {
  306. --td-picker-transparent-color: rgba(255, 255, 255, 0);
  307. }
  308. }
  309. @media (prefers-color-scheme: dark) {
  310. page,
  311. .page {
  312. --td-button-primary-disabled-color: var(--td-font-white-4);
  313. --td-skeleton-animation-gradient: rgba(255, 255, 255, 0.06);
  314. --td-slider-dot-bg-color: var(--td-gray-color-4);
  315. --td-slider-dot-disabled-bg-color: var(--td-gray-color-11);
  316. --td-slider-dot-disabled-border-color: var(--td-gray-color-12);
  317. --td-picker-transparent-color: transparent;
  318. }
  319. }