CSS Variables - 图1

CSS Variables Reference

This page contains reference to all CSS variables defined in all components.

Note that commented variables are not specified by default and their values is what they fallback to in this case.

App / Core

  1. :root {
  2. --f7-theme-color: #007aff;
  3. --f7-theme-color-rgb: 0, 122, 255;
  4. --f7-theme-color-shade: #0066d6;
  5. --f7-theme-color-tint: #298fff;
  6. --f7-safe-area-left: 0px;
  7. --f7-safe-area-right: 0px;
  8. --f7-safe-area-top: 0px;
  9. --f7-safe-area-bottom: 0px;
  10. --f7-safe-area-outer-left: 0px;
  11. --f7-safe-area-outer-right: 0px;
  12. --f7-device-pixel-ratio: 1;
  13. }
  14. @supports (left: env(safe-area-inset-left)) {
  15. :root {
  16. --f7-safe-area-top: env(safe-area-inset-top);
  17. --f7-safe-area-bottom: env(safe-area-inset-bottom);
  18. }
  19. :root .ios-left-edge,
  20. :root .ios-edges,
  21. :root .safe-area-left,
  22. :root .safe-areas,
  23. :root .popup,
  24. :root .sheet-modal,
  25. :root .panel-left {
  26. --f7-safe-area-left: env(safe-area-inset-left);
  27. --f7-safe-area-outer-left: env(safe-area-inset-left);
  28. }
  29. :root .ios-right-edge,
  30. :root .ios-edges,
  31. :root .safe-area-right,
  32. :root .safe-areas,
  33. :root .popup,
  34. :root .sheet-modal,
  35. :root .panel-right {
  36. --f7-safe-area-right: env(safe-area-inset-right);
  37. --f7-safe-area-outer-right: env(safe-area-inset-right);
  38. }
  39. :root .no-safe-areas,
  40. :root .no-safe-area-left,
  41. :root .no-ios-edges,
  42. :root .no-ios-left-edge {
  43. --f7-safe-area-left: 0px;
  44. --f7-safe-area-outer-left: 0px;
  45. }
  46. :root .no-safe-areas,
  47. :root .no-safe-area-right,
  48. :root .no-ios-edges,
  49. :root .no-ios-right-edge {
  50. --f7-safe-area-right: 0px;
  51. --f7-safe-area-outer-right: 0px;
  52. }
  53. }
  54. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  55. :root {
  56. --f7-device-pixel-ratio: 2;
  57. }
  58. }
  59. @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  60. :root {
  61. --f7-device-pixel-ratio: 3;
  62. }
  63. }
  64. /*====================
  65. Fonts & Bars
  66. ==================== */
  67. :root {
  68. --f7-font-size: 14px;
  69. /*
  70. --f7-bars-link-color: var(--f7-theme-color);
  71. */
  72. --f7-bars-bg-image: none;
  73. --f7-bars-translucent-opacity: 0.8;
  74. --f7-bars-translucent-blur: 20px;
  75. --f7-bars-shadow-bottom-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
  76. --f7-bars-shadow-top-image: linear-gradient(to top, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
  77. --f7-bars-text-color: #000;
  78. --f7-bars-bg-color: #f7f7f8;
  79. --f7-bars-bg-color-rgb: 247, 247, 248;
  80. }
  81. :root .theme-dark,
  82. :root.theme-dark {
  83. --f7-bars-text-color: #fff;
  84. }
  85. .ios {
  86. --f7-font-family: -apple-system, SF Pro Text, SF UI Text, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif;
  87. --f7-line-height: 1.4;
  88. --f7-text-color: #000;
  89. --f7-bars-border-color: rgba(0, 0, 0, 0.25);
  90. }
  91. .ios .theme-dark,
  92. .ios.theme-dark {
  93. --f7-text-color: #fff;
  94. --f7-bars-bg-color: #121212;
  95. --f7-bars-bg-color-rgb: 19, 19, 19;
  96. --f7-bars-border-color: rgba(255, 255, 255, 0.1);
  97. }
  98. .md {
  99. --f7-font-family: Roboto, system-ui, Noto, Helvetica, Arial, sans-serif;
  100. --f7-line-height: 1.5;
  101. --f7-bars-border-color: transparent;
  102. --f7-text-color: #212121;
  103. }
  104. .md .theme-dark,
  105. .md.theme-dark {
  106. --f7-text-color: rgba(255, 255, 255, 0.87);
  107. --f7-bars-bg-color: #202020;
  108. }
  109. .aurora {
  110. --f7-font-family: -apple-system, system-ui, Helvetica, Arial, sans-serif;
  111. --f7-line-height: 1.5;
  112. --f7-text-color: #000;
  113. --f7-bars-border-color: rgba(0, 0, 0, 0.2);
  114. }
  115. .aurora .theme-dark,
  116. .aurora.theme-dark {
  117. --f7-text-color: #fff;
  118. --f7-bars-bg-color: #202020;
  119. --f7-bars-border-color: rgba(255, 255, 255, 0.1);
  120. }

Color Theme Variables

  1. /*====================
  2. Primary Theme
  3. ==================== */
  4. .text-color-primary {
  5. --f7-theme-color-text-color: var(--f7-theme-color);
  6. }
  7. .bg-color-primary {
  8. --f7-theme-color-bg-color: var(--f7-theme-color);
  9. }
  10. .border-color-primary {
  11. --f7-theme-color-border-color: var(--f7-theme-color);
  12. }
  13. .ripple-color-primary {
  14. --f7-theme-color-ripple-color: rgba(var(--f7-theme-color-rgb), 0.3);
  15. }
  16. /*====================
  17. Colors List
  18. ==================== */
  19. :root {
  20. --f7-color-red: #ff3b30;
  21. --f7-color-red-rgb: 255, 59, 48;
  22. --f7-color-red-shade: #ff1407;
  23. --f7-color-red-tint: #ff6259;
  24. --f7-color-green: #4cd964;
  25. --f7-color-green-rgb: 76, 217, 100;
  26. --f7-color-green-shade: #2cd048;
  27. --f7-color-green-tint: #6ee081;
  28. --f7-color-blue: #2196f3;
  29. --f7-color-blue-rgb: 33, 150, 243;
  30. --f7-color-blue-shade: #0c82df;
  31. --f7-color-blue-tint: #48a8f5;
  32. --f7-color-pink: #ff2d55;
  33. --f7-color-pink-rgb: 255, 45, 85;
  34. --f7-color-pink-shade: #ff0434;
  35. --f7-color-pink-tint: #ff5676;
  36. --f7-color-yellow: #ffcc00;
  37. --f7-color-yellow-rgb: 255, 204, 0;
  38. --f7-color-yellow-shade: #d6ab00;
  39. --f7-color-yellow-tint: #ffd429;
  40. --f7-color-orange: #ff9500;
  41. --f7-color-orange-rgb: 255, 149, 0;
  42. --f7-color-orange-shade: #d67d00;
  43. --f7-color-orange-tint: #ffa629;
  44. --f7-color-purple: #9c27b0;
  45. --f7-color-purple-rgb: 156, 39, 176;
  46. --f7-color-purple-shade: #7e208f;
  47. --f7-color-purple-tint: #b92fd1;
  48. --f7-color-deeppurple: #673ab7;
  49. --f7-color-deeppurple-rgb: 103, 58, 183;
  50. --f7-color-deeppurple-shade: #563098;
  51. --f7-color-deeppurple-tint: #7c52c8;
  52. --f7-color-lightblue: #5ac8fa;
  53. --f7-color-lightblue-rgb: 90, 200, 250;
  54. --f7-color-lightblue-shade: #32bbf9;
  55. --f7-color-lightblue-tint: #82d5fb;
  56. --f7-color-teal: #009688;
  57. --f7-color-teal-rgb: 0, 150, 136;
  58. --f7-color-teal-shade: #006d63;
  59. --f7-color-teal-tint: #00bfad;
  60. --f7-color-lime: #cddc39;
  61. --f7-color-lime-rgb: 205, 220, 57;
  62. --f7-color-lime-shade: #bac923;
  63. --f7-color-lime-tint: #d6e25c;
  64. --f7-color-deeporange: #ff6b22;
  65. --f7-color-deeporange-rgb: 255, 107, 34;
  66. --f7-color-deeporange-shade: #f85200;
  67. --f7-color-deeporange-tint: #ff864b;
  68. --f7-color-gray: #8e8e93;
  69. --f7-color-gray-rgb: 142, 142, 147;
  70. --f7-color-gray-shade: #79797f;
  71. --f7-color-gray-tint: #a3a3a7;
  72. --f7-color-white: #ffffff;
  73. --f7-color-white-rgb: 255, 255, 255;
  74. --f7-color-white-shade: #ebebeb;
  75. --f7-color-white-tint: #ffffff;
  76. --f7-color-black: #000000;
  77. --f7-color-black-rgb: 0, 0, 0;
  78. --f7-color-black-shade: #000000;
  79. --f7-color-black-tint: #141414;
  80. }
  81. /*====================
  82. Color Themes
  83. ==================== */
  84. .color-theme-red {
  85. --f7-theme-color: #ff3b30;
  86. --f7-theme-color-rgb: 255, 59, 48;
  87. --f7-theme-color-shade: #ff1407;
  88. --f7-theme-color-tint: #ff6259;
  89. }
  90. .color-theme-green {
  91. --f7-theme-color: #4cd964;
  92. --f7-theme-color-rgb: 76, 217, 100;
  93. --f7-theme-color-shade: #2cd048;
  94. --f7-theme-color-tint: #6ee081;
  95. }
  96. .color-theme-blue {
  97. --f7-theme-color: #2196f3;
  98. --f7-theme-color-rgb: 33, 150, 243;
  99. --f7-theme-color-shade: #0c82df;
  100. --f7-theme-color-tint: #48a8f5;
  101. }
  102. .color-theme-pink {
  103. --f7-theme-color: #ff2d55;
  104. --f7-theme-color-rgb: 255, 45, 85;
  105. --f7-theme-color-shade: #ff0434;
  106. --f7-theme-color-tint: #ff5676;
  107. }
  108. .color-theme-yellow {
  109. --f7-theme-color: #ffcc00;
  110. --f7-theme-color-rgb: 255, 204, 0;
  111. --f7-theme-color-shade: #d6ab00;
  112. --f7-theme-color-tint: #ffd429;
  113. }
  114. .color-theme-orange {
  115. --f7-theme-color: #ff9500;
  116. --f7-theme-color-rgb: 255, 149, 0;
  117. --f7-theme-color-shade: #d67d00;
  118. --f7-theme-color-tint: #ffa629;
  119. }
  120. .color-theme-purple {
  121. --f7-theme-color: #9c27b0;
  122. --f7-theme-color-rgb: 156, 39, 176;
  123. --f7-theme-color-shade: #7e208f;
  124. --f7-theme-color-tint: #b92fd1;
  125. }
  126. .color-theme-deeppurple {
  127. --f7-theme-color: #673ab7;
  128. --f7-theme-color-rgb: 103, 58, 183;
  129. --f7-theme-color-shade: #563098;
  130. --f7-theme-color-tint: #7c52c8;
  131. }
  132. .color-theme-lightblue {
  133. --f7-theme-color: #5ac8fa;
  134. --f7-theme-color-rgb: 90, 200, 250;
  135. --f7-theme-color-shade: #32bbf9;
  136. --f7-theme-color-tint: #82d5fb;
  137. }
  138. .color-theme-teal {
  139. --f7-theme-color: #009688;
  140. --f7-theme-color-rgb: 0, 150, 136;
  141. --f7-theme-color-shade: #006d63;
  142. --f7-theme-color-tint: #00bfad;
  143. }
  144. .color-theme-lime {
  145. --f7-theme-color: #cddc39;
  146. --f7-theme-color-rgb: 205, 220, 57;
  147. --f7-theme-color-shade: #bac923;
  148. --f7-theme-color-tint: #d6e25c;
  149. }
  150. .color-theme-deeporange {
  151. --f7-theme-color: #ff6b22;
  152. --f7-theme-color-rgb: 255, 107, 34;
  153. --f7-theme-color-shade: #f85200;
  154. --f7-theme-color-tint: #ff864b;
  155. }
  156. .color-theme-gray {
  157. --f7-theme-color: #8e8e93;
  158. --f7-theme-color-rgb: 142, 142, 147;
  159. --f7-theme-color-shade: #79797f;
  160. --f7-theme-color-tint: #a3a3a7;
  161. }
  162. .color-theme-white {
  163. --f7-theme-color: #ffffff;
  164. --f7-theme-color-rgb: 255, 255, 255;
  165. --f7-theme-color-shade: #ebebeb;
  166. --f7-theme-color-tint: #ffffff;
  167. }
  168. .color-theme-black {
  169. --f7-theme-color: #000000;
  170. --f7-theme-color-rgb: 0, 0, 0;
  171. --f7-theme-color-shade: #000000;
  172. --f7-theme-color-tint: #141414;
  173. }
  174. /*====================
  175. Color Overrides
  176. ==================== */
  177. .color-red {
  178. --f7-theme-color: #ff3b30;
  179. --f7-theme-color-rgb: 255, 59, 48;
  180. --f7-theme-color-shade: #ff1407;
  181. --f7-theme-color-tint: #ff6259;
  182. }
  183. .text-color-red {
  184. --f7-theme-color-text-color: #ff3b30;
  185. }
  186. .bg-color-red {
  187. --f7-theme-color-bg-color: #ff3b30;
  188. }
  189. .border-color-red {
  190. --f7-theme-color-border-color: #ff3b30;
  191. }
  192. .ripple-color-red,
  193. .ripple-red {
  194. --f7-theme-color-ripple-color: rgba(255, 59, 48, 0.3);
  195. }
  196. .color-green {
  197. --f7-theme-color: #4cd964;
  198. --f7-theme-color-rgb: 76, 217, 100;
  199. --f7-theme-color-shade: #2cd048;
  200. --f7-theme-color-tint: #6ee081;
  201. }
  202. .text-color-green {
  203. --f7-theme-color-text-color: #4cd964;
  204. }
  205. .bg-color-green {
  206. --f7-theme-color-bg-color: #4cd964;
  207. }
  208. .border-color-green {
  209. --f7-theme-color-border-color: #4cd964;
  210. }
  211. .ripple-color-green,
  212. .ripple-green {
  213. --f7-theme-color-ripple-color: rgba(76, 217, 100, 0.3);
  214. }
  215. .color-blue {
  216. --f7-theme-color: #2196f3;
  217. --f7-theme-color-rgb: 33, 150, 243;
  218. --f7-theme-color-shade: #0c82df;
  219. --f7-theme-color-tint: #48a8f5;
  220. }
  221. .text-color-blue {
  222. --f7-theme-color-text-color: #2196f3;
  223. }
  224. .bg-color-blue {
  225. --f7-theme-color-bg-color: #2196f3;
  226. }
  227. .border-color-blue {
  228. --f7-theme-color-border-color: #2196f3;
  229. }
  230. .ripple-color-blue,
  231. .ripple-blue {
  232. --f7-theme-color-ripple-color: rgba(33, 150, 243, 0.3);
  233. }
  234. .color-pink {
  235. --f7-theme-color: #ff2d55;
  236. --f7-theme-color-rgb: 255, 45, 85;
  237. --f7-theme-color-shade: #ff0434;
  238. --f7-theme-color-tint: #ff5676;
  239. }
  240. .text-color-pink {
  241. --f7-theme-color-text-color: #ff2d55;
  242. }
  243. .bg-color-pink {
  244. --f7-theme-color-bg-color: #ff2d55;
  245. }
  246. .border-color-pink {
  247. --f7-theme-color-border-color: #ff2d55;
  248. }
  249. .ripple-color-pink,
  250. .ripple-pink {
  251. --f7-theme-color-ripple-color: rgba(255, 45, 85, 0.3);
  252. }
  253. .color-yellow {
  254. --f7-theme-color: #ffcc00;
  255. --f7-theme-color-rgb: 255, 204, 0;
  256. --f7-theme-color-shade: #d6ab00;
  257. --f7-theme-color-tint: #ffd429;
  258. }
  259. .text-color-yellow {
  260. --f7-theme-color-text-color: #ffcc00;
  261. }
  262. .bg-color-yellow {
  263. --f7-theme-color-bg-color: #ffcc00;
  264. }
  265. .border-color-yellow {
  266. --f7-theme-color-border-color: #ffcc00;
  267. }
  268. .ripple-color-yellow,
  269. .ripple-yellow {
  270. --f7-theme-color-ripple-color: rgba(255, 204, 0, 0.3);
  271. }
  272. .color-orange {
  273. --f7-theme-color: #ff9500;
  274. --f7-theme-color-rgb: 255, 149, 0;
  275. --f7-theme-color-shade: #d67d00;
  276. --f7-theme-color-tint: #ffa629;
  277. }
  278. .text-color-orange {
  279. --f7-theme-color-text-color: #ff9500;
  280. }
  281. .bg-color-orange {
  282. --f7-theme-color-bg-color: #ff9500;
  283. }
  284. .border-color-orange {
  285. --f7-theme-color-border-color: #ff9500;
  286. }
  287. .ripple-color-orange,
  288. .ripple-orange {
  289. --f7-theme-color-ripple-color: rgba(255, 149, 0, 0.3);
  290. }
  291. .color-purple {
  292. --f7-theme-color: #9c27b0;
  293. --f7-theme-color-rgb: 156, 39, 176;
  294. --f7-theme-color-shade: #7e208f;
  295. --f7-theme-color-tint: #b92fd1;
  296. }
  297. .text-color-purple {
  298. --f7-theme-color-text-color: #9c27b0;
  299. }
  300. .bg-color-purple {
  301. --f7-theme-color-bg-color: #9c27b0;
  302. }
  303. .border-color-purple {
  304. --f7-theme-color-border-color: #9c27b0;
  305. }
  306. .ripple-color-purple,
  307. .ripple-purple {
  308. --f7-theme-color-ripple-color: rgba(156, 39, 176, 0.3);
  309. }
  310. .color-deeppurple {
  311. --f7-theme-color: #673ab7;
  312. --f7-theme-color-rgb: 103, 58, 183;
  313. --f7-theme-color-shade: #563098;
  314. --f7-theme-color-tint: #7c52c8;
  315. }
  316. .text-color-deeppurple {
  317. --f7-theme-color-text-color: #673ab7;
  318. }
  319. .bg-color-deeppurple {
  320. --f7-theme-color-bg-color: #673ab7;
  321. }
  322. .border-color-deeppurple {
  323. --f7-theme-color-border-color: #673ab7;
  324. }
  325. .ripple-color-deeppurple,
  326. .ripple-deeppurple {
  327. --f7-theme-color-ripple-color: rgba(103, 58, 183, 0.3);
  328. }
  329. .color-lightblue {
  330. --f7-theme-color: #5ac8fa;
  331. --f7-theme-color-rgb: 90, 200, 250;
  332. --f7-theme-color-shade: #32bbf9;
  333. --f7-theme-color-tint: #82d5fb;
  334. }
  335. .text-color-lightblue {
  336. --f7-theme-color-text-color: #5ac8fa;
  337. }
  338. .bg-color-lightblue {
  339. --f7-theme-color-bg-color: #5ac8fa;
  340. }
  341. .border-color-lightblue {
  342. --f7-theme-color-border-color: #5ac8fa;
  343. }
  344. .ripple-color-lightblue,
  345. .ripple-lightblue {
  346. --f7-theme-color-ripple-color: rgba(90, 200, 250, 0.3);
  347. }
  348. .color-teal {
  349. --f7-theme-color: #009688;
  350. --f7-theme-color-rgb: 0, 150, 136;
  351. --f7-theme-color-shade: #006d63;
  352. --f7-theme-color-tint: #00bfad;
  353. }
  354. .text-color-teal {
  355. --f7-theme-color-text-color: #009688;
  356. }
  357. .bg-color-teal {
  358. --f7-theme-color-bg-color: #009688;
  359. }
  360. .border-color-teal {
  361. --f7-theme-color-border-color: #009688;
  362. }
  363. .ripple-color-teal,
  364. .ripple-teal {
  365. --f7-theme-color-ripple-color: rgba(0, 150, 136, 0.3);
  366. }
  367. .color-lime {
  368. --f7-theme-color: #cddc39;
  369. --f7-theme-color-rgb: 205, 220, 57;
  370. --f7-theme-color-shade: #bac923;
  371. --f7-theme-color-tint: #d6e25c;
  372. }
  373. .text-color-lime {
  374. --f7-theme-color-text-color: #cddc39;
  375. }
  376. .bg-color-lime {
  377. --f7-theme-color-bg-color: #cddc39;
  378. }
  379. .border-color-lime {
  380. --f7-theme-color-border-color: #cddc39;
  381. }
  382. .ripple-color-lime,
  383. .ripple-lime {
  384. --f7-theme-color-ripple-color: rgba(205, 220, 57, 0.3);
  385. }
  386. .color-deeporange {
  387. --f7-theme-color: #ff6b22;
  388. --f7-theme-color-rgb: 255, 107, 34;
  389. --f7-theme-color-shade: #f85200;
  390. --f7-theme-color-tint: #ff864b;
  391. }
  392. .text-color-deeporange {
  393. --f7-theme-color-text-color: #ff6b22;
  394. }
  395. .bg-color-deeporange {
  396. --f7-theme-color-bg-color: #ff6b22;
  397. }
  398. .border-color-deeporange {
  399. --f7-theme-color-border-color: #ff6b22;
  400. }
  401. .ripple-color-deeporange,
  402. .ripple-deeporange {
  403. --f7-theme-color-ripple-color: rgba(255, 107, 34, 0.3);
  404. }
  405. .color-gray {
  406. --f7-theme-color: #8e8e93;
  407. --f7-theme-color-rgb: 142, 142, 147;
  408. --f7-theme-color-shade: #79797f;
  409. --f7-theme-color-tint: #a3a3a7;
  410. }
  411. .text-color-gray {
  412. --f7-theme-color-text-color: #8e8e93;
  413. }
  414. .bg-color-gray {
  415. --f7-theme-color-bg-color: #8e8e93;
  416. }
  417. .border-color-gray {
  418. --f7-theme-color-border-color: #8e8e93;
  419. }
  420. .ripple-color-gray,
  421. .ripple-gray {
  422. --f7-theme-color-ripple-color: rgba(142, 142, 147, 0.3);
  423. }
  424. .color-white {
  425. --f7-theme-color: #ffffff;
  426. --f7-theme-color-rgb: 255, 255, 255;
  427. --f7-theme-color-shade: #ebebeb;
  428. --f7-theme-color-tint: #ffffff;
  429. }
  430. .text-color-white {
  431. --f7-theme-color-text-color: #ffffff;
  432. }
  433. .bg-color-white {
  434. --f7-theme-color-bg-color: #ffffff;
  435. }
  436. .border-color-white {
  437. --f7-theme-color-border-color: #ffffff;
  438. }
  439. .ripple-color-white,
  440. .ripple-white {
  441. --f7-theme-color-ripple-color: rgba(255, 255, 255, 0.3);
  442. }
  443. .color-black {
  444. --f7-theme-color: #000000;
  445. --f7-theme-color-rgb: 0, 0, 0;
  446. --f7-theme-color-shade: #000000;
  447. --f7-theme-color-tint: #141414;
  448. }
  449. .text-color-black {
  450. --f7-theme-color-text-color: #000000;
  451. }
  452. .bg-color-black {
  453. --f7-theme-color-bg-color: #000000;
  454. }
  455. .border-color-black {
  456. --f7-theme-color-border-color: #000000;
  457. }
  458. .ripple-color-black,
  459. .ripple-black {
  460. --f7-theme-color-ripple-color: rgba(0, 0, 0, 0.3);
  461. }

Action Sheet

  1. :root {
  2. --f7-actions-grid-button-font-size: 12px;
  3. --f7-actions-grid-button-text-color: #757575;
  4. }
  5. :root .theme-dark,
  6. :root.theme-dark {
  7. --f7-actions-label-text-color: rgba(255, 255, 255, 0.55);
  8. }
  9. .ios {
  10. --f7-actions-border-radius: 13px;
  11. /*
  12. --f7-actions-button-text-color: var(--f7-theme-color);
  13. */
  14. --f7-actions-button-padding: 0px;
  15. --f7-actions-button-text-align: center;
  16. --f7-actions-button-height: 57px;
  17. --f7-actions-button-height-landscape: 44px;
  18. --f7-actions-button-font-size: 20px;
  19. --f7-actions-button-icon-size: 28px;
  20. --f7-actions-button-justify-content: center;
  21. --f7-actions-label-padding: 8px 10px;
  22. --f7-actions-label-font-size: 13px;
  23. --f7-actions-label-justify-content: center;
  24. --f7-actions-group-border-color: transparent;
  25. --f7-actions-group-margin: 8px;
  26. --f7-actions-grid-button-icon-size: 48px;
  27. --f7-actions-bg-color: rgba(255, 255, 255, 0.95);
  28. --f7-actions-bg-color-rgb: 255, 255, 255;
  29. --f7-actions-button-border-color: rgba(0, 0, 0, 0.2);
  30. --f7-actions-button-pressed-bg-color: rgba(230, 230, 230, 0.9);
  31. --f7-actions-button-pressed-bg-color-rgb: 230, 230, 230;
  32. --f7-actions-label-text-color: #8a8a8a;
  33. }
  34. .ios .theme-dark,
  35. .ios.theme-dark {
  36. --f7-actions-bg-color: rgba(45, 45, 45, 0.95);
  37. --f7-actions-bg-color-rgb: 45, 45, 45;
  38. --f7-actions-button-border-color: rgba(255, 255, 255, 0.15);
  39. --f7-actions-button-pressed-bg-color: rgba(50, 50, 50, 0.9);
  40. --f7-actions-button-pressed-bg-color-rgb: 50, 50, 50;
  41. }
  42. .md {
  43. --f7-actions-border-radius: 0px;
  44. --f7-actions-button-border-color: transparent;
  45. --f7-actions-button-padding: 0 16px;
  46. --f7-actions-button-text-align: left;
  47. --f7-actions-button-height: 48px;
  48. --f7-actions-button-height-landscape: 48px;
  49. --f7-actions-button-font-size: 16px;
  50. --f7-actions-button-icon-size: 24px;
  51. --f7-actions-button-justify-content: space-between;
  52. --f7-actions-label-padding: 12px 16px;
  53. --f7-actions-label-font-size: 16px;
  54. --f7-actions-label-justify-content: flex-start;
  55. --f7-actions-group-margin: 0px;
  56. --f7-actions-grid-button-icon-size: 48px;
  57. --f7-actions-bg-color: #fff;
  58. --f7-actions-button-text-color: rgba(0, 0, 0, 0.87);
  59. --f7-actions-button-pressed-bg-color: #e5e5e5;
  60. --f7-actions-label-text-color: rgba(0, 0, 0, 0.54);
  61. --f7-actions-group-border-color: rgba(0, 0, 0, 0.12);
  62. }
  63. .md .theme-dark,
  64. .md.theme-dark {
  65. --f7-actions-bg-color: #202020;
  66. --f7-actions-button-text-color: #fff;
  67. --f7-actions-button-pressed-bg-color: #2e2e2e;
  68. --f7-actions-group-border-color: rgba(255, 255, 255, 0.15);
  69. }
  70. .aurora {
  71. --f7-actions-border-radius: 4px;
  72. --f7-actions-button-padding: 0 16px;
  73. --f7-actions-button-text-align: center;
  74. --f7-actions-button-height: 32px;
  75. --f7-actions-button-height-landscape: 32px;
  76. --f7-actions-button-font-size: 14px;
  77. --f7-actions-button-icon-size: 18px;
  78. --f7-actions-button-justify-content: space-between;
  79. --f7-actions-label-padding: 10px 16px;
  80. --f7-actions-label-font-size: 12px;
  81. --f7-actions-label-justify-content: center;
  82. --f7-actions-group-margin: 16px;
  83. --f7-actions-grid-button-icon-size: 32px;
  84. --f7-actions-bg-color: #fff;
  85. --f7-actions-button-border-color: rgba(0, 0, 0, 0.12);
  86. /*
  87. --f7-actions-button-text-color: var(--f7-theme-color);
  88. */
  89. --f7-actions-button-pressed-bg-color: #e5e5e5;
  90. --f7-actions-label-text-color: rgba(0, 0, 0, 0.5);
  91. --f7-actions-group-border-color: rgba(0, 0, 0, 0.1);
  92. }
  93. .aurora .theme-dark,
  94. .aurora.theme-dark {
  95. --f7-actions-bg-color: #202020;
  96. --f7-actions-button-text-color: #fff;
  97. --f7-actions-button-border-color: rgba(255, 255, 255, 0.15);
  98. --f7-actions-button-pressed-bg-color: #2e2e2e;
  99. --f7-actions-group-border-color: rgba(255, 255, 255, 0.15);
  100. }

Autocomplete

  1. :root {
  2. --f7-autocomplete-dropdown-placeholder-color: #a9a9a9;
  3. --f7-autocomplete-dropdown-preloader-size: 20px;
  4. /*
  5. --f7-autocomplete-dropdown-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.2);
  6. */
  7. --f7-autocomplete-dropdown-bg-color: #fff;
  8. }
  9. :root .theme-dark,
  10. :root.theme-dark {
  11. --f7-autocomplete-dropdown-bg-color: #1c1c1d;
  12. }
  13. .ios {
  14. --f7-autocomplete-dropdown-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
  15. --f7-autocomplete-dropdown-text-matching-font-weight: 600;
  16. --f7-autocomplete-dropdown-font-size: var(--f7-list-font-size);
  17. --f7-autocomplete-dropdown-text-color: #000;
  18. --f7-autocomplete-dropdown-text-matching-color: #000;
  19. }
  20. .ios .theme-dark,
  21. .ios.theme-dark {
  22. --f7-autocomplete-dropdown-text-color: #fff;
  23. --f7-autocomplete-dropdown-text-matching-color: #fff;
  24. }
  25. .md {
  26. --f7-autocomplete-dropdown-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
  27. --f7-autocomplete-dropdown-text-matching-font-weight: 400;
  28. --f7-autocomplete-dropdown-font-size: var(--f7-list-font-size);
  29. --f7-autocomplete-dropdown-text-color: rgba(0, 0, 0, 0.54);
  30. --f7-autocomplete-dropdown-text-matching-color: #212121;
  31. }
  32. .md .theme-dark,
  33. .md.theme-dark {
  34. --f7-autocomplete-dropdown-text-color: rgba(255, 255, 255, 0.54);
  35. --f7-autocomplete-dropdown-text-matching-color: rgba(255, 255, 255, 0.87);
  36. }
  37. .aurora {
  38. --f7-autocomplete-dropdown-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  39. --f7-autocomplete-dropdown-text-matching-font-weight: 700;
  40. --f7-autocomplete-dropdown-font-size: 13px;
  41. --f7-autocomplete-dropdown-text-color: #000;
  42. --f7-autocomplete-dropdown-text-matching-color: #000;
  43. }
  44. .aurora .theme-dark,
  45. .aurora.theme-dark {
  46. --f7-autocomplete-dropdown-text-color: #fff;
  47. --f7-autocomplete-dropdown-text-matching-color: #fff;
  48. }

Badge

  1. :root {
  2. --f7-badge-text-color: #fff;
  3. --f7-badge-bg-color: #8e8e93;
  4. --f7-badge-padding: 0 4px;
  5. --f7-badge-in-icon-size: 16px;
  6. --f7-badge-in-icon-font-size: 10px;
  7. --f7-badge-font-weight: normal;
  8. --f7-badge-font-size: 12px;
  9. }
  10. .ios {
  11. --f7-badge-size: 20px;
  12. }
  13. .md {
  14. --f7-badge-size: 18px;
  15. }
  16. .aurora {
  17. --f7-badge-size: 18px;
  18. --f7-badge-font-weight: 600;
  19. --f7-badge-in-icon-size: 15px;
  20. }

Block

  1. :root {
  2. --f7-block-padding-horizontal: 16px;
  3. --f7-block-padding-vertical: 16px;
  4. --f7-block-font-size: inherit;
  5. --f7-block-text-color: inherit;
  6. --f7-block-header-margin: 10px;
  7. --f7-block-footer-margin: 10px;
  8. --f7-block-header-font-size: 14px;
  9. --f7-block-footer-font-size: 14px;
  10. --f7-block-title-text-transform: none;
  11. --f7-block-title-white-space: nowrap;
  12. --f7-block-title-medium-text-transform: none;
  13. --f7-block-title-large-text-transform: none;
  14. --f7-block-inset-side-margin: 16px;
  15. --f7-block-title-medium-text-color: #000;
  16. --f7-block-title-large-text-color: #000;
  17. --f7-block-strong-bg-color: #fff;
  18. }
  19. :root .theme-dark,
  20. :root.theme-dark {
  21. --f7-block-title-text-color: #fff;
  22. --f7-block-strong-border-color: rgba(255, 255, 255, 0.15);
  23. --f7-block-title-medium-text-color: #fff;
  24. --f7-block-title-large-text-color: #fff;
  25. --f7-block-strong-bg-color: #1c1c1d;
  26. }
  27. .ios {
  28. --f7-block-margin-vertical: 35px;
  29. --f7-block-strong-border-color: rgba(0, 0, 0, 0.22);
  30. --f7-block-title-text-color: #000;
  31. --f7-block-title-font-size: 16px;
  32. --f7-block-title-font-weight: 600;
  33. --f7-block-title-line-height: 20px;
  34. --f7-block-title-margin-bottom: 10px;
  35. --f7-block-title-medium-font-size: 22px;
  36. --f7-block-title-medium-font-weight: bold;
  37. --f7-block-title-medium-line-height: 1.4;
  38. --f7-block-title-large-font-size: 30px;
  39. --f7-block-title-large-font-weight: bold;
  40. --f7-block-title-large-line-height: 1.3;
  41. --f7-block-inset-border-radius: 8px;
  42. --f7-block-strong-text-color: #000;
  43. --f7-block-header-text-color: rgba(0, 0, 0, 0.45);
  44. --f7-block-footer-text-color: rgba(0, 0, 0, 0.45);
  45. }
  46. .ios .theme-dark,
  47. .ios.theme-dark {
  48. --f7-block-header-text-color: rgba(255, 255, 255, 0.55);
  49. --f7-block-footer-text-color: rgba(255, 255, 255, 0.55);
  50. --f7-block-strong-text-color: #fff;
  51. }
  52. .md {
  53. --f7-block-margin-vertical: 32px;
  54. --f7-block-strong-text-color: inherit;
  55. --f7-block-strong-border-color: rgba(0, 0, 0, 0.12);
  56. --f7-block-title-font-size: inherit;
  57. --f7-block-title-text-color: rgba(0, 0, 0, 0.54);
  58. --f7-block-title-font-weight: 500;
  59. --f7-block-title-line-height: 16px;
  60. --f7-block-title-margin-bottom: 16px;
  61. --f7-block-title-medium-font-size: 24px;
  62. --f7-block-title-medium-font-weight: 500;
  63. --f7-block-title-medium-line-height: 1.3;
  64. --f7-block-title-large-font-size: 34px;
  65. --f7-block-title-large-font-weight: 500;
  66. --f7-block-title-large-line-height: 1.2;
  67. --f7-block-inset-border-radius: 4px;
  68. --f7-block-header-text-color: rgba(0, 0, 0, 0.54);
  69. --f7-block-footer-text-color: rgba(0, 0, 0, 0.54);
  70. }
  71. .md .theme-dark,
  72. .md.theme-dark {
  73. --f7-block-header-text-color: rgba(255, 255, 255, 0.54);
  74. --f7-block-footer-text-color: rgba(255, 255, 255, 0.54);
  75. }
  76. .aurora {
  77. --f7-block-margin-vertical: 15px;
  78. --f7-block-strong-border-color: rgba(0, 0, 0, 0.12);
  79. --f7-block-title-font-size: inherit;
  80. --f7-block-title-text-color: rgba(0, 0, 0, 0.7);
  81. --f7-block-title-font-weight: 600;
  82. --f7-block-title-line-height: 1.5;
  83. --f7-block-title-margin-bottom: 5px;
  84. --f7-block-title-medium-font-size: 20px;
  85. --f7-block-title-medium-font-weight: 600;
  86. --f7-block-title-medium-line-height: 1.4;
  87. --f7-block-title-large-font-size: 28px;
  88. --f7-block-title-large-font-weight: bold;
  89. --f7-block-title-large-line-height: 1.3;
  90. --f7-block-inset-border-radius: 4px;
  91. --f7-block-strong-text-color: inherit;
  92. --f7-block-header-text-color: rgba(0, 0, 0, 0.6);
  93. --f7-block-footer-text-color: rgba(0, 0, 0, 0.6);
  94. }
  95. .aurora .theme-dark,
  96. .aurora.theme-dark {
  97. --f7-block-header-text-color: rgba(255, 255, 255, 0.54);
  98. --f7-block-footer-text-color: rgba(255, 255, 255, 0.54);
  99. --f7-block-strong-text-color: #fff;
  100. }

Button

  1. :root {
  2. --f7-button-min-width: 32px;
  3. --f7-button-bg-color: transparent;
  4. --f7-button-border-width: 0px;
  5. /*
  6. --f7-button-text-color: var(--f7-theme-color);
  7. --f7-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
  8. --f7-button-border-color: var(--f7-theme-color);
  9. --f7-button-fill-text-color: #fff;
  10. --f7-button-fill-bg-color: var(--f7-theme-color);
  11. --f7-button-outline-border-color: var(--f7-theme-color);
  12. */
  13. --f7-button-outline-border-width: 2px;
  14. --f7-button-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0,0,0,0.24);
  15. --f7-button-raised-pressed-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0,0,0,0.23);
  16. --f7-segmented-raised-divider-color: rgba(0, 0, 0, 0.1);
  17. --f7-segmented-strong-padding: 2px;
  18. --f7-segmented-strong-between-buttons: 4px;
  19. --f7-segmented-strong-button-font-weight: 500;
  20. --f7-segmented-strong-button-active-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
  21. --f7-segmented-strong-bg-color: rgba(0, 0, 0, 0.07);
  22. --f7-segmented-strong-button-text-color: #000;
  23. --f7-segmented-strong-button-pressed-bg-color: rgba(0, 0, 0, 0.07);
  24. --f7-segmented-strong-button-hover-bg-color: rgba(0, 0, 0, 0.04);
  25. --f7-segmented-strong-button-active-text-color: #000;
  26. --f7-segmented-strong-button-active-bg-color: #fff;
  27. }
  28. :root .theme-dark,
  29. :root.theme-dark {
  30. --f7-segmented-strong-bg-color: rgba(255, 255, 255, 0.1);
  31. --f7-segmented-strong-button-pressed-bg-color: rgba(255, 255, 255, 0.04);
  32. --f7-segmented-strong-button-hover-bg-color: rgba(255, 255, 255, 0.02);
  33. --f7-segmented-strong-button-active-bg-color: rgba(255, 255, 255, 0.14);
  34. --f7-segmented-strong-button-text-color: #fff;
  35. --f7-segmented-strong-button-active-text-color: #fff;
  36. }
  37. .ios {
  38. --f7-button-font-size: 13px;
  39. --f7-button-height: 28px;
  40. --f7-button-padding-horizontal: 10px;
  41. --f7-button-border-radius: 5px;
  42. --f7-button-font-weight: 600;
  43. --f7-button-letter-spacing: 0;
  44. --f7-button-text-transform: uppercase;
  45. /*
  46. --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
  47. --f7-button-fill-pressed-bg-color: var(--f7-theme-color-tint);
  48. */
  49. --f7-button-large-height: 44px;
  50. --f7-button-large-font-size: 17px;
  51. --f7-button-large-font-weight: 500;
  52. --f7-button-large-text-transform: none;
  53. --f7-button-small-height: 26px;
  54. --f7-button-small-font-size: 13px;
  55. --f7-button-small-font-weight: 600;
  56. --f7-button-small-text-transform: uppercase;
  57. --f7-button-small-outline-border-width: 2px;
  58. --f7-segmented-strong-button-text-transform: none;
  59. --f7-segmented-strong-button-active-font-weight: 600;
  60. }
  61. .md {
  62. --f7-button-font-size: 14px;
  63. --f7-button-height: 36px;
  64. --f7-button-padding-horizontal: 8px;
  65. --f7-button-border-radius: 4px;
  66. --f7-button-font-weight: 500;
  67. --f7-button-letter-spacing: 0.03em;
  68. --f7-button-text-transform: uppercase;
  69. /*
  70. --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
  71. */
  72. --f7-button-large-height: 48px;
  73. --f7-button-large-font-size: 14px;
  74. --f7-button-large-font-weight: 500;
  75. --f7-button-large-text-transform: uppercase;
  76. --f7-button-small-height: 28px;
  77. --f7-button-small-font-size: 12px;
  78. --f7-button-small-font-weight: 500;
  79. --f7-button-small-text-transform: uppercase;
  80. --f7-button-small-outline-border-width: 2px;
  81. --f7-segmented-strong-button-text-transform: uppercase;
  82. --f7-segmented-strong-button-active-font-weight: 500;
  83. --f7-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
  84. }
  85. .md .theme-dark,
  86. .md.theme-dark {
  87. --f7-button-pressed-bg-color: rgba(255, 255, 255, 0.1);
  88. }
  89. .aurora {
  90. /*
  91. --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07);
  92. --f7-button-fill-hover-bg-color: var(--f7-theme-color-tint);
  93. */
  94. --f7-button-font-size: 14px;
  95. --f7-button-height: 28px;
  96. --f7-button-min-width: 24px;
  97. --f7-button-padding-horizontal: 10px;
  98. --f7-button-border-radius: 4px;
  99. --f7-button-font-weight: 500;
  100. --f7-button-letter-spacing: 0.02;
  101. --f7-button-text-transform: none;
  102. /*
  103. --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
  104. --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
  105. */
  106. --f7-button-large-height: 34px;
  107. --f7-button-large-font-size: 14px;
  108. --f7-button-large-font-weight: 600;
  109. --f7-button-large-text-transform: none;
  110. --f7-button-small-height: 24px;
  111. --f7-button-small-font-size: 12px;
  112. --f7-button-small-font-weight: 600;
  113. --f7-button-small-text-transform: none;
  114. --f7-button-small-outline-border-width: 1px;
  115. --f7-segmented-strong-button-text-transform: none;
  116. --f7-segmented-strong-button-active-font-weight: 600;
  117. }

Calendar

  1. :root {
  2. --f7-calendar-height: 340px;
  3. --f7-calendar-sheet-landscape-height: 220px;
  4. --f7-calendar-popover-width: 320px;
  5. --f7-calendar-popover-height: 320px;
  6. --f7-calendar-modal-height: 420px;
  7. --f7-calendar-modal-max-width: 380px;
  8. --f7-calendar-modal-border-radius: 4px;
  9. /*
  10. --f7-calendar-header-bg-color: var(--f7-bars-bg-color);
  11. --f7-calendar-header-link-color: var(--f7-bars-link-color);
  12. --f7-calendar-header-text-color: var(--f7-bars-text-color);
  13. --f7-calendar-footer-bg-color: var(--f7-bars-bg-color);
  14. --f7-calendar-footer-border-color: var(--f7-bars-border-color);
  15. --f7-calendar-footer-link-color: var(--f7-bars-link-color);
  16. --f7-calendar-footer-text-color: var(--f7-bars-text-color);
  17. --f7-calendar-week-header-bg-color: var(--f7-bars-bg-color);
  18. --f7-calendar-week-header-text-color: var(--f7-bars-text-color);
  19. */
  20. --f7-calendar-footer-padding: 0 8px;
  21. --f7-calendar-week-header-font-size: 11px;
  22. --f7-calendar-selected-text-color: #fff;
  23. /*
  24. --f7-calendar-selected-bg-color: var(--f7-theme-color);
  25. */
  26. --f7-calendar-prev-next-text-color: #b8b8b8;
  27. --f7-calendar-disabled-text-color: #d4d4d4;
  28. --f7-calendar-event-dot-size: 4px;
  29. /*
  30. --f7-calendar-event-bg-color: var(--f7-theme-color);
  31. */
  32. /*
  33. --f7-calendar-picker-selected-text-color: var(--f7-theme-color);
  34. */
  35. --f7-calendar-day-text-color: #000;
  36. --f7-calendar-sheet-bg-color: #fff;
  37. --f7-calendar-modal-bg-color: #fff;
  38. --f7-calendar-picker-bg-color: #fff;
  39. --f7-calendar-picker-pressed-bg-color: rgba(0, 0, 0, 0.1);
  40. --f7-calendar-picker-hover-bg-color: rgba(0, 0, 0, 0.03);
  41. }
  42. :root .theme-dark,
  43. :root.theme-dark {
  44. --f7-calendar-sheet-border-color: var(--f7-bars-border-color);
  45. --f7-calendar-modal-bg-color: #121212;
  46. --f7-calendar-sheet-bg-color: #121212;
  47. --f7-calendar-picker-bg-color: #1c1c1d;
  48. --f7-calendar-picker-pressed-bg-color: rgba(255, 255, 255, 0.08);
  49. --f7-calendar-picker-hover-bg-color: rgba(255, 255, 255, 0.03);
  50. }
  51. .ios {
  52. --f7-calendar-sheet-border-color: #929499;
  53. --f7-calendar-header-height: 44px;
  54. --f7-calendar-header-font-size: 17px;
  55. --f7-calendar-header-font-weight: 600;
  56. --f7-calendar-header-padding: 0 8px;
  57. --f7-calendar-footer-height: 44px;
  58. --f7-calendar-footer-font-size: 17px;
  59. --f7-calendar-week-header-height: 18px;
  60. --f7-calendar-day-font-size: 15px;
  61. --f7-calendar-day-size: 30px;
  62. --f7-calendar-picker-font-size: 17px;
  63. --f7-calendar-time-selector-font-size: 17px;
  64. --f7-calendar-row-border-color: rgba(0, 0, 0, 0.25);
  65. --f7-calendar-today-text-color: #000;
  66. --f7-calendar-today-bg-color: #e3e3e3;
  67. }
  68. .ios .theme-dark,
  69. .ios.theme-dark {
  70. --f7-calendar-row-border-color: var(--f7-bars-border-color);
  71. --f7-calendar-day-text-color: #fff;
  72. --f7-calendar-today-text-color: #fff;
  73. --f7-calendar-today-bg-color: #333;
  74. }
  75. .md {
  76. --f7-calendar-sheet-border-color: #ccc;
  77. --f7-calendar-header-height: 56px;
  78. --f7-calendar-header-font-size: 20px;
  79. --f7-calendar-header-font-weight: 400;
  80. --f7-calendar-header-padding: 0 24px;
  81. --f7-calendar-footer-height: 48px;
  82. --f7-calendar-footer-font-size: 14px;
  83. --f7-calendar-week-header-height: 24px;
  84. --f7-calendar-row-border-color: transparent;
  85. --f7-calendar-day-font-size: 14px;
  86. /*
  87. --f7-calendar-today-text-color: var(--f7-theme-color);
  88. */
  89. --f7-calendar-today-bg-color: none;
  90. --f7-calendar-day-size: 32px;
  91. --f7-calendar-picker-font-size: 14px;
  92. --f7-calendar-time-selector-font-size: 14px;
  93. }
  94. .md .theme-dark,
  95. .md.theme-dark {
  96. --f7-calendar-day-text-color: rgba(255, 255, 255, 0.87);
  97. }
  98. .aurora {
  99. --f7-calendar-sheet-border-color: #ccc;
  100. --f7-calendar-header-height: 38px;
  101. --f7-calendar-header-font-size: 14px;
  102. --f7-calendar-header-font-weight: 600;
  103. --f7-calendar-header-padding: 0 8px;
  104. --f7-calendar-footer-height: 38px;
  105. --f7-calendar-footer-font-size: 14px;
  106. --f7-calendar-week-header-height: 18px;
  107. --f7-calendar-day-font-size: 13px;
  108. --f7-calendar-day-size: 30px;
  109. --f7-calendar-picker-font-size: 14px;
  110. --f7-calendar-time-selector-font-size: 14px;
  111. --f7-calendar-row-border-color: #e3e3e3;
  112. --f7-calendar-today-text-color: #000;
  113. --f7-calendar-today-bg-color: #e3e3e3;
  114. }
  115. .aurora .theme-dark,
  116. .aurora.theme-dark {
  117. --f7-calendar-row-border-color: var(--f7-bars-border-color);
  118. --f7-calendar-day-text-color: #fff;
  119. --f7-calendar-today-text-color: #fff;
  120. --f7-calendar-today-bg-color: #333;
  121. }

Card

  1. :root {
  2. --f7-card-content-padding-horizontal: 16px;
  3. --f7-card-content-padding-vertical: 16px;
  4. --f7-card-border-radius: 4px;
  5. --f7-card-font-size: inherit;
  6. --f7-card-header-text-color: inherit;
  7. --f7-card-header-font-weight: 400;
  8. --f7-card-header-padding-horizontal: 16px;
  9. --f7-card-footer-font-weight: 400;
  10. --f7-card-footer-font-size: inherit;
  11. --f7-card-footer-padding-horizontal: 16px;
  12. --f7-card-expandable-font-size: 16px;
  13. --f7-card-expandable-tablet-width: 670px;
  14. --f7-card-expandable-tablet-height: 670px;
  15. --f7-card-bg-color: #fff;
  16. --f7-card-outline-border-color: rgba(0, 0, 0, 0.12);
  17. --f7-card-header-border-color: rgba(0, 0, 0, 0.1);
  18. --f7-card-footer-border-color: rgba(0, 0, 0, 0.1);
  19. --f7-card-expandable-bg-color: #fff;
  20. }
  21. :root .theme-dark,
  22. :root.theme-dark {
  23. --f7-card-bg-color: #1c1c1d;
  24. --f7-card-expandable-bg-color: #1c1c1d;
  25. --f7-card-outline-border-color: rgba(255, 255, 255, 0.15);
  26. --f7-card-header-border-color: rgba(255, 255, 255, 0.15);
  27. --f7-card-footer-border-color: rgba(255, 255, 255, 0.15);
  28. --f7-card-footer-text-color: rgba(255, 255, 255, 0.55);
  29. }
  30. .ios {
  31. --f7-card-margin-horizontal: 10px;
  32. --f7-card-margin-vertical: 10px;
  33. --f7-card-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  34. --f7-card-header-font-size: 17px;
  35. --f7-card-header-padding-vertical: 10px;
  36. --f7-card-header-min-height: 44px;
  37. --f7-card-footer-text-color: rgba(0, 0, 0, 0.45);
  38. --f7-card-footer-padding-vertical: 10px;
  39. --f7-card-footer-min-height: 44px;
  40. --f7-card-expandable-margin-horizontal: 20px;
  41. --f7-card-expandable-margin-vertical: 30px;
  42. --f7-card-expandable-box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.3);
  43. --f7-card-expandable-border-radius: 15px;
  44. --f7-card-expandable-tablet-border-radius: 5px;
  45. --f7-card-expandable-header-font-size: 27px;
  46. --f7-card-expandable-header-font-weight: bold;
  47. }
  48. .md {
  49. --f7-card-margin-horizontal: 8px;
  50. --f7-card-margin-vertical: 8px;
  51. --f7-card-box-shadow: var(--f7-elevation-1);
  52. --f7-card-header-font-size: 16px;
  53. --f7-card-header-padding-vertical: 4px;
  54. --f7-card-header-min-height: 48px;
  55. --f7-card-footer-text-color: rgba(0, 0, 0, 0.54);
  56. --f7-card-footer-padding-vertical: 4px;
  57. --f7-card-footer-min-height: 48px;
  58. --f7-card-expandable-margin-horizontal: 12px;
  59. --f7-card-expandable-margin-vertical: 24px;
  60. --f7-card-expandable-box-shadow: var(--f7-elevation-10);
  61. --f7-card-expandable-border-radius: 8px;
  62. --f7-card-expandable-tablet-border-radius: 4px;
  63. --f7-card-expandable-header-font-size: 24px;
  64. --f7-card-expandable-header-font-weight: 500;
  65. }
  66. .aurora {
  67. --f7-card-margin-horizontal: 10px;
  68. --f7-card-margin-vertical: 10px;
  69. --f7-card-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
  70. --f7-card-header-font-size: 14px;
  71. --f7-card-header-font-weight: bold;
  72. --f7-card-header-padding-vertical: 10px;
  73. --f7-card-header-min-height: 38px;
  74. --f7-card-footer-text-color: rgba(0, 0, 0, 0.6);
  75. --f7-card-footer-padding-vertical: 10px;
  76. --f7-card-footer-min-height: 38px;
  77. --f7-card-expandable-margin-horizontal: 10px;
  78. --f7-card-expandable-margin-vertical: 20px;
  79. --f7-card-expandable-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
  80. --f7-card-expandable-border-radius: 15px;
  81. --f7-card-expandable-tablet-border-radius: 5px;
  82. --f7-card-expandable-header-font-size: 27px;
  83. --f7-card-expandable-header-font-weight: bold;
  84. }

Checkbox

  1. :root {
  2. /* --f7-checkbox-active-color: var(--f7-theme-color); */
  3. --f7-checkbox-icon-color: #fff;
  4. }
  5. :root .theme-dark,
  6. :root.theme-dark {
  7. --f7-checkbox-inactive-color: rgba(255, 255, 255, 0.3);
  8. }
  9. .ios {
  10. --f7-checkbox-size: 22px;
  11. --f7-checkbox-border-radius: 50%;
  12. --f7-checkbox-border-width: 1px;
  13. --f7-checkbox-extra-margin: 0px;
  14. --f7-checkbox-inactive-color: #c7c7cc;
  15. }
  16. .md {
  17. --f7-checkbox-size: 18px;
  18. --f7-checkbox-border-radius: 2px;
  19. --f7-checkbox-border-width: 2px;
  20. --f7-checkbox-extra-margin: 22px;
  21. --f7-checkbox-inactive-color: #6d6d6d;
  22. }
  23. .aurora {
  24. --f7-checkbox-size: 14px;
  25. --f7-checkbox-border-radius: 2px;
  26. --f7-checkbox-border-width: 1px;
  27. --f7-checkbox-extra-margin: 0px;
  28. --f7-checkbox-inactive-color: #888;
  29. }

Chip

  1. :root {
  2. --f7-chip-font-size: 13px;
  3. --f7-chip-font-weight: normal;
  4. --f7-chip-media-font-size: 16px;
  5. --f7-chip-bg-color: rgba(0, 0, 0, 0.12);
  6. --f7-chip-outline-border-color: rgba(0, 0, 0, 0.12);
  7. --f7-chip-delete-button-color: #000;
  8. }
  9. :root .theme-dark,
  10. :root.theme-dark {
  11. --f7-chip-delete-button-color: #fff;
  12. --f7-chip-bg-color: #333;
  13. --f7-chip-outline-border-color: rgba(255, 255, 255, 0.12);
  14. }
  15. .ios {
  16. --f7-chip-height: 24px;
  17. --f7-chip-padding-horizontal: 10px;
  18. --f7-chip-text-color: #000;
  19. }
  20. .ios .theme-dark,
  21. .ios.theme-dark {
  22. --f7-chip-text-color: #fff;
  23. }
  24. .md {
  25. --f7-chip-height: 32px;
  26. --f7-chip-padding-horizontal: 12px;
  27. --f7-chip-text-color: rgba(0, 0, 0, 0.87);
  28. }
  29. .md .theme-dark,
  30. .md.theme-dark {
  31. --f7-chip-text-color: rgba(255, 255, 255, 0.87);
  32. }
  33. .aurora {
  34. --f7-chip-height: 20px;
  35. --f7-chip-padding-horizontal: 10px;
  36. --f7-chip-font-size: 12px;
  37. --f7-chip-media-font-size: 14px;
  38. --f7-chip-text-color: #000;
  39. }
  40. .aurora .theme-dark,
  41. .aurora.theme-dark {
  42. --f7-chip-text-color: #fff;
  43. }

Contacts List

  1. :root .theme-dark,
  2. :root.theme-dark {
  3. --f7-contacts-list-title-text-color: #fff;
  4. }
  5. .ios {
  6. --f7-contacts-list-title-font-size: inherit;
  7. --f7-contacts-list-title-font-weight: 600;
  8. --f7-contacts-list-title-height: 22px;
  9. --f7-contacts-list-title-text-color: #000;
  10. --f7-contacts-list-title-bg-color: #f7f7f7;
  11. }
  12. .ios .theme-dark,
  13. .ios.theme-dark {
  14. --f7-contacts-list-title-bg-color: #323234;
  15. }
  16. .md {
  17. --f7-contacts-list-title-font-size: 20px;
  18. --f7-contacts-list-title-font-weight: 500;
  19. /*
  20. --f7-contacts-list-title-text-color: var(--f7-theme-color);
  21. */
  22. --f7-contacts-list-title-height: 48px;
  23. --f7-contacts-list-title-bg-color: transparent;
  24. }
  25. .aurora {
  26. --f7-contacts-list-title-font-weight: 600;
  27. --f7-contacts-list-title-text-color: #000;
  28. /*
  29. --f7-contacts-list-title-bg-color: var(--f7-list-group-title-bg-color);
  30. --f7-contacts-list-title-font-size: var(--f7-list-group-title-font-size);
  31. --f7-contacts-list-title-line-height: var(--f7-list-group-title-height);
  32. --f7-contacts-list-title-height: var(--f7-list-group-title-height);
  33. */
  34. }

Data Table

  1. :root {
  2. --f7-table-head-font-size: 12px;
  3. --f7-table-body-font-size: 14px;
  4. --f7-table-footer-font-size: 12px;
  5. --f7-table-input-height: 24px;
  6. --f7-table-input-font-size: 14px;
  7. --f7-table-collapsible-cell-padding: 16px;
  8. --f7-table-link-icon-only-icon-size: 20px;
  9. --f7-table-sortable-icon-color: #000;
  10. }
  11. :root .theme-dark,
  12. :root.theme-dark {
  13. --f7-table-cell-border-color: rgba(255, 255, 255, 0.15);
  14. --f7-table-sortable-icon-color: #fff;
  15. --f7-table-input-text-color: #fff;
  16. }
  17. .ios {
  18. --f7-table-head-font-weight: 600;
  19. --f7-table-head-cell-height: 44px;
  20. --f7-table-head-icon-size: 18px;
  21. --f7-table-body-cell-height: 44px;
  22. --f7-table-cell-padding-vertical: 0px;
  23. --f7-table-cell-padding-horizontal: 16px;
  24. --f7-table-edge-cell-padding-horizontal: 16px;
  25. --f7-table-label-cell-padding-horizontal: 16px;
  26. --f7-table-checkbox-cell-width: 22px;
  27. /* --f7-table-actions-cell-link-color: var(--f7-theme-color); */
  28. /* --f7-table-actions-link-color: var(--f7-theme-color); */
  29. --f7-table-title-font-size: 17px;
  30. --f7-table-title-font-weight: 600;
  31. --f7-table-card-header-height: 64px;
  32. --f7-table-footer-height: 44px;
  33. --f7-table-head-text-color: rgba(0, 0, 0, 0.45);
  34. --f7-table-cell-border-color: rgba(0, 0, 0, 0.22);
  35. --f7-table-selected-row-bg-color: rgba(0, 0, 0, 0.03);
  36. --f7-table-footer-text-color: rgba(0, 0, 0, 0.45);
  37. --f7-table-input-text-color: #000;
  38. }
  39. .ios .theme-dark,
  40. .ios.theme-dark {
  41. --f7-table-head-text-color: rgba(255, 255, 255, 0.55);
  42. --f7-table-footer-text-color: rgba(255, 255, 255, 0.55);
  43. --f7-table-selected-row-bg-color: rgba(255, 255, 255, 0.08);
  44. }
  45. .md {
  46. --f7-table-head-font-weight: 500;
  47. --f7-table-head-cell-height: 56px;
  48. --f7-table-head-icon-size: 16px;
  49. --f7-table-body-cell-height: 48px;
  50. --f7-table-cell-padding-vertical: 0px;
  51. --f7-table-cell-padding-horizontal: 28px;
  52. --f7-table-edge-cell-padding-horizontal: 24px;
  53. --f7-table-label-cell-padding-horizontal: 24px;
  54. --f7-table-checkbox-cell-width: 18px;
  55. --f7-table-title-font-size: 20px;
  56. --f7-table-title-font-weight: 400;
  57. --f7-table-card-header-height: 64px;
  58. --f7-table-footer-height: 56px;
  59. --f7-table-head-text-color: rgba(0, 0, 0, 0.54);
  60. --f7-table-cell-border-color: rgba(0, 0, 0, 0.12);
  61. --f7-table-actions-cell-link-color: rgba(0, 0, 0, 0.54);
  62. --f7-table-selected-row-bg-color: #f5f5f5;
  63. --f7-table-actions-link-color: rgba(0, 0, 0, 0.54);
  64. --f7-table-footer-text-color: rgba(0, 0, 0, 0.54);
  65. --f7-table-input-text-color: #212121;
  66. }
  67. .md .theme-dark,
  68. .md.theme-dark {
  69. --f7-table-head-text-color: rgba(255, 255, 255, 0.54);
  70. --f7-table-footer-text-color: rgba(255, 255, 255, 0.54);
  71. --f7-table-selected-row-bg-color: rgba(255, 255, 255, 0.05);
  72. --f7-table-actions-cell-link-color: rgba(255, 255, 255, 0.54);
  73. --f7-table-actions-link-color: rgba(255, 255, 255, 0.54);
  74. }
  75. .aurora {
  76. --f7-table-link-icon-only-icon-size: 18px;
  77. --f7-table-head-font-weight: 400;
  78. --f7-table-head-cell-height: 32px;
  79. --f7-table-head-icon-size: 18px;
  80. --f7-table-body-cell-height: 32px;
  81. --f7-table-cell-padding-vertical: 5px;
  82. --f7-table-cell-padding-horizontal: 10px;
  83. --f7-table-edge-cell-padding-horizontal: 16px;
  84. --f7-table-label-cell-padding-horizontal: 16px;
  85. --f7-table-checkbox-cell-width: 22px;
  86. /* --f7-table-actions-cell-link-color: var(--f7-theme-color); */
  87. /* --f7-table-actions-link-color: var(--f7-theme-color); */
  88. --f7-table-title-font-size: 14px;
  89. --f7-table-title-font-weight: 600;
  90. --f7-table-card-header-height: 42px;
  91. --f7-table-footer-height: 32px;
  92. --f7-table-head-text-color: rgba(0, 0, 0, 0.6);
  93. --f7-table-cell-border-color: rgba(0, 0, 0, 0.12);
  94. --f7-table-selected-row-bg-color: rgba(0, 0, 0, 0.03);
  95. --f7-table-footer-text-color: rgba(0, 0, 0, 0.5);
  96. --f7-table-input-text-color: #000;
  97. }
  98. .aurora .theme-dark,
  99. .aurora.theme-dark {
  100. --f7-table-selected-row-bg-color: rgba(255, 255, 255, 0.03);
  101. --f7-table-head-text-color: rgba(255, 255, 255, 0.54);
  102. --f7-table-footer-text-color: rgba(255, 255, 255, 0.54);
  103. }

Dialog

  1. :root {
  2. --f7-dialog-button-text-color: var(--f7-theme-color);
  3. --f7-dialog-button-text-align: center;
  4. --f7-dialog-input-bg-color: #fff;
  5. }
  6. :root .theme-dark,
  7. :root.theme-dark {
  8. --f7-dialog-text-color: #fff;
  9. }
  10. .ios {
  11. --f7-dialog-box-shadow: none;
  12. --f7-dialog-width: 270px;
  13. --f7-dialog-inner-padding: 16px;
  14. --f7-dialog-border-radius: 13px;
  15. --f7-dialog-text-align: center;
  16. --f7-dialog-font-size: 14px;
  17. --f7-dialog-title-text-color: inherit;
  18. --f7-dialog-title-font-size: 18px;
  19. --f7-dialog-title-font-weight: 600;
  20. --f7-dialog-title-line-height: inherit;
  21. --f7-dialog-button-font-size: 17px;
  22. --f7-dialog-button-height: 44px;
  23. --f7-dialog-button-letter-spacing: 0;
  24. --f7-dialog-button-font-weight: 400;
  25. --f7-dialog-button-text-transform: none;
  26. --f7-dialog-input-border-radius: 4px;
  27. --f7-dialog-input-font-size: 14px;
  28. --f7-dialog-input-height: 32px;
  29. --f7-dialog-input-border-width: 1px;
  30. --f7-dialog-input-placeholder-color: #a9a9a9;
  31. --f7-dialog-preloader-size: 34px;
  32. --f7-dialog-bg-color: rgba(255, 255, 255, 0.95);
  33. --f7-dialog-bg-color-rgb: 255, 255, 255;
  34. --f7-dialog-text-color: #000;
  35. --f7-dialog-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
  36. --f7-dialog-input-border-color: rgba(0, 0, 0, 0.3);
  37. --f7-dialog-border-divider-color: rgba(0, 0, 0, 0.2);
  38. }
  39. .ios .theme-dark,
  40. .ios.theme-dark {
  41. --f7-dialog-bg-color: rgba(45, 45, 45, 0.95);
  42. --f7-dialog-bg-color-rgb: 45, 45, 45;
  43. --f7-dialog-button-pressed-bg-color: rgba(0, 0, 0, 0.2);
  44. --f7-dialog-border-divider-color: rgba(255, 255, 255, 0.15);
  45. --f7-dialog-input-border-color: rgba(255, 255, 255, 0.15);
  46. --f7-dialog-input-bg-color: rgba(0, 0, 0, 0.5);
  47. }
  48. .md {
  49. --f7-dialog-box-shadow: var(--f7-elevation-24);
  50. --f7-dialog-width: 280px;
  51. --f7-dialog-inner-padding: 24px;
  52. --f7-dialog-border-radius: 4px;
  53. --f7-dialog-text-align: left;
  54. --f7-dialog-font-size: 16px;
  55. --f7-dialog-title-font-size: 20px;
  56. --f7-dialog-title-font-weight: 500;
  57. --f7-dialog-title-line-height: 1.3;
  58. --f7-dialog-button-font-size: 14px;
  59. --f7-dialog-button-height: 36px;
  60. --f7-dialog-button-letter-spacing: 0.03em;
  61. --f7-dialog-button-font-weight: 500;
  62. --f7-dialog-button-text-transform: uppercase;
  63. --f7-dialog-input-border-radius: 0px;
  64. --f7-dialog-input-font-size: 16px;
  65. --f7-dialog-input-height: 36px;
  66. --f7-dialog-input-border-color: transparent;
  67. --f7-dialog-input-border-width: 0px;
  68. --f7-dialog-preloader-size: 32px;
  69. --f7-dialog-bg-color: #fff;
  70. --f7-dialog-text-color: rgba(0, 0, 0, 0.54);
  71. --f7-dialog-title-text-color: #212121;
  72. --f7-dialog-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
  73. --f7-dialog-input-placeholder-color: rgba(0, 0, 0, 0.35);
  74. }
  75. .md .theme-dark,
  76. .md.theme-dark {
  77. --f7-dialog-bg-color: #1c1c1d;
  78. --f7-dialog-title-text-color: #fff;
  79. --f7-dialog-button-pressed-bg-color: rgba(255, 255, 255, 0.1);
  80. --f7-dialog-input-bg-color: transparent;
  81. --f7-dialog-input-placeholder-color: rgba(255, 255, 255, 0.54);
  82. }
  83. .aurora {
  84. --f7-dialog-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15), 0 25px 30px 0 rgba(0,0,0,0.35);
  85. --f7-dialog-width: 300px;
  86. --f7-dialog-inner-padding: 20px;
  87. --f7-dialog-border-radius: 4px;
  88. --f7-dialog-text-align: left;
  89. --f7-dialog-font-size: 14px;
  90. --f7-dialog-title-font-size: 14px;
  91. --f7-dialog-title-font-weight: 700;
  92. --f7-dialog-title-line-height: inherit;
  93. --f7-dialog-button-font-size: 13px;
  94. --f7-dialog-button-height: 28px;
  95. --f7-dialog-button-letter-spacing: 0;
  96. --f7-dialog-button-font-weight: 500;
  97. --f7-dialog-button-text-transform: none;
  98. /*
  99. --f7-dialog-button-pressed-bg-color: var(--f7-theme-color-shade);
  100. --f7-dialog-button-hover-bg-color: var(--f7-theme-color-tint);
  101. */
  102. --f7-dialog-input-border-radius: 4px;
  103. --f7-dialog-input-font-size: 13px;
  104. --f7-dialog-input-height: 24px;
  105. --f7-dialog-input-border-width: 1px;
  106. --f7-dialog-preloader-size: 24px;
  107. --f7-dialog-bg-color: #fff;
  108. --f7-dialog-title-text-color: inherit;
  109. --f7-dialog-text-color: #000;
  110. --f7-dialog-button-text-color: #fff;
  111. --f7-dialog-input-border-color: rgba(0, 0, 0, 0.12);
  112. --f7-dialog-input-placeholder-color: rgba(0, 0, 0, 0.32);
  113. }
  114. .aurora .theme-dark,
  115. .aurora.theme-dark {
  116. --f7-dialog-bg-color: #1c1c1d;
  117. --f7-dialog-title-text-color: #fff;
  118. --f7-dialog-input-bg-color: rgba(0, 0, 0, 0.25);
  119. --f7-dialog-input-placeholder-color: rgba(255, 255, 255, 0.54);
  120. --f7-dialog-input-border-color: rgba(255, 255, 255, 0.15);
  121. }

Elevation

  1. :root {
  2. --f7-elevation-0: 0px 0px 0px 0px rgba(0, 0, 0, 0);
  3. --f7-elevation-1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
  4. 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
  5. 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  6. --f7-elevation-2: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
  7. 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
  8. 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  9. --f7-elevation-3: 0px 3px 3px -2px rgba(0, 0, 0, 0.2),
  10. 0px 3px 4px 0px rgba(0, 0, 0, 0.14),
  11. 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  12. --f7-elevation-4: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
  13. 0px 4px 5px 0px rgba(0, 0, 0, 0.14),
  14. 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  15. --f7-elevation-5: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
  16. 0px 5px 8px 0px rgba(0, 0, 0, 0.14),
  17. 0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  18. --f7-elevation-6: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
  19. 0px 6px 10px 0px rgba(0, 0, 0, 0.14),
  20. 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  21. --f7-elevation-7: 0px 4px 5px -2px rgba(0, 0, 0, 0.2),
  22. 0px 7px 10px 1px rgba(0, 0, 0, 0.14),
  23. 0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  24. --f7-elevation-8: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
  25. 0px 8px 10px 1px rgba(0, 0, 0, 0.14),
  26. 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  27. --f7-elevation-9: 0px 5px 6px -3px rgba(0, 0, 0, 0.2),
  28. 0px 9px 12px 1px rgba(0, 0, 0, 0.14),
  29. 0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  30. --f7-elevation-10: 0px 6px 6px -3px rgba(0, 0, 0, 0.2),
  31. 0px 10px 14px 1px rgba(0, 0, 0, 0.14),
  32. 0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  33. --f7-elevation-11: 0px 6px 7px -4px rgba(0, 0, 0, 0.2),
  34. 0px 11px 15px 1px rgba(0, 0, 0, 0.14),
  35. 0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  36. --f7-elevation-12: 0px 7px 8px -4px rgba(0, 0, 0, 0.2),
  37. 0px 12px 17px 2px rgba(0, 0, 0, 0.14),
  38. 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  39. --f7-elevation-13: 0px 7px 8px -4px rgba(0, 0, 0, 0.2),
  40. 0px 13px 19px 2px rgba(0, 0, 0, 0.14),
  41. 0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  42. --f7-elevation-14: 0px 7px 9px -4px rgba(0, 0, 0, 0.2),
  43. 0px 14px 21px 2px rgba(0, 0, 0, 0.14),
  44. 0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  45. --f7-elevation-15: 0px 8px 9px -5px rgba(0, 0, 0, 0.2),
  46. 0px 15px 22px 2px rgba(0, 0, 0, 0.14),
  47. 0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  48. --f7-elevation-16: 0px 8px 10px -5px rgba(0, 0, 0, 0.2),
  49. 0px 16px 24px 2px rgba(0, 0, 0, 0.14),
  50. 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  51. --f7-elevation-17: 0px 8px 11px -5px rgba(0, 0, 0, 0.2),
  52. 0px 17px 26px 2px rgba(0, 0, 0, 0.14),
  53. 0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  54. --f7-elevation-18: 0px 9px 11px -5px rgba(0, 0, 0, 0.2),
  55. 0px 18px 28px 2px rgba(0, 0, 0, 0.14),
  56. 0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  57. --f7-elevation-19: 0px 9px 12px -6px rgba(0, 0, 0, 0.2),
  58. 0px 19px 29px 2px rgba(0, 0, 0, 0.14),
  59. 0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  60. --f7-elevation-20: 0px 10px 13px -6px rgba(0, 0, 0, 0.2),
  61. 0px 20px 31px 3px rgba(0, 0, 0, 0.14),
  62. 0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  63. --f7-elevation-21: 0px 10px 13px -6px rgba(0, 0, 0, 0.2),
  64. 0px 21px 33px 3px rgba(0, 0, 0, 0.14),
  65. 0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  66. --f7-elevation-22: 0px 10px 14px -6px rgba(0, 0, 0, 0.2),
  67. 0px 22px 35px 3px rgba(0, 0, 0, 0.14),
  68. 0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  69. --f7-elevation-23: 0px 11px 14px -7px rgba(0, 0, 0, 0.2),
  70. 0px 23px 36px 3px rgba(0, 0, 0, 0.14),
  71. 0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  72. --f7-elevation-24: 0px 11px 15px -7px rgba(0, 0, 0, 0.2),
  73. 0px 24px 38px 3px rgba(0, 0, 0, 0.14),
  74. 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  75. }

Fab

  1. :root {
  2. --f7-fab-margin: 16px;
  3. --f7-fab-text-color: #fff;
  4. --f7-fab-extended-text-font-size: 14px;
  5. --f7-fab-extended-text-padding: 0 20px;
  6. --f7-fab-label-bg-color: #fff;
  7. --f7-fab-label-text-color: #333;
  8. --f7-fab-label-border-radius: 4px;
  9. --f7-fab-label-padding: 4px 12px;
  10. --f7-fab-button-size: 40px;
  11. /* --f7-fab-pressed-bg-color: var(--f7-theme-color-shade); */
  12. }
  13. .ios {
  14. --f7-fab-size: 50px;
  15. --f7-fab-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
  16. --f7-fab-extended-size: 50px;
  17. --f7-fab-extended-text-font-weight: 600;
  18. --f7-fab-extended-text-letter-spacing: 0;
  19. --f7-fab-label-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
  20. --f7-fab-label-font-size: inherit;
  21. }
  22. .md {
  23. --f7-fab-size: 56px;
  24. --f7-fab-box-shadow: var(--f7-elevation-6);
  25. --f7-fab-extended-size: 48px;
  26. --f7-fab-extended-text-font-weight: 500;
  27. --f7-fab-extended-text-letter-spacing: 0.03em;
  28. --f7-fab-label-box-shadow: var(--f7-elevation-3);
  29. --f7-fab-label-font-size: inherit;
  30. }
  31. .aurora {
  32. --f7-fab-size: 40px;
  33. --f7-fab-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
  34. --f7-fab-extended-size: 38px;
  35. --f7-fab-extended-text-font-weight: 500;
  36. --f7-fab-extended-text-letter-spacing: 0;
  37. --f7-fab-label-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
  38. --f7-fab-label-font-size: 12px;
  39. }

Grid

  1. :root {
  2. --f7-grid-gap: 16px;
  3. --f7-grid-row-gap: 0px;
  4. --f7-grid-resize-handler-bg-color: rgba(0, 0, 0, 0.35);
  5. }
  6. :root .theme-dark,
  7. :root.theme-dark {
  8. --f7-grid-resize-handler-bg-color: rgba(255, 255, 255, 0.35);
  9. }

Input

  1. :root {
  2. --f7-input-bg-color: transparent;
  3. --f7-label-font-weight: 400;
  4. --f7-label-line-height: 1.3;
  5. --f7-input-padding-left: 0px;
  6. --f7-input-padding-right: 0px;
  7. --f7-input-error-text-color: #ff3b30;
  8. --f7-input-error-font-size: 12px;
  9. --f7-input-error-line-height: 1.4;
  10. --f7-input-error-font-weight: 400;
  11. --f7-input-info-font-size: 12px;
  12. --f7-input-info-line-height: 1.4;
  13. --f7-input-outline-height: 40px;
  14. --f7-input-outline-border-radius: 4px;
  15. --f7-input-outline-padding-horizontal: 12px;
  16. --f7-textarea-height: 100px;
  17. /*
  18. --f7-input-outline-focused-border-color: var(--f7-theme-color);
  19. --f7-input-outline-invalid-border-color: var(--f7-input-error-text-color);
  20. */
  21. --f7-input-outline-border-color: #999;
  22. }
  23. :root .theme-dark,
  24. :root.theme-dark {
  25. --f7-input-outline-border-color: #444;
  26. }
  27. .ios {
  28. --f7-input-height: 44px;
  29. --f7-input-font-size: 17px;
  30. --f7-input-placeholder-color: #a9a9a9;
  31. --f7-textarea-padding-vertical: 11px;
  32. /*
  33. --f7-input-focused-border-color: var(--f7-list-item-border-color);
  34. --f7-input-invalid-border-color: var(--f7-list-item-border-color);
  35. --f7-input-invalid-text-color: var(--f7-input-error-text-color);
  36. */
  37. --f7-label-font-size: 12px;
  38. --f7-label-text-color: inherit;
  39. /*
  40. --f7-label-focused-text-color: var(--f7-label-text-color);
  41. --f7-label-invalid-text-color: var(--f7-label-text-color);
  42. */
  43. --f7-floating-label-scale: calc(17 / 12);
  44. --f7-inline-label-font-size: 17px;
  45. --f7-inline-label-line-height: 1.4;
  46. --f7-inline-label-padding-top: 3px;
  47. --f7-input-clear-button-size: 14px;
  48. --f7-input-text-color: #000000;
  49. --f7-input-info-text-color: rgba(0, 0, 0, 0.45);
  50. --f7-input-clear-button-color: rgba(0, 0, 0, 0.45);
  51. }
  52. .ios .theme-dark,
  53. .ios.theme-dark {
  54. --f7-input-text-color: #fff;
  55. --f7-input-info-text-color: rgba(255, 255, 255, 0.55);
  56. --f7-input-clear-button-color: rgba(255, 255, 255, 0.5);
  57. }
  58. .md {
  59. --f7-input-height: 36px;
  60. --f7-input-font-size: 16px;
  61. --f7-textarea-padding-vertical: 7px;
  62. /*
  63. --f7-input-focused-border-color: var(--f7-theme-color);
  64. --f7-input-invalid-border-color: var(--f7-input-error-text-color);
  65. --f7-input-invalid-text-color: var(--f7-input-text-color);
  66. */
  67. --f7-label-font-size: 12px;
  68. /*
  69. --f7-label-focused-text-color: var(--f7-theme-color);
  70. --f7-label-invalid-text-color: var(--f7-input-error-text-color );
  71. */
  72. --f7-floating-label-scale: calc(16 / 12);
  73. --f7-inline-label-font-size: 16px;
  74. --f7-inline-label-line-height: 1.5;
  75. --f7-inline-label-padding-top: 7px;
  76. --f7-input-clear-button-size: 18px;
  77. --f7-input-clear-button-color: #aaa;
  78. --f7-input-text-color: #212121;
  79. --f7-input-placeholder-color: rgba(0, 0, 0, 0.35);
  80. --f7-label-text-color: rgba(0, 0, 0, 0.65);
  81. --f7-input-info-text-color: rgba(0, 0, 0, 0.45);
  82. }
  83. .md .theme-dark,
  84. .md.theme-dark {
  85. --f7-input-text-color: rgba(255, 255, 255, 0.87);
  86. --f7-input-placeholder-color: rgba(255, 255, 255, 0.35);
  87. --f7-label-text-color: rgba(255, 255, 255, 0.54);
  88. --f7-input-info-text-color: rgba(255, 255, 255, 0.45);
  89. }
  90. .aurora {
  91. --f7-input-height: 24px;
  92. --f7-input-font-size: 13px;
  93. --f7-textarea-padding-vertical: 2px;
  94. /*
  95. --f7-input-focused-border-color: var(--f7-list-item-border-color);
  96. --f7-input-invalid-border-color: var(--f7-list-item-border-color);
  97. --f7-input-invalid-text-color: var(--f7-input-error-text-color);
  98. */
  99. --f7-label-font-size: 11px;
  100. --f7-label-text-color: inherit;
  101. /*
  102. --f7-label-focused-text-color: var(--f7-label-text-color);
  103. --f7-label-invalid-text-color: var(--f7-label-text-color);
  104. */
  105. --f7-floating-label-scale: calc(13 / 11);
  106. --f7-inline-label-font-size: 14px;
  107. --f7-inline-label-line-height: 1.4;
  108. --f7-inline-label-padding-top: 1px;
  109. --f7-input-clear-button-size: 14px;
  110. --f7-input-outline-height: 32px;
  111. --f7-input-outline-padding-horizontal: 8px;
  112. --f7-input-text-color: #000000;
  113. --f7-input-placeholder-color: rgba(0, 0, 0, 0.32);
  114. --f7-input-clear-button-color: #666;
  115. --f7-input-info-text-color: rgba(0, 0, 0, 0.5);
  116. }
  117. .aurora .theme-dark,
  118. .aurora.theme-dark {
  119. --f7-input-text-color: #fff;
  120. --f7-input-clear-button-color: #aaa;
  121. --f7-input-placeholder-color: rgba(255, 255, 255, 0.35);
  122. --f7-input-info-text-color: rgba(255, 255, 255, 0.45);
  123. }

Link

  1. :root {
  2. --f7-link-highlight-black: rgba(0, 0, 0, 0.1);
  3. --f7-link-highlight-white: rgba(255, 255, 255, 0.15);
  4. --f7-link-highlight-color: var(--f7-link-highlight-black);
  5. }
  6. .theme-dark {
  7. --f7-link-highlight-color: var(--f7-link-highlight-white);
  8. }

List

  1. :root {
  2. --f7-list-inset-side-margin: 16px;
  3. --f7-list-item-cell-margin: 16px;
  4. --f7-list-item-padding-horizontal: 16px;
  5. --f7-list-media-item-padding-horizontal: 16px;
  6. --f7-list-item-text-max-lines: 2;
  7. --f7-list-chevron-icon-font-size: 20px;
  8. --f7-list-item-title-font-size: inherit;
  9. --f7-list-item-title-font-weight: 400;
  10. --f7-list-item-title-text-color: inherit;
  11. --f7-list-item-title-line-height: inherit;
  12. --f7-list-item-title-white-space: nowrap;
  13. --f7-list-item-subtitle-font-weight: 400;
  14. --f7-list-item-subtitle-text-color: inherit;
  15. --f7-list-item-subtitle-line-height: inherit;
  16. --f7-list-item-text-font-weight: 400;
  17. --f7-list-item-after-font-weight: 400;
  18. --f7-list-item-header-text-color: inherit;
  19. --f7-list-item-header-font-size: 12px;
  20. --f7-list-item-header-font-weight: 400;
  21. --f7-list-item-header-line-height: 1.2;
  22. --f7-list-item-footer-font-size: 12px;
  23. --f7-list-item-footer-font-weight: 400;
  24. --f7-list-item-footer-line-height: 1.2;
  25. --f7-list-button-font-size: inherit;
  26. --f7-list-button-font-weight: 400;
  27. --f7-list-item-divider-line-height: inherit;
  28. --f7-list-group-title-line-height: inherit;
  29. --f7-list-bg-color: #fff;
  30. --f7-list-chevron-icon-color: rgba(0, 0, 0, 0.2);
  31. }
  32. :root .theme-dark,
  33. :root.theme-dark {
  34. --f7-list-button-border-color: rgba(255, 255, 255, 0.15);
  35. --f7-list-bg-color: #1c1c1d;
  36. --f7-list-border-color: rgba(255, 255, 255, 0.15);
  37. --f7-list-item-border-color: rgba(255, 255, 255, 0.15);
  38. --f7-list-item-divider-border-color: rgba(255, 255, 255, 0.15);
  39. --f7-list-item-divider-bg-color: #232323;
  40. --f7-list-group-title-bg-color: #232323;
  41. --f7-list-chevron-icon-color: rgba(255, 255, 255, 0.3);
  42. }
  43. .ios {
  44. --f7-list-in-list-padding-left: 30px;
  45. --f7-list-inset-border-radius: 8px;
  46. --f7-list-margin-vertical: 35px;
  47. --f7-list-font-size: 17px;
  48. --f7-list-chevron-icon-area: 20px;
  49. --f7-list-border-color: rgba(0, 0, 0, 0.22);
  50. --f7-list-item-border-color: rgba(0, 0, 0, 0.22);
  51. --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.15);
  52. --f7-list-item-subtitle-font-size: 15px;
  53. --f7-list-item-text-font-size: 15px;
  54. --f7-list-item-text-line-height: 21px;
  55. --f7-list-item-after-font-size: inherit;
  56. --f7-list-item-after-line-height: inherit;
  57. --f7-list-item-after-padding: 5px;
  58. --f7-list-item-min-height: 44px;
  59. --f7-list-item-media-margin: 16px;
  60. --f7-list-item-media-icons-margin: 5px;
  61. --f7-list-item-padding-vertical: 8px;
  62. --f7-list-media-item-padding-vertical: 10px;
  63. --f7-list-media-item-title-font-weight: 600;
  64. /*
  65. --f7-list-button-text-color: var(--f7-theme-color);
  66. */
  67. --f7-list-button-text-align: center;
  68. --f7-list-button-border-color: rgba(0, 0, 0, 0.22);
  69. --f7-list-item-divider-height: 31px;
  70. --f7-list-item-divider-font-size: inherit;
  71. --f7-list-item-divider-font-weight: 400;
  72. --f7-list-item-divider-bg-color: rgba(0, 0, 0, 0.03);
  73. --f7-list-item-divider-border-color: rgba(0, 0, 0, 0.22);
  74. --f7-list-group-title-height: 31px;
  75. --f7-list-group-title-font-size: inherit;
  76. --f7-list-group-title-font-weight: 400;
  77. --f7-list-group-title-bg-color: #f7f7f7;
  78. --f7-list-item-after-text-color: rgba(0, 0, 0, 0.45);
  79. --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.45);
  80. --f7-list-item-text-text-color: rgba(0, 0, 0, 0.45);
  81. --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.45);
  82. --f7-list-group-title-text-color: rgba(0, 0, 0, 0.45);
  83. --f7-list-button-pressed-bg-color: rgba(0, 0, 0, 0.15);
  84. }
  85. .ios .theme-dark,
  86. .ios.theme-dark {
  87. --f7-list-item-after-text-color: rgba(255, 255, 255, 0.55);
  88. --f7-list-item-header-text-color: rgba(255, 255, 255, 0.55);
  89. --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.55);
  90. --f7-list-item-text-text-color: rgba(255, 255, 255, 0.55);
  91. --f7-list-item-divider-text-color: rgba(255, 255, 255, 0.55);
  92. --f7-list-group-title-text-color: rgba(255, 255, 255, 0.55);
  93. --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.08);
  94. --f7-list-button-pressed-bg-color: rgba(255, 255, 255, 0.08);
  95. }
  96. .md {
  97. --f7-list-in-list-padding-left: 40px;
  98. --f7-list-inset-border-radius: 4px;
  99. --f7-list-margin-vertical: 32px;
  100. --f7-list-font-size: 16px;
  101. --f7-list-chevron-icon-area: 26px;
  102. --f7-list-border-color: rgba(0, 0, 0, 0.12);
  103. --f7-list-item-border-color: rgba(0, 0, 0, 0.12);
  104. --f7-list-item-subtitle-font-size: 14px;
  105. --f7-list-item-text-font-size: 14px;
  106. --f7-list-item-text-line-height: 20px;
  107. --f7-list-item-after-font-size: 14px;
  108. --f7-list-item-after-line-height: inherit;
  109. --f7-list-item-after-padding: 8px;
  110. --f7-list-item-min-height: 48px;
  111. --f7-list-item-media-margin: 16px;
  112. --f7-list-item-media-icons-margin: 8px;
  113. --f7-list-item-padding-vertical: 8px;
  114. --f7-list-media-item-padding-vertical: 14px;
  115. /*
  116. --f7-list-media-item-title-font-weight: var(--f7-list-item-title-font-weight);
  117. */
  118. --f7-list-button-text-align: left;
  119. --f7-list-button-border-color: transparent;
  120. --f7-list-item-divider-height: 48px;
  121. --f7-list-item-divider-font-size: 14px;
  122. --f7-list-item-divider-font-weight: 400;
  123. --f7-list-item-divider-bg-color: #f4f4f4;
  124. --f7-list-item-divider-border-color: transparent;
  125. --f7-list-group-title-height: 48px;
  126. --f7-list-group-title-font-size: 14px;
  127. --f7-list-group-title-font-weight: 400;
  128. --f7-list-group-title-bg-color: #f4f4f4;
  129. --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.1);
  130. --f7-list-item-text-text-color: rgba(0, 0, 0, 0.54);
  131. --f7-list-item-after-text-color: rgba(0, 0, 0, 0.54);
  132. --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.5);
  133. --f7-list-button-text-color: #212121;
  134. --f7-list-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
  135. --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.54);
  136. --f7-list-group-title-text-color: rgba(0, 0, 0, 0.54);
  137. }
  138. .md .theme-dark,
  139. .md.theme-dark {
  140. --f7-list-button-text-color: #fff;
  141. --f7-list-item-divider-text-color: #fff;
  142. --f7-list-group-title-text-color: #fff;
  143. --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.05);
  144. --f7-list-button-pressed-bg-color: rgba(255, 255, 255, 0.05);
  145. --f7-list-item-text-text-color: rgba(255, 255, 255, 0.54);
  146. --f7-list-item-after-text-color: rgba(255, 255, 255, 0.54);
  147. --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.54);
  148. }
  149. .aurora {
  150. --f7-list-in-list-padding-left: 16px;
  151. --f7-list-inset-border-radius: 4px;
  152. --f7-list-margin-vertical: 15px;
  153. --f7-list-font-size: 14px;
  154. --f7-list-chevron-icon-area: 15px;
  155. --f7-list-chevron-icon-font-size: 16px;
  156. --f7-list-border-color: rgba(0, 0, 0, 0.12);
  157. --f7-list-item-border-color: rgba(0, 0, 0, 0.12);
  158. --f7-list-item-title-line-height: 1.3;
  159. --f7-list-item-subtitle-font-size: 14px;
  160. --f7-list-item-subtitle-line-height: 1.3;
  161. --f7-list-item-text-font-size: 12px;
  162. --f7-list-item-text-line-height: 16px;
  163. --f7-list-item-after-font-size: 13px;
  164. --f7-list-item-after-line-height: 1.2;
  165. --f7-list-item-after-padding: 5px;
  166. --f7-list-item-min-height: 32px;
  167. --f7-list-item-media-margin: 10px;
  168. --f7-list-item-media-icons-margin: 5px;
  169. --f7-list-item-padding-vertical: 5px;
  170. --f7-list-media-item-padding-vertical: 5px;
  171. --f7-list-media-item-title-font-weight: 600;
  172. /*
  173. --f7-list-button-text-color: var(--f7-theme-color);
  174. */
  175. --f7-list-button-text-align: center;
  176. --f7-list-button-border-color: rgba(0, 0, 0, 0.12);
  177. --f7-list-item-divider-height: 19px;
  178. --f7-list-item-divider-font-size: inherit;
  179. --f7-list-item-divider-font-weight: 500;
  180. --f7-list-item-divider-bg-color: rgba(0, 0, 0, 0.03);
  181. --f7-list-item-divider-border-color: transparent;
  182. --f7-list-group-title-height: 19px;
  183. --f7-list-group-title-font-size: inherit;
  184. --f7-list-group-title-font-weight: 500;
  185. --f7-list-group-title-bg-color: #f7f7f7;
  186. --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.1);
  187. --f7-list-link-hover-bg-color: rgba(0, 0, 0, 0.03);
  188. --f7-list-item-text-text-color: rgba(0, 0, 0, 0.6);
  189. --f7-list-item-after-text-color: rgba(0, 0, 0, 0.5);
  190. --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.6);
  191. --f7-list-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
  192. --f7-list-button-hover-bg-color: rgba(0, 0, 0, 0.03);
  193. --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.6);
  194. --f7-list-group-title-text-color: rgba(0, 0, 0, 0.6);
  195. }
  196. .aurora .theme-dark,
  197. .aurora.theme-dark {
  198. --f7-list-item-text-text-color: rgba(255, 255, 255, 0.54);
  199. --f7-list-item-after-text-color: rgba(255, 255, 255, 0.54);
  200. --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.54);
  201. --f7-list-item-divider-text-color: rgba(255, 255, 255, 0.6);
  202. --f7-list-group-title-text-color: rgba(255, 255, 255, 0.6);
  203. --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.05);
  204. --f7-list-link-hover-bg-color: rgba(255, 255, 255, 0.03);
  205. --f7-list-button-pressed-bg-color: rgba(255, 255, 255, 0.05);
  206. --f7-list-button-hover-bg-color: rgba(255, 255, 255, 0.03);
  207. }

List Index

  1. :root {
  2. --f7-list-index-width: 16px;
  3. --f7-list-index-font-size: 11px;
  4. --f7-list-index-font-weight: 600;
  5. /* --f7-list-index-text-color: var(--f7-theme-color); */
  6. --f7-list-index-item-height: 14px;
  7. --f7-list-index-label-text-color: #fff;
  8. /* --f7-list-index-label-bg-color: var(--f7-theme-color); */
  9. --f7-list-index-label-font-weight: 500;
  10. }
  11. .ios {
  12. --f7-list-index-label-size: 44px;
  13. --f7-list-index-label-font-size: 17px;
  14. --f7-list-index-skip-dot-size: 6px;
  15. }
  16. .md {
  17. --f7-list-index-label-size: 56px;
  18. --f7-list-index-label-font-size: 20px;
  19. --f7-list-index-skip-dot-size: 4px;
  20. }
  21. .aurora {
  22. --f7-list-index-font-size: 12px;
  23. --f7-list-index-label-size: 32px;
  24. --f7-list-index-label-font-size: 12px;
  25. --f7-list-index-label-font-weight: 600;
  26. --f7-list-index-skip-dot-size: 4px;
  27. }

Login Screen

  1. :root {
  2. --f7-login-screen-blocks-max-width: 480px;
  3. /*
  4. --f7-login-screen-list-button-text-color: var(--f7-theme-color);
  5. */
  6. --f7-login-screen-title-text-align: center;
  7. --f7-login-screen-title-text-color: inherit;
  8. --f7-login-screen-title-letter-spacing: 0;
  9. --f7-login-screen-title-font-weight: 600;
  10. --f7-login-screen-title-font-size: 28px;
  11. --f7-login-screen-content-bg-color: #fff;
  12. --f7-login-screen-bg-color: #fff;
  13. }
  14. :root .theme-dark,
  15. :root.theme-dark {
  16. --f7-login-screen-bg-color: #121212;
  17. --f7-login-screen-content-bg-color: #121212;
  18. }
  19. .ios {
  20. --f7-login-screen-blocks-margin-vertical: 25px;
  21. }
  22. .ios .theme-dark,
  23. .ios.theme-dark {
  24. --f7-login-screen-bg-color: #000;
  25. --f7-login-screen-content-bg-color: #000;
  26. }
  27. .md {
  28. --f7-login-screen-blocks-margin-vertical: 24px;
  29. }
  30. .aurora {
  31. --f7-login-screen-blocks-margin-vertical: 15px;
  32. }

Menu

  1. :root {
  2. --f7-menu-text-color: #fff;
  3. --f7-menu-font-size: 16px;
  4. --f7-menu-font-weight: 500;
  5. --f7-menu-line-height: 1.2;
  6. --f7-menu-bg-color: rgba(0, 0, 0, 0.9);
  7. --f7-menu-item-pressed-bg-color: rgba(20, 20, 20, 0.9);
  8. --f7-menu-item-padding-horizontal: 12px;
  9. --f7-menu-item-spacing: 6px;
  10. --f7-menu-item-height: 40px;
  11. --f7-menu-item-dropdown-icon-color: rgba(255, 255, 255, 0.4);
  12. --f7-menu-item-border-radius: 8px;
  13. /*
  14. --f7-menu-dropdown-pressed-bg-color: var(--f7-theme-color);
  15. */
  16. --f7-menu-dropdown-item-height: 28px;
  17. --f7-menu-dropdown-divider-color: rgba(255, 255, 255, 0.2);
  18. --f7-menu-dropdown-padding-vertical: 6px;
  19. /*
  20. --f7-menu-dropdown-border-radius: var(--f7-menu-item-border-radius);
  21. */
  22. }
  23. .aurora {
  24. --f7-menu-font-size: 13px;
  25. --f7-menu-item-height: 28px;
  26. --f7-menu-dropdown-item-height: 24px;
  27. --f7-menu-item-border-radius: 5px;
  28. --f7-menu-item-padding-horizontal: 10px;
  29. }

Messagebar

  1. :root {
  2. --f7-messagebar-shadow-image: none;
  3. --f7-messagebar-textarea-bg-color: transparent;
  4. --f7-messagebar-attachments-height: 155px;
  5. --f7-messagebar-attachment-height: 155px;
  6. --f7-messagebar-attachment-landscape-height: 120px;
  7. --f7-messagebar-sheet-height: 252px;
  8. --f7-messagebar-sheet-landscape-height: 192px;
  9. /*
  10. --f7-messagebar-inner-padding-left: var(--f7-toolbar-inner-padding-left);
  11. --f7-messagebar-inner-padding-right: var(--f7-toolbar-inner-padding-right);
  12. */
  13. --f7-messagebar-bg-color: #fff;
  14. --f7-messagebar-bg-color-rgb: 255, 255, 255;
  15. }
  16. :root .theme-dark,
  17. :root.theme-dark {
  18. --f7-messagebar-bg-color: var(--f7-bars-bg-color);
  19. --f7-messagebar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
  20. }
  21. .ios {
  22. --f7-messagebar-height: 44px;
  23. --f7-messagebar-font-size: 17px;
  24. /*
  25. --f7-messagebar-link-color: var(--f7-theme-color);
  26. */
  27. --f7-messagebar-border-color: transparent;
  28. --f7-messagebar-textarea-border-radius: 17px;
  29. --f7-messagebar-textarea-padding: 6px 16px;
  30. --f7-messagebar-textarea-height: 34px;
  31. --f7-messagebar-textarea-font-size: 17px;
  32. --f7-messagebar-textarea-line-height: 20px;
  33. --f7-messagebar-sheet-bg-color: #d1d5da;
  34. --f7-messagebar-attachment-border-radius: 12px;
  35. --f7-messagebar-textarea-text-color: #000;
  36. --f7-messagebar-textarea-border: 1px solid #c8c8cd;
  37. --f7-messagebar-attachments-border-color: #c8c8cd;
  38. }
  39. .ios .theme-dark,
  40. .ios.theme-dark {
  41. --f7-messagebar-textarea-text-color: #fff;
  42. --f7-messagebar-textarea-border: 1px solid var(--f7-bars-border-color);
  43. --f7-messagebar-attachments-border-color: var(--f7-bars-border-color);
  44. }
  45. .md {
  46. --f7-messagebar-height: 48px;
  47. --f7-messagebar-font-size: 16px;
  48. --f7-messagebar-textarea-border-radius: 0px;
  49. --f7-messagebar-textarea-padding: 5px 8px;
  50. --f7-messagebar-textarea-height: 32px;
  51. --f7-messagebar-textarea-font-size: 16px;
  52. --f7-messagebar-textarea-line-height: 22px;
  53. --f7-messagebar-textarea-border: 1px solid transparent;
  54. --f7-messagebar-sheet-bg-color: #fff;
  55. --f7-messagebar-attachment-border-radius: 4px;
  56. --f7-messagebar-link-color: #333;
  57. --f7-messagebar-border-color: #d1d1d1;
  58. --f7-messagebar-textarea-text-color: #333;
  59. --f7-messagebar-attachments-border-color: #ddd;
  60. }
  61. .md .theme-dark,
  62. .md.theme-dark {
  63. --f7-messagebar-border-color: transparent;
  64. --f7-messagebar-link-color: rgba(255, 255, 255, 0.87);
  65. --f7-messagebar-textarea-text-color: rgba(255, 255, 255, 0.87);
  66. --f7-messagebar-attachments-border-color: rgba(255, 255, 255, 0.2);
  67. }
  68. .aurora {
  69. --f7-messagebar-height: 38px;
  70. --f7-messagebar-font-size: 14px;
  71. /*
  72. --f7-messagebar-link-color: var(--f7-theme-color);
  73. */
  74. --f7-messagebar-border-color: transparent;
  75. --f7-messagebar-textarea-border-radius: 12px;
  76. --f7-messagebar-textarea-padding: 3px 10px;
  77. --f7-messagebar-textarea-height: 24px;
  78. --f7-messagebar-textarea-font-size: 13px;
  79. --f7-messagebar-textarea-line-height: 16px;
  80. --f7-messagebar-sheet-bg-color: #fff;
  81. --f7-messagebar-attachment-border-radius: 12px;
  82. --f7-messagebar-textarea-text-color: #000;
  83. --f7-messagebar-textarea-border: 1px solid #c8c8cd;
  84. --f7-messagebar-attachments-border-color: #c8c8cd;
  85. }
  86. .aurora .theme-dark,
  87. .aurora.theme-dark {
  88. --f7-messagebar-textarea-text-color: #fff;
  89. --f7-messagebar-textarea-border: 1px solid var(--f7-bars-border-color);
  90. --f7-messagebar-attachments-border-color: var(--f7-bars-border-color);
  91. }

Messages

  1. :root {
  2. --f7-message-text-header-text-color: inherit;
  3. --f7-message-text-header-opacity: 0.65;
  4. --f7-message-text-header-font-size: 12px;
  5. --f7-message-text-footer-text-color: inherit;
  6. --f7-message-text-footer-opacity: 0.65;
  7. --f7-message-text-footer-font-size: 12px;
  8. --f7-message-bubble-line-height: 1.2;
  9. --f7-message-header-font-size: 12px;
  10. --f7-message-footer-font-size: 11px;
  11. --f7-message-name-font-size: 12px;
  12. --f7-message-name-font-weight: inherit;
  13. --f7-message-avatar-border-radius: 50%;
  14. --f7-messages-title-font-weight: inherit;
  15. /*
  16. --f7-message-sent-bg-color: var(--f7-theme-color);
  17. */
  18. --f7-message-sent-text-color: #fff;
  19. --f7-messages-content-bg-color: #fff;
  20. --f7-message-typing-indicator-bg-color: #000;
  21. --f7-message-received-bg-color: #e5e5ea;
  22. --f7-message-received-text-color: #000;
  23. }
  24. :root .theme-dark,
  25. :root.theme-dark {
  26. --f7-messages-title-text-color: rgba(255, 255, 255, 0.54);
  27. --f7-message-header-text-color: rgba(255, 255, 255, 0.54);
  28. --f7-message-name-text-color: rgba(255, 255, 255, 0.54);
  29. --f7-message-footer-text-color: rgba(255, 255, 255, 0.54);
  30. --f7-messages-content-bg-color: transparent;
  31. --f7-message-received-bg-color: #252525;
  32. --f7-message-received-text-color: #fff;
  33. --f7-message-typing-indicator-bg-color: #fff;
  34. }
  35. .ios {
  36. --f7-messages-title-text-color: rgba(0, 0, 0, 0.45);
  37. --f7-messages-title-font-size: 11px;
  38. --f7-message-header-text-color: rgba(0, 0, 0, 0.45);
  39. --f7-message-footer-text-color: rgba(0, 0, 0, 0.45);
  40. --f7-message-name-text-color: rgba(0, 0, 0, 0.45);
  41. --f7-message-avatar-size: 29px;
  42. --f7-message-margin: 10px;
  43. --f7-message-bubble-min-height: 32px;
  44. --f7-message-bubble-font-size: 17px;
  45. --f7-message-bubble-border-radius: 16px;
  46. --f7-message-bubble-padding-vertical: 6px;
  47. --f7-message-bubble-padding-horizontal: 16px;
  48. --f7-message-typing-indicator-opacity: 0.35;
  49. }
  50. .md {
  51. --f7-messages-title-font-size: 12px;
  52. --f7-message-avatar-size: 32px;
  53. --f7-message-margin: 16px;
  54. --f7-message-bubble-min-height: 32px;
  55. --f7-message-bubble-font-size: 16px;
  56. --f7-message-bubble-border-radius: 4px;
  57. --f7-message-bubble-padding-vertical: 6px;
  58. --f7-message-bubble-padding-horizontal: 8px;
  59. --f7-message-typing-indicator-opacity: 0.6;
  60. --f7-messages-title-text-color: rgba(0, 0, 0, 0.51);
  61. --f7-message-header-text-color: rgba(0, 0, 0, 0.51);
  62. --f7-message-footer-text-color: rgba(0, 0, 0, 0.51);
  63. --f7-message-name-text-color: rgba(0, 0, 0, 0.51);
  64. }
  65. .aurora {
  66. --f7-messages-title-font-size: 12px;
  67. --f7-message-avatar-size: 24px;
  68. --f7-message-margin: 10px;
  69. --f7-message-bubble-min-height: 28px;
  70. --f7-message-bubble-font-size: 13px;
  71. --f7-message-bubble-line-height: 1.4;
  72. --f7-message-bubble-border-radius: 14px;
  73. --f7-message-bubble-padding-vertical: 5px;
  74. --f7-message-bubble-padding-horizontal: 10px;
  75. --f7-message-typing-indicator-opacity: 0.5;
  76. --f7-messages-title-text-color: rgba(0, 0, 0, 0.51);
  77. --f7-message-header-text-color: rgba(0, 0, 0, 0.51);
  78. --f7-message-footer-text-color: rgba(0, 0, 0, 0.51);
  79. --f7-message-name-text-color: rgba(0, 0, 0, 0.51);
  80. }

Navbar

  1. :root {
  2. /*
  3. --f7-navbar-bg-color: var(--f7-bars-bg-color);
  4. --f7-navbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
  5. --f7-navbar-bg-image: var(--f7-bars-bg-image);
  6. --f7-navbar-border-color: var(--f7-bars-border-color);
  7. --f7-navbar-link-color: var(--f7-bars-link-color);
  8. --f7-navbar-text-color: var(--f7-bars-text-color);
  9. */
  10. --f7-navbar-hide-show-transition-duration: 400ms;
  11. --f7-navbar-title-line-height: 1.2;
  12. --f7-navbar-title-font-size: inherit;
  13. --f7-navbar-subtitle-text-align: inherit;
  14. --f7-navbar-large-title-line-height: 1.2;
  15. --f7-navbar-large-title-text-color: inherit;
  16. --f7-navbar-large-title-padding-left: 16px;
  17. --f7-navbar-large-title-padding-right: 16px;
  18. }
  19. .ios {
  20. --f7-navbar-height: 44px;
  21. --f7-navbar-tablet-height: 44px;
  22. --f7-navbar-font-size: 17px;
  23. --f7-navbar-inner-padding-left: 8px;
  24. --f7-navbar-inner-padding-right: 8px;
  25. --f7-navbar-title-font-weight: 600;
  26. --f7-navbar-title-margin-left: 0;
  27. --f7-navbar-title-margin-right: 0;
  28. --f7-navbar-title-text-align: center;
  29. --f7-navbar-subtitle-font-size: 10px;
  30. --f7-navbar-subtitle-line-height: 1;
  31. --f7-navbar-shadow-image: none;
  32. --f7-navbar-large-title-height: 52px;
  33. --f7-navbar-large-title-font-size: 34px;
  34. --f7-navbar-large-title-font-weight: 700;
  35. --f7-navbar-large-title-letter-spacing: -0.03em;
  36. --f7-navbar-large-title-padding-vertical: 6px;
  37. /*
  38. --f7-navbar-link-height: var(--f7-navbar-height);
  39. --f7-navbar-link-line-height: var(--f7-navbar-height);
  40. */
  41. --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.55);
  42. }
  43. .ios .theme-dark,
  44. .ios.theme-dark {
  45. --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.55);
  46. }
  47. .md {
  48. --f7-navbar-height: 56px;
  49. --f7-navbar-tablet-height: 64px;
  50. --f7-navbar-font-size: 20px;
  51. --f7-navbar-inner-padding-left: 0px;
  52. --f7-navbar-inner-padding-right: 0px;
  53. --f7-navbar-title-font-weight: 500;
  54. --f7-navbar-title-margin-left: 16px;
  55. --f7-navbar-title-margin-right: 16px;
  56. --f7-navbar-title-text-align: left;
  57. --f7-navbar-subtitle-font-size: 14px;
  58. --f7-navbar-subtitle-line-height: 1.2;
  59. --f7-navbar-shadow-image: var(--f7-bars-shadow-bottom-image);
  60. --f7-navbar-large-title-font-size: 34px;
  61. --f7-navbar-large-title-height: 56px;
  62. --f7-navbar-large-title-font-weight: 500;
  63. --f7-navbar-large-title-letter-spacing: 0;
  64. --f7-navbar-large-title-padding-vertical: 8px;
  65. /*
  66. --f7-navbar-link-height: var(--f7-navbar-height);
  67. --f7-navbar-link-line-height: var(--f7-navbar-height);
  68. */
  69. --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.85);
  70. }
  71. .md .theme-dark,
  72. .md.theme-dark {
  73. --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.85);
  74. }
  75. .aurora {
  76. --f7-navbar-height: 38px;
  77. --f7-navbar-tablet-height: 38px;
  78. --f7-navbar-font-size: 14px;
  79. --f7-navbar-inner-padding-left: 16px;
  80. --f7-navbar-inner-padding-right: 16px;
  81. --f7-navbar-title-font-weight: 600;
  82. --f7-navbar-title-margin-left: 0;
  83. --f7-navbar-title-margin-right: 0;
  84. --f7-navbar-title-text-align: center;
  85. --f7-navbar-subtitle-font-size: 12px;
  86. --f7-navbar-subtitle-line-height: 1;
  87. --f7-navbar-shadow-image: none;
  88. --f7-navbar-large-title-height: 38px;
  89. --f7-navbar-large-title-font-size: 26px;
  90. --f7-navbar-large-title-font-weight: bold;
  91. --f7-navbar-large-title-letter-spacing: -0.03em;
  92. --f7-navbar-large-title-padding-vertical: 4px;
  93. --f7-navbar-link-height: auto;
  94. --f7-navbar-link-line-height: inherit;
  95. --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.6);
  96. }
  97. .aurora .theme-dark,
  98. .aurora.theme-dark {
  99. --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.5);
  100. }

Notification

:root {
  --f7-notification-max-width: 568px;
  --f7-notification-subtitle-text-transform: none;
  --f7-notification-subtitle-line-height: 1.35;
  --f7-notification-text-text-transform: none;
  --f7-notification-text-font-weight: 400;
}
:root .theme-dark,
:root.theme-dark {
  --f7-notification-subtitle-color: #fff;
}
.ios {
  --f7-notification-margin: 8px;
  --f7-notification-padding: 10px;
  --f7-notification-border-radius: 12px;
  --f7-notification-box-shadow: 0px 5px 25px -10px rgba(0, 0, 0, 0.7);
  --f7-notification-icon-size: 20px;
  --f7-notification-title-font-size: 13px;
  --f7-notification-title-text-transform: uppercase;
  --f7-notification-title-line-height: 1.4;
  --f7-notification-title-font-weight: 400;
  --f7-notification-title-letter-spacing: 0.02em;
  --f7-notification-title-right-font-size: 13px;
  --f7-notification-subtitle-font-size: 15px;
  --f7-notification-subtitle-font-weight: 600;
  --f7-notification-text-font-size: 15px;
  --f7-notification-text-line-height: 1.2;
  --f7-notification-bg-color: rgba(250, 250, 250, 0.95);
  --f7-notification-bg-color-rgb: 255, 255, 255;
  --f7-notification-title-color: #000;
  --f7-notification-title-right-color: rgba(0, 0, 0, 0.45);
  --f7-notification-subtitle-color: #000;
  --f7-notification-text-color: #000;
}
.ios .theme-dark,
.ios.theme-dark {
  --f7-notification-bg-color: rgba(30, 30, 30, 0.95);
  --f7-notification-bg-color-rgb: 30, 30, 30;
  --f7-notification-title-color: #fff;
  --f7-notification-text-color: #fff;
  --f7-notification-title-right-color: rgba(255, 255, 255, 0.55);
}
.md {
  --f7-notification-margin: 0px;
  --f7-notification-padding: 16px;
  --f7-notification-border-radius: 0px;
  --f7-notification-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.24);
  --f7-notification-icon-size: 16px;
  --f7-notification-title-color: var(--f7-theme-color);
  --f7-notification-title-font-size: 12px;
  --f7-notification-title-text-transform: none;
  --f7-notification-title-line-height: 1;
  --f7-notification-title-font-weight: 400;
  --f7-notification-title-right-font-size: 12px;
  --f7-notification-subtitle-font-size: 14px;
  --f7-notification-subtitle-font-weight: 400;
  --f7-notification-text-font-size: 14px;
  --f7-notification-text-line-height: 1.35;
  --f7-notification-bg-color: #fff;
  --f7-notification-title-right-color: rgba(0, 0, 0, 0.54);
  --f7-notification-subtitle-color: #212121;
  --f7-notification-text-color: rgba(0, 0, 0, 0.54);
}
.md .theme-dark,
.md.theme-dark {
  --f7-notification-bg-color: #242424;
  --f7-notification-title-right-color: rgba(255, 255, 255, 0.54);
  --f7-notification-text-color: rgba(255, 255, 255, 0.54);
}
.aurora {
  --f7-notification-margin: 10px;
  --f7-notification-padding: 10px;
  --f7-notification-border-radius: 4px;
  --f7-notification-box-shadow: 0px 5px 25px -10px rgba(0, 0, 0, 0.7);
  --f7-notification-icon-size: 18px;
  --f7-notification-title-font-size: 13px;
  --f7-notification-title-text-transform: uppercase;
  --f7-notification-title-line-height: 1.4;
  --f7-notification-title-font-weight: 500;
  --f7-notification-title-letter-spacing: 0.02em;
  --f7-notification-title-right-font-size: 13px;
  --f7-notification-subtitle-font-size: 12px;
  --f7-notification-subtitle-font-weight: 600;
  --f7-notification-text-font-size: 12px;
  --f7-notification-text-line-height: 1.2;
  --f7-notification-bg-color: #fff;
  --f7-notification-title-color: #000;
  --f7-notification-title-right-color: rgba(255, 255, 255, 0.6);
  --f7-notification-subtitle-color: #000;
  --f7-notification-text-color: #000;
}
.aurora .theme-dark,
.aurora.theme-dark {
  --f7-notification-bg-color: #242424;
  --f7-notification-title-color: #fff;
  --f7-notification-text-color: #fff;
  --f7-notification-title-right-color: rgba(255, 255, 255, 0.54);
}

Page

:root {
  --f7-page-master-width: 320px;
  --f7-page-master-border-color: rgba(0, 0, 0, 0.1);
  --f7-page-master-border-width: 1px;
  --f7-page-swipeback-transition-duration: 300ms;
  --f7-page-parallax-transition-duration: 500ms;
  --f7-page-cover-transition-duration: 450ms;
  --f7-page-dive-transition-duration: 500ms;
  --f7-page-fade-transition-duration: 500ms;
  --f7-page-flip-transition-duration: 700ms;
  --f7-page-push-transition-duration: 500ms;
  /*
  --f7-page-content-extra-padding-top: 0px;
  --f7-page-content-extra-padding-bottom: 0px;
  */
}
.ios {
  --f7-page-transition-duration: 400ms;
  --f7-page-bg-color: #efeff4;
}
.ios .theme-dark,
.ios.theme-dark {
  --f7-page-bg-color: #000;
}
.md {
  --f7-page-transition-duration: 250ms;
  --f7-page-bg-color: #fff;
}
.md .theme-dark,
.md.theme-dark {
  --f7-page-bg-color: #121212;
}
.aurora {
  --f7-page-transition-duration: 400ms;
  --f7-page-bg-color: #f3f3f3;
}
.aurora .theme-dark,
.aurora.theme-dark {
  --f7-page-bg-color: #121212;
}
.theme-dark {
  --f7-page-master-border-color: rgba(255, 255, 255, 0.1);
}

Panel

:root {
  --f7-panel-width: 260px;
  /*
  --f7-panel-left-width: var(--f7-panel-width);
  --f7-panel-right-width: var(--f7-panel-width);
  --f7-panel-left-collapsed-width: var(--f7-panel-collapsed-width);
  --f7-panel-right-collapsed-width: var(--f7-panel-collapsed-width);
  */
  --f7-panel-bg-color: #fff;
}
.ios {
  --f7-panel-collapsed-width: 58px;
  --f7-panel-backdrop-bg-color: rgba(0, 0, 0, 0);
  --f7-panel-transition-duration: 400ms;
  --f7-panel-shadow: transparent;
}
.md {
  --f7-panel-collapsed-width: 60px;
  --f7-panel-backdrop-bg-color: rgba(0, 0, 0, 0.3);
  --f7-panel-transition-duration: 300ms;
  --f7-panel-shadow: rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 0.07) 30%,
    rgba(0, 0, 0, 0.03) 40%,
    rgba(0, 0, 0, 0) 60%,
    rgba(0, 0, 0, 0) 100%;
}
.aurora {
  --f7-panel-collapsed-width: 44px;
  --f7-panel-backdrop-bg-color: rgba(0, 0, 0, 0.2);
  --f7-panel-transition-duration: 400ms;
  --f7-panel-shadow: transparent;
}

Photo Browser

:root {
  --f7-photobrowser-bg-color: #fff;
  --f7-photobrowser-bars-bg-image: none;
  /*
  --f7-photobrowser-bars-bg-color: rgba(var(--f7-bars-bg-color-rgb), 0.95);
  --f7-photobrowser-bars-text-color: var(--f7-bars-text-color);
  --f7-photobrowser-bars-link-color: var(--f7-bars-link-color);
  */
  --f7-photobrowser-caption-font-size: 14px;
  --f7-photobrowser-caption-light-text-color: #000;
  --f7-photobrowser-caption-light-bg-color: rgba(255, 255, 255, 0.8);
  --f7-photobrowser-caption-dark-text-color: #fff;
  --f7-photobrowser-caption-dark-bg-color: rgba(0, 0, 0, 0.8);
  --f7-photobrowser-exposed-bg-color: #000;
  --f7-photobrowser-dark-bg-color: #000;
  --f7-photobrowser-dark-bars-bg-color: rgba(27, 27, 27, 0.8);
  --f7-photobrowser-dark-bars-text-color: #fff;
  --f7-photobrowser-dark-bars-link-color: #fff;
}

Picker

:root {
  --f7-picker-height: 260px;
  --f7-picker-inline-height: 200px;
  --f7-picker-popover-height: 200px;
  --f7-picker-popover-width: 280px;
  --f7-picker-landscape-height: 200px;
  --f7-picker-item-height: 36px;
  --f7-picker-item-selected-text-color: #000;
}
:root .theme-dark,
:root.theme-dark {
  --f7-picker-item-selected-text-color: #fff;
}
.ios {
  --f7-picker-column-font-size: 20px;
  --f7-picker-sheet-bg-color: #cfd5da;
  --f7-picker-divider-text-color: #000;
  --f7-picker-item-text-color: rgba(0, 0, 0, 0.45);
  --f7-picker-item-selected-border-color: rgba(0, 0, 0, 0.22);
}
.ios .theme-dark,
.ios.theme-dark {
  --f7-picker-sheet-bg-color: #1c1c1d;
  --f7-picker-divider-text-color: #fff;
  --f7-picker-item-text-color: rgba(255, 255, 255, 0.55);
  --f7-picker-item-selected-border-color: rgba(255, 255, 255, 0.06);
}
.md {
  /*
  --f7-picker-sheet-bg-color: var(--f7-sheet-bg-color);
  */
  --f7-picker-column-font-size: 20px;
  --f7-picker-divider-text-color: rgba(0, 0, 0, 0.87);
  --f7-picker-item-text-color: rgba(0, 0, 0, 0.54);
  --f7-picker-item-selected-border-color: rgba(0, 0, 0, 0.15);
}
.md .theme-dark,
.md.theme-dark {
  --f7-picker-item-text-color: rgba(255, 255, 255, 0.54);
  --f7-picker-divider-text-color: rgba(255, 255, 255, 0.87);
  --f7-picker-item-selected-border-color: rgba(255, 255, 255, 0.15);
}
.aurora {
  /*
  --f7-picker-sheet-bg-color: var(--f7-sheet-bg-color);
  */
  --f7-picker-column-font-size: 16px;
  --f7-picker-item-height: 28px;
  --f7-picker-item-text-color: #888;
  --f7-picker-divider-text-color: #000;
  --f7-picker-item-selected-border-color: rgba(0, 0, 0, 0.12);
}
.aurora .theme-dark,
.aurora.theme-dark {
  --f7-picker-divider-text-color: #fff;
  --f7-picker-item-selected-border-color: rgba(255, 255, 255, 0.06);
}

Popover

:root {
  --f7-popover-width: 260px;
}
.ios {
  --f7-popover-border-radius: 13px;
  --f7-popover-box-shadow: none;
  --f7-popover-actions-icon-size: 28px;
  --f7-popover-bg-color: rgba(255, 255, 255, 0.95);
  --f7-popover-actions-label-text-color: rgba(0, 0, 0, 0.45);
}
.ios .theme-dark,
.ios.theme-dark {
  --f7-popover-bg-color: rgba(30, 30, 30, 0.95);
  --f7-popover-actions-label-text-color: rgba(255, 255, 255, 0.55);
}
.md {
  --f7-popover-border-radius: 4px;
  --f7-popover-box-shadow: var(--f7-elevation-8);
  --f7-popover-actions-icon-size: 24px;
  --f7-popover-bg-color: #fff;
  --f7-popover-actions-label-text-color: rgba(0, 0, 0, 0.54);
}
.md .theme-dark,
.md.theme-dark {
  --f7-popover-bg-color: #1c1c1d;
  --f7-popover-actions-label-text-color: rgba(255, 255, 255, 0.54);
}
.aurora {
  --f7-popover-width: 200px;
  --f7-popover-border-radius: 4px;
  --f7-popover-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1), 0 5px 11px 0 rgba(0,0,0,0.28);
  --f7-popover-actions-icon-size: 24px;
  --f7-popover-bg-color: #fff;
  --f7-popover-actions-label-text-color: rgba(0, 0, 0, 0.6);
}
.aurora .theme-dark,
.aurora.theme-dark {
  --f7-popover-bg-color: #1c1c1d;
  --f7-popover-actions-label-text-color: rgba(255, 255, 255, 0.6);
}

Popup

:root {
  --f7-popup-border-radius: 0px;
  --f7-popup-tablet-width: 630px;
  --f7-popup-tablet-height: 630px;
  --f7-popup-transition-duration: 400ms;
  --f7-popup-push-border-radius: 10px;
  --f7-popup-push-offset: var(--f7-safe-area-top);
  /*
  --f7-popup-tablet-border-radius: var(--f7-popup-border-radius);
  */
}
.ios {
  --f7-popup-tablet-border-radius: 5px;
  --f7-popup-box-shadow: none;
}
.md {
  --f7-popup-tablet-border-radius: 4px;
  --f7-popup-box-shadow: 0px 20px 44px rgba(0, 0, 0, 0.5);
}
.aurora {
  --f7-popup-tablet-border-radius: 4px;
  --f7-popup-box-shadow: 0px 20px 44px rgba(0, 0, 0, 0.5);
}

Preloader

:root {
  --f7-preloader-modal-padding: 8px;
  --f7-preloader-modal-bg-color: rgba(0, 0, 0, 0.8);
}
.ios {
  --f7-preloader-color: #6c6c6c;
  --f7-preloader-size: 20px;
  --f7-preloader-modal-preloader-size: 34px;
  --f7-preloader-modal-border-radius: 5px;
}
.md {
  --f7-preloader-color: #757575;
  --f7-preloader-size: 32px;
  --f7-preloader-modal-preloader-size: 32px;
  --f7-preloader-modal-border-radius: 4px;
}
.aurora {
  --f7-preloader-color: #757575;
  --f7-preloader-size: 24px;
  --f7-preloader-modal-preloader-size: 24px;
  --f7-preloader-modal-border-radius: 4px;
}

Progressbar

:root {
  /*
  --f7-progressbar-progress-color: var(--f7-theme-color);
  */
}
.ios {
  --f7-progressbar-height: 2px;
  --f7-progressbar-border-radius: 2px;
  --f7-progressbar-bg-color: rgba(0, 0, 0, 0.3);
}
.ios .theme-dark,
.ios.theme-dark {
  --f7-progressbar-bg-color: rgba(255, 255, 255, 0.3);
}
.md {
  /*
  --f7-progressbar-bg-color: rgba(var(--f7-theme-color-rgb), 0.5);
  */
  --f7-progressbar-height: 4px;
  --f7-progressbar-border-radius: 0px;
}
.aurora {
  --f7-progressbar-height: 6px;
  --f7-progressbar-border-radius: 3px;
  --f7-progressbar-bg-color: #dbdbdb;
}
.aurora .theme-dark,
.aurora.theme-dark {
  --f7-progressbar-bg-color: #444;
}

Pull To Refresh

.ios {
  --f7-ptr-preloader-size: 28px;
  --f7-ptr-size: 44px;
}
.md {
  --f7-ptr-preloader-size: 22px;
  --f7-ptr-size: 40px;
}
.aurora {
  --f7-ptr-preloader-size: 20px;
  --f7-ptr-size: 38px;
}

Radio

:root {
  /*
  --f7-radio-active-color: var(--f7-theme-color);
  */
  --f7-radio-border-radius: 50%;
}
:root .theme-dark,
:root.theme-dark {
  --f7-radio-inactive-color: rgba(255, 255, 255, 0.3);
}
.ios {
  --f7-radio-size: 22px;
  --f7-radio-border-width: 1px;
  --f7-radio-extra-margin: 0px;
  --f7-radio-inactive-color: #c7c7cc;
}
.md {
  --f7-radio-size: 20px;
  --f7-radio-border-width: 2px;
  --f7-radio-extra-margin: 22px;
  --f7-radio-inactive-color: #6d6d6d;
}
.aurora {
  --f7-radio-size: 16px;
  --f7-radio-border-width: 1px;
  --f7-radio-extra-margin: 0px;
  --f7-radio-inactive-color: #888;
}

Range Slider

:root {
  /*
  --f7-range-bar-active-bg-color: var(--f7-theme-color);
  --f7-range-scale-bg-color: var(--f7-range-bar-bg-color);
  --f7-range-scale-substep-bg-color: var(--f7-range-bar-bg-color);
  */
  --f7-range-scale-step-height: 5px;
  --f7-range-scale-text-color: #666;
  --f7-range-scale-substep-width: 1px;
  --f7-range-scale-substep-height: 4px;
}
.ios {
  --f7-range-size: 28px;
  --f7-range-bar-bg-color: #b7b8b7;
  --f7-range-bar-size: 1px;
  --f7-range-bar-border-radius: 2px;
  --f7-range-knob-size: 28px;
  --f7-range-knob-color: #fff;
  --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  --f7-range-label-size: 20px;
  --f7-range-label-text-color: #000;
  --f7-range-label-bg-color: #fff;
  --f7-range-label-font-size: 12px;
  --f7-range-label-font-weight: normal;
  --f7-range-label-border-radius: 5px;
  --f7-range-label-padding: 0px;
  --f7-range-scale-step-width: 1px;
  --f7-range-scale-font-size: 12px;
  --f7-range-scale-font-weight: 400;
  --f7-range-scale-label-offset: 4px;
}
.md {
  --f7-range-size: 20px;
  --f7-range-bar-bg-color: #b9b9b9;
  --f7-range-bar-size: 2px;
  --f7-range-bar-border-radius: 0px;
  --f7-range-knob-size: 12px;
  /*
  --f7-range-knob-color: var(--f7-theme-color);
  */
  --f7-range-knob-box-shadow: none;
  --f7-range-label-size: 26px;
  --f7-range-label-font-weight: normal;
  --f7-range-label-text-color: #fff;
  /*
  --f7-range-label-bg-color: var(--f7-theme-color);
  */
  --f7-range-label-font-size: 10px;
  --f7-range-label-border-radius: 50%;
  --f7-range-label-padding: 0px;
  --f7-range-scale-step-width: 2px;
  --f7-range-scale-font-size: 12px;
  --f7-range-scale-font-weight: 400;
  --f7-range-scale-label-offset: 4px;
}
.aurora {
  --f7-range-size: 20px;
  --f7-range-bar-bg-color: #c7c7c7;
  --f7-range-bar-size: 2px;
  --f7-range-bar-border-radius: 2px;
  --f7-range-knob-size: 16px;
  /*
  --f7-range-knob-color: var(--f7-theme-color);
  */
  --f7-range-knob-box-shadow: none;
  --f7-range-label-size: 20px;
  --f7-range-label-text-color: #fff;
  /*
  --f7-range-label-bg-color: var(--f7-theme-color);
  */
  --f7-range-label-font-size: 10px;
  --f7-range-label-font-weight: 600;
  --f7-range-label-border-radius: 4px;
  --f7-range-label-padding: 0px 4px;
  --f7-range-scale-step-width: 2px;
  --f7-range-scale-font-size: 11px;
  --f7-range-scale-font-weight: 500;
  --f7-range-scale-label-offset: 2px;
}

Searchbar

:root {
  /*
  --f7-searchbar-link-color: var(--f7-bars-link-color);
  --f7-searchbar-inline-input-font-size: var(--f7-searchbar-input-font-size);
  --f7-searchbar-inline-input-height: var(--f7-searchbar-input-height);
  */
  --f7-searchbar-input-border-width: 0px;
  --f7-searchbar-input-border-color: transparent;
  --f7-searchbar-input-text-color: #000;
  --f7-searchbar-placeholder-color: rgba(0, 0, 0, 0.4);
}
:root .theme-dark,
:root.theme-dark {
  --f7-searchbar-input-text-color: #fff;
  --f7-searchbar-placeholder-color: rgba(255, 255, 255, 0.4);
}
.ios {
  /*
  --f7-searchbar-bg-image: var(--f7-bars-bg-image);
  --f7-searchbar-bg-color: var(--f7-bars-bg-color);
  --f7-searchbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
  --f7-searchbar-border-color: var(--f7-bars-border-color);
  */
  --f7-searchbar-height: 44px;
  --f7-searchbar-inner-padding-left: 8px;
  --f7-searchbar-inner-padding-right: 8px;
  /*
  --f7-searchbar-link-color: var(--f7-bars-link-color, var(--f7-theme-color));
  */
  --f7-searchbar-input-font-size: 17px;
  --f7-searchbar-input-border-radius: 8px;
  --f7-searchbar-input-height: 32px;
  --f7-searchbar-input-padding-horizontal: 28px;
  /*
  --f7-searchbar-inline-input-padding-horizontal: var(--f7-searchbar-input-padding-horizontal);
  --f7-searchbar-input-clear-button-color: var(--f7-input-clear-button-color);
  */
  --f7-searchbar-backdrop-bg-color: rgba(0, 0, 0, 0.4);
  --f7-searchbar-shadow-image: none;
  --f7-searchbar-in-page-content-margin: 0px;
  --f7-searchbar-in-page-content-box-shadow: none;
  --f7-searchbar-in-page-content-border-radius: 0;
  --f7-searchbar-in-page-content-input-border-radius: 0;
  --f7-searchbar-search-icon-color: rgba(0, 0, 0, 0.4);
  --f7-searchbar-input-bg-color: #e4e4e4;
}
.ios .theme-dark,
.ios.theme-dark {
  --f7-searchbar-search-icon-color: rgba(255, 255, 255, 0.4);
  --f7-searchbar-input-bg-color: #2a2a2a;
}
.md {
  --f7-searchbar-border-color: transparent;
  --f7-searchbar-height: 48px;
  --f7-searchbar-inner-padding-left: 0px;
  --f7-searchbar-inner-padding-right: 0px;
  --f7-searchbar-link-color: #737373;
  --f7-searchbar-search-icon-color: #737373;
  --f7-searchbar-input-font-size: 20px;
  --f7-searchbar-input-border-radius: 0px;
  --f7-searchbar-input-height: 100%;
  --f7-searchbar-input-padding-horizontal: 48px;
  --f7-searchbar-inline-input-padding-horizontal: 24px;
  --f7-searchbar-input-clear-button-color: #737373;
  --f7-searchbar-backdrop-bg-color: rgba(0, 0, 0, 0.25);
  --f7-searchbar-shadow-image: var(--f7-bars-shadow-bottom-image);
  --f7-searchbar-in-page-content-margin: 8px;
  --f7-searchbar-in-page-content-box-shadow: var(--f7-elevation-1);
  --f7-searchbar-in-page-content-border-radius: 4px;
  --f7-searchbar-in-page-content-input-border-radius: 4px;
  --f7-searchbar-bg-color: #fff;
  --f7-searchbar-input-bg-color: #fff;
}
.md .theme-dark,
.md.theme-dark {
  --f7-searchbar-bg-color: #202020;
  --f7-searchbar-input-bg-color: #202020;
}
.aurora {
  /*
  --f7-searchbar-bg-image: var(--f7-bars-bg-image);
  --f7-searchbar-bg-color: var(--f7-bars-bg-color);
  --f7-searchbar-border-color: var(--f7-bars-border-color);
  */
  --f7-searchbar-height: 38px;
  --f7-searchbar-inner-padding-left: 8px;
  --f7-searchbar-inner-padding-right: 8px;
  /*
  --f7-searchbar-link-color: var(--f7-bars-link-color, var(--f7-theme-color));
  */
  --f7-searchbar-input-font-size: 13px;
  --f7-searchbar-input-border-radius: 4px;
  --f7-searchbar-input-height: 24px;
  --f7-searchbar-input-padding-horizontal: 24px;
  /*
  --f7-searchbar-inline-input-padding-horizontal: var(--f7-searchbar-input-padding-horizontal;
  --f7-searchbar-input-clear-button-color: var(--f7-input-clear-button-color);
  */
  --f7-searchbar-backdrop-bg-color: rgba(0, 0, 0, 0.4);
  --f7-searchbar-shadow-image: none;
  --f7-searchbar-in-page-content-margin: 0px;
  --f7-searchbar-in-page-content-box-shadow: none;
  --f7-searchbar-in-page-content-border-radius: 0;
  /*
  --f7-searchbar-in-page-content-input-border-radius: var(--f7-searchbar-input-border-radius);
  */
  --f7-searchbar-search-icon-color: rgba(0, 0, 0, 0.4);
  --f7-searchbar-input-bg-color: #fff;
}
.aurora .theme-dark,
.aurora.theme-dark {
  --f7-searchbar-input-bg-color: #333;
  --f7-searchbar-search-icon-color: rgba(255, 255, 255, 0.4);
}

Sheet

:root {
  --f7-sheet-height: 260px;
  --f7-sheet-border-color: transparent;
  --f7-sheet-transition-duration: 300ms;
  --f7-sheet-push-border-radius: 10px;
  --f7-sheet-push-offset: var(--f7-safe-area-top);
  --f7-sheet-bg-color: #fff;
}
:root .theme-dark,
:root.theme-dark {
  --f7-sheet-bg-color: #202020;
}
.ios {
  --f7-sheet-border-color: var(--f7-bars-border-color);
}

Skeleton

:root {
  --f7-skeleton-color: #ccc;
}
.theme-dark {
  --f7-skeleton-color: #515151;
}

Smart Select

:root {
  /*
  --f7-smart-select-sheet-bg: var(--f7-list-bg-color);
  --f7-smart-select-sheet-toolbar-border-color: var(--f7-bars-border-color);
  */
}

Sortable List

:root {
  --f7-sortable-handler-color: rgba(0, 0, 0, 0.22);
  --f7-sortable-sorting-item-bg-color: rgba(255, 255, 255, 0.8);
}
:root .theme-dark,
:root.theme-dark {
  --f7-sortable-sorting-item-bg-color: rgba(50, 50, 50, 0.8);
  --f7-sortable-handler-color: rgba(255, 255, 255, 0.55);
}
.ios {
  --f7-sortable-handler-width: 36px;
  --f7-sortable-sorting-item-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.6);
}
.md {
  --f7-sortable-handler-width: 42px;
  --f7-sortable-sorting-item-box-shadow: var(--f7-elevation-2);
}
.aurora {
  --f7-sortable-handler-width: 32px;
  --f7-sortable-sorting-item-box-shadow: var(--f7-elevation-2);
}

Stepper

:root {
  /*
  --f7-stepper-button-text-color: var(--f7-theme-color);
  --f7-stepper-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
  --f7-stepper-value-text-color: var(--f7-theme-color);
  */
  --f7-stepper-fill-button-text-color: #fff;
  /*
  --f7-stepper-fill-button-bg-color: var(--f7-theme-color);
  */
  --f7-stepper-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0,0,0,0.24);
  --f7-stepper-value-font-weight: 500;
  --f7-stepper-border-width: 2px;
}
.ios {
  --f7-stepper-height: 28px;
  --f7-stepper-border-radius: 5px;
  /*
  --f7-stepper-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
  --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-tint);
  */
  --f7-stepper-large-height: 44px;
  --f7-stepper-small-height: 26px;
  --f7-stepper-small-border-width: 2px;
  --f7-stepper-value-font-size: 17px;
}
.md {
  --f7-stepper-height: 36px;
  --f7-stepper-border-radius: 4px;
  /*
  --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-shade);
  */
  --f7-stepper-large-height: 48px;
  --f7-stepper-small-border-width: 2px;
  --f7-stepper-small-height: 28px;
  --f7-stepper-value-font-size: 14px;
  --f7-stepper-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
}
.md .theme-dark,
.md.theme-dark {
  --f7-stepper-button-pressed-bg-color: rgba(255, 255, 255, 0.1);
}
.aurora {
  /*
  --f7-stepper-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07);
  --f7-stepper-button-fill-hover-bg-color: var(--f7-theme-color-tint);
  */
  --f7-stepper-height: 28px;
  --f7-stepper-border-radius: 4px;
  /*
  --f7-stepper-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
  --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-shade);
  */
  --f7-stepper-large-height: 34px;
  --f7-stepper-small-border-width: 1px;
  --f7-stepper-small-height: 22px;
  --f7-stepper-value-font-size: 14px;
}

Subnavbar

:root {
  /*
  --f7-subnavbar-bg-image: var(--f7-bars-bg-image);
  --f7-subnavbar-bg-color: var(--f7-bars-bg-color);
  --f7-subnavbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
  --f7-subnavbar-border-color: var(--f7-bars-border-color);
  --f7-subnavbar-link-color: var(--f7-bars-link-color);
  --f7-subnavbar-text-color: var(--f7-bars-text-color);
  */
  --f7-subnavbar-title-line-height: 1.2;
}
.ios {
  --f7-subnavbar-height: 44px;
  --f7-subnavbar-inner-padding-left: 8px;
  --f7-subnavbar-inner-padding-right: 8px;
  --f7-subnavbar-title-font-size: 34px;
  --f7-subnavbar-title-font-weight: 700;
  --f7-subnavbar-title-letter-spacing: -0.03em;
  --f7-subnavbar-title-margin-left: 8px;
  --f7-subnavbar-shadow-image: none;
  /*
  --f7-subnavbar-link-height: var(--f7-subnavbar-height);
  --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
  */
}
.md {
  --f7-subnavbar-height: 48px;
  --f7-subnavbar-inner-padding-left: 16px;
  --f7-subnavbar-inner-padding-right: 16px;
  --f7-subnavbar-title-font-size: 20px;
  --f7-subnavbar-title-font-weight: 500;
  --f7-subnavbar-title-letter-spacing: 0;
  --f7-subnavbar-title-margin-left: 0px;
  --f7-subnavbar-shadow-image: var(--f7-bars-shadow-bottom-image);
  /*
  --f7-subnavbar-link-height: var(--f7-subnavbar-height);
  --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
  */
}
.aurora {
  --f7-subnavbar-height: 38px;
  --f7-subnavbar-inner-padding-left: 16px;
  --f7-subnavbar-inner-padding-right: 16px;
  --f7-subnavbar-title-font-size: 26px;
  --f7-subnavbar-title-font-weight: bold;
  --f7-subnavbar-title-letter-spacing: -0.03em;
  --f7-subnavbar-title-margin-left: 0px;
  --f7-subnavbar-shadow-image: none;
  --f7-subnavbar-link-height: auto;
  --f7-subnavbar-link-line-height: inherit;
}

Swipeout

:root {
  --f7-swipeout-button-text-color: #fff;
  --f7-swipeout-delete-button-bg-color: #ff3b30;
  --f7-swipeout-button-font-size: inherit;
  --f7-swipeout-button-font-weight: inherit;
  --f7-swipeout-button-bg-color: rgba(0, 0, 0, 0.22);
}
:root .theme-dark,
:root.theme-dark {
  --f7-swipeout-button-bg-color: rgba(255, 255, 255, 0.55);
}
.ios {
  --f7-swipeout-button-padding: 0 30px;
}
.md {
  --f7-swipeout-button-padding: 0 24px;
}
.aurora {
  --f7-swipeout-button-padding: 0 12px;
  --f7-swipeout-button-font-weight: 500;
}

Timeline

:root {
  --f7-timeline-inner-block-margin-vertical: 16px;
  --f7-timeline-divider-margin-horizontal: 16px;
  --f7-timeline-horizontal-date-height: 34px;
  --f7-timeline-year-height: 24px;
  --f7-timeline-year-font-weight: inherit;
  --f7-timeline-month-height: 24px;
  --f7-timeline-month-font-size: inherit;
  --f7-timeline-month-font-weight: inherit;
  --f7-timeline-item-text-font-weight: inherit;
  --f7-timeline-item-subtitle-font-weight: inherit;
  --f7-timeline-item-inner-bg-color: #fff;
}
:root .theme-dark,
:root.theme-dark {
  --f7-timeline-item-inner-bg-color: #1c1c1d;
  --f7-timeline-horizontal-item-border-color: rgba(255, 255, 255, 0.15);
  --f7-timeline-horizontal-item-date-border-color: rgba(255, 255, 255, 0.15);
}
.ios {
  --f7-timeline-padding-horizontal: 16px;
  --f7-timeline-margin-vertical: 35px;
  --f7-timeline-item-inner-border-radius: 7px;
  --f7-timeline-item-inner-box-shadow: none;
  --f7-timeline-item-time-font-size: 13px;
  --f7-timeline-item-title-font-size: 17px;
  --f7-timeline-item-title-line-height: inherit;
  --f7-timeline-item-title-font-weight: 600;
  --f7-timeline-item-subtitle-font-size: 15px;
  --f7-timeline-item-subtitle-line-height: inherit;
  --f7-timeline-item-text-font-size: inherit;
  --f7-timeline-item-text-color: inherit;
  --f7-timeline-item-text-line-height: inherit;
  --f7-timeline-year-font-size: 16px;
  --f7-timeline-horizontal-item-padding: 10px;
  --f7-timeline-horizontal-item-date-shadow-image: none;
  --f7-timeline-item-time-text-color: rgba(0, 0, 0, 0.45);
  --f7-timeline-horizontal-item-border-color: rgba(0, 0, 0, 0.22);
  --f7-timeline-horizontal-item-date-border-color: rgba(0, 0, 0, 0.22);
}
.ios .theme-dark,
.ios.theme-dark {
  --f7-timeline-item-time-text-color: rgba(255, 255, 255, 0.55);
}
.md {
  --f7-timeline-padding-horizontal: 16px;
  --f7-timeline-margin-vertical: 32px;
  --f7-timeline-item-inner-border-radius: 4px;
  --f7-timeline-item-inner-box-shadow: var(--f7-elevation-1);
  --f7-timeline-item-time-font-size: 13px;
  --f7-timeline-item-title-font-size: 16px;
  --f7-timeline-item-title-line-height: inherit;
  --f7-timeline-item-title-font-weight: 400;
  --f7-timeline-item-subtitle-font-size: inherit;
  --f7-timeline-item-subtitle-line-height: inherit;
  --f7-timeline-item-text-font-size: inherit;
  --f7-timeline-item-text-line-height: inherit;
  --f7-timeline-item-text-color: inherit;
  --f7-timeline-year-font-size: 16px;
  --f7-timeline-horizontal-item-padding: 12px;
  --f7-timeline-horizontal-item-date-shadow-image: var(--f7-bars-shadow-bottom-image);
  --f7-timeline-item-time-text-color: rgba(0, 0, 0, 0.54);
  --f7-timeline-horizontal-item-border-color: rgba(0, 0, 0, 0.12);
  --f7-timeline-horizontal-item-date-border-color: transparent;
}
.md .theme-dark,
.md.theme-dark {
  --f7-timeline-item-time-text-color: rgba(255, 255, 255, 0.54);
}
.aurora {
  --f7-timeline-padding-horizontal: 10px;
  --f7-timeline-margin-vertical: 15px;
  --f7-timeline-item-inner-border-radius: 4px;
  --f7-timeline-item-inner-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
  --f7-timeline-item-time-font-size: 12px;
  --f7-timeline-item-title-font-size: 14px;
  --f7-timeline-item-title-line-height: 1.3;
  --f7-timeline-item-title-font-weight: 600;
  --f7-timeline-item-subtitle-font-size: 14px;
  --f7-timeline-item-subtitle-line-height: 1.3;
  --f7-timeline-item-text-font-size: 12px;
  --f7-timeline-item-text-line-height: 1.33;
  --f7-timeline-year-font-size: 14px;
  --f7-timeline-year-font-weight: 500;
  --f7-timeline-horizontal-item-padding: 10px;
  --f7-timeline-horizontal-item-date-shadow-image: none;
  --f7-timeline-item-time-text-color: rgba(0, 0, 0, 0.5);
  --f7-timeline-item-text-color: rgba(0, 0, 0, 0.6);
  --f7-timeline-horizontal-item-border-color: rgba(0, 0, 0, 0.2);
  --f7-timeline-horizontal-item-date-border-color: rgba(0, 0, 0, 0.2);
}
.aurora .theme-dark,
.aurora.theme-dark {
  --f7-timeline-item-time-text-color: rgba(255, 255, 255, 0.54);
  --f7-timeline-item-text-color: rgba(255, 255, 255, 0.54);
}

Toast

:root {
  --f7-toast-text-color: #fff;
  --f7-toast-font-size: 14px;
  --f7-toast-icon-size: 48px;
}
.ios {
  --f7-toast-bg-color: rgba(0, 0, 0, 0.75);
  --f7-toast-bg-color-rgb: 0, 0, 0;
  --f7-toast-padding-horizontal: 16px;
  --f7-toast-padding-vertical: 12px;
  --f7-toast-border-radius: 8px;
  --f7-toast-button-min-width: 64px;
}
.md {
  --f7-toast-bg-color: #323232;
  --f7-toast-padding-horizontal: 24px;
  --f7-toast-padding-vertical: 14px;
  --f7-toast-border-radius: 4px;
  --f7-toast-button-min-width: 64px;
}
.aurora {
  --f7-toast-bg-color: rgba(0, 0, 0, 0.85);
  --f7-toast-padding-horizontal: 10px;
  --f7-toast-padding-vertical: 10px;
  --f7-toast-border-radius: 4px;
  --f7-toast-button-min-width: 32px;
}

Toggle

:root {
  --f7-toggle-handle-color: #fff;
}
:root .theme-dark,
:root.theme-dark {
  --f7-toggle-inactive-color: #555;
}
.ios {
  --f7-toggle-width: 52px;
  --f7-toggle-height: 32px;
  --f7-toggle-border-color: #e5e5e5;
  --f7-toggle-inactive-color: #fff;
}
.ios .theme-dark,
.ios.theme-dark {
  --f7-toggle-border-color: #555;
}
.md {
  --f7-toggle-width: 36px;
  --f7-toggle-height: 14px;
  --f7-toggle-inactive-color: #b0afaf;
}
.aurora {
  --f7-toggle-width: 40px;
  --f7-toggle-height: 20px;
  --f7-toggle-inactive-color: #aaa;
}

Toolbar

:root {
  /*
  --f7-toolbar-bg-color: var(--f7-bars-bg-color);
  --f7-toolbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
  --f7-toolbar-bg-image: var(--f7-bars-bg-image);
  --f7-toolbar-border-color: var(--f7-bars-border-color);
  --f7-toolbar-link-color: var(--f7-bars-link-color);
  --f7-toolbar-text-color: var(--f7-bars-text-color);
  --f7-tabbar-link-active-color: var(--f7-theme-color);
  */
  --f7-tabbar-link-active-bg-color: transparent;
  --f7-tabbar-label-text-transform: none;
  --f7-toolbar-hide-show-transition-duration: 400ms;
}
.ios {
  --f7-toolbar-height: 44px;
  --f7-toolbar-font-size: 17px;
  --f7-toolbar-inner-padding-left: 8px;
  --f7-toolbar-inner-padding-right: 8px;
  /*
  --f7-toolbar-link-height: var(--f7-toolbar-height);
  --f7-toolbar-link-line-height: var(--f7-toolbar-height);
  */
  --f7-tabbar-labels-height: 50px;
  --f7-tabbar-labels-tablet-height: 50px;
  --f7-toolbar-top-shadow-image: none;
  --f7-toolbar-bottom-shadow-image: none;
  --f7-tabbar-icon-size: 28px;
  --f7-tabbar-link-text-transform: none;
  --f7-tabbar-link-font-weight: 400;
  --f7-tabbar-link-letter-spacing: 0;
  --f7-tabbar-label-font-size: 12px;
  --f7-tabbar-label-tablet-font-size: 14px;
  --f7-tabbar-label-font-weight: 500;
  --f7-tabbar-label-letter-spacing: 0.01;
  --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.4);
}
.ios .theme-dark,
.ios.theme-dark {
  --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
}
.md {
  --f7-toolbar-height: 48px;
  --f7-toolbar-font-size: 14px;
  --f7-toolbar-inner-padding-left: 0px;
  --f7-toolbar-inner-padding-right: 0px;
  /*
  --f7-toolbar-link-height: var(--f7-toolbar-height);
  --f7-toolbar-link-line-height: var(--f7-toolbar-height);
  */
  --f7-tabbar-labels-height: 56px;
  --f7-tabbar-labels-tablet-height: 56px;
  /*
  --f7-tabbar-link-active-border-color: var(--f7-theme-color);
  */
  --f7-toolbar-top-shadow-image: var(--f7-bars-shadow-bottom-image);
  --f7-toolbar-bottom-shadow-image: var(--f7-bars-shadow-top-image);
  --f7-tabbar-icon-size: 24px;
  --f7-tabbar-link-text-transform: uppercase;
  --f7-tabbar-link-font-weight: 500;
  --f7-tabbar-link-letter-spacing: 0.03em;
  --f7-tabbar-label-font-size: 14px;
  --f7-tabbar-label-tablet-font-size: 14px;
  --f7-tabbar-label-font-weight: 400;
  --f7-tabbar-label-letter-spacing: 0;
  --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.54);
}
.md .theme-dark,
.md.theme-dark {
  --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
}
.aurora {
  --f7-toolbar-height: 38px;
  --f7-toolbar-font-size: 14px;
  --f7-toolbar-inner-padding-left: 16px;
  --f7-toolbar-inner-padding-right: 16px;
  --f7-toolbar-link-height: auto;
  --f7-toolbar-link-line-height: inherit;
  --f7-tabbar-labels-height: 44px;
  --f7-tabbar-labels-tablet-height: 44px;
  --f7-tabbar-link-inactive-bg-color: rgba(0, 0, 0, 0.2);
  --f7-toolbar-top-shadow-image: none;
  --f7-toolbar-bottom-shadow-image: none;
  --f7-tabbar-icon-size: 18px;
  --f7-tabbar-link-text-transform: none;
  --f7-tabbar-link-font-weight: 400;
  --f7-tabbar-link-letter-spacing: 0;
  --f7-tabbar-label-font-size: 12px;
  --f7-tabbar-label-tablet-font-size: 12px;
  --f7-tabbar-label-font-weight: 500;
  --f7-tabbar-label-letter-spacing: 0.01;
  --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.5);
}
.aurora .theme-dark,
.aurora.theme-dark {
  --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.5);
}

Tooltip

:root {
  --f7-tooltip-bg-color: rgba(0, 0, 0, 0.87);
  --f7-tooltip-text-color: #fff;
  --f7-tooltip-border-radius: 4px;
  --f7-tooltip-padding: 8px 16px;
  --f7-tooltip-font-size: 14px;
  --f7-tooltip-font-weight: 500;
  --f7-tooltip-desktop-padding: 6px 8px;
  --f7-tooltip-desktop-font-size: 12px;
}

Touch Ripple

:root {
  --f7-touch-ripple-black: rgba(0, 0, 0, 0.1);
  --f7-touch-ripple-white: rgba(255, 255, 255, 0.3);
  --f7-touch-ripple-color: var(--f7-touch-ripple-black);
}
.theme-dark {
  --f7-touch-ripple-color: var(--f7-touch-ripple-white);
}

Typography

:root {
  --f7-typography-padding: 16px;
  --f7-typography-margin: 16px;
}

← Hairlines

Dom7 →