CSS Variables Reference

    Color Theme Variables

    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. .ios {
    6.   --f7-actions-bg-color: rgba(255, 255, 255, 0.95);
    7.   --f7-actions-border-radius: 13px;
    8.   --f7-actions-button-border-color: rgba(0, 0, 0, 0.2);
    9.   /*
    10.   --f7-actions-button-text-color: var(--f7-theme-color);
    11.   */
    12.   --f7-actions-button-pressed-bg-color: rgba(230, 230, 230, 0.9);
    13.   --f7-actions-button-padding: 0px;
    14.   --f7-actions-button-text-align: center;
    15.   --f7-actions-button-height: 57px;
    16.   --f7-actions-button-height-landscape: 44px;
    17.   --f7-actions-button-font-size: 20px;
    18.   --f7-actions-button-icon-size: 28px;
    19.   --f7-actions-button-justify-content: center;
    20.   --f7-actions-label-padding: 8px 10px;
    21.   --f7-actions-label-text-color: #8a8a8a;
    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. }
    28. .md {
    29.   --f7-actions-bg-color: #fff;
    30.   --f7-actions-border-radius: 0px;
    31.   --f7-actions-button-border-color: transparent;
    32.   --f7-actions-button-text-color: rgba(0, 0, 0, 0.87);
    33.   --f7-actions-button-pressed-bg-color: #e5e5e5;
    34.   --f7-actions-button-padding: 0 16px;
    35.   --f7-actions-button-text-align: left;
    36.   --f7-actions-button-height: 48px;
    37.   --f7-actions-button-height-landscape: 48px;
    38.   --f7-actions-button-font-size: 16px;
    39.   --f7-actions-button-icon-size: 24px;
    40.   --f7-actions-button-justify-content: space-between;
    41.   --f7-actions-label-padding: 12px 16px;
    42.   --f7-actions-label-text-color: rgba(0, 0, 0, 0.54);
    43.   --f7-actions-label-font-size: 16px;
    44.   --f7-actions-label-justify-content: flex-start;
    45.   --f7-actions-group-border-color: #d2d2d6;
    46.   --f7-actions-group-margin: 0px;
    47.   --f7-actions-grid-button-icon-size: 48px;
    48. }
    49. .aurora {
    50.   --f7-actions-bg-color: #fff;
    51.   --f7-actions-border-radius: 4px;
    52.   --f7-actions-button-border-color: rgba(0, 0, 0, 0.12);
    53.   /*
    54.   --f7-actions-button-text-color: var(--f7-theme-color);
    55.   */
    56.   --f7-actions-button-pressed-bg-color: #e5e5e5;
    57.   --f7-actions-button-padding: 0 15px;
    58.   --f7-actions-button-text-align: center;
    59.   --f7-actions-button-height: 32px;
    60.   --f7-actions-button-height-landscape: 32px;
    61.   --f7-actions-button-font-size: 14px;
    62.   --f7-actions-button-icon-size: 18px;
    63.   --f7-actions-button-justify-content: space-between;
    64.   --f7-actions-label-padding: 10px 15px;
    65.   --f7-actions-label-text-color: rgba(0, 0, 0, 0.5);
    66.   --f7-actions-label-font-size: 12px;
    67.   --f7-actions-label-justify-content: center;
    68.   --f7-actions-group-border-color: rgba(0, 0, 0, 0.1);
    69.   --f7-actions-group-margin: 15px;
    70.   --f7-actions-grid-button-icon-size: 32px;
    71. }

    Autocomplete

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

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

    Button

    1. :root {
    2.   --f7-button-font-size: 14px;
    3.   --f7-button-min-width: 32px;
    4.   --f7-button-bg-color: transparent;
    5.   --f7-button-border-width: 0px;
    6.   /*
    7.   --f7-button-text-color: var(--f7-theme-color);
    8.   --f7-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
    9.   --f7-button-border-color: var(--f7-theme-color);
    10.   --f7-button-fill-text-color: #fff;
    11.   --f7-button-fill-bg-color: var(--f7-theme-color);
    12.   --f7-button-outline-border-color: var(--f7-theme-color);
    13.   */
    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. }
    18. .ios {
    19.   --f7-button-height: 29px;
    20.   --f7-button-padding-horizontal: 10px;
    21.   --f7-button-border-radius: 5px;
    22.   --f7-button-font-weight: 400;
    23.   --f7-button-letter-spacing: 0;
    24.   --f7-button-text-transform: none;
    25.   /*
    26.   --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
    27.   --f7-button-fill-pressed-bg-color: var(--f7-theme-color-tint);
    28.   */
    29.   --f7-button-outline-border-width: 1px;
    30.   --f7-button-large-height: 44px;
    31.   --f7-button-large-font-size: 17px;
    32.   --f7-button-large-font-weight: 400;
    33.   --f7-button-small-height: 26px;
    34.   --f7-button-small-font-size: 13px;
    35.   --f7-button-small-font-weight: 600;
    36.   --f7-button-small-text-transform: uppercase;
    37.   --f7-button-small-outline-border-width: 2px;
    38. }
    39. .md {
    40.   --f7-button-height: 36px;
    41.   --f7-button-padding-horizontal: 8px;
    42.   --f7-button-border-radius: 4px;
    43.   --f7-button-font-weight: 500;
    44.   --f7-button-letter-spacing: 0.03em;
    45.   --f7-button-text-transform: uppercase;
    46.   --f7-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
    47.   /*
    48.   --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
    49.   */
    50.   --f7-button-outline-border-width: 2px;
    51.   --f7-button-large-height: 48px;
    52.   --f7-button-large-font-size: 14px;
    53.   --f7-button-large-font-weight: 500;
    54.   --f7-button-small-height: 28px;
    55.   --f7-button-small-font-size: 12px;
    56.   --f7-button-small-font-weight: 500;
    57.   --f7-button-small-text-transform: uppercase;
    58.   --f7-button-small-outline-border-width: 2px;
    59. }
    60. .md .theme-dark,
    61. .md.theme-dark {
    62.   --f7-button-pressed-bg-color: rgba(255, 255, 255, 0.1);
    63. }
    64. .aurora {
    65.   /*
    66.   --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07);
    67.   --f7-button-fill-hover-bg-color: var(--f7-theme-color-tint);
    68.   */
    69.   --f7-button-font-size: 14px;
    70.   --f7-button-height: 28px;
    71.   --f7-button-min-width: 24px;
    72.   --f7-button-padding-horizontal: 10px;
    73.   --f7-button-border-radius: 4px;
    74.   --f7-button-font-weight: 400;
    75.   --f7-button-letter-spacing: 0.02;
    76.   --f7-button-text-transform: none;
    77.   /*
    78.   --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
    79.   --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
    80.   */
    81.   --f7-button-outline-border-width: 2px;
    82.   --f7-button-large-height: 34px;
    83.   --f7-button-large-font-size: 14px;
    84.   --f7-button-large-font-weight: 600;
    85.   --f7-button-small-height: 22px;
    86.   --f7-button-small-font-size: 12px;
    87.   --f7-button-small-font-weight: 600;
    88.   --f7-button-small-text-transform: none;
    89.   --f7-button-small-outline-border-width: 1px;
    90. }

    Calendar

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

    Card

    1. :root {
    2.   --f7-card-bg-color: #fff;
    3.   --f7-card-outline-border-color: rgba(0, 0, 0, 0.12);
    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-border-color: #e1e1e1;
    9.   --f7-card-footer-border-color: #e1e1e1;
    10.   --f7-card-footer-font-weight: 400;
    11.   --f7-card-footer-font-size: inherit;
    12.   --f7-card-expandable-bg-color: #fff;
    13.   --f7-card-expandable-font-size: 16px;
    14.   --f7-card-expandable-tablet-width: 670px;
    15.   --f7-card-expandable-tablet-height: 670px;
    16. }
    17. :root .theme-dark,
    18. :root.theme-dark {
    19.   --f7-card-bg-color: #1c1c1d;
    20.   --f7-card-expandable-bg-color: #1c1c1d;
    21.   --f7-card-outline-border-color: #282829;
    22.   --f7-card-header-border-color: #282829;
    23.   --f7-card-footer-border-color: #282829;
    24.   --f7-card-footer-text-color: #8E8E93;
    25. }
    26. .ios {
    27.   --f7-card-margin-horizontal: 10px;
    28.   --f7-card-margin-vertical: 10px;
    29.   --f7-card-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
    30.   --f7-card-content-padding-horizontal: 15px;
    31.   --f7-card-content-padding-vertical: 15px;
    32.   --f7-card-header-font-size: 17px;
    33.   --f7-card-header-padding-vertical: 10px;
    34.   --f7-card-header-padding-horizontal: 15px;
    35.   --f7-card-header-min-height: 44px;
    36.   --f7-card-footer-text-color: #6d6d72;
    37.   --f7-card-footer-padding-vertical: 10px;
    38.   --f7-card-footer-padding-horizontal: 15px;
    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-content-padding-horizontal: 16px;
    53.   --f7-card-content-padding-vertical: 16px;
    54.   --f7-card-header-font-size: 16px;
    55.   --f7-card-header-padding-vertical: 4px;
    56.   --f7-card-header-padding-horizontal: 16px;
    57.   --f7-card-header-min-height: 48px;
    58.   --f7-card-footer-text-color: #757575;
    59.   --f7-card-footer-padding-vertical: 4px;
    60.   --f7-card-footer-padding-horizontal: 16px;
    61.   --f7-card-footer-min-height: 48px;
    62.   --f7-card-expandable-margin-horizontal: 12px;
    63.   --f7-card-expandable-margin-vertical: 24px;
    64.   --f7-card-expandable-box-shadow: var(--f7-elevation-10);
    65.   --f7-card-expandable-border-radius: 8px;
    66.   --f7-card-expandable-tablet-border-radius: 4px;
    67.   --f7-card-expandable-header-font-size: 24px;
    68.   --f7-card-expandable-header-font-weight: 500;
    69. }
    70. .aurora {
    71.   --f7-card-margin-horizontal: 10px;
    72.   --f7-card-margin-vertical: 10px;
    73.   --f7-card-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
    74.   --f7-card-content-padding-horizontal: 15px;
    75.   --f7-card-content-padding-vertical: 15px;
    76.   --f7-card-header-font-size: 14px;
    77.   --f7-card-header-font-weight: bold;
    78.   --f7-card-header-padding-vertical: 10px;
    79.   --f7-card-header-padding-horizontal: 15px;
    80.   --f7-card-header-min-height: 38px;
    81.   --f7-card-footer-text-color: rgba(0, 0, 0, 0.6);
    82.   --f7-card-footer-padding-vertical: 10px;
    83.   --f7-card-footer-padding-horizontal: 15px;
    84.   --f7-card-footer-min-height: 38px;
    85.   --f7-card-expandable-margin-horizontal: 10px;
    86.   --f7-card-expandable-margin-vertical: 20px;
    87.   --f7-card-expandable-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
    88.   --f7-card-expandable-border-radius: 15px;
    89.   --f7-card-expandable-tablet-border-radius: 5px;
    90.   --f7-card-expandable-header-font-size: 27px;
    91.   --f7-card-expandable-header-font-weight: bold;
    92. }

    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-inactive-color: #c7c7cc;
    14.   --f7-checkbox-extra-margin: 0px;
    15. }
    16. .md {
    17.   --f7-checkbox-size: 18px;
    18.   --f7-checkbox-border-radius: 2px;
    19.   --f7-checkbox-border-width: 2px;
    20.   --f7-checkbox-inactive-color: #6d6d6d;
    21.   --f7-checkbox-extra-margin: 22px;
    22. }
    23. .aurora {
    24.   --f7-checkbox-size: 14px;
    25.   --f7-checkbox-border-radius: 2px;
    26.   --f7-checkbox-border-width: 1px;
    27.   --f7-checkbox-inactive-color: #888;
    28.   --f7-checkbox-extra-margin: 0px;
    29. }

    Chip

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

    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. .ios {
    7.   --f7-dialog-bg-color: rgba(255, 255, 255, 0.95);
    8.   --f7-dialog-box-shadow: none;
    9.   --f7-dialog-width: 270px;
    10.   --f7-dialog-inner-padding: 15px;
    11.   --f7-dialog-border-radius: 13px;
    12.   --f7-dialog-text-color: #000;
    13.   --f7-dialog-text-align: center;
    14.   --f7-dialog-font-size: 14px;
    15.   --f7-dialog-title-text-color: inherit;
    16.   --f7-dialog-title-font-size: 18px;
    17.   --f7-dialog-title-font-weight: 600;
    18.   --f7-dialog-title-line-height: inherit;
    19.   --f7-dialog-button-font-size: 17px;
    20.   --f7-dialog-button-height: 44px;
    21.   --f7-dialog-button-letter-spacing: 0;
    22.   --f7-dialog-button-font-weight: 400;
    23.   --f7-dialog-button-text-transform: none;
    24.   --f7-dialog-button-pressed-bg-color: rgba(230, 230, 230, 0.95);
    25.   --f7-dialog-input-border-radius: 4px;
    26.   --f7-dialog-input-font-size: 14px;
    27.   --f7-dialog-input-height: 32px;
    28.   --f7-dialog-input-border-color: rgba(0, 0, 0, 0.3);
    29.   --f7-dialog-input-border-width: 1px;
    30.   --f7-dialog-input-placeholder-color: #a9a9a9;
    31.   --f7-dialog-preloader-size: 34px;
    32. }
    33. .md {
    34.   --f7-dialog-bg-color: #fff;
    35.   --f7-dialog-box-shadow: var(--f7-elevation-24);
    36.   --f7-dialog-width: 280px;
    37.   --f7-dialog-inner-padding: 24px;
    38.   --f7-dialog-border-radius: 4px;
    39.   --f7-dialog-text-color: #757575;
    40.   --f7-dialog-text-align: left;
    41.   --f7-dialog-font-size: 16px;
    42.   --f7-dialog-title-text-color: #212121;
    43.   --f7-dialog-title-font-size: 20px;
    44.   --f7-dialog-title-font-weight: 500;
    45.   --f7-dialog-title-line-height: 1.3;
    46.   --f7-dialog-button-font-size: 14px;
    47.   --f7-dialog-button-height: 36px;
    48.   --f7-dialog-button-letter-spacing: 0.03em;
    49.   --f7-dialog-button-font-weight: 500;
    50.   --f7-dialog-button-text-transform: uppercase;
    51.   --f7-dialog-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
    52.   --f7-dialog-input-border-radius: 0px;
    53.   --f7-dialog-input-font-size: 16px;
    54.   --f7-dialog-input-height: 36px;
    55.   --f7-dialog-input-border-color: transparent;
    56.   --f7-dialog-input-border-width: 0px;
    57.   --f7-dialog-input-placeholder-color: rgba(0, 0, 0, 0.35);
    58.   --f7-dialog-preloader-size: 32px;
    59. }
    60. .aurora {
    61.   --f7-dialog-bg-color: #fff;
    62.   --f7-dialog-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15), 0 25px 30px 0 rgba(0,0,0,0.35);
    63.   --f7-dialog-width: 300px;
    64.   --f7-dialog-inner-padding: 20px;
    65.   --f7-dialog-border-radius: 4px;
    66.   --f7-dialog-text-color: #000;
    67.   --f7-dialog-text-align: left;
    68.   --f7-dialog-font-size: 14px;
    69.   --f7-dialog-title-text-color: inherit;
    70.   --f7-dialog-title-font-size: 14px;
    71.   --f7-dialog-title-font-weight: 700;
    72.   --f7-dialog-title-line-height: inherit;
    73.   --f7-dialog-button-text-color: #fff;
    74.   --f7-dialog-button-font-size: 13px;
    75.   --f7-dialog-button-height: 28px;
    76.   --f7-dialog-button-letter-spacing: 0;
    77.   --f7-dialog-button-font-weight: 500;
    78.   --f7-dialog-button-text-transform: none;
    79.   /*
    80.   --f7-dialog-button-pressed-bg-color: var(--f7-theme-color-shade);
    81.   */
    82.   --f7-dialog-input-border-radius: 4px;
    83.   --f7-dialog-input-font-size: 13px;
    84.   --f7-dialog-input-height: 24px;
    85.   --f7-dialog-input-border-color: rgba(0, 0, 0, 0.12);
    86.   --f7-dialog-input-border-width: 1px;
    87.   --f7-dialog-input-placeholder-color: rgba(0, 0, 0, 0.32);
    88.   --f7-dialog-preloader-size: 24px;
    89. }

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

    Grid

    1. .ios {
    2.   --f7-grid-gap: 15px;
    3. }
    4. .md {
    5.   --f7-grid-gap: 16px;
    6. }
    7. .aurora {
    8.   --f7-grid-gap: 15px;
    9. }

    Input

    1. :root {
    2.   --f7-input-bg-color: transparent;
    3.   --f7-label-font-weight: 400;
    4.   --f7-label-line-height: 1.2;
    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-color: #999;
    15.   --f7-input-outline-border-radius: 4px;
    16.   --f7-input-outline-padding-horizontal: 12px;
    17.   --f7-textarea-height: 100px;
    18.   /*
    19.   --f7-input-outline-focused-border-color: var(--f7-theme-color);
    20.   --f7-input-outline-invalid-border-color: var(--f7-input-error-text-color);
    21.   */
    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-text-color: #000000;
    30.   --f7-input-font-size: 17px;
    31.   --f7-input-placeholder-color: #a9a9a9;
    32.   --f7-textarea-padding-vertical: 11px;
    33.   /*
    34.   --f7-input-focused-border-color: var(--f7-list-item-border-color);
    35.   --f7-input-invalid-border-color: var(--f7-list-item-border-color);
    36.   --f7-input-invalid-text-color: var(--f7-input-error-text-color);
    37.   */
    38.   --f7-label-font-size: 12px;
    39.   --f7-label-text-color: inherit;
    40.   /*
    41.   --f7-label-focused-text-color: var(--f7-label-text-color);
    42.   --f7-label-invalid-text-color: var(--f7-label-text-color);
    43.   */
    44.   --f7-floating-label-scale: calc(17 / 12);
    45.   --f7-inline-label-font-size: 17px;
    46.   --f7-inline-label-line-height: 1.4;
    47.   --f7-inline-label-padding-top: 3px;
    48.   --f7-input-info-text-color: #8e8e93;
    49.   --f7-input-clear-button-size: 14px;
    50.   --f7-input-clear-button-color: #8e8e93;
    51. }
    52. .ios .theme-dark,
    53. .ios.theme-dark {
    54.   --f7-input-text-color: #fff;
    55. }
    56. .md {
    57.   --f7-input-height: 36px;
    58.   --f7-input-text-color: #212121;
    59.   --f7-input-font-size: 16px;
    60.   --f7-input-placeholder-color: rgba(0, 0, 0, 0.35);
    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.   --f7-label-text-color: rgba(0, 0, 0, 0.65);
    69.   /*
    70.   --f7-label-focused-text-color: var(--f7-theme-color);
    71.   --f7-label-invalid-text-color: var(--f7-input-error-text-color );
    72.   */
    73.   --f7-floating-label-scale: calc(16 / 12);
    74.   --f7-inline-label-font-size: 16px;
    75.   --f7-inline-label-line-height: 1.5;
    76.   --f7-inline-label-padding-top: 7px;
    77.   --f7-input-info-text-color: rgba(0, 0, 0, 0.45);
    78.   --f7-input-clear-button-size: 18px;
    79.   --f7-input-clear-button-color: #aaa;
    80. }
    81. .md .theme-dark,
    82. .md.theme-dark {
    83.   --f7-input-text-color: rgba(255, 255, 255, 0.87);
    84.   --f7-input-placeholder-color: rgba(255, 255, 255, 0.35);
    85.   --f7-label-text-color: rgba(255, 255, 255, 0.54);
    86.   --f7-input-info-text-color: rgba(255, 255, 255, 0.35);
    87. }
    88. .aurora {
    89.   --f7-input-height: 24px;
    90.   --f7-input-text-color: #000000;
    91.   --f7-input-font-size: 13px;
    92.   --f7-input-placeholder-color: rgba(0, 0, 0, 0.32);
    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-info-text-color: rgba(0, 0, 0, 0.5);
    110.   --f7-input-clear-button-size: 14px;
    111.   --f7-input-clear-button-color: #666;
    112.   --f7-input-outline-height: 32px;
    113.   --f7-input-outline-padding-horizontal: 8px;
    114. }
    115. .aurora .theme-dark,
    116. .aurora.theme-dark {
    117.   --f7-input-text-color: #fff;
    118.   --f7-input-clear-button-color: #aaa;
    119.   --f7-input-placeholder-color: rgba(255, 255, 255, 0.35);
    120. }

    List

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

    List Index

    :root {
  --f7-list-index-width: 16px;
  --f7-list-index-font-size: 11px;
  --f7-list-index-font-weight: 600;
  /* --f7-list-index-text-color: var(--f7-theme-color); */
  --f7-list-index-item-height: 14px;
  --f7-list-index-label-text-color: #fff;
  /* --f7-list-index-label-bg-color: var(--f7-theme-color); */
  --f7-list-index-label-font-weight: 500;
}
.ios {
  --f7-list-index-label-size: 44px;
  --f7-list-index-label-font-size: 17px;
  --f7-list-index-skip-dot-size: 6px;
}
.md {
  --f7-list-index-label-size: 56px;
  --f7-list-index-label-font-size: 20px;
  --f7-list-index-skip-dot-size: 4px;
}
.aurora {
  --f7-list-index-font-size: 12px;
  --f7-list-index-label-size: 32px;
  --f7-list-index-label-font-size: 12px;
  --f7-list-index-label-font-weight: 600;
  --f7-list-index-skip-dot-size: 4px;
}

    Login Screen

    :root {
  --f7-login-screen-bg-color: #fff;
  --f7-login-screen-content-bg-color: #fff;
  --f7-login-screen-blocks-max-width: 480px;
  /*
   --f7-login-screen-list-button-text-color: var(--f7-theme-color);
   */
  --f7-login-screen-title-text-align: center;
  --f7-login-screen-title-text-color: inherit;
  --f7-login-screen-title-letter-spacing: 0;
}
:root .theme-dark,
:root.theme-dark {
  --f7-login-screen-bg-color: #171717;
  --f7-login-screen-content-bg-color: transparent;
}
.ios {
  --f7-login-screen-blocks-margin-vertical: 25px;
  --f7-login-screen-title-font-size: 30px;
  --f7-login-screen-title-font-weight: normal;
}
.md {
  --f7-login-screen-blocks-margin-vertical: 24px;
  --f7-login-screen-title-font-size: 34px;
  --f7-login-screen-title-font-weight: normal;
}
.aurora {
  --f7-login-screen-blocks-margin-vertical: 15px;
  --f7-login-screen-title-font-size: 28px;
  --f7-login-screen-title-font-weight: 500;
}

    Menu

    :root {
  --f7-menu-text-color: #fff;
  --f7-menu-font-size: 16px;
  --f7-menu-font-weight: 500;
  --f7-menu-line-height: 1.2;
  --f7-menu-bg-color: rgba(0, 0, 0, 0.9);
  --f7-menu-item-pressed-bg-color: rgba(20, 20, 20, 0.9);
  --f7-menu-item-padding-horizontal: 12px;
  --f7-menu-item-spacing: 6px;
  --f7-menu-item-height: 40px;
  --f7-menu-item-dropdown-icon-color: rgba(255, 255, 255, 0.4);
  --f7-menu-item-border-radius: 8px;
  /*
  --f7-menu-dropdown-pressed-bg-color: var(--f7-theme-color);
  */
  --f7-menu-dropdown-item-height: 28px;
  --f7-menu-dropdown-divider-color: rgba(255, 255, 255, 0.2);
  --f7-menu-dropdown-padding-vertical: 6px;
  /*
  --f7-menu-dropdown-border-radius: var(--f7-menu-item-border-radius);
  */
}
.aurora {
  --f7-menu-font-size: 13px;
  --f7-menu-item-height: 28px;
  --f7-menu-dropdown-item-height: 24px;
  --f7-menu-item-border-radius: 5px;
  --f7-menu-item-padding-horizontal: 10px;
}

    Messagebar

    :root {
  --f7-messagebar-bg-color: #fff;
  --f7-messagebar-shadow-image: none;
  --f7-messagebar-textarea-bg-color: transparent;
  --f7-messagebar-attachments-height: 155px;
  --f7-messagebar-attachment-height: 155px;
  --f7-messagebar-attachment-landscape-height: 120px;
  --f7-messagebar-sheet-height: 252px;
  --f7-messagebar-sheet-landscape-height: 192px;
  /*
  --f7-messagebar-inner-padding-left: var(--f7-toolbar-inner-padding-left);
  --f7-messagebar-inner-padding-right: var(--f7-toolbar-inner-padding-right);
  */
}
:root .theme-dark,
:root.theme-dark {
  --f7-messagebar-bg-color: var(--f7-bars-bg-color);
}
.ios {
  --f7-messagebar-height: 44px;
  --f7-messagebar-font-size: 17px;
  /*
  --f7-messagebar-link-color: var(--f7-theme-color);
  */
  --f7-messagebar-border-color: transparent;
  --f7-messagebar-textarea-border-radius: 17px;
  --f7-messagebar-textarea-padding: 6px 15px;
  --f7-messagebar-textarea-height: 34px;
  --f7-messagebar-textarea-text-color: #000;
  --f7-messagebar-textarea-font-size: 17px;
  --f7-messagebar-textarea-line-height: 20px;
  --f7-messagebar-textarea-border: 1px solid #c8c8cd;
  --f7-messagebar-sheet-bg-color: #d1d5da;
  --f7-messagebar-attachments-border-color: #c8c8cd;
  --f7-messagebar-attachment-border-radius: 12px;
}
.ios .theme-dark,
.ios.theme-dark {
  --f7-messagebar-textarea-text-color: #fff;
  --f7-messagebar-textarea-border: 1px solid var(--f7-bars-border-color);
  --f7-messagebar-attachments-border-color: var(--f7-bars-border-color);
}
.md {
  --f7-messagebar-height: 48px;
  --f7-messagebar-font-size: 16px;
  --f7-messagebar-link-color: #333;
  --f7-messagebar-border-color: #d1d1d1;
  --f7-messagebar-textarea-border-radius: 0px;
  --f7-messagebar-textarea-padding: 5px 8px;
  --f7-messagebar-textarea-height: 32px;
  --f7-messagebar-textarea-text-color: #333;
  --f7-messagebar-textarea-font-size: 16px;
  --f7-messagebar-textarea-line-height: 22px;
  --f7-messagebar-textarea-border: 1px solid transparent;
  --f7-messagebar-sheet-bg-color: #fff;
  --f7-messagebar-attachments-border-color: #ddd;
  --f7-messagebar-attachment-border-radius: 4px;
}
.md .theme-dark,
.md.theme-dark {
  --f7-messagebar-border-color: #282829;
  --f7-messagebar-link-color: rgba(255, 255, 255, 0.87);
  --f7-messagebar-textarea-text-color: rgba(255, 255, 255, 0.87);
  --f7-messagebar-attachments-border-color: rgba(255, 255, 255, 0.2);
}
.aurora {
  --f7-messagebar-height: 38px;
  --f7-messagebar-font-size: 14px;
  /*
  --f7-messagebar-link-color: var(--f7-theme-color);
  */
  --f7-messagebar-border-color: transparent;
  --f7-messagebar-textarea-border-radius: 12px;
  --f7-messagebar-textarea-padding: 3px 10px;
  --f7-messagebar-textarea-height: 24px;
  --f7-messagebar-textarea-text-color: #000;
  --f7-messagebar-textarea-font-size: 13px;
  --f7-messagebar-textarea-line-height: 16px;
  --f7-messagebar-textarea-border: 1px solid #c8c8cd;
  --f7-messagebar-sheet-bg-color: #fff;
  --f7-messagebar-attachments-border-color: #c8c8cd;
  --f7-messagebar-attachment-border-radius: 12px;
}
.aurora .theme-dark,
.aurora.theme-dark {
  --f7-messagebar-textarea-text-color: #fff;
  --f7-messagebar-textarea-border: 1px solid var(--f7-bars-border-color);
  --f7-messagebar-attachments-border-color: var(--f7-bars-border-color);
}

    Messages

    :root {
  --f7-messages-content-bg-color: #fff;
  --f7-message-text-header-text-color: inherit;
  --f7-message-text-header-opacity: 0.65;
  --f7-message-text-header-font-size: 12px;
  --f7-message-text-footer-text-color: inherit;
  --f7-message-text-footer-opacity: 0.65;
  --f7-message-text-footer-font-size: 12px;
  --f7-message-bubble-line-height: 1.2;
  --f7-message-header-font-size: 12px;
  --f7-message-footer-font-size: 11px;
  --f7-message-name-font-size: 12px;
  --f7-message-name-font-weight: inherit;
  --f7-message-typing-indicator-bg-color: #000;
  --f7-message-avatar-border-radius: 50%;
  --f7-messages-title-font-weight: inherit;
  /*
  --f7-message-sent-bg-color: var(--f7-theme-color);
  */
  --f7-message-sent-text-color: #fff;
  --f7-message-received-bg-color: #e5e5ea;
  --f7-message-received-text-color: #000;
}
:root .theme-dark,
:root.theme-dark {
  --f7-messages-content-bg-color: transparent;
  --f7-message-received-bg-color: #333;
  --f7-message-received-text-color: #fff;
  --f7-message-typing-indicator-bg-color: #fff;
}
.ios {
  --f7-messages-title-text-color: #8e8e93;
  --f7-messages-title-font-size: 11px;
  --f7-message-header-text-color: #8e8e93;
  --f7-message-footer-text-color: #8e8e93;
  --f7-message-name-text-color: #8e8e93;
  --f7-message-avatar-size: 29px;
  --f7-message-margin: 10px;
  --f7-message-bubble-min-height: 32px;
  --f7-message-bubble-font-size: 17px;
  --f7-message-bubble-border-radius: 16px;
  --f7-message-bubble-padding-vertical: 6px;
  --f7-message-bubble-padding-horizontal: 16px;
  --f7-message-typing-indicator-opacity: 0.35;
}
.md {
  --f7-messages-title-text-color: rgba(0, 0, 0, 0.51);
  --f7-messages-title-font-size: 12px;
  --f7-message-header-text-color: rgba(0, 0, 0, 0.51);
  --f7-message-footer-text-color: rgba(0, 0, 0, 0.51);
  --f7-message-name-text-color: rgba(0, 0, 0, 0.51);
  --f7-message-avatar-size: 32px;
  --f7-message-margin: 16px;
  --f7-message-bubble-min-height: 32px;
  --f7-message-bubble-font-size: 16px;
  --f7-message-bubble-border-radius: 4px;
  --f7-message-bubble-padding-vertical: 6px;
  --f7-message-bubble-padding-horizontal: 8px;
  --f7-message-typing-indicator-opacity: 0.6;
}
.md .theme-dark,
.md.theme-dark {
  --f7-messages-title-text-color: rgba(255, 255, 255, 0.54);
  --f7-message-header-text-color: rgba(255, 255, 255, 0.54);
  --f7-message-name-text-color: rgba(255, 255, 255, 0.54);
  --f7-message-footer-text-color: rgba(255, 255, 255, 0.54);
}
.aurora {
  --f7-messages-title-text-color: rgba(0, 0, 0, 0.51);
  --f7-messages-title-font-size: 12px;
  --f7-message-header-text-color: rgba(0, 0, 0, 0.51);
  --f7-message-footer-text-color: rgba(0, 0, 0, 0.51);
  --f7-message-name-text-color: rgba(0, 0, 0, 0.51);
  --f7-message-avatar-size: 24px;
  --f7-message-margin: 10px;
  --f7-message-bubble-min-height: 28px;
  --f7-message-bubble-font-size: 13px;
  --f7-message-bubble-line-height: 1.4;
  --f7-message-bubble-border-radius: 14px;
  --f7-message-bubble-padding-vertical: 5px;
  --f7-message-bubble-padding-horizontal: 10px;
  --f7-message-typing-indicator-opacity: 0.5;
}
.aurora .theme-dark,
.aurora.theme-dark {
  --f7-messages-title-text-color: rgba(255, 255, 255, 0.52);
  --f7-message-header-text-color: rgba(255, 255, 255, 0.52);
  --f7-message-name-text-color: rgba(255, 255, 255, 0.52);
  --f7-message-footer-text-color: rgba(255, 255, 255, 0.52);
}

    Navbar

    :root {
  /*
  --f7-navbar-bg-color: var(--f7-bars-bg-color);
  --f7-navbar-bg-image: var(--f7-bars-bg-image);
  --f7-navbar-border-color: var(--f7-bars-border-color);
  --f7-navbar-link-color: var(--f7-bars-link-color);
  --f7-navbar-text-color: var(--f7-bars-text-color);
  */
  --f7-navbar-hide-show-transition-duration: 400ms;
  --f7-navbar-title-line-height: 1.2;
  --f7-navbar-title-font-size: inherit;
  --f7-navbar-subtitle-text-align: inherit;
  --f7-navbar-large-title-line-height: 1.2;
  --f7-navbar-large-title-text-color: inherit;
}
.ios {
  --f7-navbar-height: 44px;
  --f7-navbar-tablet-height: 44px;
  --f7-navbar-font-size: 17px;
  --f7-navbar-inner-padding-left: 8px;
  --f7-navbar-inner-padding-right: 8px;
  --f7-navbar-title-font-weight: 600;
  --f7-navbar-title-margin-left: 0;
  --f7-navbar-title-margin-right: 0;
  --f7-navbar-title-text-align: center;
  --f7-navbar-subtitle-text-color: #6d6d72;
  --f7-navbar-subtitle-font-size: 10px;
  --f7-navbar-subtitle-line-height: 1;
  --f7-navbar-shadow-image: none;
  --f7-navbar-large-title-height: 52px;
  --f7-navbar-large-title-font-size: 34px;
  --f7-navbar-large-title-font-weight: 700;
  --f7-navbar-large-title-letter-spacing: -0.03em;
  --f7-navbar-large-title-padding-left: 15px;
  --f7-navbar-large-title-padding-right: 15px;
  /*
  --f7-navbar-link-height: var(--f7-navbar-height);
  --f7-navbar-link-line-height: var(--f7-navbar-height);
  */
}
.ios .theme-dark,
.ios.theme-dark {
  --f7-navbar-subtitle-text-color: #8e8e93;
}
.md {
  --f7-navbar-height: 56px;
  --f7-navbar-tablet-height: 64px;
  --f7-navbar-font-size: 20px;
  --f7-navbar-inner-padding-left: 0px;
  --f7-navbar-inner-padding-right: 0px;
  --f7-navbar-title-font-weight: 500;
  --f7-navbar-title-margin-left: 16px;
  --f7-navbar-title-margin-right: 16px;
  --f7-navbar-title-text-align: left;
  --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.85);
  --f7-navbar-subtitle-font-size: 14px;
  --f7-navbar-subtitle-line-height: 1.2;
  --f7-navbar-shadow-image: var(--f7-bars-shadow-bottom-image);
  --f7-navbar-large-title-font-size: 34px;
  --f7-navbar-large-title-height: 56px;
  --f7-navbar-large-title-font-weight: 500;
  --f7-navbar-large-title-letter-spacing: 0;
  --f7-navbar-large-title-padding-left: 16px;
  --f7-navbar-large-title-padding-right: 16px;
  /*
  --f7-navbar-link-height: var(--f7-navbar-height);
  --f7-navbar-link-line-height: var(--f7-navbar-height);
  */
}
.md .theme-dark,
.md.theme-dark {
  --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.85);
}
.aurora {
  --f7-navbar-height: 38px;
  --f7-navbar-tablet-height: 38px;
  --f7-navbar-font-size: 14px;
  --f7-navbar-inner-padding-left: 15px;
  --f7-navbar-inner-padding-right: 15px;
  --f7-navbar-title-font-weight: 600;
  --f7-navbar-title-margin-left: 0;
  --f7-navbar-title-margin-right: 0;
  --f7-navbar-title-text-align: center;
  --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.6);
  --f7-navbar-subtitle-font-size: 12px;
  --f7-navbar-subtitle-line-height: 1;
  --f7-navbar-shadow-image: none;
  --f7-navbar-large-title-height: 38px;
  --f7-navbar-large-title-font-size: 26px;
  --f7-navbar-large-title-font-weight: bold;
  --f7-navbar-large-title-letter-spacing: -0.03em;
  --f7-navbar-large-title-padding-left: 15px;
  --f7-navbar-large-title-padding-right: 15px;
  --f7-navbar-link-height: auto;
  --f7-navbar-link-line-height: inherit;
}
.aurora .theme-dark,
.aurora.theme-dark {
  --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.5);
}

    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;
}
.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-bg-color: rgba(250, 250, 250, 0.95);
  --f7-notification-translucent-bg-color-ios: rgba(255, 255, 255, 0.65);
  --f7-notification-icon-size: 20px;
  --f7-notification-title-color: #000;
  --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-color: #444a51;
  --f7-notification-title-right-font-size: 13px;
  --f7-notification-subtitle-color: #000;
  --f7-notification-subtitle-font-size: 15px;
  --f7-notification-subtitle-font-weight: 600;
  --f7-notification-text-color: #000;
  --f7-notification-text-font-size: 15px;
  --f7-notification-text-line-height: 1.2;
}
.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-bg-color: #fff;
  --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-color: #757575;
  --f7-notification-title-right-font-size: 12px;
  --f7-notification-subtitle-color: #212121;
  --f7-notification-subtitle-font-size: 14px;
  --f7-notification-subtitle-font-weight: 400;
  --f7-notification-text-color: #757575;
  --f7-notification-text-font-size: 14px;
  --f7-notification-text-line-height: 1.35;
}
.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-bg-color: #fff;
  --f7-notification-icon-size: 18px;
  --f7-notification-title-color: #000;
  --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-color: rgba(255, 255, 255, 0.6);
  --f7-notification-title-right-font-size: 13px;
  --f7-notification-subtitle-color: #000;
  --f7-notification-subtitle-font-size: 12px;
  --f7-notification-subtitle-font-weight: 600;
  --f7-notification-text-color: #000;
  --f7-notification-text-font-size: 12px;
  --f7-notification-text-line-height: 1.2;
}

    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: 400ms;
  /*
  --f7-page-content-extra-padding-top: 0px;
  --f7-page-content-extra-padding-bottom: 0px;
  */
}
.ios {
  --f7-page-bg-color: #efeff4;
  --f7-page-transition-duration: 400ms;
}
.md {
  --f7-page-bg-color: #fff;
  --f7-page-transition-duration: 250ms;
}
.aurora {
  --f7-page-bg-color: #f3f3f3;
  --f7-page-transition-duration: 400ms;
}
.theme-dark {
  --f7-page-bg-color: #171717;
  --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-bg-color: #fff;
}
.ios {
  --f7-panel-backdrop-bg-color: rgba(0, 0, 0, 0);
  --f7-panel-transition-duration: 400ms;
  --f7-panel-shadow: transparent;
}
.md {
  --f7-panel-backdrop-bg-color: rgba(0, 0, 0, 0.2);
  --f7-panel-transition-duration: 300ms;
  --f7-panel-shadow: rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0.1) 30%,
    rgba(0, 0, 0, 0.05) 40%,
    rgba(0, 0, 0, 0) 60%,
    rgba(0, 0, 0, 0) 100%;
}
.aurora {
  --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;
}
.ios {
  --f7-picker-column-font-size: 24px;
  --f7-picker-divider-text-color: #000;
  --f7-picker-item-text-color: #707274;
  --f7-picker-item-selected-text-color: #000;
  --f7-picker-item-selected-border-color: #a8abb0;
}
.ios .theme-dark,
.ios.theme-dark {
  --f7-picker-divider-text-color: #fff;
  --f7-picker-item-selected-text-color: #fff;
  --f7-picker-item-selected-border-color: rgba(255, 255, 255, 0.06);
}
.md {
  --f7-picker-column-font-size: 20px;
  --f7-picker-divider-text-color: rgba(0, 0, 0, 0.87);
  --f7-picker-item-text-color: inherit;
  --f7-picker-item-selected-text-color: inherit;
  --f7-picker-item-selected-border-color: rgba(0, 0, 0, 0.15);
}
.md .theme-dark,
.md.theme-dark {
  --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-column-font-size: 16px;
  --f7-picker-divider-text-color: #000;
  --f7-picker-item-height: 28px;
  --f7-picker-item-text-color: #888;
  --f7-picker-item-selected-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-text-color: #fff;
  --f7-picker-item-selected-border-color: rgba(255, 255, 255, 0.06);
}

    Popover

    :root {
  --f7-popover-width: 260px;
}
.ios {
  --f7-popover-bg-color: rgba(255, 255, 255, 0.95);
  --f7-popover-border-radius: 13px;
  --f7-popover-box-shadow: none;
  --f7-popover-actions-icon-size: 28px;
  --f7-popover-actions-label-text-color: #8a8a8a;
}
.ios .theme-dark,
.ios.theme-dark {
  --f7-popover-bg-color: rgba(30, 30, 30, 0.95);
}
.md {
  --f7-popover-bg-color: #fff;
  --f7-popover-border-radius: 4px;
  --f7-popover-box-shadow: var(--f7-elevation-8);
  --f7-popover-actions-icon-size: 24px;
  --f7-popover-actions-label-text-color: rgba(0, 0, 0, 0.54);
}
.md .theme-dark,
.md.theme-dark {
  --f7-popover-bg-color: #202020;
  --f7-popover-actions-label-text-color: rgba(255, 255, 255, 0.54);
}
.aurora {
  --f7-popover-width: 200px;
  --f7-popover-bg-color: #fff;
  --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-actions-label-text-color: rgba(0, 0, 0, 0.6);
}
.aurora .theme-dark,
.aurora.theme-dark {
  --f7-popover-bg-color: #202020;
  --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-tablet-border-radius: var(--f7-popup-border-radius);
  */
}
.ios {
  --f7-popup-box-shadow: none;
}
.md {
  --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-bg-color: #b6b6b6;
  --f7-progressbar-height: 2px;
  --f7-progressbar-border-radius: 2px;
}
.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-bg-color: #dbdbdb;
  --f7-progressbar-height: 6px;
  --f7-progressbar-border-radius: 3px;
}
.aurora .theme-dark,
.aurora.theme-dark {
  --f7-progressbar-bg-color: #444;
}

    Pull To Refresh

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

    Range Slider

    :root {
  /*
  --f7-range-bar-active-bg-color: var(--f7-theme-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-bg-color: var(--f7-range-bar-bg-color);
  */
  --f7-range-scale-step-width: 1px;
  --f7-range-scale-font-size: 12px;
  --f7-range-scale-font-weight: 400;
  --f7-range-scale-label-offset: 4px;
  /*
  --f7-range-scale-substep-bg-color: var(--f7-range-bar-bg-color);
  */
}
.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-bg-color: var(--f7-range-bar-bg-color);
  */
  --f7-range-scale-step-width: 2px;
  --f7-range-scale-font-size: 12px;
  --f7-range-scale-font-weight: 400;
  --f7-range-scale-label-offset: 4px;
  /*
  --f7-range-scale-substep-bg-color: var(--f7-range-bar-bg-color);
  */
}
.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-bg-color: var(--f7-range-bar-bg-color);
  */
  --f7-range-scale-step-width: 2px;
  --f7-range-scale-font-size: 11px;
  --f7-range-scale-font-weight: 500;
  --f7-range-scale-label-offset: 2px;
  /*
  --f7-range-scale-substep-bg-color: var(--f7-range-bar-bg-color);
  */
}

    Searchbar

    :root {
  /*
  --f7-searchbar-link-color: var(--f7-bars-link-color);
  */
  --f7-searchbar-input-border-width: 0px;
  --f7-searchbar-input-border-color: transparent;
  --f7-searchbar-input-text-color: #000;
  --f7-searchbar-placeholder-color: #939398;
}
:root .theme-dark,
:root.theme-dark {
  --f7-searchbar-input-text-color: #fff;
}
.ios {
  /*
  --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: 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-search-icon-color: #939398;
  --f7-searchbar-input-font-size: 17px;
  --f7-searchbar-input-bg-color: #e8e8ea;
  --f7-searchbar-input-border-radius: 8px;
  --f7-searchbar-input-height: 32px;
  --f7-searchbar-input-padding-horizontal: 28px;
  /*
  --f7-searchbar-inline-input-font-size: var(--f7-searchbar-input-font-size);
  --f7-searchbar-inline-input-height: var(--f7-searchbar-input-height);
  --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;
}
.ios .theme-dark,
.ios.theme-dark {
  --f7-searchbar-bg-color: #303030;
  --f7-searchbar-input-bg-color: #171717;
}
.md {
  --f7-searchbar-bg-color: #fff;
  --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-bg-color: #fff;
  --f7-searchbar-input-border-radius: 0px;
  --f7-searchbar-input-height: 100%;
  --f7-searchbar-input-padding-horizontal: 48px;
  /*
  --f7-searchbar-inline-input-font-size: var(--f7-searchbar-input-font-size);
  --f7-searchbar-inline-input-height: var(--f7-searchbar-input-height);
  */
  --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;
}
.md .theme-dark,
.md.theme-dark {
  --f7-searchbar-bg-color: #222222;
  --f7-searchbar-input-bg-color: #222222;
}
.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-search-icon-color: #939398;
  --f7-searchbar-input-font-size: 13px;
  --f7-searchbar-input-bg-color: #fff;
  --f7-searchbar-input-border-radius: 4px;
  --f7-searchbar-input-height: 24px;
  --f7-searchbar-input-padding-horizontal: 24px;
  /*
  --f7-searchbar-inline-input-font-size: var(--f7-searchbar-input-font-size);
  --f7-searchbar-inline-input-height: var(--f7-searchbar-input-height);
  --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);
  */
}
.aurora .theme-dark,
.aurora.theme-dark {
  --f7-searchbar-input-bg-color: #333;
}

    Sheet

    :root {
  --f7-sheet-height: 260px;
}
.ios {
  --f7-sheet-bg-color: #cfd5da;
  --f7-sheet-border-color: #929499;
}
.ios .theme-dark,
.ios.theme-dark {
  --f7-sheet-bg-color: #171717;
  --f7-sheet-border-color: var(--f7-bars-border-color);
}
.md {
  --f7-sheet-bg-color: #fff;
  --f7-sheet-border-color: transparent;
}
.md .theme-dark,
.md.theme-dark {
  --f7-sheet-bg-color: #202020;
  --f7-sheet-border-color: transparent;
}
.aurora {
  --f7-sheet-bg-color: #fff;
  --f7-sheet-border-color: transparent;
}
.aurora .theme-dark,
.aurora.theme-dark {
  --f7-sheet-bg-color: #202020;
  --f7-sheet-border-color: transparent;
}

    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: #c7c7cc;
  --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);
}
.ios {
  --f7-sortable-handler-width: 35px;
  --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);
}

    Statusbar

    :root {
  --f7-statusbar-height: 0px;
  --f7-statusbar-bg-color: var(--f7-bars-bg-color);
}

    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);
}
.ios {
  --f7-stepper-height: 29px;
  --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-border-width: 1px;
  --f7-stepper-large-height: 44px;
  --f7-stepper-small-height: 26px;
  --f7-stepper-small-border-width: 2px;
  --f7-stepper-value-font-size: 17px;
  --f7-stepper-value-font-weight: 400;
}
.md {
  --f7-stepper-height: 36px;
  --f7-stepper-border-radius: 4px;
  --f7-stepper-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
  /*
  --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-shade);
  */
  --f7-stepper-border-width: 2px;
  --f7-stepper-large-height: 48px;
  --f7-stepper-small-border-width: 2px;
  --f7-stepper-small-height: 28px;
  --f7-stepper-value-font-size: 14px;
  --f7-stepper-value-font-weight: 500;
}
.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-border-width: 2px;
  --f7-stepper-large-height: 34px;
  --f7-stepper-small-border-width: 1px;
  --f7-stepper-small-height: 22px;
  --f7-stepper-value-font-size: 14px;
  --f7-stepper-value-font-weight: 500;
}

    Subnavbar

    :root {
  /*
  --f7-subnavbar-bg-image: var(--f7-bars-bg-image);
  --f7-subnavbar-bg-color: var(--f7-bars-bg-color);
  --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: 7px;
  --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: 15px;
  --f7-subnavbar-inner-padding-right: 15px;
  --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-button-bg-color: #c7c7cc;
  --f7-swipeout-delete-button-bg-color: #ff3b30;
  --f7-swipeout-button-font-size: inherit;
  --f7-swipeout-button-font-weight: inherit;
}
.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-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-inner-bg-color: #fff;
  --f7-timeline-item-text-font-weight: inherit;
  --f7-timeline-item-subtitle-font-weight: inherit;
}
:root .theme-dark,
:root.theme-dark {
  --f7-timeline-item-inner-bg-color: #1c1c1d;
  --f7-timeline-horizontal-item-border-color: #282829;
  --f7-timeline-horizontal-item-date-border-color: #282829;
}
.ios {
  --f7-timeline-padding-horizontal: 15px;
  --f7-timeline-margin-vertical: 35px;
  --f7-timeline-divider-margin-horizontal: 15px;
  --f7-timeline-inner-block-margin-vertical: 15px;
  --f7-timeline-item-inner-border-radius: 7px;
  --f7-timeline-item-inner-box-shadow: none;
  --f7-timeline-item-time-font-size: 13px;
  --f7-timeline-item-time-text-color: #6d6d72;
  --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-border-color: #c4c4c4;
  --f7-timeline-horizontal-item-date-border-color: #c4c4c4;
  --f7-timeline-horizontal-item-date-shadow-image: none;
}
.ios .theme-dark,
.ios.theme-dark {
  --f7-timeline-item-time-text-color: #8E8E93;
}
.md {
  --f7-timeline-padding-horizontal: 16px;
  --f7-timeline-margin-vertical: 32px;
  --f7-timeline-divider-margin-horizontal: 16px;
  --f7-timeline-inner-block-margin-vertical: 16px;
  --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-time-text-color: rgba(0, 0, 0, 0.54);
  --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-border-color: rgba(0, 0, 0, 0.12);
  --f7-timeline-horizontal-item-date-border-color: transparent;
  --f7-timeline-horizontal-item-date-shadow-image: var(--f7-bars-shadow-bottom-image);
}
.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-divider-margin-horizontal: 15px;
  --f7-timeline-inner-block-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-time-text-color: rgba(0, 0, 0, 0.5);
  --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-color: rgba(0, 0, 0, 0.6);
  --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-border-color: rgba(0, 0, 0, 0.2);
  --f7-timeline-horizontal-item-date-border-color: rgba(0, 0, 0, 0.2);
  --f7-timeline-horizontal-item-date-shadow-image: none;
}
.aurora .theme-dark,
.aurora.theme-dark {
  --f7-timeline-item-time-text-color: rgba(255, 255, 255, 0.52);
  --f7-timeline-item-text-color: rgba(255, 255, 255, 0.52);
}

    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-translucent-bg-color-ios: rgba(0, 0, 0, 0.75);
  --f7-toast-padding-horizontal: 15px;
  --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;
}
.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;
  --f7-toggle-inactive-color: #222;
}
.md {
  --f7-toggle-width: 36px;
  --f7-toggle-height: 14px;
  --f7-toggle-inactive-color: #b0afaf;
}
.md .theme-dark,
.md.theme-dark {
  --f7-toggle-inactive-color: #555;
}
.aurora {
  --f7-toggle-width: 40px;
  --f7-toggle-height: 20px;
  --f7-toggle-inactive-color: #aaa;
}
.aurora .theme-dark,
.aurora.theme-dark {
  --f7-toggle-inactive-color: #555;
}

    Toolbar

    :root {
  /*
  --f7-toolbar-bg-color: var(--f7-bars-bg-color);
  --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: 56px;
  --f7-tabbar-link-inactive-color: #929292;
  --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: 10px;
  --f7-tabbar-label-tablet-font-size: 14px;
  --f7-tabbar-label-font-weight: 400;
  --f7-tabbar-label-letter-spacing: 0.01;
}
.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-inactive-color: rgba(0, 0, 0, 0.54);
  /*
  --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;
}
.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: 15px;
  --f7-toolbar-inner-padding-right: 15px;
  --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-color: rgba(0, 0, 0, 0.5);
  --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;
}
.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

    Typography
    .ios {
  --f7-typography-padding: 15px;
  --f7-typography-margin: 15px;
}
.md {
  --f7-typography-padding: 16px;
  --f7-typography-margin: 16px;
}
.aurora {
  --f7-typography-padding: 15px;
  --f7-typography-margin: 15px;
}