app.css 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. @import 'vars.css';
  2. page {
  3. width: 100%;
  4. height: 100%;
  5. color: #2B303A;
  6. font-size: var(--global-size);
  7. box-sizing: border-box;
  8. }
  9. view,
  10. text,
  11. scroll-view {
  12. box-sizing: border-box;
  13. }
  14. icon {
  15. display: inline-flex;
  16. align-items: center;
  17. justify-content: center;
  18. }
  19. >>>ax-custom-title .title {
  20. font-size: 18px;
  21. }
  22. #root {
  23. width: 100%;
  24. height: 100%;
  25. background-color: var(--global-background);
  26. color: var(--font-main);
  27. overflow: auto;
  28. }
  29. /* 占位符样式 */
  30. .app-placeholder,
  31. .app-placeholder::placeholder {
  32. color: #ccc;
  33. }
  34. /* 分组标题 */
  35. .app-group-title {
  36. padding: 10px;
  37. text-align: center;
  38. color: var(--font-des);
  39. }
  40. /* 状态栏 */
  41. .app-status-bar {
  42. min-height: 34px;
  43. background-color: var(--global-background);
  44. }
  45. /* 弹性盒子模型 */
  46. .app-flex-one {
  47. flex: 1;
  48. }
  49. .app-flex {
  50. display: flex;
  51. }
  52. .app-flex.middle {
  53. align-items: center;
  54. }
  55. .app-flex.c-center {
  56. align-items: center;
  57. justify-content: center;
  58. }
  59. .app-flex.c-between {
  60. align-items: center;
  61. justify-content: space-between;
  62. }
  63. .app-flex.c-around {
  64. align-items: center;
  65. justify-content: space-around;
  66. }
  67. .app-flex.column {
  68. flex-direction: column;
  69. }
  70. /* 标题栏 */
  71. .app-title-bar {
  72. display: flex;
  73. align-items: center;
  74. justify-content: space-between;
  75. height: 50px;
  76. padding: 0 15px 0 10px;
  77. color: #333;
  78. background-color: var(--global-background);
  79. font-size: 16px;
  80. }
  81. .app-title-bar .icon-item {
  82. display: inline-flex;
  83. align-items: center;
  84. justify-content: center;
  85. font-size: 22px;
  86. width: 30px;
  87. height: 30px;
  88. }
  89. .app-title-bar .icon-item.back {
  90. font-size: 24px;
  91. transform: scaleX(-100%);
  92. }
  93. /* 隐藏滚动条 */
  94. scroll-view.app-hide-scrollbar>>> ::-webkit-scrollbar,
  95. .app-hide-scrollbar::-webkit-scrollbar {
  96. display: none;
  97. }
  98. /* 不可选择 */
  99. .app-unselectable {
  100. user-select: none;
  101. }
  102. /* 超出显示省略号 */
  103. .textHidden {
  104. overflow: hidden !important;
  105. white-space: nowrap !important;
  106. text-overflow: ellipsis !important;
  107. }