uvue.css 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371
  1. html,
  2. body {
  3. line-height: 1.2;
  4. font-family: -apple-system, HelveticaNeue;
  5. }
  6. body {
  7. background-color: var(--background-color-content);
  8. }
  9. uni-app uni-page-body {
  10. height: 100%;
  11. overflow: visible;
  12. position: relative;
  13. }
  14. uni-app uni-page-body,
  15. uni-app uni-top-window,
  16. uni-app uni-left-window,
  17. uni-app uni-right-window {
  18. position: relative;
  19. }
  20. uni-app uni-left-window .uni-left-window,
  21. uni-app uni-right-window .uni-right-window {
  22. height: 100%;
  23. }
  24. uni-app.uni-app--showtabbar uni-page-body::after {
  25. content: '';
  26. display: block;
  27. width: 100%;
  28. height: var(--tab-bar-height);
  29. height: calc(var(--tab-bar-height) + constant(safe-area-inset-bottom));
  30. height: calc(var(--tab-bar-height) + env(safe-area-inset-bottom));
  31. min-height: var(--tab-bar-height);
  32. min-height: calc(var(--tab-bar-height) + constant(safe-area-inset-bottom));
  33. min-height: calc(var(--tab-bar-height) + env(safe-area-inset-bottom));
  34. }
  35. uni-app.uni-app--showtabbar uni-page-wrapper::after {
  36. display: none;
  37. }
  38. uni-app uni-text,
  39. uni-app uni-input,
  40. uni-app uni-textarea,
  41. uni-app uni-view {
  42. font-size: 16px;
  43. text-align: left;
  44. }
  45. /* 修正box-sizing: border-box;负面效果 */
  46. uni-app uni-input {
  47. height: auto;
  48. }
  49. /* 文字容器 */
  50. uni-app uni-text,
  51. uni-app uni-textarea,
  52. uni-app uni-label {
  53. line-height: 1.2;
  54. overflow: hidden;
  55. flex-basis: auto;
  56. letter-spacing: 0;
  57. }
  58. uni-app uni-text,
  59. uni-app uni-label {
  60. letter-spacing: 0;
  61. }
  62. /* uni-app uni-* */
  63. uni-app uni-ad-draw,
  64. uni-app uni-ad-fullscreen-video,
  65. uni-app uni-ad-interactive,
  66. uni-app uni-ad-interstitial,
  67. uni-app uni-ad-rewarded-video,
  68. uni-app uni-ad,
  69. uni-app uni-animation-view,
  70. uni-app uni-audio,
  71. uni-app uni-block,
  72. uni-app uni-button,
  73. uni-app uni-camera,
  74. uni-app uni-canvas,
  75. uni-app uni-checkbox-group,
  76. uni-app uni-checkbox,
  77. uni-app uni-cover-image,
  78. uni-app uni-cover-view,
  79. uni-app uni-custom-tab-bar,
  80. uni-app uni-editor,
  81. uni-app uni-form,
  82. uni-app uni-icon,
  83. uni-app uni-image,
  84. uni-app uni-input,
  85. uni-app uni-label,
  86. uni-app uni-list-item,
  87. uni-app uni-list-view,
  88. uni-app uni-live-player,
  89. uni-app uni-live-pusher,
  90. uni-app uni-map,
  91. uni-app uni-match-media,
  92. uni-app uni-movable-area,
  93. uni-app uni-movable-view,
  94. uni-app uni-navigation-bar,
  95. uni-app uni-navigator,
  96. uni-app uni-open-data,
  97. uni-app uni-page-meta,
  98. /* uni-app uni-picker-view-column, */
  99. uni-app uni-picker-view,
  100. uni-app uni-picker,
  101. uni-app uni-progress,
  102. uni-app uni-radio-group,
  103. uni-app uni-radio,
  104. uni-app uni-rich-text,
  105. uni-app uni-scroll-view,
  106. uni-app uni-slider,
  107. uni-app uni-sticky-header,
  108. uni-app uni-sticky-section,
  109. uni-app uni-swiper-item,
  110. uni-app uni-swiper,
  111. uni-app uni-switch,
  112. uni-app uni-template,
  113. uni-app uni-text,
  114. uni-app uni-textarea,
  115. uni-app uni-unicloud-db,
  116. uni-app uni-video,
  117. uni-app uni-view,
  118. uni-app uni-web-view {
  119. position: relative;
  120. box-sizing: border-box;
  121. flex-shrink: 0;
  122. flex-grow: 0;
  123. flex-basis: auto;
  124. /* 默认情况下,元素不会缩短至小于内容框尺寸,若想改变这一状况,请设置元素的min-width 与 min-height属性。https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex */
  125. min-height: 0px;
  126. min-width: 0px;
  127. border-width: medium;
  128. }
  129. uni-app uni-text {
  130. display: inline;
  131. }
  132. /* 与开发者元素接触的容器 */
  133. uni-app uni-page-body,
  134. uni-app uni-left-window .uni-left-window,
  135. uni-app uni-right-window .uni-right-window,
  136. uni-app uni-top-window .uni-top-window,
  137. uni-app uni-animation-view,
  138. uni-app uni-block,
  139. uni-app uni-view,
  140. uni-app uni-label,
  141. uni-app uni-swiper,
  142. uni-app uni-swiper-item,
  143. uni-app uni-movable-area,
  144. uni-app uni-movable-view,
  145. uni-app uni-cover-view,
  146. uni-app uni-list-item,
  147. uni-app uni-navigator,
  148. uni-app uni-radio-group,
  149. uni-app uni-checkbox-group,
  150. uni-app uni-scroll-view,
  151. uni-app uni-list-view,
  152. uni-app uni-unicloud-db,
  153. uni-app uni-custom-tab-bar,
  154. uni-app uni-sticky-section,
  155. uni-app uni-sticky-header {
  156. display: flex;
  157. align-items: stretch;
  158. align-content: stretch;
  159. justify-content: flex-start;
  160. }
  161. /* 此样式可被manifest.json内配置的flex-direction重置 */
  162. uni-app uni-page-body,
  163. uni-app uni-left-window .uni-left-window,
  164. uni-app uni-right-window .uni-right-window,
  165. uni-app uni-top-window .uni-top-window,
  166. uni-app uni-view,
  167. uni-app uni-label,
  168. uni-app uni-swiper,
  169. uni-app uni-swiper-item,
  170. uni-app uni-movable-area,
  171. uni-app uni-movable-view,
  172. uni-app uni-cover-view,
  173. uni-app uni-list-item,
  174. uni-app uni-navigator,
  175. uni-app uni-radio-group,
  176. uni-app uni-checkbox-group,
  177. uni-app uni-scroll-view,
  178. uni-app uni-list-view,
  179. uni-app uni-unicloud-db,
  180. uni-app uni-sticky-section,
  181. uni-app uni-sticky-header {
  182. flex-direction: column;
  183. }
  184. /* 与开发者元素接触的非滚动容器 */
  185. uni-app uni-view,
  186. uni-app uni-label,
  187. uni-app uni-swiper,
  188. uni-app uni-swiper-item,
  189. uni-app uni-movable-area,
  190. uni-app uni-movable-view,
  191. uni-app uni-cover-view,
  192. uni-app uni-list-item,
  193. uni-app uni-navigator,
  194. uni-app uni-radio-group,
  195. uni-app uni-checkbox-group {
  196. overflow: hidden;
  197. }
  198. uni-app uni-button {
  199. margin: 0;
  200. }
  201. /* 透传scroll-view的flex-direction样式 */
  202. uni-app uni-scroll-view {
  203. width: auto;
  204. }
  205. uni-app .uni-scroll-view,
  206. uni-app .uni-scroll-view-content,
  207. uni-app .uni-list-view-visible,
  208. uni-app uni-navigator a {
  209. flex-direction: inherit;
  210. align-items: inherit;
  211. align-content: inherit;
  212. justify-content: inherit;
  213. }
  214. uni-app uni-navigator a {
  215. display: flex;
  216. width: 100%;
  217. height: 100%;
  218. }
  219. uni-app .uni-scroll-view-content,
  220. uni-app .uni-sticky-header-wrapper {
  221. display: flex;
  222. min-height: 0px;
  223. }
  224. uni-app uni-swiper-item {
  225. position: absolute;
  226. }
  227. /* 设置默认的光标颜色 */
  228. uni-app .uni-input-input,
  229. uni-app .uni-textarea-textarea {
  230. caret-color: #3393e2;
  231. }
  232. uni-app .uni-input-input:disabled,
  233. uni-app .uni-textarea-textarea:disabled {
  234. cursor: inherit;
  235. }
  236. /* 覆盖 video 的 poster 背景 */
  237. uni-app .uni-video-cover {
  238. background-color: unset;
  239. }
  240. /**
  241. * 界面相关api样式
  242. */
  243. body .uni-toast {
  244. width: 120px;
  245. height: 120px;
  246. display: flex;
  247. justify-content: center;
  248. flex-direction: column;
  249. align-items: center;
  250. background-color: #4c4c4c;
  251. }
  252. body .uni-toast__icon {
  253. margin: 8px 0px;
  254. }
  255. body .uni-toast__content {
  256. margin: 0px;
  257. font-size: 14px;
  258. line-height: 1.6;
  259. color: rgba(255, 255, 255, 0.8)
  260. }
  261. body .uni-modal {
  262. border-radius: 12px;
  263. }
  264. body .uni-modal__hd {
  265. padding: 32px 24px 16px;
  266. }
  267. body .uni-modal__title {
  268. font-weight: 700;
  269. font-size: 17px;
  270. line-height: 1.4;
  271. -webkit-line-clamp: unset;
  272. }
  273. body .uni-modal__bd {
  274. font-size: 17px;
  275. padding: 0 24px;
  276. margin-bottom: 32px;
  277. min-height: unset;
  278. max-height: 300px;
  279. overflow: hidden auto;
  280. hyphens: auto;
  281. }
  282. body .uni-modal__textarea {
  283. display: block;
  284. width: 100%;
  285. height: 48px;
  286. font-size: 17px;
  287. line-height: 24px;
  288. padding: 0px 8px;
  289. }
  290. body .uni-modal__ft {
  291. line-height: 56px;
  292. font-size: 17px;
  293. }
  294. body .uni-modal__btn {
  295. font-weight: 700;
  296. }
  297. body .uni-modal__btn_primary {
  298. color: #576b95;
  299. }
  300. @media screen and (max-width: 500px) {
  301. body .uni-actionsheet {
  302. left: 0px;
  303. right: 0px;
  304. bottom: 0px;
  305. border-top-left-radius: 12px;
  306. border-top-right-radius: 12px;
  307. background-color: #f7f7f7;
  308. overflow: hidden;
  309. }
  310. body .uni-actionsheet__menu {
  311. border-radius: 0px;
  312. background-color: #ffffff;
  313. }
  314. body .uni-actionsheet__action {
  315. border-radius: 0px;
  316. margin-top: 8px;
  317. }
  318. body .uni-actionsheet__cell,
  319. body .uni-actionsheet__title {
  320. padding: 16px;
  321. line-height: 24px;
  322. }
  323. body .uni-actionsheet__cell {
  324. font-size: 17px;
  325. }
  326. body .uni-actionsheet__title {
  327. font-size: 14px;
  328. color: #747474;
  329. }
  330. }