app.acss 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428
  1. /**
  2. * 这里是uni-app内置的常用样式变量
  3. *
  4. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  5. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  6. *
  7. */
  8. /**
  9. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  10. *
  11. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  12. */
  13. /* 颜色变量 */
  14. /* 行为相关颜色 */
  15. /* 文字基本颜色 */
  16. /* 背景颜色 */
  17. /* 边框颜色 */
  18. /* padding / margin */
  19. /* 尺寸变量 */
  20. /* 文字尺寸 */
  21. /* 图片尺寸 */
  22. /* Border Radius */
  23. /* 水平间距 */
  24. /* 垂直间距 */
  25. /* 透明度 */
  26. /* 文章场景相关 */
  27. :root {
  28. --uni-color-white: #fff;
  29. --uni-color-black: #000;
  30. --uni-font-size-sm: 12px;
  31. --uni-font-size-base: 14px;
  32. --uni-font-size-lg: 16px;
  33. }
  34. :root {
  35. color-scheme: light;
  36. --uni-color-primary: #409eff;
  37. --uni-color-primary-light-3: #79bbff;
  38. --uni-color-primary-light-5: #a0cfff;
  39. --uni-color-primary-light-7: #c6e2ff;
  40. --uni-color-primary-light-8: #d9ecff;
  41. --uni-color-primary-light-9: #ecf5ff;
  42. --uni-color-primary-dark-2: #337ecc;
  43. --uni-color-success: #4cd964;
  44. --uni-color-success-light-3: #82e493;
  45. --uni-color-success-light-5: #a6ecb2;
  46. --uni-color-success-light-7: #c9f4d1;
  47. --uni-color-success-light-8: #dbf7e0;
  48. --uni-color-success-light-9: #edfbf0;
  49. --uni-color-success-dark-2: #3dae50;
  50. --uni-color-warning: #f0ad4e;
  51. --uni-color-warning-light-3: #f5c683;
  52. --uni-color-warning-light-5: #f8d6a7;
  53. --uni-color-warning-light-7: #fbe6ca;
  54. --uni-color-warning-light-8: #fcefdc;
  55. --uni-color-warning-light-9: #fef7ed;
  56. --uni-color-warning-dark-2: #c08a3e;
  57. --uni-color-error: #dd524d;
  58. --uni-color-error-light-3: #e78682;
  59. --uni-color-error-light-5: #eea9a6;
  60. --uni-color-error-light-7: #f5cbca;
  61. --uni-color-error-light-8: #f8dcdb;
  62. --uni-color-error-light-9: #fceeed;
  63. --uni-color-error-dark-2: #b1423e;
  64. --uni-color-info: #909399;
  65. --uni-color-info-light-3: #b1b3b8;
  66. --uni-color-info-light-5: #c8c9cc;
  67. --uni-color-info-light-7: #dedfe0;
  68. --uni-color-info-light-8: #e9e9eb;
  69. --uni-color-info-light-9: #f4f4f5;
  70. --uni-color-info-dark-2: #73767a;
  71. --uni-text-color-primary: #333;
  72. --uni-text-color-regular: #666;
  73. --uni-text-color-secondary: #999;
  74. --uni-text-color-placeholder: #808080;
  75. --uni-text-color-disabled: #c0c0c0;
  76. }
  77. .uni-primary {
  78. color: #409eff;
  79. }
  80. .uni-bg-primary {
  81. color: #409eff;
  82. }
  83. .uni-success {
  84. color: #4cd964;
  85. }
  86. .uni-bg-success {
  87. color: #4cd964;
  88. }
  89. .uni-warning {
  90. color: #f0ad4e;
  91. }
  92. .uni-bg-warning {
  93. color: #f0ad4e;
  94. }
  95. .uni-error {
  96. color: #dd524d;
  97. }
  98. .uni-bg-error {
  99. color: #dd524d;
  100. }
  101. .uni-info {
  102. color: #909399;
  103. }
  104. .uni-bg-info {
  105. color: #909399;
  106. }
  107. .m-4 {
  108. margin: 4px;
  109. }
  110. .m-8 {
  111. margin: 8px;
  112. }
  113. .m-10 {
  114. margin: 10px;
  115. }
  116. .m-12 {
  117. margin: 12px;
  118. }
  119. .m-16 {
  120. margin: 16px;
  121. }
  122. .m-20 {
  123. margin: 20px;
  124. }
  125. .m-30 {
  126. margin: 30px;
  127. }
  128. .mt-4 {
  129. margin-top: 4px;
  130. }
  131. .mt-8 {
  132. margin-top: 8px;
  133. }
  134. .mt-10 {
  135. margin-top: 10px;
  136. }
  137. .mt-12 {
  138. margin-top: 12px;
  139. }
  140. .mt-16 {
  141. margin-top: 16px;
  142. }
  143. .mt-20 {
  144. margin-top: 20px;
  145. }
  146. .mt-30 {
  147. margin-top: 30px;
  148. }
  149. .mr-4 {
  150. margin-right: 4px;
  151. }
  152. .mr-8 {
  153. margin-right: 8px;
  154. }
  155. .mr-10 {
  156. margin-right: 10px;
  157. }
  158. .mr-12 {
  159. margin-right: 12px;
  160. }
  161. .mr-16 {
  162. margin-right: 16px;
  163. }
  164. .mr-20 {
  165. margin-right: 20px;
  166. }
  167. .mr-30 {
  168. margin-right: 30px;
  169. }
  170. .mb-4 {
  171. margin-bottom: 4px;
  172. }
  173. .mb-8 {
  174. margin-bottom: 8px;
  175. }
  176. .mb-10 {
  177. margin-bottom: 10px;
  178. }
  179. .mb-12 {
  180. margin-bottom: 12px;
  181. }
  182. .mb-16 {
  183. margin-bottom: 16px;
  184. }
  185. .mb-20 {
  186. margin-bottom: 20px;
  187. }
  188. .mb-30 {
  189. margin-bottom: 30px;
  190. }
  191. .ml-4 {
  192. margin-left: 4px;
  193. }
  194. .ml-8 {
  195. margin-left: 8px;
  196. }
  197. .ml-10 {
  198. margin-left: 10px;
  199. }
  200. .ml-12 {
  201. margin-left: 12px;
  202. }
  203. .ml-16 {
  204. margin-left: 16px;
  205. }
  206. .ml-20 {
  207. margin-left: 20px;
  208. }
  209. .ml-30 {
  210. margin-left: 30px;
  211. }
  212. .mtb-4 {
  213. margin-top: 4px;
  214. margin-bottom: 4px;
  215. }
  216. .mtb-8 {
  217. margin-top: 8px;
  218. margin-bottom: 8px;
  219. }
  220. .mtb-10 {
  221. margin-top: 10px;
  222. margin-bottom: 10px;
  223. }
  224. .mtb-12 {
  225. margin-top: 12px;
  226. margin-bottom: 12px;
  227. }
  228. .mtb-16 {
  229. margin-top: 16px;
  230. margin-bottom: 16px;
  231. }
  232. .mtb-20 {
  233. margin-top: 20px;
  234. margin-bottom: 20px;
  235. }
  236. .mtb-30 {
  237. margin-top: 30px;
  238. margin-bottom: 30px;
  239. }
  240. .mlr-4 {
  241. margin-left: 4px;
  242. margin-right: 4px;
  243. }
  244. .mlr-8 {
  245. margin-left: 8px;
  246. margin-right: 8px;
  247. }
  248. .mlr-10 {
  249. margin-left: 10px;
  250. margin-right: 10px;
  251. }
  252. .mlr-12 {
  253. margin-left: 12px;
  254. margin-right: 12px;
  255. }
  256. .mlr-16 {
  257. margin-left: 16px;
  258. margin-right: 16px;
  259. }
  260. .mlr-20 {
  261. margin-left: 20px;
  262. margin-right: 20px;
  263. }
  264. .mlr-30 {
  265. margin-left: 30px;
  266. margin-right: 30px;
  267. }
  268. .p-4 {
  269. padding: 4px;
  270. }
  271. .p-8 {
  272. padding: 8px;
  273. }
  274. .p-10 {
  275. padding: 10px;
  276. }
  277. .p-12 {
  278. padding: 12px;
  279. }
  280. .p-16 {
  281. padding: 16px;
  282. }
  283. .p-20 {
  284. padding: 20px;
  285. }
  286. .p-30 {
  287. padding: 30px;
  288. }
  289. .pt-4 {
  290. padding-top: 4px;
  291. }
  292. .pt-8 {
  293. padding-top: 8px;
  294. }
  295. .pt-10 {
  296. padding-top: 10px;
  297. }
  298. .pt-12 {
  299. padding-top: 12px;
  300. }
  301. .pt-16 {
  302. padding-top: 16px;
  303. }
  304. .pt-20 {
  305. padding-top: 20px;
  306. }
  307. .pt-30 {
  308. padding-top: 30px;
  309. }
  310. .pr-4 {
  311. padding-right: 4px;
  312. }
  313. .pr-8 {
  314. padding-right: 8px;
  315. }
  316. .pr-10 {
  317. padding-right: 10px;
  318. }
  319. .pr-12 {
  320. padding-right: 12px;
  321. }
  322. .pr-16 {
  323. padding-right: 16px;
  324. }
  325. .pr-20 {
  326. padding-right: 20px;
  327. }
  328. .pr-30 {
  329. padding-right: 30px;
  330. }
  331. .pb-4 {
  332. padding-bottom: 4px;
  333. }
  334. .pb-8 {
  335. padding-bottom: 8px;
  336. }
  337. .pb-10 {
  338. padding-bottom: 10px;
  339. }
  340. .pb-12 {
  341. padding-bottom: 12px;
  342. }
  343. .pb-16 {
  344. padding-bottom: 16px;
  345. }
  346. .pb-20 {
  347. padding-bottom: 20px;
  348. }
  349. .pb-30 {
  350. padding-bottom: 30px;
  351. }
  352. .pl-4 {
  353. padding-left: 4px;
  354. }
  355. .pl-8 {
  356. padding-left: 8px;
  357. }
  358. .pl-10 {
  359. padding-left: 10px;
  360. }
  361. .pl-12 {
  362. padding-left: 12px;
  363. }
  364. .pl-16 {
  365. padding-left: 16px;
  366. }
  367. .pl-20 {
  368. padding-left: 20px;
  369. }
  370. .pl-30 {
  371. padding-left: 30px;
  372. }
  373. .ptb-4 {
  374. padding-top: 4px;
  375. padding-bottom: 4px;
  376. }
  377. .ptb-8 {
  378. padding-top: 8px;
  379. padding-bottom: 8px;
  380. }
  381. .ptb-10 {
  382. padding-top: 10px;
  383. padding-bottom: 10px;
  384. }
  385. .ptb-12 {
  386. padding-top: 12px;
  387. padding-bottom: 12px;
  388. }
  389. .ptb-16 {
  390. padding-top: 16px;
  391. padding-bottom: 16px;
  392. }
  393. .ptb-20 {
  394. padding-top: 20px;
  395. padding-bottom: 20px;
  396. }
  397. .ptb-30 {
  398. padding-top: 30px;
  399. padding-bottom: 30px;
  400. }
  401. .plr-4 {
  402. padding-left: 4px;
  403. padding-right: 4px;
  404. }
  405. .plr-8 {
  406. padding-left: 8px;
  407. padding-right: 8px;
  408. }
  409. .plr-10 {
  410. padding-left: 10px;
  411. padding-right: 10px;
  412. }
  413. .plr-12 {
  414. padding-left: 12px;
  415. padding-right: 12px;
  416. }
  417. .plr-16 {
  418. padding-left: 16px;
  419. padding-right: 16px;
  420. }
  421. .plr-20 {
  422. padding-left: 20px;
  423. padding-right: 20px;
  424. }
  425. .plr-30 {
  426. padding-left: 30px;
  427. padding-right: 30px;
  428. }page{--status-bar-height:25px;--top-window-height:0px;--window-top:0px;--window-bottom:0px;--window-left:0px;--window-right:0px;--window-magin:0px}