選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。
 
 
 

21822 行
638 KiB

  1. /**
  2. * Framework7 5.7.14
  3. * Full featured mobile HTML framework for building iOS & Android apps
  4. * https://framework7.io/
  5. *
  6. * Copyright 2014-2020 Vladimir Kharlampidi
  7. *
  8. * Released under the MIT License
  9. *
  10. * Released on: November 9, 2020
  11. */
  12. /*====================
  13. Core
  14. ==================== */
  15. :root {
  16. --f7-theme-color: #007aff;
  17. --f7-theme-color-rgb: 0, 122, 255;
  18. --f7-theme-color-shade: #0066d6;
  19. --f7-theme-color-tint: #298fff;
  20. --f7-safe-area-left: 0px;
  21. --f7-safe-area-right: 0px;
  22. --f7-safe-area-top: 0px;
  23. --f7-safe-area-bottom: 0px;
  24. --f7-safe-area-outer-left: 0px;
  25. --f7-safe-area-outer-right: 0px;
  26. --f7-device-pixel-ratio: 1;
  27. }
  28. @supports (left: env(safe-area-inset-left)) {
  29. :root {
  30. --f7-safe-area-top: env(safe-area-inset-top);
  31. --f7-safe-area-bottom: env(safe-area-inset-bottom);
  32. }
  33. :root .ios-left-edge,
  34. :root .ios-edges,
  35. :root .safe-area-left,
  36. :root .safe-areas,
  37. :root .popup,
  38. :root .sheet-modal,
  39. :root .panel-left {
  40. --f7-safe-area-left: env(safe-area-inset-left);
  41. --f7-safe-area-outer-left: env(safe-area-inset-left);
  42. }
  43. :root .ios-right-edge,
  44. :root .ios-edges,
  45. :root .safe-area-right,
  46. :root .safe-areas,
  47. :root .popup,
  48. :root .sheet-modal,
  49. :root .panel-right {
  50. --f7-safe-area-right: env(safe-area-inset-right);
  51. --f7-safe-area-outer-right: env(safe-area-inset-right);
  52. }
  53. :root .no-safe-areas,
  54. :root .no-safe-area-left,
  55. :root .no-ios-edges,
  56. :root .no-ios-left-edge {
  57. --f7-safe-area-left: 0px;
  58. --f7-safe-area-outer-left: 0px;
  59. }
  60. :root .no-safe-areas,
  61. :root .no-safe-area-right,
  62. :root .no-ios-edges,
  63. :root .no-ios-right-edge {
  64. --f7-safe-area-right: 0px;
  65. --f7-safe-area-outer-right: 0px;
  66. }
  67. }
  68. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  69. :root {
  70. --f7-device-pixel-ratio: 2;
  71. }
  72. }
  73. @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  74. :root {
  75. --f7-device-pixel-ratio: 3;
  76. }
  77. }
  78. /*====================
  79. Fonts & Bars
  80. ==================== */
  81. :root {
  82. --f7-font-size: 14px;
  83. /*
  84. --f7-bars-link-color: var(--f7-theme-color);
  85. */
  86. --f7-bars-bg-image: none;
  87. --f7-bars-translucent-opacity: 0.8;
  88. --f7-bars-translucent-blur: 20px;
  89. --f7-bars-shadow-bottom-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
  90. --f7-bars-shadow-top-image: linear-gradient(to top, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
  91. --f7-bars-text-color: #000;
  92. --f7-bars-bg-color: #f7f7f8;
  93. --f7-bars-bg-color-rgb: 247, 247, 248;
  94. }
  95. :root .theme-dark,
  96. :root.theme-dark {
  97. --f7-bars-text-color: #fff;
  98. }
  99. .ios {
  100. --f7-font-family: -apple-system, SF Pro Text, SF UI Text, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif;
  101. --f7-line-height: 1.4;
  102. --f7-text-color: #000;
  103. --f7-bars-border-color: rgba(0, 0, 0, 0.25);
  104. }
  105. .ios .theme-dark,
  106. .ios.theme-dark {
  107. --f7-text-color: #fff;
  108. --f7-bars-bg-color: #121212;
  109. --f7-bars-bg-color-rgb: 22, 22, 22;
  110. --f7-bars-border-color: rgba(255, 255, 255, 0.16);
  111. }
  112. .md {
  113. --f7-font-family: Roboto, system-ui, Noto, Helvetica, Arial, sans-serif;
  114. --f7-line-height: 1.5;
  115. --f7-bars-border-color: transparent;
  116. --f7-text-color: #212121;
  117. }
  118. .md .theme-dark,
  119. .md.theme-dark {
  120. --f7-text-color: rgba(255, 255, 255, 0.87);
  121. --f7-bars-bg-color: #202020;
  122. }
  123. .aurora {
  124. --f7-font-family: -apple-system, system-ui, Helvetica, Arial, sans-serif;
  125. --f7-line-height: 1.5;
  126. --f7-text-color: #000;
  127. --f7-bars-border-color: rgba(0, 0, 0, 0.2);
  128. }
  129. .aurora .theme-dark,
  130. .aurora.theme-dark {
  131. --f7-text-color: #fff;
  132. --f7-bars-bg-color: #202020;
  133. --f7-bars-border-color: rgba(255, 255, 255, 0.1);
  134. }
  135. /*====================
  136. Color Themes
  137. ==================== */
  138. .text-color-primary {
  139. --f7-theme-color-text-color: var(--f7-theme-color);
  140. }
  141. .bg-color-primary {
  142. --f7-theme-color-bg-color: var(--f7-theme-color);
  143. }
  144. .border-color-primary {
  145. --f7-theme-color-border-color: var(--f7-theme-color);
  146. }
  147. .ripple-color-primary {
  148. --f7-theme-color-ripple-color: rgba(var(--f7-theme-color-rgb), 0.3);
  149. }
  150. :root {
  151. --f7-color-red: #ff3b30;
  152. --f7-color-red-rgb: 255, 59, 48;
  153. --f7-color-red-shade: #ff1407;
  154. --f7-color-red-tint: #ff6259;
  155. --f7-color-green: #4cd964;
  156. --f7-color-green-rgb: 76, 217, 100;
  157. --f7-color-green-shade: #2cd048;
  158. --f7-color-green-tint: #6ee081;
  159. --f7-color-blue: #2196f3;
  160. --f7-color-blue-rgb: 33, 150, 243;
  161. --f7-color-blue-shade: #0c82df;
  162. --f7-color-blue-tint: #48a8f5;
  163. --f7-color-pink: #ff2d55;
  164. --f7-color-pink-rgb: 255, 45, 85;
  165. --f7-color-pink-shade: #ff0434;
  166. --f7-color-pink-tint: #ff5676;
  167. --f7-color-yellow: #ffcc00;
  168. --f7-color-yellow-rgb: 255, 204, 0;
  169. --f7-color-yellow-shade: #d6ab00;
  170. --f7-color-yellow-tint: #ffd429;
  171. --f7-color-orange: #ff9500;
  172. --f7-color-orange-rgb: 255, 149, 0;
  173. --f7-color-orange-shade: #d67d00;
  174. --f7-color-orange-tint: #ffa629;
  175. --f7-color-purple: #9c27b0;
  176. --f7-color-purple-rgb: 156, 39, 176;
  177. --f7-color-purple-shade: #7e208f;
  178. --f7-color-purple-tint: #b92fd1;
  179. --f7-color-deeppurple: #673ab7;
  180. --f7-color-deeppurple-rgb: 103, 58, 183;
  181. --f7-color-deeppurple-shade: #563098;
  182. --f7-color-deeppurple-tint: #7c52c8;
  183. --f7-color-lightblue: #5ac8fa;
  184. --f7-color-lightblue-rgb: 90, 200, 250;
  185. --f7-color-lightblue-shade: #32bbf9;
  186. --f7-color-lightblue-tint: #82d5fb;
  187. --f7-color-teal: #009688;
  188. --f7-color-teal-rgb: 0, 150, 136;
  189. --f7-color-teal-shade: #006d63;
  190. --f7-color-teal-tint: #00bfad;
  191. --f7-color-lime: #cddc39;
  192. --f7-color-lime-rgb: 205, 220, 57;
  193. --f7-color-lime-shade: #bac923;
  194. --f7-color-lime-tint: #d6e25c;
  195. --f7-color-deeporange: #ff6b22;
  196. --f7-color-deeporange-rgb: 255, 107, 34;
  197. --f7-color-deeporange-shade: #f85200;
  198. --f7-color-deeporange-tint: #ff864b;
  199. --f7-color-gray: #8e8e93;
  200. --f7-color-gray-rgb: 142, 142, 147;
  201. --f7-color-gray-shade: #79797f;
  202. --f7-color-gray-tint: #a3a3a7;
  203. --f7-color-white: #ffffff;
  204. --f7-color-white-rgb: 255, 255, 255;
  205. --f7-color-white-shade: #ebebeb;
  206. --f7-color-white-tint: #ffffff;
  207. --f7-color-black: #000000;
  208. --f7-color-black-rgb: 0, 0, 0;
  209. --f7-color-black-shade: #000000;
  210. --f7-color-black-tint: #141414;
  211. }
  212. .color-theme-red {
  213. --f7-theme-color: #ff3b30;
  214. --f7-theme-color-rgb: 255, 59, 48;
  215. --f7-theme-color-shade: #ff1407;
  216. --f7-theme-color-tint: #ff6259;
  217. }
  218. .color-theme-green {
  219. --f7-theme-color: #4cd964;
  220. --f7-theme-color-rgb: 76, 217, 100;
  221. --f7-theme-color-shade: #2cd048;
  222. --f7-theme-color-tint: #6ee081;
  223. }
  224. .color-theme-blue {
  225. --f7-theme-color: #2196f3;
  226. --f7-theme-color-rgb: 33, 150, 243;
  227. --f7-theme-color-shade: #0c82df;
  228. --f7-theme-color-tint: #48a8f5;
  229. }
  230. .color-theme-pink {
  231. --f7-theme-color: #ff2d55;
  232. --f7-theme-color-rgb: 255, 45, 85;
  233. --f7-theme-color-shade: #ff0434;
  234. --f7-theme-color-tint: #ff5676;
  235. }
  236. .color-theme-yellow {
  237. --f7-theme-color: #ffcc00;
  238. --f7-theme-color-rgb: 255, 204, 0;
  239. --f7-theme-color-shade: #d6ab00;
  240. --f7-theme-color-tint: #ffd429;
  241. }
  242. .color-theme-orange {
  243. --f7-theme-color: #ff9500;
  244. --f7-theme-color-rgb: 255, 149, 0;
  245. --f7-theme-color-shade: #d67d00;
  246. --f7-theme-color-tint: #ffa629;
  247. }
  248. .color-theme-purple {
  249. --f7-theme-color: #9c27b0;
  250. --f7-theme-color-rgb: 156, 39, 176;
  251. --f7-theme-color-shade: #7e208f;
  252. --f7-theme-color-tint: #b92fd1;
  253. }
  254. .color-theme-deeppurple {
  255. --f7-theme-color: #673ab7;
  256. --f7-theme-color-rgb: 103, 58, 183;
  257. --f7-theme-color-shade: #563098;
  258. --f7-theme-color-tint: #7c52c8;
  259. }
  260. .color-theme-lightblue {
  261. --f7-theme-color: #5ac8fa;
  262. --f7-theme-color-rgb: 90, 200, 250;
  263. --f7-theme-color-shade: #32bbf9;
  264. --f7-theme-color-tint: #82d5fb;
  265. }
  266. .color-theme-teal {
  267. --f7-theme-color: #009688;
  268. --f7-theme-color-rgb: 0, 150, 136;
  269. --f7-theme-color-shade: #006d63;
  270. --f7-theme-color-tint: #00bfad;
  271. }
  272. .color-theme-lime {
  273. --f7-theme-color: #cddc39;
  274. --f7-theme-color-rgb: 205, 220, 57;
  275. --f7-theme-color-shade: #bac923;
  276. --f7-theme-color-tint: #d6e25c;
  277. }
  278. .color-theme-deeporange {
  279. --f7-theme-color: #ff6b22;
  280. --f7-theme-color-rgb: 255, 107, 34;
  281. --f7-theme-color-shade: #f85200;
  282. --f7-theme-color-tint: #ff864b;
  283. }
  284. .color-theme-gray {
  285. --f7-theme-color: #8e8e93;
  286. --f7-theme-color-rgb: 142, 142, 147;
  287. --f7-theme-color-shade: #79797f;
  288. --f7-theme-color-tint: #a3a3a7;
  289. }
  290. .color-theme-white {
  291. --f7-theme-color: #ffffff;
  292. --f7-theme-color-rgb: 255, 255, 255;
  293. --f7-theme-color-shade: #ebebeb;
  294. --f7-theme-color-tint: #ffffff;
  295. }
  296. .color-theme-black {
  297. --f7-theme-color: #000000;
  298. --f7-theme-color-rgb: 0, 0, 0;
  299. --f7-theme-color-shade: #000000;
  300. --f7-theme-color-tint: #141414;
  301. }
  302. .color-red {
  303. --f7-theme-color: #ff3b30;
  304. --f7-theme-color-rgb: 255, 59, 48;
  305. --f7-theme-color-shade: #ff1407;
  306. --f7-theme-color-tint: #ff6259;
  307. }
  308. .text-color-red {
  309. --f7-theme-color-text-color: #ff3b30;
  310. }
  311. .bg-color-red {
  312. --f7-theme-color-bg-color: #ff3b30;
  313. }
  314. .border-color-red {
  315. --f7-theme-color-border-color: #ff3b30;
  316. }
  317. .ripple-color-red,
  318. .ripple-red {
  319. --f7-theme-color-ripple-color: rgba(255, 59, 48, 0.3);
  320. }
  321. .color-green {
  322. --f7-theme-color: #4cd964;
  323. --f7-theme-color-rgb: 76, 217, 100;
  324. --f7-theme-color-shade: #2cd048;
  325. --f7-theme-color-tint: #6ee081;
  326. }
  327. .text-color-green {
  328. --f7-theme-color-text-color: #4cd964;
  329. }
  330. .bg-color-green {
  331. --f7-theme-color-bg-color: #4cd964;
  332. }
  333. .border-color-green {
  334. --f7-theme-color-border-color: #4cd964;
  335. }
  336. .ripple-color-green,
  337. .ripple-green {
  338. --f7-theme-color-ripple-color: rgba(76, 217, 100, 0.3);
  339. }
  340. .color-blue {
  341. --f7-theme-color: #2196f3;
  342. --f7-theme-color-rgb: 33, 150, 243;
  343. --f7-theme-color-shade: #0c82df;
  344. --f7-theme-color-tint: #48a8f5;
  345. }
  346. .text-color-blue {
  347. --f7-theme-color-text-color: #2196f3;
  348. }
  349. .bg-color-blue {
  350. --f7-theme-color-bg-color: #2196f3;
  351. }
  352. .border-color-blue {
  353. --f7-theme-color-border-color: #2196f3;
  354. }
  355. .ripple-color-blue,
  356. .ripple-blue {
  357. --f7-theme-color-ripple-color: rgba(33, 150, 243, 0.3);
  358. }
  359. .color-pink {
  360. --f7-theme-color: #ff2d55;
  361. --f7-theme-color-rgb: 255, 45, 85;
  362. --f7-theme-color-shade: #ff0434;
  363. --f7-theme-color-tint: #ff5676;
  364. }
  365. .text-color-pink {
  366. --f7-theme-color-text-color: #ff2d55;
  367. }
  368. .bg-color-pink {
  369. --f7-theme-color-bg-color: #ff2d55;
  370. }
  371. .border-color-pink {
  372. --f7-theme-color-border-color: #ff2d55;
  373. }
  374. .ripple-color-pink,
  375. .ripple-pink {
  376. --f7-theme-color-ripple-color: rgba(255, 45, 85, 0.3);
  377. }
  378. .color-yellow {
  379. --f7-theme-color: #ffcc00;
  380. --f7-theme-color-rgb: 255, 204, 0;
  381. --f7-theme-color-shade: #d6ab00;
  382. --f7-theme-color-tint: #ffd429;
  383. }
  384. .text-color-yellow {
  385. --f7-theme-color-text-color: #ffcc00;
  386. }
  387. .bg-color-yellow {
  388. --f7-theme-color-bg-color: #ffcc00;
  389. }
  390. .border-color-yellow {
  391. --f7-theme-color-border-color: #ffcc00;
  392. }
  393. .ripple-color-yellow,
  394. .ripple-yellow {
  395. --f7-theme-color-ripple-color: rgba(255, 204, 0, 0.3);
  396. }
  397. .color-orange {
  398. --f7-theme-color: #ff9500;
  399. --f7-theme-color-rgb: 255, 149, 0;
  400. --f7-theme-color-shade: #d67d00;
  401. --f7-theme-color-tint: #ffa629;
  402. }
  403. .text-color-orange {
  404. --f7-theme-color-text-color: #ff9500;
  405. }
  406. .bg-color-orange {
  407. --f7-theme-color-bg-color: #ff9500;
  408. }
  409. .border-color-orange {
  410. --f7-theme-color-border-color: #ff9500;
  411. }
  412. .ripple-color-orange,
  413. .ripple-orange {
  414. --f7-theme-color-ripple-color: rgba(255, 149, 0, 0.3);
  415. }
  416. .color-purple {
  417. --f7-theme-color: #9c27b0;
  418. --f7-theme-color-rgb: 156, 39, 176;
  419. --f7-theme-color-shade: #7e208f;
  420. --f7-theme-color-tint: #b92fd1;
  421. }
  422. .text-color-purple {
  423. --f7-theme-color-text-color: #9c27b0;
  424. }
  425. .bg-color-purple {
  426. --f7-theme-color-bg-color: #9c27b0;
  427. }
  428. .border-color-purple {
  429. --f7-theme-color-border-color: #9c27b0;
  430. }
  431. .ripple-color-purple,
  432. .ripple-purple {
  433. --f7-theme-color-ripple-color: rgba(156, 39, 176, 0.3);
  434. }
  435. .color-deeppurple {
  436. --f7-theme-color: #673ab7;
  437. --f7-theme-color-rgb: 103, 58, 183;
  438. --f7-theme-color-shade: #563098;
  439. --f7-theme-color-tint: #7c52c8;
  440. }
  441. .text-color-deeppurple {
  442. --f7-theme-color-text-color: #673ab7;
  443. }
  444. .bg-color-deeppurple {
  445. --f7-theme-color-bg-color: #673ab7;
  446. }
  447. .border-color-deeppurple {
  448. --f7-theme-color-border-color: #673ab7;
  449. }
  450. .ripple-color-deeppurple,
  451. .ripple-deeppurple {
  452. --f7-theme-color-ripple-color: rgba(103, 58, 183, 0.3);
  453. }
  454. .color-lightblue {
  455. --f7-theme-color: #5ac8fa;
  456. --f7-theme-color-rgb: 90, 200, 250;
  457. --f7-theme-color-shade: #32bbf9;
  458. --f7-theme-color-tint: #82d5fb;
  459. }
  460. .text-color-lightblue {
  461. --f7-theme-color-text-color: #5ac8fa;
  462. }
  463. .bg-color-lightblue {
  464. --f7-theme-color-bg-color: #5ac8fa;
  465. }
  466. .border-color-lightblue {
  467. --f7-theme-color-border-color: #5ac8fa;
  468. }
  469. .ripple-color-lightblue,
  470. .ripple-lightblue {
  471. --f7-theme-color-ripple-color: rgba(90, 200, 250, 0.3);
  472. }
  473. .color-teal {
  474. --f7-theme-color: #009688;
  475. --f7-theme-color-rgb: 0, 150, 136;
  476. --f7-theme-color-shade: #006d63;
  477. --f7-theme-color-tint: #00bfad;
  478. }
  479. .text-color-teal {
  480. --f7-theme-color-text-color: #009688;
  481. }
  482. .bg-color-teal {
  483. --f7-theme-color-bg-color: #009688;
  484. }
  485. .border-color-teal {
  486. --f7-theme-color-border-color: #009688;
  487. }
  488. .ripple-color-teal,
  489. .ripple-teal {
  490. --f7-theme-color-ripple-color: rgba(0, 150, 136, 0.3);
  491. }
  492. .color-lime {
  493. --f7-theme-color: #cddc39;
  494. --f7-theme-color-rgb: 205, 220, 57;
  495. --f7-theme-color-shade: #bac923;
  496. --f7-theme-color-tint: #d6e25c;
  497. }
  498. .text-color-lime {
  499. --f7-theme-color-text-color: #cddc39;
  500. }
  501. .bg-color-lime {
  502. --f7-theme-color-bg-color: #cddc39;
  503. }
  504. .border-color-lime {
  505. --f7-theme-color-border-color: #cddc39;
  506. }
  507. .ripple-color-lime,
  508. .ripple-lime {
  509. --f7-theme-color-ripple-color: rgba(205, 220, 57, 0.3);
  510. }
  511. .color-deeporange {
  512. --f7-theme-color: #ff6b22;
  513. --f7-theme-color-rgb: 255, 107, 34;
  514. --f7-theme-color-shade: #f85200;
  515. --f7-theme-color-tint: #ff864b;
  516. }
  517. .text-color-deeporange {
  518. --f7-theme-color-text-color: #ff6b22;
  519. }
  520. .bg-color-deeporange {
  521. --f7-theme-color-bg-color: #ff6b22;
  522. }
  523. .border-color-deeporange {
  524. --f7-theme-color-border-color: #ff6b22;
  525. }
  526. .ripple-color-deeporange,
  527. .ripple-deeporange {
  528. --f7-theme-color-ripple-color: rgba(255, 107, 34, 0.3);
  529. }
  530. .color-gray {
  531. --f7-theme-color: #8e8e93;
  532. --f7-theme-color-rgb: 142, 142, 147;
  533. --f7-theme-color-shade: #79797f;
  534. --f7-theme-color-tint: #a3a3a7;
  535. }
  536. .text-color-gray {
  537. --f7-theme-color-text-color: #8e8e93;
  538. }
  539. .bg-color-gray {
  540. --f7-theme-color-bg-color: #8e8e93;
  541. }
  542. .border-color-gray {
  543. --f7-theme-color-border-color: #8e8e93;
  544. }
  545. .ripple-color-gray,
  546. .ripple-gray {
  547. --f7-theme-color-ripple-color: rgba(142, 142, 147, 0.3);
  548. }
  549. .color-white {
  550. --f7-theme-color: #ffffff;
  551. --f7-theme-color-rgb: 255, 255, 255;
  552. --f7-theme-color-shade: #ebebeb;
  553. --f7-theme-color-tint: #ffffff;
  554. }
  555. .text-color-white {
  556. --f7-theme-color-text-color: #ffffff;
  557. }
  558. .bg-color-white {
  559. --f7-theme-color-bg-color: #ffffff;
  560. }
  561. .border-color-white {
  562. --f7-theme-color-border-color: #ffffff;
  563. }
  564. .ripple-color-white,
  565. .ripple-white {
  566. --f7-theme-color-ripple-color: rgba(255, 255, 255, 0.3);
  567. }
  568. .color-black {
  569. --f7-theme-color: #000000;
  570. --f7-theme-color-rgb: 0, 0, 0;
  571. --f7-theme-color-shade: #000000;
  572. --f7-theme-color-tint: #141414;
  573. }
  574. .text-color-black {
  575. --f7-theme-color-text-color: #000000;
  576. }
  577. .bg-color-black {
  578. --f7-theme-color-bg-color: #000000;
  579. }
  580. .border-color-black {
  581. --f7-theme-color-border-color: #000000;
  582. }
  583. .ripple-color-black,
  584. .ripple-black {
  585. --f7-theme-color-ripple-color: rgba(0, 0, 0, 0.3);
  586. }
  587. @font-face {
  588. font-family: 'framework7-core-icons';
  589. src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAA0sABAAAAAAGRAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAANEAAAABoAAAAci1jrz0dERUYAAAsIAAAAIwAAACQAfQBXR1BPUwAADOAAAAAuAAAANuAY7+xHU1VCAAALLAAAAbMAAAQuAxQJ5U9TLzIAAAHcAAAASgAAAGBRKF+WY21hcAAAAowAAACIAAABYt6F0cBjdnQgAAADFAAAAAQAAAAEABEBRGdhc3AAAAsAAAAACAAAAAj//wADZ2x5ZgAAA6wAAASlAAAKBIq7ZiloZWFkAAABbAAAADAAAAA2FnYC32hoZWEAAAGcAAAAIAAAACQHgQM9aG10eAAAAigAAABhAAABJC+cAAFsb2NhAAADGAAAAJQAAACURlRI+G1heHAAAAG8AAAAHwAAACAAjwBMbmFtZQAACFQAAAFTAAAC2WC6Sihwb3N0AAAJqAAAAVYAAAJ2B5LxL3jaY2BkYGAA4iKuLVLx/DZfGbiZGEDgZk2iIYz+/+NfL0sa02cgl4MBLA0AJsoLsnjaY2BkYGD6/K+XQY8l7f8PBgaWNAagCArwBACRVQXFeNpjYGRgYPBkkGZgYQABJiBmZACJOTDogQQADdEA3AB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPabPjMUwNYwHwEoUGMQAQ7UMZAAAeNpj2M0gyAACqxgGNWAMAGIdID4A5OwD0rOA+BBI7P9PhuNAMSBmSYOK+wKxExCfBWIJoNzZ/z8Y3YBsF6g4kM2UBpFjBNJMb/7/Z9gNZBtDzGY6CzGHCcQHigMA2dAWtwAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIB3gIAAioCPAJSAmQChAKUAqQC1gLsAv4DHgMwA0IDYANyA5YDtAPEA+oD/AQWBEYEZgR4BIoEsgTIBOIFAnja7VXBTyNVGP++Ke106XamnbYztYeVlukMRmWl03ZwLdAIeCCKZgOKXBY2m15Es8S03lpuSzaSGsOGQPZGoomegI0mmwjVC5uNdZPGgzGc8MDG4ImLmyxTvzfTKmX/A7PJe/O995vXN7/3+37fK3AQBIB1nAYX8NC/hXA5t813wV+pLY/7ILft4mgIWy4Guxm8zXvwaW4bGW4EjaBuBHuDy58VCjhtfRtEg3ZDajW70yg4wMbPsefY/x7jzmAuQl/nbBi6qF/A93CWKkyECCgAUsITllPZtJaSw56ElnabuoiKqX8zlctN5e4uTEwsTOCo/6YgLAqLmM9NDQ1NvT/B4CfCTT8DHQ7NH9Ggj0gAyYTIsZ1GUNfS2dSLKKOOiH/4emTf3p5PjvsOxW2OO/TJPb7dPYYeig7n5hHW8Cu6B16gXRRez+ie3gTbQ46EeSXBWBJbzC9pS3z/yPj8/O3rffx3c2Njc6MrS1olwvfN356fHx/u50fnRkfnbF6gwS6d1w0Q4mlLc7dUUjc2MGsHaHE/wQ1cAS99NRJnixQeN6wHVbVeV6u/p53YWgt+/AlvsP1MVFA3qyiqVr2qTrciYPMJafEyaUH3mZkdQaIfJkmZvJdRcyOdnM68u8vOfyg+Qtch04TmjhLsG2HYdzibREY39zfVSkX9np7lZOf7DFFV+NbrZLmi2jpaK10F7gR8LL9JnRYoJmXU1LkelQtIak+XFOC4/H52v93esH6xTtfW0IUpdK2t/blvtl+ZTw/+ha1TtuxZzZhgdP+auMF0Mr6osYCDJGBbszy+g3nw0EThB2g1vqQeLKqEUeh921mzgG+iBgEaMblsrWz3mFlMC/wyL1MXZG+x6EVNYBOGCXyxyNtnhlms0+/ZfwcMYTzizsQjWLcMrJ8Yxrph2JxrGKW8kG5JZLpitAnRx4+jNScQj+bf8CH8iq+CAECZU2QRBSQmZlaZmOsOBLo/doc8V/yCePHzL8Vun/i1F/m8eNEvOGe4hm8RB+Y1chGvb9qJQc0O4HgcZByj3Pmp+oCSd8bhnpa/j2dCM+pr5uTkJ5NbM8PDM8NLH4RmLtFs0hy4MsKQTr2Yw6jIbHvxrPA6xJKFtbZUpRJhnTxJBPKGw/Paplouq3YdrnAFPCElQwDpAJELeBJI52k76Z51754FzVih0G55hJ2dJuzg+hkQOjXPIPMqQvToKFrDluLtmirgp+RXQN4WzqaFhWpVbTd898yE8tS09rhjrgYxAHfQ1i9oDrMi49GjJ3TsJ9+kFBxU08mfpXRIkqyHkVgsZD2UMCRlpI+441gyGTsN19k8zd5yIcxKBq1scboE9/E60zfrePG/Qr7fab/+gHfZG6YekB03Or8fp/tQsz1vW95E49EN6eoPGLbD+buJ3To63UhqsYizFEqlll+as1yd0+AC8wvlwmDJ6E2EzlR1Y/VOo3FndbWcLVOrsOcr2NdoWL818G7FLJfNiv08X7f2N+OZuF5n9Wo9wMEqrrBh2q5bF+PHGcSP1RTlJphxqop1zjitO52USS/Z7bxuAceWrJadPwMy5C2ev+V1rIhXn9HtH4d0614AAAB42q2QvU7DMBSFj9u0EgyIgewe26qJnA79G6nUpQtiyB5S01ht4sqNVFW8DBsbIxtPwcLEzltw7RqJoQNDI135y/G59rkGcIVXMBy/Du49M4R48dzAJT48N5GwW88BQvbsuYVr9um5jbARkpMFF/R357osM/Tw5LmBG7x7buIBX54D9FjtuQXO3jy3Sf/GDBpbHGCgsEKBGpwy5+jSOoBAggn6xCk2yLAkV0llSFmQOyOyeklnKLeLmd4ejFoVNe/kXT4QyaTP0022VKUyfFFkZpOVW7Uk5yM121aJPYUwWGOEiK62LImU4wo7spqslHtt1qMo10ZGKtcVySe9fw1zJ9ZuNTSfdFPFNBfHlOr/EY7+BENSx1S/b4O5ruq5NivJB7HgU34yKunJMBpH9jnOMXhKPkP7yvk4ZbFpYrfa2ZBKs1O64kIksRCCn+HSH1E3hiEAeNptkAlPwkAUhGfAAxAsyCV4/hbjfd+3aWq7SiN0yXY5/rzRhVKhiZs06b5v3rzZhxTG5+cbxH/nyHxECmkUUUYFVdRQxyoaaGIN69jBLvawjwMcGu0xTnCKM5zjApe4wjVucIs73OMBj3jCM17wijemmOYc57nARWaYZY5LzLPAZVosssQVlllhlTXWucoGm1zjOje4yS1u50LhKLdl+zIsuS3RVzKwlf/Z0qNKdgI7nhWztvjQ5l5wlJKD+LZkqPv1Lofmv5hQGpNCwjY/i2uB1P6H7zraNxW3LUMx6rAi83eptewYy6xyPF+OSDnu9uQgsJ2ekspZDKUahwgHflcoOxBDbf0FijS5uK/XLUzeFIHSFEwq+dkRlifaQgtbyV7gzczoKtHPTphZRlcrO8o8m3G8gKlplMcIisk9m5UlphjFcmQW88z4haZeSXZG3r8TK74rAAAAAAAB//8AAnjaY2BkYGDgAWIZIGYCQmYGTQZGBi0GDyCbBSzGAAANdgDVAHjadVJJTgJBFH1FdwKOIKB0lEEGwSDOs+KsaDyDGzYaE+LCEA/gwjMY4zlcegbjEYwLb4HvVwM9hXS6q/q9V/+/+v9DARhGFjWoVrP9gAhMIuh0IIxq3d81icH+I2fqNQJl/CKMJJ5C7dC3YRolow6D+Dwa2EAUeT5ZlLmb4Frkk0Waf2kkqBh38XlYmEKKCptdwpiLnWGOyT4XxSyu8Yg3fOJHmaqsGupWPat39aG+1B+uqE7xndPnM77oMZQ0nufulNG8SieTW7cV0CW0s4xPV+c9vboScj7NQkDjdmcRK2CFukG+bMV5QOGv4CLXQTGE3+3ycUzr7lR8PlfZgUEZzjAaOGv7WusywawHAaZXw2WMBKKJwz3OZLCaMl9V9v+CHpM6epFvVGtKVCX6Xg65G6SQ+McY8vCCyXSv85YyrRZ9W3QV03vbQZx6iZ3sZ5ETJ6xVkfGlgs7UOvwmM8UYXZAeHiZSYx9vOMkveMU+YyT1+Thv7e3FEStU5rkcFZIlx6/UZceHZ7hW6KTKyrlj2Rlr+r4OKve9ZDUlhzNZ23TWQ+yKiNM4dxmdt/APtJZExAB42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPpmTaIhjAYAPREFnQAA") format("woff");
  590. font-weight: 400;
  591. font-style: normal;
  592. }
  593. @font-face {
  594. font-family: 'framework7-skeleton';
  595. src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAYQAA0AAAAAEcQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAF9AAAABkAAAAciVvoDU9TLzIAAAGcAAAASwAAAGBRtV1jY21hcAAAAfwAAAC8AAABamglddJjdnQgAAACuAAAAAQAAAAEABEBRGdhc3AAAAXsAAAACAAAAAj //wADZ2x5ZgAAA2wAAACUAAAJjHCzhiRoZWFkAAABMAAAAC4AAAA2ERr/HWhoZWEAAAFgAAAAGgAAACQC8ADFaG10eAAAAegAAAATAAAAtAMAABFsb2NhAAACvAAAAK4AAACuaNBmhG1heHAAAAF8AAAAHwAAACAAmgA5bmFtZQAABAAAAAFQAAACuLf6wytwb3N0AAAFUAAAAJkAAADOCKMIc3jaY2BkYGAA4lUx8ibx/DZfGbiZGEDgRu39AAT9/wAjA+MBIJeDASwNACBICpsAAHjaY2BkYGA88P8Agx6QAQSMYIQCWABQZgK3AAB42mNgZGBgCGPgYGBiAAEQycgAEnNg0AMJAAANJwDUAHjaY2BhZGCcwMDKwMDow5jGwMDgDqW/MkgytDAwMDGwcjLAACMDEghIc01haGBQYKhlPPD/AIMe4wEGB5gaxgNAHgNQjhEA6dgLvQB42mNkYBBkAAJGKB4KAAAOfQAVAHjaY2BgYGaAYBkGRgYQSAHyGMF8FgYPIM3HwMHAxMDGoMSgxWDNEMsQz1D7/z9QXIFBjUGHwRHIT/z////j/w/+3/9/6//N/zeg5iABRjYGuCAjE5BgQlcAdAILK5DBxs7BycXAzcPLxy8gKCQsIiomLiEpBVYjLSMrJ6+gqKSsoqqmrqGppa2jq6dvYGhkbGJqZs5gwWBpZW1ja2fv4Ojk7OLq5u7h6eXt4+vnHxAYFBwSyjDgAABJLiG7ABEBRAAAACoAKgAqADgARgBUAGIAcAB+AIwAmgCoALYAxADYAOYA9AECARABHgEsAToBSAFWAWQBcgGAAY4BnAGqAbgBxgHUAeIB8AH+AgwCGgIoAjYCRAJSAmACbgJ8AooCmAKmArQCwgLQAt4C8gMAAw4DHAMqAzgDRgNUA2IDcAN+A4wDmgOoA7YDxAPSA+AD7gP8BAoEGAQmBDQEQgRQBF4EbAR6BIgEnASqBLgExgAAeNpjYGIQZGBgmMkYysDMwM6gt5GRQd9mEzsLw1ujjWysd2w2MTMBmQwbmUHCrCDhTexsjH9sNjGCxI0FjQXVjQWVBTvK09IYQ/+tFmQ0BprGyMDw/wAjA+MBoJkMooKKgowMDkwM/xgYRuVwyjEhybFDZBXBKv4zQFVBVI6G36jcqNyo3GiZMSo3Kjes8hQAx51w5njapZC9agJBFIXP+EfSBMEXmEoU3GVcBNFWsLEJKbYKhEUnOrjryrggkgfIQ6RMnzZVHiBNijxM6pydHUiRFAEXLvebc8+duXcBXOEFAtXXw41ngQ6ePddwgXfPdYRCeW6gIx49N9EWb55b1L/oFI1Lnq5dV8kCXTx4rqGNV8913OLTcwNdcee5CSmePLeof2CGHHucYGGwxgYFJGdeos8cQWGICQbkGCkSrOjKGJbKgu6EVOoZ7zCuilm+P1mz3hSyt+zLSA0nAxmnycpkxsrFJrFpku3Nis57NpetGkcOYbHFGAEOzJqXao6SY0ebTTJ9zO12HBy2OtVFTvGX66c0d0LhsuVO2m0ScheJKeN/z1beESuRi+pPYJ7vinlu11pGoZJT+cdwVEdBFJSbn7djzLql1/iBlBsidLlcBrG2B8MHlRqGSil51nPfEi6AO3jaXc5ZM4IBAEbhp9RF1FhCRbmyVNYskSXG0CaEQvaf2j/LN112bt6Zc/HOETZiOJAJJmSc15ENmxARFTNpSlzCtBmz5iTNW7AoJR08LFmWlbNi1Zp1G/IKijZt2bZj156SfQcOHSk7dqLi1JlzF6ouXbl241ZNXUNTy522ew8edTx59qKrF3S9edf34dOXbz9+/f0DgycTFgAAAAAAAAH//wACeNpjYGBgZACCGwmaOWC69n4AjAYARC0G1wAAAA==") format("woff");
  596. font-weight: 300, 400, 500, 600, 700;
  597. font-style: normal, italic;
  598. }
  599. html {
  600. direction: rtl;
  601. }
  602. html,
  603. body,
  604. .framework7-root {
  605. position: relative;
  606. height: 100%;
  607. width: 100%;
  608. overflow-x: hidden;
  609. }
  610. body {
  611. margin: 0;
  612. padding: 0;
  613. width: 100%;
  614. background: #fff;
  615. overflow: hidden;
  616. -webkit-text-size-adjust: 100%;
  617. -webkit-font-smoothing: antialiased;
  618. font-family: var(--f7-font-family);
  619. font-size: var(--f7-font-size);
  620. line-height: var(--f7-line-height);
  621. color: var(--f7-text-color);
  622. }
  623. .theme-dark body,
  624. body.theme-dark {
  625. background: #000;
  626. }
  627. .theme-dark {
  628. color: var(--f7-text-color);
  629. }
  630. .framework7-root {
  631. overflow: hidden;
  632. box-sizing: border-box;
  633. }
  634. .framework7-initializing *,
  635. .framework7-initializing *:before,
  636. .framework7-initializing *:after {
  637. transition-duration: 0ms !important;
  638. }
  639. .device-ios,
  640. .device-android {
  641. cursor: pointer;
  642. }
  643. .device-ios {
  644. touch-action: manipulation;
  645. }
  646. @media (width: 1024px) and (height: 691px) and (orientation: landscape) {
  647. html,
  648. body,
  649. .framework7-root {
  650. height: 671px;
  651. }
  652. }
  653. @media (width: 1024px) and (height: 692px) and (orientation: landscape) {
  654. html,
  655. body,
  656. .framework7-root {
  657. height: 672px;
  658. }
  659. }
  660. * {
  661. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  662. -webkit-touch-callout: none;
  663. }
  664. a,
  665. input,
  666. textarea,
  667. select {
  668. outline: 0;
  669. }
  670. a {
  671. cursor: pointer;
  672. text-decoration: none;
  673. color: var(--f7-theme-color);
  674. }
  675. .link,
  676. .item-link {
  677. cursor: pointer;
  678. }
  679. p {
  680. margin: 1em 0;
  681. }
  682. .disabled {
  683. opacity: 0.55 !important;
  684. pointer-events: none !important;
  685. }
  686. html.device-full-viewport,
  687. html.device-full-viewport body {
  688. height: 100vh;
  689. }
  690. .ios .md-only,
  691. .ios .if-md,
  692. .ios .aurora-only,
  693. .ios .if-aurora,
  694. .ios .if-not-ios,
  695. .ios .not-ios {
  696. display: none !important;
  697. }
  698. @media (width: 1024px) and (height: 691px) and (orientation: landscape) {
  699. .ios,
  700. .ios body,
  701. .ios .framework7-root {
  702. height: 671px;
  703. }
  704. }
  705. @media (width: 1024px) and (height: 692px) and (orientation: landscape) {
  706. .ios,
  707. .ios body,
  708. .ios .framework7-root {
  709. height: 672px;
  710. }
  711. }
  712. .md .ios-only,
  713. .md .if-ios,
  714. .md .aurora-only,
  715. .md .if-aurora,
  716. .md .if-not-md,
  717. .md .not-md {
  718. display: none !important;
  719. }
  720. .aurora .ios-only,
  721. .aurora .if-ios,
  722. .aurora .md-only,
  723. .aurora .if-md,
  724. .aurora .if-not-aurora,
  725. .aurora .not-aurora {
  726. display: none !important;
  727. }
  728. /* === Statusbar === */
  729. /* === Views === */
  730. .views,
  731. .view {
  732. position: relative;
  733. height: 100%;
  734. z-index: 5000;
  735. overflow: hidden;
  736. box-sizing: border-box;
  737. }
  738. .framework7-root > .view,
  739. .framework7-root > .views {
  740. height: calc(100% - var(--f7-appbar-app-offset, 0px));
  741. }
  742. .view-resize-handler {
  743. width: 6px;
  744. height: 100%;
  745. position: absolute;
  746. left: var(--f7-page-master-width);
  747. margin-left: -3px;
  748. top: 0;
  749. cursor: col-resize;
  750. z-index: 1000;
  751. display: none;
  752. }
  753. .view-master-detail .view-resize-handler {
  754. display: block;
  755. }
  756. /* === Pages === */
  757. :root {
  758. --f7-page-master-width: 320px;
  759. --f7-page-master-border-color: rgba(0, 0, 0, 0.1);
  760. --f7-page-master-border-width: 1px;
  761. --f7-page-swipeback-transition-duration: 300ms;
  762. --f7-page-parallax-transition-duration: 500ms;
  763. --f7-page-cover-transition-duration: 450ms;
  764. --f7-page-dive-transition-duration: 500ms;
  765. --f7-page-fade-transition-duration: 500ms;
  766. --f7-page-flip-transition-duration: 700ms;
  767. --f7-page-push-transition-duration: 500ms;
  768. /*
  769. --f7-page-content-extra-padding-top: 0px;
  770. --f7-page-content-extra-padding-bottom: 0px;
  771. */
  772. }
  773. .ios {
  774. --f7-page-transition-duration: 400ms;
  775. --f7-page-bg-color: #efeff4;
  776. }
  777. .ios .theme-dark,
  778. .ios.theme-dark {
  779. --f7-page-bg-color: #000;
  780. }
  781. .md {
  782. --f7-page-transition-duration: 250ms;
  783. --f7-page-bg-color: #fff;
  784. }
  785. .md .theme-dark,
  786. .md.theme-dark {
  787. --f7-page-bg-color: #121212;
  788. }
  789. .aurora {
  790. --f7-page-transition-duration: 400ms;
  791. --f7-page-bg-color: #f3f3f3;
  792. }
  793. .aurora .theme-dark,
  794. .aurora.theme-dark {
  795. --f7-page-bg-color: #121212;
  796. }
  797. .theme-dark {
  798. --f7-page-master-border-color: rgba(255, 255, 255, 0.1);
  799. }
  800. .pages {
  801. position: relative;
  802. width: 100%;
  803. height: 100%;
  804. overflow: hidden;
  805. }
  806. .page {
  807. box-sizing: border-box;
  808. position: absolute;
  809. left: 0;
  810. top: 0;
  811. width: 100%;
  812. height: 100%;
  813. transform: none;
  814. background-color: var(--f7-page-bg-color);
  815. z-index: 1;
  816. }
  817. .page.stacked {
  818. display: none;
  819. }
  820. .page-with-navbar-large-collapsed {
  821. --f7-navbar-large-collapse-progress: 1;
  822. }
  823. .page-previous {
  824. pointer-events: none;
  825. }
  826. .page-content {
  827. overflow: auto;
  828. -webkit-overflow-scrolling: touch;
  829. box-sizing: border-box;
  830. height: 100%;
  831. position: relative;
  832. z-index: 1;
  833. padding-top: calc(var(--f7-page-navbar-offset, 0px) + var(--f7-page-toolbar-top-offset, 0px) + var(--f7-page-subnavbar-offset, 0px) + var(--f7-page-searchbar-offset, 0px) + var(--f7-page-content-extra-padding-top, 0px));
  834. padding-bottom: calc(var(--f7-page-toolbar-bottom-offset, 0px) + var(--f7-safe-area-bottom) + var(--f7-page-content-extra-padding-bottom, 0px));
  835. }
  836. .page-transitioning,
  837. .page-transitioning .page-shadow-effect,
  838. .page-transitioning .page-opacity-effect {
  839. transition-duration: var(--f7-page-transition-duration);
  840. }
  841. .page-transitioning-swipeback,
  842. .page-transitioning-swipeback .page-shadow-effect,
  843. .page-transitioning-swipeback .page-opacity-effect {
  844. transition-duration: var(--f7-page-swipeback-transition-duration);
  845. }
  846. .router-transition-forward .page-next,
  847. .router-transition-backward .page-next,
  848. .router-transition-forward .page-current,
  849. .router-transition-backward .page-current,
  850. .router-transition-forward .page-previous:not(.stacked),
  851. .router-transition-backward .page-previous:not(.stacked) {
  852. pointer-events: none;
  853. }
  854. .page-shadow-effect {
  855. position: absolute;
  856. top: 0;
  857. width: 16px;
  858. bottom: 0;
  859. z-index: -1;
  860. content: '';
  861. opacity: 0;
  862. left: 100%;
  863. background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
  864. }
  865. .page-opacity-effect {
  866. position: absolute;
  867. left: 0;
  868. top: 0;
  869. background: rgba(0, 0, 0, 0.1);
  870. width: 100%;
  871. bottom: 0;
  872. content: '';
  873. opacity: 0;
  874. z-index: 10000;
  875. }
  876. .ios .page-previous {
  877. transform: translate3d(20%, 0, 0);
  878. }
  879. .ios .page-next {
  880. transform: translate3d(-100%, 0, 0);
  881. }
  882. .ios .page-previous .page-opacity-effect {
  883. opacity: 1;
  884. }
  885. .ios .page-previous:after {
  886. opacity: 1;
  887. }
  888. .ios .page-current .page-shadow-effect {
  889. opacity: 1;
  890. }
  891. .ios .router-transition-forward .page-next {
  892. animation: ios-page-next-to-current var(--f7-page-transition-duration) forwards;
  893. }
  894. .ios .router-transition-forward .page-next:before {
  895. position: absolute;
  896. top: 0;
  897. width: 16px;
  898. bottom: 0;
  899. z-index: -1;
  900. content: '';
  901. opacity: 0;
  902. left: 100%;
  903. background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
  904. animation: ios-page-element-fade-in var(--f7-page-transition-duration) forwards;
  905. }
  906. .ios .router-transition-forward .page-current {
  907. animation: ios-page-current-to-previous var(--f7-page-transition-duration) forwards;
  908. }
  909. .ios .router-transition-forward .page-current:after {
  910. position: absolute;
  911. left: 0;
  912. top: 0;
  913. background: rgba(0, 0, 0, 0.1);
  914. width: 100%;
  915. bottom: 0;
  916. content: '';
  917. opacity: 0;
  918. z-index: 10000;
  919. animation: ios-page-element-fade-in var(--f7-page-transition-duration) forwards;
  920. }
  921. .ios .router-transition-backward .page-previous {
  922. animation: ios-page-previous-to-current var(--f7-page-transition-duration) forwards;
  923. }
  924. .ios .router-transition-backward .page-previous:after {
  925. position: absolute;
  926. left: 0;
  927. top: 0;
  928. background: rgba(0, 0, 0, 0.1);
  929. width: 100%;
  930. bottom: 0;
  931. content: '';
  932. opacity: 0;
  933. z-index: 10000;
  934. animation: ios-page-element-fade-out var(--f7-page-transition-duration) forwards;
  935. }
  936. .ios .router-transition-backward .page-current {
  937. animation: ios-page-current-to-next var(--f7-page-transition-duration) forwards;
  938. }
  939. .ios .router-transition-backward .page-current:before {
  940. position: absolute;
  941. top: 0;
  942. width: 16px;
  943. bottom: 0;
  944. z-index: -1;
  945. content: '';
  946. opacity: 0;
  947. left: 100%;
  948. background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
  949. animation: ios-page-element-fade-out var(--f7-page-transition-duration) forwards;
  950. }
  951. @keyframes ios-page-next-to-current {
  952. from {
  953. transform: translate3d(-100%, 0, 0);
  954. }
  955. to {
  956. transform: translate3d(0%, 0, 0);
  957. }
  958. }
  959. @keyframes ios-page-previous-to-current {
  960. from {
  961. transform: translate3d(20%, 0, 0);
  962. }
  963. to {
  964. transform: translate3d(0%, 0, 0);
  965. }
  966. }
  967. @keyframes ios-page-current-to-previous {
  968. from {
  969. transform: translate3d(0, 0, 0);
  970. }
  971. to {
  972. transform: translate3d(20%, 0, 0);
  973. }
  974. }
  975. @keyframes ios-page-current-to-next {
  976. from {
  977. transform: translate3d(0, 0, 0);
  978. }
  979. to {
  980. transform: translate3d(-100%, 0, 0);
  981. }
  982. }
  983. @keyframes ios-page-element-fade-in {
  984. from {
  985. opacity: 0;
  986. }
  987. to {
  988. opacity: 1;
  989. }
  990. }
  991. @keyframes ios-page-element-fade-out {
  992. from {
  993. opacity: 1;
  994. }
  995. to {
  996. opacity: 0;
  997. }
  998. }
  999. .md .page-next {
  1000. transform: translate3d(0, 56px, 0);
  1001. opacity: 0;
  1002. pointer-events: none;
  1003. }
  1004. .md .page-next.page-next-on-right {
  1005. transform: translate3d(-100%, 0, 0);
  1006. }
  1007. .md .router-transition-forward .page-next {
  1008. animation: md-page-next-to-current var(--f7-page-transition-duration) forwards;
  1009. }
  1010. .md .router-transition-forward .page-current {
  1011. animation: none;
  1012. }
  1013. .md .router-transition-backward .page-current {
  1014. animation: md-page-current-to-next var(--f7-page-transition-duration) forwards;
  1015. }
  1016. .md .router-transition-backward .page-previous {
  1017. animation: none;
  1018. }
  1019. @keyframes md-page-next-to-current {
  1020. from {
  1021. transform: translate3d(0, 56px, 0);
  1022. opacity: 0;
  1023. }
  1024. to {
  1025. transform: translate3d(0, 0px, 0);
  1026. opacity: 1;
  1027. }
  1028. }
  1029. @keyframes md-page-current-to-next {
  1030. from {
  1031. transform: translate3d(0, 0, 0);
  1032. opacity: 1;
  1033. }
  1034. to {
  1035. transform: translate3d(0, 56px, 0);
  1036. opacity: 0;
  1037. }
  1038. }
  1039. .aurora .page-next {
  1040. pointer-events: none;
  1041. transform: translate3d(-100%, 0px, 0);
  1042. }
  1043. .aurora .page-next.page-next-on-right {
  1044. transform: translate3d(-100%, 0, 0);
  1045. }
  1046. .aurora .page-previous .page-opacity-effect {
  1047. opacity: 1;
  1048. }
  1049. .aurora .page-previous:after {
  1050. opacity: 1;
  1051. }
  1052. .aurora .router-transition-forward .page-next {
  1053. animation: aurora-page-next-to-current var(--f7-page-transition-duration) forwards;
  1054. }
  1055. .aurora .router-transition-forward .page-current {
  1056. animation: none;
  1057. }
  1058. .aurora .router-transition-forward .page-current:after {
  1059. position: absolute;
  1060. left: 0;
  1061. top: 0;
  1062. background: rgba(0, 0, 0, 0.1);
  1063. width: 100%;
  1064. bottom: 0;
  1065. content: '';
  1066. opacity: 0;
  1067. z-index: 10000;
  1068. animation: aurora-page-element-fade-in var(--f7-page-transition-duration) forwards;
  1069. }
  1070. .aurora .router-transition-backward .page-current {
  1071. animation: aurora-page-current-to-next var(--f7-page-transition-duration) forwards;
  1072. }
  1073. .aurora .router-transition-backward .page-previous {
  1074. animation: none;
  1075. }
  1076. .aurora .router-transition-backward .page-previous:after {
  1077. position: absolute;
  1078. left: 0;
  1079. top: 0;
  1080. background: rgba(0, 0, 0, 0.1);
  1081. width: 100%;
  1082. bottom: 0;
  1083. content: '';
  1084. opacity: 0;
  1085. z-index: 10000;
  1086. animation: aurora-page-element-fade-out var(--f7-page-transition-duration) forwards;
  1087. }
  1088. @keyframes aurora-page-next-to-current {
  1089. from {
  1090. transform: translate3d(-100%, 0, 0);
  1091. }
  1092. to {
  1093. transform: translate3d(0, 0px, 0);
  1094. }
  1095. }
  1096. @keyframes aurora-page-current-to-next {
  1097. from {
  1098. transform: translate3d(0, 0, 0);
  1099. }
  1100. to {
  1101. transform: translate3d(-100%, 0, 0);
  1102. }
  1103. }
  1104. @keyframes aurora-page-element-fade-in {
  1105. from {
  1106. opacity: 0;
  1107. }
  1108. to {
  1109. opacity: 1;
  1110. }
  1111. }
  1112. @keyframes aurora-page-element-fade-out {
  1113. from {
  1114. opacity: 1;
  1115. }
  1116. to {
  1117. opacity: 0;
  1118. }
  1119. }
  1120. .view:not(.view-master-detail) .page-master-stacked {
  1121. display: none;
  1122. }
  1123. .view:not(.view-master-detail) .navbar-master-stacked {
  1124. display: none;
  1125. }
  1126. .view-master-detail .page-master,
  1127. .view-master-detail .navbar-master {
  1128. width: var(--f7-page-master-width);
  1129. left: auto;
  1130. right: 0;
  1131. --f7-safe-area-left: 0px;
  1132. --f7-safe-area-outer-left: 0px;
  1133. border-left: var(--f7-page-master-border-width) solid var(--f7-page-master-border-color);
  1134. }
  1135. .view-master-detail .page-master-detail,
  1136. .view-master-detail .navbar-master-detail {
  1137. width: calc(100% - var(--f7-page-master-width));
  1138. --f7-safe-area-right: 0px;
  1139. --f7-safe-area-outer-right: 0px;
  1140. right: var(--f7-page-master-width);
  1141. }
  1142. .view-master-detail .page-master {
  1143. z-index: 2;
  1144. transform: none;
  1145. pointer-events: auto;
  1146. }
  1147. .view-master-detail .page-master:before,
  1148. .view-master-detail .page-master:after {
  1149. display: none;
  1150. }
  1151. .view-master-detail.router-transition .page-master {
  1152. animation: none;
  1153. }
  1154. .md .router-transition-custom .page-previous,
  1155. .ios .router-transition-custom .page-previous,
  1156. .aurora .router-transition-custom .page-previous,
  1157. .md .router-transition-custom .page-next,
  1158. .ios .router-transition-custom .page-next,
  1159. .aurora .router-transition-custom .page-next {
  1160. opacity: 1;
  1161. transform: none;
  1162. }
  1163. .router-transition-f7-circle-forward:after,
  1164. .router-transition-f7-circle-backward:after {
  1165. content: '';
  1166. position: absolute;
  1167. left: 50%;
  1168. top: 50%;
  1169. width: 100vmax;
  1170. height: 100vmax;
  1171. margin-left: -50vmax;
  1172. margin-top: -50vmax;
  1173. background: var(--f7-page-bg-color);
  1174. z-index: 100;
  1175. }
  1176. .router-transition-f7-circle-forward:after {
  1177. transform: scale(0);
  1178. border-radius: 50%;
  1179. animation: f7-circle-circle-in 400ms forwards;
  1180. }
  1181. .router-transition-f7-circle-forward .page-next {
  1182. opacity: 0 !important;
  1183. transform: scale(0.9) !important;
  1184. animation: f7-circle-next-to-current 300ms forwards;
  1185. animation-delay: 300ms;
  1186. z-index: 150;
  1187. }
  1188. .router-transition-f7-circle-backward:after {
  1189. animation: f7-circle-circle-out 300ms forwards;
  1190. animation-delay: 350ms;
  1191. }
  1192. .router-transition-f7-circle-backward .page-current {
  1193. animation: f7-circle-current-to-next 700ms forwards;
  1194. z-index: 150;
  1195. }
  1196. @keyframes f7-circle-circle-in {
  1197. from {
  1198. transform: scale(0);
  1199. border-radius: 50%;
  1200. }
  1201. 50% {
  1202. border-radius: 50%;
  1203. }
  1204. to {
  1205. transform: scale(1);
  1206. border-radius: 0%;
  1207. }
  1208. }
  1209. @keyframes f7-circle-circle-out {
  1210. from {
  1211. transform: scale(1);
  1212. border-radius: 0%;
  1213. }
  1214. 50% {
  1215. border-radius: 50%;
  1216. }
  1217. to {
  1218. transform: scale(0);
  1219. border-radius: 50%;
  1220. }
  1221. }
  1222. @keyframes f7-circle-next-to-current {
  1223. from {
  1224. transform: scale(0.9);
  1225. opacity: 0;
  1226. }
  1227. 40% {
  1228. transform: scale(1.035);
  1229. opacity: 1;
  1230. }
  1231. to {
  1232. transform: scale(1);
  1233. opacity: 1;
  1234. }
  1235. }
  1236. @keyframes f7-circle-current-to-next {
  1237. from {
  1238. transform: scale(1);
  1239. opacity: 1;
  1240. }
  1241. 34% {
  1242. transform: scale(1.035);
  1243. opacity: 1;
  1244. }
  1245. 57% {
  1246. transform: scale(0.9);
  1247. opacity: 0;
  1248. }
  1249. to {
  1250. transform: scale(0.9);
  1251. opacity: 0;
  1252. }
  1253. }
  1254. .router-transition-f7-cover-v-forward,
  1255. .router-transition-f7-cover-v-backward {
  1256. background: #000;
  1257. perspective: 1200px;
  1258. }
  1259. .router-transition-f7-cover-v-forward .page-next {
  1260. animation: f7-cover-v-next-to-current var(--f7-page-cover-transition-duration) forwards;
  1261. }
  1262. .router-transition-f7-cover-v-forward .page-current {
  1263. animation: f7-cover-v-current-to-prev var(--f7-page-cover-transition-duration) forwards;
  1264. }
  1265. .router-transition-f7-cover-v-backward .page-current {
  1266. animation: f7-cover-v-current-to-next var(--f7-page-cover-transition-duration) forwards;
  1267. }
  1268. .router-transition-f7-cover-v-backward .page-previous {
  1269. animation: f7-cover-v-prev-to-current var(--f7-page-cover-transition-duration) forwards;
  1270. }
  1271. @keyframes f7-cover-v-next-to-current {
  1272. from {
  1273. transform: translateY(100%);
  1274. }
  1275. to {
  1276. transform: translateY(0%);
  1277. }
  1278. }
  1279. @keyframes f7-cover-v-current-to-next {
  1280. from {
  1281. transform: translateY(0%);
  1282. }
  1283. to {
  1284. transform: translateY(100%);
  1285. }
  1286. }
  1287. @keyframes f7-cover-v-current-to-prev {
  1288. from {
  1289. transform: translateZ(0);
  1290. opacity: 1;
  1291. }
  1292. to {
  1293. transform: translateZ(-300px);
  1294. opacity: 0.5;
  1295. }
  1296. }
  1297. @keyframes f7-cover-v-prev-to-current {
  1298. from {
  1299. transform: translateZ(-300px);
  1300. opacity: 0.5;
  1301. }
  1302. to {
  1303. transform: translateZ(0);
  1304. opacity: 1;
  1305. }
  1306. }
  1307. .router-transition-f7-cover-forward,
  1308. .router-transition-f7-cover-backward {
  1309. background: #000;
  1310. perspective: 1200px;
  1311. }
  1312. .router-transition-f7-cover-forward .page-next {
  1313. animation: f7-cover-next-to-current var(--f7-page-cover-transition-duration) forwards;
  1314. }
  1315. .router-transition-f7-cover-forward .page-current {
  1316. animation: f7-cover-current-to-prev var(--f7-page-cover-transition-duration) forwards;
  1317. }
  1318. .router-transition-f7-cover-backward .page-current {
  1319. animation: f7-cover-current-to-next var(--f7-page-cover-transition-duration) forwards;
  1320. }
  1321. .router-transition-f7-cover-backward .page-previous {
  1322. animation: f7-cover-prev-to-current var(--f7-page-cover-transition-duration) forwards;
  1323. }
  1324. @keyframes f7-cover-next-to-current {
  1325. from {
  1326. transform: translateX(-100%);
  1327. }
  1328. to {
  1329. transform: translateX(0%);
  1330. }
  1331. }
  1332. @keyframes f7-cover-current-to-next {
  1333. from {
  1334. transform: translateX(0%);
  1335. }
  1336. to {
  1337. transform: translateX(-100%);
  1338. }
  1339. }
  1340. @keyframes f7-cover-current-to-prev {
  1341. from {
  1342. transform: translateZ(0);
  1343. opacity: 1;
  1344. }
  1345. to {
  1346. transform: translateZ(-300px);
  1347. opacity: 0.5;
  1348. }
  1349. }
  1350. @keyframes f7-cover-prev-to-current {
  1351. from {
  1352. transform: translateZ(-300px);
  1353. opacity: 0.5;
  1354. }
  1355. to {
  1356. transform: translateZ(0);
  1357. opacity: 1;
  1358. }
  1359. }
  1360. .router-transition-f7-dive-forward,
  1361. .router-transition-f7-dive-backward {
  1362. background: var(--f7-page-bg-color);
  1363. perspective: 1200px;
  1364. }
  1365. .router-transition-f7-dive-forward .page-next {
  1366. animation: f7-dive-next-to-current var(--f7-page-dive-transition-duration) forwards;
  1367. }
  1368. .router-transition-f7-dive-forward .page-current {
  1369. animation: f7-dive-current-to-prev var(--f7-page-dive-transition-duration) forwards;
  1370. }
  1371. .router-transition-f7-dive-backward .page-current {
  1372. animation: f7-dive-current-to-next var(--f7-page-dive-transition-duration) forwards;
  1373. }
  1374. .router-transition-f7-dive-backward .page-previous {
  1375. animation: f7-dive-prev-to-current var(--f7-page-dive-transition-duration) forwards;
  1376. }
  1377. @keyframes f7-dive-next-to-current {
  1378. from {
  1379. opacity: 0;
  1380. transform: translateZ(-150px);
  1381. }
  1382. 50% {
  1383. opacity: 0;
  1384. }
  1385. to {
  1386. opacity: 1;
  1387. transform: translateZ(0px);
  1388. }
  1389. }
  1390. @keyframes f7-dive-current-to-next {
  1391. from {
  1392. opacity: 1;
  1393. transform: translateZ(0px);
  1394. }
  1395. 50% {
  1396. opacity: 0;
  1397. }
  1398. to {
  1399. opacity: 0;
  1400. transform: translateZ(-150px);
  1401. }
  1402. }
  1403. @keyframes f7-dive-current-to-prev {
  1404. from {
  1405. transform: translateZ(0px);
  1406. opacity: 1;
  1407. }
  1408. 50% {
  1409. opacity: 0;
  1410. }
  1411. to {
  1412. opacity: 0;
  1413. transform: translateZ(150px);
  1414. }
  1415. }
  1416. @keyframes f7-dive-prev-to-current {
  1417. from {
  1418. opacity: 0;
  1419. transform: translateZ(150px);
  1420. }
  1421. 50% {
  1422. opacity: 0;
  1423. }
  1424. to {
  1425. opacity: 1;
  1426. transform: translateZ(0px);
  1427. }
  1428. }
  1429. .router-transition-f7-fade-forward,
  1430. .router-transition-f7-fade-backward {
  1431. background: var(--f7-page-bg-color);
  1432. }
  1433. .router-transition-f7-fade-forward .page-next {
  1434. opacity: 0 !important;
  1435. animation: f7-fade-in var(--f7-page-fade-transition-duration) forwards;
  1436. }
  1437. .router-transition-f7-fade-forward .page-current {
  1438. animation: f7-fade-out var(--f7-page-fade-transition-duration) forwards;
  1439. }
  1440. .router-transition-f7-fade-backward .page-current {
  1441. animation: f7-fade-out var(--f7-page-fade-transition-duration) forwards;
  1442. }
  1443. .router-transition-f7-fade-backward .page-previous {
  1444. animation: f7-fade-in var(--f7-page-fade-transition-duration) forwards;
  1445. }
  1446. @keyframes f7-fade-in {
  1447. from {
  1448. opacity: 0;
  1449. }
  1450. 50% {
  1451. opacity: 0;
  1452. }
  1453. to {
  1454. opacity: 1;
  1455. }
  1456. }
  1457. @keyframes f7-fade-out {
  1458. from {
  1459. opacity: 1;
  1460. }
  1461. 50% {
  1462. opacity: 0;
  1463. }
  1464. to {
  1465. opacity: 0;
  1466. }
  1467. }
  1468. .router-transition-f7-flip-forward,
  1469. .router-transition-f7-flip-backward {
  1470. background: #000;
  1471. perspective: 1200px;
  1472. }
  1473. .router-transition-f7-flip-forward .page,
  1474. .router-transition-f7-flip-backward .page {
  1475. -webkit-backface-visibility: hidden;
  1476. backface-visibility: hidden;
  1477. }
  1478. .router-transition-f7-flip-forward .page-next {
  1479. animation: f7-flip-next-to-current var(--f7-page-flip-transition-duration) forwards;
  1480. }
  1481. .router-transition-f7-flip-forward .page-current {
  1482. animation: f7-flip-current-to-prev var(--f7-page-flip-transition-duration) forwards;
  1483. }
  1484. .router-transition-f7-flip-backward .page-current {
  1485. animation: f7-flip-current-to-next var(--f7-page-flip-transition-duration) forwards;
  1486. }
  1487. .router-transition-f7-flip-backward .page-previous {
  1488. animation: f7-flip-prev-to-current var(--f7-page-flip-transition-duration) forwards;
  1489. }
  1490. @keyframes f7-flip-next-to-current {
  1491. from {
  1492. border-radius: 30px;
  1493. transform: translateZ(-100vmax) rotateY(-180deg);
  1494. }
  1495. to {
  1496. border-radius: 0;
  1497. transform: translateZ(0px) rotateY(0deg);
  1498. }
  1499. }
  1500. @keyframes f7-flip-current-to-next {
  1501. from {
  1502. border-radius: 0px;
  1503. transform: translateZ(0px) rotateY(0deg);
  1504. }
  1505. to {
  1506. border-radius: 30px;
  1507. transform: translateZ(-100vmax) rotateY(-180deg);
  1508. }
  1509. }
  1510. @keyframes f7-flip-current-to-prev {
  1511. from {
  1512. border-radius: 0px;
  1513. transform: translateZ(0px) rotateY(0deg);
  1514. }
  1515. to {
  1516. border-radius: 30px;
  1517. transform: translateZ(-100vmax) rotateY(180deg);
  1518. }
  1519. }
  1520. @keyframes f7-flip-prev-to-current {
  1521. from {
  1522. border-radius: 30px;
  1523. transform: translateZ(-100vmax) rotateY(180deg);
  1524. }
  1525. to {
  1526. border-radius: 0px;
  1527. transform: translateZ(0px) rotateY(0deg);
  1528. }
  1529. }
  1530. .router-transition-f7-parallax-forward .page-next {
  1531. animation: f7-parallax-next-to-current var(--f7-page-parallax-transition-duration) forwards;
  1532. }
  1533. .router-transition-f7-parallax-forward .page-current {
  1534. animation: f7-parallax-current-to-prev var(--f7-page-parallax-transition-duration) forwards;
  1535. }
  1536. .router-transition-f7-parallax-backward .page-current {
  1537. animation: f7-parallax-current-to-next var(--f7-page-parallax-transition-duration) forwards;
  1538. }
  1539. .router-transition-f7-parallax-backward .page-previous {
  1540. animation: f7-parallax-prev-to-current var(--f7-page-parallax-transition-duration) forwards;
  1541. }
  1542. @keyframes f7-parallax-next-to-current {
  1543. from {
  1544. transform: translateX(-100%);
  1545. }
  1546. to {
  1547. transform: translateX(0%);
  1548. }
  1549. }
  1550. @keyframes f7-parallax-current-to-next {
  1551. from {
  1552. transform: translateX(0%);
  1553. }
  1554. to {
  1555. transform: translateX(-100%);
  1556. }
  1557. }
  1558. @keyframes f7-parallax-current-to-prev {
  1559. from {
  1560. transform: translateX(0%);
  1561. }
  1562. to {
  1563. transform: translateX(20%);
  1564. }
  1565. }
  1566. @keyframes f7-parallax-prev-to-current {
  1567. from {
  1568. transform: translateX(20%);
  1569. }
  1570. to {
  1571. transform: translateX(0%);
  1572. }
  1573. }
  1574. .router-transition-f7-push-forward .page-next {
  1575. animation: f7-push-next-to-current var(--f7-page-push-transition-duration) forwards;
  1576. }
  1577. .router-transition-f7-push-forward .page-current {
  1578. animation: f7-push-current-to-prev var(--f7-page-push-transition-duration) forwards;
  1579. }
  1580. .router-transition-f7-push-backward .page-current {
  1581. animation: f7-push-current-to-next var(--f7-page-push-transition-duration) forwards;
  1582. }
  1583. .router-transition-f7-push-backward .page-previous {
  1584. animation: f7-push-prev-to-current var(--f7-page-push-transition-duration) forwards;
  1585. }
  1586. @keyframes f7-push-next-to-current {
  1587. from {
  1588. transform: translateX(-100%);
  1589. }
  1590. to {
  1591. transform: translateX(0%);
  1592. }
  1593. }
  1594. @keyframes f7-push-current-to-next {
  1595. from {
  1596. transform: translateX(0%);
  1597. }
  1598. to {
  1599. transform: translateX(-100%);
  1600. }
  1601. }
  1602. @keyframes f7-push-current-to-prev {
  1603. from {
  1604. transform: translateX(0%);
  1605. }
  1606. to {
  1607. transform: translateX(100%);
  1608. }
  1609. }
  1610. @keyframes f7-push-prev-to-current {
  1611. from {
  1612. transform: translateX(100%);
  1613. }
  1614. to {
  1615. transform: translateX(0%);
  1616. }
  1617. }
  1618. /* === Link === */
  1619. :root {
  1620. --f7-link-highlight-black: rgba(0, 0, 0, 0.1);
  1621. --f7-link-highlight-white: rgba(255, 255, 255, 0.15);
  1622. --f7-link-highlight-color: var(--f7-link-highlight-black);
  1623. }
  1624. .theme-dark {
  1625. --f7-link-highlight-color: var(--f7-link-highlight-white);
  1626. }
  1627. .link,
  1628. .tab-link {
  1629. display: inline-flex;
  1630. align-items: center;
  1631. align-content: center;
  1632. justify-content: center;
  1633. position: relative;
  1634. box-sizing: border-box;
  1635. z-index: 1;
  1636. }
  1637. .link i + span,
  1638. .link i + i,
  1639. .link span + i,
  1640. .link span + span {
  1641. margin-right: 4px;
  1642. }
  1643. .ios .link {
  1644. transition: opacity 300ms;
  1645. }
  1646. .ios .link.active-state {
  1647. opacity: 0.3;
  1648. transition-duration: 0ms;
  1649. }
  1650. .aurora .link {
  1651. transition: opacity 300ms;
  1652. }
  1653. .aurora .link.active-state {
  1654. opacity: 0.3;
  1655. transition-duration: 0ms;
  1656. }
  1657. /* === Navbar === */
  1658. :root {
  1659. /*
  1660. --f7-navbar-bg-color: var(--f7-bars-bg-color);
  1661. --f7-navbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
  1662. --f7-navbar-bg-image: var(--f7-bars-bg-image);
  1663. --f7-navbar-border-color: var(--f7-bars-border-color);
  1664. --f7-navbar-link-color: var(--f7-bars-link-color);
  1665. --f7-navbar-text-color: var(--f7-bars-text-color);
  1666. */
  1667. --f7-navbar-hide-show-transition-duration: 400ms;
  1668. --f7-navbar-title-line-height: 1.2;
  1669. --f7-navbar-title-font-size: inherit;
  1670. --f7-navbar-subtitle-text-align: inherit;
  1671. --f7-navbar-large-title-line-height: 1.2;
  1672. --f7-navbar-large-title-text-color: inherit;
  1673. --f7-navbar-large-title-padding-left: 16px;
  1674. --f7-navbar-large-title-padding-right: 16px;
  1675. }
  1676. .ios {
  1677. --f7-navbar-height: 44px;
  1678. --f7-navbar-tablet-height: 44px;
  1679. --f7-navbar-font-size: 17px;
  1680. --f7-navbar-inner-padding-left: 8px;
  1681. --f7-navbar-inner-padding-right: 8px;
  1682. --f7-navbar-title-font-weight: 600;
  1683. --f7-navbar-title-margin-left: 0;
  1684. --f7-navbar-title-margin-right: 0;
  1685. --f7-navbar-title-text-align: center;
  1686. --f7-navbar-subtitle-font-size: 10px;
  1687. --f7-navbar-subtitle-line-height: 1;
  1688. --f7-navbar-shadow-image: none;
  1689. --f7-navbar-large-title-height: 52px;
  1690. --f7-navbar-large-title-font-size: 34px;
  1691. --f7-navbar-large-title-font-weight: 700;
  1692. --f7-navbar-large-title-letter-spacing: -0.03em;
  1693. --f7-navbar-large-title-padding-vertical: 6px;
  1694. /*
  1695. --f7-navbar-link-height: var(--f7-navbar-height);
  1696. --f7-navbar-link-line-height: var(--f7-navbar-height);
  1697. */
  1698. --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.55);
  1699. }
  1700. .ios .theme-dark,
  1701. .ios.theme-dark {
  1702. --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.55);
  1703. }
  1704. .md {
  1705. --f7-navbar-height: 56px;
  1706. --f7-navbar-tablet-height: 64px;
  1707. --f7-navbar-font-size: 20px;
  1708. --f7-navbar-inner-padding-left: 0px;
  1709. --f7-navbar-inner-padding-right: 0px;
  1710. --f7-navbar-title-font-weight: 500;
  1711. --f7-navbar-title-margin-left: 16px;
  1712. --f7-navbar-title-margin-right: 16px;
  1713. --f7-navbar-title-text-align: left;
  1714. --f7-navbar-subtitle-font-size: 14px;
  1715. --f7-navbar-subtitle-line-height: 1.2;
  1716. --f7-navbar-shadow-image: var(--f7-bars-shadow-bottom-image);
  1717. --f7-navbar-large-title-font-size: 34px;
  1718. --f7-navbar-large-title-height: 56px;
  1719. --f7-navbar-large-title-font-weight: 500;
  1720. --f7-navbar-large-title-letter-spacing: 0;
  1721. --f7-navbar-large-title-padding-vertical: 8px;
  1722. /*
  1723. --f7-navbar-link-height: var(--f7-navbar-height);
  1724. --f7-navbar-link-line-height: var(--f7-navbar-height);
  1725. */
  1726. --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.85);
  1727. }
  1728. .md .theme-dark,
  1729. .md.theme-dark {
  1730. --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.85);
  1731. }
  1732. .aurora {
  1733. --f7-navbar-height: 38px;
  1734. --f7-navbar-tablet-height: 38px;
  1735. --f7-navbar-font-size: 14px;
  1736. --f7-navbar-inner-padding-left: 16px;
  1737. --f7-navbar-inner-padding-right: 16px;
  1738. --f7-navbar-title-font-weight: 600;
  1739. --f7-navbar-title-margin-left: 0;
  1740. --f7-navbar-title-margin-right: 0;
  1741. --f7-navbar-title-text-align: center;
  1742. --f7-navbar-subtitle-font-size: 12px;
  1743. --f7-navbar-subtitle-line-height: 1;
  1744. --f7-navbar-shadow-image: none;
  1745. --f7-navbar-large-title-height: 38px;
  1746. --f7-navbar-large-title-font-size: 26px;
  1747. --f7-navbar-large-title-font-weight: bold;
  1748. --f7-navbar-large-title-letter-spacing: -0.03em;
  1749. --f7-navbar-large-title-padding-vertical: 4px;
  1750. --f7-navbar-link-height: auto;
  1751. --f7-navbar-link-line-height: inherit;
  1752. --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.6);
  1753. }
  1754. .aurora .theme-dark,
  1755. .aurora.theme-dark {
  1756. --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.5);
  1757. }
  1758. .navbars,
  1759. .navbar {
  1760. z-index: 500;
  1761. left: 0;
  1762. top: 0;
  1763. width: 100%;
  1764. }
  1765. .navbars {
  1766. position: absolute;
  1767. }
  1768. .navbars .navbar {
  1769. z-index: auto;
  1770. }
  1771. .navbar {
  1772. --f7-navbar-large-collapse-progress: 0;
  1773. position: relative;
  1774. -webkit-backface-visibility: hidden;
  1775. backface-visibility: hidden;
  1776. box-sizing: border-box;
  1777. margin: 0;
  1778. height: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
  1779. color: var(--f7-navbar-text-color, var(--f7-bars-text-color));
  1780. font-size: var(--f7-navbar-font-size);
  1781. }
  1782. .navbar.stacked {
  1783. display: none;
  1784. }
  1785. .navbar b {
  1786. font-weight: 500;
  1787. }
  1788. .navbar a {
  1789. color: var(--f7-navbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
  1790. }
  1791. .navbar a.link {
  1792. display: flex;
  1793. justify-content: flex-start;
  1794. line-height: var(--f7-navbar-link-line-height, var(--f7-navbar-height));
  1795. height: var(--f7-navbar-link-height, var(--f7-navbar-height));
  1796. }
  1797. .navbar .title,
  1798. .navbar .left,
  1799. .navbar .right {
  1800. position: relative;
  1801. z-index: 10;
  1802. }
  1803. .navbar .title {
  1804. position: relative;
  1805. overflow: hidden;
  1806. text-overflow: ellipsis;
  1807. white-space: nowrap;
  1808. flex-shrink: 10;
  1809. font-weight: var(--f7-navbar-title-font-weight);
  1810. display: inline-block;
  1811. line-height: var(--f7-navbar-title-line-height);
  1812. text-align: var(--f7-navbar-title-text-align);
  1813. font-size: var(--f7-navbar-title-font-size);
  1814. margin-right: var(--f7-navbar-title-margin-left);
  1815. margin-left: var(--f7-navbar-title-margin-left);
  1816. }
  1817. .navbar .subtitle {
  1818. display: block;
  1819. color: var(--f7-navbar-subtitle-text-color);
  1820. font-weight: normal;
  1821. font-size: var(--f7-navbar-subtitle-font-size);
  1822. line-height: var(--f7-navbar-subtitle-line-height);
  1823. text-align: var(--f7-navbar-subtitle-text-align);
  1824. }
  1825. .navbar .left,
  1826. .navbar .right {
  1827. flex-shrink: 0;
  1828. display: flex;
  1829. justify-content: flex-start;
  1830. align-items: center;
  1831. }
  1832. .navbar .right:first-child {
  1833. position: absolute;
  1834. height: 100%;
  1835. }
  1836. .navbar.no-hairline .navbar-bg:after,
  1837. .navbar.no-border .navbar-bg:after,
  1838. .navbar .no-hairline .navbar-bg:after,
  1839. .navbar .no-border .navbar-bg:after {
  1840. display: none !important;
  1841. }
  1842. .navbar.no-hairline .title-large:after,
  1843. .navbar.no-border .title-large:after,
  1844. .navbar .no-hairline .title-large:after,
  1845. .navbar .no-border .title-large:after {
  1846. display: none !important;
  1847. }
  1848. .navbar.no-shadow .navbar-bg:before,
  1849. .navbar .no-shadow .navbar-bg:before {
  1850. display: none !important;
  1851. }
  1852. .navbar.navbar-hidden .navbar-bg:before,
  1853. .navbar-hidden .navbar .navbar-bg:before {
  1854. opacity: 0 !important;
  1855. }
  1856. .navbar-bg {
  1857. position: absolute;
  1858. left: 0;
  1859. top: 0;
  1860. width: 100%;
  1861. height: 100%;
  1862. pointer-events: none;
  1863. z-index: 0;
  1864. background: var(--f7-navbar-bg-color);
  1865. background-image: var(--f7-navbar-bg-image, var(--f7-bars-bg-image));
  1866. background-color: var(--f7-navbar-bg-color, var(--f7-bars-bg-color));
  1867. transition-property: transform;
  1868. }
  1869. @supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  1870. .ios-translucent-bars .navbar-bg {
  1871. background-color: rgba(var(--f7-navbar-bg-color-rgb, var(--f7-bars-bg-color-rgb)), var(--f7-bars-translucent-opacity));
  1872. -webkit-backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
  1873. backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
  1874. }
  1875. }
  1876. .navbar-bg:after,
  1877. .navbar-bg:before {
  1878. -webkit-backface-visibility: hidden;
  1879. backface-visibility: hidden;
  1880. }
  1881. .navbar-bg:after {
  1882. content: '';
  1883. position: absolute;
  1884. background-color: var(--f7-navbar-border-color, var(--f7-bars-border-color));
  1885. display: block;
  1886. z-index: 15;
  1887. top: auto;
  1888. right: auto;
  1889. bottom: 0;
  1890. left: 0;
  1891. height: 1px;
  1892. width: 100%;
  1893. transform-origin: 50% 100%;
  1894. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  1895. }
  1896. .navbar-bg:before {
  1897. content: '';
  1898. position: absolute;
  1899. right: 0;
  1900. width: 100%;
  1901. top: 100%;
  1902. bottom: auto;
  1903. height: 8px;
  1904. pointer-events: none;
  1905. background: var(--f7-navbar-shadow-image);
  1906. }
  1907. .navbar-bg:after {
  1908. z-index: 1;
  1909. }
  1910. @media (min-width: 768px) and (min-height: 600px) {
  1911. :root {
  1912. --f7-navbar-height: var(--f7-navbar-tablet-height);
  1913. }
  1914. }
  1915. .navbar-transitioning,
  1916. .navbar-transitioning .left,
  1917. .navbar-transitioning .title,
  1918. .navbar-transitioning .right,
  1919. .navbar-transitioning .title-large-text,
  1920. .navbar-transitioning .navbar-bg,
  1921. .navbar-transitioning .subnavbar,
  1922. .navbar-transitioning .navbar-bg:before {
  1923. transition-duration: var(--f7-navbar-hide-show-transition-duration);
  1924. }
  1925. .navbar-page-transitioning {
  1926. transition-duration: var(--f7-page-swipeback-transition-duration) !important;
  1927. }
  1928. .navbar-page-transitioning .title-large-text,
  1929. .navbar-page-transitioning .navbar-bg {
  1930. transition-duration: var(--f7-page-swipeback-transition-duration) !important;
  1931. }
  1932. .navbar-hidden {
  1933. transform: translate3d(0, calc(-1 * var(--f7-navbar-height)), 0);
  1934. }
  1935. .navbar-hidden .navbar-inner {
  1936. pointer-events: none;
  1937. }
  1938. .navbar-hidden .navbar-inner > .left,
  1939. .navbar-hidden .navbar-inner > .title,
  1940. .navbar-hidden .navbar-inner > .right {
  1941. opacity: 0 !important;
  1942. }
  1943. .navbar-hidden .subnavbar {
  1944. pointer-events: auto;
  1945. }
  1946. .navbar-hidden-statusbar {
  1947. transform: translate3d(0, calc(-1 * var(--f7-navbar-height) - var(--f7-safe-area-top)), 0);
  1948. }
  1949. .navbar-large-hidden .navbar-large {
  1950. --f7-navbar-large-collapse-progress: 1;
  1951. }
  1952. .navbar-inner {
  1953. position: absolute;
  1954. left: 0;
  1955. bottom: 0;
  1956. width: 100%;
  1957. height: 100%;
  1958. display: flex;
  1959. align-items: center;
  1960. box-sizing: border-box;
  1961. padding: var(--f7-safe-area-top) calc(var(--f7-navbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-navbar-inner-padding-left) + var(--f7-safe-area-left));
  1962. transform: translate3d(0, 0, 0);
  1963. z-index: 10;
  1964. }
  1965. .views > .navbar,
  1966. .view > .navbar,
  1967. .page > .navbar,
  1968. .navbars > .navbar {
  1969. position: absolute;
  1970. }
  1971. .navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible):not(.with-searchbar-expandable-enabled) .navbar-bg,
  1972. .navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible):not(.with-searchbar-expandable-enabled) .title {
  1973. opacity: 0;
  1974. }
  1975. .navbar-large .navbar-bg {
  1976. height: calc(100% + var(--f7-navbar-large-title-height));
  1977. transform: translate3d(0px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
  1978. }
  1979. .navbar-large-transparent .navbar-bg,
  1980. .navbar-large.navbar-transparent .navbar-bg {
  1981. opacity: var(--f7-navbar-large-collapse-progress);
  1982. height: 100%;
  1983. transform: none;
  1984. }
  1985. .ios .router-navbar-transition-to-large .navbar-bg,
  1986. .ios .router-navbar-transition-from-large .navbar-bg,
  1987. .navbar-bg.ios-swipeback-navbar-bg-large,
  1988. .navbar-large-transparent .navbar-bg.ios-swipeback-navbar-bg-large,
  1989. .navbar-large.navbar-transparent .navbar-bg.ios-swipeback-navbar-bg-large {
  1990. height: calc(100% + var(--f7-navbar-large-title-height));
  1991. transform: translate3d(0px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
  1992. }
  1993. .ios .navbar:not(.navbar-large) .navbar-bg {
  1994. --f7-navbar-large-collapse-progress: 1;
  1995. }
  1996. .navbar-large .title {
  1997. opacity: var(--f7-navbar-large-collapse-progress);
  1998. }
  1999. .navbar-large-collapsed {
  2000. --f7-navbar-large-collapse-progress: 1;
  2001. }
  2002. .navbar-large-collapsed .title-large {
  2003. pointer-events: none;
  2004. }
  2005. .navbar .title-large {
  2006. box-sizing: border-box;
  2007. position: absolute;
  2008. left: 0;
  2009. right: 0;
  2010. top: 100%;
  2011. display: flex;
  2012. align-items: flex-end;
  2013. white-space: nowrap;
  2014. overflow: hidden;
  2015. height: var(--f7-navbar-large-title-height);
  2016. z-index: 5;
  2017. }
  2018. .navbar .title-large-text {
  2019. text-overflow: ellipsis;
  2020. white-space: nowrap;
  2021. color: var(--f7-navbar-large-title-text-color);
  2022. letter-spacing: var(--f7-navbar-large-title-letter-spacing);
  2023. font-size: var(--f7-navbar-large-title-font-size);
  2024. font-weight: var(--f7-navbar-large-title-font-weight);
  2025. line-height: var(--f7-navbar-large-title-line-height);
  2026. padding-left: calc(var(--f7-navbar-large-title-padding-left) + var(--f7-safe-area-left));
  2027. padding-right: calc(var(--f7-navbar-large-title-padding-right) + var(--f7-safe-area-right));
  2028. padding-top: var(--f7-navbar-large-title-padding-vertical);
  2029. padding-bottom: var(--f7-navbar-large-title-padding-vertical);
  2030. box-sizing: border-box;
  2031. overflow: hidden;
  2032. width: 100%;
  2033. transform: translate3d(0px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
  2034. transform-origin: calc(100% - var(--f7-navbar-large-title-padding-left) - var(--f7-safe-area-left)) center;
  2035. }
  2036. .navbar-no-title-large-transition .title-large-text {
  2037. transition-duration: 0ms;
  2038. }
  2039. .navbar ~ *,
  2040. .navbars ~ * {
  2041. --f7-page-navbar-offset: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
  2042. }
  2043. .navbar ~ * .page-with-navbar-large,
  2044. .navbar ~ .page-with-navbar-large,
  2045. .navbars ~ * .page-with-navbar-large,
  2046. .navbars ~ .page-with-navbar-large,
  2047. .page-with-navbar-large .navbar ~ * {
  2048. --f7-page-navbar-offset: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height) + var(--f7-safe-area-top));
  2049. }
  2050. .page.no-navbar,
  2051. .page.no-navbar .navbar ~ * {
  2052. --f7-page-navbar-offset: var(--f7-safe-area-top);
  2053. }
  2054. .ios {
  2055. --f7-navbarLeftTextOffset: calc(4px + 12px + var(--f7-navbar-inner-padding-left));
  2056. --f7-navbarTitleLargeOffset: var(--f7-navbar-large-title-padding-left);
  2057. --f7-navbar-large-transparent-bg-center: translateX(0);
  2058. --f7-navbar-large-bg-center-top: translateX(0) translateY(calc(-1 * var(--f7-navbar-large-title-height)));
  2059. --f7-navbar-large-bg-center-bottom: translateX(0) translateY(0);
  2060. --f7-navbar-large-transparent-bg-left: translateX(100%);
  2061. --f7-navbar-large-bg-left-top: translateX(100%) translateY(calc(-1 * var(--f7-navbar-large-title-height)));
  2062. --f7-navbar-large-bg-left-bottom: translateX(100%) translateY(0);
  2063. --f7-navbar-large-bg-right-top: translateX(-100%) translateY(calc(-1 * var(--f7-navbar-large-title-height)));
  2064. --f7-navbar-large-bg-right-bottom: translateX(-100%) translateY(0);
  2065. }
  2066. .ios .navbar a.icon-only {
  2067. width: 44px;
  2068. margin: 0;
  2069. justify-content: center;
  2070. }
  2071. .ios .navbar .left a + a,
  2072. .ios .navbar .right a + a {
  2073. margin-right: 16px;
  2074. }
  2075. .ios .navbar b {
  2076. font-weight: 600;
  2077. }
  2078. .ios .navbar .left {
  2079. margin-left: 10px;
  2080. }
  2081. .ios .navbar .right {
  2082. margin-right: 10px;
  2083. }
  2084. .ios .navbar .right:first-child {
  2085. left: calc(8px + var(--f7-safe-area-left));
  2086. }
  2087. .ios .navbar-inner {
  2088. justify-content: space-between;
  2089. }
  2090. .ios .navbar-inner-left-title {
  2091. justify-content: flex-start;
  2092. }
  2093. .ios .navbar-inner-left-title .right {
  2094. margin-right: auto;
  2095. }
  2096. .ios .navbar-inner-left-title .title {
  2097. text-align: left;
  2098. margin-left: 10px;
  2099. }
  2100. .ios .view-master-detail .navbar-previous:not(.navbar-master) .left,
  2101. .ios .view:not(.view-master-detail) .navbar-previous .left,
  2102. .ios .navbar-next .left,
  2103. .ios .view-master-detail .navbar-previous:not(.navbar-master) .title,
  2104. .ios .view:not(.view-master-detail) .navbar-previous .title,
  2105. .ios .navbar-next .title,
  2106. .ios .view-master-detail .navbar-previous:not(.navbar-master) .right,
  2107. .ios .view:not(.view-master-detail) .navbar-previous .right,
  2108. .ios .navbar-next .right,
  2109. .ios .view-master-detail .navbar-previous:not(.navbar-master) .subnavbar,
  2110. .ios .view:not(.view-master-detail) .navbar-previous .subnavbar,
  2111. .ios .navbar-next .subnavbar,
  2112. .ios .view-master-detail .navbar-previous:not(.navbar-master) .fading,
  2113. .ios .view:not(.view-master-detail) .navbar-previous .fading,
  2114. .ios .navbar-next .fading {
  2115. opacity: 0;
  2116. }
  2117. .ios .view-master-detail .navbar-previous:not(.navbar-master),
  2118. .ios .view:not(.view-master-detail) .navbar-previous {
  2119. pointer-events: none;
  2120. }
  2121. .ios .view-master-detail .navbar-previous:not(.navbar-master) .title-large,
  2122. .ios .view:not(.view-master-detail) .navbar-previous .title-large {
  2123. opacity: 0;
  2124. transition-duration: 0ms;
  2125. }
  2126. .ios .view-master-detail .navbar-previous:not(.navbar-master) .title-large .title-large-text,
  2127. .ios .view:not(.view-master-detail) .navbar-previous .title-large .title-large-text {
  2128. transform: scale(0.5);
  2129. transition-duration: 0ms;
  2130. }
  2131. .ios .view-master-detail .navbar-previous:not(.navbar-master) .subnavbar.sliding,
  2132. .ios .view:not(.view-master-detail) .navbar-previous .subnavbar.sliding,
  2133. .ios .view-master-detail .navbar-previous:not(.navbar-master) .sliding .subnavbar,
  2134. .ios .view:not(.view-master-detail) .navbar-previous .sliding .subnavbar {
  2135. opacity: 1;
  2136. transform: translate3d(100%, 0, 0);
  2137. }
  2138. .ios .view:not(.view-master-detail) .navbar-previous .navbar-bg,
  2139. .ios .view-master-detail .navbar-previous:not(.navbar-master) .navbar-bg {
  2140. transform: translateX(-100%);
  2141. }
  2142. .ios .navbar-next {
  2143. pointer-events: none;
  2144. }
  2145. .ios .navbar-next .navbar-bg {
  2146. transform: translateX(-100%);
  2147. }
  2148. .ios .navbar-next .title-large .title-large-text {
  2149. transition-duration: 0ms;
  2150. transform: translateX(-100%) translateY(calc(-1 * var(--f7-navbar-large-title-height)));
  2151. }
  2152. .ios .navbar-next .subnavbar.sliding,
  2153. .ios .navbar-next .sliding .subnavbar {
  2154. opacity: 1;
  2155. transform: translate3d(-100%, 0, 0);
  2156. }
  2157. .ios .router-transition .navbar,
  2158. .ios .router-transition .navbar-bg {
  2159. transition-duration: var(--f7-page-transition-duration);
  2160. }
  2161. .ios .router-transition .navbar-bg {
  2162. animation-duration: var(--f7-page-transition-duration);
  2163. animation-fill-mode: forwards;
  2164. }
  2165. .ios .router-transition .title-large,
  2166. .ios .router-transition .title-large-text {
  2167. transition-duration: 0ms;
  2168. }
  2169. .ios .router-transition .navbar-current .left,
  2170. .ios .router-transition .navbar-current .title,
  2171. .ios .router-transition .navbar-current .right,
  2172. .ios .router-transition .navbar-current .subnavbar {
  2173. animation: ios-navbar-element-fade-out var(--f7-page-transition-duration) forwards;
  2174. }
  2175. .ios .router-transition .navbar-current .sliding.left,
  2176. .ios .router-transition .navbar-current .sliding.left .icon + span,
  2177. .ios .router-transition .navbar-current .sliding.title,
  2178. .ios .router-transition .navbar-current .sliding.right,
  2179. .ios .router-transition .navbar-current .sliding .left,
  2180. .ios .router-transition .navbar-current .sliding .left .icon + span,
  2181. .ios .router-transition .navbar-current .sliding .title,
  2182. .ios .router-transition .navbar-current .sliding .right {
  2183. transition-duration: var(--f7-page-transition-duration);
  2184. opacity: 0 !important;
  2185. animation: none;
  2186. }
  2187. .ios .router-transition .navbar-current .sliding .subnavbar,
  2188. .ios .router-transition .navbar-current .sliding.subnavbar {
  2189. transition-duration: var(--f7-page-transition-duration);
  2190. animation: none;
  2191. opacity: 1;
  2192. }
  2193. .ios .router-transition-forward .navbar-next .left,
  2194. .ios .router-transition-backward .navbar-previous .left,
  2195. .ios .router-transition-forward .navbar-next .title,
  2196. .ios .router-transition-backward .navbar-previous .title,
  2197. .ios .router-transition-forward .navbar-next .right,
  2198. .ios .router-transition-backward .navbar-previous .right,
  2199. .ios .router-transition-forward .navbar-next .subnavbar,
  2200. .ios .router-transition-backward .navbar-previous .subnavbar {
  2201. animation: ios-navbar-element-fade-in var(--f7-page-transition-duration) forwards;
  2202. }
  2203. .ios .router-transition-forward .navbar-next .sliding.left,
  2204. .ios .router-transition-backward .navbar-previous .sliding.left,
  2205. .ios .router-transition-forward .navbar-next .sliding.left .icon + span,
  2206. .ios .router-transition-backward .navbar-previous .sliding.left .icon + span,
  2207. .ios .router-transition-forward .navbar-next .sliding.title,
  2208. .ios .router-transition-backward .navbar-previous .sliding.title,
  2209. .ios .router-transition-forward .navbar-next .sliding.right,
  2210. .ios .router-transition-backward .navbar-previous .sliding.right,
  2211. .ios .router-transition-forward .navbar-next .sliding .left,
  2212. .ios .router-transition-backward .navbar-previous .sliding .left,
  2213. .ios .router-transition-forward .navbar-next .sliding .left .icon + span,
  2214. .ios .router-transition-backward .navbar-previous .sliding .left .icon + span,
  2215. .ios .router-transition-forward .navbar-next .sliding .title,
  2216. .ios .router-transition-backward .navbar-previous .sliding .title,
  2217. .ios .router-transition-forward .navbar-next .sliding .right,
  2218. .ios .router-transition-backward .navbar-previous .sliding .right,
  2219. .ios .router-transition-forward .navbar-next .sliding .subnavbar,
  2220. .ios .router-transition-backward .navbar-previous .sliding .subnavbar {
  2221. transition-duration: var(--f7-page-transition-duration);
  2222. animation: none;
  2223. transform: translate3d(0, 0, 0) !important;
  2224. opacity: 1 !important;
  2225. }
  2226. .ios .router-transition-forward .navbar-next.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible) .title,
  2227. .ios .router-transition-backward .navbar-previous.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible) .title {
  2228. animation: none;
  2229. }
  2230. .ios .router-transition-forward .navbar-next.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible) .sliding.title,
  2231. .ios .router-transition-backward .navbar-previous.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible) .sliding.title,
  2232. .ios .router-transition-forward .navbar-next.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible) .sliding .title,
  2233. .ios .router-transition-backward .navbar-previous.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible) .sliding .title {
  2234. opacity: 0 !important;
  2235. }
  2236. .ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled-no-transition .left,
  2237. .ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled .left,
  2238. .ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled-no-transition .title,
  2239. .ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled .title,
  2240. .ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled-no-transition .right,
  2241. .ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled .right,
  2242. .ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled-no-transition .subnavbar,
  2243. .ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled .subnavbar {
  2244. animation: none;
  2245. }
  2246. .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large,
  2247. .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large {
  2248. overflow: visible;
  2249. }
  2250. .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text,
  2251. .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-text {
  2252. animation: ios-navbar-large-title-text-slide-up var(--f7-page-transition-duration) forwards, ios-navbar-large-title-text-fade-out var(--f7-page-transition-duration) forwards;
  2253. }
  2254. .ios .router-transition-forward .navbar-next.router-navbar-transition-from-large .left .back span {
  2255. animation: ios-navbar-back-text-next-to-current var(--f7-page-transition-duration) forwards;
  2256. transition: none;
  2257. transform-origin: right center;
  2258. }
  2259. .ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
  2260. overflow: visible;
  2261. }
  2262. .ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text {
  2263. animation: ios-navbar-large-title-text-slide-left var(--f7-page-transition-duration) forwards;
  2264. }
  2265. .ios .router-transition-forward .navbar-next.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-text {
  2266. animation: ios-navbar-large-title-text-slide-left var(--f7-page-transition-duration) forwards;
  2267. }
  2268. .ios .router-transition-forward .navbar-next.navbar-large:not(.navbar-large-collapsed) .title,
  2269. .ios .router-transition-forward .navbar-current.navbar-large:not(.navbar-large-collapsed) .title {
  2270. animation: none;
  2271. opacity: 0 !important;
  2272. transition-duration: 0;
  2273. }
  2274. .ios .router-transition-backward .navbar-current.router-navbar-transition-to-large .left .back span {
  2275. animation: ios-navbar-back-text-current-to-previous var(--f7-page-transition-duration) forwards;
  2276. transition: none;
  2277. transform-origin: right center;
  2278. }
  2279. .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
  2280. overflow: visible;
  2281. }
  2282. .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text {
  2283. animation: ios-navbar-large-title-text-slide-right var(--f7-page-transition-duration) forwards;
  2284. }
  2285. .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-text {
  2286. animation: ios-navbar-large-title-text-slide-right var(--f7-page-transition-duration) forwards;
  2287. }
  2288. .ios .router-transition-backward .navbar-current.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
  2289. opacity: 0;
  2290. }
  2291. .ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large,
  2292. .ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
  2293. overflow: visible;
  2294. opacity: 1;
  2295. }
  2296. .ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text,
  2297. .ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-text {
  2298. animation: ios-navbar-large-title-text-slide-down var(--f7-page-transition-duration) forwards, ios-navbar-large-title-text-fade-in var(--f7-page-transition-duration) forwards;
  2299. }
  2300. .ios .router-transition-backward .navbar-current.navbar-large:not(.navbar-large-collapsed) .title,
  2301. .ios .router-transition-backward .navbar-previous.navbar-large:not(.navbar-large-collapsed) .title {
  2302. animation: none;
  2303. opacity: 0 !important;
  2304. transition-duration: 0;
  2305. }
  2306. .ios .router-transition-forward .navbar-current .navbar-bg {
  2307. animation-name: ios-navbar-bg-from-cb-to-lb;
  2308. }
  2309. .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .navbar-bg {
  2310. animation-name: ios-navbar-bg-from-cb-to-lb;
  2311. }
  2312. .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .navbar-bg {
  2313. animation-name: ios-navbar-bg-from-cb-to-lt;
  2314. }
  2315. .ios .router-transition-forward .navbar-current:not(.router-navbar-transition-from-large).router-navbar-transition-to-large .navbar-bg {
  2316. animation-name: ios-navbar-bg-from-ct-to-lb;
  2317. }
  2318. .ios .router-transition-forward .navbar-current.navbar-large-collapsed:not(.router-navbar-transition-to-large) .navbar-bg {
  2319. animation-name: ios-navbar-bg-from-ct-to-lt;
  2320. }
  2321. .ios .router-transition-forward .navbar-current.navbar-large-collapsed.navbar-large-transparent:not(.router-navbar-transition-to-large) .navbar-bg,
  2322. .ios .router-transition-forward .navbar-current.navbar-large-collapsed.navbar-large.navbar-transparent:not(.router-navbar-transition-to-large) .navbar-bg {
  2323. animation-name: ios-navbar-transparent-bg-from-c-to-l;
  2324. }
  2325. .ios .router-transition-forward .navbar-next .navbar-bg {
  2326. animation-name: ios-navbar-bg-from-rb-to-cb;
  2327. }
  2328. .ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .navbar-bg {
  2329. animation-name: ios-navbar-bg-from-rb-to-cb;
  2330. }
  2331. .ios .router-transition-forward .navbar-next.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .navbar-bg {
  2332. animation-name: ios-navbar-bg-from-rb-to-ct;
  2333. }
  2334. .ios .router-transition-forward .navbar-next:not(.router-navbar-transition-from-large).router-navbar-transition-to-large .navbar-bg {
  2335. animation-name: ios-navbar-bg-from-rt-to-cb;
  2336. }
  2337. .ios .router-transition-backward .navbar-current .navbar-bg {
  2338. animation-name: ios-navbar-bg-from-cb-to-rb;
  2339. }
  2340. .ios .router-transition-backward .navbar-current:not(.router-navbar-transition-from-large).router-navbar-transition-to-large .navbar-bg {
  2341. animation-name: ios-navbar-bg-from-ct-to-rb;
  2342. }
  2343. .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .navbar-bg {
  2344. animation-name: ios-navbar-bg-from-cb-to-rt;
  2345. }
  2346. .ios .router-transition-backward .navbar-current.navbar-large-collapsed .navbar-bg {
  2347. animation-name: ios-navbar-bg-from-ct-to-rt;
  2348. }
  2349. .ios .router-transition-backward .navbar-current.navbar-large-collapsed.navbar-large-transparent .navbar-bg,
  2350. .ios .router-transition-backward .navbar-current.navbar-large-collapsed.navbar-large.navbar-transparent .navbar-bg {
  2351. animation-name: ios-navbar-bg-from-cb-to-rb;
  2352. }
  2353. .ios .router-transition-backward .navbar-current.navbar-large-collapsed.router-navbar-transition-to-large .navbar-bg {
  2354. animation-name: ios-navbar-bg-from-ct-to-rb;
  2355. }
  2356. .ios .router-transition-backward .navbar-previous .navbar-bg {
  2357. animation-name: ios-navbar-bg-from-lb-to-cb;
  2358. }
  2359. .ios .router-transition-backward .navbar-previous:not(.router-navbar-transition-from-large).router-navbar-transition-to-large .navbar-bg {
  2360. animation-name: ios-navbar-bg-from-lt-to-cb;
  2361. }
  2362. .ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .navbar-bg {
  2363. animation-name: ios-navbar-bg-from-lb-to-ct;
  2364. }
  2365. .ios .router-transition-backward .navbar-previous.navbar-large-collapsed .navbar-bg {
  2366. animation-name: ios-navbar-bg-from-lt-to-ct;
  2367. }
  2368. .ios .router-transition-backward .navbar-previous.navbar-large-collapsed.navbar-large-transparent .navbar-bg,
  2369. .ios .router-transition-backward .navbar-previous.navbar-large-collapsed.navbar-large.navbar-transparent .navbar-bg {
  2370. animation-name: ios-navbar-transparent-bg-from-l-to-c;
  2371. }
  2372. .ios .router-transition-backward .navbar-previous.navbar-large-collapsed.navbar-large-transparent.router-navbar-transition-from-large .navbar-bg,
  2373. .ios .router-transition-backward .navbar-previous.navbar-large-collapsed.navbar-large.navbar-transparent.router-navbar-transition-from-large .navbar-bg {
  2374. animation-name: ios-navbar-bg-from-lb-to-ct;
  2375. }
  2376. .view-master-detail .navbars {
  2377. z-index: auto;
  2378. }
  2379. .view-master-detail .page-master {
  2380. z-index: 525;
  2381. }
  2382. .view-master-detail .navbar-master .navbar-inner,
  2383. .view-master-detail .navbar-master .navbar-bg {
  2384. z-index: 550;
  2385. }
  2386. .view-master-detail .navbar-master-detail .navbar-inner,
  2387. .view-master-detail .navbar-master-detail .navbar-bg {
  2388. z-index: 500;
  2389. }
  2390. .view-master-detail .navbar-master.navbar-previous {
  2391. pointer-events: auto;
  2392. }
  2393. .view-master-detail .navbar-master.navbar-previous .left,
  2394. .view-master-detail .navbar-master.navbar-previous:not(.navbar-large) .title,
  2395. .view-master-detail .navbar-master.navbar-previous .right,
  2396. .view-master-detail .navbar-master.navbar-previous .subnavbar {
  2397. opacity: 1;
  2398. }
  2399. .view-master-detail.router-transition .navbar-master .left,
  2400. .view-master-detail.router-transition .navbar-master .left .icon + span,
  2401. .view-master-detail.router-transition .navbar-master:not(.navbar-large) .title,
  2402. .view-master-detail.router-transition .navbar-master .right,
  2403. .view-master-detail.router-transition .navbar-master .subnavbar,
  2404. .view-master-detail.router-transition .navbar-master .fading {
  2405. opacity: 1 !important;
  2406. transition-duration: 0ms;
  2407. transform: none !important;
  2408. animation: none !important;
  2409. }
  2410. .view-master-detail.router-transition .navbar-master .navbar-bg {
  2411. transition-duration: 0ms;
  2412. animation: none !important;
  2413. }
  2414. .view-master-detail.router-transition .navbar-master.navbar-large .title {
  2415. opacity: calc(-1 + 2 * var(--f7-navbar-large-collapse-progress)) !important;
  2416. transition-duration: 0ms;
  2417. transform: none !important;
  2418. animation: none !important;
  2419. }
  2420. .view-master-detail.router-transition .navbar-master.navbar-large .title-large,
  2421. .view-master-detail.router-transition .navbar-master.navbar-large .title-large-text {
  2422. transition-duration: 0ms;
  2423. animation: none !important;
  2424. }
  2425. .view-master-detail.router-transition .navbar-master.navbar-large-transparent .navbar-bg,
  2426. .view-master-detail.router-transition .navbar-master.navbar-large.navbar-transparent .navbar-bg {
  2427. height: 100% !important;
  2428. opacity: var(--f7-navbar-large-collapse-progress) !important;
  2429. }
  2430. @keyframes ios-navbar-element-fade-in {
  2431. 0% {
  2432. opacity: 0;
  2433. }
  2434. 25% {
  2435. opacity: 0;
  2436. }
  2437. to {
  2438. opacity: 1;
  2439. }
  2440. }
  2441. @keyframes ios-navbar-element-fade-out {
  2442. from {
  2443. opacity: 1;
  2444. }
  2445. 75% {
  2446. opacity: 0;
  2447. }
  2448. to {
  2449. opacity: 0;
  2450. }
  2451. }
  2452. @keyframes ios-navbar-large-title-text-slide-up {
  2453. 0% {
  2454. transform: translateX(0px) translateY(0%) scale(1);
  2455. }
  2456. 100% {
  2457. transform: translateX(calc(-1 * (var(--f7-navbarLeftTextOffset) - var(--f7-navbarTitleLargeOffset)))) translateY(calc(-1 * var(--f7-navbar-large-title-height) + var(--f7-navbar-large-title-padding-vertical))) scale(0.5);
  2458. }
  2459. }
  2460. @keyframes ios-navbar-large-title-text-slide-down {
  2461. 0% {
  2462. transform: translateX(calc(-1 * (var(--f7-navbarLeftTextOffset) - var(--f7-navbarTitleLargeOffset)))) translateY(calc(-1 * var(--f7-navbar-large-title-height) + var(--f7-navbar-large-title-padding-vertical) / 2)) scale(0.5);
  2463. }
  2464. 100% {
  2465. transform: translateX(0px) translateY(0%) scale(1);
  2466. }
  2467. }
  2468. @keyframes ios-navbar-large-title-text-slide-left {
  2469. 0% {
  2470. transform: translateX(-100%);
  2471. }
  2472. 100% {
  2473. transform: translateX(0%);
  2474. }
  2475. }
  2476. @keyframes ios-navbar-large-title-text-slide-right {
  2477. 0% {
  2478. transform: translateX(0%);
  2479. }
  2480. 100% {
  2481. transform: translateX(-100%);
  2482. }
  2483. }
  2484. @keyframes ios-navbar-large-title-text-fade-out {
  2485. 0% {
  2486. opacity: 1;
  2487. }
  2488. 80% {
  2489. opacity: 0;
  2490. }
  2491. 100% {
  2492. opacity: 0;
  2493. }
  2494. }
  2495. @keyframes ios-navbar-large-title-text-fade-in {
  2496. 0% {
  2497. opacity: 0;
  2498. }
  2499. 20% {
  2500. opacity: 0;
  2501. }
  2502. 100% {
  2503. opacity: 1;
  2504. }
  2505. }
  2506. @keyframes ios-navbar-back-text-current-to-previous {
  2507. 0% {
  2508. opacity: 1;
  2509. transform: translateY(0px) translateX(0px) scale(1);
  2510. }
  2511. 80% {
  2512. opacity: 0;
  2513. }
  2514. 100% {
  2515. opacity: 0;
  2516. transform: translateX(calc(-1 * (var(--f7-navbarTitleLargeOffset) - var(--f7-navbarLeftTextOffset)))) translateY(calc(1 * var(--f7-navbar-large-title-height) - var(--f7-navbar-large-title-padding-vertical) / 2)) scale(2);
  2517. }
  2518. }
  2519. @keyframes ios-navbar-back-text-next-to-current {
  2520. 0% {
  2521. opacity: 0;
  2522. transform: translateX(calc(-1 * (var(--f7-navbarTitleLargeOffset) - var(--f7-navbarLeftTextOffset)))) translateY(calc(1 * var(--f7-navbar-large-title-height) + var(--f7-navbar-large-title-padding-vertical) / 2)) scale(2);
  2523. }
  2524. 20% {
  2525. opacity: 0;
  2526. }
  2527. 100% {
  2528. opacity: 1;
  2529. transform: translateX(0px) translateY(0px) scale(1);
  2530. }
  2531. }
  2532. @keyframes ios-navbar-bg-from-cb-to-lb {
  2533. from {
  2534. transform: var(--f7-navbar-large-bg-center-bottom);
  2535. }
  2536. to {
  2537. transform: var(--f7-navbar-large-bg-left-bottom);
  2538. }
  2539. }
  2540. @keyframes ios-navbar-bg-from-cb-to-lt {
  2541. from {
  2542. transform: var(--f7-navbar-large-bg-center-bottom);
  2543. }
  2544. to {
  2545. transform: var(--f7-navbar-large-bg-left-top);
  2546. }
  2547. }
  2548. @keyframes ios-navbar-bg-from-ct-to-lb {
  2549. from {
  2550. transform: var(--f7-navbar-large-bg-center-top);
  2551. }
  2552. to {
  2553. transform: var(--f7-navbar-large-bg-left-bottom);
  2554. }
  2555. }
  2556. @keyframes ios-navbar-bg-from-ct-to-lt {
  2557. from {
  2558. transform: var(--f7-navbar-large-bg-center-top);
  2559. }
  2560. to {
  2561. transform: var(--f7-navbar-large-bg-left-top);
  2562. }
  2563. }
  2564. @keyframes ios-navbar-bg-from-rb-to-cb {
  2565. from {
  2566. transform: var(--f7-navbar-large-bg-right-bottom);
  2567. }
  2568. to {
  2569. transform: var(--f7-navbar-large-bg-center-bottom);
  2570. }
  2571. }
  2572. @keyframes ios-navbar-bg-from-rb-to-ct {
  2573. from {
  2574. transform: var(--f7-navbar-large-bg-right-bottom);
  2575. }
  2576. to {
  2577. transform: var(--f7-navbar-large-bg-center-top);
  2578. }
  2579. }
  2580. @keyframes ios-navbar-bg-from-rt-to-cb {
  2581. from {
  2582. transform: var(--f7-navbar-large-bg-right-top);
  2583. }
  2584. to {
  2585. transform: var(--f7-navbar-large-bg-center-bottom);
  2586. }
  2587. }
  2588. @keyframes ios-navbar-bg-from-cb-to-rb {
  2589. from {
  2590. transform: var(--f7-navbar-large-bg-center-bottom);
  2591. }
  2592. to {
  2593. transform: var(--f7-navbar-large-bg-right-bottom);
  2594. }
  2595. }
  2596. @keyframes ios-navbar-bg-from-ct-to-rb {
  2597. from {
  2598. transform: var(--f7-navbar-large-bg-center-top);
  2599. }
  2600. to {
  2601. transform: var(--f7-navbar-large-bg-right-bottom);
  2602. }
  2603. }
  2604. @keyframes ios-navbar-bg-from-cb-to-rt {
  2605. from {
  2606. transform: var(--f7-navbar-large-bg-center-bottom);
  2607. }
  2608. to {
  2609. transform: var(--f7-navbar-large-bg-right-top);
  2610. }
  2611. }
  2612. @keyframes ios-navbar-bg-from-ct-to-rt {
  2613. from {
  2614. transform: var(--f7-navbar-large-bg-center-top);
  2615. }
  2616. to {
  2617. transform: var(--f7-navbar-large-bg-right-top);
  2618. }
  2619. }
  2620. @keyframes ios-navbar-bg-from-lb-to-cb {
  2621. from {
  2622. transform: var(--f7-navbar-large-bg-left-bottom);
  2623. }
  2624. to {
  2625. transform: var(--f7-navbar-large-bg-center-bottom);
  2626. }
  2627. }
  2628. @keyframes ios-navbar-bg-from-lt-to-cb {
  2629. from {
  2630. transform: var(--f7-navbar-large-bg-left-top);
  2631. }
  2632. to {
  2633. transform: var(--f7-navbar-large-bg-center-bottom);
  2634. }
  2635. }
  2636. @keyframes ios-navbar-bg-from-lb-to-ct {
  2637. from {
  2638. transform: var(--f7-navbar-large-bg-left-bottom);
  2639. }
  2640. to {
  2641. transform: var(--f7-navbar-large-bg-center-top);
  2642. }
  2643. }
  2644. @keyframes ios-navbar-bg-from-lt-to-ct {
  2645. from {
  2646. transform: var(--f7-navbar-large-bg-left-top);
  2647. }
  2648. to {
  2649. transform: var(--f7-navbar-large-bg-center-top);
  2650. }
  2651. }
  2652. @keyframes ios-navbar-transparent-bg-from-l-to-c {
  2653. from {
  2654. transform: var(--f7-navbar-large-transparent-bg-left);
  2655. }
  2656. to {
  2657. transform: var(--f7-navbar-large-transparent-bg-center);
  2658. }
  2659. }
  2660. @keyframes ios-navbar-transparent-bg-from-c-to-l {
  2661. from {
  2662. transform: var(--f7-navbar-large-transparent-bg-center);
  2663. }
  2664. to {
  2665. transform: var(--f7-navbar-large-transparent-bg-left);
  2666. }
  2667. }
  2668. .md .navbar a.link {
  2669. padding: 0 16px;
  2670. min-width: 48px;
  2671. }
  2672. .md .navbar a.link:before {
  2673. content: '';
  2674. width: 152%;
  2675. height: 152%;
  2676. position: absolute;
  2677. left: -26%;
  2678. top: -26%;
  2679. background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
  2680. background-repeat: no-repeat;
  2681. background-position: center;
  2682. background-size: 100% 100%;
  2683. opacity: 0;
  2684. pointer-events: none;
  2685. transition-duration: 600ms;
  2686. }
  2687. .md .navbar a.link.active-state:before {
  2688. opacity: 1;
  2689. transition-duration: 150ms;
  2690. }
  2691. .md .navbar a.icon-only {
  2692. min-width: 0;
  2693. flex-shrink: 0;
  2694. width: 56px;
  2695. }
  2696. .md .navbar .right {
  2697. margin-right: auto;
  2698. }
  2699. .md .navbar .right:first-child {
  2700. left: var(--f7-safe-area-left);
  2701. }
  2702. .md .navbar-inner {
  2703. justify-content: flex-start;
  2704. overflow: hidden;
  2705. }
  2706. .md .navbar-large:not(.navbar-large-collapsed) .navbar-inner {
  2707. overflow: visible;
  2708. }
  2709. .md .page.page-with-subnavbar .navbar-inner {
  2710. overflow: visible;
  2711. }
  2712. .md .navbar-inner-centered-title {
  2713. justify-content: space-between;
  2714. }
  2715. .md .navbar-inner-centered-title .right {
  2716. margin-right: 0;
  2717. }
  2718. .md .navbar-inner-centered-title .title {
  2719. text-align: center;
  2720. }
  2721. .aurora .navbar a.icon-only {
  2722. margin: 0;
  2723. justify-content: center;
  2724. }
  2725. .aurora .navbar .left a + a,
  2726. .aurora .navbar .right a + a {
  2727. margin-right: 10px;
  2728. }
  2729. .aurora .navbar b {
  2730. font-weight: bold;
  2731. }
  2732. .aurora .navbar .left {
  2733. margin-left: 10px;
  2734. }
  2735. .aurora .navbar .right {
  2736. margin-right: 10px;
  2737. }
  2738. .aurora .navbar .right:first-child {
  2739. left: calc(16px + var(--f7-safe-area-left));
  2740. }
  2741. .aurora .navbar-inner {
  2742. justify-content: space-between;
  2743. }
  2744. .aurora .navbar-inner-left-title {
  2745. justify-content: flex-start;
  2746. }
  2747. .aurora .navbar-inner-left-title .right {
  2748. margin-right: auto;
  2749. }
  2750. .aurora .navbar-inner-left-title .title {
  2751. text-align: left;
  2752. margin-left: 10px;
  2753. }
  2754. /* === Toolbar === */
  2755. :root {
  2756. /*
  2757. --f7-toolbar-bg-color: var(--f7-bars-bg-color);
  2758. --f7-toolbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
  2759. --f7-toolbar-bg-image: var(--f7-bars-bg-image);
  2760. --f7-toolbar-border-color: var(--f7-bars-border-color);
  2761. --f7-toolbar-link-color: var(--f7-bars-link-color);
  2762. --f7-toolbar-text-color: var(--f7-bars-text-color);
  2763. --f7-tabbar-link-active-color: var(--f7-theme-color);
  2764. */
  2765. --f7-tabbar-link-active-bg-color: transparent;
  2766. --f7-tabbar-label-text-transform: none;
  2767. --f7-toolbar-hide-show-transition-duration: 400ms;
  2768. }
  2769. .ios {
  2770. --f7-toolbar-height: 44px;
  2771. --f7-toolbar-font-size: 17px;
  2772. --f7-toolbar-inner-padding-left: 8px;
  2773. --f7-toolbar-inner-padding-right: 8px;
  2774. /*
  2775. --f7-toolbar-link-height: var(--f7-toolbar-height);
  2776. --f7-toolbar-link-line-height: var(--f7-toolbar-height);
  2777. */
  2778. --f7-tabbar-labels-height: 50px;
  2779. --f7-tabbar-labels-tablet-height: 50px;
  2780. --f7-toolbar-top-shadow-image: none;
  2781. --f7-toolbar-bottom-shadow-image: none;
  2782. --f7-tabbar-icon-size: 28px;
  2783. --f7-tabbar-link-text-transform: none;
  2784. --f7-tabbar-link-font-weight: 400;
  2785. --f7-tabbar-link-letter-spacing: 0;
  2786. --f7-tabbar-label-font-size: 12px;
  2787. --f7-tabbar-label-tablet-font-size: 14px;
  2788. --f7-tabbar-label-font-weight: 500;
  2789. --f7-tabbar-label-letter-spacing: 0.01;
  2790. --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.4);
  2791. }
  2792. .ios .theme-dark,
  2793. .ios.theme-dark {
  2794. --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
  2795. }
  2796. .md {
  2797. --f7-toolbar-height: 48px;
  2798. --f7-toolbar-font-size: 14px;
  2799. --f7-toolbar-inner-padding-left: 0px;
  2800. --f7-toolbar-inner-padding-right: 0px;
  2801. /*
  2802. --f7-toolbar-link-height: var(--f7-toolbar-height);
  2803. --f7-toolbar-link-line-height: var(--f7-toolbar-height);
  2804. */
  2805. --f7-tabbar-labels-height: 56px;
  2806. --f7-tabbar-labels-tablet-height: 56px;
  2807. /*
  2808. --f7-tabbar-link-active-border-color: var(--f7-theme-color);
  2809. */
  2810. --f7-toolbar-top-shadow-image: var(--f7-bars-shadow-bottom-image);
  2811. --f7-toolbar-bottom-shadow-image: var(--f7-bars-shadow-top-image);
  2812. --f7-tabbar-icon-size: 24px;
  2813. --f7-tabbar-link-text-transform: uppercase;
  2814. --f7-tabbar-link-font-weight: 500;
  2815. --f7-tabbar-link-letter-spacing: 0.03em;
  2816. --f7-tabbar-label-font-size: 14px;
  2817. --f7-tabbar-label-tablet-font-size: 14px;
  2818. --f7-tabbar-label-font-weight: 400;
  2819. --f7-tabbar-label-letter-spacing: 0;
  2820. --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.54);
  2821. }
  2822. .md .theme-dark,
  2823. .md.theme-dark {
  2824. --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
  2825. }
  2826. .aurora {
  2827. --f7-toolbar-height: 38px;
  2828. --f7-toolbar-font-size: 14px;
  2829. --f7-toolbar-inner-padding-left: 16px;
  2830. --f7-toolbar-inner-padding-right: 16px;
  2831. --f7-toolbar-link-height: auto;
  2832. --f7-toolbar-link-line-height: inherit;
  2833. --f7-tabbar-labels-height: 44px;
  2834. --f7-tabbar-labels-tablet-height: 44px;
  2835. --f7-tabbar-link-inactive-bg-color: rgba(0, 0, 0, 0.2);
  2836. --f7-toolbar-top-shadow-image: none;
  2837. --f7-toolbar-bottom-shadow-image: none;
  2838. --f7-tabbar-icon-size: 18px;
  2839. --f7-tabbar-link-text-transform: none;
  2840. --f7-tabbar-link-font-weight: 400;
  2841. --f7-tabbar-link-letter-spacing: 0;
  2842. --f7-tabbar-label-font-size: 12px;
  2843. --f7-tabbar-label-tablet-font-size: 12px;
  2844. --f7-tabbar-label-font-weight: 500;
  2845. --f7-tabbar-label-letter-spacing: 0.01;
  2846. --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.5);
  2847. }
  2848. .aurora .theme-dark,
  2849. .aurora.theme-dark {
  2850. --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.5);
  2851. }
  2852. .toolbar {
  2853. width: 100%;
  2854. position: relative;
  2855. margin: 0;
  2856. transform: translate3d(0, 0, 0);
  2857. -webkit-backface-visibility: hidden;
  2858. backface-visibility: hidden;
  2859. z-index: 600;
  2860. box-sizing: border-box;
  2861. left: 0;
  2862. height: var(--f7-toolbar-height);
  2863. background-image: var(--f7-toolbar-bg-image, var(--f7-bars-bg-image));
  2864. background-color: var(--f7-toolbar-bg-color, var(--f7-bars-bg-color));
  2865. color: var(--f7-toolbar-text-color, var(--f7-bars-text-color));
  2866. font-size: var(--f7-toolbar-font-size);
  2867. }
  2868. @supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  2869. .ios-translucent-bars .toolbar {
  2870. background-color: rgba(var(--f7-toolbar-bg-color-rgb, var(--f7-bars-bg-color-rgb)), var(--f7-bars-translucent-opacity));
  2871. -webkit-backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
  2872. backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
  2873. }
  2874. }
  2875. .toolbar b {
  2876. font-weight: 600;
  2877. }
  2878. .toolbar a {
  2879. color: var(--f7-toolbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
  2880. box-sizing: border-box;
  2881. flex-shrink: 1;
  2882. position: relative;
  2883. white-space: nowrap;
  2884. text-overflow: ellipsis;
  2885. }
  2886. .toolbar .link {
  2887. display: flex;
  2888. line-height: var(--f7-toolbar-link-line-height, var(--f7-toolbar-height));
  2889. height: var(--f7-toolbar-link-height, var(--f7-toolbar-height));
  2890. }
  2891. .toolbar i.icon {
  2892. display: block;
  2893. }
  2894. .toolbar:after,
  2895. .toolbar:before {
  2896. -webkit-backface-visibility: hidden;
  2897. backface-visibility: hidden;
  2898. }
  2899. .views > .toolbar,
  2900. .view > .toolbar,
  2901. .page > .toolbar {
  2902. position: absolute;
  2903. }
  2904. .toolbar-top,
  2905. .ios .toolbar-top-ios,
  2906. .md .toolbar-top-md,
  2907. .aurora .toolbar-top-aurora {
  2908. top: 0;
  2909. }
  2910. .toolbar-top .tab-link-highlight,
  2911. .ios .toolbar-top-ios .tab-link-highlight,
  2912. .md .toolbar-top-md .tab-link-highlight,
  2913. .aurora .toolbar-top-aurora .tab-link-highlight {
  2914. bottom: 0;
  2915. }
  2916. .toolbar-top.no-hairline:after,
  2917. .ios .toolbar-top-ios.no-hairline:after,
  2918. .md .toolbar-top-md.no-hairline:after,
  2919. .aurora .toolbar-top-aurora.no-hairline:after,
  2920. .toolbar-top.no-border:after,
  2921. .ios .toolbar-top-ios.no-border:after,
  2922. .md .toolbar-top-md.no-border:after,
  2923. .aurora .toolbar-top-aurora.no-border:after {
  2924. display: none !important;
  2925. }
  2926. .toolbar-top.no-shadow:before,
  2927. .ios .toolbar-top-ios.no-shadow:before,
  2928. .md .toolbar-top-md.no-shadow:before,
  2929. .aurora .toolbar-top-aurora.no-shadow:before,
  2930. .toolbar-top.toolbar-hidden:before,
  2931. .ios .toolbar-top-ios.toolbar-hidden:before,
  2932. .md .toolbar-top-md.toolbar-hidden:before,
  2933. .aurora .toolbar-top-aurora.toolbar-hidden:before {
  2934. display: none !important;
  2935. }
  2936. .toolbar-top:after,
  2937. .ios .toolbar-top-ios:after,
  2938. .md .toolbar-top-md:after,
  2939. .aurora .toolbar-top-aurora:after,
  2940. .toolbar-top:before,
  2941. .ios .toolbar-top-ios:before,
  2942. .md .toolbar-top-md:before,
  2943. .aurora .toolbar-top-aurora:before {
  2944. -webkit-backface-visibility: hidden;
  2945. backface-visibility: hidden;
  2946. }
  2947. .toolbar-top:after,
  2948. .ios .toolbar-top-ios:after,
  2949. .md .toolbar-top-md:after,
  2950. .aurora .toolbar-top-aurora:after {
  2951. content: '';
  2952. position: absolute;
  2953. background-color: var(--f7-toolbar-border-color, var(--f7-bars-border-color));
  2954. display: block;
  2955. z-index: 15;
  2956. top: auto;
  2957. right: auto;
  2958. bottom: 0;
  2959. left: 0;
  2960. height: 1px;
  2961. width: 100%;
  2962. transform-origin: 50% 100%;
  2963. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  2964. }
  2965. .toolbar-top:before,
  2966. .ios .toolbar-top-ios:before,
  2967. .md .toolbar-top-md:before,
  2968. .aurora .toolbar-top-aurora:before {
  2969. content: '';
  2970. position: absolute;
  2971. right: 0;
  2972. width: 100%;
  2973. top: 100%;
  2974. bottom: auto;
  2975. height: 8px;
  2976. pointer-events: none;
  2977. background: var(--f7-toolbar-top-shadow-image);
  2978. }
  2979. .toolbar-bottom,
  2980. .ios .toolbar-bottom-ios,
  2981. .md .toolbar-bottom-md,
  2982. .aurora .toolbar-bottom-aurora {
  2983. bottom: 0;
  2984. height: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
  2985. }
  2986. .toolbar-bottom .tab-link-highlight,
  2987. .ios .toolbar-bottom-ios .tab-link-highlight,
  2988. .md .toolbar-bottom-md .tab-link-highlight,
  2989. .aurora .toolbar-bottom-aurora .tab-link-highlight {
  2990. top: 0;
  2991. }
  2992. .toolbar-bottom .toolbar-inner,
  2993. .ios .toolbar-bottom-ios .toolbar-inner,
  2994. .md .toolbar-bottom-md .toolbar-inner,
  2995. .aurora .toolbar-bottom-aurora .toolbar-inner {
  2996. height: auto;
  2997. top: 0;
  2998. bottom: var(--f7-safe-area-bottom);
  2999. }
  3000. .toolbar-bottom.no-hairline:before,
  3001. .ios .toolbar-bottom-ios.no-hairline:before,
  3002. .md .toolbar-bottom-md.no-hairline:before,
  3003. .aurora .toolbar-bottom-aurora.no-hairline:before,
  3004. .toolbar-bottom.no-border:before,
  3005. .ios .toolbar-bottom-ios.no-border:before,
  3006. .md .toolbar-bottom-md.no-border:before,
  3007. .aurora .toolbar-bottom-aurora.no-border:before {
  3008. display: none !important;
  3009. }
  3010. .toolbar-bottom.no-shadow:after,
  3011. .ios .toolbar-bottom-ios.no-shadow:after,
  3012. .md .toolbar-bottom-md.no-shadow:after,
  3013. .aurora .toolbar-bottom-aurora.no-shadow:after,
  3014. .toolbar-bottom.toolbar-hidden:after,
  3015. .ios .toolbar-bottom-ios.toolbar-hidden:after,
  3016. .md .toolbar-bottom-md.toolbar-hidden:after,
  3017. .aurora .toolbar-bottom-aurora.toolbar-hidden:after {
  3018. display: none !important;
  3019. }
  3020. .toolbar-bottom:before,
  3021. .ios .toolbar-bottom-ios:before,
  3022. .md .toolbar-bottom-md:before,
  3023. .aurora .toolbar-bottom-aurora:before {
  3024. content: '';
  3025. position: absolute;
  3026. background-color: var(--f7-toolbar-border-color, var(--f7-bars-border-color));
  3027. display: block;
  3028. z-index: 15;
  3029. top: 0;
  3030. right: auto;
  3031. bottom: auto;
  3032. left: 0;
  3033. height: 1px;
  3034. width: 100%;
  3035. transform-origin: 50% 0%;
  3036. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  3037. }
  3038. .toolbar-bottom:after,
  3039. .ios .toolbar-bottom-ios:after,
  3040. .md .toolbar-bottom-md:after,
  3041. .aurora .toolbar-bottom-aurora:after {
  3042. content: '';
  3043. position: absolute;
  3044. right: 0;
  3045. width: 100%;
  3046. bottom: 100%;
  3047. height: 8px;
  3048. top: auto;
  3049. pointer-events: none;
  3050. background: var(--f7-toolbar-bottom-shadow-image);
  3051. transform: translate3d(0, 0, 0);
  3052. }
  3053. .toolbar-inner {
  3054. position: absolute;
  3055. left: 0;
  3056. top: 0;
  3057. width: 100%;
  3058. height: 100%;
  3059. display: flex;
  3060. justify-content: space-between;
  3061. box-sizing: border-box;
  3062. align-items: center;
  3063. align-content: center;
  3064. overflow: hidden;
  3065. padding: 0 calc(var(--f7-toolbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-toolbar-inner-padding-left) + var(--f7-safe-area-left));
  3066. }
  3067. .views > .tabbar,
  3068. .views > .tabbar-labels {
  3069. z-index: 5001;
  3070. }
  3071. .tabbar a,
  3072. .tabbar-labels a {
  3073. color: var(--f7-tabbar-link-inactive-color);
  3074. }
  3075. .tabbar .tab-link:not(.tab-link-active),
  3076. .tabbar-labels .tab-link:not(.tab-link-active) {
  3077. background-color: var(--f7-tabbar-link-inactive-bg-color, transparent);
  3078. }
  3079. .tabbar .link,
  3080. .tabbar-labels .link {
  3081. line-height: 1.4;
  3082. }
  3083. .tabbar .tab-link,
  3084. .tabbar-labels .tab-link,
  3085. .tabbar .link,
  3086. .tabbar-labels .link {
  3087. height: 100%;
  3088. width: 100%;
  3089. box-sizing: border-box;
  3090. display: flex;
  3091. justify-content: center;
  3092. align-items: center;
  3093. flex-direction: column;
  3094. text-transform: var(--f7-tabbar-link-text-transform);
  3095. font-weight: var(--f7-tabbar-link-font-weight);
  3096. letter-spacing: var(--f7-tabbar-link-letter-spacing);
  3097. overflow: hidden;
  3098. }
  3099. .tabbar .tab-link-active,
  3100. .tabbar-labels .tab-link-active {
  3101. color: var(--f7-tabbar-link-active-color, var(--f7-theme-color));
  3102. background-color: var(--f7-tabbar-link-active-bg-color, transparent);
  3103. }
  3104. .tabbar i.icon,
  3105. .tabbar-labels i.icon {
  3106. font-size: var(--f7-tabbar-icon-size);
  3107. height: var(--f7-tabbar-icon-size);
  3108. line-height: var(--f7-tabbar-icon-size);
  3109. }
  3110. .tabbar-labels {
  3111. --f7-toolbar-height: var(--f7-tabbar-labels-height);
  3112. }
  3113. .tabbar-labels .tab-link,
  3114. .tabbar-labels .link {
  3115. height: 100%;
  3116. justify-content: space-between;
  3117. align-items: center;
  3118. }
  3119. .tabbar-labels .tabbar-label {
  3120. display: block;
  3121. line-height: 1;
  3122. margin: 0;
  3123. position: relative;
  3124. text-overflow: ellipsis;
  3125. white-space: nowrap;
  3126. font-size: var(--f7-tabbar-label-font-size);
  3127. text-transform: var(--f7-tabbar-label-text-transform);
  3128. font-weight: var(--f7-tabbar-label-font-weight);
  3129. letter-spacing: var(--f7-tabbar-label-letter-spacing);
  3130. }
  3131. @media (min-width: 768px) and (min-height: 600px) {
  3132. :root {
  3133. --f7-tabbar-labels-height: var(--f7-tabbar-labels-tablet-height);
  3134. --f7-tabbar-label-font-size: var(--f7-tabbar-label-tablet-font-size);
  3135. }
  3136. }
  3137. .tabbar-scrollable .toolbar-inner {
  3138. justify-content: flex-start;
  3139. overflow: auto;
  3140. -webkit-overflow-scrolling: touch;
  3141. }
  3142. .tabbar-scrollable .toolbar-inner::-webkit-scrollbar {
  3143. display: none !important;
  3144. width: 0 !important;
  3145. height: 0 !important;
  3146. -webkit-appearance: none;
  3147. opacity: 0 !important;
  3148. }
  3149. .tabbar-scrollable .tab-link,
  3150. .tabbar-scrollable .link {
  3151. width: auto;
  3152. flex-shrink: 0;
  3153. }
  3154. .toolbar-transitioning,
  3155. .navbar-transitioning + .toolbar,
  3156. .navbar-transitioning ~ * .toolbar {
  3157. transition-duration: var(--f7-toolbar-hide-show-transition-duration);
  3158. }
  3159. .toolbar-bottom ~ *,
  3160. .ios .toolbar-bottom-ios ~ *,
  3161. .md .toolbar-bottom-md ~ *,
  3162. .aurora .toolbar-bottom-aurora ~ * {
  3163. --f7-page-toolbar-bottom-offset: var(--f7-toolbar-height);
  3164. }
  3165. .toolbar-bottom.tabbar-labels ~ *,
  3166. .ios .toolbar-bottom-ios.tabbar-labels ~ *,
  3167. .md .toolbar-bottom-md.tabbar-labels ~ *,
  3168. .aurora .toolbar-bottom-aurora.tabbar-labels ~ * {
  3169. --f7-page-toolbar-bottom-offset: var(--f7-tabbar-labels-height);
  3170. }
  3171. .toolbar-bottom.toolbar-hidden,
  3172. .ios .toolbar-bottom-ios.toolbar-hidden,
  3173. .md .toolbar-bottom-md.toolbar-hidden,
  3174. .aurora .toolbar-bottom-aurora.toolbar-hidden {
  3175. transform: translate3d(0, 100%, 0);
  3176. }
  3177. .toolbar-top ~ *,
  3178. .ios .toolbar-top-ios ~ *,
  3179. .md .toolbar-top-md ~ *,
  3180. .aurora .toolbar-top-aurora ~ * {
  3181. --f7-page-toolbar-top-offset: var(--f7-toolbar-height);
  3182. }
  3183. .toolbar-top.tabbar-labels ~ *,
  3184. .ios .toolbar-top-ios.tabbar-labels ~ *,
  3185. .md .toolbar-top-md.tabbar-labels ~ *,
  3186. .aurora .toolbar-top-aurora.tabbar-labels ~ * {
  3187. --f7-page-toolbar-top-offset: var(--f7-tabbar-labels-height);
  3188. }
  3189. .toolbar-top.toolbar-hidden,
  3190. .ios .toolbar-top-ios.toolbar-hidden,
  3191. .md .toolbar-top-md.toolbar-hidden,
  3192. .aurora .toolbar-top-aurora.toolbar-hidden {
  3193. transform: translate3d(0, -100%, 0);
  3194. }
  3195. .navbar ~ .toolbar-top,
  3196. .navbars ~ .toolbar-top,
  3197. .ios .navbar ~ .toolbar-top-ios,
  3198. .ios .navbars ~ .toolbar-top-ios,
  3199. .md .navbar ~ .toolbar-top-md,
  3200. .aurora .navbar ~ .toolbar-top-aurora,
  3201. .navbar ~ * .toolbar-top,
  3202. .navbars ~ * .toolbar-top,
  3203. .ios .navbar ~ * .toolbar-top-ios,
  3204. .ios .navbars ~ * .toolbar-top-ios,
  3205. .md .navbar ~ * .toolbar-top-md,
  3206. .aurora .navbar ~ * .toolbar-top-aurora,
  3207. .navbar ~ .page:not(.no-navbar) .toolbar-top,
  3208. .navbars ~ .page:not(.no-navbar) .toolbar-top,
  3209. .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios,
  3210. .ios .navbars ~ .page:not(.no-navbar) .toolbar-top-ios,
  3211. .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md,
  3212. .aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora {
  3213. top: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
  3214. }
  3215. .navbar ~ .toolbar-top.toolbar-hidden,
  3216. .navbars ~ .toolbar-top.toolbar-hidden,
  3217. .ios .navbar ~ .toolbar-top-ios.toolbar-hidden,
  3218. .ios .navbars ~ .toolbar-top-ios.toolbar-hidden,
  3219. .md .navbar ~ .toolbar-top-md.toolbar-hidden,
  3220. .aurora .navbar ~ .toolbar-top-aurora.toolbar-hidden,
  3221. .navbar ~ * .toolbar-top.toolbar-hidden,
  3222. .navbars ~ * .toolbar-top.toolbar-hidden,
  3223. .ios .navbar ~ * .toolbar-top-ios.toolbar-hidden,
  3224. .ios .navbars ~ * .toolbar-top-ios.toolbar-hidden,
  3225. .md .navbar ~ * .toolbar-top-md.toolbar-hidden,
  3226. .aurora .navbar ~ * .toolbar-top-aurora.toolbar-hidden,
  3227. .navbar ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden,
  3228. .navbars ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden,
  3229. .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden,
  3230. .ios .navbars ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden,
  3231. .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden,
  3232. .aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora.toolbar-hidden {
  3233. transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-toolbar-height) + var(--f7-safe-area-top))), 0);
  3234. }
  3235. .navbar ~ .toolbar-top.toolbar-hidden.tabbar-labels,
  3236. .navbars ~ .toolbar-top.toolbar-hidden.tabbar-labels,
  3237. .ios .navbar ~ .toolbar-top-ios.toolbar-hidden.tabbar-labels,
  3238. .ios .navbars ~ .toolbar-top-ios.toolbar-hidden.tabbar-labels,
  3239. .md .navbar ~ .toolbar-top-md.toolbar-hidden.tabbar-labels,
  3240. .aurora .navbar ~ .toolbar-top-aurora.toolbar-hidden.tabbar-labels,
  3241. .navbar ~ * .toolbar-top.toolbar-hidden.tabbar-labels,
  3242. .navbars ~ * .toolbar-top.toolbar-hidden.tabbar-labels,
  3243. .ios .navbar ~ * .toolbar-top-ios.toolbar-hidden.tabbar-labels,
  3244. .ios .navbars ~ * .toolbar-top-ios.toolbar-hidden.tabbar-labels,
  3245. .md .navbar ~ * .toolbar-top-md.toolbar-hidden.tabbar-labels,
  3246. .aurora .navbar ~ * .toolbar-top-aurora.toolbar-hidden.tabbar-labels,
  3247. .navbar ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden.tabbar-labels,
  3248. .navbars ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden.tabbar-labels,
  3249. .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden.tabbar-labels,
  3250. .ios .navbars ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden.tabbar-labels,
  3251. .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden.tabbar-labels,
  3252. .aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora.toolbar-hidden.tabbar-labels {
  3253. transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-tabbar-labels-height) + var(--f7-safe-area-top))), 0);
  3254. }
  3255. .navbar-hidden + .toolbar-top:not(.toolbar-hidden),
  3256. .ios .navbar-hidden + .toolbar-top-ios:not(.toolbar-hidden),
  3257. .md .navbar-hidden + .toolbar-top-md:not(.toolbar-hidden),
  3258. .aurora .navbar-hidden + .toolbar-top-aurora:not(.toolbar-hidden),
  3259. .navbar-hidden ~ * .toolbar-top:not(.toolbar-hidden),
  3260. .ios .navbar-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden),
  3261. .md .navbar-hidden ~ * .toolbar-top-md:not(.toolbar-hidden),
  3262. .aurora .navbar-hidden ~ * .toolbar-top-aurora:not(.toolbar-hidden) {
  3263. transform: translate3d(0, calc(0px - var(--f7-navbar-height)), 0);
  3264. }
  3265. .navbar-large-hidden + .toolbar-top:not(.toolbar-hidden),
  3266. .ios .navbar-large-hidden + .toolbar-top-ios:not(.toolbar-hidden),
  3267. .md .navbar-large-hidden + .toolbar-top-md:not(.toolbar-hidden),
  3268. .navbar-large-hidden ~ * .toolbar-top:not(.toolbar-hidden),
  3269. .ios .navbar-large-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden),
  3270. .md .navbar-large-hidden ~ * .toolbar-top-md:not(.toolbar-hidden),
  3271. .aurora .navbar-large-hidden ~ * .toolbar-top-aurora:not(.toolbar-hidden) {
  3272. transform: translate3d(0, calc(0px - var(--f7-navbar-height) - var(--f7-navbar-large-title-height)), 0);
  3273. }
  3274. .ios .toolbar a.icon-only {
  3275. min-height: var(--f7-toolbar-height);
  3276. display: flex;
  3277. justify-content: center;
  3278. align-items: center;
  3279. margin: 0;
  3280. min-width: 44px;
  3281. }
  3282. .ios .tabbar-labels .tab-link,
  3283. .ios .tabbar-labels .link {
  3284. padding-top: 4px;
  3285. padding-bottom: 4px;
  3286. }
  3287. .ios .tabbar-labels .tab-link i + span,
  3288. .ios .tabbar-labels .link i + span {
  3289. margin: 0;
  3290. }
  3291. @media (min-width: 768px) and (min-height: 600px) {
  3292. .ios .tabbar .tab-link,
  3293. .ios .tabbar-labels .tab-link,
  3294. .ios .tabbar .link,
  3295. .ios .tabbar-labels .link {
  3296. justify-content: center;
  3297. flex-direction: row;
  3298. }
  3299. .ios .tabbar .tab-link i + span,
  3300. .ios .tabbar-labels .tab-link i + span,
  3301. .ios .tabbar .link i + span,
  3302. .ios .tabbar-labels .link i + span {
  3303. margin-left: 5px;
  3304. }
  3305. }
  3306. .ios .tabbar-scrollable .toolbar-inner {
  3307. justify-content: flex-start;
  3308. }
  3309. .ios .tabbar-scrollable .tab-link,
  3310. .ios .tabbar-scrollable .link {
  3311. padding: 0 8px;
  3312. }
  3313. .md .toolbar .link {
  3314. justify-content: center;
  3315. padding: 0 16px;
  3316. min-width: 48px;
  3317. }
  3318. .md .toolbar .link:before {
  3319. content: '';
  3320. width: 152%;
  3321. height: 152%;
  3322. position: absolute;
  3323. left: -26%;
  3324. top: -26%;
  3325. background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
  3326. background-repeat: no-repeat;
  3327. background-position: center;
  3328. background-size: 100% 100%;
  3329. opacity: 0;
  3330. pointer-events: none;
  3331. transition-duration: 600ms;
  3332. }
  3333. .md .toolbar .link.active-state:before {
  3334. opacity: 1;
  3335. transition-duration: 150ms;
  3336. }
  3337. .md .toolbar a.icon-only {
  3338. min-width: 0;
  3339. flex-shrink: 0;
  3340. }
  3341. .md .tabbar .tab-link,
  3342. .md .tabbar-labels .tab-link,
  3343. .md .tabbar .link,
  3344. .md .tabbar-labels .link {
  3345. padding-left: 0;
  3346. padding-right: 0;
  3347. }
  3348. .md .tabbar a.icon-only,
  3349. .md .tabbar-labels a.icon-only {
  3350. flex-shrink: initial;
  3351. }
  3352. .md .tabbar .tab-link,
  3353. .md .tabbar-labels .tab-link {
  3354. transition-duration: 300ms;
  3355. overflow: hidden;
  3356. position: relative;
  3357. }
  3358. .md .tabbar .tab-link-highlight,
  3359. .md .tabbar-labels .tab-link-highlight {
  3360. position: absolute;
  3361. left: 0;
  3362. height: 2px;
  3363. background: var(--f7-tabbar-link-active-border-color, var(--f7-theme-color));
  3364. transition-duration: 300ms;
  3365. right: 0;
  3366. }
  3367. .md .tabbar-labels .tab-link,
  3368. .md .tabbar-labels .link {
  3369. padding-top: 7px;
  3370. padding-bottom: 7px;
  3371. }
  3372. .md .tabbar-label {
  3373. max-width: 100%;
  3374. overflow: hidden;
  3375. line-height: 1.2;
  3376. }
  3377. .md .tabbar-scrollable .toolbar-inner {
  3378. overflow: auto;
  3379. }
  3380. .md .tabbar-scrollable .tab-link,
  3381. .md .tabbar-scrollable .link {
  3382. padding: 0 16px;
  3383. }
  3384. .aurora .toolbar a.icon-only {
  3385. min-height: var(--f7-toolbar-height);
  3386. display: flex;
  3387. justify-content: center;
  3388. align-items: center;
  3389. margin: 0;
  3390. }
  3391. .aurora .tabbar .toolbar-inner,
  3392. .aurora .tabbar-labels .toolbar-inner {
  3393. padding-left: 0;
  3394. padding-right: 0;
  3395. }
  3396. .aurora .tabbar .tab-link,
  3397. .aurora .tabbar-labels .tab-link,
  3398. .aurora .tabbar .link,
  3399. .aurora .tabbar-labels .link {
  3400. transition-duration: 200ms;
  3401. }
  3402. .aurora .tabbar-labels .tab-link,
  3403. .aurora .tabbar-labels .link {
  3404. padding-top: 5px;
  3405. padding-bottom: 5px;
  3406. }
  3407. .aurora .tabbar-labels .tab-link i + span,
  3408. .aurora .tabbar-labels .link i + span {
  3409. margin: 0;
  3410. }
  3411. .aurora .tabbar-scrollable .toolbar-inner {
  3412. justify-content: flex-start;
  3413. }
  3414. .aurora .tabbar-scrollable .tab-link,
  3415. .aurora .tabbar-scrollable .link {
  3416. padding: 0 16px;
  3417. }
  3418. /* === Subnavbar === */
  3419. :root {
  3420. /*
  3421. --f7-subnavbar-bg-image: var(--f7-bars-bg-image);
  3422. --f7-subnavbar-bg-color: var(--f7-bars-bg-color);
  3423. --f7-subnavbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
  3424. --f7-subnavbar-border-color: var(--f7-bars-border-color);
  3425. --f7-subnavbar-link-color: var(--f7-bars-link-color);
  3426. --f7-subnavbar-text-color: var(--f7-bars-text-color);
  3427. */
  3428. --f7-subnavbar-title-line-height: 1.2;
  3429. }
  3430. .ios {
  3431. --f7-subnavbar-height: 44px;
  3432. --f7-subnavbar-inner-padding-left: 8px;
  3433. --f7-subnavbar-inner-padding-right: 8px;
  3434. --f7-subnavbar-title-font-size: 34px;
  3435. --f7-subnavbar-title-font-weight: 700;
  3436. --f7-subnavbar-title-letter-spacing: -0.03em;
  3437. --f7-subnavbar-title-margin-left: 8px;
  3438. --f7-subnavbar-shadow-image: none;
  3439. /*
  3440. --f7-subnavbar-link-height: var(--f7-subnavbar-height);
  3441. --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
  3442. */
  3443. }
  3444. .md {
  3445. --f7-subnavbar-height: 48px;
  3446. --f7-subnavbar-inner-padding-left: 16px;
  3447. --f7-subnavbar-inner-padding-right: 16px;
  3448. --f7-subnavbar-title-font-size: 20px;
  3449. --f7-subnavbar-title-font-weight: 500;
  3450. --f7-subnavbar-title-letter-spacing: 0;
  3451. --f7-subnavbar-title-margin-left: 0px;
  3452. --f7-subnavbar-shadow-image: var(--f7-bars-shadow-bottom-image);
  3453. /*
  3454. --f7-subnavbar-link-height: var(--f7-subnavbar-height);
  3455. --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
  3456. */
  3457. }
  3458. .aurora {
  3459. --f7-subnavbar-height: 38px;
  3460. --f7-subnavbar-inner-padding-left: 16px;
  3461. --f7-subnavbar-inner-padding-right: 16px;
  3462. --f7-subnavbar-title-font-size: 26px;
  3463. --f7-subnavbar-title-font-weight: bold;
  3464. --f7-subnavbar-title-letter-spacing: -0.03em;
  3465. --f7-subnavbar-title-margin-left: 0px;
  3466. --f7-subnavbar-shadow-image: none;
  3467. --f7-subnavbar-link-height: auto;
  3468. --f7-subnavbar-link-line-height: inherit;
  3469. }
  3470. .subnavbar {
  3471. width: 100%;
  3472. position: absolute;
  3473. left: 0;
  3474. top: 0;
  3475. z-index: 600;
  3476. box-sizing: border-box;
  3477. display: flex;
  3478. justify-content: space-between;
  3479. align-items: center;
  3480. background-image: var(--f7-subnavbar-bg-image, var(--f7-bars-bg-image));
  3481. background-color: var(--f7-subnavbar-bg-color, var(--f7-bars-bg-color));
  3482. color: var(--f7-subnavbar-text-color, var(--f7-bars-text-color));
  3483. }
  3484. @supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  3485. .ios-translucent-bars .subnavbar {
  3486. background-color: rgba(var(--f7-subnavbar-bg-color-rgb, var(--f7-bars-bg-color-rgb)), var(--f7-bars-translucent-opacity));
  3487. -webkit-backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
  3488. backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
  3489. }
  3490. }
  3491. .subnavbar .subnavbar-title {
  3492. position: relative;
  3493. overflow: hidden;
  3494. text-overflow: ellpsis;
  3495. white-space: nowrap;
  3496. font-size: var(--f7-subnavbar-title-font-size);
  3497. font-weight: var(--f7-subnavbar-title-font-weight);
  3498. text-align: left;
  3499. display: inline-block;
  3500. line-height: var(--f7-subnavbar-title-line-height);
  3501. letter-spacing: var(--f7-subnavbar-title-letter-spacing);
  3502. margin-right: var(--f7-subnavbar-title-margin-left);
  3503. }
  3504. .subnavbar .left,
  3505. .subnavbar .right {
  3506. flex-shrink: 0;
  3507. display: flex;
  3508. justify-content: flex-start;
  3509. align-items: center;
  3510. }
  3511. .subnavbar .right:first-child {
  3512. position: absolute;
  3513. height: 100%;
  3514. }
  3515. .subnavbar a {
  3516. color: var(--f7-subnavbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
  3517. }
  3518. .subnavbar a.link {
  3519. line-height: var(--f7-subnavbar-link-line-height, var(--f7-subnavbar-height));
  3520. height: var(--f7-subnavbar-link-height, var(--f7-subnavbar-height));
  3521. }
  3522. .subnavbar a.icon-only {
  3523. min-width: var(--f7-subnavbar-height);
  3524. }
  3525. .subnavbar.no-hairline:after,
  3526. .subnavbar.no-border:after {
  3527. display: none !important;
  3528. }
  3529. .subnavbar.no-shadow:before,
  3530. .subnavbar.navbar-hidden:before {
  3531. display: none !important;
  3532. }
  3533. .subnavbar:after,
  3534. .subnavbar:before {
  3535. -webkit-backface-visibility: hidden;
  3536. backface-visibility: hidden;
  3537. }
  3538. .subnavbar:after {
  3539. content: '';
  3540. position: absolute;
  3541. background-color: var(--f7-subnavbar-border-color, var(--f7-bars-border-color));
  3542. display: block;
  3543. z-index: 15;
  3544. top: auto;
  3545. right: auto;
  3546. bottom: 0;
  3547. left: 0;
  3548. height: 1px;
  3549. width: 100%;
  3550. transform-origin: 50% 100%;
  3551. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  3552. }
  3553. .subnavbar:before {
  3554. content: '';
  3555. position: absolute;
  3556. right: 0;
  3557. width: 100%;
  3558. top: 100%;
  3559. bottom: auto;
  3560. height: 8px;
  3561. pointer-events: none;
  3562. background: var(--f7-subnavbar-shadow-image);
  3563. }
  3564. .subnavbar-inner {
  3565. width: 100%;
  3566. height: 100%;
  3567. display: flex;
  3568. align-items: center;
  3569. box-sizing: border-box;
  3570. justify-content: space-between;
  3571. overflow: hidden;
  3572. padding: 0 calc(var(--f7-subnavbar-inner-padding-left) + var(--f7-safe-area-right)) 0 calc(var(--f7-subnavbar-inner-padding-right) + var(--f7-safe-area-left));
  3573. }
  3574. .subnavbar-inner.stacked {
  3575. display: none;
  3576. }
  3577. .navbar .subnavbar {
  3578. top: 100%;
  3579. }
  3580. .views > .subnavbar,
  3581. .view > .subnavbar,
  3582. .page > .subnavbar {
  3583. position: absolute;
  3584. }
  3585. .navbar ~ * .subnavbar,
  3586. .navbars ~ * .subnavbar,
  3587. .page-with-subnavbar .navbar ~ .subnavbar,
  3588. .page-with-subnavbar .navbar ~ * .subnavbar,
  3589. .navbar ~ .page-with-subnavbar:not(.no-navbar) .subnavbar,
  3590. .navbar ~ .subnavbar,
  3591. .navbars ~ .page-with-subnavbar:not(.no-navbar) .subnavbar,
  3592. .navbars ~ .subnavbar {
  3593. top: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
  3594. }
  3595. .navbar ~ .page-with-navbar-large:not(.no-navbar) .subnavbar,
  3596. .navbars ~ .page-with-navbar-large:not(.no-navbar) .subnavbar,
  3597. .page-with-subnavbar.page-with-navbar-large .navbar ~ .subnavbar,
  3598. .page-with-subnavbar.page-with-navbar-large .navbar ~ * .subnavbar,
  3599. .navbar .title-large ~ .subnavbar {
  3600. top: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height) + var(--f7-safe-area-top));
  3601. transform: translate3d(0, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
  3602. }
  3603. .page-with-subnavbar,
  3604. .subnavbar ~ * {
  3605. --f7-page-subnavbar-offset: var(--f7-subnavbar-height);
  3606. }
  3607. .ios .subnavbar {
  3608. height: calc(var(--f7-subnavbar-height) + 1px);
  3609. margin-top: -1px;
  3610. padding-top: 1px;
  3611. }
  3612. .ios .subnavbar .title {
  3613. align-self: flex-start;
  3614. flex-shrink: 10;
  3615. }
  3616. .ios .subnavbar .left a + a,
  3617. .ios .subnavbar .right a + a {
  3618. margin-right: 16px;
  3619. }
  3620. .ios .subnavbar .left {
  3621. margin-left: 10px;
  3622. }
  3623. .ios .subnavbar .right {
  3624. margin-right: 10px;
  3625. }
  3626. .ios .subnavbar .right:first-child {
  3627. left: 8px;
  3628. }
  3629. .ios .subnavbar a.link {
  3630. justify-content: flex-start;
  3631. }
  3632. .ios .subnavbar a.icon-only {
  3633. justify-content: center;
  3634. margin: 0;
  3635. }
  3636. .md .subnavbar {
  3637. height: var(--f7-subnavbar-height);
  3638. }
  3639. .md .subnavbar .right {
  3640. margin-right: auto;
  3641. }
  3642. .md .subnavbar .right:first-child {
  3643. left: 16px;
  3644. }
  3645. .md .subnavbar a.link {
  3646. justify-content: center;
  3647. padding: 0 16px;
  3648. }
  3649. .md .subnavbar a.link:before {
  3650. content: '';
  3651. width: 152%;
  3652. height: 152%;
  3653. position: absolute;
  3654. left: -26%;
  3655. top: -26%;
  3656. background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
  3657. background-repeat: no-repeat;
  3658. background-position: center;
  3659. background-size: 100% 100%;
  3660. opacity: 0;
  3661. pointer-events: none;
  3662. transition-duration: 600ms;
  3663. }
  3664. .md .subnavbar a.link.active-state:before {
  3665. opacity: 1;
  3666. transition-duration: 150ms;
  3667. }
  3668. .md .subnavbar a.icon-only {
  3669. flex-shrink: 0;
  3670. }
  3671. .md .subnavbar-inner > a.link:first-child {
  3672. margin-right: calc(-1 * var(--f7-subnavbar-inner-padding-right));
  3673. }
  3674. .md .subnavbar-inner > a.link:last-child {
  3675. margin-left: calc(-1 * var(--f7-subnavbar-inner-padding-left));
  3676. }
  3677. .aurora .subnavbar {
  3678. height: calc(var(--f7-subnavbar-height) + 1px);
  3679. margin-top: -1px;
  3680. padding-top: 1px;
  3681. }
  3682. .aurora .subnavbar .title {
  3683. align-self: flex-start;
  3684. flex-shrink: 10;
  3685. }
  3686. .aurora .subnavbar .left a + a,
  3687. .aurora .subnavbar .right a + a {
  3688. margin-right: 10px;
  3689. }
  3690. .aurora .subnavbar .left {
  3691. margin-left: 10px;
  3692. }
  3693. .aurora .subnavbar .right {
  3694. margin-right: 10px;
  3695. }
  3696. .aurora .subnavbar .right:first-child {
  3697. left: 16px;
  3698. }
  3699. .aurora .subnavbar a.link {
  3700. justify-content: flex-start;
  3701. }
  3702. .aurora .subnavbar a.icon-only {
  3703. justify-content: center;
  3704. margin: 0;
  3705. }
  3706. /* === Content Block === */
  3707. :root {
  3708. --f7-block-padding-horizontal: 16px;
  3709. --f7-block-padding-vertical: 16px;
  3710. --f7-block-font-size: inherit;
  3711. --f7-block-text-color: inherit;
  3712. --f7-block-header-margin: 10px;
  3713. --f7-block-footer-margin: 10px;
  3714. --f7-block-header-font-size: 14px;
  3715. --f7-block-footer-font-size: 14px;
  3716. --f7-block-title-text-transform: none;
  3717. --f7-block-title-white-space: nowrap;
  3718. --f7-block-title-medium-text-transform: none;
  3719. --f7-block-title-large-text-transform: none;
  3720. --f7-block-inset-side-margin: 16px;
  3721. --f7-block-title-medium-text-color: #000;
  3722. --f7-block-title-large-text-color: #000;
  3723. --f7-block-strong-bg-color: #fff;
  3724. }
  3725. :root .theme-dark,
  3726. :root.theme-dark {
  3727. --f7-block-title-text-color: #fff;
  3728. --f7-block-strong-border-color: rgba(255, 255, 255, 0.15);
  3729. --f7-block-title-medium-text-color: #fff;
  3730. --f7-block-title-large-text-color: #fff;
  3731. --f7-block-strong-bg-color: #1c1c1d;
  3732. }
  3733. .ios {
  3734. --f7-block-margin-vertical: 35px;
  3735. --f7-block-strong-border-color: rgba(0, 0, 0, 0.22);
  3736. --f7-block-title-text-color: #000;
  3737. --f7-block-title-font-size: 16px;
  3738. --f7-block-title-font-weight: 600;
  3739. --f7-block-title-line-height: 20px;
  3740. --f7-block-title-margin-bottom: 10px;
  3741. --f7-block-title-medium-font-size: 22px;
  3742. --f7-block-title-medium-font-weight: bold;
  3743. --f7-block-title-medium-line-height: 1.4;
  3744. --f7-block-title-large-font-size: 30px;
  3745. --f7-block-title-large-font-weight: bold;
  3746. --f7-block-title-large-line-height: 1.3;
  3747. --f7-block-inset-border-radius: 8px;
  3748. --f7-block-strong-text-color: #000;
  3749. --f7-block-header-text-color: rgba(0, 0, 0, 0.45);
  3750. --f7-block-footer-text-color: rgba(0, 0, 0, 0.45);
  3751. }
  3752. .ios .theme-dark,
  3753. .ios.theme-dark {
  3754. --f7-block-header-text-color: rgba(255, 255, 255, 0.55);
  3755. --f7-block-footer-text-color: rgba(255, 255, 255, 0.55);
  3756. --f7-block-strong-text-color: #fff;
  3757. }
  3758. .md {
  3759. --f7-block-margin-vertical: 32px;
  3760. --f7-block-strong-text-color: inherit;
  3761. --f7-block-strong-border-color: rgba(0, 0, 0, 0.12);
  3762. --f7-block-title-font-size: inherit;
  3763. --f7-block-title-text-color: rgba(0, 0, 0, 0.54);
  3764. --f7-block-title-font-weight: 500;
  3765. --f7-block-title-line-height: 16px;
  3766. --f7-block-title-margin-bottom: 16px;
  3767. --f7-block-title-medium-font-size: 24px;
  3768. --f7-block-title-medium-font-weight: 500;
  3769. --f7-block-title-medium-line-height: 1.3;
  3770. --f7-block-title-large-font-size: 34px;
  3771. --f7-block-title-large-font-weight: 500;
  3772. --f7-block-title-large-line-height: 1.2;
  3773. --f7-block-inset-border-radius: 4px;
  3774. --f7-block-header-text-color: rgba(0, 0, 0, 0.54);
  3775. --f7-block-footer-text-color: rgba(0, 0, 0, 0.54);
  3776. }
  3777. .md .theme-dark,
  3778. .md.theme-dark {
  3779. --f7-block-header-text-color: rgba(255, 255, 255, 0.54);
  3780. --f7-block-footer-text-color: rgba(255, 255, 255, 0.54);
  3781. }
  3782. .aurora {
  3783. --f7-block-margin-vertical: 15px;
  3784. --f7-block-strong-border-color: rgba(0, 0, 0, 0.12);
  3785. --f7-block-title-font-size: inherit;
  3786. --f7-block-title-text-color: rgba(0, 0, 0, 0.7);
  3787. --f7-block-title-font-weight: 600;
  3788. --f7-block-title-line-height: 1.5;
  3789. --f7-block-title-margin-bottom: 5px;
  3790. --f7-block-title-medium-font-size: 20px;
  3791. --f7-block-title-medium-font-weight: 600;
  3792. --f7-block-title-medium-line-height: 1.4;
  3793. --f7-block-title-large-font-size: 28px;
  3794. --f7-block-title-large-font-weight: bold;
  3795. --f7-block-title-large-line-height: 1.3;
  3796. --f7-block-inset-border-radius: 4px;
  3797. --f7-block-strong-text-color: inherit;
  3798. --f7-block-header-text-color: rgba(0, 0, 0, 0.6);
  3799. --f7-block-footer-text-color: rgba(0, 0, 0, 0.6);
  3800. }
  3801. .aurora .theme-dark,
  3802. .aurora.theme-dark {
  3803. --f7-block-header-text-color: rgba(255, 255, 255, 0.54);
  3804. --f7-block-footer-text-color: rgba(255, 255, 255, 0.54);
  3805. --f7-block-strong-text-color: #fff;
  3806. }
  3807. .block {
  3808. box-sizing: border-box;
  3809. position: relative;
  3810. z-index: 1;
  3811. color: var(--f7-block-text-color);
  3812. margin: var(--f7-block-margin-vertical) 0;
  3813. padding-top: 0;
  3814. padding-bottom: 0;
  3815. padding-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
  3816. padding-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
  3817. font-size: var(--f7-block-font-size);
  3818. }
  3819. .block.no-hairlines:before,
  3820. .block.no-hairlines ul:before,
  3821. .md .block.no-hairlines-md:before,
  3822. .md .block.no-hairlines-md ul:before,
  3823. .ios .block.no-hairlines-ios:before,
  3824. .ios .block.no-hairlines-ios ul:before,
  3825. .aurora .block.no-hairlines-aurora:before,
  3826. .aurora .block.no-hairlines-aurora ul:before,
  3827. .block.no-hairlines:after,
  3828. .block.no-hairlines ul:after,
  3829. .md .block.no-hairlines-md:after,
  3830. .md .block.no-hairlines-md ul:after,
  3831. .ios .block.no-hairlines-ios:after,
  3832. .ios .block.no-hairlines-ios ul:after,
  3833. .aurora .block.no-hairlines-aurora:after,
  3834. .aurora .block.no-hairlines-aurora ul:after {
  3835. display: none !important;
  3836. }
  3837. .block.no-hairline-top:before,
  3838. .block.no-hairline-top ul:before,
  3839. .md .block.no-hairline-top-md:before,
  3840. .md .block.no-hairline-top-md ul:before,
  3841. .ios .block.no-hairline-top-ios:before,
  3842. .ios .block.no-hairline-top-ios ul:before,
  3843. .aurora .block.no-hairline-top-aurora:before,
  3844. .aurora .block.no-hairline-top-aurora ul:before {
  3845. display: none !important;
  3846. }
  3847. .block.no-hairline-bottom:after,
  3848. .block.no-hairline-bottom ul:after,
  3849. .md .block.no-hairline-bottom-md:after,
  3850. .md .block.no-hairline-bottom-md ul:after,
  3851. .ios .block.no-hairline-bottom-ios:after,
  3852. .ios .block.no-hairline-bottom-ios ul:after,
  3853. .aurora .block.no-hairline-bottom-aurora:after,
  3854. .aurora .block.no-hairline-bottom-aurora ul:after {
  3855. display: none !important;
  3856. }
  3857. .block > h1:first-child,
  3858. .block > h2:first-child,
  3859. .block > h3:first-child,
  3860. .block > h4:first-child,
  3861. .block > p:first-child {
  3862. margin-top: 0;
  3863. }
  3864. .block > h1:last-child,
  3865. .block > h2:last-child,
  3866. .block > h3:last-child,
  3867. .block > h4:last-child,
  3868. .block > p:last-child {
  3869. margin-bottom: 0;
  3870. }
  3871. .block-strong {
  3872. color: var(--f7-block-strong-text-color);
  3873. padding-top: var(--f7-block-padding-vertical);
  3874. padding-bottom: var(--f7-block-padding-vertical);
  3875. background-color: var(--f7-block-strong-bg-color);
  3876. }
  3877. .block-strong:before {
  3878. content: '';
  3879. position: absolute;
  3880. background-color: var(--f7-block-strong-border-color);
  3881. display: block;
  3882. z-index: 15;
  3883. top: 0;
  3884. right: auto;
  3885. bottom: auto;
  3886. left: 0;
  3887. height: 1px;
  3888. width: 100%;
  3889. transform-origin: 50% 0%;
  3890. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  3891. }
  3892. .block-strong:after {
  3893. content: '';
  3894. position: absolute;
  3895. background-color: var(--f7-block-strong-border-color);
  3896. display: block;
  3897. z-index: 15;
  3898. top: auto;
  3899. right: auto;
  3900. bottom: 0;
  3901. left: 0;
  3902. height: 1px;
  3903. width: 100%;
  3904. transform-origin: 50% 100%;
  3905. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  3906. }
  3907. .block-title {
  3908. position: relative;
  3909. overflow: hidden;
  3910. margin: 0;
  3911. white-space: var(--f7-block-title-white-space);
  3912. text-overflow: ellipsis;
  3913. text-transform: var(--f7-block-title-text-transform);
  3914. color: var(--f7-block-title-text-color);
  3915. font-size: var(--f7-block-title-font-size, inherit);
  3916. font-weight: var(--f7-block-title-font-weight);
  3917. line-height: var(--f7-block-title-line-height);
  3918. margin-top: var(--f7-block-margin-vertical);
  3919. margin-bottom: var(--f7-block-title-margin-bottom);
  3920. margin-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
  3921. margin-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
  3922. }
  3923. .block-title + .list,
  3924. .block-title + .block,
  3925. .block-title + .card,
  3926. .block-title + .timeline,
  3927. .block-title + .block-header {
  3928. margin-top: 0px;
  3929. }
  3930. .block-title-medium {
  3931. font-size: var(--f7-block-title-medium-font-size);
  3932. text-transform: var(--f7-block-title-medium-text-transform);
  3933. color: var(--f7-block-title-medium-text-color);
  3934. font-weight: var(--f7-block-title-medium-font-weight);
  3935. line-height: var(--f7-block-title-medium-line-height);
  3936. }
  3937. .block-title-large {
  3938. font-size: var(--f7-block-title-large-font-size);
  3939. text-transform: var(--f7-block-title-large-text-transform);
  3940. color: var(--f7-block-title-large-text-color);
  3941. font-weight: var(--f7-block-title-large-font-weight);
  3942. line-height: var(--f7-block-title-large-line-height);
  3943. }
  3944. .block > .block-title:first-child,
  3945. .list > .block-title:first-child {
  3946. margin-top: 0;
  3947. margin-left: 0;
  3948. margin-right: 0;
  3949. }
  3950. .block-header {
  3951. color: var(--f7-block-header-text-color);
  3952. font-size: var(--f7-block-header-font-size);
  3953. margin-bottom: var(--f7-block-header-margin);
  3954. margin-top: var(--f7-block-margin-vertical);
  3955. }
  3956. .block-header + .list,
  3957. .block-header + .block,
  3958. .block-header + .card,
  3959. .block-header + .timeline {
  3960. margin-top: var(--f7-block-header-margin);
  3961. }
  3962. .block-footer {
  3963. color: var(--f7-block-footer-text-color);
  3964. font-size: var(--f7-block-footer-font-size);
  3965. margin-top: var(--f7-block-footer-margin);
  3966. margin-bottom: var(--f7-block-margin-vertical);
  3967. }
  3968. .block-footer,
  3969. .block-header {
  3970. padding-top: 0;
  3971. padding-bottom: 0;
  3972. padding-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
  3973. padding-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
  3974. }
  3975. .block-footer ul:first-child,
  3976. .block-header ul:first-child,
  3977. .block-footer p:first-child,
  3978. .block-header p:first-child,
  3979. .block-footer h1:first-child,
  3980. .block-header h1:first-child,
  3981. .block-footer h2:first-child,
  3982. .block-header h2:first-child,
  3983. .block-footer h3:first-child,
  3984. .block-header h3:first-child,
  3985. .block-footer h4:first-child,
  3986. .block-header h4:first-child {
  3987. margin-top: 0;
  3988. }
  3989. .block-footer ul:last-child,
  3990. .block-header ul:last-child,
  3991. .block-footer p:last-child,
  3992. .block-header p:last-child,
  3993. .block-footer h1:last-child,
  3994. .block-header h1:last-child,
  3995. .block-footer h2:last-child,
  3996. .block-header h2:last-child,
  3997. .block-footer h3:last-child,
  3998. .block-header h3:last-child,
  3999. .block-footer h4:last-child,
  4000. .block-header h4:last-child {
  4001. margin-bottom: 0;
  4002. }
  4003. .block-footer ul:first-child:last-child,
  4004. .block-header ul:first-child:last-child,
  4005. .block-footer p:first-child:last-child,
  4006. .block-header p:first-child:last-child,
  4007. .block-footer h1:first-child:last-child,
  4008. .block-header h1:first-child:last-child,
  4009. .block-footer h2:first-child:last-child,
  4010. .block-header h2:first-child:last-child,
  4011. .block-footer h3:first-child:last-child,
  4012. .block-header h3:first-child:last-child,
  4013. .block-footer h4:first-child:last-child,
  4014. .block-header h4:first-child:last-child {
  4015. margin-top: 0;
  4016. margin-bottom: 0;
  4017. }
  4018. .list .block-header,
  4019. .block .block-header,
  4020. .card .block-header,
  4021. .timeline .block-header {
  4022. margin-top: 0;
  4023. }
  4024. .list .block-footer,
  4025. .block .block-footer,
  4026. .card .block-footer,
  4027. .timeline .block-footer {
  4028. margin-bottom: 0;
  4029. }
  4030. .list + .block-footer,
  4031. .block + .block-footer,
  4032. .card + .block-footer,
  4033. .timeline + .block-footer {
  4034. margin-top: calc(-1 * (var(--f7-block-margin-vertical) - var(--f7-block-footer-margin)));
  4035. }
  4036. .block + .block-footer {
  4037. margin-top: calc(-1 * (var(--f7-block-margin-vertical) - var(--f7-block-footer-margin)));
  4038. margin-bottom: var(--f7-block-margin-vertical);
  4039. }
  4040. .block .block-header,
  4041. .block .block-footer {
  4042. padding: 0;
  4043. }
  4044. .block.inset {
  4045. border-radius: var(--f7-block-inset-border-radius);
  4046. margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
  4047. margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
  4048. --f7-safe-area-left: 0px;
  4049. --f7-safe-area-right: 0px;
  4050. }
  4051. .block-strong.inset:before,
  4052. .block-strong.inset:after {
  4053. display: none !important;
  4054. }
  4055. @media (min-width: 480px) {
  4056. .block.xsmall-inset {
  4057. border-radius: var(--f7-block-inset-border-radius);
  4058. margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
  4059. margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
  4060. --f7-safe-area-left: 0px;
  4061. --f7-safe-area-right: 0px;
  4062. }
  4063. .block-strong.xsmall-inset:before,
  4064. .block-strong.xsmall-inset:after {
  4065. display: none !important;
  4066. }
  4067. }
  4068. @media (min-width: 568px) {
  4069. .block.small-inset {
  4070. border-radius: var(--f7-block-inset-border-radius);
  4071. margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
  4072. margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
  4073. --f7-safe-area-left: 0px;
  4074. --f7-safe-area-right: 0px;
  4075. }
  4076. .block-strong.small-inset:before,
  4077. .block-strong.small-inset:after {
  4078. display: none !important;
  4079. }
  4080. }
  4081. @media (min-width: 768px) {
  4082. .block.medium-inset {
  4083. border-radius: var(--f7-block-inset-border-radius);
  4084. margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
  4085. margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
  4086. --f7-safe-area-left: 0px;
  4087. --f7-safe-area-right: 0px;
  4088. }
  4089. .block-strong.medium-inset:before,
  4090. .block-strong.medium-inset:after {
  4091. display: none !important;
  4092. }
  4093. }
  4094. @media (min-width: 1024px) {
  4095. .block.large-inset {
  4096. border-radius: var(--f7-block-inset-border-radius);
  4097. margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
  4098. margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
  4099. --f7-safe-area-left: 0px;
  4100. --f7-safe-area-right: 0px;
  4101. }
  4102. .block-strong.large-inset:before,
  4103. .block-strong.large-inset:after {
  4104. display: none !important;
  4105. }
  4106. }
  4107. @media (min-width: 1200px) {
  4108. .block.xlarge-inset {
  4109. border-radius: var(--f7-block-inset-border-radius);
  4110. margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
  4111. margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
  4112. --f7-safe-area-left: 0px;
  4113. --f7-safe-area-right: 0px;
  4114. }
  4115. .block-strong.xlarge-inset:before,
  4116. .block-strong.xlarge-inset:after {
  4117. display: none !important;
  4118. }
  4119. }
  4120. /* === List View === */
  4121. :root {
  4122. --f7-list-inset-side-margin: 16px;
  4123. --f7-list-item-cell-margin: 16px;
  4124. --f7-list-item-padding-horizontal: 16px;
  4125. --f7-list-media-item-padding-horizontal: 16px;
  4126. --f7-list-item-text-max-lines: 2;
  4127. --f7-list-chevron-icon-font-size: 20px;
  4128. --f7-list-item-title-font-size: inherit;
  4129. --f7-list-item-title-font-weight: 400;
  4130. --f7-list-item-title-text-color: inherit;
  4131. --f7-list-item-title-line-height: inherit;
  4132. --f7-list-item-title-white-space: nowrap;
  4133. --f7-list-item-subtitle-font-weight: 400;
  4134. --f7-list-item-subtitle-text-color: inherit;
  4135. --f7-list-item-subtitle-line-height: inherit;
  4136. --f7-list-item-text-font-weight: 400;
  4137. --f7-list-item-after-font-weight: 400;
  4138. --f7-list-item-header-text-color: inherit;
  4139. --f7-list-item-header-font-size: 12px;
  4140. --f7-list-item-header-font-weight: 400;
  4141. --f7-list-item-header-line-height: 1.2;
  4142. --f7-list-item-footer-font-size: 12px;
  4143. --f7-list-item-footer-font-weight: 400;
  4144. --f7-list-item-footer-line-height: 1.2;
  4145. --f7-list-button-font-size: inherit;
  4146. --f7-list-button-font-weight: 400;
  4147. --f7-list-item-divider-line-height: inherit;
  4148. --f7-list-group-title-line-height: inherit;
  4149. --f7-list-bg-color: #fff;
  4150. --f7-list-chevron-icon-color: rgba(0, 0, 0, 0.2);
  4151. }
  4152. :root .theme-dark,
  4153. :root.theme-dark {
  4154. --f7-list-button-border-color: rgba(255, 255, 255, 0.15);
  4155. --f7-list-bg-color: #1c1c1d;
  4156. --f7-list-border-color: rgba(255, 255, 255, 0.15);
  4157. --f7-list-item-border-color: rgba(255, 255, 255, 0.15);
  4158. --f7-list-item-divider-border-color: rgba(255, 255, 255, 0.15);
  4159. --f7-list-item-divider-bg-color: #232323;
  4160. --f7-list-group-title-bg-color: #232323;
  4161. --f7-list-chevron-icon-color: rgba(255, 255, 255, 0.3);
  4162. }
  4163. .ios {
  4164. --f7-list-in-list-padding-left: 30px;
  4165. --f7-list-inset-border-radius: 8px;
  4166. --f7-list-margin-vertical: 35px;
  4167. --f7-list-font-size: 17px;
  4168. --f7-list-chevron-icon-area: 20px;
  4169. --f7-list-border-color: rgba(0, 0, 0, 0.22);
  4170. --f7-list-item-border-color: rgba(0, 0, 0, 0.22);
  4171. --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.15);
  4172. --f7-list-item-subtitle-font-size: 15px;
  4173. --f7-list-item-text-font-size: 15px;
  4174. --f7-list-item-text-line-height: 21px;
  4175. --f7-list-item-after-font-size: inherit;
  4176. --f7-list-item-after-line-height: inherit;
  4177. --f7-list-item-after-padding: 5px;
  4178. --f7-list-item-min-height: 44px;
  4179. --f7-list-item-media-margin: 16px;
  4180. --f7-list-item-media-icons-margin: 5px;
  4181. --f7-list-item-padding-vertical: 8px;
  4182. --f7-list-media-item-padding-vertical: 10px;
  4183. --f7-list-media-item-title-font-weight: 600;
  4184. /*
  4185. --f7-list-button-text-color: var(--f7-theme-color);
  4186. */
  4187. --f7-list-button-text-align: center;
  4188. --f7-list-button-border-color: rgba(0, 0, 0, 0.22);
  4189. --f7-list-item-divider-height: 31px;
  4190. --f7-list-item-divider-font-size: inherit;
  4191. --f7-list-item-divider-font-weight: 400;
  4192. --f7-list-item-divider-bg-color: rgba(0, 0, 0, 0.03);
  4193. --f7-list-item-divider-border-color: rgba(0, 0, 0, 0.22);
  4194. --f7-list-group-title-height: 31px;
  4195. --f7-list-group-title-font-size: inherit;
  4196. --f7-list-group-title-font-weight: 400;
  4197. --f7-list-group-title-bg-color: #f7f7f7;
  4198. --f7-list-item-after-text-color: rgba(0, 0, 0, 0.45);
  4199. --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.45);
  4200. --f7-list-item-text-text-color: rgba(0, 0, 0, 0.45);
  4201. --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.45);
  4202. --f7-list-group-title-text-color: rgba(0, 0, 0, 0.45);
  4203. --f7-list-button-pressed-bg-color: rgba(0, 0, 0, 0.15);
  4204. }
  4205. .ios .theme-dark,
  4206. .ios.theme-dark {
  4207. --f7-list-item-after-text-color: rgba(255, 255, 255, 0.55);
  4208. --f7-list-item-header-text-color: rgba(255, 255, 255, 0.55);
  4209. --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.55);
  4210. --f7-list-item-text-text-color: rgba(255, 255, 255, 0.55);
  4211. --f7-list-item-divider-text-color: rgba(255, 255, 255, 0.55);
  4212. --f7-list-group-title-text-color: rgba(255, 255, 255, 0.55);
  4213. --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.08);
  4214. --f7-list-button-pressed-bg-color: rgba(255, 255, 255, 0.08);
  4215. }
  4216. .md {
  4217. --f7-list-in-list-padding-left: 40px;
  4218. --f7-list-inset-border-radius: 4px;
  4219. --f7-list-margin-vertical: 32px;
  4220. --f7-list-font-size: 16px;
  4221. --f7-list-chevron-icon-area: 26px;
  4222. --f7-list-border-color: rgba(0, 0, 0, 0.12);
  4223. --f7-list-item-border-color: rgba(0, 0, 0, 0.12);
  4224. --f7-list-item-subtitle-font-size: 14px;
  4225. --f7-list-item-text-font-size: 14px;
  4226. --f7-list-item-text-line-height: 20px;
  4227. --f7-list-item-after-font-size: 14px;
  4228. --f7-list-item-after-line-height: inherit;
  4229. --f7-list-item-after-padding: 8px;
  4230. --f7-list-item-min-height: 48px;
  4231. --f7-list-item-media-margin: 16px;
  4232. --f7-list-item-media-icons-margin: 8px;
  4233. --f7-list-item-padding-vertical: 8px;
  4234. --f7-list-media-item-padding-vertical: 14px;
  4235. /*
  4236. --f7-list-media-item-title-font-weight: var(--f7-list-item-title-font-weight);
  4237. */
  4238. --f7-list-button-text-align: left;
  4239. --f7-list-button-border-color: transparent;
  4240. --f7-list-item-divider-height: 48px;
  4241. --f7-list-item-divider-font-size: 14px;
  4242. --f7-list-item-divider-font-weight: 400;
  4243. --f7-list-item-divider-bg-color: #f4f4f4;
  4244. --f7-list-item-divider-border-color: transparent;
  4245. --f7-list-group-title-height: 48px;
  4246. --f7-list-group-title-font-size: 14px;
  4247. --f7-list-group-title-font-weight: 400;
  4248. --f7-list-group-title-bg-color: #f4f4f4;
  4249. --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.1);
  4250. --f7-list-item-text-text-color: rgba(0, 0, 0, 0.54);
  4251. --f7-list-item-after-text-color: rgba(0, 0, 0, 0.54);
  4252. --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.5);
  4253. --f7-list-button-text-color: #212121;
  4254. --f7-list-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
  4255. --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.54);
  4256. --f7-list-group-title-text-color: rgba(0, 0, 0, 0.54);
  4257. }
  4258. .md .theme-dark,
  4259. .md.theme-dark {
  4260. --f7-list-button-text-color: #fff;
  4261. --f7-list-item-divider-text-color: #fff;
  4262. --f7-list-group-title-text-color: #fff;
  4263. --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.05);
  4264. --f7-list-button-pressed-bg-color: rgba(255, 255, 255, 0.05);
  4265. --f7-list-item-text-text-color: rgba(255, 255, 255, 0.54);
  4266. --f7-list-item-after-text-color: rgba(255, 255, 255, 0.54);
  4267. --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.54);
  4268. }
  4269. .aurora {
  4270. --f7-list-in-list-padding-left: 16px;
  4271. --f7-list-inset-border-radius: 4px;
  4272. --f7-list-margin-vertical: 15px;
  4273. --f7-list-font-size: 14px;
  4274. --f7-list-chevron-icon-area: 15px;
  4275. --f7-list-chevron-icon-font-size: 16px;
  4276. --f7-list-border-color: rgba(0, 0, 0, 0.12);
  4277. --f7-list-item-border-color: rgba(0, 0, 0, 0.12);
  4278. --f7-list-item-title-line-height: 1.3;
  4279. --f7-list-item-subtitle-font-size: 14px;
  4280. --f7-list-item-subtitle-line-height: 1.3;
  4281. --f7-list-item-text-font-size: 12px;
  4282. --f7-list-item-text-line-height: 16px;
  4283. --f7-list-item-after-font-size: 13px;
  4284. --f7-list-item-after-line-height: 1.2;
  4285. --f7-list-item-after-padding: 5px;
  4286. --f7-list-item-min-height: 32px;
  4287. --f7-list-item-media-margin: 10px;
  4288. --f7-list-item-media-icons-margin: 5px;
  4289. --f7-list-item-padding-vertical: 5px;
  4290. --f7-list-media-item-padding-vertical: 5px;
  4291. --f7-list-media-item-title-font-weight: 600;
  4292. /*
  4293. --f7-list-button-text-color: var(--f7-theme-color);
  4294. */
  4295. --f7-list-button-text-align: center;
  4296. --f7-list-button-border-color: rgba(0, 0, 0, 0.12);
  4297. --f7-list-item-divider-height: 19px;
  4298. --f7-list-item-divider-font-size: inherit;
  4299. --f7-list-item-divider-font-weight: 500;
  4300. --f7-list-item-divider-bg-color: rgba(0, 0, 0, 0.03);
  4301. --f7-list-item-divider-border-color: transparent;
  4302. --f7-list-group-title-height: 19px;
  4303. --f7-list-group-title-font-size: inherit;
  4304. --f7-list-group-title-font-weight: 500;
  4305. --f7-list-group-title-bg-color: #f7f7f7;
  4306. --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.1);
  4307. --f7-list-link-hover-bg-color: rgba(0, 0, 0, 0.03);
  4308. --f7-list-item-text-text-color: rgba(0, 0, 0, 0.6);
  4309. --f7-list-item-after-text-color: rgba(0, 0, 0, 0.5);
  4310. --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.6);
  4311. --f7-list-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
  4312. --f7-list-button-hover-bg-color: rgba(0, 0, 0, 0.03);
  4313. --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.6);
  4314. --f7-list-group-title-text-color: rgba(0, 0, 0, 0.6);
  4315. }
  4316. .aurora .theme-dark,
  4317. .aurora.theme-dark {
  4318. --f7-list-item-text-text-color: rgba(255, 255, 255, 0.54);
  4319. --f7-list-item-after-text-color: rgba(255, 255, 255, 0.54);
  4320. --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.54);
  4321. --f7-list-item-divider-text-color: rgba(255, 255, 255, 0.6);
  4322. --f7-list-group-title-text-color: rgba(255, 255, 255, 0.6);
  4323. --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.05);
  4324. --f7-list-link-hover-bg-color: rgba(255, 255, 255, 0.03);
  4325. --f7-list-button-pressed-bg-color: rgba(255, 255, 255, 0.05);
  4326. --f7-list-button-hover-bg-color: rgba(255, 255, 255, 0.03);
  4327. }
  4328. :root {
  4329. --f7-list-chevron-icon-left: 'chevron_left';
  4330. --f7-list-chevron-icon-right: 'chevron_right';
  4331. }
  4332. .aurora {
  4333. --f7-list-chevron-icon-left: 'chevron_left_aurora';
  4334. --f7-list-chevron-icon-right: 'chevron_right_aurora';
  4335. }
  4336. .list {
  4337. position: relative;
  4338. z-index: 1;
  4339. font-size: var(--f7-list-font-size);
  4340. margin: var(--f7-list-margin-vertical) 0;
  4341. }
  4342. .list ul {
  4343. list-style: none;
  4344. margin: 0;
  4345. padding: 0;
  4346. position: relative;
  4347. background: var(--f7-list-bg-color);
  4348. }
  4349. .list ul:before {
  4350. content: '';
  4351. position: absolute;
  4352. background-color: var(--f7-list-border-color);
  4353. display: block;
  4354. z-index: 15;
  4355. top: 0;
  4356. right: auto;
  4357. bottom: auto;
  4358. left: 0;
  4359. height: 1px;
  4360. width: 100%;
  4361. transform-origin: 50% 0%;
  4362. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  4363. }
  4364. .list ul:after {
  4365. content: '';
  4366. position: absolute;
  4367. background-color: var(--f7-list-border-color);
  4368. display: block;
  4369. z-index: 15;
  4370. top: auto;
  4371. right: auto;
  4372. bottom: 0;
  4373. left: 0;
  4374. height: 1px;
  4375. width: 100%;
  4376. transform-origin: 50% 100%;
  4377. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  4378. }
  4379. .list ul ul {
  4380. padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-list-in-list-padding-left));
  4381. }
  4382. .list ul ul:before,
  4383. .list ul ul:after {
  4384. display: none !important;
  4385. }
  4386. .list li {
  4387. position: relative;
  4388. box-sizing: border-box;
  4389. }
  4390. .list .item-media {
  4391. display: flex;
  4392. flex-shrink: 0;
  4393. flex-wrap: nowrap;
  4394. align-items: center;
  4395. box-sizing: border-box;
  4396. padding-bottom: var(--f7-list-item-padding-vertical);
  4397. padding-top: var(--f7-list-item-padding-vertical);
  4398. }
  4399. .list .item-media + .item-inner {
  4400. margin-right: var(--f7-list-item-media-margin);
  4401. }
  4402. .list .item-media i + i,
  4403. .list .item-media i + img {
  4404. margin-right: var(--f7-list-item-media-icons-margin);
  4405. }
  4406. .list .item-after {
  4407. padding-right: var(--f7-list-item-after-padding);
  4408. }
  4409. .list .item-inner {
  4410. position: relative;
  4411. width: 100%;
  4412. min-width: 0;
  4413. display: flex;
  4414. justify-content: space-between;
  4415. box-sizing: border-box;
  4416. align-items: center;
  4417. align-self: stretch;
  4418. padding-top: var(--f7-list-item-padding-vertical);
  4419. padding-bottom: var(--f7-list-item-padding-vertical);
  4420. min-height: var(--f7-list-item-min-height);
  4421. padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
  4422. }
  4423. .list .item-title {
  4424. min-width: 0;
  4425. flex-shrink: 1;
  4426. white-space: var(--f7-list-item-title-white-space);
  4427. position: relative;
  4428. overflow: hidden;
  4429. text-overflow: ellipsis;
  4430. max-width: 100%;
  4431. font-size: var(--f7-list-item-title-font-size);
  4432. font-weight: var(--f7-list-item-title-font-weight);
  4433. color: var(--f7-list-item-title-text-color);
  4434. line-height: var(--f7-list-item-title-line-height);
  4435. }
  4436. .list .item-after {
  4437. white-space: nowrap;
  4438. flex-shrink: 0;
  4439. display: flex;
  4440. font-size: var(--f7-list-item-after-font-size);
  4441. font-weight: var(--f7-list-item-after-font-weight);
  4442. color: var(--f7-list-item-after-text-color);
  4443. line-height: var(--f7-list-item-after-line-height);
  4444. margin-right: auto;
  4445. }
  4446. .list .item-header,
  4447. .list .item-footer {
  4448. white-space: normal;
  4449. }
  4450. .list .item-header {
  4451. color: var(--f7-list-item-header-text-color);
  4452. font-size: var(--f7-list-item-header-font-size);
  4453. font-weight: var(--f7-list-item-header-font-weight);
  4454. line-height: var(--f7-list-item-header-line-height);
  4455. }
  4456. .list .item-footer {
  4457. color: var(--f7-list-item-footer-text-color);
  4458. font-size: var(--f7-list-item-footer-font-size);
  4459. font-weight: var(--f7-list-item-footer-font-weight);
  4460. line-height: var(--f7-list-item-footer-line-height);
  4461. }
  4462. .list .item-link,
  4463. .list .list-button {
  4464. transition-duration: 300ms;
  4465. transition-property: background-color;
  4466. display: block;
  4467. position: relative;
  4468. overflow: hidden;
  4469. z-index: 0;
  4470. }
  4471. .list .item-link {
  4472. color: inherit;
  4473. }
  4474. .list .item-link.active-state {
  4475. background-color: var(--f7-list-link-pressed-bg-color);
  4476. }
  4477. .list .item-link .item-inner {
  4478. padding-left: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
  4479. }
  4480. .list .item-content {
  4481. display: flex;
  4482. justify-content: space-between;
  4483. box-sizing: border-box;
  4484. align-items: center;
  4485. min-height: var(--f7-list-item-min-height);
  4486. padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
  4487. }
  4488. .list .item-subtitle {
  4489. position: relative;
  4490. overflow: hidden;
  4491. white-space: nowrap;
  4492. max-width: 100%;
  4493. text-overflow: ellipsis;
  4494. font-size: var(--f7-list-item-subtitle-font-size);
  4495. font-weight: var(--f7-list-item-subtitle-font-weight);
  4496. color: var(--f7-list-item-subtitle-text-color);
  4497. line-height: var(--f7-list-item-subtitle-line-height);
  4498. }
  4499. .list .item-text {
  4500. position: relative;
  4501. overflow: hidden;
  4502. text-overflow: ellipsis;
  4503. /* autoprefixer: ignore next */
  4504. -webkit-line-clamp: var(--f7-list-item-text-max-lines);
  4505. /* autoprefixer: ignore next */
  4506. -webkit-box-orient: vertical;
  4507. display: -webkit-box;
  4508. font-size: var(--f7-list-item-text-font-size);
  4509. font-weight: var(--f7-list-item-text-font-weight);
  4510. color: var(--f7-list-item-text-text-color);
  4511. line-height: var(--f7-list-item-text-line-height);
  4512. max-height: calc(var(--f7-list-item-text-line-height) * var(--f7-list-item-text-max-lines));
  4513. }
  4514. .list .item-title-row {
  4515. position: relative;
  4516. display: flex;
  4517. justify-content: space-between;
  4518. box-sizing: border-box;
  4519. }
  4520. .list .item-title-row .item-after {
  4521. align-self: center;
  4522. }
  4523. .list .item-row {
  4524. display: flex;
  4525. justify-content: space-between;
  4526. box-sizing: border-box;
  4527. }
  4528. .list .item-cell {
  4529. display: block;
  4530. align-self: center;
  4531. box-sizing: border-box;
  4532. width: 100%;
  4533. min-width: 0;
  4534. margin-right: var(--f7-list-item-cell-margin);
  4535. flex-shrink: 1;
  4536. }
  4537. .list .item-cell:first-child {
  4538. margin-right: 0;
  4539. }
  4540. .list li:last-child .list-button:after {
  4541. display: none !important;
  4542. }
  4543. .list li:last-child > .item-inner:after,
  4544. .list li:last-child li:last-child > .item-inner:after,
  4545. .list li:last-child > .item-content > .item-inner:after,
  4546. .list li:last-child li:last-child > .item-content > .item-inner:after,
  4547. .list li:last-child > .swipeout-content > .item-content > .item-inner:after,
  4548. .list li:last-child li:last-child > .swipeout-content > .item-content > .item-inner:after,
  4549. .list li:last-child > .item-link > .item-content > .item-inner:after,
  4550. .list li:last-child li:last-child > .item-link > .item-content > .item-inner:after {
  4551. display: none !important;
  4552. }
  4553. .list li li:last-child .item-inner:after,
  4554. .list li:last-child li .item-inner:after {
  4555. content: '';
  4556. position: absolute;
  4557. background-color: var(--f7-list-item-border-color);
  4558. display: block;
  4559. z-index: 15;
  4560. top: auto;
  4561. right: auto;
  4562. bottom: 0;
  4563. left: 0;
  4564. height: 1px;
  4565. width: 100%;
  4566. transform-origin: 50% 100%;
  4567. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  4568. }
  4569. .list.no-hairlines:before,
  4570. .list.no-hairlines ul:before,
  4571. .md .list.no-hairlines-md:before,
  4572. .md .list.no-hairlines-md ul:before,
  4573. .ios .list.no-hairlines-ios:before,
  4574. .ios .list.no-hairlines-ios ul:before,
  4575. .aurora .list.no-hairlines-aurora:before,
  4576. .aurora .list.no-hairlines-aurora ul:before,
  4577. .list.no-hairlines:after,
  4578. .list.no-hairlines ul:after,
  4579. .md .list.no-hairlines-md:after,
  4580. .md .list.no-hairlines-md ul:after,
  4581. .ios .list.no-hairlines-ios:after,
  4582. .ios .list.no-hairlines-ios ul:after,
  4583. .aurora .list.no-hairlines-aurora:after,
  4584. .aurora .list.no-hairlines-aurora ul:after {
  4585. display: none !important;
  4586. }
  4587. .list.no-hairline-top:before,
  4588. .list.no-hairline-top ul:before,
  4589. .md .list.no-hairline-top-md:before,
  4590. .md .list.no-hairline-top-md ul:before,
  4591. .ios .list.no-hairline-top-ios:before,
  4592. .ios .list.no-hairline-top-ios ul:before,
  4593. .aurora .list.no-hairline-top-aurora:before,
  4594. .aurora .list.no-hairline-top-aurora ul:before {
  4595. display: none !important;
  4596. }
  4597. .list.no-hairline-bottom:after,
  4598. .list.no-hairline-bottom ul:after,
  4599. .md .list.no-hairline-bottom-md:after,
  4600. .md .list.no-hairline-bottom-md ul:after,
  4601. .ios .list.no-hairline-bottom-ios:after,
  4602. .ios .list.no-hairline-bottom-ios ul:after,
  4603. .aurora .list.no-hairline-bottom-aurora:after,
  4604. .aurora .list.no-hairline-bottom-aurora ul:after {
  4605. display: none !important;
  4606. }
  4607. .list.no-hairlines-between .item-inner:after,
  4608. .md .list.no-hairlines-between-md .item-inner:after,
  4609. .ios .list.no-hairlines-between-ios .item-inner:after,
  4610. .aurora .list.no-hairlines-between-aurora .item-inner:after,
  4611. .list.no-hairlines-between .list-button:after,
  4612. .md .list.no-hairlines-between-md .list-button:after,
  4613. .ios .list.no-hairlines-between-ios .list-button:after,
  4614. .aurora .list.no-hairlines-between-aurora .list-button:after,
  4615. .list.no-hairlines-between .item-divider:after,
  4616. .md .list.no-hairlines-between-md .item-divider:after,
  4617. .ios .list.no-hairlines-between-ios .item-divider:after,
  4618. .aurora .list.no-hairlines-between-aurora .item-divider:after,
  4619. .list.no-hairlines-between .list-group-title:after,
  4620. .md .list.no-hairlines-between-md .list-group-title:after,
  4621. .ios .list.no-hairlines-between-ios .list-group-title:after,
  4622. .aurora .list.no-hairlines-between-aurora .list-group-title:after,
  4623. .list.no-hairlines-between .list-group-title:after,
  4624. .md .list.no-hairlines-between-md .list-group-title:after,
  4625. .ios .list.no-hairlines-between-ios .list-group-title:after,
  4626. .aurora .list.no-hairlines-between-aurora .list-group-title:after {
  4627. display: none !important;
  4628. }
  4629. .list.no-hairlines-between.simple-list li:after,
  4630. .md .list.no-hairlines-between-md.simple-list li:after,
  4631. .ios .list.no-hairlines-between-ios.simple-list li:after,
  4632. .aurora .list.no-hairlines-between-aurora.simple-list li:after {
  4633. display: none !important;
  4634. }
  4635. .list.no-hairlines-between.links-list a:after,
  4636. .md .list.no-hairlines-between-md.links-list a:after,
  4637. .ios .list.no-hairlines-between-ios.links-list a:after,
  4638. .aurora .list.no-hairlines-between-aurora.links-list a:after {
  4639. display: none !important;
  4640. }
  4641. .list-button {
  4642. padding: 0 var(--f7-list-item-padding-horizontal);
  4643. line-height: var(--f7-list-item-min-height);
  4644. color: var(--f7-list-button-text-color, var(--f7-theme-color));
  4645. font-size: var(--f7-list-button-font-size);
  4646. font-weight: var(--f7-list-button-font-weight);
  4647. text-align: var(--f7-list-button-text-align);
  4648. }
  4649. .list-button:after {
  4650. content: '';
  4651. position: absolute;
  4652. background-color: var(--f7-list-button-border-color);
  4653. display: block;
  4654. z-index: 15;
  4655. top: auto;
  4656. right: auto;
  4657. bottom: 0;
  4658. left: 0;
  4659. height: 1px;
  4660. width: 100%;
  4661. transform-origin: 50% 100%;
  4662. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  4663. }
  4664. .list-button.active-state {
  4665. background-color: var(--f7-list-button-pressed-bg-color);
  4666. }
  4667. .list-button[class*="color-"] {
  4668. --f7-list-button-text-color: var(--f7-theme-color);
  4669. }
  4670. .simple-list li {
  4671. position: relative;
  4672. white-space: nowrap;
  4673. text-overflow: ellipsis;
  4674. max-width: 100%;
  4675. box-sizing: border-box;
  4676. display: flex;
  4677. justify-content: space-between;
  4678. align-items: center;
  4679. align-content: center;
  4680. line-height: var(--f7-list-item-min-height);
  4681. height: var(--f7-list-item-min-height);
  4682. padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
  4683. padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
  4684. }
  4685. .simple-list li:after {
  4686. left: var(--f7-list-item-padding-horizontal);
  4687. right: 0;
  4688. width: auto;
  4689. right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
  4690. left: 0;
  4691. }
  4692. .simple-list li:last-child:after {
  4693. display: none !important;
  4694. }
  4695. .links-list li {
  4696. z-index: 1;
  4697. }
  4698. .links-list a {
  4699. transition-duration: 300ms;
  4700. transition-property: background-color;
  4701. display: block;
  4702. position: relative;
  4703. overflow: hidden;
  4704. display: flex;
  4705. align-items: center;
  4706. align-content: center;
  4707. justify-content: space-between;
  4708. box-sizing: border-box;
  4709. white-space: nowrap;
  4710. text-overflow: ellipsis;
  4711. max-width: 100%;
  4712. height: var(--f7-list-item-min-height);
  4713. color: inherit;
  4714. }
  4715. .links-list a .ripple-wave {
  4716. z-index: 0;
  4717. }
  4718. .links-list a:after {
  4719. width: auto;
  4720. }
  4721. .links-list a.active-state {
  4722. background-color: var(--f7-list-link-pressed-bg-color);
  4723. }
  4724. .links-list a {
  4725. padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
  4726. padding-left: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
  4727. }
  4728. .links-list a:after {
  4729. right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
  4730. left: 0;
  4731. }
  4732. .links-list li:last-child a:after {
  4733. display: none !important;
  4734. }
  4735. .simple-list li:after,
  4736. .links-list a:after,
  4737. .list .item-inner:after {
  4738. content: '';
  4739. position: absolute;
  4740. background-color: var(--f7-list-item-border-color);
  4741. display: block;
  4742. z-index: 15;
  4743. top: auto;
  4744. right: auto;
  4745. bottom: 0;
  4746. left: 0;
  4747. height: 1px;
  4748. width: 100%;
  4749. transform-origin: 50% 100%;
  4750. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  4751. }
  4752. .media-list,
  4753. li.media-item {
  4754. --f7-list-item-padding-vertical: var(--f7-list-media-item-padding-vertical);
  4755. --f7-list-item-padding-horizontal: var(--f7-list-media-item-padding-horizontal);
  4756. }
  4757. .media-list .item-title,
  4758. li.media-item .item-title {
  4759. font-weight: var(--f7-list-media-item-title-font-weight, var(--f7-list-item-title-font-weight, inherit));
  4760. }
  4761. .media-list .item-inner,
  4762. li.media-item .item-inner {
  4763. display: block;
  4764. align-self: stretch;
  4765. }
  4766. .media-list .item-media,
  4767. li.media-item .item-media {
  4768. align-self: flex-start;
  4769. }
  4770. .media-list .item-media img,
  4771. li.media-item .item-media img {
  4772. display: block;
  4773. }
  4774. .media-list .item-link .item-inner,
  4775. li.media-item .item-link .item-inner {
  4776. padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
  4777. }
  4778. .media-list .item-link .item-title-row,
  4779. li.media-item .item-link .item-title-row {
  4780. padding-left: calc(var(--f7-list-chevron-icon-area));
  4781. }
  4782. .media-list.chevron-center .item-link .item-inner,
  4783. .media-list .chevron-center .item-link .item-inner,
  4784. .media-list .item-link.chevron-center .item-inner,
  4785. li.media-item.chevron-center .item-link .item-inner,
  4786. li.media-item .item-link.chevron-center .item-inner,
  4787. li.media-item .chevron-center .item-link .item-inner {
  4788. padding-left: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
  4789. }
  4790. .media-list.chevron-center .item-title-row,
  4791. .media-list .chevron-center .item-title-row,
  4792. li.media-item.chevron-center .item-title-row,
  4793. li.media-item .chevron-center .item-title-row {
  4794. padding-left: 0;
  4795. }
  4796. .list .item-link .item-inner:before,
  4797. .links-list a:before,
  4798. .media-list .item-link .item-title-row:before,
  4799. li.media-item .item-link .item-title-row:before,
  4800. .media-list.chevron-center .item-link .item-inner:before,
  4801. .media-list .chevron-center .item-link .item-inner:before,
  4802. .media-list .item-link.chevron-center .item-inner:before,
  4803. li.media-item.chevron-center .item-link .item-inner:before,
  4804. li.media-item .chevron-center .item-link .item-inner:before,
  4805. li.media-item .item-link.chevron-center .item-inner:before {
  4806. font-family: 'framework7-core-icons';
  4807. font-weight: normal;
  4808. font-style: normal;
  4809. line-height: 1;
  4810. letter-spacing: normal;
  4811. text-transform: none;
  4812. white-space: nowrap;
  4813. word-wrap: normal;
  4814. direction: ltr;
  4815. -webkit-font-smoothing: antialiased;
  4816. text-rendering: optimizeLegibility;
  4817. -moz-osx-font-smoothing: grayscale;
  4818. font-feature-settings: "liga";
  4819. text-align: center;
  4820. display: block;
  4821. width: 100%;
  4822. height: 100%;
  4823. font-size: 20px;
  4824. position: absolute;
  4825. top: 50%;
  4826. width: 8px;
  4827. height: 14px;
  4828. margin-top: -7px;
  4829. font-size: var(--f7-list-chevron-icon-font-size);
  4830. line-height: 14px;
  4831. color: var(--f7-list-chevron-icon-color);
  4832. pointer-events: none;
  4833. left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
  4834. content: var(--f7-list-chevron-icon-left);
  4835. }
  4836. .media-list.chevron-center .item-title-row:before,
  4837. .media-list .chevron-center .item-title-row:before,
  4838. li.media-item.chevron-center .item-title-row:before,
  4839. li.media-item .chevron-center .item-title-row:before {
  4840. display: none;
  4841. }
  4842. .media-list .item-link .item-inner:before,
  4843. li.media-item .item-link .item-inner:before {
  4844. display: none;
  4845. }
  4846. .media-list .item-link .item-title-row:before,
  4847. li.media-item .item-link .item-title-row:before {
  4848. left: 0;
  4849. }
  4850. .list-group ul:after,
  4851. .list-group ul:before {
  4852. z-index: 25 !important;
  4853. }
  4854. .list-group + .list-group ul:before {
  4855. display: none !important;
  4856. }
  4857. li.item-divider,
  4858. .item-divider,
  4859. li.list-group-title {
  4860. white-space: nowrap;
  4861. position: relative;
  4862. max-width: 100%;
  4863. text-overflow: ellipsis;
  4864. overflow: hidden;
  4865. z-index: 15;
  4866. padding-top: 0;
  4867. padding-bottom: 0;
  4868. padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
  4869. padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
  4870. box-sizing: border-box;
  4871. display: flex;
  4872. align-items: center;
  4873. align-content: center;
  4874. }
  4875. li.item-divider:after,
  4876. .item-divider:after,
  4877. li.list-group-title:after {
  4878. display: none !important;
  4879. }
  4880. li.item-divider,
  4881. .item-divider {
  4882. margin-top: -1px;
  4883. height: var(--f7-list-item-divider-height);
  4884. color: var(--f7-list-item-divider-text-color);
  4885. font-size: var(--f7-list-item-divider-font-size);
  4886. font-weight: var(--f7-list-item-divider-font-weight);
  4887. background-color: var(--f7-list-item-divider-bg-color);
  4888. line-height: var(--f7-list-item-divider-line-height);
  4889. }
  4890. li.item-divider:before,
  4891. .item-divider:before {
  4892. content: '';
  4893. position: absolute;
  4894. background-color: var(--f7-list-item-divider-border-color);
  4895. display: block;
  4896. z-index: 15;
  4897. top: 0;
  4898. right: auto;
  4899. bottom: auto;
  4900. left: 0;
  4901. height: 1px;
  4902. width: 100%;
  4903. transform-origin: 50% 0%;
  4904. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  4905. }
  4906. li.list-group-title,
  4907. .list li.list-group-title {
  4908. position: relative;
  4909. position: -webkit-sticky;
  4910. position: sticky;
  4911. top: 0;
  4912. margin-top: 0;
  4913. z-index: 20;
  4914. height: var(--f7-list-group-title-height);
  4915. color: var(--f7-list-group-title-text-color);
  4916. font-size: var(--f7-list-group-title-font-size);
  4917. font-weight: var(--f7-list-group-title-font-weight);
  4918. background-color: var(--f7-list-group-title-bg-color);
  4919. line-height: var(--f7-list-group-title-line-height);
  4920. }
  4921. .page-with-navbar-large li.list-group-title,
  4922. .page-with-navbar-large .list li.list-group-title {
  4923. top: calc(-1 * var(--f7-navbar-large-title-height));
  4924. }
  4925. .list.inset {
  4926. margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
  4927. margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
  4928. border-radius: var(--f7-list-inset-border-radius);
  4929. --f7-safe-area-left: 0px;
  4930. --f7-safe-area-right: 0px;
  4931. }
  4932. .list.inset .block-title {
  4933. margin-left: 0;
  4934. margin-right: 0;
  4935. }
  4936. .list.inset ul {
  4937. border-radius: var(--f7-list-inset-border-radius);
  4938. }
  4939. .list.inset ul:before,
  4940. .list.inset ul:after {
  4941. display: none !important;
  4942. }
  4943. .list.inset li.swipeout:first-child,
  4944. .list.inset li:first-child > a {
  4945. border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
  4946. }
  4947. .list.inset li.swipeout:last-child,
  4948. .list.inset li:last-child > a {
  4949. border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
  4950. }
  4951. .list.inset li.swipeout:first-child:last-child,
  4952. .list.inset li:first-child:last-child > a {
  4953. border-radius: var(--f7-list-inset-border-radius);
  4954. }
  4955. @media (min-width: 480px) {
  4956. .list.xsmall-inset {
  4957. margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
  4958. margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
  4959. border-radius: var(--f7-list-inset-border-radius);
  4960. --f7-safe-area-left: 0px;
  4961. --f7-safe-area-right: 0px;
  4962. }
  4963. .list.xsmall-inset .block-title {
  4964. margin-left: 0;
  4965. margin-right: 0;
  4966. }
  4967. .list.xsmall-inset ul {
  4968. border-radius: var(--f7-list-inset-border-radius);
  4969. }
  4970. .list.xsmall-inset ul:before,
  4971. .list.xsmall-inset ul:after {
  4972. display: none !important;
  4973. }
  4974. .list.xsmall-inset li:first-child > a {
  4975. border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
  4976. }
  4977. .list.xsmall-inset li:last-child > a {
  4978. border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
  4979. }
  4980. .list.xsmall-inset li:first-child:last-child > a {
  4981. border-radius: var(--f7-list-inset-border-radius);
  4982. }
  4983. }
  4984. @media (min-width: 568px) {
  4985. .list.small-inset {
  4986. margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
  4987. margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
  4988. border-radius: var(--f7-list-inset-border-radius);
  4989. --f7-safe-area-left: 0px;
  4990. --f7-safe-area-right: 0px;
  4991. }
  4992. .list.small-inset .block-title {
  4993. margin-left: 0;
  4994. margin-right: 0;
  4995. }
  4996. .list.small-inset ul {
  4997. border-radius: var(--f7-list-inset-border-radius);
  4998. }
  4999. .list.small-inset ul:before,
  5000. .list.small-inset ul:after {
  5001. display: none !important;
  5002. }
  5003. .list.small-inset li:first-child > a {
  5004. border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
  5005. }
  5006. .list.small-inset li:last-child > a {
  5007. border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
  5008. }
  5009. .list.small-inset li:first-child:last-child > a {
  5010. border-radius: var(--f7-list-inset-border-radius);
  5011. }
  5012. }
  5013. @media (min-width: 768px) {
  5014. .list.medium-inset {
  5015. margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
  5016. margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
  5017. border-radius: var(--f7-list-inset-border-radius);
  5018. --f7-safe-area-left: 0px;
  5019. --f7-safe-area-right: 0px;
  5020. }
  5021. .list.medium-inset .block-title {
  5022. margin-left: 0;
  5023. margin-right: 0;
  5024. }
  5025. .list.medium-inset ul {
  5026. border-radius: var(--f7-list-inset-border-radius);
  5027. }
  5028. .list.medium-inset ul:before,
  5029. .list.medium-inset ul:after {
  5030. display: none !important;
  5031. }
  5032. .list.medium-inset li:first-child > a {
  5033. border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
  5034. }
  5035. .list.medium-inset li:last-child > a {
  5036. border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
  5037. }
  5038. .list.medium-inset li:first-child:last-child > a {
  5039. border-radius: var(--f7-list-inset-border-radius);
  5040. }
  5041. }
  5042. @media (min-width: 1024px) {
  5043. .list.large-inset {
  5044. margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
  5045. margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
  5046. border-radius: var(--f7-list-inset-border-radius);
  5047. --f7-safe-area-left: 0px;
  5048. --f7-safe-area-right: 0px;
  5049. }
  5050. .list.large-inset .block-title {
  5051. margin-left: 0;
  5052. margin-right: 0;
  5053. }
  5054. .list.large-inset ul {
  5055. border-radius: var(--f7-list-inset-border-radius);
  5056. }
  5057. .list.large-inset ul:before,
  5058. .list.large-inset ul:after {
  5059. display: none !important;
  5060. }
  5061. .list.large-inset li:first-child > a {
  5062. border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
  5063. }
  5064. .list.large-inset li:last-child > a {
  5065. border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
  5066. }
  5067. .list.large-inset li:first-child:last-child > a {
  5068. border-radius: var(--f7-list-inset-border-radius);
  5069. }
  5070. }
  5071. @media (min-width: 1200px) {
  5072. .list.xlarge-inset {
  5073. margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
  5074. margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
  5075. border-radius: var(--f7-list-inset-border-radius);
  5076. --f7-safe-area-left: 0px;
  5077. --f7-safe-area-right: 0px;
  5078. }
  5079. .list.xlarge-inset .block-title {
  5080. margin-left: 0;
  5081. margin-right: 0;
  5082. }
  5083. .list.xlarge-inset ul {
  5084. border-radius: var(--f7-list-inset-border-radius);
  5085. }
  5086. .list.xlarge-inset ul:before,
  5087. .list.xlarge-inset ul:after {
  5088. display: none !important;
  5089. }
  5090. .list.xlarge-inset li:first-child > a {
  5091. border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
  5092. }
  5093. .list.xlarge-inset li:last-child > a {
  5094. border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
  5095. }
  5096. .list.xlarge-inset li:first-child:last-child > a {
  5097. border-radius: var(--f7-list-inset-border-radius);
  5098. }
  5099. }
  5100. .list.no-chevron,
  5101. .list .no-chevron {
  5102. --f7-list-chevron-icon-color: transparent;
  5103. --f7-list-chevron-icon-area: 0px;
  5104. }
  5105. .ios .item-link.active-state .item-inner:after,
  5106. .ios .list-button.active-state:after,
  5107. .ios .links-list a.active-state:after {
  5108. background-color: transparent;
  5109. }
  5110. .ios .links-list a.active-state,
  5111. .ios .list .item-link.active-state,
  5112. .ios .list .list-button.active-state {
  5113. transition-duration: 0ms;
  5114. }
  5115. .md .list .item-media {
  5116. min-width: 40px;
  5117. }
  5118. .aurora .list .item-media {
  5119. min-width: 18px;
  5120. }
  5121. .aurora .links-list a,
  5122. .aurora .list .item-link,
  5123. .aurora .list .list-button {
  5124. transition-duration: 0ms;
  5125. }
  5126. .aurora.device-desktop .links-list a:hover:not(.active-state):not(.no-hover),
  5127. .aurora.device-desktop .list .item-link:hover:not(.active-state):not(.no-hover) {
  5128. background: var(--f7-list-link-hover-bg-color);
  5129. }
  5130. .aurora.device-desktop .list .list-button:hover:not(.active-state):not(.no-hover) {
  5131. background: var(--f7-list-button-hover-bg-color);
  5132. }
  5133. /* === Badge === */
  5134. :root {
  5135. --f7-badge-text-color: #fff;
  5136. --f7-badge-bg-color: #8e8e93;
  5137. --f7-badge-padding: 0 4px;
  5138. --f7-badge-in-icon-size: 16px;
  5139. --f7-badge-in-icon-font-size: 10px;
  5140. --f7-badge-font-weight: normal;
  5141. --f7-badge-font-size: 12px;
  5142. }
  5143. .ios {
  5144. --f7-badge-size: 20px;
  5145. }
  5146. .md {
  5147. --f7-badge-size: 18px;
  5148. }
  5149. .aurora {
  5150. --f7-badge-size: 18px;
  5151. --f7-badge-font-weight: 600;
  5152. --f7-badge-in-icon-size: 15px;
  5153. }
  5154. .badge {
  5155. display: inline-flex;
  5156. align-items: center;
  5157. align-content: center;
  5158. justify-content: center;
  5159. color: var(--f7-badge-text-color);
  5160. background: var(--f7-badge-bg-color);
  5161. position: relative;
  5162. box-sizing: border-box;
  5163. text-align: center;
  5164. vertical-align: middle;
  5165. font-weight: var(--f7-badge-font-weight);
  5166. font-size: var(--f7-badge-font-size);
  5167. border-radius: var(--f7-badge-size);
  5168. padding: var(--f7-badge-padding);
  5169. height: var(--f7-badge-size);
  5170. min-width: var(--f7-badge-size);
  5171. }
  5172. .icon .badge,
  5173. .f7-icons .badge,
  5174. .framework7-icons .badge,
  5175. .material-icons .badge {
  5176. position: absolute;
  5177. left: 100%;
  5178. margin-left: -10px;
  5179. top: -2px;
  5180. font-family: var(--f7-font-family);
  5181. --f7-badge-font-size: var(--f7-badge-in-icon-font-size);
  5182. --f7-badge-size: var(--f7-badge-in-icon-size);
  5183. }
  5184. .badge[class*="color-"] {
  5185. --f7-badge-bg-color: var(--f7-theme-color);
  5186. }
  5187. :root {
  5188. --f7-button-min-width: 32px;
  5189. --f7-button-bg-color: transparent;
  5190. --f7-button-border-width: 0px;
  5191. /*
  5192. --f7-button-text-color: var(--f7-theme-color);
  5193. --f7-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
  5194. --f7-button-border-color: var(--f7-theme-color);
  5195. --f7-button-fill-text-color: #fff;
  5196. --f7-button-fill-bg-color: var(--f7-theme-color);
  5197. --f7-button-outline-border-color: var(--f7-theme-color);
  5198. */
  5199. --f7-button-outline-border-width: 2px;
  5200. --f7-button-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0,0,0,0.24);
  5201. --f7-button-raised-pressed-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0,0,0,0.23);
  5202. --f7-segmented-raised-divider-color: rgba(0, 0, 0, 0.1);
  5203. --f7-segmented-strong-padding: 2px;
  5204. --f7-segmented-strong-between-buttons: 4px;
  5205. --f7-segmented-strong-button-font-weight: 500;
  5206. --f7-segmented-strong-button-active-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
  5207. --f7-segmented-strong-bg-color: rgba(0, 0, 0, 0.07);
  5208. --f7-segmented-strong-button-text-color: #000;
  5209. --f7-segmented-strong-button-pressed-bg-color: rgba(0, 0, 0, 0.07);
  5210. --f7-segmented-strong-button-hover-bg-color: rgba(0, 0, 0, 0.04);
  5211. --f7-segmented-strong-button-active-text-color: #000;
  5212. --f7-segmented-strong-button-active-bg-color: #fff;
  5213. }
  5214. :root .theme-dark,
  5215. :root.theme-dark {
  5216. --f7-segmented-strong-bg-color: rgba(255, 255, 255, 0.1);
  5217. --f7-segmented-strong-button-pressed-bg-color: rgba(255, 255, 255, 0.04);
  5218. --f7-segmented-strong-button-hover-bg-color: rgba(255, 255, 255, 0.02);
  5219. --f7-segmented-strong-button-active-bg-color: rgba(255, 255, 255, 0.14);
  5220. --f7-segmented-strong-button-text-color: #fff;
  5221. --f7-segmented-strong-button-active-text-color: #fff;
  5222. }
  5223. .ios {
  5224. --f7-button-font-size: 13px;
  5225. --f7-button-height: 28px;
  5226. --f7-button-padding-horizontal: 10px;
  5227. --f7-button-border-radius: 5px;
  5228. --f7-button-font-weight: 600;
  5229. --f7-button-letter-spacing: 0;
  5230. --f7-button-text-transform: uppercase;
  5231. /*
  5232. --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
  5233. --f7-button-fill-pressed-bg-color: var(--f7-theme-color-tint);
  5234. */
  5235. --f7-button-large-height: 44px;
  5236. --f7-button-large-font-size: 17px;
  5237. --f7-button-large-font-weight: 500;
  5238. --f7-button-large-text-transform: none;
  5239. --f7-button-small-height: 26px;
  5240. --f7-button-small-font-size: 13px;
  5241. --f7-button-small-font-weight: 600;
  5242. --f7-button-small-text-transform: uppercase;
  5243. --f7-button-small-outline-border-width: 2px;
  5244. --f7-segmented-strong-button-text-transform: none;
  5245. --f7-segmented-strong-button-active-font-weight: 600;
  5246. }
  5247. .md {
  5248. --f7-button-font-size: 14px;
  5249. --f7-button-height: 36px;
  5250. --f7-button-padding-horizontal: 8px;
  5251. --f7-button-border-radius: 4px;
  5252. --f7-button-font-weight: 500;
  5253. --f7-button-letter-spacing: 0.03em;
  5254. --f7-button-text-transform: uppercase;
  5255. /*
  5256. --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
  5257. */
  5258. --f7-button-large-height: 48px;
  5259. --f7-button-large-font-size: 14px;
  5260. --f7-button-large-font-weight: 500;
  5261. --f7-button-large-text-transform: uppercase;
  5262. --f7-button-small-height: 28px;
  5263. --f7-button-small-font-size: 12px;
  5264. --f7-button-small-font-weight: 500;
  5265. --f7-button-small-text-transform: uppercase;
  5266. --f7-button-small-outline-border-width: 2px;
  5267. --f7-segmented-strong-button-text-transform: uppercase;
  5268. --f7-segmented-strong-button-active-font-weight: 500;
  5269. --f7-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
  5270. }
  5271. .md .theme-dark,
  5272. .md.theme-dark {
  5273. --f7-button-pressed-bg-color: rgba(255, 255, 255, 0.1);
  5274. }
  5275. .aurora {
  5276. /*
  5277. --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07);
  5278. --f7-button-fill-hover-bg-color: var(--f7-theme-color-tint);
  5279. */
  5280. --f7-button-font-size: 14px;
  5281. --f7-button-height: 28px;
  5282. --f7-button-min-width: 24px;
  5283. --f7-button-padding-horizontal: 10px;
  5284. --f7-button-border-radius: 4px;
  5285. --f7-button-font-weight: 500;
  5286. --f7-button-letter-spacing: 0.02;
  5287. --f7-button-text-transform: none;
  5288. /*
  5289. --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
  5290. --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
  5291. */
  5292. --f7-button-large-height: 34px;
  5293. --f7-button-large-font-size: 14px;
  5294. --f7-button-large-font-weight: 600;
  5295. --f7-button-large-text-transform: none;
  5296. --f7-button-small-height: 24px;
  5297. --f7-button-small-font-size: 12px;
  5298. --f7-button-small-font-weight: 600;
  5299. --f7-button-small-text-transform: none;
  5300. --f7-button-small-outline-border-width: 1px;
  5301. --f7-segmented-strong-button-text-transform: none;
  5302. --f7-segmented-strong-button-active-font-weight: 600;
  5303. }
  5304. button {
  5305. -webkit-appearance: none;
  5306. -moz-appearance: none;
  5307. appearance: none;
  5308. width: 100%;
  5309. }
  5310. .button {
  5311. text-decoration: none;
  5312. text-align: center;
  5313. display: block;
  5314. -webkit-appearance: none;
  5315. -moz-appearance: none;
  5316. appearance: none;
  5317. background: none;
  5318. margin: 0;
  5319. white-space: nowrap;
  5320. text-overflow: ellipsis;
  5321. position: relative;
  5322. overflow: hidden;
  5323. font-family: inherit;
  5324. cursor: pointer;
  5325. outline: 0;
  5326. box-sizing: border-box;
  5327. vertical-align: middle;
  5328. justify-content: center;
  5329. align-items: center;
  5330. border: var(--f7-button-border-width, 0px) solid var(--f7-button-border-color, var(--f7-theme-color));
  5331. font-size: var(--f7-button-font-size);
  5332. color: var(--f7-button-text-color, var(--f7-theme-color));
  5333. height: var(--f7-button-height);
  5334. line-height: calc(var(--f7-button-height) - var(--f7-button-border-width, 0) * 2);
  5335. padding: var(--f7-button-padding-vertical, 0px) var(--f7-button-padding-horizontal);
  5336. border-radius: var(--f7-button-border-radius);
  5337. min-width: var(--f7-button-min-width);
  5338. font-weight: var(--f7-button-font-weight);
  5339. letter-spacing: var(--f7-button-letter-spacing);
  5340. text-transform: var(--f7-button-text-transform);
  5341. background-color: var(--f7-button-bg-color);
  5342. box-shadow: var(--f7-button-box-shadow);
  5343. }
  5344. .button.active-state {
  5345. background-color: var(--f7-button-pressed-bg-color, rgba(var(--f7-theme-color-rgb), 0.15));
  5346. color: var(--f7-button-pressed-text-color, var(--f7-button-text-color, var(--f7-theme-color)));
  5347. }
  5348. input[type="submit"].button,
  5349. input[type="button"].button {
  5350. width: 100%;
  5351. }
  5352. .button > i + span,
  5353. .button > span + span,
  5354. .button > span + i,
  5355. .button > i + i {
  5356. margin-right: 4px;
  5357. }
  5358. .subnavbar .button,
  5359. .navbar .button,
  5360. .toolbar .button,
  5361. .searchbar .button,
  5362. .appbar .button {
  5363. color: var(--f7-button-text-color, var(--f7-theme-color));
  5364. }
  5365. .button-round,
  5366. .ios .button-round-ios,
  5367. .md .button-round-md,
  5368. .aurora .button-round-aurora {
  5369. --f7-button-border-radius: var(--f7-button-height);
  5370. }
  5371. .button-fill,
  5372. .ios .button-fill-ios,
  5373. .md .button-fill-md,
  5374. .aurora .button-fill-aurora,
  5375. .button-active,
  5376. .button.tab-link-active {
  5377. --f7-button-bg-color: var(--f7-button-fill-bg-color, var(--f7-theme-color));
  5378. --f7-button-text-color: var(--f7-button-fill-text-color, #fff);
  5379. --f7-touch-ripple-color: var(--f7-touch-ripple-white);
  5380. }
  5381. .button-fill,
  5382. .ios .button-fill-ios,
  5383. .md .button-fill-md,
  5384. .aurora .button-fill-aurora {
  5385. --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color);
  5386. }
  5387. .button-active,
  5388. .button.tab-link-active {
  5389. --f7-button-pressed-bg-color: var(--f7-button-bg-color);
  5390. }
  5391. .button-outline,
  5392. .ios .button-outline-ios,
  5393. .md .button-outline-md,
  5394. .aurora .button-outline-aurora {
  5395. --f7-button-border-color: var(--f7-button-outline-border-color, var(--f7-theme-color));
  5396. --f7-button-border-width: var(--f7-button-outline-border-width);
  5397. }
  5398. .button-large,
  5399. .ios .button-large-ios,
  5400. .md .button-large-md,
  5401. .aurora .button-large-aurora {
  5402. --f7-button-height: var(--f7-button-large-height);
  5403. --f7-button-font-size: var(--f7-button-large-font-size);
  5404. --f7-button-font-weight: var(--f7-button-large-font-weight);
  5405. --f7-button-text-transform: var(--f7-button-large-text-transform);
  5406. }
  5407. .button-small,
  5408. .ios .button-small-ios,
  5409. .md .button-small-md,
  5410. .aurora .button-small-aurora {
  5411. --f7-button-outline-border-width: var(--f7-button-small-outline-border-width);
  5412. --f7-button-height: var(--f7-button-small-height);
  5413. --f7-button-font-size: var(--f7-button-small-font-size);
  5414. --f7-button-font-weight: var(--f7-button-small-font-weight);
  5415. --f7-button-text-transform: var(--f7-button-small-text-transform);
  5416. }
  5417. .ios .button-small.button-fill,
  5418. .ios .button-small-ios.button-fill,
  5419. .ios .button-small.button-fill-ios {
  5420. --f7-button-border-width: var(--f7-button-small-outline-border-width);
  5421. --f7-button-pressed-text-color: var(--f7-theme-color);
  5422. --f7-button-pressed-bg-color: transparent;
  5423. }
  5424. .segmented {
  5425. align-self: center;
  5426. display: flex;
  5427. flex-wrap: nowrap;
  5428. border-radius: var(--f7-button-border-radius);
  5429. box-shadow: var(--f7-button-box-shadow);
  5430. box-sizing: border-box;
  5431. }
  5432. .segmented .button,
  5433. .segmented button {
  5434. width: 100%;
  5435. flex-shrink: 1;
  5436. min-width: 0;
  5437. border-radius: 0;
  5438. }
  5439. .segmented .button:first-child {
  5440. border-radius: 0 var(--f7-button-border-radius) var(--f7-button-border-radius) 0;
  5441. }
  5442. .segmented .button:not(.button-outline):first-child {
  5443. border-right: none;
  5444. }
  5445. .segmented .button.button-outline:nth-child(n + 2) {
  5446. border-right: none;
  5447. }
  5448. .segmented .button:last-child {
  5449. border-radius: var(--f7-button-border-radius) 0 0 var(--f7-button-border-radius);
  5450. }
  5451. .segmented .button-round:first-child {
  5452. border-radius: 0 var(--f7-button-height) var(--f7-button-height) 0;
  5453. }
  5454. .segmented .button-round:last-child {
  5455. border-radius: var(--f7-button-height) 0 0 var(--f7-button-height);
  5456. }
  5457. .segmented .button:first-child:last-child {
  5458. border-radius: var(--f7-button-border-radius);
  5459. }
  5460. .segmented-raised,
  5461. .ios .segmented-raised-ios,
  5462. .md .segmented-raised-md,
  5463. .aurora .segmented-raised-aurora {
  5464. box-shadow: var(--f7-button-raised-box-shadow);
  5465. }
  5466. .segmented-raised .button:not(.button-outline),
  5467. .ios .segmented-raised-ios .button:not(.button-outline),
  5468. .md .segmented-raised-md .button:not(.button-outline),
  5469. .aurora .segmented-raised-aurora .button:not(.button-outline) {
  5470. border-right: 1px solid var(--f7-segmented-raised-divider-color);
  5471. }
  5472. .button-raised,
  5473. .ios .button-raised-ios,
  5474. .md .button-raised-md,
  5475. .aurora .button-raised-aurora {
  5476. --f7-button-box-shadow: var(--f7-button-raised-box-shadow);
  5477. }
  5478. .button-raised.active-state,
  5479. .ios .button-raised-ios.active-state,
  5480. .md .button-raised-md.active-state,
  5481. .aurora .button-raised-aurora.active-state {
  5482. --f7-button-box-shadow: var(--f7-button-raised-pressed-box-shadow);
  5483. }
  5484. .segmented-strong,
  5485. .ios .segmented-strong-ios,
  5486. .md .segmented-strong-md,
  5487. .aurora .segmented-strong-aurora {
  5488. --f7-button-bg-color: transparent;
  5489. --f7-button-hover-bg-color: var(--f7-segmented-strong-button-hover-bg-color);
  5490. --f7-button-text-color: var(--f7-segmented-strong-button-text-color);
  5491. --f7-button-font-weight: var(--f7-segmented-strong-button-font-weight);
  5492. --f7-button-text-transform: var(--f7-segmented-strong-button-text-transform);
  5493. --f7-button-pressed-bg-color: var(--f7-segmented-strong-button-pressed-bg-color);
  5494. position: relative;
  5495. background: var(--f7-segmented-strong-bg-color);
  5496. border-radius: calc(var(--f7-button-border-radius) + 2px);
  5497. box-shadow: none;
  5498. padding: var(--f7-segmented-strong-padding);
  5499. overflow: hidden;
  5500. }
  5501. .segmented-strong .button,
  5502. .ios .segmented-strong-ios .button,
  5503. .md .segmented-strong-md .button,
  5504. .aurora .segmented-strong-aurora .button {
  5505. z-index: 1;
  5506. transform: translate3d(0, 0, 0);
  5507. }
  5508. .segmented-strong .button,
  5509. .ios .segmented-strong-ios .button,
  5510. .md .segmented-strong-md .button,
  5511. .aurora .segmented-strong-aurora .button,
  5512. .segmented-strong .button:first-child,
  5513. .ios .segmented-strong-ios .button:first-child,
  5514. .md .segmented-strong-md .button:first-child,
  5515. .aurora .segmented-strong-aurora .button:first-child,
  5516. .segmented-strong .button:last-child,
  5517. .ios .segmented-strong-ios .button:last-child,
  5518. .md .segmented-strong-md .button:last-child,
  5519. .aurora .segmented-strong-aurora .button:last-child {
  5520. border-radius: var(--f7-button-border-radius);
  5521. }
  5522. .segmented-strong .button + .button,
  5523. .ios .segmented-strong-ios .button + .button,
  5524. .md .segmented-strong-md .button + .button,
  5525. .aurora .segmented-strong-aurora .button + .button {
  5526. margin-right: var(--f7-segmented-strong-between-buttons);
  5527. }
  5528. .segmented-strong .button.button-active,
  5529. .ios .segmented-strong-ios .button.button-active,
  5530. .md .segmented-strong-md .button.button-active,
  5531. .aurora .segmented-strong-aurora .button.button-active,
  5532. .segmented-strong .button.tab-link-active,
  5533. .ios .segmented-strong-ios .button.tab-link-active,
  5534. .md .segmented-strong-md .button.tab-link-active,
  5535. .aurora .segmented-strong-aurora .button.tab-link-active {
  5536. --f7-button-hover-bg-color: transparent;
  5537. --f7-button-bg-color: transparent;
  5538. --f7-button-text-color: var(--f7-segmented-strong-button-active-text-color);
  5539. --f7-button-font-weight: var(--f7-segmented-strong-button-active-font-weight);
  5540. }
  5541. .segmented-strong .segmented-highlight,
  5542. .ios .segmented-strong-ios .segmented-highlight,
  5543. .md .segmented-strong-md .segmented-highlight,
  5544. .aurora .segmented-strong-aurora .segmented-highlight {
  5545. --f7-segmented-highlight-num: 1;
  5546. --f7-segmented-highlight-active: 0;
  5547. --f7-segmented-highlight-padding: calc(var(--f7-segmented-strong-padding) * 2);
  5548. --f7-segmented-highlight-between: var(--f7-segmented-strong-between-buttons);
  5549. --f7-segmented-highlight-width: calc((100% - var(--f7-segmented-highlight-padding) - var(--f7-segmented-highlight-between) * (var(--f7-segmented-highlight-num) - 1)) / var(--f7-segmented-highlight-num));
  5550. position: absolute;
  5551. background-color: var(--f7-segmented-strong-button-active-bg-color);
  5552. border-radius: var(--f7-button-border-radius);
  5553. box-shadow: var(--f7-segmented-strong-button-active-box-shadow);
  5554. left: var(--f7-segmented-strong-padding);
  5555. top: var(--f7-segmented-strong-padding);
  5556. height: calc(100% - var(--f7-segmented-strong-padding) * 2);
  5557. width: var(--f7-segmented-highlight-width);
  5558. z-index: 0;
  5559. transform: translateX(calc(var(--f7-segmented-highlight-active) * 100% + var(--f7-segmented-highlight-active) * var(--f7-segmented-highlight-between)));
  5560. transition: 200ms;
  5561. }
  5562. .button:nth-child(2) ~ .segmented-highlight {
  5563. --f7-segmented-highlight-num: 2;
  5564. }
  5565. .button:nth-child(3) ~ .segmented-highlight {
  5566. --f7-segmented-highlight-num: 3;
  5567. }
  5568. .button:nth-child(4) ~ .segmented-highlight {
  5569. --f7-segmented-highlight-num: 4;
  5570. }
  5571. .button:nth-child(5) ~ .segmented-highlight {
  5572. --f7-segmented-highlight-num: 5;
  5573. }
  5574. .button:nth-child(6) ~ .segmented-highlight {
  5575. --f7-segmented-highlight-num: 6;
  5576. }
  5577. .button:nth-child(7) ~ .segmented-highlight {
  5578. --f7-segmented-highlight-num: 7;
  5579. }
  5580. .button:nth-child(8) ~ .segmented-highlight {
  5581. --f7-segmented-highlight-num: 8;
  5582. }
  5583. .button:nth-child(9) ~ .segmented-highlight {
  5584. --f7-segmented-highlight-num: 9;
  5585. }
  5586. .button:nth-child(10) ~ .segmented-highlight {
  5587. --f7-segmented-highlight-num: 10;
  5588. }
  5589. .button-active:nth-child(2) ~ .segmented-highlight,
  5590. .tab-link-active:nth-child(2) ~ .segmented-highlight {
  5591. --f7-segmented-highlight-active: 1;
  5592. }
  5593. .button-active:nth-child(3) ~ .segmented-highlight,
  5594. .tab-link-active:nth-child(3) ~ .segmented-highlight {
  5595. --f7-segmented-highlight-active: 2;
  5596. }
  5597. .button-active:nth-child(4) ~ .segmented-highlight,
  5598. .tab-link-active:nth-child(4) ~ .segmented-highlight {
  5599. --f7-segmented-highlight-active: 3;
  5600. }
  5601. .button-active:nth-child(5) ~ .segmented-highlight,
  5602. .tab-link-active:nth-child(5) ~ .segmented-highlight {
  5603. --f7-segmented-highlight-active: 4;
  5604. }
  5605. .button-active:nth-child(6) ~ .segmented-highlight,
  5606. .tab-link-active:nth-child(6) ~ .segmented-highlight {
  5607. --f7-segmented-highlight-active: 5;
  5608. }
  5609. .button-active:nth-child(7) ~ .segmented-highlight,
  5610. .tab-link-active:nth-child(7) ~ .segmented-highlight {
  5611. --f7-segmented-highlight-active: 6;
  5612. }
  5613. .button-active:nth-child(8) ~ .segmented-highlight,
  5614. .tab-link-active:nth-child(8) ~ .segmented-highlight {
  5615. --f7-segmented-highlight-active: 7;
  5616. }
  5617. .button-active:nth-child(9) ~ .segmented-highlight,
  5618. .tab-link-active:nth-child(9) ~ .segmented-highlight {
  5619. --f7-segmented-highlight-active: 8;
  5620. }
  5621. .button-active:nth-child(10) ~ .segmented-highlight,
  5622. .tab-link-active:nth-child(10) ~ .segmented-highlight {
  5623. --f7-segmented-highlight-active: 9;
  5624. }
  5625. .segmented-round,
  5626. .ios .segmented-round-ios,
  5627. .md .segmented-round-md,
  5628. .aurora .segmented-round-aurora {
  5629. border-radius: var(--f7-button-height);
  5630. }
  5631. .segmented-round .segmented-highlight,
  5632. .ios .segmented-round-ios .segmented-highlight,
  5633. .md .segmented-round-md .segmented-highlight,
  5634. .aurora .segmented-round-aurora .segmented-highlight {
  5635. border-radius: var(--f7-button-height);
  5636. }
  5637. .subnavbar .segmented {
  5638. width: 100%;
  5639. }
  5640. .ios .button {
  5641. transition-duration: 100ms;
  5642. }
  5643. .ios .button-fill,
  5644. .ios .button-fill-ios {
  5645. --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-tint));
  5646. }
  5647. .ios .button-small,
  5648. .ios .button-small-ios {
  5649. transition-duration: 200ms;
  5650. }
  5651. .md .button {
  5652. transition-duration: 300ms;
  5653. transform: translate3d(0, 0, 0);
  5654. }
  5655. .md .button-fill,
  5656. .md .button-fill-md {
  5657. --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-shade));
  5658. }
  5659. .aurora .button {
  5660. transition-duration: 100ms;
  5661. transform: translate3d(0, 0, 0);
  5662. }
  5663. .aurora.device-desktop .button:not(.active-state):not(.no-hover):hover {
  5664. background-color: var(--f7-button-hover-bg-color, rgba(var(--f7-theme-color-rgb), 0.07));
  5665. }
  5666. .aurora .button-fill,
  5667. .aurora .button-fill-aurora {
  5668. --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-shade));
  5669. }
  5670. .aurora .button-fill,
  5671. .aurora .button-active,
  5672. .aurora .button.tab-link-active,
  5673. .aurora .button-fill-aurora {
  5674. --f7-button-hover-bg-color: var(--f7-button-fill-hover-bg-color, var(--f7-theme-color-tint));
  5675. }
  5676. /* === Touch Ripple === */
  5677. :root {
  5678. --f7-touch-ripple-black: rgba(0, 0, 0, 0.1);
  5679. --f7-touch-ripple-white: rgba(255, 255, 255, 0.3);
  5680. --f7-touch-ripple-color: var(--f7-touch-ripple-black);
  5681. }
  5682. .theme-dark {
  5683. --f7-touch-ripple-color: var(--f7-touch-ripple-white);
  5684. }
  5685. .ripple,
  5686. .fab a,
  5687. .link,
  5688. .item-link,
  5689. .list-button,
  5690. .button,
  5691. .dialog-button,
  5692. .tab-link,
  5693. .radio,
  5694. .checkbox,
  5695. .actions-button,
  5696. .speed-dial-buttons a {
  5697. -webkit-user-select: none;
  5698. -moz-user-select: none;
  5699. user-select: none;
  5700. }
  5701. .ripple-wave {
  5702. left: 0;
  5703. top: 0;
  5704. position: absolute !important;
  5705. border-radius: 50%;
  5706. pointer-events: none;
  5707. z-index: -1;
  5708. padding: 0;
  5709. margin: 0;
  5710. font-size: 0;
  5711. transform: translate3d(0px, 0px, 0) scale(0);
  5712. transition-duration: 1400ms;
  5713. background-color: var(--f7-touch-ripple-color);
  5714. }
  5715. .ripple-wave.ripple-wave-fill {
  5716. transition-duration: 300ms;
  5717. opacity: 0.35;
  5718. }
  5719. .ripple-wave.ripple-wave-out {
  5720. transition-duration: 600ms;
  5721. opacity: 0;
  5722. }
  5723. .button-fill .ripple-wave,
  5724. .picker-calendar-day .ripple-wave,
  5725. .menu .ripple-wave {
  5726. z-index: 1;
  5727. }
  5728. .checkbox .ripple-wave,
  5729. .radio .ripple-wave,
  5730. .data-table .sortable-cell .ripple-wave {
  5731. z-index: 0;
  5732. }
  5733. [class*="ripple-color-"] {
  5734. --f7-touch-ripple-color: var(--f7-theme-color-ripple-color);
  5735. }
  5736. /* === Icon === */
  5737. .f7-icons,
  5738. .material-icons {
  5739. width: 1em;
  5740. height: 1em;
  5741. }
  5742. i.icon {
  5743. display: inline-block;
  5744. vertical-align: middle;
  5745. background-size: 100% auto;
  5746. background-position: center;
  5747. background-repeat: no-repeat;
  5748. font-style: normal;
  5749. position: relative;
  5750. }
  5751. .icon-back:after,
  5752. .icon-prev:after,
  5753. .icon-forward:after,
  5754. .icon-next:after {
  5755. font-family: 'framework7-core-icons';
  5756. font-weight: normal;
  5757. font-style: normal;
  5758. line-height: 1;
  5759. letter-spacing: normal;
  5760. text-transform: none;
  5761. white-space: nowrap;
  5762. word-wrap: normal;
  5763. direction: ltr;
  5764. -webkit-font-smoothing: antialiased;
  5765. text-rendering: optimizeLegibility;
  5766. -moz-osx-font-smoothing: grayscale;
  5767. font-feature-settings: "liga";
  5768. text-align: center;
  5769. display: block;
  5770. width: 100%;
  5771. height: 100%;
  5772. font-size: 20px;
  5773. }
  5774. .icon[class*="color-"] {
  5775. color: var(--f7-theme-color);
  5776. }
  5777. .ios .icon-back,
  5778. .ios .icon-prev,
  5779. .ios .icon-forward,
  5780. .ios .icon-next {
  5781. width: 12px;
  5782. height: 20px;
  5783. line-height: 20px;
  5784. }
  5785. .ios .icon-back:after,
  5786. .ios .icon-prev:after,
  5787. .ios .icon-forward:after,
  5788. .ios .icon-next:after {
  5789. line-height: inherit;
  5790. }
  5791. .ios .icon-prev:after,
  5792. .ios .icon-next:after {
  5793. font-size: 16px;
  5794. }
  5795. .ios .icon-back:after,
  5796. .ios .icon-prev:after {
  5797. content: 'chevron_right_ios';
  5798. }
  5799. .ios .icon-forward:after,
  5800. .ios .icon-next:after {
  5801. content: 'chevron_left_ios';
  5802. }
  5803. .md .icon-back,
  5804. .md .icon-forward,
  5805. .md .icon-next,
  5806. .md .icon-prev {
  5807. width: 24px;
  5808. height: 24px;
  5809. }
  5810. .md .icon-back:after,
  5811. .md .icon-forward:after,
  5812. .md .icon-next:after,
  5813. .md .icon-prev:after {
  5814. line-height: 1.2;
  5815. }
  5816. .md .icon-back:after {
  5817. content: 'arrow_right_md';
  5818. }
  5819. .md .icon-forward:after {
  5820. content: 'arrow_left_md';
  5821. }
  5822. .md .icon-next:after {
  5823. content: 'chevron_left_md';
  5824. }
  5825. .md .icon-prev:after {
  5826. content: 'chevron_right_md';
  5827. }
  5828. .aurora .f7-icons,
  5829. .aurora .material-icons {
  5830. font-size: 18px;
  5831. }
  5832. .aurora .icon-back,
  5833. .aurora .icon-prev,
  5834. .aurora .icon-forward,
  5835. .aurora .icon-next {
  5836. width: 9px;
  5837. height: 14px;
  5838. line-height: 14px;
  5839. }
  5840. .aurora .icon-back:after,
  5841. .aurora .icon-prev:after,
  5842. .aurora .icon-forward:after,
  5843. .aurora .icon-next:after {
  5844. line-height: inherit;
  5845. }
  5846. .aurora .icon-back:after,
  5847. .aurora .icon-prev:after {
  5848. content: 'chevron_right_aurora';
  5849. }
  5850. .aurora .icon-forward:after,
  5851. .aurora .icon-next:after {
  5852. content: 'chevron_left_aurora';
  5853. }
  5854. .custom-modal-backdrop {
  5855. z-index: 10500;
  5856. }
  5857. .custom-modal-backdrop,
  5858. .actions-backdrop,
  5859. .dialog-backdrop,
  5860. .popover-backdrop,
  5861. .popup-backdrop,
  5862. .preloader-backdrop,
  5863. .sheet-backdrop,
  5864. .fab-backdrop {
  5865. position: absolute;
  5866. left: 0;
  5867. top: 0;
  5868. width: 100%;
  5869. height: 100%;
  5870. background: rgba(0, 0, 0, 0.4);
  5871. z-index: 13000;
  5872. visibility: hidden;
  5873. opacity: 0;
  5874. transition-duration: 400ms;
  5875. }
  5876. .custom-modal-backdrop.not-animated,
  5877. .actions-backdrop.not-animated,
  5878. .dialog-backdrop.not-animated,
  5879. .popover-backdrop.not-animated,
  5880. .popup-backdrop.not-animated,
  5881. .preloader-backdrop.not-animated,
  5882. .sheet-backdrop.not-animated,
  5883. .fab-backdrop.not-animated {
  5884. transition-duration: 0ms;
  5885. }
  5886. .custom-modal-backdrop.backdrop-in,
  5887. .actions-backdrop.backdrop-in,
  5888. .dialog-backdrop.backdrop-in,
  5889. .popover-backdrop.backdrop-in,
  5890. .popup-backdrop.backdrop-in,
  5891. .preloader-backdrop.backdrop-in,
  5892. .sheet-backdrop.backdrop-in,
  5893. .fab-backdrop.backdrop-in {
  5894. visibility: visible;
  5895. opacity: 1;
  5896. }
  5897. /* === Appbar === */
  5898. :root {
  5899. /*
  5900. --f7-appbar-offset: var(--f7-appbar-height);
  5901. --f7-appbar-extra-offset: 0px;
  5902. --f7-appbar-bg-color: var(--f7-bars-bg-color);
  5903. --f7-appbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
  5904. --f7-appbar-bg-image: var(--f7-bars-bg-image);
  5905. --f7-appbar-border-color: var(--f7-bars-border-color);
  5906. --f7-appbar-link-color: var(--f7-bars-link-color);
  5907. --f7-appbar-text-color: var(--f7-bars-text-color);
  5908. */
  5909. --f7-appbar-shadow-image: none;
  5910. }
  5911. .ios {
  5912. --f7-appbar-height: 44px;
  5913. --f7-appbar-inner-padding-left: 8px;
  5914. --f7-appbar-inner-padding-right: 8px;
  5915. }
  5916. .md {
  5917. --f7-appbar-height: 48px;
  5918. --f7-appbar-inner-padding-left: 16px;
  5919. --f7-appbar-inner-padding-right: 16px;
  5920. }
  5921. .aurora {
  5922. --f7-appbar-height: 38px;
  5923. --f7-appbar-inner-padding-left: 16px;
  5924. --f7-appbar-inner-padding-right: 16px;
  5925. }
  5926. .appbar {
  5927. position: relative;
  5928. left: 0;
  5929. top: 0;
  5930. width: 100%;
  5931. z-index: 500;
  5932. -webkit-backface-visibility: hidden;
  5933. backface-visibility: hidden;
  5934. box-sizing: border-box;
  5935. margin: 0;
  5936. transform: translate3d(0, 0, 0);
  5937. height: calc(var(--f7-appbar-height) + var(--f7-safe-area-top));
  5938. background-image: var(--f7-appbar-bg-image, var(--f7-bars-bg-image));
  5939. background-color: var(--f7-appbar-bg-color, var(--f7-bars-bg-color));
  5940. color: var(--f7-appbar-text-color, var(--f7-bars-text-color));
  5941. font-size: var(--f7-appbar-font-size);
  5942. z-index: 7000;
  5943. }
  5944. @supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  5945. .ios-translucent-bars .appbar {
  5946. background-color: rgba(var(--f7-appbar-bg-color-rgb, var(--f7-bars-bg-color-rgb)), var(--f7-bars-translucent-opacity));
  5947. -webkit-backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
  5948. backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
  5949. }
  5950. }
  5951. .appbar .panel ~ .appbar {
  5952. z-index: 5500;
  5953. }
  5954. .appbar a {
  5955. color: var(--f7-appbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
  5956. }
  5957. .appbar a.link {
  5958. display: flex;
  5959. justify-content: flex-start;
  5960. line-height: var(--f7-appbar-link-line-height, var(--f7-appbar-height));
  5961. height: var(--f7-appbar-link-height, var(--f7-appbar-height));
  5962. }
  5963. .appbar .left,
  5964. .appbar .center,
  5965. .appbar .right {
  5966. display: flex;
  5967. align-items: center;
  5968. }
  5969. .appbar.no-hairline:after,
  5970. .appbar.no-border:after {
  5971. display: none !important;
  5972. }
  5973. .appbar.no-hairline .title-large:after,
  5974. .appbar.no-border .title-large:after {
  5975. display: none !important;
  5976. }
  5977. .appbar.no-shadow:before {
  5978. display: none !important;
  5979. }
  5980. .appbar:after,
  5981. .appbar:before {
  5982. -webkit-backface-visibility: hidden;
  5983. backface-visibility: hidden;
  5984. }
  5985. .appbar:after {
  5986. content: '';
  5987. position: absolute;
  5988. background-color: var(--f7-appbar-border-color, var(--f7-bars-border-color));
  5989. display: block;
  5990. z-index: 15;
  5991. top: auto;
  5992. right: auto;
  5993. bottom: 0;
  5994. left: 0;
  5995. height: 1px;
  5996. width: 100%;
  5997. transform-origin: 50% 100%;
  5998. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  5999. }
  6000. .appbar:before {
  6001. content: '';
  6002. position: absolute;
  6003. right: 0;
  6004. width: 100%;
  6005. top: 100%;
  6006. bottom: auto;
  6007. height: 8px;
  6008. pointer-events: none;
  6009. background: var(--f7-appbar-shadow-image);
  6010. }
  6011. .appbar:after {
  6012. z-index: 1;
  6013. }
  6014. .appbar ~ * {
  6015. --f7-appbar-app-offset: calc(var(--f7-appbar-height) + var(--f7-appbar-extra-offset, 0px) + var(--f7-safe-area-top));
  6016. }
  6017. .appbar ~ .views,
  6018. .appbar ~ .view,
  6019. .appbar ~ .appbar {
  6020. --f7-safe-area-top: 0px;
  6021. }
  6022. .appbar ~ .panel .view,
  6023. .appbar ~ .panel .page,
  6024. .appbar ~ .panel .page-content {
  6025. --f7-safe-area-top: 0px;
  6026. }
  6027. .appbar-inner {
  6028. position: absolute;
  6029. left: 0;
  6030. top: var(--f7-safe-area-top);
  6031. width: 100%;
  6032. height: var(--f7-appbar-height);
  6033. display: flex;
  6034. align-items: center;
  6035. justify-content: space-between;
  6036. box-sizing: border-box;
  6037. padding: 0 calc(var(--f7-appbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-appbar-inner-padding-left) + var(--f7-safe-area-left));
  6038. }
  6039. .appbar-inner.stacked {
  6040. display: none;
  6041. }
  6042. /* === Dialog === */
  6043. :root {
  6044. --f7-dialog-button-text-color: var(--f7-theme-color);
  6045. --f7-dialog-button-text-align: center;
  6046. --f7-dialog-input-bg-color: #fff;
  6047. }
  6048. :root .theme-dark,
  6049. :root.theme-dark {
  6050. --f7-dialog-text-color: #fff;
  6051. }
  6052. .ios {
  6053. --f7-dialog-box-shadow: none;
  6054. --f7-dialog-width: 270px;
  6055. --f7-dialog-inner-padding: 16px;
  6056. --f7-dialog-border-radius: 13px;
  6057. --f7-dialog-text-align: center;
  6058. --f7-dialog-font-size: 14px;
  6059. --f7-dialog-title-text-color: inherit;
  6060. --f7-dialog-title-font-size: 18px;
  6061. --f7-dialog-title-font-weight: 600;
  6062. --f7-dialog-title-line-height: inherit;
  6063. --f7-dialog-button-font-size: 17px;
  6064. --f7-dialog-button-height: 44px;
  6065. --f7-dialog-button-letter-spacing: 0;
  6066. --f7-dialog-button-font-weight: 400;
  6067. --f7-dialog-button-text-transform: none;
  6068. --f7-dialog-input-border-radius: 4px;
  6069. --f7-dialog-input-font-size: 14px;
  6070. --f7-dialog-input-height: 32px;
  6071. --f7-dialog-input-border-width: 1px;
  6072. --f7-dialog-input-placeholder-color: #a9a9a9;
  6073. --f7-dialog-preloader-size: 34px;
  6074. --f7-dialog-bg-color: rgba(255, 255, 255, 0.95);
  6075. --f7-dialog-bg-color-rgb: 255, 255, 255;
  6076. --f7-dialog-text-color: #000;
  6077. --f7-dialog-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
  6078. --f7-dialog-input-border-color: rgba(0, 0, 0, 0.3);
  6079. --f7-dialog-border-divider-color: rgba(0, 0, 0, 0.2);
  6080. }
  6081. .ios .theme-dark,
  6082. .ios.theme-dark {
  6083. --f7-dialog-bg-color: rgba(45, 45, 45, 0.95);
  6084. --f7-dialog-bg-color-rgb: 45, 45, 45;
  6085. --f7-dialog-button-pressed-bg-color: rgba(0, 0, 0, 0.2);
  6086. --f7-dialog-border-divider-color: rgba(255, 255, 255, 0.15);
  6087. --f7-dialog-input-border-color: rgba(255, 255, 255, 0.15);
  6088. --f7-dialog-input-bg-color: rgba(0, 0, 0, 0.5);
  6089. }
  6090. .md {
  6091. --f7-dialog-box-shadow: var(--f7-elevation-24);
  6092. --f7-dialog-width: 280px;
  6093. --f7-dialog-inner-padding: 24px;
  6094. --f7-dialog-border-radius: 4px;
  6095. --f7-dialog-text-align: right;
  6096. --f7-dialog-font-size: 16px;
  6097. --f7-dialog-title-font-size: 20px;
  6098. --f7-dialog-title-font-weight: 500;
  6099. --f7-dialog-title-line-height: 1.3;
  6100. --f7-dialog-button-font-size: 14px;
  6101. --f7-dialog-button-height: 36px;
  6102. --f7-dialog-button-letter-spacing: 0.03em;
  6103. --f7-dialog-button-font-weight: 500;
  6104. --f7-dialog-button-text-transform: uppercase;
  6105. --f7-dialog-input-border-radius: 0px;
  6106. --f7-dialog-input-font-size: 16px;
  6107. --f7-dialog-input-height: 36px;
  6108. --f7-dialog-input-border-color: transparent;
  6109. --f7-dialog-input-border-width: 0px;
  6110. --f7-dialog-preloader-size: 32px;
  6111. --f7-dialog-bg-color: #fff;
  6112. --f7-dialog-text-color: rgba(0, 0, 0, 0.54);
  6113. --f7-dialog-title-text-color: #212121;
  6114. --f7-dialog-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
  6115. --f7-dialog-input-placeholder-color: rgba(0, 0, 0, 0.35);
  6116. }
  6117. .md .theme-dark,
  6118. .md.theme-dark {
  6119. --f7-dialog-bg-color: #1c1c1d;
  6120. --f7-dialog-title-text-color: #fff;
  6121. --f7-dialog-button-pressed-bg-color: rgba(255, 255, 255, 0.1);
  6122. --f7-dialog-input-bg-color: transparent;
  6123. --f7-dialog-input-placeholder-color: rgba(255, 255, 255, 0.54);
  6124. }
  6125. .aurora {
  6126. --f7-dialog-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15), 0 25px 30px 0 rgba(0,0,0,0.35);
  6127. --f7-dialog-width: 300px;
  6128. --f7-dialog-inner-padding: 20px;
  6129. --f7-dialog-border-radius: 4px;
  6130. --f7-dialog-text-align: right;
  6131. --f7-dialog-font-size: 14px;
  6132. --f7-dialog-title-font-size: 14px;
  6133. --f7-dialog-title-font-weight: 700;
  6134. --f7-dialog-title-line-height: inherit;
  6135. --f7-dialog-button-font-size: 13px;
  6136. --f7-dialog-button-height: 28px;
  6137. --f7-dialog-button-letter-spacing: 0;
  6138. --f7-dialog-button-font-weight: 500;
  6139. --f7-dialog-button-text-transform: none;
  6140. /*
  6141. --f7-dialog-button-pressed-bg-color: var(--f7-theme-color-shade);
  6142. --f7-dialog-button-hover-bg-color: var(--f7-theme-color-tint);
  6143. */
  6144. --f7-dialog-input-border-radius: 4px;
  6145. --f7-dialog-input-font-size: 13px;
  6146. --f7-dialog-input-height: 24px;
  6147. --f7-dialog-input-border-width: 1px;
  6148. --f7-dialog-preloader-size: 24px;
  6149. --f7-dialog-bg-color: #fff;
  6150. --f7-dialog-title-text-color: inherit;
  6151. --f7-dialog-text-color: #000;
  6152. --f7-dialog-button-text-color: #fff;
  6153. --f7-dialog-input-border-color: rgba(0, 0, 0, 0.12);
  6154. --f7-dialog-input-placeholder-color: rgba(0, 0, 0, 0.32);
  6155. }
  6156. .aurora .theme-dark,
  6157. .aurora.theme-dark {
  6158. --f7-dialog-bg-color: #1c1c1d;
  6159. --f7-dialog-title-text-color: #fff;
  6160. --f7-dialog-input-bg-color: rgba(0, 0, 0, 0.25);
  6161. --f7-dialog-input-placeholder-color: rgba(255, 255, 255, 0.54);
  6162. --f7-dialog-input-border-color: rgba(255, 255, 255, 0.15);
  6163. }
  6164. .dialog {
  6165. position: absolute;
  6166. z-index: 13500;
  6167. left: 50%;
  6168. margin-top: 0;
  6169. top: 50%;
  6170. overflow: hidden;
  6171. opacity: 0;
  6172. transform: translate3d(0, -50%, 0) scale(1.185);
  6173. transition-property: transform, opacity;
  6174. display: none;
  6175. transition-duration: 400ms;
  6176. box-shadow: var(--f7-dialog-box-shadow);
  6177. width: var(--f7-dialog-width);
  6178. margin-left: calc(-1 * var(--f7-dialog-width) / 2);
  6179. border-radius: var(--f7-dialog-border-radius);
  6180. text-align: var(--f7-dialog-text-align);
  6181. color: var(--f7-dialog-text-color);
  6182. font-size: var(--f7-dialog-font-size);
  6183. background: var(--f7-dialog-bg-color);
  6184. will-change: transform, opacity;
  6185. }
  6186. @supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  6187. .ios-translucent-modals .dialog {
  6188. background-color: rgba(var(--f7-dialog-bg-color-rgb), 0.8);
  6189. -webkit-backdrop-filter: saturate(180%) blur(20px);
  6190. backdrop-filter: saturate(180%) blur(20px);
  6191. }
  6192. }
  6193. .dialog.modal-in {
  6194. opacity: 1;
  6195. transform: translate3d(0, -50%, 0) scale(1);
  6196. }
  6197. .dialog.modal-out {
  6198. opacity: 0;
  6199. z-index: 13499;
  6200. }
  6201. .dialog.not-animated {
  6202. transition-duration: 0ms;
  6203. }
  6204. .dialog-inner {
  6205. position: relative;
  6206. padding: var(--f7-dialog-inner-padding);
  6207. }
  6208. .dialog-title {
  6209. color: var(--f7-dialog-title-text-color);
  6210. font-size: var(--f7-dialog-title-font-size);
  6211. font-weight: var(--f7-dialog-title-font-weight);
  6212. line-height: var(--f7-dialog-title-line-height);
  6213. }
  6214. .dialog-buttons {
  6215. position: relative;
  6216. display: flex;
  6217. flex-direction: row-reverse;
  6218. }
  6219. .dialog-buttons-vertical .dialog-buttons {
  6220. display: block;
  6221. height: auto !important;
  6222. }
  6223. .dialog-button {
  6224. box-sizing: border-box;
  6225. overflow: hidden;
  6226. position: relative;
  6227. white-space: nowrap;
  6228. text-overflow: ellipsis;
  6229. color: var(--f7-dialog-button-text-color);
  6230. font-size: var(--f7-dialog-button-font-size);
  6231. height: var(--f7-dialog-button-height);
  6232. line-height: var(--f7-dialog-button-height);
  6233. letter-spacing: var(--f7-dialog-button-letter-spacing);
  6234. text-align: var(--f7-dialog-button-text-align);
  6235. font-weight: var(--f7-dialog-button-font-weight);
  6236. text-transform: var(--f7-dialog-button-text-transform);
  6237. display: block;
  6238. cursor: pointer;
  6239. }
  6240. .dialog-button.active-state {
  6241. background-color: var(--f7-dialog-button-pressed-bg-color);
  6242. }
  6243. .dialog-no-buttons .dialog-buttons {
  6244. display: none;
  6245. }
  6246. .dialog-input-field {
  6247. position: relative;
  6248. }
  6249. input.dialog-input[type] {
  6250. box-sizing: border-box;
  6251. margin: 0;
  6252. margin-top: 15px;
  6253. border-radius: var(--f7-dialog-input-border-radius);
  6254. -webkit-appearance: none;
  6255. -moz-appearance: none;
  6256. appearance: none;
  6257. width: 100%;
  6258. display: block;
  6259. font-family: inherit;
  6260. box-shadow: none;
  6261. font-size: var(--f7-dialog-input-font-size);
  6262. height: var(--f7-dialog-input-height);
  6263. background-color: var(--f7-dialog-input-bg-color);
  6264. border: var(--f7-dialog-input-border-width) solid var(--f7-dialog-input-border-color);
  6265. }
  6266. input.dialog-input[type]::-webkit-input-placeholder {
  6267. color: var(--f7-dialog-input-placeholder-color);
  6268. }
  6269. input.dialog-input[type]::placeholder {
  6270. color: var(--f7-dialog-input-placeholder-color);
  6271. }
  6272. .dialog-input-double input.dialog-input {
  6273. border-radius: var(--f7-dialog-input-border-radius) var(--f7-dialog-input-border-radius) 0 0;
  6274. }
  6275. .dialog-input-double + .dialog-input-double input.dialog-input {
  6276. border-radius: 0 0 var(--f7-dialog-input-border-radius) var(--f7-dialog-input-border-radius);
  6277. }
  6278. .dialog-preloader .preloader {
  6279. --f7-preloader-size: var(--f7-dialog-preloader-size);
  6280. }
  6281. html.with-modal-dialog .page-content {
  6282. overflow: hidden;
  6283. -webkit-overflow-scrolling: auto;
  6284. }
  6285. .ios .dialog.modal-out {
  6286. transform: translate3d(0, -50%, 0) scale(1);
  6287. }
  6288. .ios .dialog-inner {
  6289. border-radius: var(--f7-dialog-border-radius) var(--f7-dialog-border-radius) 0 0;
  6290. }
  6291. .ios .dialog-inner:after {
  6292. content: '';
  6293. position: absolute;
  6294. background-color: var(--f7-dialog-border-divider-color);
  6295. display: block;
  6296. z-index: 15;
  6297. top: auto;
  6298. right: auto;
  6299. bottom: 0;
  6300. left: 0;
  6301. height: 1px;
  6302. width: 100%;
  6303. transform-origin: 50% 100%;
  6304. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  6305. }
  6306. .ios .dialog-title + .dialog-text {
  6307. margin-top: 5px;
  6308. }
  6309. .ios .dialog-buttons {
  6310. height: 44px;
  6311. justify-content: center;
  6312. }
  6313. .ios .dialog-button {
  6314. width: 100%;
  6315. padding: 0 5px;
  6316. -webkit-box-flex: 1;
  6317. -ms-flex: 1;
  6318. }
  6319. .ios .dialog-button:after {
  6320. content: '';
  6321. position: absolute;
  6322. background-color: var(--f7-dialog-border-divider-color);
  6323. display: block;
  6324. z-index: 15;
  6325. top: 0;
  6326. right: 0;
  6327. bottom: auto;
  6328. left: auto;
  6329. width: 1px;
  6330. height: 100%;
  6331. transform-origin: 100% 50%;
  6332. transform: scaleX(calc(1 / var(--f7-device-pixel-ratio)));
  6333. }
  6334. .ios .dialog-button:first-child {
  6335. border-radius: 0 0 0 var(--f7-dialog-border-radius);
  6336. }
  6337. .ios .dialog-button:last-child {
  6338. border-radius: 0 0 var(--f7-dialog-border-radius) 0;
  6339. }
  6340. .ios .dialog-button:last-child:after {
  6341. display: none !important;
  6342. }
  6343. .ios .dialog-button:first-child:last-child {
  6344. border-radius: 0 0 var(--f7-dialog-border-radius) var(--f7-dialog-border-radius);
  6345. }
  6346. .ios .dialog-button.dialog-button-bold {
  6347. font-weight: 500;
  6348. }
  6349. .ios .dialog-button[class*="color-"] {
  6350. --f7-dialog-button-text-color: var(--f7-theme-color);
  6351. }
  6352. .ios .dialog-buttons-vertical .dialog-buttons {
  6353. height: auto;
  6354. }
  6355. .ios .dialog-buttons-vertical .dialog-button {
  6356. border-radius: 0;
  6357. }
  6358. .ios .dialog-buttons-vertical .dialog-button:after {
  6359. content: '';
  6360. position: absolute;
  6361. background-color: var(--f7-dialog-border-divider-color);
  6362. display: block;
  6363. z-index: 15;
  6364. top: auto;
  6365. right: auto;
  6366. bottom: 0;
  6367. left: 0;
  6368. height: 1px;
  6369. width: 100%;
  6370. transform-origin: 50% 100%;
  6371. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  6372. }
  6373. .ios .dialog-buttons-vertical .dialog-button:last-child {
  6374. border-radius: 0 0 var(--f7-dialog-border-radius) var(--f7-dialog-border-radius);
  6375. }
  6376. .ios .dialog-buttons-vertical .dialog-button:last-child:after {
  6377. display: none !important;
  6378. }
  6379. .ios .dialog-no-buttons .dialog-inner {
  6380. border-radius: var(--f7-dialog-border-radius);
  6381. }
  6382. .ios .dialog-no-buttons .dialog-inner:after {
  6383. display: none !important;
  6384. }
  6385. .ios .dialog-input-field {
  6386. margin-top: 15px;
  6387. }
  6388. .ios .dialog-input {
  6389. padding: 0 5px;
  6390. }
  6391. .ios .dialog-input + .dialog-input {
  6392. margin-top: 5px;
  6393. }
  6394. .ios .dialog-input-double + .dialog-input-double {
  6395. margin-top: 0;
  6396. }
  6397. .ios .dialog-input-double + .dialog-input-double .dialog-input {
  6398. border-top: 0;
  6399. margin-top: 0;
  6400. }
  6401. .ios .dialog-preloader .dialog-title ~ .preloader,
  6402. .ios .dialog-preloader .dialog-text ~ .preloader {
  6403. margin-top: 15px;
  6404. }
  6405. .ios .dialog-progress .dialog-title ~ .progressbar,
  6406. .ios .dialog-progress .dialog-text ~ .progressbar,
  6407. .ios .dialog-progress .dialog-title ~ .progressbar-infinite,
  6408. .ios .dialog-progress .dialog-text ~ .progressbar-infinite {
  6409. margin-top: 15px;
  6410. }
  6411. .md .dialog.modal-out {
  6412. transform: translate3d(0, -50%, 0) scale(0.815);
  6413. }
  6414. .md .dialog-title + .dialog-text {
  6415. margin-top: 20px;
  6416. }
  6417. .md .dialog-text {
  6418. line-height: 1.5;
  6419. }
  6420. .md .dialog-buttons {
  6421. height: 48px;
  6422. padding: 6px 8px;
  6423. overflow: hidden;
  6424. box-sizing: border-box;
  6425. justify-content: flex-end;
  6426. }
  6427. .md .dialog-button {
  6428. border-radius: 4px;
  6429. min-width: 64px;
  6430. padding: 0 8px;
  6431. border: none;
  6432. transition-duration: 300ms;
  6433. transform: translate3d(0, 0, 0);
  6434. }
  6435. .md .dialog-button.dialog-button-bold {
  6436. font-weight: 700;
  6437. }
  6438. .md .dialog-button + .dialog-button {
  6439. margin-left: 4px;
  6440. }
  6441. .md .dialog-button[class*="color-"] {
  6442. --f7-dialog-button-text-color: var(--f7-theme-color);
  6443. }
  6444. .md .dialog-buttons-vertical .dialog-buttons {
  6445. padding: 0 0 8px 0;
  6446. }
  6447. .md .dialog-buttons-vertical .dialog-button {
  6448. margin-left: 0;
  6449. text-align: right;
  6450. height: 48px;
  6451. line-height: 48px;
  6452. border-radius: 0;
  6453. padding-left: 16px;
  6454. padding-right: 16px;
  6455. }
  6456. .md .dialog-input {
  6457. padding: 0;
  6458. transition-duration: 200ms;
  6459. position: relative;
  6460. }
  6461. .md .dialog-input + .dialog-input {
  6462. margin-top: 16px;
  6463. }
  6464. .md .dialog-preloader .dialog-title,
  6465. .md .dialog-progress .dialog-title,
  6466. .md .dialog-preloader .dialog-inner,
  6467. .md .dialog-progress .dialog-inner {
  6468. text-align: center;
  6469. }
  6470. .md .dialog-preloader .dialog-title ~ .preloader,
  6471. .md .dialog-preloader .dialog-text ~ .preloader {
  6472. margin-top: 20px;
  6473. }
  6474. .md .dialog-progress .dialog-title ~ .progressbar,
  6475. .md .dialog-progress .dialog-text ~ .progressbar,
  6476. .md .dialog-progress .dialog-title ~ .progressbar-infinite,
  6477. .md .dialog-progress .dialog-text ~ .progressbar-infinite {
  6478. margin-top: 16px;
  6479. }
  6480. .aurora .dialog.modal-out {
  6481. transform: translate3d(0, -50%, 0) scale(0.815);
  6482. }
  6483. .aurora .dialog-title + .dialog-text {
  6484. margin-top: 10px;
  6485. }
  6486. .aurora .dialog-text {
  6487. line-height: 1.5;
  6488. }
  6489. .aurora .dialog-buttons {
  6490. padding: var(--f7-dialog-inner-padding);
  6491. padding-top: 0;
  6492. overflow: hidden;
  6493. box-sizing: border-box;
  6494. justify-content: flex-end;
  6495. }
  6496. .aurora .dialog-button {
  6497. border-radius: 4px;
  6498. min-width: 64px;
  6499. padding: 0 10px;
  6500. border: none;
  6501. transition-duration: 300ms;
  6502. transform: translate3d(0, 0, 0);
  6503. background: var(--f7-theme-color);
  6504. }
  6505. .aurora .dialog-button.dialog-button-bold {
  6506. font-weight: 600;
  6507. }
  6508. .aurora .dialog-button + .dialog-button {
  6509. margin-left: 16px;
  6510. }
  6511. .aurora .dialog-button.active-state {
  6512. background-color: var(--f7-dialog-button-pressed-bg-color, var(--f7-theme-color-shade));
  6513. }
  6514. .aurora.device-desktop .dialog-button:not(.active-state):not(.no-hover):hover {
  6515. background-color: var(--f7-dialog-button-hover-bg-color, var(--f7-theme-color-tint));
  6516. }
  6517. .aurora .dialog-buttons-vertical .dialog-buttons {
  6518. display: flex;
  6519. flex-direction: column;
  6520. align-items: flex-end;
  6521. }
  6522. .aurora .dialog-buttons-vertical .dialog-button {
  6523. margin-left: 0;
  6524. flex-shrink: 0;
  6525. }
  6526. .aurora .dialog-buttons-vertical .dialog-button + .dialog-button {
  6527. margin-top: 5px;
  6528. }
  6529. .aurora .dialog-input-field {
  6530. margin-top: 10px;
  6531. }
  6532. .aurora .dialog-input-field input.dialog-input {
  6533. margin-top: 0;
  6534. }
  6535. .aurora .dialog-input {
  6536. padding: 0 4px;
  6537. transition-duration: 200ms;
  6538. position: relative;
  6539. }
  6540. .aurora .dialog-input + .dialog-input {
  6541. margin-top: 10px;
  6542. }
  6543. .aurora .dialog-input-double + .dialog-input-double {
  6544. margin-top: 0;
  6545. }
  6546. .aurora .dialog-input-double + .dialog-input-double .dialog-input {
  6547. border-top: 0;
  6548. margin-top: 0;
  6549. }
  6550. .aurora .dialog-preloader .dialog-title,
  6551. .aurora .dialog-progress .dialog-title,
  6552. .aurora .dialog-preloader .dialog-inner,
  6553. .aurora .dialog-progress .dialog-inner {
  6554. text-align: center;
  6555. }
  6556. .aurora .dialog-preloader .dialog-title ~ .preloader,
  6557. .aurora .dialog-preloader .dialog-text ~ .preloader {
  6558. margin-top: 10px;
  6559. }
  6560. .aurora .dialog-progress .dialog-title ~ .progressbar,
  6561. .aurora .dialog-progress .dialog-text ~ .progressbar,
  6562. .aurora .dialog-progress .dialog-title ~ .progressbar-infinite,
  6563. .aurora .dialog-progress .dialog-text ~ .progressbar-infinite {
  6564. margin-top: 15px;
  6565. }
  6566. /* === Popup === */
  6567. :root {
  6568. --f7-popup-border-radius: 0px;
  6569. --f7-popup-tablet-width: 630px;
  6570. --f7-popup-tablet-height: 630px;
  6571. --f7-popup-transition-duration: 400ms;
  6572. --f7-popup-push-border-radius: 10px;
  6573. --f7-popup-push-offset: var(--f7-safe-area-top);
  6574. /*
  6575. --f7-popup-tablet-border-radius: var(--f7-popup-border-radius);
  6576. */
  6577. }
  6578. .ios {
  6579. --f7-popup-tablet-border-radius: 5px;
  6580. --f7-popup-box-shadow: none;
  6581. }
  6582. .md {
  6583. --f7-popup-tablet-border-radius: 4px;
  6584. --f7-popup-box-shadow: 0px 20px 44px rgba(0, 0, 0, 0.5);
  6585. }
  6586. .aurora {
  6587. --f7-popup-tablet-border-radius: 4px;
  6588. --f7-popup-box-shadow: 0px 20px 44px rgba(0, 0, 0, 0.5);
  6589. }
  6590. .popup-backdrop {
  6591. z-index: 10500;
  6592. }
  6593. .popup {
  6594. position: absolute;
  6595. left: 0;
  6596. top: 0px;
  6597. width: 100%;
  6598. height: 100%;
  6599. display: none;
  6600. box-sizing: border-box;
  6601. transition-property: transform;
  6602. transform: translate3d(0, 100vh, 0);
  6603. background: #fff;
  6604. z-index: 11000;
  6605. overflow: hidden;
  6606. border-radius: var(--f7-popup-border-radius);
  6607. }
  6608. .theme-dark .popup,
  6609. .popup.theme-dark {
  6610. background: #000;
  6611. }
  6612. .popup.modal-in,
  6613. .popup.modal-out {
  6614. transition-duration: var(--f7-popup-transition-duration);
  6615. }
  6616. .popup.not-animated {
  6617. transition-duration: 0ms;
  6618. }
  6619. .popup.modal-in {
  6620. display: block;
  6621. transform: translate3d(0, 0, 0);
  6622. }
  6623. .popup.modal-out {
  6624. transform: translate3d(0, 100vh, 0);
  6625. }
  6626. .popup.swipe-close-to-top.modal-out {
  6627. transform: translate3d(0, -100vh, 0);
  6628. }
  6629. @media (min-width: 630px) and (min-height: 630px) {
  6630. .popup:not(.popup-tablet-fullscreen) {
  6631. --f7-safe-area-top: 0px;
  6632. --f7-safe-area-bottom: 0px;
  6633. width: var(--f7-popup-tablet-width);
  6634. height: var(--f7-popup-tablet-height);
  6635. left: 50%;
  6636. top: 50%;
  6637. margin-left: calc(-1 * var(--f7-popup-tablet-width) / 2);
  6638. margin-top: calc(-1 * var(--f7-popup-tablet-height) / 2);
  6639. transform: translate3d(0, 100vh, 0);
  6640. box-shadow: var(--f7-popup-box-shadow);
  6641. border-radius: var(--f7-popup-tablet-border-radius, var(--f7-popup-border-radius));
  6642. }
  6643. .popup:not(.popup-tablet-fullscreen).modal-in {
  6644. transform: translate3d(0, 0, 0);
  6645. }
  6646. .popup:not(.popup-tablet-fullscreen).modal-out {
  6647. transform: translate3d(0, 100vh, 0);
  6648. }
  6649. .popup:not(.popup-tablet-fullscreen).swipe-close-to-top.modal-out {
  6650. transform: translate3d(0, -100vh, 0);
  6651. }
  6652. .popup:not(.popup-tablet-fullscreen).popup-behind {
  6653. transform: translate3d(0, 0, 0) scale(0.9);
  6654. }
  6655. }
  6656. html.with-modal-popup .framework7-root > .views .page-content,
  6657. html.with-modal-popup .framework7-root > .view .page-content,
  6658. html.with-modal-popup .framework7-root > .panel .page-content {
  6659. overflow: hidden;
  6660. -webkit-overflow-scrolling: auto;
  6661. }
  6662. html.with-modal-popup-push .popup-push,
  6663. html.with-modal-popup-push-closing .popup-push {
  6664. top: calc(var(--f7-popup-push-offset) + 10px);
  6665. height: calc(100% - var(--f7-popup-push-offset) - 10px);
  6666. border-radius: var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;
  6667. --f7-safe-area-top: 0px;
  6668. }
  6669. html.with-modal-popup-push .popup-push .view,
  6670. html.with-modal-popup-push-closing .popup-push .view,
  6671. html.with-modal-popup-push .popup-push .page,
  6672. html.with-modal-popup-push-closing .popup-push .page {
  6673. --f7-safe-area-top: 0px;
  6674. }
  6675. html.with-modal-popup-push .framework7-root,
  6676. html.with-modal-popup-push-closing .framework7-root {
  6677. background: #000;
  6678. }
  6679. html.with-modal-popup-push .framework7-root > .views,
  6680. html.with-modal-popup-push-closing .framework7-root > .views,
  6681. html.with-modal-popup-push .framework7-root > .view,
  6682. html.with-modal-popup-push-closing .framework7-root > .view {
  6683. transition-duration: var(--f7-popup-transition-duration);
  6684. }
  6685. html.with-modal-popup-push.theme-dark .framework7-root > .views:after,
  6686. html.with-modal-popup-push-closing.theme-dark .framework7-root > .views:after,
  6687. html.with-modal-popup-push.theme-dark .framework7-root > .view:after,
  6688. html.with-modal-popup-push-closing.theme-dark .framework7-root > .view:after,
  6689. html.with-modal-popup-push .theme-dark .framework7-root > .views:after,
  6690. html.with-modal-popup-push-closing .theme-dark .framework7-root > .views:after,
  6691. html.with-modal-popup-push .theme-dark .framework7-root > .view:after,
  6692. html.with-modal-popup-push-closing .theme-dark .framework7-root > .view:after,
  6693. html.with-modal-popup-push .theme-dark.framework7-root > .views:after,
  6694. html.with-modal-popup-push-closing .theme-dark.framework7-root > .views:after,
  6695. html.with-modal-popup-push .theme-dark.framework7-root > .view:after,
  6696. html.with-modal-popup-push-closing .theme-dark.framework7-root > .view:after,
  6697. html.with-modal-popup-push .framework7-root > .views.theme-dark:after,
  6698. html.with-modal-popup-push-closing .framework7-root > .views.theme-dark:after,
  6699. html.with-modal-popup-push .framework7-root > .view.theme-dark:after,
  6700. html.with-modal-popup-push-closing .framework7-root > .view.theme-dark:after {
  6701. content: '';
  6702. position: absolute;
  6703. pointer-events: none;
  6704. left: 0;
  6705. top: 0;
  6706. width: 100%;
  6707. height: 100%;
  6708. background: rgba(255, 255, 255, 0.1);
  6709. z-index: 13000;
  6710. border-radius: var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;
  6711. opacity: 1;
  6712. animation: popup-dark-push-overlay-fade-in var(--f7-popup-transition-duration) forwards;
  6713. }
  6714. html.with-modal-popup-push .framework7-root > .views,
  6715. html.with-modal-popup-push .framework7-root > .view {
  6716. border-radius: var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;
  6717. transform: translate3d(0, 0, 0px) scale(var(--f7-popup-push-scale, 1)) !important;
  6718. }
  6719. html.with-modal-popup-push .popup:after {
  6720. content: '';
  6721. pointer-events: none;
  6722. position: absolute;
  6723. left: 0;
  6724. top: 0;
  6725. width: 100%;
  6726. height: 100%;
  6727. background: rgba(0, 0, 0, 0.4);
  6728. z-index: 13000;
  6729. transition-duration: var(--f7-popup-transition-duration);
  6730. border-radius: var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;
  6731. opacity: 0;
  6732. }
  6733. html.with-modal-popup-push.theme-dark .popup:after,
  6734. html.with-modal-popup-push .theme-dark .popup:after,
  6735. html.with-modal-popup-push .theme-dark.popup:after {
  6736. background: rgba(255, 255, 255, 0.05);
  6737. }
  6738. html.with-modal-popup-push .popup-behind {
  6739. transform: translate3d(0, 0px, 0px) scale(var(--f7-popup-push-scale, 1));
  6740. }
  6741. html.with-modal-popup-push .popup-behind:not(.popup-push) {
  6742. border-radius: var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;
  6743. }
  6744. html.with-modal-popup-push .popup-behind.popup-push {
  6745. transform: translate3d(0, calc(0px - var(--f7-popup-push-offset) - 10px), 0px) scale(var(--f7-popup-push-scale, 1));
  6746. }
  6747. html.with-modal-popup-push .popup-behind:after {
  6748. opacity: 1;
  6749. pointer-events: auto;
  6750. }
  6751. html.with-modal-popup-push-closing.theme-dark .framework7-root > .views:after,
  6752. html.with-modal-popup-push-closing.theme-dark .framework7-root > .view:after,
  6753. html.with-modal-popup-push-closing .theme-dark .framework7-root > .views:after,
  6754. html.with-modal-popup-push-closing .theme-dark .framework7-root > .view:after,
  6755. html.with-modal-popup-push-closing .theme-dark.framework7-root > .views:after,
  6756. html.with-modal-popup-push-closing .theme-dark.framework7-root > .view:after,
  6757. html.with-modal-popup-push-closing .framework7-root > .views.theme-dark:after,
  6758. html.with-modal-popup-push-closing .framework7-root > .view.theme-dark:after {
  6759. animation: popup-dark-push-overlay-fade-out var(--f7-popup-transition-duration) forwards;
  6760. }
  6761. @keyframes popup-dark-push-overlay-fade-in {
  6762. from {
  6763. opacity: 0;
  6764. }
  6765. to {
  6766. opacity: 1;
  6767. }
  6768. }
  6769. @keyframes popup-dark-push-overlay-fade-out {
  6770. from {
  6771. opacity: 1;
  6772. }
  6773. to {
  6774. opacity: 0;
  6775. }
  6776. }
  6777. /* === Login Screen === */
  6778. :root {
  6779. --f7-login-screen-blocks-max-width: 480px;
  6780. /*
  6781. --f7-login-screen-list-button-text-color: var(--f7-theme-color);
  6782. */
  6783. --f7-login-screen-title-text-align: center;
  6784. --f7-login-screen-title-text-color: inherit;
  6785. --f7-login-screen-title-letter-spacing: 0;
  6786. --f7-login-screen-title-font-weight: 600;
  6787. --f7-login-screen-title-font-size: 28px;
  6788. --f7-login-screen-content-bg-color: #fff;
  6789. --f7-login-screen-bg-color: #fff;
  6790. }
  6791. :root .theme-dark,
  6792. :root.theme-dark {
  6793. --f7-login-screen-bg-color: #121212;
  6794. --f7-login-screen-content-bg-color: #121212;
  6795. }
  6796. .ios {
  6797. --f7-login-screen-blocks-margin-vertical: 25px;
  6798. }
  6799. .ios .theme-dark,
  6800. .ios.theme-dark {
  6801. --f7-login-screen-bg-color: #000;
  6802. --f7-login-screen-content-bg-color: #000;
  6803. }
  6804. .md {
  6805. --f7-login-screen-blocks-margin-vertical: 24px;
  6806. }
  6807. .aurora {
  6808. --f7-login-screen-blocks-margin-vertical: 15px;
  6809. }
  6810. .login-screen {
  6811. position: absolute;
  6812. left: 0;
  6813. top: 0;
  6814. width: 100%;
  6815. height: 100%;
  6816. display: none;
  6817. box-sizing: border-box;
  6818. transition-property: transform;
  6819. transform: translate3d(0, 100vh, 0);
  6820. background: var(--f7-login-screen-bg-color);
  6821. z-index: 11000;
  6822. }
  6823. .login-screen.modal-in,
  6824. .login-screen.modal-out {
  6825. transition-duration: 400ms;
  6826. }
  6827. .login-screen.not-animated {
  6828. transition-duration: 0ms;
  6829. }
  6830. .login-screen.modal-in {
  6831. display: block;
  6832. transform: translate3d(0, 0, 0);
  6833. }
  6834. .login-screen.modal-out {
  6835. transform: translate3d(0, 100%, 0);
  6836. }
  6837. .login-screen-content,
  6838. .login-screen-page,
  6839. .login-screen .page {
  6840. background: var(--f7-login-screen-content-bg-color);
  6841. }
  6842. .login-screen-content .list-button,
  6843. .login-screen-page .list-button {
  6844. text-align: center;
  6845. color: var(--f7-login-screen-list-button-text-color, var(--f7-theme-color));
  6846. }
  6847. .login-screen-content .login-screen-title,
  6848. .login-screen-page .login-screen-title,
  6849. .login-screen-content .list,
  6850. .login-screen-page .list,
  6851. .login-screen-content .block,
  6852. .login-screen-page .block {
  6853. margin: var(--f7-login-screen-blocks-margin-vertical) auto;
  6854. }
  6855. .login-screen-content .login-screen-title,
  6856. .login-screen-page .login-screen-title,
  6857. .login-screen-content .list,
  6858. .login-screen-page .list,
  6859. .login-screen-content .block,
  6860. .login-screen-page .block,
  6861. .login-screen-content .block-footer,
  6862. .login-screen-page .block-footer,
  6863. .login-screen-content .block-header,
  6864. .login-screen-page .block-header {
  6865. max-width: var(--f7-login-screen-blocks-max-width);
  6866. }
  6867. .login-screen-content .list ul,
  6868. .login-screen-page .list ul {
  6869. background: none;
  6870. }
  6871. .login-screen-content .list ul:before,
  6872. .login-screen-page .list ul:before,
  6873. .login-screen-content .list ul:after,
  6874. .login-screen-page .list ul:after {
  6875. display: none !important;
  6876. }
  6877. .login-screen-content .block-footer,
  6878. .login-screen-page .block-footer,
  6879. .login-screen-content .block-header,
  6880. .login-screen-page .block-header {
  6881. text-align: center;
  6882. margin-left: auto;
  6883. margin-right: auto;
  6884. }
  6885. .login-screen-title {
  6886. text-align: var(--f7-login-screen-title-text-align);
  6887. font-size: var(--f7-login-screen-title-font-size);
  6888. font-weight: var(--f7-login-screen-title-font-weight);
  6889. color: var(--f7-login-screen-title-text-color);
  6890. letter-spacing: var(--f7-login-screen-title-letter-spacing);
  6891. }
  6892. .login-screen-page,
  6893. .login-screen > .view > .page,
  6894. .login-screen > .page {
  6895. display: flex;
  6896. flex-direction: column;
  6897. }
  6898. .login-screen-page .page-content,
  6899. .login-screen > .view > .page .page-content,
  6900. .login-screen > .page .page-content,
  6901. .login-screen-page .login-screen-content,
  6902. .login-screen > .view > .page .login-screen-content,
  6903. .login-screen > .page .login-screen-content {
  6904. margin-top: auto;
  6905. margin-bottom: auto;
  6906. height: auto;
  6907. max-height: 100%;
  6908. width: 100%;
  6909. }
  6910. .theme-dark .login-screen-content .list ul,
  6911. .theme-dark .login-screen-content .block-strong,
  6912. .theme-dark .login-screen-page .list ul,
  6913. .theme-dark .login-screen-page .block-strong,
  6914. .theme-dark.login-screen-page .list ul,
  6915. .theme-dark.login-screen-page .block-strong {
  6916. background-color: transparent;
  6917. }
  6918. /* === Popover === */
  6919. :root {
  6920. --f7-popover-width: 260px;
  6921. }
  6922. .ios {
  6923. --f7-popover-border-radius: 13px;
  6924. --f7-popover-box-shadow: none;
  6925. --f7-popover-actions-icon-size: 28px;
  6926. --f7-popover-bg-color: rgba(255, 255, 255, 0.95);
  6927. --f7-popover-actions-label-text-color: rgba(0, 0, 0, 0.45);
  6928. }
  6929. .ios .theme-dark,
  6930. .ios.theme-dark {
  6931. --f7-popover-bg-color: rgba(30, 30, 30, 0.95);
  6932. --f7-popover-actions-label-text-color: rgba(255, 255, 255, 0.55);
  6933. }
  6934. .md {
  6935. --f7-popover-border-radius: 4px;
  6936. --f7-popover-box-shadow: var(--f7-elevation-8);
  6937. --f7-popover-actions-icon-size: 24px;
  6938. --f7-popover-bg-color: #fff;
  6939. --f7-popover-actions-label-text-color: rgba(0, 0, 0, 0.54);
  6940. }
  6941. .md .theme-dark,
  6942. .md.theme-dark {
  6943. --f7-popover-bg-color: #1c1c1d;
  6944. --f7-popover-actions-label-text-color: rgba(255, 255, 255, 0.54);
  6945. }
  6946. .aurora {
  6947. --f7-popover-width: 200px;
  6948. --f7-popover-border-radius: 4px;
  6949. --f7-popover-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1), 0 5px 11px 0 rgba(0,0,0,0.28);
  6950. --f7-popover-actions-icon-size: 24px;
  6951. --f7-popover-bg-color: #fff;
  6952. --f7-popover-actions-label-text-color: rgba(0, 0, 0, 0.6);
  6953. }
  6954. .aurora .theme-dark,
  6955. .aurora.theme-dark {
  6956. --f7-popover-bg-color: #1c1c1d;
  6957. --f7-popover-actions-label-text-color: rgba(255, 255, 255, 0.6);
  6958. }
  6959. .popover {
  6960. width: var(--f7-popover-width);
  6961. z-index: 13500;
  6962. margin: 0;
  6963. top: 0;
  6964. opacity: 0;
  6965. left: 0;
  6966. position: absolute;
  6967. display: none;
  6968. transition-duration: 300ms;
  6969. background-color: var(--f7-popover-bg-color);
  6970. border-radius: var(--f7-popover-border-radius);
  6971. box-shadow: var(--f7-popover-box-shadow);
  6972. will-change: transform, opacity;
  6973. }
  6974. .popover .list {
  6975. margin: 0;
  6976. }
  6977. .popover .list ul {
  6978. background: none;
  6979. }
  6980. .popover .list:first-child ul:before {
  6981. display: none !important;
  6982. }
  6983. .popover .list:last-child ul:after {
  6984. display: none !important;
  6985. }
  6986. .popover .list:first-child ul {
  6987. border-radius: var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0;
  6988. }
  6989. .popover .list:first-child li:first-child,
  6990. .popover .list:first-child li:first-child a,
  6991. .popover .list:first-child li:first-child > label {
  6992. border-radius: var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0;
  6993. }
  6994. .popover .list:last-child ul {
  6995. border-radius: 0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius);
  6996. }
  6997. .popover .list:last-child li:last-child,
  6998. .popover .list:last-child li:last-child a,
  6999. .popover .list:last-child li:last-child > label {
  7000. border-radius: 0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius);
  7001. }
  7002. .popover .list:first-child:last-child li:first-child:last-child,
  7003. .popover .list:first-child:last-child li:first-child:last-child a,
  7004. .popover .list:first-child:last-child li:first-child:last-child > label,
  7005. .popover .list:first-child:last-child ul {
  7006. border-radius: var(--f7-popover-border-radius);
  7007. }
  7008. .popover .list + .list {
  7009. margin-top: var(--f7-list-margin-vertical);
  7010. }
  7011. .popover.modal-in {
  7012. opacity: 1;
  7013. }
  7014. .popover.not-animated {
  7015. transition-duration: 0ms;
  7016. }
  7017. .popover-inner {
  7018. overflow: auto;
  7019. -webkit-overflow-scrolling: touch;
  7020. }
  7021. .popover-from-actions .item-link i.icon {
  7022. width: var(--f7-popover-actions-icon-size);
  7023. height: var(--f7-popover-actions-icon-size);
  7024. font-size: var(--f7-popover-actions-icon-size);
  7025. }
  7026. .popover-from-actions-bold {
  7027. font-weight: 600;
  7028. }
  7029. .popover-from-actions-label {
  7030. line-height: 1.3;
  7031. position: relative;
  7032. display: flex;
  7033. align-items: center;
  7034. padding: var(--f7-actions-label-padding);
  7035. color: var(--f7-popover-actions-label-text-color);
  7036. font-size: var(--f7-actions-label-font-size);
  7037. justify-content: var(--f7-actions-label-justify-content);
  7038. }
  7039. .popover-from-actions-label:after {
  7040. content: '';
  7041. position: absolute;
  7042. background-color: var(--f7-list-item-border-color);
  7043. display: block;
  7044. z-index: 15;
  7045. top: auto;
  7046. right: auto;
  7047. bottom: 0;
  7048. left: 0;
  7049. height: 1px;
  7050. width: 100%;
  7051. transform-origin: 50% 100%;
  7052. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  7053. }
  7054. .popover-from-actions-label:last-child:after {
  7055. display: none !important;
  7056. }
  7057. .ios .popover {
  7058. transform: none;
  7059. transition-property: opacity;
  7060. }
  7061. .ios .popover-angle {
  7062. width: 26px;
  7063. height: 26px;
  7064. position: absolute;
  7065. left: -26px;
  7066. top: 0;
  7067. z-index: 100;
  7068. overflow: hidden;
  7069. }
  7070. .ios .popover-angle:after {
  7071. content: '';
  7072. background: var(--f7-popover-bg-color);
  7073. width: 26px;
  7074. height: 26px;
  7075. position: absolute;
  7076. left: 0;
  7077. top: 0;
  7078. border-radius: 3px;
  7079. transform: rotate(45deg);
  7080. }
  7081. .ios .popover-angle.on-left {
  7082. left: -26px;
  7083. }
  7084. .ios .popover-angle.on-left:after {
  7085. left: 19px;
  7086. top: 0;
  7087. }
  7088. .ios .popover-angle.on-right {
  7089. left: 100%;
  7090. }
  7091. .ios .popover-angle.on-right:after {
  7092. left: -19px;
  7093. top: 0;
  7094. }
  7095. .ios .popover-angle.on-top {
  7096. left: 0;
  7097. top: -26px;
  7098. }
  7099. .ios .popover-angle.on-top:after {
  7100. left: 0;
  7101. top: 19px;
  7102. }
  7103. .ios .popover-angle.on-bottom {
  7104. left: 0;
  7105. top: 100%;
  7106. }
  7107. .ios .popover-angle.on-bottom:after {
  7108. left: 0;
  7109. top: -19px;
  7110. }
  7111. .md .popover {
  7112. transform: scale(0.85, 0.6);
  7113. transition-property: opacity, transform;
  7114. }
  7115. .md .popover.modal-in {
  7116. opacity: 1;
  7117. transform: scale(1);
  7118. }
  7119. .md .popover.modal-out {
  7120. opacity: 0;
  7121. transform: scale(1);
  7122. }
  7123. .md .popover-on-top {
  7124. transform-origin: center bottom;
  7125. }
  7126. .md .popover-on-top.popover-on-right {
  7127. transform-origin: left bottom;
  7128. }
  7129. .md .popover-on-top.popover-on-left {
  7130. transform-origin: right bottom;
  7131. }
  7132. .md .popover-on-middle {
  7133. transform-origin: center center;
  7134. }
  7135. .md .popover-on-middle.popover-on-right {
  7136. transform-origin: left center;
  7137. }
  7138. .md .popover-on-middle.popover-on-left {
  7139. transform-origin: right center;
  7140. }
  7141. .md .popover-on-bottom {
  7142. transform-origin: center top;
  7143. }
  7144. .md .popover-on-bottom.popover-on-right {
  7145. transform-origin: left top;
  7146. }
  7147. .md .popover-on-bottom.popover-on-left {
  7148. transform-origin: right top;
  7149. }
  7150. .aurora .popover {
  7151. transform: none;
  7152. transition-property: opacity;
  7153. }
  7154. .aurora .popover-angle {
  7155. width: 18px;
  7156. height: 18px;
  7157. position: absolute;
  7158. left: -18px;
  7159. top: 0;
  7160. z-index: 100;
  7161. overflow: hidden;
  7162. }
  7163. .aurora .popover-angle:after {
  7164. content: '';
  7165. background: var(--f7-popover-bg-color);
  7166. width: 18px;
  7167. height: 18px;
  7168. position: absolute;
  7169. left: 0;
  7170. top: 0;
  7171. border-radius: 2px;
  7172. transform: rotate(45deg);
  7173. }
  7174. .aurora .popover-angle.on-left {
  7175. left: -18px;
  7176. }
  7177. .aurora .popover-angle.on-left:after {
  7178. left: 13px;
  7179. top: 0;
  7180. }
  7181. .aurora .popover-angle.on-right {
  7182. left: 100%;
  7183. }
  7184. .aurora .popover-angle.on-right:after {
  7185. left: -13px;
  7186. top: 0;
  7187. }
  7188. .aurora .popover-angle.on-top {
  7189. left: 0;
  7190. top: -18px;
  7191. }
  7192. .aurora .popover-angle.on-top:after {
  7193. left: 0;
  7194. top: 13px;
  7195. }
  7196. .aurora .popover-angle.on-bottom {
  7197. left: 0;
  7198. top: 100%;
  7199. }
  7200. .aurora .popover-angle.on-bottom:after {
  7201. left: 0;
  7202. top: -13px;
  7203. }
  7204. /* === Actions === */
  7205. :root {
  7206. --f7-actions-grid-button-font-size: 12px;
  7207. --f7-actions-grid-button-text-color: #757575;
  7208. }
  7209. :root .theme-dark,
  7210. :root.theme-dark {
  7211. --f7-actions-label-text-color: rgba(255, 255, 255, 0.55);
  7212. }
  7213. .ios {
  7214. --f7-actions-border-radius: 13px;
  7215. /*
  7216. --f7-actions-button-text-color: var(--f7-theme-color);
  7217. */
  7218. --f7-actions-button-padding: 0px;
  7219. --f7-actions-button-text-align: center;
  7220. --f7-actions-button-height: 57px;
  7221. --f7-actions-button-height-landscape: 44px;
  7222. --f7-actions-button-font-size: 20px;
  7223. --f7-actions-button-icon-size: 28px;
  7224. --f7-actions-button-justify-content: center;
  7225. --f7-actions-label-padding: 8px 10px;
  7226. --f7-actions-label-font-size: 13px;
  7227. --f7-actions-label-justify-content: center;
  7228. --f7-actions-group-border-color: transparent;
  7229. --f7-actions-group-margin: 8px;
  7230. --f7-actions-grid-button-icon-size: 48px;
  7231. --f7-actions-bg-color: rgba(255, 255, 255, 0.95);
  7232. --f7-actions-bg-color-rgb: 255, 255, 255;
  7233. --f7-actions-button-border-color: rgba(0, 0, 0, 0.2);
  7234. --f7-actions-button-pressed-bg-color: rgba(230, 230, 230, 0.9);
  7235. --f7-actions-button-pressed-bg-color-rgb: 230, 230, 230;
  7236. --f7-actions-label-text-color: #8a8a8a;
  7237. }
  7238. .ios .theme-dark,
  7239. .ios.theme-dark {
  7240. --f7-actions-bg-color: rgba(45, 45, 45, 0.95);
  7241. --f7-actions-bg-color-rgb: 45, 45, 45;
  7242. --f7-actions-button-border-color: rgba(255, 255, 255, 0.15);
  7243. --f7-actions-button-pressed-bg-color: rgba(50, 50, 50, 0.9);
  7244. --f7-actions-button-pressed-bg-color-rgb: 50, 50, 50;
  7245. }
  7246. .md {
  7247. --f7-actions-border-radius: 0px;
  7248. --f7-actions-button-border-color: transparent;
  7249. --f7-actions-button-padding: 0 16px;
  7250. --f7-actions-button-text-align: left;
  7251. --f7-actions-button-height: 48px;
  7252. --f7-actions-button-height-landscape: 48px;
  7253. --f7-actions-button-font-size: 16px;
  7254. --f7-actions-button-icon-size: 24px;
  7255. --f7-actions-button-justify-content: space-between;
  7256. --f7-actions-label-padding: 12px 16px;
  7257. --f7-actions-label-font-size: 16px;
  7258. --f7-actions-label-justify-content: flex-start;
  7259. --f7-actions-group-margin: 0px;
  7260. --f7-actions-grid-button-icon-size: 48px;
  7261. --f7-actions-bg-color: #fff;
  7262. --f7-actions-button-text-color: rgba(0, 0, 0, 0.87);
  7263. --f7-actions-button-pressed-bg-color: #e5e5e5;
  7264. --f7-actions-label-text-color: rgba(0, 0, 0, 0.54);
  7265. --f7-actions-group-border-color: rgba(0, 0, 0, 0.12);
  7266. }
  7267. .md .theme-dark,
  7268. .md.theme-dark {
  7269. --f7-actions-bg-color: #202020;
  7270. --f7-actions-button-text-color: #fff;
  7271. --f7-actions-button-pressed-bg-color: #2e2e2e;
  7272. --f7-actions-group-border-color: rgba(255, 255, 255, 0.15);
  7273. }
  7274. .aurora {
  7275. --f7-actions-border-radius: 4px;
  7276. --f7-actions-button-padding: 0 16px;
  7277. --f7-actions-button-text-align: center;
  7278. --f7-actions-button-height: 32px;
  7279. --f7-actions-button-height-landscape: 32px;
  7280. --f7-actions-button-font-size: 14px;
  7281. --f7-actions-button-icon-size: 18px;
  7282. --f7-actions-button-justify-content: space-between;
  7283. --f7-actions-label-padding: 10px 16px;
  7284. --f7-actions-label-font-size: 12px;
  7285. --f7-actions-label-justify-content: center;
  7286. --f7-actions-group-margin: 16px;
  7287. --f7-actions-grid-button-icon-size: 32px;
  7288. --f7-actions-bg-color: #fff;
  7289. --f7-actions-button-border-color: rgba(0, 0, 0, 0.12);
  7290. /*
  7291. --f7-actions-button-text-color: var(--f7-theme-color);
  7292. */
  7293. --f7-actions-button-pressed-bg-color: #e5e5e5;
  7294. --f7-actions-label-text-color: rgba(0, 0, 0, 0.5);
  7295. --f7-actions-group-border-color: rgba(0, 0, 0, 0.1);
  7296. }
  7297. .aurora .theme-dark,
  7298. .aurora.theme-dark {
  7299. --f7-actions-bg-color: #202020;
  7300. --f7-actions-button-text-color: #fff;
  7301. --f7-actions-button-border-color: rgba(255, 255, 255, 0.15);
  7302. --f7-actions-button-pressed-bg-color: #2e2e2e;
  7303. --f7-actions-group-border-color: rgba(255, 255, 255, 0.15);
  7304. }
  7305. .actions-modal {
  7306. position: absolute;
  7307. left: 0;
  7308. bottom: 0;
  7309. z-index: 13500;
  7310. width: 100%;
  7311. transform: translate3d(0, 100%, 0);
  7312. display: none;
  7313. max-height: 100%;
  7314. overflow: auto;
  7315. -webkit-overflow-scrolling: touch;
  7316. transition-property: transform;
  7317. will-change: transform;
  7318. }
  7319. .actions-modal.modal-in,
  7320. .actions-modal.modal-out {
  7321. transition-duration: 300ms;
  7322. }
  7323. .actions-modal.not-animated {
  7324. transition-duration: 0ms;
  7325. }
  7326. .actions-modal.modal-in {
  7327. transform: translate3d(0, calc(-1 * var(--f7-safe-area-bottom)), 0);
  7328. }
  7329. .actions-modal.modal-out {
  7330. z-index: 13499;
  7331. transform: translate3d(0, 100%, 0);
  7332. }
  7333. @media (min-width: 496px) {
  7334. .actions-modal {
  7335. width: 480px;
  7336. left: 50%;
  7337. margin-left: -240px;
  7338. }
  7339. }
  7340. @media (orientation: landscape) {
  7341. .actions-modal {
  7342. --f7-actions-button-height: var(--f7-actions-button-height-landscape);
  7343. }
  7344. }
  7345. .actions-group {
  7346. overflow: hidden;
  7347. position: relative;
  7348. margin: var(--f7-actions-group-margin);
  7349. border-radius: var(--f7-actions-border-radius);
  7350. transform: translate3d(0, 0, 0);
  7351. }
  7352. .actions-group:after {
  7353. content: '';
  7354. position: absolute;
  7355. background-color: var(--f7-actions-group-border-color);
  7356. display: block;
  7357. z-index: 15;
  7358. top: auto;
  7359. right: auto;
  7360. bottom: 0;
  7361. left: 0;
  7362. height: 1px;
  7363. width: 100%;
  7364. transform-origin: 50% 100%;
  7365. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  7366. }
  7367. .actions-group:last-child:after {
  7368. display: none !important;
  7369. }
  7370. .actions-button,
  7371. .actions-label {
  7372. width: 100%;
  7373. font-weight: normal;
  7374. margin: 0;
  7375. box-sizing: border-box;
  7376. display: block;
  7377. position: relative;
  7378. overflow: hidden;
  7379. text-align: var(--f7-actions-button-text-align);
  7380. background: var(--f7-actions-bg-color);
  7381. }
  7382. @supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  7383. .ios-translucent-modals .actions-button,
  7384. .ios-translucent-modals .actions-label {
  7385. background-color: rgba(var(--f7-actions-bg-color-rgb), 0.8);
  7386. -webkit-backdrop-filter: saturate(180%) blur(20px);
  7387. backdrop-filter: saturate(180%) blur(20px);
  7388. }
  7389. }
  7390. .actions-button:after,
  7391. .actions-label:after {
  7392. content: '';
  7393. position: absolute;
  7394. background-color: var(--f7-actions-button-border-color);
  7395. display: block;
  7396. z-index: 15;
  7397. top: auto;
  7398. right: auto;
  7399. bottom: 0;
  7400. left: 0;
  7401. height: 1px;
  7402. width: 100%;
  7403. transform-origin: 50% 100%;
  7404. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  7405. }
  7406. .actions-button:first-child,
  7407. .actions-label:first-child {
  7408. border-radius: var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;
  7409. }
  7410. .actions-button:last-child,
  7411. .actions-label:last-child {
  7412. border-radius: 0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius);
  7413. }
  7414. .actions-button:last-child:after,
  7415. .actions-label:last-child:after {
  7416. display: none !important;
  7417. }
  7418. .actions-button:first-child:last-child,
  7419. .actions-label:first-child:last-child {
  7420. border-radius: var(--f7-actions-border-radius);
  7421. }
  7422. .actions-button a,
  7423. .actions-label a {
  7424. text-decoration: none;
  7425. color: inherit;
  7426. display: block;
  7427. }
  7428. .actions-button b,
  7429. .actions-label b,
  7430. .actions-button.actions-button-bold,
  7431. .actions-label.actions-button-bold {
  7432. font-weight: 600;
  7433. }
  7434. .actions-button {
  7435. cursor: pointer;
  7436. display: flex;
  7437. color: var(--f7-actions-button-text-color, var(--f7-theme-color));
  7438. font-size: var(--f7-actions-button-font-size);
  7439. height: var(--f7-actions-button-height);
  7440. line-height: var(--f7-actions-button-height);
  7441. padding: var(--f7-actions-button-padding);
  7442. justify-content: var(--f7-actions-button-justify-content);
  7443. z-index: 10;
  7444. }
  7445. .actions-button.active-state {
  7446. background-color: var(--f7-actions-button-pressed-bg-color) !important;
  7447. }
  7448. .actions-button[class*="color-"] {
  7449. color: var(--f7-theme-color);
  7450. }
  7451. @supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  7452. .ios-translucent-modals .actions-button.active-state {
  7453. background-color: rgba(var(--f7-actions-button-pressed-bg-color-rgb), 0.8);
  7454. -webkit-backdrop-filter: saturate(180%) blur(20px);
  7455. backdrop-filter: saturate(180%) blur(20px);
  7456. }
  7457. }
  7458. .actions-button-media {
  7459. flex-shrink: 0;
  7460. display: flex;
  7461. align-items: center;
  7462. }
  7463. .actions-button-media i.icon {
  7464. width: var(--f7-actions-button-icon-size);
  7465. height: var(--f7-actions-button-icon-size);
  7466. font-size: var(--f7-actions-button-icon-size);
  7467. }
  7468. .actions-button a,
  7469. .actions-button-text {
  7470. position: relative;
  7471. overflow: hidden;
  7472. white-space: nowrap;
  7473. text-overflow: ellipsis;
  7474. }
  7475. .actions-button-text {
  7476. width: 100%;
  7477. flex-shrink: 1;
  7478. text-align: var(--f7-actions-button-text-align);
  7479. }
  7480. .actions-label {
  7481. line-height: 1.3;
  7482. display: flex;
  7483. align-items: center;
  7484. font-size: var(--f7-actions-label-font-size);
  7485. color: var(--f7-actions-label-text-color);
  7486. padding: var(--f7-actions-label-padding);
  7487. justify-content: var(--f7-actions-label-justify-content);
  7488. min-height: var(--f7-actions-label-min-height, var(--f7-actions-button-height));
  7489. }
  7490. .actions-label[class*=" color-"] {
  7491. --f7-actions-label-text-color: var(--f7-theme-color);
  7492. }
  7493. .actions-grid .actions-group {
  7494. display: flex;
  7495. flex-wrap: wrap;
  7496. justify-content: flex-start;
  7497. border-radius: 0;
  7498. background: var(--f7-actions-bg-color);
  7499. margin-top: 0;
  7500. }
  7501. .actions-grid .actions-group:first-child {
  7502. border-radius: var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;
  7503. }
  7504. .actions-grid .actions-group:last-child {
  7505. border-radius: 0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius);
  7506. }
  7507. .actions-grid .actions-group:first-child:last-child {
  7508. border-radius: var(--f7-actions-border-radius);
  7509. }
  7510. .actions-grid .actions-group:not(:last-child) {
  7511. margin-bottom: 0;
  7512. }
  7513. .actions-grid .actions-button,
  7514. .actions-grid .actions-label {
  7515. border-radius: 0 !important;
  7516. background: none;
  7517. }
  7518. .actions-grid .actions-button {
  7519. width: 33.33333333%;
  7520. display: block;
  7521. color: var(--f7-actions-grid-button-text-color);
  7522. height: auto;
  7523. line-height: 1;
  7524. padding: 16px;
  7525. }
  7526. .actions-grid .actions-button:after {
  7527. display: none !important;
  7528. }
  7529. .actions-grid .actions-button-media {
  7530. margin-left: auto !important;
  7531. margin-right: auto !important;
  7532. width: var(--f7-actions-grid-button-icon-size);
  7533. height: var(--f7-actions-grid-button-icon-size);
  7534. }
  7535. .actions-grid .actions-button-media i.icon {
  7536. width: var(--f7-actions-grid-button-icon-size);
  7537. height: var(--f7-actions-grid-button-icon-size);
  7538. font-size: var(--f7-actions-grid-button-icon-size);
  7539. }
  7540. .actions-grid .actions-button-text {
  7541. margin-left: 0 !important;
  7542. text-align: center !important;
  7543. margin-top: 8px;
  7544. line-height: 1.33em;
  7545. height: 1.33em;
  7546. font-size: var(--f7-actions-grid-button-font-size);
  7547. }
  7548. @supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  7549. .ios-translucent-modals .actions-grid .actions-group {
  7550. background-color: rgba(var(--f7-actions-bg-color-rgb), 0.8);
  7551. -webkit-backdrop-filter: saturate(180%) blur(20px);
  7552. backdrop-filter: saturate(180%) blur(20px);
  7553. }
  7554. }
  7555. .ios .actions-button-media {
  7556. margin-left: 16px;
  7557. }
  7558. .ios .actions-button-media + .actions-button-text {
  7559. text-align: left;
  7560. margin-left: 16px;
  7561. }
  7562. .md .actions-button {
  7563. transition-duration: 300ms;
  7564. }
  7565. .md .actions-button-media {
  7566. min-width: 40px;
  7567. }
  7568. .md .actions-button-media + .actions-button-text {
  7569. margin-left: 16px;
  7570. }
  7571. .aurora .actions-button-media {
  7572. margin-left: 16px;
  7573. }
  7574. .aurora .actions-button-media + .actions-button-text {
  7575. text-align: left;
  7576. margin-left: 16px;
  7577. }
  7578. /* === Sheet Modal === */
  7579. :root {
  7580. --f7-sheet-height: 260px;
  7581. --f7-sheet-border-color: transparent;
  7582. --f7-sheet-transition-duration: 300ms;
  7583. --f7-sheet-push-border-radius: 10px;
  7584. --f7-sheet-push-offset: var(--f7-safe-area-top);
  7585. --f7-sheet-bg-color: #fff;
  7586. }
  7587. :root .theme-dark,
  7588. :root.theme-dark {
  7589. --f7-sheet-bg-color: #202020;
  7590. }
  7591. .ios {
  7592. --f7-sheet-border-color: var(--f7-bars-border-color);
  7593. }
  7594. .sheet-backdrop {
  7595. z-index: 11000;
  7596. }
  7597. .sheet-modal {
  7598. position: absolute;
  7599. left: 0;
  7600. bottom: 0;
  7601. width: 100%;
  7602. height: var(--f7-sheet-height);
  7603. display: none;
  7604. box-sizing: border-box;
  7605. transition-property: transform;
  7606. transform: translate3d(0, 100%, 0);
  7607. background: var(--f7-sheet-bg-color);
  7608. z-index: 12500;
  7609. will-change: transform, opacity;
  7610. }
  7611. .sheet-modal.modal-in,
  7612. .sheet-modal.modal-out {
  7613. transition-duration: var(--f7-sheet-transition-duration);
  7614. }
  7615. .sheet-modal.not-animated {
  7616. transition-duration: 0ms;
  7617. }
  7618. .sheet-modal.modal-in {
  7619. display: block;
  7620. transform: translate3d(0, 0, 0);
  7621. }
  7622. .sheet-modal.modal-in-swipe-step {
  7623. display: block;
  7624. transform: translate3d(0, var(--f7-sheet-swipe-step, 0), 0);
  7625. }
  7626. .sheet-modal.modal-out {
  7627. transform: translate3d(0, 100%, 0);
  7628. }
  7629. .sheet-modal .sheet-modal-inner {
  7630. height: 100%;
  7631. position: relative;
  7632. overflow: hidden;
  7633. }
  7634. .sheet-modal .toolbar {
  7635. --f7-safe-area-bottom: 0px;
  7636. position: relative;
  7637. width: 100%;
  7638. }
  7639. .sheet-modal .toolbar:after,
  7640. .sheet-modal .toolbar:before {
  7641. display: none;
  7642. }
  7643. .sheet-modal .toolbar + .sheet-modal-inner {
  7644. height: calc(100% - var(--f7-toolbar-height));
  7645. }
  7646. .sheet-modal .toolbar + .sheet-modal-inner .page-content {
  7647. --f7-page-toolbar-top-offset: 0px;
  7648. --f7-page-toolbar-bottom-offset: 0px;
  7649. }
  7650. .sheet-modal-top:after {
  7651. content: '';
  7652. position: absolute;
  7653. background-color: var(--f7-sheet-border-color);
  7654. display: block;
  7655. z-index: 15;
  7656. top: auto;
  7657. right: auto;
  7658. bottom: 0;
  7659. left: 0;
  7660. height: 1px;
  7661. width: 100%;
  7662. transform-origin: 50% 100%;
  7663. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  7664. }
  7665. .sheet-modal-top:after {
  7666. z-index: 700;
  7667. -webkit-backface-visibility: hidden;
  7668. backface-visibility: hidden;
  7669. transform-style: preserve-3d;
  7670. }
  7671. .sheet-modal-bottom,
  7672. .sheet-modal:not(.sheet-modal-top) {
  7673. --f7-safe-area-top: 0px;
  7674. }
  7675. .sheet-modal-bottom:before,
  7676. .sheet-modal:not(.sheet-modal-top):before {
  7677. content: '';
  7678. position: absolute;
  7679. background-color: var(--f7-sheet-border-color);
  7680. display: block;
  7681. z-index: 15;
  7682. top: 0;
  7683. right: auto;
  7684. bottom: auto;
  7685. left: 0;
  7686. height: 1px;
  7687. width: 100%;
  7688. transform-origin: 50% 0%;
  7689. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  7690. }
  7691. .sheet-modal-bottom:before,
  7692. .sheet-modal:not(.sheet-modal-top):before {
  7693. z-index: 700;
  7694. -webkit-backface-visibility: hidden;
  7695. backface-visibility: hidden;
  7696. transform-style: preserve-3d;
  7697. }
  7698. .sheet-modal-top {
  7699. --f7-safe-area-bottom: 0px;
  7700. bottom: auto;
  7701. top: 0;
  7702. transform: translate3d(0, -100%, 0);
  7703. }
  7704. .sheet-modal-top.modal-out {
  7705. transform: translate3d(0, -100%, 0);
  7706. }
  7707. .sheet-modal-top .toolbar-bottom {
  7708. position: absolute;
  7709. }
  7710. .sheet-modal-top .page-content {
  7711. padding-top: var(--f7-safe-area-top);
  7712. }
  7713. html.with-modal-sheet-push .sheet-modal-push,
  7714. html.with-modal-sheet-push-closing .sheet-modal-push {
  7715. --f7-sheet-border-color: transparent;
  7716. border-radius: var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius) 0 0;
  7717. overflow: hidden;
  7718. }
  7719. html.with-modal-sheet-push .sheet-modal-push .view,
  7720. html.with-modal-sheet-push-closing .sheet-modal-push .view,
  7721. html.with-modal-sheet-push .sheet-modal-push .page,
  7722. html.with-modal-sheet-push-closing .sheet-modal-push .page {
  7723. --f7-safe-area-top: 0px;
  7724. }
  7725. html.with-modal-sheet-push .sheet-modal-push.sheet-modal-top,
  7726. html.with-modal-sheet-push-closing .sheet-modal-push.sheet-modal-top {
  7727. border-radius: 0 0 var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius);
  7728. }
  7729. html.with-modal-sheet-push .framework7-root,
  7730. html.with-modal-sheet-push-closing .framework7-root {
  7731. background: #000;
  7732. }
  7733. html.with-modal-sheet-push .framework7-root > .views,
  7734. html.with-modal-sheet-push-closing .framework7-root > .views,
  7735. html.with-modal-sheet-push .framework7-root > .view,
  7736. html.with-modal-sheet-push-closing .framework7-root > .view {
  7737. transition-duration: var(--f7-sheet-transition-duration);
  7738. }
  7739. html.with-modal-sheet-push.theme-dark .framework7-root > .views:after,
  7740. html.with-modal-sheet-push-closing.theme-dark .framework7-root > .views:after,
  7741. html.with-modal-sheet-push.theme-dark .framework7-root > .view:after,
  7742. html.with-modal-sheet-push-closing.theme-dark .framework7-root > .view:after,
  7743. html.with-modal-sheet-push .theme-dark .framework7-root > .views:after,
  7744. html.with-modal-sheet-push-closing .theme-dark .framework7-root > .views:after,
  7745. html.with-modal-sheet-push .theme-dark .framework7-root > .view:after,
  7746. html.with-modal-sheet-push-closing .theme-dark .framework7-root > .view:after,
  7747. html.with-modal-sheet-push .theme-dark.framework7-root > .views:after,
  7748. html.with-modal-sheet-push-closing .theme-dark.framework7-root > .views:after,
  7749. html.with-modal-sheet-push .theme-dark.framework7-root > .view:after,
  7750. html.with-modal-sheet-push-closing .theme-dark.framework7-root > .view:after,
  7751. html.with-modal-sheet-push .framework7-root > .views.theme-dark:after,
  7752. html.with-modal-sheet-push-closing .framework7-root > .views.theme-dark:after,
  7753. html.with-modal-sheet-push .framework7-root > .view.theme-dark:after,
  7754. html.with-modal-sheet-push-closing .framework7-root > .view.theme-dark:after {
  7755. content: '';
  7756. position: absolute;
  7757. pointer-events: none;
  7758. left: 0;
  7759. top: 0;
  7760. width: 100%;
  7761. height: 100%;
  7762. background: rgba(255, 255, 255, 0.1);
  7763. z-index: 13000;
  7764. border-radius: var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius) 0 0;
  7765. opacity: 1;
  7766. animation: sheet-dark-push-overlay-fade-in var(--f7-sheet-transition-duration) forwards;
  7767. }
  7768. html.with-modal-sheet-push .framework7-root > .views,
  7769. html.with-modal-sheet-push .framework7-root > .view {
  7770. border-radius: var(--f7-sheet-push-border-radius);
  7771. transform: translate3d(0, 0, 0px) scale(var(--f7-sheet-push-scale, 1)) !important;
  7772. }
  7773. html.with-modal-sheet-push-closing.theme-dark .framework7-root > .views:after,
  7774. html.with-modal-sheet-push-closing.theme-dark .framework7-root > .view:after,
  7775. html.with-modal-sheet-push-closing .theme-dark .framework7-root > .views:after,
  7776. html.with-modal-sheet-push-closing .theme-dark .framework7-root > .view:after,
  7777. html.with-modal-sheet-push-closing .theme-dark.framework7-root > .views:after,
  7778. html.with-modal-sheet-push-closing .theme-dark.framework7-root > .view:after,
  7779. html.with-modal-sheet-push-closing .framework7-root > .views.theme-dark:after,
  7780. html.with-modal-sheet-push-closing .framework7-root > .view.theme-dark:after {
  7781. animation: sheet-dark-push-overlay-fade-out var(--f7-sheet-transition-duration) forwards;
  7782. }
  7783. @keyframes sheet-dark-push-overlay-fade-in {
  7784. from {
  7785. opacity: 0;
  7786. }
  7787. to {
  7788. opacity: 1;
  7789. }
  7790. }
  7791. @keyframes sheet-dark-push-overlay-fade-out {
  7792. from {
  7793. opacity: 1;
  7794. }
  7795. to {
  7796. opacity: 0;
  7797. }
  7798. }
  7799. .md .sheet-modal .toolbar a.link:not(.tab-link) {
  7800. flex-shrink: 0;
  7801. }
  7802. /* === Toast === */
  7803. :root {
  7804. --f7-toast-text-color: #fff;
  7805. --f7-toast-font-size: 14px;
  7806. --f7-toast-icon-size: 48px;
  7807. --f7-toast-max-width: 568px;
  7808. }
  7809. .ios {
  7810. --f7-toast-bg-color: rgba(0, 0, 0, 0.75);
  7811. --f7-toast-bg-color-rgb: 0, 0, 0;
  7812. --f7-toast-padding-horizontal: 16px;
  7813. --f7-toast-padding-vertical: 12px;
  7814. --f7-toast-border-radius: 8px;
  7815. --f7-toast-button-min-width: 64px;
  7816. }
  7817. .md {
  7818. --f7-toast-bg-color: #323232;
  7819. --f7-toast-padding-horizontal: 24px;
  7820. --f7-toast-padding-vertical: 14px;
  7821. --f7-toast-border-radius: 4px;
  7822. --f7-toast-button-min-width: 64px;
  7823. }
  7824. .aurora {
  7825. --f7-toast-bg-color: rgba(0, 0, 0, 0.85);
  7826. --f7-toast-padding-horizontal: 10px;
  7827. --f7-toast-padding-vertical: 10px;
  7828. --f7-toast-border-radius: 4px;
  7829. --f7-toast-button-min-width: 32px;
  7830. }
  7831. .toast {
  7832. --f7-touch-ripple-color: var(--f7-touch-ripple-white);
  7833. transition-property: transform, opacity;
  7834. position: absolute;
  7835. max-width: var(--f7-toast-max-width);
  7836. z-index: 20000;
  7837. color: var(--f7-toast-text-color);
  7838. font-size: var(--f7-toast-font-size);
  7839. box-sizing: border-box;
  7840. background-color: var(--f7-toast-bg-color);
  7841. opacity: 0;
  7842. }
  7843. @supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  7844. .ios-translucent-modals .toast {
  7845. background-color: rgba(var(--f7-toast-bg-color-rgb), 0.8);
  7846. -webkit-backdrop-filter: saturate(180%) blur(20px);
  7847. backdrop-filter: saturate(180%) blur(20px);
  7848. }
  7849. }
  7850. .toast.modal-in {
  7851. opacity: 1;
  7852. }
  7853. .toast .toast-content {
  7854. display: flex;
  7855. justify-content: space-between;
  7856. align-items: center;
  7857. box-sizing: border-box;
  7858. padding: var(--f7-toast-padding-vertical) var(--f7-toast-padding-horizontal);
  7859. }
  7860. .toast .toast-text {
  7861. line-height: 20px;
  7862. flex-shrink: 1;
  7863. min-width: 0;
  7864. }
  7865. .toast .toast-button {
  7866. flex-shrink: 0;
  7867. min-width: var(--f7-toast-button-min-width);
  7868. margin-top: -8px;
  7869. margin-bottom: -8px;
  7870. }
  7871. .toast.toast-with-icon .toast-content {
  7872. display: block;
  7873. text-align: center;
  7874. }
  7875. .toast.toast-with-icon .toast-text {
  7876. text-align: center;
  7877. }
  7878. .toast.toast-with-icon .toast-icon .f7-icons,
  7879. .toast.toast-with-icon .toast-icon .material-icons {
  7880. font-size: var(--f7-toast-icon-size);
  7881. }
  7882. .toast.toast-center {
  7883. top: 50%;
  7884. }
  7885. .toast.toast-top {
  7886. margin-top: var(--f7-safe-area-top);
  7887. }
  7888. .ios .toast {
  7889. transition-duration: 300ms;
  7890. width: 100%;
  7891. left: 0;
  7892. }
  7893. .ios .toast.toast-top {
  7894. top: 0;
  7895. transform: translate3d(0, -100%, 0);
  7896. }
  7897. .ios .toast.toast-top.modal-in {
  7898. transform: translate3d(0, 0%, 0);
  7899. }
  7900. .ios .toast.toast-center {
  7901. width: auto;
  7902. left: 50%;
  7903. border-radius: var(--f7-toast-border-radius);
  7904. transform: translate3d(-50%, -50%, 0);
  7905. }
  7906. .ios .toast.toast-center.modal-in {
  7907. transform: translate3d(-50%, -50%, 0);
  7908. }
  7909. .ios .toast.toast-bottom {
  7910. bottom: 0;
  7911. transform: translate3d(0, 100%, 0);
  7912. }
  7913. .ios .toast.toast-bottom.modal-in {
  7914. transform: translate3d(0, 0%, 0);
  7915. }
  7916. @media (max-width: 568px) {
  7917. .ios .toast.toast-top {
  7918. margin-top: 0;
  7919. }
  7920. .ios .toast.toast-top .toast-content {
  7921. padding-top: calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-top));
  7922. }
  7923. .ios .toast.toast-bottom .toast-content {
  7924. padding-bottom: calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-bottom));
  7925. }
  7926. }
  7927. @media (min-width: 569px) {
  7928. .ios .toast {
  7929. left: 50%;
  7930. margin-left: calc(-1 * var(--f7-toast-max-width) / 2);
  7931. border-radius: var(--f7-toast-border-radius);
  7932. }
  7933. .ios .toast.toast-top {
  7934. top: 16px;
  7935. }
  7936. .ios .toast.toast-center {
  7937. margin-left: 0;
  7938. }
  7939. .ios .toast.toast-bottom {
  7940. margin-bottom: calc(16px + var(--f7-safe-area-bottom));
  7941. }
  7942. }
  7943. @media (min-width: 1024px) {
  7944. .ios .toast {
  7945. margin-left: 0;
  7946. width: auto;
  7947. }
  7948. .ios .toast.toast-horizontal-left {
  7949. left: 16px;
  7950. }
  7951. .ios .toast.toast-horizontal-right {
  7952. left: auto;
  7953. right: 16px;
  7954. }
  7955. .ios .toast.toast-horizontal-center {
  7956. left: 50%;
  7957. width: var(--f7-toast-max-width);
  7958. margin-left: calc(-1 * var(--f7-toast-max-width) / 2);
  7959. }
  7960. }
  7961. .ios .toast-button {
  7962. margin-right: 16px;
  7963. margin-left: calc(-1 * var(--f7-button-padding-horizontal));
  7964. }
  7965. .md .toast {
  7966. transition-duration: 200ms;
  7967. border-radius: var(--f7-toast-border-radius);
  7968. width: calc(100% - 16px);
  7969. transform: scale(0.9);
  7970. left: 8px;
  7971. }
  7972. .md .toast.modal-in {
  7973. transform: scale(1);
  7974. }
  7975. .md .toast.modal-out {
  7976. transform: scale(1);
  7977. }
  7978. .md .toast.toast-top {
  7979. top: 8px;
  7980. }
  7981. .md .toast.toast-center {
  7982. left: 50%;
  7983. width: auto;
  7984. transform: scale(0.9) translate3d(-55%, -55%, 0);
  7985. }
  7986. .md .toast.toast-center.modal-in {
  7987. transform: scale(1) translate3d(-50%, -50%, 0);
  7988. }
  7989. .md .toast.toast-center.modal-out {
  7990. transform: scale(1) translate3d(-50%, -50%, 0);
  7991. }
  7992. .md .toast.toast-bottom {
  7993. bottom: calc(8px + var(--f7-safe-area-bottom));
  7994. }
  7995. @media (min-width: 584px) {
  7996. .md .toast {
  7997. left: 50%;
  7998. margin-left: calc(-1 * var(--f7-toast-max-width) / 2);
  7999. }
  8000. .md .toast.toast-center {
  8001. margin-left: 0;
  8002. }
  8003. }
  8004. @media (min-width: 1024px) {
  8005. .md .toast {
  8006. margin-left: 0;
  8007. width: auto;
  8008. }
  8009. .md .toast.toast-horizontal-left {
  8010. left: 24px;
  8011. }
  8012. .md .toast.toast-horizontal-right {
  8013. left: auto;
  8014. right: 24px;
  8015. }
  8016. .md .toast.toast-horizontal-center {
  8017. left: 50%;
  8018. width: var(--f7-toast-max-width);
  8019. margin-left: calc(-1 * var(--f7-toast-max-width) / 2);
  8020. }
  8021. .md .toast.toast-bottom {
  8022. bottom: calc(24px + var(--f7-safe-area-bottom));
  8023. }
  8024. .md .toast.toast-top {
  8025. top: 24px;
  8026. }
  8027. }
  8028. .md .toast-button {
  8029. margin-right: 16px;
  8030. margin-left: -8px;
  8031. }
  8032. .aurora .toast {
  8033. transition-duration: 200ms;
  8034. border-radius: var(--f7-toast-border-radius);
  8035. left: 10px;
  8036. width: calc(100% - 20px);
  8037. transform: scale(0.9);
  8038. }
  8039. .aurora .toast.modal-in {
  8040. transform: scale(1);
  8041. }
  8042. .aurora .toast.modal-out {
  8043. transform: scale(1);
  8044. }
  8045. .aurora .toast.toast-top {
  8046. top: 10px;
  8047. }
  8048. .aurora .toast.toast-center {
  8049. left: 50%;
  8050. width: auto;
  8051. transform: scale(0.9) translate3d(-55%, -55%, 0);
  8052. }
  8053. .aurora .toast.toast-center.modal-in {
  8054. transform: scale(1) translate3d(-50%, -50%, 0);
  8055. }
  8056. .aurora .toast.toast-center.modal-out {
  8057. transform: scale(1) translate3d(-50%, -50%, 0);
  8058. }
  8059. .aurora .toast.toast-bottom {
  8060. bottom: calc(10px + var(--f7-safe-area-bottom));
  8061. }
  8062. @media (min-width: 584px) {
  8063. .aurora .toast {
  8064. left: 50%;
  8065. margin-left: calc(-1 * var(--f7-toast-max-width) / 2);
  8066. }
  8067. .aurora .toast.toast-center {
  8068. margin-left: 0;
  8069. }
  8070. }
  8071. @media (min-width: 1024px) {
  8072. .aurora .toast {
  8073. margin-left: 0;
  8074. width: auto;
  8075. }
  8076. .aurora .toast.toast-horizontal-left {
  8077. left: 10px;
  8078. }
  8079. .aurora .toast.toast-horizontal-right {
  8080. left: auto;
  8081. right: 10px;
  8082. }
  8083. .aurora .toast.toast-horizontal-center {
  8084. left: 50%;
  8085. width: var(--f7-toast-max-width);
  8086. margin-left: calc(-1 * var(--f7-toast-max-width) / 2);
  8087. }
  8088. }
  8089. .aurora .toast-button {
  8090. margin-right: 10px;
  8091. }
  8092. /* === Preloader === */
  8093. :root {
  8094. --f7-preloader-modal-padding: 8px;
  8095. --f7-preloader-modal-bg-color: rgba(0, 0, 0, 0.8);
  8096. }
  8097. .ios {
  8098. --f7-preloader-color: #6c6c6c;
  8099. --f7-preloader-size: 20px;
  8100. --f7-preloader-modal-preloader-size: 34px;
  8101. --f7-preloader-modal-border-radius: 5px;
  8102. }
  8103. .md {
  8104. --f7-preloader-color: #757575;
  8105. --f7-preloader-size: 32px;
  8106. --f7-preloader-modal-preloader-size: 32px;
  8107. --f7-preloader-modal-border-radius: 4px;
  8108. }
  8109. .aurora {
  8110. --f7-preloader-color: #757575;
  8111. --f7-preloader-size: 24px;
  8112. --f7-preloader-modal-preloader-size: 24px;
  8113. --f7-preloader-modal-border-radius: 4px;
  8114. }
  8115. .preloader {
  8116. display: inline-block;
  8117. vertical-align: middle;
  8118. width: var(--f7-preloader-size);
  8119. height: var(--f7-preloader-size);
  8120. font-size: 0;
  8121. position: relative;
  8122. }
  8123. /* === Preloader Modal === */
  8124. .preloader-backdrop {
  8125. visibility: visible;
  8126. opacity: 0;
  8127. background: none;
  8128. z-index: 14000;
  8129. }
  8130. .preloader-modal {
  8131. position: absolute;
  8132. left: 50%;
  8133. top: 50%;
  8134. padding: var(--f7-preloader-modal-padding);
  8135. background: var(--f7-preloader-modal-bg-color);
  8136. z-index: 14500;
  8137. transform: translateX(-50%) translateY(-50%);
  8138. border-radius: var(--f7-preloader-modal-border-radius);
  8139. }
  8140. .preloader-modal .preloader {
  8141. --f7-preloader-size: var(--f7-preloader-modal-preloader-size);
  8142. display: block !important;
  8143. }
  8144. html.with-modal-preloader .page-content,
  8145. .with-modal-preloader .page-content,
  8146. .with-modal-preloader.page-content {
  8147. overflow: hidden;
  8148. -webkit-overflow-scrolling: auto;
  8149. }
  8150. .preloader[class*="color-"] {
  8151. --f7-preloader-color: var(--f7-theme-color);
  8152. }
  8153. .ios .preloader {
  8154. animation: ios-preloader-spin 1s steps(12, end) infinite;
  8155. }
  8156. .ios .preloader .preloader-inner-line {
  8157. display: block;
  8158. width: 7.15%;
  8159. height: 28.5%;
  8160. border-radius: 100px;
  8161. background: var(--f7-preloader-color);
  8162. position: absolute;
  8163. left: 50%;
  8164. top: 50%;
  8165. transform-origin: center 175%;
  8166. }
  8167. .ios .preloader .preloader-inner-line:nth-child(1) {
  8168. transform: translate(-50%, -175%) rotate(0deg);
  8169. opacity: 0.27;
  8170. }
  8171. .ios .preloader .preloader-inner-line:nth-child(2) {
  8172. transform: translate(-50%, -175%) rotate(30deg);
  8173. opacity: 0.32272727;
  8174. }
  8175. .ios .preloader .preloader-inner-line:nth-child(3) {
  8176. transform: translate(-50%, -175%) rotate(60deg);
  8177. opacity: 0.37545455;
  8178. }
  8179. .ios .preloader .preloader-inner-line:nth-child(4) {
  8180. transform: translate(-50%, -175%) rotate(90deg);
  8181. opacity: 0.42818182;
  8182. }
  8183. .ios .preloader .preloader-inner-line:nth-child(5) {
  8184. transform: translate(-50%, -175%) rotate(120deg);
  8185. opacity: 0.48090909;
  8186. }
  8187. .ios .preloader .preloader-inner-line:nth-child(6) {
  8188. transform: translate(-50%, -175%) rotate(150deg);
  8189. opacity: 0.53363636;
  8190. }
  8191. .ios .preloader .preloader-inner-line:nth-child(7) {
  8192. transform: translate(-50%, -175%) rotate(180deg);
  8193. opacity: 0.58636364;
  8194. }
  8195. .ios .preloader .preloader-inner-line:nth-child(8) {
  8196. transform: translate(-50%, -175%) rotate(210deg);
  8197. opacity: 0.63909091;
  8198. }
  8199. .ios .preloader .preloader-inner-line:nth-child(9) {
  8200. transform: translate(-50%, -175%) rotate(240deg);
  8201. opacity: 0.69181818;
  8202. }
  8203. .ios .preloader .preloader-inner-line:nth-child(10) {
  8204. transform: translate(-50%, -175%) rotate(270deg);
  8205. opacity: 0.74454545;
  8206. }
  8207. .ios .preloader .preloader-inner-line:nth-child(11) {
  8208. transform: translate(-50%, -175%) rotate(300deg);
  8209. opacity: 0.79727273;
  8210. }
  8211. .ios .preloader .preloader-inner-line:nth-child(12) {
  8212. transform: translate(-50%, -175%) rotate(330deg);
  8213. opacity: 0.85;
  8214. }
  8215. @keyframes ios-preloader-spin {
  8216. 100% {
  8217. transform: rotate(360deg);
  8218. }
  8219. }
  8220. .md .preloader {
  8221. animation: md-preloader-outer 3300ms linear infinite;
  8222. }
  8223. @keyframes md-preloader-outer {
  8224. 0% {
  8225. transform: rotate(0);
  8226. }
  8227. 100% {
  8228. transform: rotate(360deg);
  8229. }
  8230. }
  8231. .md .preloader-inner {
  8232. position: relative;
  8233. display: block;
  8234. width: 100%;
  8235. height: 100%;
  8236. animation: md-preloader-inner-rotate 5.25s cubic-bezier(0.35, 0, 0.25, 1) infinite;
  8237. }
  8238. .md .preloader-inner .preloader-inner-gap {
  8239. position: absolute;
  8240. width: 2px;
  8241. left: 50%;
  8242. margin-left: -1px;
  8243. top: 0;
  8244. bottom: 0;
  8245. box-sizing: border-box;
  8246. border-top: 4px solid var(--f7-preloader-color);
  8247. }
  8248. .md .preloader-inner .preloader-inner-left,
  8249. .md .preloader-inner .preloader-inner-right {
  8250. position: absolute;
  8251. top: 0;
  8252. height: 100%;
  8253. width: 50%;
  8254. overflow: hidden;
  8255. }
  8256. .md .preloader-inner .preloader-inner-half-circle {
  8257. position: absolute;
  8258. top: 0;
  8259. height: 100%;
  8260. width: 200%;
  8261. box-sizing: border-box;
  8262. border: 4px solid var(--f7-preloader-color);
  8263. border-bottom-color: transparent !important;
  8264. border-radius: 50%;
  8265. animation-iteration-count: infinite;
  8266. animation-duration: 1.3125s;
  8267. animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
  8268. }
  8269. .md .preloader-inner .preloader-inner-left {
  8270. left: 0;
  8271. }
  8272. .md .preloader-inner .preloader-inner-left .preloader-inner-half-circle {
  8273. left: 0;
  8274. border-right-color: transparent !important;
  8275. animation-name: md-preloader-left-rotate;
  8276. }
  8277. .md .preloader-inner .preloader-inner-right {
  8278. right: 0;
  8279. }
  8280. .md .preloader-inner .preloader-inner-right .preloader-inner-half-circle {
  8281. right: 0;
  8282. border-left-color: transparent !important;
  8283. animation-name: md-preloader-right-rotate;
  8284. }
  8285. .md .preloader.color-multi .preloader-inner-left .preloader-inner-half-circle {
  8286. animation-name: md-preloader-left-rotate-multicolor;
  8287. }
  8288. .md .preloader.color-multi .preloader-inner-right .preloader-inner-half-circle {
  8289. animation-name: md-preloader-right-rotate-multicolor;
  8290. }
  8291. @keyframes md-preloader-left-rotate {
  8292. 0%,
  8293. 100% {
  8294. transform: rotate(130deg);
  8295. }
  8296. 50% {
  8297. transform: rotate(-5deg);
  8298. }
  8299. }
  8300. @keyframes md-preloader-right-rotate {
  8301. 0%,
  8302. 100% {
  8303. transform: rotate(-130deg);
  8304. }
  8305. 50% {
  8306. transform: rotate(5deg);
  8307. }
  8308. }
  8309. @keyframes md-preloader-inner-rotate {
  8310. 12.5% {
  8311. transform: rotate(135deg);
  8312. }
  8313. 25% {
  8314. transform: rotate(270deg);
  8315. }
  8316. 37.5% {
  8317. transform: rotate(405deg);
  8318. }
  8319. 50% {
  8320. transform: rotate(540deg);
  8321. }
  8322. 62.5% {
  8323. transform: rotate(675deg);
  8324. }
  8325. 75% {
  8326. transform: rotate(810deg);
  8327. }
  8328. 87.5% {
  8329. transform: rotate(945deg);
  8330. }
  8331. 100% {
  8332. transform: rotate(1080deg);
  8333. }
  8334. }
  8335. @keyframes md-preloader-left-rotate-multicolor {
  8336. 0%,
  8337. 100% {
  8338. border-left-color: #4285F4;
  8339. transform: rotate(130deg);
  8340. }
  8341. 75% {
  8342. border-left-color: #1B9A59;
  8343. border-top-color: #1B9A59;
  8344. }
  8345. 50% {
  8346. border-left-color: #F7C223;
  8347. border-top-color: #F7C223;
  8348. transform: rotate(-5deg);
  8349. }
  8350. 25% {
  8351. border-left-color: #DE3E35;
  8352. border-top-color: #DE3E35;
  8353. }
  8354. }
  8355. @keyframes md-preloader-right-rotate-multicolor {
  8356. 0%,
  8357. 100% {
  8358. border-right-color: #4285F4;
  8359. transform: rotate(-130deg);
  8360. }
  8361. 75% {
  8362. border-right-color: #1B9A59;
  8363. border-top-color: #1B9A59;
  8364. }
  8365. 50% {
  8366. border-right-color: #F7C223;
  8367. border-top-color: #F7C223;
  8368. transform: rotate(5deg);
  8369. }
  8370. 25% {
  8371. border-top-color: #DE3E35;
  8372. border-right-color: #DE3E35;
  8373. }
  8374. }
  8375. .aurora .preloader-inner {
  8376. position: absolute;
  8377. left: 0;
  8378. top: 0;
  8379. width: 100%;
  8380. height: 100%;
  8381. }
  8382. .aurora .preloader-inner-circle {
  8383. width: 100%;
  8384. height: 100%;
  8385. position: absolute;
  8386. left: 0;
  8387. top: 0;
  8388. border-radius: 50%;
  8389. border: calc(var(--f7-preloader-size) / 8) solid var(--f7-preloader-color);
  8390. border-top-color: transparent;
  8391. box-sizing: border-box;
  8392. animation: aurora-preloader-rotate 1s linear infinite;
  8393. }
  8394. .aurora .preloader.color-multi .preloader-inner-circle {
  8395. animation: aurora-preloader-rotate 1s linear infinite, aurora-preloader-multicolor 2s linear infinite;
  8396. }
  8397. @keyframes aurora-preloader-rotate {
  8398. 0% {
  8399. transform: rotate(0deg);
  8400. }
  8401. 100% {
  8402. transform: rotate(360deg);
  8403. }
  8404. }
  8405. @keyframes aurora-preloader-multicolor {
  8406. 0%,
  8407. 100% {
  8408. border-color: #2196f3;
  8409. border-top-color: transparent;
  8410. }
  8411. 25% {
  8412. border-color: #ff3b30;
  8413. border-top-color: transparent;
  8414. }
  8415. 50% {
  8416. border-color: #4cd964;
  8417. border-top-color: transparent;
  8418. }
  8419. 75% {
  8420. border-color: #ff9500;
  8421. border-top-color: transparent;
  8422. }
  8423. }
  8424. /* === Progressbar === */
  8425. :root {
  8426. /*
  8427. --f7-progressbar-progress-color: var(--f7-theme-color);
  8428. */
  8429. }
  8430. .ios {
  8431. --f7-progressbar-height: 2px;
  8432. --f7-progressbar-border-radius: 2px;
  8433. --f7-progressbar-bg-color: rgba(0, 0, 0, 0.3);
  8434. }
  8435. .ios .theme-dark,
  8436. .ios.theme-dark {
  8437. --f7-progressbar-bg-color: rgba(255, 255, 255, 0.3);
  8438. }
  8439. .md {
  8440. /*
  8441. --f7-progressbar-bg-color: rgba(var(--f7-theme-color-rgb), 0.5);
  8442. */
  8443. --f7-progressbar-height: 4px;
  8444. --f7-progressbar-border-radius: 0px;
  8445. }
  8446. .aurora {
  8447. --f7-progressbar-height: 6px;
  8448. --f7-progressbar-border-radius: 3px;
  8449. --f7-progressbar-bg-color: #dbdbdb;
  8450. }
  8451. .aurora .theme-dark,
  8452. .aurora.theme-dark {
  8453. --f7-progressbar-bg-color: #444;
  8454. }
  8455. .progressbar,
  8456. .progressbar-infinite {
  8457. width: 100%;
  8458. overflow: hidden;
  8459. position: relative;
  8460. display: block;
  8461. transform-style: preserve-3d;
  8462. background: var(--f7-progressbar-bg-color, rgba(var(--f7-theme-color-rgb), 0.5));
  8463. transform-origin: center top;
  8464. height: var(--f7-progressbar-height);
  8465. border-radius: var(--f7-progressbar-border-radius);
  8466. }
  8467. .progressbar {
  8468. vertical-align: middle;
  8469. }
  8470. .progressbar span {
  8471. background-color: var(--f7-progressbar-progress-color, var(--f7-theme-color));
  8472. width: 100%;
  8473. height: 100%;
  8474. position: absolute;
  8475. left: 0;
  8476. top: 0;
  8477. transform: translate3d(-100%, 0, 0);
  8478. transition-duration: 150ms;
  8479. }
  8480. .progressbar-infinite {
  8481. z-index: 15000;
  8482. }
  8483. .progressbar-infinite:before,
  8484. .progressbar-infinite:after {
  8485. content: '';
  8486. position: absolute;
  8487. left: 0;
  8488. top: 0;
  8489. width: 100%;
  8490. height: 100%;
  8491. transform-origin: left center;
  8492. transform: translate3d(0, 0, 0);
  8493. display: block;
  8494. background-color: var(--f7-progressbar-progress-color, var(--f7-theme-color));
  8495. }
  8496. .progressbar-infinite.color-multi {
  8497. background: none !important;
  8498. }
  8499. .progressbar-in {
  8500. animation: progressbar-in 150ms forwards;
  8501. }
  8502. .progressbar-out {
  8503. animation: progressbar-out 150ms forwards;
  8504. }
  8505. body > .progressbar,
  8506. .view > .progressbar,
  8507. .views > .progressbar,
  8508. .page > .progressbar,
  8509. .panel > .progressbar,
  8510. .popup > .progressbar,
  8511. .framework7-root > .progressbar,
  8512. body > .progressbar-infinite,
  8513. .view > .progressbar-infinite,
  8514. .views > .progressbar-infinite,
  8515. .page > .progressbar-infinite,
  8516. .panel > .progressbar-infinite,
  8517. .popup > .progressbar-infinite,
  8518. .framework7-root > .progressbar-infinite {
  8519. position: absolute;
  8520. left: 0;
  8521. top: 0;
  8522. z-index: 15000;
  8523. border-radius: 0 !important;
  8524. transform-origin: center top !important;
  8525. }
  8526. @keyframes progressbar-in {
  8527. from {
  8528. opacity: 0;
  8529. transform: scaleY(0);
  8530. }
  8531. to {
  8532. opacity: 1;
  8533. transform: scaleY(1);
  8534. }
  8535. }
  8536. @keyframes progressbar-out {
  8537. from {
  8538. opacity: 1;
  8539. transform: scaleY(1);
  8540. }
  8541. to {
  8542. opacity: 0;
  8543. transform: scaleY(0);
  8544. }
  8545. }
  8546. .ios .progressbar-infinite:before {
  8547. animation: ios-progressbar-infinite 1s linear infinite;
  8548. }
  8549. .ios .progressbar-infinite:after {
  8550. display: none;
  8551. }
  8552. .ios .progressbar-infinite.color-multi:before {
  8553. width: 400%;
  8554. background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55, #5856d6, #34aadc, #007aff, #5ac8fa, #4cd964);
  8555. background-size: 25% 100%;
  8556. background-repeat: repeat-x;
  8557. animation: ios-progressbar-infinite-multicolor 3s linear infinite;
  8558. }
  8559. @keyframes ios-progressbar-infinite {
  8560. 0% {
  8561. transform: translate3d(-100%, 0, 0);
  8562. }
  8563. 100% {
  8564. transform: translate3d(100%, 0, 0);
  8565. }
  8566. }
  8567. @keyframes ios-progressbar-infinite-multicolor {
  8568. 0% {
  8569. transform: translate3d(0%, 0, 0);
  8570. }
  8571. 100% {
  8572. transform: translate3d(-50%, 0, 0);
  8573. }
  8574. }
  8575. .md .progressbar-infinite:before {
  8576. animation: md-progressbar-infinite-1 2s linear infinite;
  8577. }
  8578. .md .progressbar-infinite:after {
  8579. animation: md-progressbar-infinite-2 2s linear infinite;
  8580. }
  8581. .md .progressbar-infinite.color-multi:before {
  8582. background: none;
  8583. animation: md-progressbar-infinite-multicolor-bg 3s step-end infinite;
  8584. }
  8585. .md .progressbar-infinite.color-multi:after {
  8586. background: none;
  8587. animation: md-progressbar-infinite-multicolor-fill 3s linear infinite;
  8588. transform-origin: center center;
  8589. }
  8590. @keyframes md-progressbar-infinite-1 {
  8591. 0% {
  8592. transform: translateX(-10%) scaleX(0.1);
  8593. }
  8594. 25% {
  8595. transform: translateX(30%) scaleX(0.6);
  8596. }
  8597. 50% {
  8598. transform: translateX(100%) scaleX(1);
  8599. }
  8600. 100% {
  8601. transform: translateX(100%) scaleX(1);
  8602. }
  8603. }
  8604. @keyframes md-progressbar-infinite-2 {
  8605. 0% {
  8606. transform: translateX(-100%) scaleX(1);
  8607. }
  8608. 40% {
  8609. transform: translateX(-100%) scaleX(1);
  8610. }
  8611. 75% {
  8612. transform: translateX(60%) scaleX(0.35);
  8613. }
  8614. 90% {
  8615. transform: translateX(100%) scaleX(0.1);
  8616. }
  8617. 100% {
  8618. transform: translateX(100%) scaleX(0.1);
  8619. }
  8620. }
  8621. @keyframes md-progressbar-infinite-multicolor-bg {
  8622. 0% {
  8623. background-color: #4caf50;
  8624. }
  8625. 25% {
  8626. background-color: #f44336;
  8627. }
  8628. 50% {
  8629. background-color: #2196f3;
  8630. }
  8631. 75% {
  8632. background-color: #ffeb3b;
  8633. }
  8634. }
  8635. @keyframes md-progressbar-infinite-multicolor-fill {
  8636. 0% {
  8637. transform: scaleX(0);
  8638. background-color: #f44336;
  8639. }
  8640. 24.9% {
  8641. transform: scaleX(1);
  8642. background-color: #f44336;
  8643. }
  8644. 25% {
  8645. transform: scaleX(0);
  8646. background-color: #2196f3;
  8647. }
  8648. 49.9% {
  8649. transform: scaleX(1);
  8650. background-color: #2196f3;
  8651. }
  8652. 50% {
  8653. transform: scaleX(0);
  8654. background-color: #ffeb3b;
  8655. }
  8656. 74.9% {
  8657. transform: scaleX(1);
  8658. background-color: #ffeb3b;
  8659. }
  8660. 75% {
  8661. transform: scaleX(0);
  8662. background-color: #4caf50;
  8663. }
  8664. 100% {
  8665. transform: scaleX(1);
  8666. background-color: #4caf50;
  8667. }
  8668. }
  8669. .aurora .progressbar,
  8670. .aurora .progressbar-infinite,
  8671. .aurora .progressbar span,
  8672. .aurora .progressbar-infinite:before {
  8673. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset;
  8674. }
  8675. .aurora .progressbar-infinite:before {
  8676. animation: aurora-progressbar-infinite 1s linear infinite;
  8677. }
  8678. .aurora .progressbar-infinite:after {
  8679. display: none;
  8680. }
  8681. .aurora .progressbar-infinite.color-multi:before {
  8682. width: 400%;
  8683. background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55, #5856d6, #34aadc, #007aff, #5ac8fa, #4cd964);
  8684. background-size: 25% 100%;
  8685. background-repeat: repeat-x;
  8686. animation: aurora-progressbar-infinite-multicolor 3s linear infinite;
  8687. }
  8688. @keyframes aurora-progressbar-infinite {
  8689. 0% {
  8690. transform: translate3d(-100%, 0, 0);
  8691. }
  8692. 100% {
  8693. transform: translate3d(100%, 0, 0);
  8694. }
  8695. }
  8696. @keyframes aurora-progressbar-infinite-multicolor {
  8697. 0% {
  8698. transform: translate3d(0%, 0, 0);
  8699. }
  8700. 100% {
  8701. transform: translate3d(-50%, 0, 0);
  8702. }
  8703. }
  8704. /* === Sortable === */
  8705. :root {
  8706. --f7-sortable-handler-color: rgba(0, 0, 0, 0.22);
  8707. --f7-sortable-sorting-item-bg-color: rgba(255, 255, 255, 0.8);
  8708. }
  8709. :root .theme-dark,
  8710. :root.theme-dark {
  8711. --f7-sortable-sorting-item-bg-color: rgba(50, 50, 50, 0.8);
  8712. --f7-sortable-handler-color: rgba(255, 255, 255, 0.55);
  8713. }
  8714. .ios {
  8715. --f7-sortable-handler-width: 36px;
  8716. --f7-sortable-sorting-item-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.6);
  8717. }
  8718. .md {
  8719. --f7-sortable-handler-width: 42px;
  8720. --f7-sortable-sorting-item-box-shadow: var(--f7-elevation-2);
  8721. }
  8722. .aurora {
  8723. --f7-sortable-handler-width: 32px;
  8724. --f7-sortable-sorting-item-box-shadow: var(--f7-elevation-2);
  8725. }
  8726. .sortable .sortable-handler {
  8727. width: var(--f7-sortable-handler-width);
  8728. height: 100%;
  8729. position: absolute;
  8730. top: 0;
  8731. z-index: 10;
  8732. opacity: 0;
  8733. pointer-events: none;
  8734. cursor: move;
  8735. transition-duration: 300ms;
  8736. display: flex;
  8737. align-items: center;
  8738. justify-content: center;
  8739. overflow: hidden;
  8740. left: var(--f7-safe-area-left);
  8741. }
  8742. .sortable .sortable-handler:after {
  8743. font-family: 'framework7-core-icons';
  8744. font-weight: normal;
  8745. font-style: normal;
  8746. line-height: 1;
  8747. letter-spacing: normal;
  8748. text-transform: none;
  8749. white-space: nowrap;
  8750. word-wrap: normal;
  8751. direction: ltr;
  8752. -webkit-font-smoothing: antialiased;
  8753. text-rendering: optimizeLegibility;
  8754. -moz-osx-font-smoothing: grayscale;
  8755. font-feature-settings: "liga";
  8756. text-align: center;
  8757. display: block;
  8758. width: 100%;
  8759. height: 100%;
  8760. font-size: 20px;
  8761. transition-duration: 300ms;
  8762. transform: translateX(10px);
  8763. color: var(--f7-sortable-handler-color);
  8764. overflow: hidden;
  8765. height: 20px;
  8766. width: 18px;
  8767. }
  8768. .sortable li.sorting {
  8769. z-index: 50;
  8770. background: var(--f7-sortable-sorting-item-bg-color);
  8771. transition-duration: 0ms;
  8772. box-shadow: var(--f7-sortable-sorting-item-box-shadow);
  8773. }
  8774. .sortable li.sorting .item-inner:after {
  8775. display: none !important;
  8776. }
  8777. .sortable-opposite .sortable-handler {
  8778. right: var(--f7-safe-area-left);
  8779. left: auto;
  8780. }
  8781. .sortable-opposite .sortable-handler:after {
  8782. transform: translateX(-10px);
  8783. }
  8784. .sortable:not(.sortable-opposite) .item-inner,
  8785. .sortable-opposite .item-content,
  8786. .sortable.simple-list li,
  8787. .sortable-opposite.links-list li a {
  8788. transition-duration: 300ms;
  8789. transition-property: all;
  8790. }
  8791. .sortable-sorting li {
  8792. transition-duration: 300ms;
  8793. }
  8794. .sortable-enabled li:not(.no-sorting):not(.disallow-sorting) .sortable-handler {
  8795. pointer-events: auto;
  8796. opacity: 1;
  8797. }
  8798. .sortable-enabled li:not(.no-sorting):not(.disallow-sorting) .sortable-handler:after {
  8799. transform: translateX(0px);
  8800. }
  8801. .sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-inner:before,
  8802. .sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-title-row:before,
  8803. .sortable-enabled:not(.sortable-opposite).links-list li:not(.no-sorting):not(.disallow-sorting) > a:before {
  8804. display: none;
  8805. }
  8806. .sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-inner,
  8807. .sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-inner,
  8808. .sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link.no-chevron .item-inner,
  8809. .sortable-enabled.no-chevron:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-inner,
  8810. .sortable-enabled :not(.sortable-opposite).no-chevron .item-link .item-inner,
  8811. .no-chevron .sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-inner,
  8812. .simple-list.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting),
  8813. .links-list.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) a {
  8814. padding-left: calc(var(--f7-sortable-handler-width) + var(--f7-safe-area-right));
  8815. }
  8816. .sortable-opposite.sortable-enabled li:not(.no-sorting):not(.disallow-sorting) .item-content,
  8817. .simple-list.sortable-opposite.sortable-enabled li:not(.no-sorting):not(.disallow-sorting),
  8818. .links-list.sortable-opposite.sortable-enabled li:not(.no-sorting):not(.disallow-sorting) a {
  8819. padding-right: calc(var(--f7-sortable-handler-width) + var(--f7-safe-area-right));
  8820. }
  8821. .ios .sortable-handler:after {
  8822. content: 'sort_ios';
  8823. }
  8824. .md .sortable-handler:after {
  8825. content: 'sort_md';
  8826. }
  8827. .aurora .sortable-handler:after {
  8828. content: 'sort_md';
  8829. font-size: 16px;
  8830. height: 16px;
  8831. }
  8832. /* === Swipeout === */
  8833. :root {
  8834. --f7-swipeout-button-text-color: #fff;
  8835. --f7-swipeout-delete-button-bg-color: #ff3b30;
  8836. --f7-swipeout-button-font-size: inherit;
  8837. --f7-swipeout-button-font-weight: inherit;
  8838. --f7-swipeout-button-bg-color: rgba(0, 0, 0, 0.22);
  8839. }
  8840. :root .theme-dark,
  8841. :root.theme-dark {
  8842. --f7-swipeout-button-bg-color: rgba(255, 255, 255, 0.55);
  8843. }
  8844. .ios {
  8845. --f7-swipeout-button-padding: 0 30px;
  8846. }
  8847. .md {
  8848. --f7-swipeout-button-padding: 0 24px;
  8849. }
  8850. .aurora {
  8851. --f7-swipeout-button-padding: 0 12px;
  8852. --f7-swipeout-button-font-weight: 500;
  8853. }
  8854. .swipeout {
  8855. overflow: hidden;
  8856. transform-style: preserve-3d;
  8857. }
  8858. .swipeout-deleting {
  8859. transition-duration: 300ms;
  8860. }
  8861. .swipeout-deleting .swipeout-content {
  8862. transform: translateX(-100%);
  8863. }
  8864. .swipeout-transitioning .swipeout-content,
  8865. .swipeout-transitioning .swipeout-actions-right a,
  8866. .swipeout-transitioning .swipeout-actions-left a,
  8867. .swipeout-transitioning .swipeout-overswipe {
  8868. transition-duration: 300ms;
  8869. transition-property: transform, left;
  8870. }
  8871. .swipeout-content {
  8872. position: relative;
  8873. z-index: 10;
  8874. }
  8875. .swipeout-overswipe {
  8876. transition-duration: 200ms;
  8877. transition-property: left;
  8878. }
  8879. .swipeout-actions-left,
  8880. .swipeout-actions-right {
  8881. position: absolute;
  8882. top: 0;
  8883. height: 100%;
  8884. display: flex;
  8885. direction: ltr;
  8886. }
  8887. .swipeout-actions-left > a,
  8888. .swipeout-actions-right > a,
  8889. .swipeout-actions-left > button,
  8890. .swipeout-actions-right > button,
  8891. .swipeout-actions-left > span,
  8892. .swipeout-actions-right > span,
  8893. .swipeout-actions-left > div,
  8894. .swipeout-actions-right > div {
  8895. color: var(--f7-swipeout-button-text-color);
  8896. background: var(--f7-swipeout-button-bg-color);
  8897. padding: var(--f7-swipeout-button-padding);
  8898. display: flex;
  8899. align-items: center;
  8900. position: relative;
  8901. left: 0;
  8902. font-size: var(--f7-swipeout-button-font-size);
  8903. font-weight: var(--f7-swipeout-button-font-weight);
  8904. }
  8905. .swipeout-actions-left > a:after,
  8906. .swipeout-actions-right > a:after,
  8907. .swipeout-actions-left > button:after,
  8908. .swipeout-actions-right > button:after,
  8909. .swipeout-actions-left > span:after,
  8910. .swipeout-actions-right > span:after,
  8911. .swipeout-actions-left > div:after,
  8912. .swipeout-actions-right > div:after {
  8913. content: '';
  8914. position: absolute;
  8915. top: 0;
  8916. width: 600%;
  8917. height: 100%;
  8918. background: inherit;
  8919. z-index: -1;
  8920. transform: translate3d(0, 0, 0);
  8921. pointer-events: none;
  8922. }
  8923. .swipeout-actions-left .swipeout-delete,
  8924. .swipeout-actions-right .swipeout-delete {
  8925. background: var(--f7-swipeout-delete-button-bg-color);
  8926. }
  8927. .swipeout-actions-right {
  8928. right: 0%;
  8929. transform: translateX(100%);
  8930. }
  8931. .swipeout-actions-right > a:after,
  8932. .swipeout-actions-right > button:after,
  8933. .swipeout-actions-right > span:after,
  8934. .swipeout-actions-right > div:after {
  8935. left: 100%;
  8936. margin-left: -1px;
  8937. }
  8938. .swipeout-actions-left {
  8939. left: 0%;
  8940. transform: translateX(-100%);
  8941. }
  8942. .swipeout-actions-left > a:after,
  8943. .swipeout-actions-left > button:after,
  8944. .swipeout-actions-left > span:after,
  8945. .swipeout-actions-left > div:after {
  8946. right: 100%;
  8947. margin-right: -1px;
  8948. }
  8949. .swipeout-actions-left [class*="color-"],
  8950. .swipeout-actions-right [class*="color-"] {
  8951. --f7-swipeout-button-bg-color: var(--f7-theme-color);
  8952. }
  8953. /* === Accordion === */
  8954. :root {
  8955. --f7-accordion-chevron-icon-down: 'chevron_down';
  8956. --f7-accordion-chevron-icon-up: 'chevron_up';
  8957. }
  8958. .aurora {
  8959. --f7-accordion-chevron-icon-down: 'chevron_down_aurora';
  8960. --f7-accordion-chevron-icon-up: 'chevron_up_aurora';
  8961. }
  8962. .accordion-item-toggle {
  8963. cursor: pointer;
  8964. }
  8965. .list.accordion-list .accordion-item-toggle {
  8966. transition-duration: 300ms;
  8967. position: relative;
  8968. overflow: hidden;
  8969. }
  8970. .list.accordion-list .accordion-item-toggle.active-state {
  8971. transition-duration: 300ms;
  8972. background-color: var(--f7-list-link-pressed-bg-color);
  8973. }
  8974. .list.accordion-list .accordion-item-toggle.active-state > .item-inner:after {
  8975. background-color: transparent;
  8976. }
  8977. .list.accordion-list .accordion-item-toggle .item-inner {
  8978. transition-duration: 300ms;
  8979. transition-property: background-color;
  8980. }
  8981. .list.accordion-list .accordion-item-toggle .item-inner:after {
  8982. transition-duration: 300ms;
  8983. }
  8984. .list.accordion-list .accordion-item-toggle .ripple-wave {
  8985. z-index: 0;
  8986. }
  8987. .accordion-item .item-link .item-inner:after {
  8988. transition-duration: 300ms;
  8989. }
  8990. .accordion-item .list,
  8991. .accordion-item .block {
  8992. margin-top: 0;
  8993. margin-bottom: 0;
  8994. }
  8995. .accordion-item .block > h1:first-child,
  8996. .accordion-item .block > h2:first-child,
  8997. .accordion-item .block > h3:first-child,
  8998. .accordion-item .block > h4:first-child,
  8999. .accordion-item .block > p:first-child {
  9000. margin-top: 10px;
  9001. }
  9002. .accordion-item .block > h1:last-child,
  9003. .accordion-item .block > h2:last-child,
  9004. .accordion-item .block > h3:last-child,
  9005. .accordion-item .block > h4:last-child,
  9006. .accordion-item .block > p:last-child {
  9007. margin-bottom: 10px;
  9008. }
  9009. .accordion-item-opened .accordion-item-toggle .item-inner:after,
  9010. .accordion-item-opened > .item-link .item-inner:after {
  9011. background-color: transparent;
  9012. }
  9013. .list li.accordion-item ul {
  9014. padding-right: 0;
  9015. }
  9016. .accordion-item-content {
  9017. position: relative;
  9018. overflow: hidden;
  9019. height: 0;
  9020. font-size: 14px;
  9021. transition-duration: 300ms;
  9022. }
  9023. .accordion-item-opened > .accordion-item-content {
  9024. height: auto;
  9025. }
  9026. html.device-android-4 .accordion-item-content {
  9027. transform: none;
  9028. }
  9029. .list .accordion-item-toggle .item-inner:before {
  9030. font-family: 'framework7-core-icons';
  9031. font-weight: normal;
  9032. font-style: normal;
  9033. line-height: 1;
  9034. letter-spacing: normal;
  9035. text-transform: none;
  9036. white-space: nowrap;
  9037. word-wrap: normal;
  9038. direction: ltr;
  9039. -webkit-font-smoothing: antialiased;
  9040. text-rendering: optimizeLegibility;
  9041. -moz-osx-font-smoothing: grayscale;
  9042. font-feature-settings: "liga";
  9043. text-align: center;
  9044. display: block;
  9045. width: 100%;
  9046. height: 100%;
  9047. font-size: 20px;
  9048. position: absolute;
  9049. top: 50%;
  9050. font-size: var(--f7-list-chevron-icon-font-size);
  9051. color: var(--f7-list-chevron-icon-color);
  9052. pointer-events: none;
  9053. left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
  9054. }
  9055. .list:not(.accordion-opposite) .accordion-item-toggle .item-inner {
  9056. padding-left: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
  9057. }
  9058. .accordion-opposite .accordion-item-toggle.item-link .item-inner,
  9059. .accordion-opposite .accordion-item-toggle .item-inner,
  9060. .accordion-opposite .accordion-item > .item-link > .item-inner,
  9061. .accordion-opposite .accordion-item > .item-link > .item-content > .item-inner {
  9062. padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
  9063. }
  9064. .accordion-opposite .accordion-item > .item-link > .item-title-row {
  9065. padding-right: 0;
  9066. }
  9067. .accordion-opposite .accordion-item-toggle.item-link .item-inner:before,
  9068. .accordion-opposite .accordion-item-toggle .item-inner:before,
  9069. .accordion-opposite .accordion-item > .item-link > .item-inner:before,
  9070. .accordion-opposite .accordion-item > .item-link > .item-content > .item-inner:before,
  9071. .accordion-opposite .accordion-item > .item-link .item-title-row:before {
  9072. display: none;
  9073. }
  9074. .accordion-opposite .accordion-item-toggle > .item-content,
  9075. .accordion-opposite .accordion-item-toggle.item-content,
  9076. .accordion-opposite .accordion-item > .item-content,
  9077. .accordion-opposite .accordion-item > .item-link > .item-content,
  9078. .accordion-opposite.links-list .accordion-item > a {
  9079. position: relative;
  9080. padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
  9081. }
  9082. .accordion-opposite .accordion-item-toggle > .item-content:before,
  9083. .accordion-opposite .accordion-item-toggle.item-content:before,
  9084. .accordion-opposite .accordion-item > .item-content:before,
  9085. .accordion-opposite .accordion-item > .item-link > .item-content:before,
  9086. .accordion-opposite.links-list .accordion-item > a:before {
  9087. font-family: 'framework7-core-icons';
  9088. font-weight: normal;
  9089. font-style: normal;
  9090. line-height: 1;
  9091. letter-spacing: normal;
  9092. text-transform: none;
  9093. white-space: nowrap;
  9094. word-wrap: normal;
  9095. direction: ltr;
  9096. -webkit-font-smoothing: antialiased;
  9097. text-rendering: optimizeLegibility;
  9098. -moz-osx-font-smoothing: grayscale;
  9099. font-feature-settings: "liga";
  9100. text-align: center;
  9101. display: block;
  9102. width: 100%;
  9103. height: 100%;
  9104. font-size: 20px;
  9105. position: absolute;
  9106. top: 50%;
  9107. font-size: var(--f7-list-chevron-icon-font-size);
  9108. color: var(--f7-list-chevron-icon-color);
  9109. pointer-events: none;
  9110. content: var(--f7-accordion-chevron-icon-down);
  9111. width: 14px;
  9112. height: 8px;
  9113. margin-top: -4px;
  9114. line-height: 8px;
  9115. transform: translateX(-50%);
  9116. right: calc((var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal)) / 2 + var(--f7-safe-area-right));
  9117. }
  9118. .list .accordion-item-toggle.active-state {
  9119. background-color: var(--f7-list-link-pressed-bg-color);
  9120. }
  9121. .list .accordion-item-toggle .item-inner:before,
  9122. .list:not(.media-list) .accordion-item:not(.media-item) .accordion-item-toggle .item-inner:before,
  9123. .list:not(.media-list) .accordion-item:not(.media-item) > .item-link .item-inner:before,
  9124. .media-list .accordion-item .accordion-item-toggle .item-title-row:before,
  9125. .media-list .accordion-item > .item-link .item-title-row:before,
  9126. .accordion-item.media-item .accordion-item-toggle .item-title-row:before,
  9127. .accordion-item.media-item > .item-link .item-title-row:before,
  9128. .links-list .accordion-item > a:before {
  9129. content: var(--f7-accordion-chevron-icon-down);
  9130. width: 14px;
  9131. height: 8px;
  9132. margin-top: -4px;
  9133. line-height: 8px;
  9134. }
  9135. .list .accordion-item-toggle.accordion-item-opened .item-inner:before,
  9136. .list:not(.media-list) .accordion-item-opened:not(.media-item) .accordion-item-toggle .item-inner:before,
  9137. .list:not(.media-list) .accordion-item-opened:not(.media-item) > .item-link .item-inner:before,
  9138. .media-list .accordion-item-opened .accordion-item-toggle .item-title-row:before,
  9139. .media-list .accordion-item-opened > .item-link .item-title-row:before,
  9140. .accordion-item-opened.media-item .accordion-item-toggle .item-title-row:before,
  9141. .accordion-item-opened.media-item > .item-link .item-title-row:before,
  9142. .links-list .accordion-item-opened > a:before,
  9143. .accordion-opposite .accordion-item-opened .accordion-item-toggle > .item-content:before,
  9144. .accordion-opposite .accordion-item-opened .accordion-item-toggle.item-content:before,
  9145. .accordion-opposite .accordion-item-opened > .item-content:before,
  9146. .accordion-opposite .accordion-item-opened > .item-link > .item-content:before,
  9147. .accordion-opposite .links-list .accordion-item-opened > a:before {
  9148. content: var(--f7-accordion-chevron-icon-up);
  9149. width: 14px;
  9150. height: 8px;
  9151. margin-top: -4px;
  9152. line-height: 8px;
  9153. }
  9154. /* === Contacts === */
  9155. :root .theme-dark,
  9156. :root.theme-dark {
  9157. --f7-contacts-list-title-text-color: #fff;
  9158. }
  9159. .ios {
  9160. --f7-contacts-list-title-font-size: inherit;
  9161. --f7-contacts-list-title-font-weight: 600;
  9162. --f7-contacts-list-title-height: 22px;
  9163. --f7-contacts-list-title-text-color: #000;
  9164. --f7-contacts-list-title-bg-color: #f7f7f7;
  9165. }
  9166. .ios .theme-dark,
  9167. .ios.theme-dark {
  9168. --f7-contacts-list-title-bg-color: #323234;
  9169. }
  9170. .md {
  9171. --f7-contacts-list-title-font-size: 20px;
  9172. --f7-contacts-list-title-font-weight: 500;
  9173. /*
  9174. --f7-contacts-list-title-text-color: var(--f7-theme-color);
  9175. */
  9176. --f7-contacts-list-title-height: 48px;
  9177. --f7-contacts-list-title-bg-color: transparent;
  9178. }
  9179. .aurora {
  9180. --f7-contacts-list-title-font-weight: 600;
  9181. --f7-contacts-list-title-text-color: #000;
  9182. /*
  9183. --f7-contacts-list-title-bg-color: var(--f7-list-group-title-bg-color);
  9184. --f7-contacts-list-title-font-size: var(--f7-list-group-title-font-size);
  9185. --f7-contacts-list-title-line-height: var(--f7-list-group-title-height);
  9186. --f7-contacts-list-title-height: var(--f7-list-group-title-height);
  9187. */
  9188. }
  9189. .contacts-list {
  9190. --f7-list-margin-vertical: 0px;
  9191. }
  9192. .contacts-list .list-group-title,
  9193. .contacts-list li.list-group-title {
  9194. background-color: var(--f7-contacts-list-title-bg-color, var(--f7-list-group-title-bg-color));
  9195. font-weight: var(--f7-contacts-list-title-font-weight, var(--f7-list-group-title-font-weight));
  9196. font-size: var(--f7-contacts-list-title-font-size, var(--f7-list-group-title-font-size));
  9197. color: var(--f7-contacts-list-title-text-color, var(--f7-theme-color));
  9198. line-height: var(--f7-contacts-list-title-height, var(--f7-list-group-title-height));
  9199. height: var(--f7-contacts-list-title-height, var(--f7-list-group-title-height));
  9200. }
  9201. .contacts-list .list-group:first-child ul:before {
  9202. display: none !important;
  9203. }
  9204. .contacts-list .list-group:last-child ul:after {
  9205. display: none !important;
  9206. }
  9207. .md .contacts-list .list-group-title {
  9208. pointer-events: none;
  9209. overflow: visible;
  9210. width: 56px;
  9211. }
  9212. .md .contacts-list .list-group-title + li {
  9213. margin-top: calc(var(--f7-contacts-list-title-height) * -1);
  9214. }
  9215. .md .contacts-list li:not(.list-group-title) {
  9216. padding-right: 56px;
  9217. }
  9218. /* === Virtual List === */
  9219. /* === Indexed List === */
  9220. :root {
  9221. --f7-list-index-width: 16px;
  9222. --f7-list-index-font-size: 11px;
  9223. --f7-list-index-font-weight: 600;
  9224. /* --f7-list-index-text-color: var(--f7-theme-color); */
  9225. --f7-list-index-item-height: 14px;
  9226. --f7-list-index-label-text-color: #fff;
  9227. /* --f7-list-index-label-bg-color: var(--f7-theme-color); */
  9228. --f7-list-index-label-font-weight: 500;
  9229. }
  9230. .ios {
  9231. --f7-list-index-label-size: 44px;
  9232. --f7-list-index-label-font-size: 17px;
  9233. --f7-list-index-skip-dot-size: 6px;
  9234. }
  9235. .md {
  9236. --f7-list-index-label-size: 56px;
  9237. --f7-list-index-label-font-size: 20px;
  9238. --f7-list-index-skip-dot-size: 4px;
  9239. }
  9240. .aurora {
  9241. --f7-list-index-font-size: 12px;
  9242. --f7-list-index-label-size: 32px;
  9243. --f7-list-index-label-font-size: 12px;
  9244. --f7-list-index-label-font-weight: 600;
  9245. --f7-list-index-skip-dot-size: 4px;
  9246. }
  9247. .list-index {
  9248. position: absolute;
  9249. top: 0;
  9250. bottom: 0;
  9251. text-align: center;
  9252. z-index: 10;
  9253. width: var(--f7-list-index-width);
  9254. cursor: pointer;
  9255. -webkit-user-select: none;
  9256. -moz-user-select: none;
  9257. user-select: none;
  9258. left: var(--f7-safe-area-left);
  9259. }
  9260. .list-index:before {
  9261. content: '';
  9262. position: absolute;
  9263. width: 20px;
  9264. top: 0;
  9265. right: 100%;
  9266. height: 100%;
  9267. }
  9268. .list-index ul {
  9269. color: var(--f7-list-index-text-color, var(--f7-theme-color));
  9270. font-size: var(--f7-list-index-font-size);
  9271. font-weight: var(--f7-list-index-font-weight);
  9272. list-style: none;
  9273. margin: 0;
  9274. padding: 0;
  9275. display: flex;
  9276. flex-direction: column;
  9277. justify-content: center;
  9278. align-items: center;
  9279. flex-shrink: 0;
  9280. height: 100%;
  9281. width: 100%;
  9282. position: relative;
  9283. }
  9284. .list-index li {
  9285. margin: 0;
  9286. padding: 0;
  9287. list-style: none;
  9288. position: relative;
  9289. height: var(--f7-list-index-item-height);
  9290. line-height: var(--f7-list-index-item-height);
  9291. flex-shrink: 0;
  9292. display: block;
  9293. width: 100%;
  9294. }
  9295. .list-index .list-index-skip-placeholder:after {
  9296. content: '';
  9297. position: absolute;
  9298. left: 50%;
  9299. top: 50%;
  9300. border-radius: 50%;
  9301. width: var(--f7-list-index-skip-dot-size);
  9302. height: var(--f7-list-index-skip-dot-size);
  9303. margin-left: calc(-1 * var(--f7-list-index-skip-dot-size) / 2);
  9304. margin-top: calc(-1 * var(--f7-list-index-skip-dot-size) / 2);
  9305. background: var(--f7-list-index-text-color, var(--f7-theme-color));
  9306. }
  9307. .list-index .list-index-label {
  9308. position: absolute;
  9309. bottom: 0;
  9310. right: 100%;
  9311. text-align: center;
  9312. background-color: var(--f7-list-index-label-bg-color, var(--f7-theme-color));
  9313. color: var(--f7-list-index-label-text-color);
  9314. width: var(--f7-list-index-label-size);
  9315. height: var(--f7-list-index-label-size);
  9316. line-height: var(--f7-list-index-label-size);
  9317. font-size: var(--f7-list-index-label-font-size);
  9318. font-weight: var(--f7-list-index-label-font-weight);
  9319. }
  9320. .navbar ~ .page > .list-index,
  9321. .navbars ~ .page > .list-index,
  9322. .navbar ~ .list-index {
  9323. top: var(--f7-navbar-height);
  9324. }
  9325. .navbar ~ .toolbar-top ~ .list-index,
  9326. .navbars ~ .toolbar-top ~ .list-index,
  9327. .ios .navbar ~ .toolbar-top-ios ~ .list-index,
  9328. .ios .navbars ~ .toolbar-top-ios .md .navbar ~ .toolbar-top-md ~ .list-index {
  9329. top: calc(var(--f7-navbar-height) + var(--f7-toolbar-height));
  9330. }
  9331. .navbar ~ .toolbar-top.tabbar-labels ~ .list-index,
  9332. .navbars ~ .toolbar-top.tabbar-labels ~ .list-index,
  9333. .ios .navbar ~ .toolbar-top-ios.tabbar-labels ~ .list-index,
  9334. .ios .navbars ~ .toolbar-top-ios .md .navbar ~ .toolbar-top-md.tabbar-labels ~ .list-index {
  9335. top: calc(var(--f7-navbar-height) + var(--f7-tabbar-labels-height));
  9336. }
  9337. .navbar ~ .subnavbar ~ .list-index,
  9338. .navbars ~ .subnavbar ~ .list-index,
  9339. .page-with-subnavbar .navbar ~ .list-index {
  9340. top: calc(var(--f7-navbar-height) + var(--f7-subnavbar-height));
  9341. }
  9342. .toolbar-bottom ~ .page > .list-index,
  9343. .ios .toolbar-bottom-ios ~ .page > .list-index,
  9344. .md .toolbar-bottom-md ~ .page > .list-index,
  9345. .toolbar-bottom ~ * .page > .list-index,
  9346. .ios .toolbar-bottom-ios ~ * .page > .list-index,
  9347. .md .toolbar-bottom-md ~ * .page > .list-index,
  9348. .toolbar-bottom ~ .list-index,
  9349. .ios .toolbar-bottom-ios ~ .list-index,
  9350. .md .toolbar-bottom-md ~ .list-index {
  9351. bottom: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
  9352. }
  9353. .toolbar-bottom.tabbar-labels ~ .page > .list-index,
  9354. .ios .toolbar-bottom-ios.tabbar-labels ~ .page > .list-index,
  9355. .md .toolbar-bottom-md.tabbar-labels ~ .page > .list-index,
  9356. .toolbar-bottom.tabbar-labels ~ * .page > .list-index,
  9357. .ios .toolbar-bottom-ios.tabbar-labels ~ * .page > .list-index,
  9358. .md .toolbar-bottom-md.tabbar-labels ~ * .page > .list-index,
  9359. .toolbar-bottom.tabbar-labels ~ .list-index,
  9360. .ios .toolbar-bottom-ios.tabbar-labels ~ .list-index,
  9361. .md .toolbar-bottom-md.tabbar-labels ~ .list-index {
  9362. bottom: calc(var(--f7-tabbar-labels-height) + var(--f7-safe-area-bottom));
  9363. }
  9364. .ios .list-index .list-index-label {
  9365. margin-bottom: calc(-1 * var(--f7-list-index-label-size) / 2);
  9366. margin-right: calc(var(--f7-list-index-width) - 1px);
  9367. border-radius: 50%;
  9368. }
  9369. .ios .list-index .list-index-label:before {
  9370. position: absolute;
  9371. width: 100%;
  9372. height: 100%;
  9373. border-radius: 50% 0% 50% 50%;
  9374. content: '';
  9375. background-color: inherit;
  9376. left: 0;
  9377. top: 0;
  9378. transform: rotate(45deg);
  9379. z-index: -1;
  9380. }
  9381. .md .list-index .list-index-label {
  9382. border-radius: 50% 50% 0 50%;
  9383. }
  9384. .aurora .list-index .list-index-label {
  9385. margin-bottom: calc(-1 * var(--f7-list-index-label-size) / 2);
  9386. margin-right: calc(var(--f7-list-index-width) - 1px);
  9387. border-radius: 50%;
  9388. }
  9389. .aurora .list-index .list-index-label:before {
  9390. position: absolute;
  9391. width: 100%;
  9392. height: 100%;
  9393. border-radius: 50% 1px 50% 50%;
  9394. content: '';
  9395. background-color: inherit;
  9396. left: 0;
  9397. top: 0;
  9398. transform: rotate(45deg);
  9399. z-index: -1;
  9400. }
  9401. /* === Timeline === */
  9402. :root {
  9403. --f7-timeline-inner-block-margin-vertical: 16px;
  9404. --f7-timeline-divider-margin-horizontal: 16px;
  9405. --f7-timeline-horizontal-date-height: 34px;
  9406. --f7-timeline-year-height: 24px;
  9407. --f7-timeline-year-font-weight: inherit;
  9408. --f7-timeline-month-height: 24px;
  9409. --f7-timeline-month-font-size: inherit;
  9410. --f7-timeline-month-font-weight: inherit;
  9411. --f7-timeline-item-text-font-weight: inherit;
  9412. --f7-timeline-item-subtitle-font-weight: inherit;
  9413. --f7-timeline-item-inner-bg-color: #fff;
  9414. }
  9415. :root .theme-dark,
  9416. :root.theme-dark {
  9417. --f7-timeline-item-inner-bg-color: #1c1c1d;
  9418. --f7-timeline-horizontal-item-border-color: rgba(255, 255, 255, 0.15);
  9419. --f7-timeline-horizontal-item-date-border-color: rgba(255, 255, 255, 0.15);
  9420. }
  9421. .ios {
  9422. --f7-timeline-padding-horizontal: 16px;
  9423. --f7-timeline-margin-vertical: 35px;
  9424. --f7-timeline-item-inner-border-radius: 7px;
  9425. --f7-timeline-item-inner-box-shadow: none;
  9426. --f7-timeline-item-time-font-size: 13px;
  9427. --f7-timeline-item-title-font-size: 17px;
  9428. --f7-timeline-item-title-line-height: inherit;
  9429. --f7-timeline-item-title-font-weight: 600;
  9430. --f7-timeline-item-subtitle-font-size: 15px;
  9431. --f7-timeline-item-subtitle-line-height: inherit;
  9432. --f7-timeline-item-text-font-size: inherit;
  9433. --f7-timeline-item-text-color: inherit;
  9434. --f7-timeline-item-text-line-height: inherit;
  9435. --f7-timeline-year-font-size: 16px;
  9436. --f7-timeline-horizontal-item-padding: 10px;
  9437. --f7-timeline-horizontal-item-date-shadow-image: none;
  9438. --f7-timeline-item-time-text-color: rgba(0, 0, 0, 0.45);
  9439. --f7-timeline-horizontal-item-border-color: rgba(0, 0, 0, 0.22);
  9440. --f7-timeline-horizontal-item-date-border-color: rgba(0, 0, 0, 0.22);
  9441. }
  9442. .ios .theme-dark,
  9443. .ios.theme-dark {
  9444. --f7-timeline-item-time-text-color: rgba(255, 255, 255, 0.55);
  9445. }
  9446. .md {
  9447. --f7-timeline-padding-horizontal: 16px;
  9448. --f7-timeline-margin-vertical: 32px;
  9449. --f7-timeline-item-inner-border-radius: 4px;
  9450. --f7-timeline-item-inner-box-shadow: var(--f7-elevation-1);
  9451. --f7-timeline-item-time-font-size: 13px;
  9452. --f7-timeline-item-title-font-size: 16px;
  9453. --f7-timeline-item-title-line-height: inherit;
  9454. --f7-timeline-item-title-font-weight: 400;
  9455. --f7-timeline-item-subtitle-font-size: inherit;
  9456. --f7-timeline-item-subtitle-line-height: inherit;
  9457. --f7-timeline-item-text-font-size: inherit;
  9458. --f7-timeline-item-text-line-height: inherit;
  9459. --f7-timeline-item-text-color: inherit;
  9460. --f7-timeline-year-font-size: 16px;
  9461. --f7-timeline-horizontal-item-padding: 12px;
  9462. --f7-timeline-horizontal-item-date-shadow-image: var(--f7-bars-shadow-bottom-image);
  9463. --f7-timeline-item-time-text-color: rgba(0, 0, 0, 0.54);
  9464. --f7-timeline-horizontal-item-border-color: rgba(0, 0, 0, 0.12);
  9465. --f7-timeline-horizontal-item-date-border-color: transparent;
  9466. }
  9467. .md .theme-dark,
  9468. .md.theme-dark {
  9469. --f7-timeline-item-time-text-color: rgba(255, 255, 255, 0.54);
  9470. }
  9471. .aurora {
  9472. --f7-timeline-padding-horizontal: 10px;
  9473. --f7-timeline-margin-vertical: 15px;
  9474. --f7-timeline-item-inner-border-radius: 4px;
  9475. --f7-timeline-item-inner-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
  9476. --f7-timeline-item-time-font-size: 12px;
  9477. --f7-timeline-item-title-font-size: 14px;
  9478. --f7-timeline-item-title-line-height: 1.3;
  9479. --f7-timeline-item-title-font-weight: 600;
  9480. --f7-timeline-item-subtitle-font-size: 14px;
  9481. --f7-timeline-item-subtitle-line-height: 1.3;
  9482. --f7-timeline-item-text-font-size: 12px;
  9483. --f7-timeline-item-text-line-height: 1.33;
  9484. --f7-timeline-year-font-size: 14px;
  9485. --f7-timeline-year-font-weight: 500;
  9486. --f7-timeline-horizontal-item-padding: 10px;
  9487. --f7-timeline-horizontal-item-date-shadow-image: none;
  9488. --f7-timeline-item-time-text-color: rgba(0, 0, 0, 0.5);
  9489. --f7-timeline-item-text-color: rgba(0, 0, 0, 0.6);
  9490. --f7-timeline-horizontal-item-border-color: rgba(0, 0, 0, 0.2);
  9491. --f7-timeline-horizontal-item-date-border-color: rgba(0, 0, 0, 0.2);
  9492. }
  9493. .aurora .theme-dark,
  9494. .aurora.theme-dark {
  9495. --f7-timeline-item-time-text-color: rgba(255, 255, 255, 0.54);
  9496. --f7-timeline-item-text-color: rgba(255, 255, 255, 0.54);
  9497. }
  9498. .timeline {
  9499. box-sizing: border-box;
  9500. margin: var(--f7-timeline-margin-vertical) 0;
  9501. padding: 0 var(--f7-timeline-padding-horizontal);
  9502. padding-top: 0;
  9503. padding-bottom: 0;
  9504. padding-left: calc(var(--f7-timeline-padding-horizontal) + var(--f7-safe-area-left));
  9505. padding-right: calc(var(--f7-timeline-padding-horizontal) + var(--f7-safe-area-right));
  9506. }
  9507. .block-strong .timeline {
  9508. padding: 0;
  9509. margin: 0;
  9510. }
  9511. .timeline-item {
  9512. display: flex;
  9513. justify-content: flex-start;
  9514. overflow: hidden;
  9515. box-sizing: border-box;
  9516. position: relative;
  9517. padding: 2px 0px var(--f7-timeline-padding-horizontal);
  9518. }
  9519. .timeline-item:last-child {
  9520. padding-bottom: 2px;
  9521. }
  9522. .timeline-item-date {
  9523. flex-shrink: 0;
  9524. width: 50px;
  9525. text-align: right;
  9526. box-sizing: border-box;
  9527. }
  9528. .timeline-item-date small {
  9529. font-size: 10px;
  9530. }
  9531. .timeline-item-content {
  9532. margin: 2px;
  9533. min-width: 0;
  9534. position: relative;
  9535. flex-shrink: 10;
  9536. }
  9537. .timeline-item-content .card,
  9538. .timeline-item-content.card,
  9539. .timeline-item-content .list,
  9540. .timeline-item-content.list,
  9541. .timeline-item-content .block,
  9542. .timeline-item-content.block {
  9543. margin: 0;
  9544. width: 100%;
  9545. }
  9546. .timeline-item-content .card + .card,
  9547. .timeline-item-content .list + .card,
  9548. .timeline-item-content .block + .card,
  9549. .timeline-item-content .card + .list,
  9550. .timeline-item-content .list + .list,
  9551. .timeline-item-content .block + .list,
  9552. .timeline-item-content .card + .block,
  9553. .timeline-item-content .list + .block,
  9554. .timeline-item-content .block + .block {
  9555. margin: var(--f7-timeline-inner-block-margin-vertical) 0 0;
  9556. }
  9557. .timeline-item-content p:first-child,
  9558. .timeline-item-content ul:first-child,
  9559. .timeline-item-content ol:first-child,
  9560. .timeline-item-content h1:first-child,
  9561. .timeline-item-content h2:first-child,
  9562. .timeline-item-content h3:first-child,
  9563. .timeline-item-content h4:first-child {
  9564. margin-top: 0;
  9565. }
  9566. .timeline-item-content p:last-child,
  9567. .timeline-item-content ul:last-child,
  9568. .timeline-item-content ol:last-child,
  9569. .timeline-item-content h1:last-child,
  9570. .timeline-item-content h2:last-child,
  9571. .timeline-item-content h3:last-child,
  9572. .timeline-item-content h4:last-child {
  9573. margin-bottom: 0;
  9574. }
  9575. .timeline-item-inner {
  9576. background: var(--f7-timeline-item-inner-bg-color);
  9577. box-sizing: border-box;
  9578. border-radius: var(--f7-timeline-item-inner-border-radius);
  9579. padding: 8px var(--f7-timeline-padding-horizontal);
  9580. box-shadow: var(--f7-timeline-item-inner-box-shadow);
  9581. }
  9582. .timeline-item-inner + .timeline-item-inner {
  9583. margin-top: var(--f7-timeline-inner-block-margin-vertical);
  9584. }
  9585. .timeline-item-inner .block {
  9586. padding: 0;
  9587. color: inherit;
  9588. }
  9589. .timeline-item-inner .block-strong {
  9590. padding-left: 0;
  9591. padding-right: 0;
  9592. margin: 0;
  9593. }
  9594. .timeline-item-inner .block-strong:before,
  9595. .timeline-item-inner .block-strong:after {
  9596. display: none !important;
  9597. }
  9598. .timeline-item-inner .list ul:before,
  9599. .timeline-item-inner .list ul:after {
  9600. display: none !important;
  9601. }
  9602. .timeline-item-divider {
  9603. width: 1px;
  9604. position: relative;
  9605. width: 10px;
  9606. height: 10px;
  9607. background: #bbb;
  9608. border-radius: 50%;
  9609. flex-shrink: 0;
  9610. margin: 3px var(--f7-timeline-divider-margin-horizontal) 0;
  9611. }
  9612. .timeline-item-divider:after,
  9613. .timeline-item-divider:before {
  9614. content: ' ';
  9615. width: 1px;
  9616. height: 100vh;
  9617. position: absolute;
  9618. left: 50%;
  9619. background: inherit;
  9620. transform: translate3d(-50%, 0, 0);
  9621. }
  9622. .timeline-item-divider:after {
  9623. top: 100%;
  9624. }
  9625. .timeline-item-divider:before {
  9626. bottom: 100%;
  9627. }
  9628. .timeline-item:last-child .timeline-item-divider:after {
  9629. display: none;
  9630. }
  9631. .timeline-item:first-child .timeline-item-divider:before {
  9632. display: none;
  9633. }
  9634. .timeline-item-time {
  9635. font-size: var(--f7-timeline-item-time-font-size);
  9636. margin-top: var(--f7-timeline-inner-block-margin-vertical);
  9637. color: var(--f7-timeline-item-time-text-color);
  9638. }
  9639. .timeline-item-time:first-child,
  9640. .timeline-item-time:last-child {
  9641. margin-top: 0;
  9642. }
  9643. .timeline-item-title + .timeline-item-time {
  9644. margin-top: 0;
  9645. }
  9646. .timeline-item-title {
  9647. font-size: var(--f7-timeline-item-title-font-size);
  9648. font-weight: var(--f7-timeline-item-title-font-weight);
  9649. line-height: var(--f7-timeline-item-title-line-height);
  9650. }
  9651. .timeline-item-subtitle {
  9652. font-size: var(--f7-timeline-item-subtitle-font-size);
  9653. font-weight: var(--f7-timeline-item-subtitle-font-weight);
  9654. line-height: var(--f7-timeline-item-subtitle-line-height);
  9655. }
  9656. .timeline-item-text {
  9657. color: var(--f7-timeline-item-text-color);
  9658. font-size: var(--f7-timeline-item-text-font-size);
  9659. font-weight: var(--f7-timeline-item-text-font-weight);
  9660. line-height: var(--f7-timeline-item-text-line-height);
  9661. }
  9662. .timeline-sides .timeline-item-right,
  9663. .timeline-sides .timeline-item {
  9664. margin-right: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
  9665. margin-left: 0;
  9666. }
  9667. .timeline-sides .timeline-item-right .timeline-item-date,
  9668. .timeline-sides .timeline-item .timeline-item-date {
  9669. text-align: left;
  9670. }
  9671. .timeline-sides .timeline-item-left,
  9672. .timeline-sides .timeline-item:not(.timeline-item-right):nth-child(2n) {
  9673. flex-direction: row-reverse;
  9674. margin-left: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
  9675. margin-right: 0;
  9676. }
  9677. .timeline-sides .timeline-item-left .timeline-item-date,
  9678. .timeline-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date {
  9679. text-align: right;
  9680. }
  9681. @media (min-width: 480px) {
  9682. .xsmall-sides .timeline-item-right,
  9683. .xsmall-sides .timeline-item {
  9684. margin-right: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
  9685. margin-left: 0;
  9686. }
  9687. .xsmall-sides .timeline-item-right .timeline-item-date,
  9688. .xsmall-sides .timeline-item .timeline-item-date {
  9689. text-align: left;
  9690. }
  9691. .xsmall-sides .timeline-item-left,
  9692. .xsmall-sides .timeline-item:not(.timeline-item-right):nth-child(2n) {
  9693. flex-direction: row-reverse;
  9694. margin-left: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
  9695. margin-right: 0;
  9696. }
  9697. .xsmall-sides .timeline-item-left .timeline-item-date,
  9698. .xsmall-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date {
  9699. text-align: right;
  9700. }
  9701. }
  9702. @media (min-width: 568px) {
  9703. .small-sides .timeline-item-right,
  9704. .small-sides .timeline-item {
  9705. margin-right: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
  9706. margin-left: 0;
  9707. }
  9708. .small-sides .timeline-item-right .timeline-item-date,
  9709. .small-sides .timeline-item .timeline-item-date {
  9710. text-align: left;
  9711. }
  9712. .small-sides .timeline-item-left,
  9713. .small-sides .timeline-item:not(.timeline-item-right):nth-child(2n) {
  9714. flex-direction: row-reverse;
  9715. margin-left: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
  9716. margin-right: 0;
  9717. }
  9718. .small-sides .timeline-item-left .timeline-item-date,
  9719. .small-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date {
  9720. text-align: right;
  9721. }
  9722. }
  9723. @media (min-width: 768px) {
  9724. .medium-sides .timeline-item-right,
  9725. .medium-sides .timeline-item {
  9726. margin-right: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
  9727. margin-left: 0;
  9728. }
  9729. .medium-sides .timeline-item-right .timeline-item-date,
  9730. .medium-sides .timeline-item .timeline-item-date {
  9731. text-align: left;
  9732. }
  9733. .medium-sides .timeline-item-left,
  9734. .medium-sides .timeline-item:not(.timeline-item-right):nth-child(2n) {
  9735. flex-direction: row-reverse;
  9736. margin-left: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
  9737. margin-right: 0;
  9738. }
  9739. .medium-sides .timeline-item-left .timeline-item-date,
  9740. .medium-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date {
  9741. text-align: right;
  9742. }
  9743. }
  9744. @media (min-width: 1024px) {
  9745. .large-sides .timeline-item-right,
  9746. .large-sides .timeline-item {
  9747. margin-right: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
  9748. margin-left: 0;
  9749. }
  9750. .large-sides .timeline-item-right .timeline-item-date,
  9751. .large-sides .timeline-item .timeline-item-date {
  9752. text-align: left;
  9753. }
  9754. .large-sides .timeline-item-left,
  9755. .large-sides .timeline-item:not(.timeline-item-right):nth-child(2n) {
  9756. flex-direction: row-reverse;
  9757. margin-left: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
  9758. margin-right: 0;
  9759. }
  9760. .large-sides .timeline-item-left .timeline-item-date,
  9761. .large-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date {
  9762. text-align: right;
  9763. }
  9764. }
  9765. @media (min-width: 1200px) {
  9766. .xlarge-sides .timeline-item-right,
  9767. .xlarge-sides .timeline-item {
  9768. margin-right: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
  9769. margin-left: 0;
  9770. }
  9771. .xlarge-sides .timeline-item-right .timeline-item-date,
  9772. .xlarge-sides .timeline-item .timeline-item-date {
  9773. text-align: left;
  9774. }
  9775. .xlarge-sides .timeline-item-left,
  9776. .xlarge-sides .timeline-item:not(.timeline-item-right):nth-child(2n) {
  9777. flex-direction: row-reverse;
  9778. margin-left: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
  9779. margin-right: 0;
  9780. }
  9781. .xlarge-sides .timeline-item-left .timeline-item-date,
  9782. .xlarge-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date {
  9783. text-align: right;
  9784. }
  9785. }
  9786. .timeline-horizontal {
  9787. height: 100%;
  9788. display: flex;
  9789. padding: 0;
  9790. margin: 0;
  9791. position: relative;
  9792. padding-left: var(--f7-safe-area-left);
  9793. padding-right: 0;
  9794. }
  9795. .timeline-horizontal .timeline-item {
  9796. display: block;
  9797. width: 33.33333333vw;
  9798. margin: 0;
  9799. padding: 0;
  9800. flex-shrink: 0;
  9801. position: relative;
  9802. height: 100%;
  9803. padding-top: var(--f7-timeline-horizontal-date-height) !important;
  9804. padding-bottom: var(--f7-timeline-horizontal-item-padding);
  9805. }
  9806. .timeline-horizontal .timeline-item:after {
  9807. content: '';
  9808. position: absolute;
  9809. background-color: var(--f7-timeline-horizontal-item-border-color);
  9810. display: block;
  9811. z-index: 15;
  9812. top: 0;
  9813. right: 0;
  9814. bottom: auto;
  9815. left: auto;
  9816. width: 1px;
  9817. height: 100%;
  9818. transform-origin: 100% 50%;
  9819. transform: scaleX(calc(1 / var(--f7-device-pixel-ratio)));
  9820. }
  9821. .timeline-horizontal .timeline-item-date {
  9822. padding: 0px var(--f7-timeline-horizontal-item-padding);
  9823. width: auto;
  9824. text-align: left;
  9825. line-height: var(--f7-timeline-horizontal-date-height);
  9826. position: absolute;
  9827. left: 0;
  9828. top: 0;
  9829. width: 100%;
  9830. height: var(--f7-timeline-horizontal-date-height);
  9831. background-color: var(--f7-bars-bg-color);
  9832. color: var(--f7-bars-text-color);
  9833. text-align: right;
  9834. }
  9835. @supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  9836. .ios-translucent-bars .timeline-horizontal .timeline-item-date {
  9837. background-color: rgba(var(--f7-bars-bg-color-rgb), var(--f7-bars-translucent-opacity));
  9838. -webkit-backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
  9839. backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
  9840. }
  9841. }
  9842. .timeline-horizontal .timeline-item-date:after {
  9843. content: '';
  9844. position: absolute;
  9845. background-color: var(--f7-timeline-horizontal-item-date-border-color);
  9846. display: block;
  9847. z-index: 15;
  9848. top: auto;
  9849. right: auto;
  9850. bottom: 0;
  9851. left: 0;
  9852. height: 1px;
  9853. width: 100%;
  9854. transform-origin: 50% 100%;
  9855. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  9856. }
  9857. .timeline-horizontal .timeline-item-date:before {
  9858. content: '';
  9859. position: absolute;
  9860. right: 0;
  9861. width: 100%;
  9862. top: 100%;
  9863. bottom: auto;
  9864. height: 8px;
  9865. pointer-events: none;
  9866. background: var(--f7-timeline-horizontal-item-date-shadow-image);
  9867. }
  9868. .timeline-horizontal.no-shadow .timeline-item-date:before {
  9869. display: none;
  9870. }
  9871. .timeline-horizontal .timeline-item-content {
  9872. padding: var(--f7-timeline-horizontal-item-padding);
  9873. height: calc(100% - var(--f7-timeline-horizontal-item-padding));
  9874. overflow: auto;
  9875. -webkit-overflow-scrolling: touch;
  9876. margin: 0;
  9877. }
  9878. .timeline-horizontal .timeline-item-divider {
  9879. display: none;
  9880. }
  9881. .timeline-horizontal > .timeline-item:last-child:after,
  9882. .timeline-horizontal .timeline-month:last-child .timeline-item:last-child:after {
  9883. display: none !important;
  9884. }
  9885. .timeline-horizontal.col-5 .timeline-item {
  9886. width: 5vw;
  9887. }
  9888. .timeline-horizontal.col-10 .timeline-item {
  9889. width: 10vw;
  9890. }
  9891. .timeline-horizontal.col-15 .timeline-item {
  9892. width: 15vw;
  9893. }
  9894. .timeline-horizontal.col-20 .timeline-item {
  9895. width: 20vw;
  9896. }
  9897. .timeline-horizontal.col-25 .timeline-item {
  9898. width: 25vw;
  9899. }
  9900. .timeline-horizontal.col-30 .timeline-item {
  9901. width: 30vw;
  9902. }
  9903. .timeline-horizontal.col-33 .timeline-item {
  9904. width: 33.333333333333336vw;
  9905. }
  9906. .timeline-horizontal.col-35 .timeline-item {
  9907. width: 35vw;
  9908. }
  9909. .timeline-horizontal.col-40 .timeline-item {
  9910. width: 40vw;
  9911. }
  9912. .timeline-horizontal.col-45 .timeline-item {
  9913. width: 45vw;
  9914. }
  9915. .timeline-horizontal.col-50 .timeline-item {
  9916. width: 50vw;
  9917. }
  9918. .timeline-horizontal.col-55 .timeline-item {
  9919. width: 55vw;
  9920. }
  9921. .timeline-horizontal.col-60 .timeline-item {
  9922. width: 60vw;
  9923. }
  9924. .timeline-horizontal.col-65 .timeline-item {
  9925. width: 65vw;
  9926. }
  9927. .timeline-horizontal.col-66 .timeline-item {
  9928. width: 66.66666666666666vw;
  9929. }
  9930. .timeline-horizontal.col-70 .timeline-item {
  9931. width: 70vw;
  9932. }
  9933. .timeline-horizontal.col-75 .timeline-item {
  9934. width: 75vw;
  9935. }
  9936. .timeline-horizontal.col-80 .timeline-item {
  9937. width: 80vw;
  9938. }
  9939. .timeline-horizontal.col-85 .timeline-item {
  9940. width: 85vw;
  9941. }
  9942. .timeline-horizontal.col-90 .timeline-item {
  9943. width: 90vw;
  9944. }
  9945. .timeline-horizontal.col-95 .timeline-item {
  9946. width: 95vw;
  9947. }
  9948. .timeline-horizontal.col-100 .timeline-item {
  9949. width: 100vw;
  9950. }
  9951. @media (min-width: 768px) {
  9952. .timeline-horizontal.tablet-5 .timeline-item {
  9953. width: 5vw;
  9954. }
  9955. .timeline-horizontal.tablet-10 .timeline-item {
  9956. width: 10vw;
  9957. }
  9958. .timeline-horizontal.tablet-15 .timeline-item {
  9959. width: 15vw;
  9960. }
  9961. .timeline-horizontal.tablet-20 .timeline-item {
  9962. width: 20vw;
  9963. }
  9964. .timeline-horizontal.tablet-25 .timeline-item {
  9965. width: 25vw;
  9966. }
  9967. .timeline-horizontal.tablet-30 .timeline-item {
  9968. width: 30vw;
  9969. }
  9970. .timeline-horizontal.tablet-33 .timeline-item {
  9971. width: 33.333333333333336vw;
  9972. }
  9973. .timeline-horizontal.tablet-35 .timeline-item {
  9974. width: 35vw;
  9975. }
  9976. .timeline-horizontal.tablet-40 .timeline-item {
  9977. width: 40vw;
  9978. }
  9979. .timeline-horizontal.tablet-45 .timeline-item {
  9980. width: 45vw;
  9981. }
  9982. .timeline-horizontal.tablet-50 .timeline-item {
  9983. width: 50vw;
  9984. }
  9985. .timeline-horizontal.tablet-55 .timeline-item {
  9986. width: 55vw;
  9987. }
  9988. .timeline-horizontal.tablet-60 .timeline-item {
  9989. width: 60vw;
  9990. }
  9991. .timeline-horizontal.tablet-65 .timeline-item {
  9992. width: 65vw;
  9993. }
  9994. .timeline-horizontal.tablet-66 .timeline-item {
  9995. width: 66.66666666666666vw;
  9996. }
  9997. .timeline-horizontal.tablet-70 .timeline-item {
  9998. width: 70vw;
  9999. }
  10000. .timeline-horizontal.tablet-75 .timeline-item {
  10001. width: 75vw;
  10002. }
  10003. .timeline-horizontal.tablet-80 .timeline-item {
  10004. width: 80vw;
  10005. }
  10006. .timeline-horizontal.tablet-85 .timeline-item {
  10007. width: 85vw;
  10008. }
  10009. .timeline-horizontal.tablet-90 .timeline-item {
  10010. width: 90vw;
  10011. }
  10012. .timeline-horizontal.tablet-95 .timeline-item {
  10013. width: 95vw;
  10014. }
  10015. .timeline-horizontal.tablet-100 .timeline-item {
  10016. width: 100vw;
  10017. }
  10018. }
  10019. .timeline-year {
  10020. padding-top: var(--f7-timeline-year-height);
  10021. }
  10022. .timeline-year:after {
  10023. content: '';
  10024. position: absolute;
  10025. background-color: var(--f7-timeline-horizontal-item-border-color);
  10026. display: block;
  10027. z-index: 15;
  10028. top: 0;
  10029. right: 0;
  10030. bottom: auto;
  10031. left: auto;
  10032. width: 1px;
  10033. height: 100%;
  10034. transform-origin: 100% 50%;
  10035. transform: scaleX(calc(1 / var(--f7-device-pixel-ratio)));
  10036. }
  10037. .timeline-year:last-child:after {
  10038. display: none !important;
  10039. }
  10040. .timeline-month {
  10041. padding-top: var(--f7-timeline-month-height);
  10042. }
  10043. .timeline-month .timeline-item:before {
  10044. content: '';
  10045. position: absolute;
  10046. background-color: var(--f7-timeline-horizontal-item-border-color);
  10047. display: block;
  10048. z-index: 15;
  10049. top: 0;
  10050. right: auto;
  10051. bottom: auto;
  10052. left: 0;
  10053. height: 1px;
  10054. width: 100%;
  10055. transform-origin: 50% 0%;
  10056. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  10057. }
  10058. .timeline-year,
  10059. .timeline-month {
  10060. display: flex;
  10061. flex-shrink: 0;
  10062. position: relative;
  10063. box-sizing: border-box;
  10064. height: 100%;
  10065. }
  10066. .timeline-year-title {
  10067. line-height: var(--f7-timeline-year-height);
  10068. height: var(--f7-timeline-year-height);
  10069. font-size: var(--f7-timeline-year-font-size);
  10070. font-weight: var(--f7-timeline-year-font-weight);
  10071. }
  10072. .timeline-month-title {
  10073. line-height: var(--f7-timeline-month-height);
  10074. height: var(--f7-timeline-month-height);
  10075. font-size: var(--f7-timeline-month-font-size);
  10076. font-weight: var(--f7-timeline-month-font-weight);
  10077. }
  10078. .timeline-year-title,
  10079. .timeline-month-title {
  10080. position: absolute;
  10081. left: 0;
  10082. top: 0;
  10083. width: 100%;
  10084. box-sizing: border-box;
  10085. padding: 0 var(--f7-timeline-horizontal-item-padding);
  10086. background-color: var(--f7-bars-bg-color);
  10087. color: var(--f7-bars-text-color);
  10088. }
  10089. @supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  10090. .ios-translucent-bars .timeline-year-title,
  10091. .ios-translucent-bars .timeline-month-title {
  10092. background-color: rgba(var(--f7-bars-bg-color-rgb), var(--f7-bars-translucent-opacity));
  10093. -webkit-backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
  10094. backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
  10095. }
  10096. }
  10097. .timeline-year-title span,
  10098. .timeline-month-title span {
  10099. display: inline-block;
  10100. position: -webkit-sticky;
  10101. position: sticky;
  10102. right: calc(var(--f7-timeline-horizontal-item-padding) + var(--f7-safe-area-right));
  10103. }
  10104. .timeline-month-title span {
  10105. margin-top: -2px;
  10106. }
  10107. .timeline-year:first-child .timeline-year-title,
  10108. .timeline-year:first-child .timeline-month:first-child .timeline-month-title,
  10109. .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title {
  10110. left: calc(var(--f7-safe-area-left) * -1);
  10111. right: 0;
  10112. width: auto;
  10113. }
  10114. .timeline-horizontal .timeline-item:first-child,
  10115. .timeline-year:first-child .timeline-month:first-child .timeline-item:first-child,
  10116. .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-item:first-child,
  10117. .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title + .timeline-item {
  10118. overflow: visible;
  10119. }
  10120. .timeline-horizontal .timeline-item:first-child .timeline-item-date,
  10121. .timeline-year:first-child .timeline-month:first-child .timeline-item:first-child .timeline-item-date,
  10122. .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-item:first-child .timeline-item-date,
  10123. .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title + .timeline-item .timeline-item-date {
  10124. width: auto;
  10125. padding-left: calc(var(--f7-timeline-horizontal-item-padding) + var(--f7-safe-area-left));
  10126. left: calc(0px - var(--f7-safe-area-left));
  10127. right: 0;
  10128. }
  10129. .timeline-year:last-child .timeline-year-title,
  10130. .timeline-year:last-child .timeline-month:last-child .timeline-month-title {
  10131. width: auto;
  10132. right: calc(0px - var(--f7-safe-area-right));
  10133. }
  10134. .timeline-horizontal .timeline-item:last-child,
  10135. .timeline-year:last-child .timeline-month:last-child .timeline-item:last-child {
  10136. overflow: visible;
  10137. }
  10138. .timeline-horizontal .timeline-item:last-child .timeline-item-date,
  10139. .timeline-year:last-child .timeline-month:last-child .timeline-item:last-child .timeline-item-date {
  10140. width: auto;
  10141. right: calc(0px - var(--f7-safe-area-right));
  10142. left: 0;
  10143. }
  10144. .ios .block-strong .timeline-item-inner {
  10145. border-radius: 3px;
  10146. border: 1px solid rgba(0, 0, 0, 0.1);
  10147. }
  10148. .ios .timeline-year-title span {
  10149. margin-top: 3px;
  10150. }
  10151. .md .timeline-year-title span {
  10152. margin-top: 2px;
  10153. }
  10154. .aurora .timeline-year-title span {
  10155. margin-top: 2px;
  10156. }
  10157. /* === Tabs === */
  10158. .tabs .tab {
  10159. display: none;
  10160. }
  10161. .tabs .tab-active {
  10162. display: block;
  10163. }
  10164. .tabs-animated-wrap {
  10165. position: relative;
  10166. width: 100%;
  10167. overflow: hidden;
  10168. height: 100%;
  10169. }
  10170. .tabs-animated-wrap > .tabs {
  10171. display: flex;
  10172. height: 100%;
  10173. transition-duration: 300ms;
  10174. }
  10175. .tabs-animated-wrap > .tabs > .tab {
  10176. width: 100%;
  10177. display: block;
  10178. flex-shrink: 0;
  10179. }
  10180. .tabs-animated-wrap.not-animated > .tabs {
  10181. transition-duration: 0ms;
  10182. }
  10183. .tabs-swipeable-wrap {
  10184. height: 100%;
  10185. }
  10186. .tabs-swipeable-wrap > .tabs {
  10187. height: 100%;
  10188. }
  10189. .tabs-swipeable-wrap > .tabs > .tab {
  10190. display: block;
  10191. }
  10192. .page > .tabs {
  10193. height: 100%;
  10194. }
  10195. /* === Panels === */
  10196. :root {
  10197. --f7-panel-width: 260px;
  10198. /*
  10199. --f7-panel-left-width: var(--f7-panel-width);
  10200. --f7-panel-right-width: var(--f7-panel-width);
  10201. --f7-panel-left-collapsed-width: var(--f7-panel-collapsed-width);
  10202. --f7-panel-right-collapsed-width: var(--f7-panel-collapsed-width);
  10203. */
  10204. --f7-panel-bg-color: #fff;
  10205. }
  10206. .ios {
  10207. --f7-panel-collapsed-width: 58px;
  10208. --f7-panel-backdrop-bg-color: rgba(0, 0, 0, 0);
  10209. --f7-panel-transition-duration: 400ms;
  10210. --f7-panel-shadow: transparent;
  10211. }
  10212. .md {
  10213. --f7-panel-collapsed-width: 60px;
  10214. --f7-panel-backdrop-bg-color: rgba(0, 0, 0, 0.3);
  10215. --f7-panel-transition-duration: 300ms;
  10216. --f7-panel-shadow: rgba(0, 0, 0, 0.2) 0%,
  10217. rgba(0, 0, 0, 0.07) 30%,
  10218. rgba(0, 0, 0, 0.03) 40%,
  10219. rgba(0, 0, 0, 0) 60%,
  10220. rgba(0, 0, 0, 0) 100%;
  10221. }
  10222. .aurora {
  10223. --f7-panel-collapsed-width: 44px;
  10224. --f7-panel-backdrop-bg-color: rgba(0, 0, 0, 0.2);
  10225. --f7-panel-transition-duration: 400ms;
  10226. --f7-panel-shadow: transparent;
  10227. }
  10228. .panel-backdrop {
  10229. position: absolute;
  10230. left: 0;
  10231. top: var(--f7-appbar-app-offset, 0px);
  10232. width: 100%;
  10233. height: calc(100% - var(--f7-appbar-app-offset, 0px));
  10234. opacity: 0;
  10235. z-index: 5999;
  10236. visibility: hidden;
  10237. pointer-events: none;
  10238. transform: translate3d(0, 0, 0);
  10239. background-color: var(--f7-panel-backdrop-bg-color);
  10240. transition-property: transform, opacity;
  10241. transition-duration: var(--f7-panel-transition-duration);
  10242. }
  10243. .panel-backdrop .with-panel,
  10244. .panel-backdrop .with-panel-closing {
  10245. visibility: visible;
  10246. }
  10247. .panel-backdrop.not-animated {
  10248. transition-duration: 0ms !important;
  10249. }
  10250. .panel {
  10251. z-index: 1000;
  10252. box-sizing: border-box;
  10253. position: absolute;
  10254. top: var(--f7-appbar-app-offset, 0px);
  10255. height: calc(100% - var(--f7-appbar-app-offset, 0px));
  10256. transform: translate3d(0, 0, 0);
  10257. width: var(--f7-panel-width);
  10258. background-color: var(--f7-panel-bg-color);
  10259. overflow: visible;
  10260. transition-property: transform;
  10261. transition-duration: var(--f7-panel-transition-duration);
  10262. }
  10263. .panel:not(.panel-in):not(.panel-out):not(.panel-in-breakpoint):not(.panel-in-collapsed):not(.panel-in-swipe) {
  10264. display: none;
  10265. }
  10266. .panel:after {
  10267. pointer-events: none;
  10268. opacity: 0;
  10269. z-index: 5999;
  10270. position: absolute;
  10271. content: '';
  10272. top: 0;
  10273. width: 20px;
  10274. height: 100%;
  10275. transition-property: transform, opacity;
  10276. transition-duration: var(--f7-panel-transition-duration);
  10277. }
  10278. .panel.not-animated,
  10279. .panel.not-animated:after {
  10280. transition-duration: 0ms !important;
  10281. }
  10282. .panel.panel-reveal.not-animated ~ .views,
  10283. .panel.panel-reveal.not-animated ~ .view {
  10284. transition-duration: 0ms !important;
  10285. }
  10286. .panel.panel-resizing {
  10287. -webkit-user-select: none;
  10288. -moz-user-select: none;
  10289. user-select: none;
  10290. }
  10291. .panel.panel-resizing,
  10292. .panel.panel-resizing:after,
  10293. .panel.panel-resizing ~ .views,
  10294. .panel.panel-resizing ~ .view {
  10295. transition-duration: 0ms !important;
  10296. }
  10297. .panel-cover {
  10298. z-index: 6000;
  10299. }
  10300. .panel-left {
  10301. left: 0;
  10302. width: var(--f7-panel-left-width, var(--f7-panel-width));
  10303. }
  10304. .panel-left.panel-cover {
  10305. transform: translate3d(calc(-1 * var(--f7-panel-left-width, var(--f7-panel-width))), 0, 0);
  10306. }
  10307. .panel-left.panel-cover:after {
  10308. left: 100%;
  10309. background: linear-gradient(to right, var(--f7-panel-shadow));
  10310. }
  10311. html.with-panel-left-cover .panel-left.panel-cover:after {
  10312. opacity: 1;
  10313. }
  10314. .panel-left.panel-reveal:after {
  10315. right: 0;
  10316. transform: translate3d(calc(-1 * var(--f7-panel-left-width, var(--f7-panel-width))), 0, 0);
  10317. background: linear-gradient(to left, var(--f7-panel-shadow));
  10318. }
  10319. html.with-panel-left-reveal .panel-left.panel-reveal:after {
  10320. opacity: 1;
  10321. transform: translate3d(0, 0, 0);
  10322. }
  10323. .panel-right {
  10324. right: 0;
  10325. width: var(--f7-panel-right-width, var(--f7-panel-width));
  10326. }
  10327. .panel-right.panel-cover {
  10328. transform: translate3d(var(--f7-panel-right-width, var(--f7-panel-width)), 0, 0);
  10329. }
  10330. .panel-right.panel-cover:after {
  10331. right: 100%;
  10332. background: linear-gradient(to left, var(--f7-panel-shadow));
  10333. }
  10334. html.with-panel-right-cover .panel-right.panel-cover:after {
  10335. opacity: 1;
  10336. }
  10337. .panel-right.panel-reveal:after {
  10338. left: 0;
  10339. background: linear-gradient(to right, var(--f7-panel-shadow));
  10340. transform: translate3d(var(--f7-panel-right-width, var(--f7-panel-width)), 0, 0);
  10341. }
  10342. html.with-panel-right-reveal .panel-right.panel-reveal:after {
  10343. opacity: 1;
  10344. transform: translate3d(0, 0, 0);
  10345. }
  10346. .panel-in-breakpoint {
  10347. transform: translate3d(0, 0, 0) !important;
  10348. transition-duration: 0ms;
  10349. }
  10350. .panel-in-breakpoint:after {
  10351. display: none;
  10352. }
  10353. .panel-in-breakpoint.panel-cover {
  10354. z-index: 5900;
  10355. }
  10356. html.with-panel-left-reveal .views,
  10357. html.with-panel-right-reveal .views,
  10358. html.with-panel-closing .views,
  10359. html.with-panel-left-reveal .framework7-root > .view,
  10360. html.with-panel-right-reveal .framework7-root > .view,
  10361. html.with-panel-closing .framework7-root > .view {
  10362. transition-duration: var(--f7-panel-transition-duration);
  10363. transition-property: transform;
  10364. }
  10365. html.with-panel-left-reveal .panel-backdrop-in,
  10366. html.with-panel-right-reveal .panel-backdrop-in,
  10367. html.with-panel-closing .panel-backdrop-in {
  10368. visibility: visible;
  10369. pointer-events: auto;
  10370. opacity: 0;
  10371. }
  10372. html.with-panel .framework7-root > .views .page-content,
  10373. html.with-panel .framework7-root > .view .page-content {
  10374. overflow: hidden;
  10375. -webkit-overflow-scrolling: auto;
  10376. }
  10377. html.with-panel-left-cover .panel-backdrop-in,
  10378. html.with-panel-right-cover .panel-backdrop-in {
  10379. visibility: visible;
  10380. pointer-events: auto;
  10381. opacity: 1;
  10382. }
  10383. html.with-panel-left-reveal .views,
  10384. html.with-panel-left-reveal .framework7-root > .view,
  10385. html.with-panel-left-reveal .panel-backdrop-in {
  10386. transform: translate3d(var(--f7-panel-left-width, var(--f7-panel-width)), 0, 0);
  10387. }
  10388. html.with-panel-right-reveal .views,
  10389. html.with-panel-right-reveal .framework7-root > .view,
  10390. html.with-panel-right-reveal .panel-backdrop-in {
  10391. transform: translate3d(calc(-1 * var(--f7-panel-right-width, var(--f7-panel-width))), 0, 0);
  10392. }
  10393. html.with-panel-left-cover .panel-left {
  10394. transform: translate3d(0px, 0, 0);
  10395. }
  10396. html.with-panel-right-cover .panel-right {
  10397. transform: translate3d(0px, 0, 0);
  10398. }
  10399. .panel-resize-handler {
  10400. position: absolute;
  10401. top: 0;
  10402. height: 100%;
  10403. width: 6px;
  10404. cursor: col-resize;
  10405. z-index: 6000;
  10406. display: none;
  10407. }
  10408. .panel-resizable .panel-resize-handler {
  10409. display: block;
  10410. }
  10411. .panel-left.panel-cover .panel-resize-handler {
  10412. right: -3px;
  10413. }
  10414. .panel-left.panel-reveal .panel-resize-handler {
  10415. right: 0;
  10416. }
  10417. .panel-right.panel-cover .panel-resize-handler {
  10418. left: -3px;
  10419. }
  10420. .panel-right.panel-reveal .panel-resize-handler {
  10421. left: 0;
  10422. }
  10423. .panel-left.panel-in-collapsed ~ .views,
  10424. .panel-left.panel-in-collapsed ~ .view {
  10425. margin-left: var(--f7-panel-left-collapsed-width, var(--f7-panel-collapsed-width));
  10426. }
  10427. html.with-panel-left-reveal .panel-left.panel-in-collapsed ~ .views,
  10428. html.with-panel-left-reveal .panel-left.panel-in-collapsed ~ .view {
  10429. transform: translate3d(calc(var(--f7-panel-left-width, var(--f7-panel-width)) - var(--f7-panel-left-collapsed-width, var(--f7-panel-collapsed-width))), 0, 0);
  10430. }
  10431. .panel-right.panel-in-collapsed ~ .views,
  10432. .panel-right.panel-in-collapsed ~ .view {
  10433. margin-right: var(--f7-panel-right-collapsed-width, var(--f7-panel-collapsed-width));
  10434. }
  10435. html.with-panel-right-reveal .panel-right.panel-in-collapsed ~ .views,
  10436. html.with-panel-right-reveal .panel-right.panel-in-collapsed ~ .view {
  10437. transform: translate3d(calc(var(--f7-panel-right-collapsed-width, var(--f7-panel-collapsed-width)) - var(--f7-panel-right-width, var(--f7-panel-width))), 0, 0);
  10438. }
  10439. html.with-modal-popup-push .framework7-root,
  10440. html.with-modal-popup-push-closing .framework7-root {
  10441. --f7-panelPushScale: var(--f7-popup-push-scale);
  10442. --f7-panelPushTransitionDuration: var(--f7-popup-transition-duration);
  10443. --f7-panelPushBorderRadius: var(--f7-popup-push-border-radius);
  10444. }
  10445. html.with-modal-sheet-push .framework7-root,
  10446. html.with-modal-sheet-push-closing .framework7-root {
  10447. --f7-panelPushScale: var(--f7-sheet-push-scale);
  10448. --f7-panelPushTransitionDuration: var(--f7-sheet-transition-duration);
  10449. --f7-panelPushBorderRadius: var(--f7-sheet-push-border-radius);
  10450. }
  10451. html.with-modal-popup-push .framework7-root > .panel-in,
  10452. html.with-modal-sheet-push .framework7-root > .panel-in,
  10453. html.with-modal-popup-push .framework7-root > .panel-out,
  10454. html.with-modal-sheet-push .framework7-root > .panel-out {
  10455. transition-duration: var(--f7-panelPushTransitionDuration);
  10456. }
  10457. html.with-modal-popup-push .framework7-root > .panel-in.panel-reveal.panel-left,
  10458. html.with-modal-sheet-push .framework7-root > .panel-in.panel-reveal.panel-left,
  10459. html.with-modal-popup-push .framework7-root > .panel-out.panel-reveal.panel-left,
  10460. html.with-modal-sheet-push .framework7-root > .panel-out.panel-reveal.panel-left {
  10461. transform: scale(var(--f7-panelPushScale, 1));
  10462. transform-origin: 50vw center;
  10463. border-top-left-radius: var(--f7-panelPushBorderRadius);
  10464. }
  10465. html.with-modal-popup-push .framework7-root > .panel-in.panel-reveal.panel-left .view,
  10466. html.with-modal-sheet-push .framework7-root > .panel-in.panel-reveal.panel-left .view,
  10467. html.with-modal-popup-push .framework7-root > .panel-out.panel-reveal.panel-left .view,
  10468. html.with-modal-sheet-push .framework7-root > .panel-out.panel-reveal.panel-left .view {
  10469. border-top-left-radius: var(--f7-panelPushBorderRadius);
  10470. }
  10471. html.with-modal-popup-push .framework7-root > .panel-in.panel-reveal.panel-right,
  10472. html.with-modal-sheet-push .framework7-root > .panel-in.panel-reveal.panel-right,
  10473. html.with-modal-popup-push .framework7-root > .panel-out.panel-reveal.panel-right,
  10474. html.with-modal-sheet-push .framework7-root > .panel-out.panel-reveal.panel-right {
  10475. transform: scale(var(--f7-panelPushScale, 1));
  10476. transform-origin: calc(var(--f7-panel-left-width, var(--f7-panel-width)) - 50vw) center;
  10477. border-top-right-radius: var(--f7-panelPushBorderRadius);
  10478. }
  10479. html.with-modal-popup-push .framework7-root > .panel-in.panel-reveal.panel-right .view,
  10480. html.with-modal-sheet-push .framework7-root > .panel-in.panel-reveal.panel-right .view,
  10481. html.with-modal-popup-push .framework7-root > .panel-out.panel-reveal.panel-right .view,
  10482. html.with-modal-sheet-push .framework7-root > .panel-out.panel-reveal.panel-right .view {
  10483. border-top-right-radius: var(--f7-panelPushBorderRadius);
  10484. }
  10485. html.with-modal-popup-push .framework7-root > .panel-in.panel-cover.panel-left,
  10486. html.with-modal-sheet-push .framework7-root > .panel-in.panel-cover.panel-left,
  10487. html.with-modal-popup-push .framework7-root > .panel-out.panel-cover.panel-left,
  10488. html.with-modal-sheet-push .framework7-root > .panel-out.panel-cover.panel-left {
  10489. transform: translate3d(calc(-1 * var(--f7-panel-left-width, var(--f7-panel-width))), 0, 0px);
  10490. }
  10491. html.with-modal-popup-push .framework7-root > .panel-in.panel-cover.panel-right,
  10492. html.with-modal-sheet-push .framework7-root > .panel-in.panel-cover.panel-right,
  10493. html.with-modal-popup-push .framework7-root > .panel-out.panel-cover.panel-right,
  10494. html.with-modal-sheet-push .framework7-root > .panel-out.panel-cover.panel-right {
  10495. transform: translate3d(var(--f7-panel-right-width, var(--f7-panel-width)), 0, 0px);
  10496. }
  10497. html.with-modal-popup-push-closing .framework7-root > .panel-in,
  10498. html.with-modal-sheet-push-closing .framework7-root > .panel-in {
  10499. transition-duration: var(--f7-panelPushTransitionDuration);
  10500. }
  10501. html.with-modal-popup-push-closing .framework7-root > .panel-in.panel-reveal.panel-left,
  10502. html.with-modal-sheet-push-closing .framework7-root > .panel-in.panel-reveal.panel-left {
  10503. transform-origin: 50vw center;
  10504. }
  10505. html.with-modal-popup-push-closing .framework7-root > .panel-in.panel-reveal.panel-right,
  10506. html.with-modal-sheet-push-closing .framework7-root > .panel-in.panel-reveal.panel-right {
  10507. transform-origin: calc(var(--f7-panel-right-width, var(--f7-panel-width)) - 50vw) center;
  10508. }
  10509. /* === Card === */
  10510. :root {
  10511. --f7-card-content-padding-horizontal: 16px;
  10512. --f7-card-content-padding-vertical: 16px;
  10513. --f7-card-border-radius: 4px;
  10514. --f7-card-font-size: inherit;
  10515. --f7-card-header-text-color: inherit;
  10516. --f7-card-header-font-weight: 400;
  10517. --f7-card-header-padding-horizontal: 16px;
  10518. --f7-card-footer-font-weight: 400;
  10519. --f7-card-footer-font-size: inherit;
  10520. --f7-card-footer-padding-horizontal: 16px;
  10521. --f7-card-expandable-font-size: 16px;
  10522. --f7-card-expandable-tablet-width: 670px;
  10523. --f7-card-expandable-tablet-height: 670px;
  10524. --f7-card-bg-color: #fff;
  10525. --f7-card-outline-border-color: rgba(0, 0, 0, 0.12);
  10526. --f7-card-header-border-color: rgba(0, 0, 0, 0.1);
  10527. --f7-card-footer-border-color: rgba(0, 0, 0, 0.1);
  10528. --f7-card-expandable-bg-color: #fff;
  10529. }
  10530. :root .theme-dark,
  10531. :root.theme-dark {
  10532. --f7-card-bg-color: #1c1c1d;
  10533. --f7-card-expandable-bg-color: #1c1c1d;
  10534. --f7-card-outline-border-color: rgba(255, 255, 255, 0.15);
  10535. --f7-card-header-border-color: rgba(255, 255, 255, 0.15);
  10536. --f7-card-footer-border-color: rgba(255, 255, 255, 0.15);
  10537. --f7-card-footer-text-color: rgba(255, 255, 255, 0.55);
  10538. }
  10539. .ios {
  10540. --f7-card-margin-horizontal: 10px;
  10541. --f7-card-margin-vertical: 10px;
  10542. --f7-card-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  10543. --f7-card-header-font-size: 17px;
  10544. --f7-card-header-padding-vertical: 10px;
  10545. --f7-card-header-min-height: 44px;
  10546. --f7-card-footer-text-color: rgba(0, 0, 0, 0.45);
  10547. --f7-card-footer-padding-vertical: 10px;
  10548. --f7-card-footer-min-height: 44px;
  10549. --f7-card-expandable-margin-horizontal: 20px;
  10550. --f7-card-expandable-margin-vertical: 30px;
  10551. --f7-card-expandable-box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.3);
  10552. --f7-card-expandable-border-radius: 15px;
  10553. --f7-card-expandable-tablet-border-radius: 5px;
  10554. --f7-card-expandable-header-font-size: 27px;
  10555. --f7-card-expandable-header-font-weight: bold;
  10556. }
  10557. .md {
  10558. --f7-card-margin-horizontal: 8px;
  10559. --f7-card-margin-vertical: 8px;
  10560. --f7-card-box-shadow: var(--f7-elevation-1);
  10561. --f7-card-header-font-size: 16px;
  10562. --f7-card-header-padding-vertical: 4px;
  10563. --f7-card-header-min-height: 48px;
  10564. --f7-card-footer-text-color: rgba(0, 0, 0, 0.54);
  10565. --f7-card-footer-padding-vertical: 4px;
  10566. --f7-card-footer-min-height: 48px;
  10567. --f7-card-expandable-margin-horizontal: 12px;
  10568. --f7-card-expandable-margin-vertical: 24px;
  10569. --f7-card-expandable-box-shadow: var(--f7-elevation-10);
  10570. --f7-card-expandable-border-radius: 8px;
  10571. --f7-card-expandable-tablet-border-radius: 4px;
  10572. --f7-card-expandable-header-font-size: 24px;
  10573. --f7-card-expandable-header-font-weight: 500;
  10574. }
  10575. .aurora {
  10576. --f7-card-margin-horizontal: 10px;
  10577. --f7-card-margin-vertical: 10px;
  10578. --f7-card-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
  10579. --f7-card-header-font-size: 14px;
  10580. --f7-card-header-font-weight: bold;
  10581. --f7-card-header-padding-vertical: 10px;
  10582. --f7-card-header-min-height: 38px;
  10583. --f7-card-footer-text-color: rgba(0, 0, 0, 0.6);
  10584. --f7-card-footer-padding-vertical: 10px;
  10585. --f7-card-footer-min-height: 38px;
  10586. --f7-card-expandable-margin-horizontal: 10px;
  10587. --f7-card-expandable-margin-vertical: 20px;
  10588. --f7-card-expandable-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
  10589. --f7-card-expandable-border-radius: 15px;
  10590. --f7-card-expandable-tablet-border-radius: 5px;
  10591. --f7-card-expandable-header-font-size: 27px;
  10592. --f7-card-expandable-header-font-weight: bold;
  10593. }
  10594. .cards-list > ul:before,
  10595. .card .list > ul:before,
  10596. .cards-list > ul:after,
  10597. .card .list > ul:after {
  10598. display: none !important;
  10599. }
  10600. .cards-list ul,
  10601. .card .list ul {
  10602. background: none;
  10603. }
  10604. .card {
  10605. background: var(--f7-card-bg-color);
  10606. position: relative;
  10607. border-radius: var(--f7-card-border-radius);
  10608. font-size: var(--f7-card-font-size);
  10609. margin-top: var(--f7-card-margin-vertical);
  10610. margin-bottom: var(--f7-card-margin-vertical);
  10611. margin-left: calc(var(--f7-card-margin-horizontal) + var(--f7-safe-area-left));
  10612. margin-right: calc(var(--f7-card-margin-horizontal) + var(--f7-safe-area-right));
  10613. box-shadow: var(--f7-card-box-shadow);
  10614. }
  10615. .card .list,
  10616. .card .block {
  10617. margin: 0;
  10618. }
  10619. .row:not(.no-gap) .col > .card {
  10620. margin-left: 0;
  10621. margin-right: 0;
  10622. }
  10623. .card.no-shadow {
  10624. box-shadow: none;
  10625. }
  10626. .card-outline,
  10627. .ios .card-outline-ios,
  10628. .md .card-outline-md,
  10629. .aurora .card-outline-aurora {
  10630. box-shadow: none;
  10631. border: 1px solid var(--f7-card-outline-border-color);
  10632. }
  10633. .card-outline.no-border,
  10634. .ios .card-outline-ios.no-border,
  10635. .md .card-outline-md.no-border,
  10636. .aurora .card-outline-aurora.no-border,
  10637. .card-outline.no-hairlines,
  10638. .ios .card-outline-ios.no-hairlines,
  10639. .md .card-outline-md.no-hairlines,
  10640. .aurora .card-outline-aurora.no-hairlines {
  10641. border: none;
  10642. }
  10643. .card-content {
  10644. position: relative;
  10645. }
  10646. .card-content-padding {
  10647. position: relative;
  10648. padding: var(--f7-card-content-padding-vertical) var(--f7-card-content-padding-horizontal);
  10649. }
  10650. .card-content-padding > .list,
  10651. .card-content-padding > .block {
  10652. margin: calc(-1 * var(--f7-card-content-padding-vertical)) calc(-1 * var(--f7-card-content-padding-horizontal));
  10653. }
  10654. .card-content-padding > p:first-child {
  10655. margin-top: 0;
  10656. }
  10657. .card-content-padding > p:last-child {
  10658. margin-bottom: 0;
  10659. }
  10660. .card-header {
  10661. min-height: var(--f7-card-header-min-height);
  10662. color: var(--f7-card-header-text-color);
  10663. font-size: var(--f7-card-header-font-size);
  10664. font-weight: var(--f7-card-header-font-weight);
  10665. padding: var(--f7-card-header-padding-vertical) var(--f7-card-header-padding-horizontal);
  10666. }
  10667. .card-footer {
  10668. min-height: var(--f7-card-footer-min-height);
  10669. color: var(--f7-card-footer-text-color);
  10670. font-size: var(--f7-card-footer-font-size);
  10671. font-weight: var(--f7-card-footer-font-weight);
  10672. padding: var(--f7-card-footer-padding-vertical) var(--f7-card-footer-padding-horizontal);
  10673. }
  10674. .card-footer a.link {
  10675. overflow: hidden;
  10676. }
  10677. .card-header,
  10678. .card-footer {
  10679. position: relative;
  10680. box-sizing: border-box;
  10681. display: flex;
  10682. justify-content: space-between;
  10683. align-items: center;
  10684. }
  10685. .card-header[valign="top"],
  10686. .card-footer[valign="top"] {
  10687. align-items: flex-start;
  10688. }
  10689. .card-header[valign="bottom"],
  10690. .card-footer[valign="bottom"] {
  10691. align-items: flex-end;
  10692. }
  10693. .card-header a.link,
  10694. .card-footer a.link {
  10695. position: relative;
  10696. }
  10697. .card-header a.link i.icon,
  10698. .card-footer a.link i.icon {
  10699. display: block;
  10700. }
  10701. .card-header a.icon-only,
  10702. .card-footer a.icon-only {
  10703. display: flex;
  10704. justify-content: center;
  10705. align-items: center;
  10706. margin: 0;
  10707. }
  10708. .card-header {
  10709. border-radius: var(--f7-card-border-radius) var(--f7-card-border-radius) 0 0;
  10710. }
  10711. .card-header:after {
  10712. content: '';
  10713. position: absolute;
  10714. background-color: var(--f7-card-header-border-color);
  10715. display: block;
  10716. z-index: 15;
  10717. top: auto;
  10718. right: auto;
  10719. bottom: 0;
  10720. left: 0;
  10721. height: 1px;
  10722. width: 100%;
  10723. transform-origin: 50% 100%;
  10724. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  10725. }
  10726. .card-header.no-hairline:after {
  10727. display: none !important;
  10728. }
  10729. .card-footer {
  10730. border-radius: 0 0 var(--f7-card-border-radius) var(--f7-card-border-radius);
  10731. }
  10732. .card-footer:before {
  10733. content: '';
  10734. position: absolute;
  10735. background-color: var(--f7-card-footer-border-color);
  10736. display: block;
  10737. z-index: 15;
  10738. top: 0;
  10739. right: auto;
  10740. bottom: auto;
  10741. left: 0;
  10742. height: 1px;
  10743. width: 100%;
  10744. transform-origin: 50% 0%;
  10745. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  10746. }
  10747. .card-footer.no-hairline:before {
  10748. display: none !important;
  10749. }
  10750. .card-expandable {
  10751. overflow: hidden;
  10752. height: 300px;
  10753. background: var(--f7-card-expandable-bg-color);
  10754. position: relative;
  10755. transform-origin: center center;
  10756. transition-property: transform, border-radius;
  10757. border-radius: var(--f7-card-expandable-border-radius);
  10758. z-index: 2;
  10759. transition-duration: 200ms;
  10760. margin-left: calc(var(--f7-card-expandable-margin-horizontal) + var(--f7-safe-area-left));
  10761. margin-right: calc(var(--f7-card-expandable-margin-horizontal) + var(--f7-safe-area-right));
  10762. margin-top: var(--f7-card-expandable-margin-vertical);
  10763. margin-bottom: var(--f7-card-expandable-margin-vertical);
  10764. box-shadow: var(--f7-card-expandable-box-shadow);
  10765. font-size: var(--f7-card-expandable-font-size);
  10766. }
  10767. .card-expandable:not(.card-opened) {
  10768. -webkit-user-select: none;
  10769. -moz-user-select: none;
  10770. user-select: none;
  10771. }
  10772. .card-expandable.card-no-transition {
  10773. transition-duration: 0ms;
  10774. }
  10775. .card-expandable.card-expandable-animate-width .card-content {
  10776. transition-property: width, transform;
  10777. width: 100%;
  10778. }
  10779. .card-expandable.active-state {
  10780. transform: scale(0.97) translate3d(0, 0, 0);
  10781. }
  10782. .card-expandable .card-opened-fade-in,
  10783. .card-expandable .card-opened-fade-out {
  10784. transition-duration: 400ms;
  10785. }
  10786. .card-expandable .card-opened-fade-in {
  10787. opacity: 0;
  10788. pointer-events: none;
  10789. }
  10790. .card-expandable .card-content {
  10791. position: absolute;
  10792. top: 0;
  10793. width: 100vw;
  10794. height: 100vh;
  10795. transform-origin: center top;
  10796. overflow: hidden;
  10797. transition-property: transform;
  10798. box-sizing: border-box;
  10799. pointer-events: none;
  10800. right: 0;
  10801. }
  10802. .card-expandable .card-content .card-content-padding {
  10803. padding-left: calc(var(--f7-safe-area-left) + var(--f7-card-content-padding-horizontal));
  10804. padding-right: calc(var(--f7-safe-area-right) + var(--f7-card-content-padding-horizontal));
  10805. }
  10806. .card-expandable.card-opened {
  10807. transition-duration: 0ms;
  10808. }
  10809. .card-expandable.card-opening,
  10810. .card-expandable.card-closing,
  10811. .card-expandable.card-transitioning {
  10812. transition-duration: 400ms;
  10813. }
  10814. .card-expandable.card-opening .card-content {
  10815. transition-duration: 300ms;
  10816. }
  10817. .card-expandable.card-closing .card-content {
  10818. transition-duration: 500ms;
  10819. }
  10820. .card-expandable.card-opening,
  10821. .card-expandable.card-opened,
  10822. .card-expandable.card-closing {
  10823. z-index: 300;
  10824. }
  10825. .card-expandable.card-opening,
  10826. .card-expandable.card-opened {
  10827. border-radius: 0;
  10828. }
  10829. .card-expandable.card-opening .card-opened-fade-in,
  10830. .card-expandable.card-opened .card-opened-fade-in {
  10831. opacity: 1;
  10832. pointer-events: auto;
  10833. }
  10834. .card-expandable.card-opening .card-opened-fade-out,
  10835. .card-expandable.card-opened .card-opened-fade-out {
  10836. opacity: 0;
  10837. pointer-events: none;
  10838. }
  10839. .card-expandable.card-opened .card-content {
  10840. overflow: auto;
  10841. -webkit-overflow-scrolling: touch;
  10842. pointer-events: auto;
  10843. }
  10844. .card-expandable .card-header {
  10845. font-size: var(--f7-card-expandable-header-font-size);
  10846. font-weight: var(--f7-card-expandable-header-font-weight);
  10847. }
  10848. .card-expandable .card-header:after {
  10849. display: none !important;
  10850. }
  10851. .card-prevent-open {
  10852. pointer-events: auto;
  10853. }
  10854. .card-expandable-size {
  10855. width: 0;
  10856. height: 0;
  10857. position: absolute;
  10858. left: 0;
  10859. top: 0;
  10860. opacity: 0;
  10861. pointer-events: none;
  10862. visibility: hidden;
  10863. }
  10864. @media (min-width: 768px) and (min-height: 670px) {
  10865. .card-expandable:not(.card-tablet-fullscreen) {
  10866. max-width: var(--f7-card-expandable-tablet-width);
  10867. }
  10868. .card-expandable:not(.card-tablet-fullscreen).card-opened,
  10869. .card-expandable:not(.card-tablet-fullscreen).card-opening {
  10870. border-radius: var(--f7-card-expandable-tablet-border-radius);
  10871. }
  10872. .card-expandable:not(.card-tablet-fullscreen):not(.card-expandable-animate-width) .card-content {
  10873. width: var(--f7-card-expandable-tablet-width);
  10874. }
  10875. .card-expandable:not(.card-tablet-fullscreen) .card-expandable-size {
  10876. width: var(--f7-card-expandable-tablet-width);
  10877. height: var(--f7-card-expandable-tablet-height);
  10878. }
  10879. }
  10880. .page.page-with-card-opened .page-content {
  10881. overflow: hidden;
  10882. }
  10883. .card-backdrop {
  10884. position: fixed;
  10885. left: 0;
  10886. top: 0;
  10887. width: 100%;
  10888. height: 100%;
  10889. z-index: 299;
  10890. pointer-events: none;
  10891. background: rgba(0, 0, 0, 0.2);
  10892. opacity: 0;
  10893. }
  10894. .card-backdrop-in {
  10895. animation: card-backdrop-fade-in 400ms forwards;
  10896. pointer-events: auto;
  10897. }
  10898. .card-backdrop-out {
  10899. animation: card-backdrop-fade-out 400ms forwards;
  10900. }
  10901. @supports ((-webkit-backdrop-filter: blur(15px)) or (backdrop-filter: blur(15px))) {
  10902. .card-backdrop {
  10903. background: transparent;
  10904. -webkit-backdrop-filter: blur(15px);
  10905. backdrop-filter: blur(15px);
  10906. }
  10907. }
  10908. @keyframes card-backdrop-fade-in {
  10909. from {
  10910. opacity: 0;
  10911. }
  10912. to {
  10913. opacity: 1;
  10914. }
  10915. }
  10916. @keyframes card-backdrop-fade-out {
  10917. from {
  10918. opacity: 1;
  10919. }
  10920. to {
  10921. opacity: 0;
  10922. }
  10923. }
  10924. /* === Chips === */
  10925. :root {
  10926. --f7-chip-font-size: 13px;
  10927. --f7-chip-font-weight: normal;
  10928. --f7-chip-media-font-size: 16px;
  10929. --f7-chip-bg-color: rgba(0, 0, 0, 0.12);
  10930. --f7-chip-outline-border-color: rgba(0, 0, 0, 0.12);
  10931. --f7-chip-delete-button-color: #000;
  10932. }
  10933. :root .theme-dark,
  10934. :root.theme-dark {
  10935. --f7-chip-delete-button-color: #fff;
  10936. --f7-chip-bg-color: #333;
  10937. --f7-chip-outline-border-color: rgba(255, 255, 255, 0.12);
  10938. }
  10939. .ios {
  10940. --f7-chip-height: 24px;
  10941. --f7-chip-padding-horizontal: 10px;
  10942. --f7-chip-text-color: #000;
  10943. }
  10944. .ios .theme-dark,
  10945. .ios.theme-dark {
  10946. --f7-chip-text-color: #fff;
  10947. }
  10948. .md {
  10949. --f7-chip-height: 32px;
  10950. --f7-chip-padding-horizontal: 12px;
  10951. --f7-chip-text-color: rgba(0, 0, 0, 0.87);
  10952. }
  10953. .md .theme-dark,
  10954. .md.theme-dark {
  10955. --f7-chip-text-color: rgba(255, 255, 255, 0.87);
  10956. }
  10957. .aurora {
  10958. --f7-chip-height: 20px;
  10959. --f7-chip-padding-horizontal: 10px;
  10960. --f7-chip-font-size: 12px;
  10961. --f7-chip-media-font-size: 14px;
  10962. --f7-chip-text-color: #000;
  10963. }
  10964. .aurora .theme-dark,
  10965. .aurora.theme-dark {
  10966. --f7-chip-text-color: #fff;
  10967. }
  10968. .chip {
  10969. padding-left: var(--f7-chip-padding-horizontal);
  10970. padding-right: var(--f7-chip-padding-horizontal);
  10971. font-weight: var(--f7-chip-font-weight);
  10972. display: inline-flex;
  10973. box-sizing: border-box;
  10974. vertical-align: middle;
  10975. align-items: center;
  10976. margin: 2px 0;
  10977. background-color: var(--f7-chip-bg-color);
  10978. font-size: var(--f7-chip-font-size);
  10979. color: var(--f7-chip-text-color);
  10980. height: var(--f7-chip-height);
  10981. line-height: var(--f7-chip-height);
  10982. border-radius: var(--f7-chip-height);
  10983. position: relative;
  10984. }
  10985. .chip-media {
  10986. border-radius: 50%;
  10987. flex-shrink: 0;
  10988. display: flex;
  10989. align-items: center;
  10990. justify-content: center;
  10991. height: var(--f7-chip-height);
  10992. width: var(--f7-chip-height);
  10993. border-radius: var(--f7-chip-height);
  10994. text-align: center;
  10995. line-height: var(--f7-chip-height);
  10996. box-sizing: border-box;
  10997. color: #fff;
  10998. font-size: var(--f7-chip-media-font-size);
  10999. vertical-align: middle;
  11000. margin-right: calc(-1 * var(--f7-chip-padding-horizontal));
  11001. }
  11002. .chip-media i.icon {
  11003. font-size: calc(var(--f7-chip-height) - 8px);
  11004. height: calc(var(--f7-chip-height) - 8px);
  11005. }
  11006. .chip-media img {
  11007. max-width: 100%;
  11008. max-height: 100%;
  11009. width: auto;
  11010. height: auto;
  11011. border-radius: 50%;
  11012. display: block;
  11013. }
  11014. .chip-media + .chip-label {
  11015. margin-right: 4px;
  11016. }
  11017. .chip-label {
  11018. white-space: nowrap;
  11019. overflow: hidden;
  11020. text-overflow: ellipsis;
  11021. position: relative;
  11022. flex-shrink: 1;
  11023. min-width: 0;
  11024. }
  11025. .chip-delete {
  11026. text-align: center;
  11027. cursor: pointer;
  11028. flex-shrink: 0;
  11029. background-repeat: no-repeat;
  11030. width: 24px;
  11031. height: 24px;
  11032. color: var(--f7-chip-delete-button-color);
  11033. opacity: 0.54;
  11034. position: relative;
  11035. }
  11036. .chip-delete:after {
  11037. font-family: 'framework7-core-icons';
  11038. font-weight: normal;
  11039. font-style: normal;
  11040. line-height: 1;
  11041. letter-spacing: normal;
  11042. text-transform: none;
  11043. white-space: nowrap;
  11044. word-wrap: normal;
  11045. direction: ltr;
  11046. -webkit-font-smoothing: antialiased;
  11047. text-rendering: optimizeLegibility;
  11048. -moz-osx-font-smoothing: grayscale;
  11049. font-feature-settings: "liga";
  11050. text-align: center;
  11051. display: block;
  11052. width: 100%;
  11053. height: 100%;
  11054. font-size: 20px;
  11055. content: 'delete_round_ios';
  11056. line-height: 24px;
  11057. }
  11058. .chip .chip-delete.active-state {
  11059. opacity: 1;
  11060. }
  11061. .chip-outline,
  11062. .ios .chip-outline-ios,
  11063. .md .chip-outline-md,
  11064. .aurora .chip-outline-aurora {
  11065. border: 1px solid var(--f7-chip-outline-border-color);
  11066. background: none;
  11067. }
  11068. .chip[class*="color-"] {
  11069. --f7-chip-bg-color: var(--f7-theme-color);
  11070. --f7-chip-text-color: #fff;
  11071. }
  11072. .chip-outline[class*="color-"],
  11073. .ios .chip-outline-ios[class*="color-"],
  11074. .md .chip-outline-md[class*="color-"],
  11075. .aurora .chip-outline-aurora[class*="color-"] {
  11076. --f7-chip-outline-border-color: var(--f7-theme-color);
  11077. --f7-chip-text-color: var(--f7-theme-color);
  11078. }
  11079. .ios .chip-delete {
  11080. margin-left: calc(-1 * var(--f7-chip-padding-horizontal));
  11081. }
  11082. .ios .chip-delete:after {
  11083. font-size: 10px;
  11084. }
  11085. .md .chip-label + .chip-delete {
  11086. margin-right: 4px;
  11087. }
  11088. .md .chip-delete {
  11089. margin-left: calc(-1 * var(--f7-chip-padding-horizontal) + 4px);
  11090. }
  11091. .md .chip-delete:after {
  11092. font-size: 12px;
  11093. }
  11094. .aurora .chip-delete {
  11095. margin-left: calc(-1 * var(--f7-chip-padding-horizontal));
  11096. }
  11097. .aurora .chip-delete:after {
  11098. font-size: 10px;
  11099. }
  11100. /* === Form === */
  11101. /* === Input === */
  11102. :root {
  11103. --f7-input-bg-color: transparent;
  11104. --f7-label-font-weight: 400;
  11105. --f7-label-line-height: 1.3;
  11106. --f7-input-padding-left: 0px;
  11107. --f7-input-padding-right: 0px;
  11108. --f7-input-error-text-color: #ff3b30;
  11109. --f7-input-error-font-size: 12px;
  11110. --f7-input-error-line-height: 1.4;
  11111. --f7-input-error-font-weight: 400;
  11112. --f7-input-info-font-size: 12px;
  11113. --f7-input-info-line-height: 1.4;
  11114. --f7-input-outline-height: 40px;
  11115. --f7-input-outline-border-radius: 4px;
  11116. --f7-input-outline-padding-horizontal: 12px;
  11117. --f7-textarea-height: 100px;
  11118. /*
  11119. --f7-input-outline-focused-border-color: var(--f7-theme-color);
  11120. --f7-input-outline-invalid-border-color: var(--f7-input-error-text-color);
  11121. */
  11122. --f7-input-outline-border-color: #999;
  11123. }
  11124. :root .theme-dark,
  11125. :root.theme-dark {
  11126. --f7-input-outline-border-color: #444;
  11127. }
  11128. .ios {
  11129. --f7-input-height: 44px;
  11130. --f7-input-font-size: 17px;
  11131. --f7-input-placeholder-color: #a9a9a9;
  11132. --f7-textarea-padding-vertical: 11px;
  11133. /*
  11134. --f7-input-focused-border-color: var(--f7-list-item-border-color);
  11135. --f7-input-invalid-border-color: var(--f7-list-item-border-color);
  11136. --f7-input-invalid-text-color: var(--f7-input-error-text-color);
  11137. */
  11138. --f7-label-font-size: 12px;
  11139. --f7-label-text-color: inherit;
  11140. /*
  11141. --f7-label-focused-text-color: var(--f7-label-text-color);
  11142. --f7-label-invalid-text-color: var(--f7-label-text-color);
  11143. */
  11144. --f7-floating-label-scale: calc(17 / 12);
  11145. --f7-inline-label-font-size: 17px;
  11146. --f7-inline-label-line-height: 1.4;
  11147. --f7-inline-label-padding-top: 3px;
  11148. --f7-input-clear-button-size: 14px;
  11149. --f7-input-text-color: #000000;
  11150. --f7-input-info-text-color: rgba(0, 0, 0, 0.45);
  11151. --f7-input-clear-button-color: rgba(0, 0, 0, 0.45);
  11152. }
  11153. .ios .theme-dark,
  11154. .ios.theme-dark {
  11155. --f7-input-text-color: #fff;
  11156. --f7-input-info-text-color: rgba(255, 255, 255, 0.55);
  11157. --f7-input-clear-button-color: rgba(255, 255, 255, 0.5);
  11158. }
  11159. .md {
  11160. --f7-input-height: 36px;
  11161. --f7-input-font-size: 16px;
  11162. --f7-textarea-padding-vertical: 7px;
  11163. /*
  11164. --f7-input-focused-border-color: var(--f7-theme-color);
  11165. --f7-input-invalid-border-color: var(--f7-input-error-text-color);
  11166. --f7-input-invalid-text-color: var(--f7-input-text-color);
  11167. */
  11168. --f7-label-font-size: 12px;
  11169. /*
  11170. --f7-label-focused-text-color: var(--f7-theme-color);
  11171. --f7-label-invalid-text-color: var(--f7-input-error-text-color );
  11172. */
  11173. --f7-floating-label-scale: calc(16 / 12);
  11174. --f7-inline-label-font-size: 16px;
  11175. --f7-inline-label-line-height: 1.5;
  11176. --f7-inline-label-padding-top: 7px;
  11177. --f7-input-clear-button-size: 18px;
  11178. --f7-input-clear-button-color: #aaa;
  11179. --f7-input-text-color: #212121;
  11180. --f7-input-placeholder-color: rgba(0, 0, 0, 0.35);
  11181. --f7-label-text-color: rgba(0, 0, 0, 0.65);
  11182. --f7-input-info-text-color: rgba(0, 0, 0, 0.45);
  11183. }
  11184. .md .theme-dark,
  11185. .md.theme-dark {
  11186. --f7-input-text-color: rgba(255, 255, 255, 0.87);
  11187. --f7-input-placeholder-color: rgba(255, 255, 255, 0.35);
  11188. --f7-label-text-color: rgba(255, 255, 255, 0.54);
  11189. --f7-input-info-text-color: rgba(255, 255, 255, 0.45);
  11190. }
  11191. .aurora {
  11192. --f7-input-height: 24px;
  11193. --f7-input-font-size: 13px;
  11194. --f7-textarea-padding-vertical: 2px;
  11195. /*
  11196. --f7-input-focused-border-color: var(--f7-list-item-border-color);
  11197. --f7-input-invalid-border-color: var(--f7-list-item-border-color);
  11198. --f7-input-invalid-text-color: var(--f7-input-error-text-color);
  11199. */
  11200. --f7-label-font-size: 11px;
  11201. --f7-label-text-color: inherit;
  11202. /*
  11203. --f7-label-focused-text-color: var(--f7-label-text-color);
  11204. --f7-label-invalid-text-color: var(--f7-label-text-color);
  11205. */
  11206. --f7-floating-label-scale: calc(13 / 11);
  11207. --f7-inline-label-font-size: 14px;
  11208. --f7-inline-label-line-height: 1.4;
  11209. --f7-inline-label-padding-top: 1px;
  11210. --f7-input-clear-button-size: 14px;
  11211. --f7-input-outline-height: 32px;
  11212. --f7-input-outline-padding-horizontal: 8px;
  11213. --f7-input-text-color: #000000;
  11214. --f7-input-placeholder-color: rgba(0, 0, 0, 0.32);
  11215. --f7-input-clear-button-color: #666;
  11216. --f7-input-info-text-color: rgba(0, 0, 0, 0.5);
  11217. }
  11218. .aurora .theme-dark,
  11219. .aurora.theme-dark {
  11220. --f7-input-text-color: #fff;
  11221. --f7-input-clear-button-color: #aaa;
  11222. --f7-input-placeholder-color: rgba(255, 255, 255, 0.35);
  11223. --f7-input-info-text-color: rgba(255, 255, 255, 0.45);
  11224. }
  11225. input[type="text"],
  11226. input[type="password"],
  11227. input[type="search"],
  11228. input[type="email"],
  11229. input[type="tel"],
  11230. input[type="url"],
  11231. input[type="date"],
  11232. input[type='month'],
  11233. input[type="datetime-local"],
  11234. input[type="time"],
  11235. input[type="number"],
  11236. select,
  11237. textarea {
  11238. box-sizing: border-box;
  11239. -webkit-appearance: none;
  11240. -moz-appearance: none;
  11241. appearance: none;
  11242. border: none;
  11243. box-shadow: none;
  11244. border-radius: 0;
  11245. outline: 0;
  11246. display: block;
  11247. padding: 0;
  11248. margin: 0;
  11249. font-family: inherit;
  11250. background: none;
  11251. resize: none;
  11252. font-size: inherit;
  11253. color: inherit;
  11254. }
  11255. .textarea-resizable-shadow {
  11256. opacity: 0;
  11257. position: absolute;
  11258. z-index: -1000;
  11259. pointer-events: none;
  11260. left: -1000px;
  11261. top: -1000px;
  11262. visibility: hidden;
  11263. }
  11264. .list input[type="text"],
  11265. .list input[type="password"],
  11266. .list input[type="search"],
  11267. .list input[type="email"],
  11268. .list input[type="tel"],
  11269. .list input[type="url"],
  11270. .list input[type="date"],
  11271. .list input[type='month'],
  11272. .list input[type="datetime-local"],
  11273. .list input[type="time"],
  11274. .list input[type="number"],
  11275. .list select {
  11276. width: 100%;
  11277. height: var(--f7-input-height);
  11278. color: var(--f7-input-text-color);
  11279. font-size: var(--f7-input-font-size);
  11280. background-color: var(--f7-input-bg-color, transparent);
  11281. padding-left: var(--f7-input-padding-left);
  11282. padding-right: var(--f7-input-padding-right);
  11283. }
  11284. .list input[type="text"]::-webkit-input-placeholder, .list input[type="password"]::-webkit-input-placeholder, .list input[type="search"]::-webkit-input-placeholder, .list input[type="email"]::-webkit-input-placeholder, .list input[type="tel"]::-webkit-input-placeholder, .list input[type="url"]::-webkit-input-placeholder, .list input[type="date"]::-webkit-input-placeholder, .list input[type='month']::-webkit-input-placeholder, .list input[type="datetime-local"]::-webkit-input-placeholder, .list input[type="time"]::-webkit-input-placeholder, .list input[type="number"]::-webkit-input-placeholder, .list select::-webkit-input-placeholder {
  11285. color: var(--f7-input-placeholder-color);
  11286. }
  11287. .list input[type="text"]::placeholder,
  11288. .list input[type="password"]::placeholder,
  11289. .list input[type="search"]::placeholder,
  11290. .list input[type="email"]::placeholder,
  11291. .list input[type="tel"]::placeholder,
  11292. .list input[type="url"]::placeholder,
  11293. .list input[type="date"]::placeholder,
  11294. .list input[type='month']::placeholder,
  11295. .list input[type="datetime-local"]::placeholder,
  11296. .list input[type="time"]::placeholder,
  11297. .list input[type="number"]::placeholder,
  11298. .list select::placeholder {
  11299. color: var(--f7-input-placeholder-color);
  11300. }
  11301. .list textarea {
  11302. width: 100%;
  11303. color: var(--f7-input-text-color);
  11304. font-size: var(--f7-input-font-size);
  11305. resize: none;
  11306. line-height: 1.4;
  11307. height: var(--f7-textarea-height);
  11308. background-color: var(--f7-input-bg-color, transparent);
  11309. padding-top: var(--f7-textarea-padding-vertical);
  11310. padding-bottom: var(--f7-textarea-padding-vertical);
  11311. padding-left: var(--f7-input-padding-left);
  11312. padding-right: var(--f7-input-padding-right);
  11313. }
  11314. .list textarea::-webkit-input-placeholder {
  11315. color: var(--f7-input-placeholder-color);
  11316. }
  11317. .list textarea::placeholder {
  11318. color: var(--f7-input-placeholder-color);
  11319. }
  11320. .list textarea.resizable {
  11321. height: var(--f7-input-height);
  11322. }
  11323. .list input[type="datetime-local"] {
  11324. max-width: 50vw;
  11325. }
  11326. .list input[type="time"],
  11327. .list input[type="date"],
  11328. .list input[type='month'],
  11329. .list input[type="datetime-local"] {
  11330. line-height: var(--f7-input-height);
  11331. }
  11332. .list input[type="date"],
  11333. .list input[type='month'],
  11334. .list input[type="datetime-local"] {
  11335. text-align: right;
  11336. flex-direction: row-reverse;
  11337. width: auto;
  11338. }
  11339. .list .item-label,
  11340. .list .item-floating-label {
  11341. width: 100%;
  11342. vertical-align: top;
  11343. flex-shrink: 0;
  11344. font-size: var(--f7-label-font-size);
  11345. font-weight: var(--f7-label-font-weight);
  11346. line-height: var(--f7-label-line-height);
  11347. color: var(--f7-label-text-color);
  11348. transition-duration: 200ms;
  11349. transition-property: transform, color;
  11350. }
  11351. .list .item-floating-label {
  11352. --label-height: calc(var(--f7-label-font-size) * var(--f7-label-line-height));
  11353. transform: scale(var(--f7-floating-label-scale)) translateY(calc((var(--f7-input-height) / 2 + 50%) / var(--f7-floating-label-scale)));
  11354. color: var(--f7-input-placeholder-color);
  11355. width: auto;
  11356. max-width: calc(100% / var(--f7-floating-label-scale));
  11357. pointer-events: none;
  11358. right: var(--f7-input-padding-right);
  11359. transform-origin: right center;
  11360. }
  11361. .list .item-floating-label ~ .item-input-wrap input::-webkit-input-placeholder, .list .item-floating-label ~ .item-input-wrap textarea::-webkit-input-placeholder {
  11362. opacity: 0;
  11363. transition-duration: 100ms;
  11364. }
  11365. .list .item-floating-label ~ .item-input-wrap input::placeholder,
  11366. .list .item-floating-label ~ .item-input-wrap textarea::placeholder {
  11367. opacity: 0;
  11368. transition-duration: 100ms;
  11369. }
  11370. .list .item-floating-label ~ .item-input-wrap input.input-focused::-webkit-input-placeholder, .list .item-floating-label ~ .item-input-wrap textarea.input-focused::-webkit-input-placeholder {
  11371. opacity: 1;
  11372. transition-duration: 300ms;
  11373. }
  11374. .list .item-floating-label ~ .item-input-wrap input.input-focused::placeholder,
  11375. .list .item-floating-label ~ .item-input-wrap textarea.input-focused::placeholder {
  11376. opacity: 1;
  11377. transition-duration: 300ms;
  11378. }
  11379. .list .item-input-with-value .item-floating-label {
  11380. color: var(--f7-label-text-color);
  11381. }
  11382. .list .item-input-with-value .item-floating-label,
  11383. .list .item-input-focused .item-floating-label {
  11384. transform: scale(1) translateY(0);
  11385. }
  11386. .list .item-input-wrap {
  11387. width: 100%;
  11388. flex-shrink: 1;
  11389. position: relative;
  11390. }
  11391. .item-input .item-inner {
  11392. display: flex;
  11393. flex-direction: column;
  11394. align-items: flex-start;
  11395. }
  11396. .item-input-error-message,
  11397. .input-error-message {
  11398. font-size: var(--f7-input-error-font-size);
  11399. line-height: var(--f7-input-error-line-height);
  11400. color: var(--f7-input-error-text-color);
  11401. font-weight: var(--f7-input-error-font-weight);
  11402. display: none;
  11403. box-sizing: border-box;
  11404. }
  11405. .item-input-info,
  11406. .input-info {
  11407. font-size: var(--f7-input-info-font-size);
  11408. line-height: var(--f7-input-info-line-height);
  11409. color: var(--f7-input-info-text-color);
  11410. }
  11411. .item-input-invalid .item-input-error-message,
  11412. .input-invalid .item-input-error-message,
  11413. .item-input-invalid .input-error-message,
  11414. .input-invalid .input-error-message {
  11415. display: block;
  11416. }
  11417. .item-input-invalid .item-input-info,
  11418. .input-invalid .item-input-info,
  11419. .item-input-invalid .input-info,
  11420. .input-invalid .input-info {
  11421. display: none;
  11422. }
  11423. .inline-labels .item-inner,
  11424. .inline-label .item-inner {
  11425. display: flex;
  11426. align-items: center;
  11427. flex-direction: row;
  11428. }
  11429. .inline-labels .item-label,
  11430. .inline-label .item-label,
  11431. .inline-labels .item-floating-label,
  11432. .inline-label .item-floating-label {
  11433. padding-top: var(--f7-inline-label-padding-top);
  11434. align-self: flex-start;
  11435. width: 35%;
  11436. font-size: var(--f7-inline-label-font-size);
  11437. line-height: var(--f7-inline-label-line-height);
  11438. }
  11439. .inline-labels .item-label + .item-input-wrap,
  11440. .inline-label .item-label + .item-input-wrap,
  11441. .inline-labels .item-floating-label + .item-input-wrap,
  11442. .inline-label .item-floating-label + .item-input-wrap {
  11443. margin-right: 8px;
  11444. }
  11445. .input {
  11446. position: relative;
  11447. }
  11448. .input input,
  11449. .input select,
  11450. .input textarea {
  11451. width: 100%;
  11452. }
  11453. .input-clear-button {
  11454. opacity: 0;
  11455. pointer-events: none;
  11456. visibility: hidden;
  11457. transition-duration: 100ms;
  11458. position: absolute;
  11459. top: 50%;
  11460. border: none;
  11461. padding: 0;
  11462. margin: 0;
  11463. outline: 0;
  11464. z-index: 1;
  11465. cursor: pointer;
  11466. background: none;
  11467. width: var(--f7-input-clear-button-size);
  11468. height: var(--f7-input-clear-button-size);
  11469. margin-top: calc(-1 * var(--f7-input-clear-button-size) / 2);
  11470. color: var(--f7-input-clear-button-color);
  11471. left: 0;
  11472. }
  11473. .input-clear-button:after {
  11474. font-family: 'framework7-core-icons';
  11475. font-weight: normal;
  11476. font-style: normal;
  11477. line-height: 1;
  11478. letter-spacing: normal;
  11479. text-transform: none;
  11480. white-space: nowrap;
  11481. word-wrap: normal;
  11482. direction: ltr;
  11483. -webkit-font-smoothing: antialiased;
  11484. text-rendering: optimizeLegibility;
  11485. -moz-osx-font-smoothing: grayscale;
  11486. font-feature-settings: "liga";
  11487. text-align: center;
  11488. display: block;
  11489. width: 100%;
  11490. height: 100%;
  11491. font-size: 20px;
  11492. }
  11493. .input-clear-button:before {
  11494. position: absolute;
  11495. content: '';
  11496. left: 50%;
  11497. top: 50%;
  11498. }
  11499. .item-input-wrap .input-clear-button {
  11500. top: calc(var(--f7-input-height) / 2);
  11501. }
  11502. .input-clear-button.active-state {
  11503. opacity: 0.75 !important;
  11504. }
  11505. .input-with-value ~ .input-clear-button,
  11506. .item-input-with-value .input-clear-button,
  11507. .input-with-value .input-clear-button {
  11508. opacity: 1;
  11509. pointer-events: auto;
  11510. visibility: visible;
  11511. }
  11512. .input-dropdown-wrap,
  11513. .input-dropdown {
  11514. position: relative;
  11515. }
  11516. .input-dropdown-wrap:before,
  11517. .input-dropdown:before {
  11518. content: '';
  11519. pointer-events: none;
  11520. position: absolute;
  11521. top: 50%;
  11522. margin-top: -2px;
  11523. width: 0;
  11524. height: 0;
  11525. border-left: 4px solid transparent;
  11526. border-right: 4px solid transparent;
  11527. border-top: 5px solid #727272;
  11528. left: 6px;
  11529. }
  11530. .input-dropdown-wrap select,
  11531. .input-dropdown select,
  11532. .input-dropdown-wrap input,
  11533. .input-dropdown input,
  11534. .input-dropdown-wrap textarea,
  11535. .input-dropdown textarea {
  11536. padding-left: calc(20px + var(--f7-input-padding-left));
  11537. }
  11538. .input-outline:after,
  11539. .item-input-outline .item-input-wrap:after {
  11540. content: '';
  11541. position: absolute;
  11542. left: 0;
  11543. top: 0;
  11544. width: 100%;
  11545. height: 100%;
  11546. box-sizing: border-box;
  11547. border: 1px solid var(--f7-input-outline-border-color);
  11548. border-radius: var(--f7-input-outline-border-radius);
  11549. transition-duration: 200ms;
  11550. pointer-events: none;
  11551. }
  11552. .input-outline.input-focused:after,
  11553. .item-input-outline.item-input-focused .item-input-wrap:after {
  11554. border-width: 2px;
  11555. border-color: var(--f7-input-outline-focused-border-color, var(--f7-theme-color));
  11556. }
  11557. .input-outline.input-invalid:after,
  11558. .item-input-outline.item-input-invalid .item-input-wrap:after {
  11559. border-width: 2px;
  11560. border-color: var(--f7-input-outline-invalid-border-color, var(--f7-input-error-text-color));
  11561. }
  11562. .input-outline input,
  11563. .item-input-outline input,
  11564. .list .item-input-outline input,
  11565. .input-outline textarea,
  11566. .item-input-outline textarea,
  11567. .list .item-input-outline textarea,
  11568. .input-outline select,
  11569. .item-input-outline select,
  11570. .list .item-input-outline select {
  11571. border-radius: var(--f7-input-outline-border-radius);
  11572. padding-left: var(--f7-input-outline-padding-horizontal);
  11573. padding-right: var(--f7-input-outline-padding-horizontal);
  11574. }
  11575. .input-outline.input-dropdown:before,
  11576. .item-input-outline .input-dropdown-wrap:before {
  11577. left: 8px;
  11578. }
  11579. .input-outline.input-dropdown input,
  11580. .item-input-outline .input-dropdown-wrap input,
  11581. .input-outline.input-dropdown textarea,
  11582. .item-input-outline .input-dropdown-wrap textarea,
  11583. .input-outline.input-dropdown select,
  11584. .item-input-outline .input-dropdown-wrap select {
  11585. padding-left: 20px;
  11586. }
  11587. .input-outline .input-clear-button,
  11588. .item-input-outline .input-clear-button {
  11589. left: 8px;
  11590. }
  11591. .item-input-outline {
  11592. --f7-input-height: var(--f7-input-outline-height);
  11593. }
  11594. .item-input-outline .item-inner:after {
  11595. display: none !important;
  11596. }
  11597. .item-input-outline .item-label {
  11598. right: var(--f7-input-outline-padding-horizontal);
  11599. }
  11600. .inline-labels .item-input-outline .item-label,
  11601. .inline-label .item-input-outline .item-label,
  11602. .item-input-outline .inline-label .item-label,
  11603. .item-input-outline .inline-label.item-label {
  11604. right: 0;
  11605. }
  11606. .item-input-outline .item-floating-label {
  11607. right: calc(var(--f7-input-outline-padding-horizontal) - 4px);
  11608. padding-left: 4px;
  11609. padding-right: 4px;
  11610. background: var(--f7-page-bg-color);
  11611. z-index: 10;
  11612. margin-top: calc(-0.5 * (var(--f7-label-font-size) * var(--f7-label-line-height)));
  11613. }
  11614. .item-input-outline.item-input-with-value .item-floating-label,
  11615. .item-input-outline.item-input-focused .item-floating-label {
  11616. transform: scale(1) translateY(50%);
  11617. }
  11618. .item-input-outline .item-input-info,
  11619. .item-input-outline .item-input-error-message {
  11620. padding-right: var(--f7-input-outline-padding-horizontal);
  11621. }
  11622. .block-strong .item-input-outline .item-floating-label {
  11623. background: var(--f7-block-strong-bg-color);
  11624. }
  11625. .list .item-input-outline .item-floating-label {
  11626. background: var(--f7-list-bg-color);
  11627. }
  11628. .theme-dark option {
  11629. background-color: var(--f7-page-bg-color);
  11630. }
  11631. .ios .item-label + .item-input-wrap,
  11632. .ios .item-floating-label + .item-input-wrap {
  11633. margin-top: 0;
  11634. }
  11635. .ios .item-input-focused .item-floating-label {
  11636. color: var(--f7-label-text-color);
  11637. }
  11638. .ios .item-input .item-media {
  11639. align-self: flex-start;
  11640. }
  11641. .ios .item-input-wrap {
  11642. margin-top: calc(-1 * var(--f7-list-item-padding-vertical));
  11643. margin-bottom: calc(-1 * var(--f7-list-item-padding-vertical));
  11644. }
  11645. .ios .inline-labels .item-label + .item-input-wrap,
  11646. .ios .inline-label .item-label + .item-input-wrap,
  11647. .ios .inline-labels .item-floating-label + .item-input-wrap,
  11648. .ios .inline-label .item-floating-label + .item-input-wrap {
  11649. margin-top: calc(-1 * var(--f7-list-item-padding-vertical));
  11650. }
  11651. .ios .inline-labels .item-input-wrap,
  11652. .ios .inline-label .item-input-wrap {
  11653. margin-top: calc(-1 * var(--f7-list-item-padding-vertical));
  11654. }
  11655. .ios .item-input-error-message,
  11656. .ios .item-input-info,
  11657. .ios .input-error-message,
  11658. .ios .input-info {
  11659. position: relative;
  11660. margin-bottom: 6px;
  11661. margin-top: -8px;
  11662. }
  11663. .ios .item-input-focused .item-label,
  11664. .ios .item-input-focused .item-floating-label {
  11665. color: var(--f7-label-focused-text-color, var(--f7-label-text-color));
  11666. }
  11667. .ios .item-input-focused .item-inner:after {
  11668. background: var(--f7-input-focused-border-color, var(--f7-list-item-border-color));
  11669. }
  11670. .ios .item-input-invalid .item-label,
  11671. .ios .item-input-invalid .item-floating-label {
  11672. color: var(--f7-label-invalid-text-color, var(--f7-label-text-color));
  11673. }
  11674. .ios .item-input-invalid .item-inner:after {
  11675. background: var(--f7-input-invalid-border-color, var(--f7-list-item-border-color));
  11676. }
  11677. .ios .item-input-invalid input,
  11678. .ios .input-invalid input,
  11679. .ios .item-input-invalid select,
  11680. .ios .input-invalid select,
  11681. .ios .item-input-invalid textarea,
  11682. .ios .input-invalid textarea {
  11683. color: var(--f7-input-invalid-text-color, var(--f7-input-error-text-color));
  11684. }
  11685. .ios .input-clear-button:after {
  11686. content: 'delete_round_ios';
  11687. font-size: calc(var(--f7-input-clear-button-size) / (14 / 10));
  11688. line-height: 1.4;
  11689. }
  11690. .ios .input-clear-button:before {
  11691. width: 44px;
  11692. height: 44px;
  11693. margin-left: -22px;
  11694. margin-top: -22px;
  11695. }
  11696. .ios .item-input-outline .item-input-wrap,
  11697. .ios .input-outline .item-input-wrap {
  11698. margin-top: 0;
  11699. margin-bottom: 0;
  11700. }
  11701. .ios .item-input-outline .item-input-error-message,
  11702. .ios .input-outline .item-input-error-message,
  11703. .ios .item-input-outline .item-input-info,
  11704. .ios .input-outline .item-input-info,
  11705. .ios .item-input-outline .input-error-message,
  11706. .ios .input-outline .input-error-message,
  11707. .ios .item-input-outline .input-info,
  11708. .ios .input-outline .input-info {
  11709. margin-top: 0;
  11710. white-space: normal;
  11711. overflow: hidden;
  11712. text-overflow: ellipsis;
  11713. }
  11714. .ios .item-input-outline .item-input-info,
  11715. .ios .input-outline .item-input-info,
  11716. .ios .item-input-outline .input-info,
  11717. .ios .input-outline .input-info {
  11718. margin-bottom: calc(-1 * var(--f7-input-info-font-size) * var(--f7-input-info-line-height));
  11719. }
  11720. .ios .item-input-outline .item-input-error-message,
  11721. .ios .input-outline .item-input-error-message,
  11722. .ios .item-input-outline .input-error-message,
  11723. .ios .input-outline .input-error-message {
  11724. margin-bottom: calc(-1 * var(--f7-input-error-font-size) * var(--f7-input-error-line-height));
  11725. }
  11726. .ios .item-input-outline.item-input-with-info .item-input-wrap,
  11727. .ios .input-outline.item-input-with-info .item-input-wrap,
  11728. .ios .item-input-outline.input-with-info .item-input-wrap,
  11729. .ios .input-outline.input-with-info .item-input-wrap {
  11730. margin-bottom: calc(var(--f7-input-info-font-size) * var(--f7-input-info-line-height));
  11731. }
  11732. .ios .item-input-outline.item-input-with-error-message .item-input-wrap,
  11733. .ios .input-outline.item-input-with-error-message .item-input-wrap,
  11734. .ios .item-input-outline.input-with-error-message .item-input-wrap,
  11735. .ios .input-outline.input-with-error-message .item-input-wrap {
  11736. margin-bottom: calc(var(--f7-input-error-font-size) * var(--f7-input-error-line-height));
  11737. }
  11738. .md .item-input:not(.item-input-outline) .item-input-wrap:after,
  11739. .md .input:not(.input-outline):after {
  11740. content: '';
  11741. position: absolute;
  11742. background-color: var(--f7-list-item-border-color);
  11743. display: block;
  11744. z-index: 15;
  11745. top: auto;
  11746. right: auto;
  11747. bottom: 0;
  11748. left: 0;
  11749. height: 1px;
  11750. width: 100%;
  11751. transform-origin: 50% 100%;
  11752. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  11753. }
  11754. .md .item-input:not(.item-input-outline) .item-input-wrap:after,
  11755. .md .input:not(.input-outline):after {
  11756. transition-duration: 200ms;
  11757. }
  11758. .md .item-input-wrap {
  11759. min-height: var(--f7-input-height);
  11760. }
  11761. .md .item-input .item-media {
  11762. align-self: flex-end;
  11763. }
  11764. .md .item-input .item-inner:after {
  11765. display: none !important;
  11766. }
  11767. .md .inline-labels .item-media,
  11768. .md .inline-label .item-media {
  11769. align-self: flex-start;
  11770. padding-top: 14px;
  11771. }
  11772. .md .item-input-with-error-message,
  11773. .md .item-input-with-info,
  11774. .md .input-with-error-message,
  11775. .md .input-with-info {
  11776. padding-bottom: 20px;
  11777. }
  11778. .md .item-input-error-message,
  11779. .md .item-input-info,
  11780. .md .input-error-message,
  11781. .md .input-info {
  11782. position: absolute;
  11783. top: 100%;
  11784. margin-top: 4px;
  11785. white-space: nowrap;
  11786. overflow: hidden;
  11787. text-overflow: ellipsis;
  11788. width: 100%;
  11789. right: 0;
  11790. }
  11791. .md .item-input-focused .item-label,
  11792. .md .item-input-focused .item-floating-label {
  11793. color: var(--f7-label-focused-text-color, var(--f7-theme-color));
  11794. }
  11795. .md .item-input-focused:not(.item-input-outline) .item-input-wrap:after,
  11796. .md .input-focused:not(.input-outline):after {
  11797. background: var(--f7-input-focused-border-color, var(--f7-theme-color));
  11798. }
  11799. .md .item-input-invalid:not(.item-input-outline) .item-input-wrap:after,
  11800. .md .item-input-focused:not(.item-input-outline) .item-input-wrap:after,
  11801. .md .input-invalid:not(.input-outline):after,
  11802. .md .input-focused:not(.input-outline):after {
  11803. transform: scaleY(2) !important;
  11804. }
  11805. .md .item-input-invalid:not(.item-input-outline) .item-input-wrap:after,
  11806. .md .input-invalid:not(.input-outline):after {
  11807. background: var(--f7-input-invalid-border-color, var(--f7-input-error-text-color));
  11808. }
  11809. .md .item-input-invalid .item-label,
  11810. .md .item-input-invalid .item-floating-label {
  11811. color: var(--f7-label-invalid-text-color, var(--f7-input-error-text-color));
  11812. }
  11813. .md .item-input-invalid input,
  11814. .md .input-invalid input,
  11815. .md .item-input-invalid select,
  11816. .md .input-invalid select,
  11817. .md .item-input-invalid textarea,
  11818. .md .input-invalid textarea {
  11819. color: var(--f7-input-invalid-text-color, var(--f7-input-text-color));
  11820. }
  11821. .md .input-clear-button:after {
  11822. font-size: calc(var(--f7-input-clear-button-size) / (24 / 20));
  11823. content: 'delete_round_md';
  11824. line-height: 1.2;
  11825. }
  11826. .md .input-clear-button:before {
  11827. width: 48px;
  11828. height: 48px;
  11829. margin-left: -24px;
  11830. margin-top: -24px;
  11831. }
  11832. .aurora .item-label + .item-input-wrap,
  11833. .aurora .item-floating-label + .item-input-wrap {
  11834. margin-top: 0;
  11835. }
  11836. .aurora .item-input-focused .item-floating-label {
  11837. color: var(--f7-label-text-color);
  11838. }
  11839. .aurora .item-input .item-media {
  11840. align-self: flex-start;
  11841. }
  11842. .aurora .item-input-error-message,
  11843. .aurora .item-input-info,
  11844. .aurora .input-error-message,
  11845. .aurora .input-info {
  11846. position: relative;
  11847. }
  11848. .aurora .item-input-focused .item-label,
  11849. .aurora .item-input-focused .item-floating-label {
  11850. color: var(--f7-label-focused-text-color, var(--f7-label-text-color));
  11851. }
  11852. .aurora .item-input-focused .item-inner:after {
  11853. background: var(--f7-input-focused-border-color, var(--f7-list-item-border-color));
  11854. }
  11855. .aurora .item-input-invalid .item-label,
  11856. .aurora .item-input-invalid .item-floating-label {
  11857. color: var(--f7-label-invalid-text-color, var(--f7-label-text-color));
  11858. }
  11859. .aurora .item-input-invalid .item-inner:after {
  11860. background: var(--f7-input-invalid-border-color, var(--f7-list-item-border-color));
  11861. }
  11862. .aurora .item-input-invalid input,
  11863. .aurora .input-invalid input,
  11864. .aurora .item-input-invalid select,
  11865. .aurora .input-invalid select,
  11866. .aurora .item-input-invalid textarea,
  11867. .aurora .input-invalid textarea {
  11868. color: var(--f7-input-invalid-text-color, var(--f7-input-error-text-color));
  11869. }
  11870. .aurora .input-clear-button:after {
  11871. content: 'delete_round_ios';
  11872. font-size: calc(var(--f7-input-clear-button-size) / (14 / 10));
  11873. line-height: 1.4;
  11874. }
  11875. .aurora .input-clear-button:before {
  11876. width: 28px;
  11877. height: 28px;
  11878. margin-left: -14px;
  11879. margin-top: -14px;
  11880. }
  11881. .aurora .item-input-outline .item-input-wrap,
  11882. .aurora .input-outline .item-input-wrap {
  11883. margin-top: 0;
  11884. margin-bottom: 0;
  11885. }
  11886. .aurora .item-input-outline .item-input-error-message,
  11887. .aurora .input-outline .item-input-error-message,
  11888. .aurora .item-input-outline .item-input-info,
  11889. .aurora .input-outline .item-input-info,
  11890. .aurora .item-input-outline .input-error-message,
  11891. .aurora .input-outline .input-error-message,
  11892. .aurora .item-input-outline .input-info,
  11893. .aurora .input-outline .input-info {
  11894. margin-top: 0;
  11895. white-space: normal;
  11896. overflow: hidden;
  11897. text-overflow: ellipsis;
  11898. }
  11899. .aurora .item-input-outline .item-input-info,
  11900. .aurora .input-outline .item-input-info,
  11901. .aurora .item-input-outline .input-info,
  11902. .aurora .input-outline .input-info {
  11903. margin-bottom: calc(-1 * var(--f7-input-info-font-size) * var(--f7-input-info-line-height));
  11904. }
  11905. .aurora .item-input-outline .item-input-error-message,
  11906. .aurora .input-outline .item-input-error-message,
  11907. .aurora .item-input-outline .input-error-message,
  11908. .aurora .input-outline .input-error-message {
  11909. margin-bottom: calc(-1 * var(--f7-input-error-font-size) * var(--f7-input-error-line-height));
  11910. }
  11911. .aurora .item-input-outline.item-input-with-info .item-input-wrap,
  11912. .aurora .input-outline.item-input-with-info .item-input-wrap,
  11913. .aurora .item-input-outline.input-with-info .item-input-wrap,
  11914. .aurora .input-outline.input-with-info .item-input-wrap {
  11915. margin-bottom: calc(var(--f7-input-info-font-size) * var(--f7-input-info-line-height));
  11916. }
  11917. .aurora .item-input-outline.item-input-with-error-message .item-input-wrap,
  11918. .aurora .input-outline.item-input-with-error-message .item-input-wrap,
  11919. .aurora .item-input-outline.input-with-error-message .item-input-wrap,
  11920. .aurora .input-outline.input-with-error-message .item-input-wrap {
  11921. margin-bottom: calc(var(--f7-input-error-font-size) * var(--f7-input-error-line-height));
  11922. }
  11923. /* === Checkbox === */
  11924. :root {
  11925. /* --f7-checkbox-active-color: var(--f7-theme-color); */
  11926. --f7-checkbox-icon-color: #fff;
  11927. }
  11928. :root .theme-dark,
  11929. :root.theme-dark {
  11930. --f7-checkbox-inactive-color: rgba(255, 255, 255, 0.3);
  11931. }
  11932. .ios {
  11933. --f7-checkbox-size: 22px;
  11934. --f7-checkbox-border-radius: 50%;
  11935. --f7-checkbox-border-width: 1px;
  11936. --f7-checkbox-extra-margin: 0px;
  11937. --f7-checkbox-inactive-color: #c7c7cc;
  11938. }
  11939. .md {
  11940. --f7-checkbox-size: 18px;
  11941. --f7-checkbox-border-radius: 2px;
  11942. --f7-checkbox-border-width: 2px;
  11943. --f7-checkbox-extra-margin: 22px;
  11944. --f7-checkbox-inactive-color: #6d6d6d;
  11945. }
  11946. .aurora {
  11947. --f7-checkbox-size: 14px;
  11948. --f7-checkbox-border-radius: 2px;
  11949. --f7-checkbox-border-width: 1px;
  11950. --f7-checkbox-extra-margin: 0px;
  11951. --f7-checkbox-inactive-color: #888;
  11952. }
  11953. .checkbox {
  11954. position: relative;
  11955. display: inline-block;
  11956. vertical-align: middle;
  11957. z-index: 1;
  11958. background-color: transparent;
  11959. --f7-touch-ripple-color: rgba(var(--f7-theme-color-rgb), 0.5);
  11960. }
  11961. .icon-checkbox,
  11962. .checkbox i {
  11963. flex-shrink: 0;
  11964. border: var(--f7-checkbox-border-width) solid var(--f7-checkbox-inactive-color);
  11965. width: var(--f7-checkbox-size);
  11966. height: var(--f7-checkbox-size);
  11967. border-radius: var(--f7-checkbox-border-radius);
  11968. box-sizing: border-box;
  11969. position: relative;
  11970. display: block;
  11971. }
  11972. .icon-checkbox:after,
  11973. .checkbox i:after {
  11974. font-family: 'framework7-core-icons';
  11975. font-weight: normal;
  11976. font-style: normal;
  11977. line-height: 1;
  11978. letter-spacing: normal;
  11979. text-transform: none;
  11980. white-space: nowrap;
  11981. word-wrap: normal;
  11982. direction: ltr;
  11983. -webkit-font-smoothing: antialiased;
  11984. text-rendering: optimizeLegibility;
  11985. -moz-osx-font-smoothing: grayscale;
  11986. font-feature-settings: "liga";
  11987. text-align: center;
  11988. display: block;
  11989. width: 100%;
  11990. height: 100%;
  11991. font-size: 20px;
  11992. width: var(--f7-checkbox-size);
  11993. height: var(--f7-checkbox-size);
  11994. line-height: var(--f7-checkbox-size);
  11995. top: calc(0px - var(--f7-checkbox-border-width));
  11996. opacity: 0;
  11997. color: var(--f7-checkbox-icon-color);
  11998. position: relative;
  11999. transition-property: opacity;
  12000. right: calc(0px - var(--f7-checkbox-border-width));
  12001. }
  12002. label.item-checkbox input[type="checkbox"]:not(:checked) ~ .icon-checkbox:after,
  12003. label.item-checkbox input[type="checkbox"]:not(:checked) ~ * .icon-checkbox:after,
  12004. .checkbox input[type="checkbox"]:not(:checked) ~ i:after {
  12005. font-size: 0;
  12006. }
  12007. label.item-checkbox input[type="checkbox"]:checked ~ .icon-checkbox,
  12008. label.item-checkbox input[type="checkbox"]:checked ~ * .icon-checkbox,
  12009. .checkbox input[type="checkbox"]:checked ~ i,
  12010. label.item-checkbox input[type="checkbox"]:indeterminate ~ .icon-checkbox,
  12011. label.item-checkbox input[type="checkbox"]:indeterminate ~ * .icon-checkbox,
  12012. .checkbox input[type="checkbox"]:indeterminate ~ i {
  12013. border-color: var(--f7-checkbox-active-color, var(--f7-theme-color));
  12014. background-color: var(--f7-checkbox-active-color, var(--f7-theme-color));
  12015. }
  12016. label.item-checkbox input[type="checkbox"]:checked ~ .icon-checkbox:after,
  12017. label.item-checkbox input[type="checkbox"]:checked ~ * .icon-checkbox:after,
  12018. .checkbox input[type="checkbox"]:checked ~ i:after,
  12019. label.item-checkbox input[type="checkbox"]:indeterminate ~ .icon-checkbox:after,
  12020. label.item-checkbox input[type="checkbox"]:indeterminate ~ * .icon-checkbox:after,
  12021. .checkbox input[type="checkbox"]:indeterminate ~ i:after {
  12022. opacity: 1;
  12023. }
  12024. label.item-checkbox input[type="checkbox"]:indeterminate ~ .icon-checkbox:after,
  12025. label.item-checkbox input[type="checkbox"]:indeterminate ~ * .icon-checkbox:after,
  12026. .checkbox input[type="checkbox"]:indeterminate ~ i:after {
  12027. font-size: 0;
  12028. content: '';
  12029. position: absolute;
  12030. top: 50%;
  12031. width: 70%;
  12032. background: #fff;
  12033. height: 2px;
  12034. border-radius: 2px;
  12035. margin-top: -1px;
  12036. transition: 0ms;
  12037. right: 15%;
  12038. }
  12039. label.item-checkbox,
  12040. .checkbox {
  12041. cursor: pointer;
  12042. }
  12043. label.item-checkbox input[type="checkbox"],
  12044. .checkbox input[type="checkbox"],
  12045. label.item-checkbox input[type="radio"],
  12046. .checkbox input[type="radio"] {
  12047. display: none;
  12048. }
  12049. label.item-checkbox {
  12050. transition-duration: 300ms;
  12051. }
  12052. label.item-checkbox .item-content .item-media,
  12053. label.item-checkbox.item-content .item-media {
  12054. align-self: center;
  12055. }
  12056. label.item-checkbox > .icon-checkbox {
  12057. margin-left: calc(var(--f7-list-item-media-margin) + var(--f7-checkbox-extra-margin));
  12058. }
  12059. label.item-checkbox.active-state {
  12060. background-color: var(--f7-list-link-pressed-bg-color);
  12061. }
  12062. label.item-checkbox.active-state:after {
  12063. background-color: transparent;
  12064. }
  12065. label.item-checkbox.disabled,
  12066. .disabled label.item-checkbox {
  12067. opacity: 0.55;
  12068. pointer-events: none;
  12069. opacity: 0.55 !important;
  12070. pointer-events: none !important;
  12071. }
  12072. .ios .icon-checkbox:after,
  12073. .ios .checkbox i:after {
  12074. content: 'checkbox_ios';
  12075. font-size: 21px;
  12076. }
  12077. .ios label.item-checkbox.active-state {
  12078. transition-duration: 0ms;
  12079. }
  12080. .ios label.item-checkbox input[type="checkbox"]:indeterminate ~ .icon-checkbox:after,
  12081. .ios label.item-checkbox input[type="checkbox"]:indeterminate ~ * .icon-checkbox:after,
  12082. .ios .checkbox input[type="checkbox"]:indeterminate ~ i:after {
  12083. height: 1px;
  12084. margin-top: 0px;
  12085. }
  12086. .md .icon-checkbox,
  12087. .md .checkbox i {
  12088. transition-duration: 200ms;
  12089. }
  12090. .md .icon-checkbox:after,
  12091. .md .checkbox i:after {
  12092. content: 'checkbox_md';
  12093. transition-duration: 200ms;
  12094. font-size: 15px;
  12095. }
  12096. .md label.item-checkbox {
  12097. position: relative;
  12098. overflow: hidden;
  12099. z-index: 0;
  12100. }
  12101. .aurora .icon-checkbox,
  12102. .aurora .checkbox i {
  12103. transition-duration: 150ms;
  12104. }
  12105. .aurora .icon-checkbox:after,
  12106. .aurora .checkbox i:after {
  12107. content: 'checkbox_aurora';
  12108. transition-duration: 150ms;
  12109. font-size: 19px;
  12110. }
  12111. .aurora .icon-checkbox:before,
  12112. .aurora .checkbox i:before {
  12113. content: '';
  12114. position: absolute;
  12115. left: 0;
  12116. top: 0;
  12117. width: 100%;
  12118. height: 100%;
  12119. background: rgba(0, 0, 0, 0.1);
  12120. opacity: 0;
  12121. transition-duration: 150ms;
  12122. }
  12123. .aurora .checkbox.active-state i:before {
  12124. opacity: 1;
  12125. }
  12126. .aurora label.item-checkbox {
  12127. position: relative;
  12128. overflow: hidden;
  12129. z-index: 0;
  12130. }
  12131. /* === Radio === */
  12132. :root {
  12133. /*
  12134. --f7-radio-active-color: var(--f7-theme-color);
  12135. */
  12136. --f7-radio-border-radius: 50%;
  12137. }
  12138. :root .theme-dark,
  12139. :root.theme-dark {
  12140. --f7-radio-inactive-color: rgba(255, 255, 255, 0.3);
  12141. }
  12142. .ios {
  12143. --f7-radio-size: 22px;
  12144. --f7-radio-border-width: 1px;
  12145. --f7-radio-extra-margin: 0px;
  12146. --f7-radio-inactive-color: #c7c7cc;
  12147. }
  12148. .md {
  12149. --f7-radio-size: 20px;
  12150. --f7-radio-border-width: 2px;
  12151. --f7-radio-extra-margin: 22px;
  12152. --f7-radio-inactive-color: #6d6d6d;
  12153. }
  12154. .aurora {
  12155. --f7-radio-size: 16px;
  12156. --f7-radio-border-width: 1px;
  12157. --f7-radio-extra-margin: 0px;
  12158. --f7-radio-inactive-color: #888;
  12159. }
  12160. .radio {
  12161. position: relative;
  12162. display: inline-block;
  12163. vertical-align: middle;
  12164. z-index: 1;
  12165. --f7-touch-ripple-color: rgba(var(--f7-theme-color-rgb), 0.5);
  12166. }
  12167. .icon-radio {
  12168. width: var(--f7-radio-size);
  12169. height: var(--f7-radio-size);
  12170. border-radius: var(--f7-radio-border-radius);
  12171. position: relative;
  12172. box-sizing: border-box;
  12173. display: block;
  12174. flex-shrink: 0;
  12175. }
  12176. .radio .icon-radio,
  12177. .md .icon-radio,
  12178. .aurora .icon-radio {
  12179. border: var(--f7-radio-border-width) solid var(--f7-radio-inactive-color);
  12180. }
  12181. label.item-radio,
  12182. .radio {
  12183. cursor: pointer;
  12184. }
  12185. label.item-radio input[type="checkbox"],
  12186. .radio input[type="checkbox"],
  12187. label.item-radio input[type="radio"],
  12188. .radio input[type="radio"] {
  12189. display: none;
  12190. }
  12191. label.item-radio {
  12192. transition-duration: 300ms;
  12193. }
  12194. label.item-radio .item-content .item-media,
  12195. label.item-radio.item-content .item-media {
  12196. align-self: center;
  12197. }
  12198. label.item-radio.active-state {
  12199. background-color: var(--f7-list-link-pressed-bg-color);
  12200. }
  12201. label.item-radio.active-state:after {
  12202. background-color: transparent;
  12203. }
  12204. label.item-radio.disabled,
  12205. .disabled label.item-radio {
  12206. opacity: 0.55;
  12207. pointer-events: none;
  12208. opacity: 0.55 !important;
  12209. pointer-events: none !important;
  12210. }
  12211. .ios .icon-radio:after {
  12212. font-family: 'framework7-core-icons';
  12213. font-weight: normal;
  12214. font-style: normal;
  12215. line-height: 1;
  12216. letter-spacing: normal;
  12217. text-transform: none;
  12218. white-space: nowrap;
  12219. word-wrap: normal;
  12220. direction: ltr;
  12221. -webkit-font-smoothing: antialiased;
  12222. text-rendering: optimizeLegibility;
  12223. -moz-osx-font-smoothing: grayscale;
  12224. font-feature-settings: "liga";
  12225. text-align: center;
  12226. display: block;
  12227. width: 100%;
  12228. height: 100%;
  12229. width: calc(var(--f7-radio-size) - var(--f7-radio-border-width) * 2);
  12230. height: calc(var(--f7-radio-size) - var(--f7-radio-border-width) * 2);
  12231. line-height: calc(var(--f7-radio-size) - var(--f7-radio-border-width) * 2 + 1px);
  12232. font-size: 20px;
  12233. content: 'radio_ios';
  12234. color: var(--f7-radio-active-color, var(--f7-theme-color));
  12235. opacity: 0;
  12236. }
  12237. .ios label.item-radio input[type="radio"]:checked ~ .icon-radio:after,
  12238. .ios label.item-radio input[type="radio"]:checked ~ * .icon-radio:after,
  12239. .ios .radio input[type="radio"]:checked ~ .icon-radio:after {
  12240. opacity: 1;
  12241. }
  12242. .ios .radio input[type="radio"]:checked ~ .icon-radio {
  12243. border-color: var(--f7-radio-active-color, var(--f7-theme-color));
  12244. }
  12245. .ios label.item-radio:not(.item-radio-icon-start) input[type="radio"] ~ .icon-radio {
  12246. position: absolute;
  12247. top: 50%;
  12248. margin-top: -11px;
  12249. left: calc(var(--f7-safe-area-left) + 10px);
  12250. }
  12251. .ios label.item-radio:not(.item-radio-icon-start) .item-inner {
  12252. padding-left: calc(var(--f7-safe-area-left) + 36px);
  12253. }
  12254. .ios label.item-radio-icon-start > .icon-radio {
  12255. margin-left: calc(var(--f7-list-item-media-margin) + var(--f7-checkbox-extra-margin));
  12256. }
  12257. .ios label.item-radio.active-state {
  12258. transition-duration: 0ms;
  12259. }
  12260. .md .icon-radio {
  12261. transition-duration: 200ms;
  12262. }
  12263. .md .icon-radio:after {
  12264. content: '';
  12265. position: absolute;
  12266. width: 10px;
  12267. height: 10px;
  12268. left: 50%;
  12269. top: 50%;
  12270. margin-left: -5px;
  12271. margin-top: -5px;
  12272. background-color: var(--f7-radio-active-color, var(--f7-theme-color));
  12273. border-radius: 50%;
  12274. transform: scale(0);
  12275. transition-duration: 200ms;
  12276. }
  12277. .md label.item-radio input[type="radio"]:checked ~ .icon-radio,
  12278. .md label.item-radio input[type="radio"]:checked ~ * .icon-radio,
  12279. .md .radio input[type="radio"]:checked ~ .icon-radio {
  12280. border-color: var(--f7-radio-active-color, var(--f7-theme-color));
  12281. }
  12282. .md label.item-radio input[type="radio"]:checked ~ .icon-radio:after,
  12283. .md label.item-radio input[type="radio"]:checked ~ * .icon-radio:after,
  12284. .md .radio input[type="radio"]:checked ~ .icon-radio:after {
  12285. background-color: var(--f7-radio-active-color, var(--f7-theme-color));
  12286. transform: scale(1);
  12287. }
  12288. .md label.item-radio {
  12289. position: relative;
  12290. overflow: hidden;
  12291. z-index: 0;
  12292. }
  12293. .md label.item-radio:not(.item-radio-icon-end) > .icon-radio {
  12294. margin-left: calc(var(--f7-list-item-media-margin) + var(--f7-radio-extra-margin));
  12295. }
  12296. .md label.item-radio-icon-end input[type="radio"] ~ .icon-radio {
  12297. position: absolute;
  12298. top: 50%;
  12299. margin-top: -10px;
  12300. left: calc(var(--f7-safe-area-left) + 16px);
  12301. }
  12302. .md label.item-radio-icon-end .item-inner {
  12303. padding-left: calc(var(--f7-safe-area-left) + 52px);
  12304. }
  12305. .aurora .icon-radio {
  12306. transition-duration: 150ms;
  12307. overflow: hidden;
  12308. }
  12309. .aurora .icon-radio:after {
  12310. content: '';
  12311. position: absolute;
  12312. width: 6px;
  12313. height: 6px;
  12314. left: 50%;
  12315. top: 50%;
  12316. margin-left: -3px;
  12317. margin-top: -3px;
  12318. background-color: #fff;
  12319. border-radius: 50%;
  12320. transform: scale(0);
  12321. transition-duration: 150ms;
  12322. }
  12323. .aurora .icon-radio:before {
  12324. content: '';
  12325. position: absolute;
  12326. left: 0;
  12327. top: 0;
  12328. width: 100%;
  12329. height: 100%;
  12330. background: rgba(0, 0, 0, 0.1);
  12331. opacity: 0;
  12332. transition-duration: 150ms;
  12333. }
  12334. .aurora .radio.active-state i:before {
  12335. opacity: 1;
  12336. }
  12337. .aurora label.item-radio input[type="radio"]:checked ~ .icon-radio,
  12338. .aurora label.item-radio input[type="radio"]:checked ~ * .icon-radio,
  12339. .aurora .radio input[type="radio"]:checked ~ .icon-radio {
  12340. border-color: var(--f7-radio-active-color, var(--f7-theme-color));
  12341. background-color: var(--f7-radio-active-color, var(--f7-theme-color));
  12342. }
  12343. .aurora label.item-radio input[type="radio"]:checked ~ .icon-radio:after,
  12344. .aurora label.item-radio input[type="radio"]:checked ~ * .icon-radio:after,
  12345. .aurora .radio input[type="radio"]:checked ~ .icon-radio:after {
  12346. transform: scale(1);
  12347. }
  12348. .aurora label.item-radio {
  12349. position: relative;
  12350. overflow: hidden;
  12351. z-index: 0;
  12352. }
  12353. .aurora label.item-radio:not(.item-radio-icon-end) > .icon-radio {
  12354. margin-left: calc(var(--f7-list-item-media-margin) + var(--f7-radio-extra-margin));
  12355. }
  12356. .aurora label.item-radio-icon-end input[type="radio"] ~ .icon-radio {
  12357. position: absolute;
  12358. top: 50%;
  12359. margin-top: -8px;
  12360. left: calc(var(--f7-safe-area-left) + 16px);
  12361. }
  12362. .aurora label.item-radio-icon-end .item-inner {
  12363. padding-left: calc(var(--f7-safe-area-left) + 48px);
  12364. }
  12365. /* === Toggle === */
  12366. :root {
  12367. --f7-toggle-handle-color: #fff;
  12368. }
  12369. :root .theme-dark,
  12370. :root.theme-dark {
  12371. --f7-toggle-inactive-color: #555;
  12372. }
  12373. .ios {
  12374. --f7-toggle-width: 52px;
  12375. --f7-toggle-height: 32px;
  12376. --f7-toggle-border-color: #e5e5e5;
  12377. --f7-toggle-inactive-color: #fff;
  12378. }
  12379. .ios .theme-dark,
  12380. .ios.theme-dark {
  12381. --f7-toggle-border-color: #555;
  12382. }
  12383. .md {
  12384. --f7-toggle-width: 36px;
  12385. --f7-toggle-height: 14px;
  12386. --f7-toggle-inactive-color: #b0afaf;
  12387. }
  12388. .aurora {
  12389. --f7-toggle-width: 40px;
  12390. --f7-toggle-height: 20px;
  12391. --f7-toggle-inactive-color: #aaa;
  12392. }
  12393. .toggle,
  12394. .toggle-icon {
  12395. width: var(--f7-toggle-width);
  12396. height: var(--f7-toggle-height);
  12397. border-radius: var(--f7-toggle-height);
  12398. }
  12399. .toggle {
  12400. display: inline-block;
  12401. vertical-align: middle;
  12402. position: relative;
  12403. box-sizing: border-box;
  12404. align-self: center;
  12405. -webkit-user-select: none;
  12406. -moz-user-select: none;
  12407. user-select: none;
  12408. }
  12409. .toggle input[type="checkbox"] {
  12410. display: none;
  12411. }
  12412. .toggle input[disabled] ~ .toggle-icon {
  12413. pointer-events: none;
  12414. }
  12415. .toggle-icon {
  12416. z-index: 0;
  12417. margin: 0;
  12418. padding: 0;
  12419. -webkit-appearance: none;
  12420. -moz-appearance: none;
  12421. appearance: none;
  12422. border: none;
  12423. position: relative;
  12424. transition: 300ms;
  12425. box-sizing: border-box;
  12426. display: block;
  12427. cursor: pointer;
  12428. }
  12429. .toggle-icon:before,
  12430. .toggle-icon:after {
  12431. content: '';
  12432. }
  12433. .toggle-icon:after {
  12434. background: var(--f7-toggle-handle-color);
  12435. position: absolute;
  12436. z-index: 2;
  12437. transform: translateX(0px);
  12438. transition-duration: 300ms;
  12439. }
  12440. .ios .toggle input[type="checkbox"]:checked + .toggle-icon {
  12441. background: var(--f7-toggle-active-color, var(--f7-theme-color));
  12442. }
  12443. .ios .toggle input[type="checkbox"]:checked + .toggle-icon:before {
  12444. transform: scale(0);
  12445. }
  12446. .ios .toggle input[type="checkbox"]:checked + .toggle-icon:after {
  12447. transform: translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height))));
  12448. }
  12449. .ios .toggle-icon {
  12450. background: var(--f7-toggle-border-color);
  12451. }
  12452. .ios .toggle-icon:before {
  12453. position: absolute;
  12454. right: 2px;
  12455. top: 2px;
  12456. width: calc(var(--f7-toggle-width) - 4px);
  12457. height: calc(var(--f7-toggle-height) - 4px);
  12458. border-radius: var(--f7-toggle-height);
  12459. box-sizing: border-box;
  12460. background: var(--f7-toggle-inactive-color);
  12461. z-index: 1;
  12462. transition-duration: 300ms;
  12463. transform: scale(1);
  12464. }
  12465. .ios .toggle-icon:after {
  12466. height: calc(var(--f7-toggle-height) - 4px);
  12467. width: calc(var(--f7-toggle-height) - 4px);
  12468. top: 2px;
  12469. right: 2px;
  12470. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  12471. border-radius: calc(var(--f7-toggle-height) - 4px);
  12472. }
  12473. .ios .toggle-active-state input[type="checkbox"]:not(:checked) + .toggle-icon:before {
  12474. transform: scale(0);
  12475. }
  12476. .ios .toggle-active-state input[type="checkbox"] + .toggle-icon:after {
  12477. width: calc(var(--f7-toggle-height) + 4px);
  12478. }
  12479. .ios .toggle-active-state input[type="checkbox"]:checked + .toggle-icon:after {
  12480. transform: translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height) - 8px)));
  12481. }
  12482. .md .toggle input[type="checkbox"]:checked + .toggle-icon {
  12483. background: var(--f7-toggle-active-color, rgba(var(--f7-theme-color-rgb), 0.5));
  12484. }
  12485. .md .toggle input[type="checkbox"]:checked + .toggle-icon:after {
  12486. transform: translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height) - 6px)));
  12487. background: var(--f7-toggle-active-color, var(--f7-theme-color));
  12488. }
  12489. .md .toggle-icon {
  12490. background: var(--f7-toggle-inactive-color);
  12491. }
  12492. .md .toggle-icon:after {
  12493. height: calc(var(--f7-toggle-height) + 6px);
  12494. width: calc(var(--f7-toggle-height) + 6px);
  12495. top: -3px;
  12496. box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
  12497. border-radius: var(--f7-toggle-height);
  12498. right: 0;
  12499. }
  12500. .aurora .toggle input[type="checkbox"]:checked + .toggle-icon {
  12501. background: var(--f7-toggle-active-color, var(--f7-theme-color));
  12502. }
  12503. .aurora .toggle input[type="checkbox"]:checked + .toggle-icon:after {
  12504. transform: translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height))));
  12505. }
  12506. .aurora .toggle-icon {
  12507. background: var(--f7-toggle-inactive-color);
  12508. }
  12509. .aurora .toggle-icon:after {
  12510. height: calc(var(--f7-toggle-height) - 4px);
  12511. width: calc(var(--f7-toggle-height) - 4px);
  12512. top: 2px;
  12513. right: 2px;
  12514. border-radius: calc(var(--f7-toggle-height) - 4px);
  12515. }
  12516. /* === Range Slider === */
  12517. :root {
  12518. /*
  12519. --f7-range-bar-active-bg-color: var(--f7-theme-color);
  12520. --f7-range-scale-bg-color: var(--f7-range-bar-bg-color);
  12521. --f7-range-scale-substep-bg-color: var(--f7-range-bar-bg-color);
  12522. */
  12523. --f7-range-scale-step-height: 5px;
  12524. --f7-range-scale-text-color: #666;
  12525. --f7-range-scale-substep-width: 1px;
  12526. --f7-range-scale-substep-height: 4px;
  12527. }
  12528. .ios {
  12529. --f7-range-size: 28px;
  12530. --f7-range-bar-bg-color: #b7b8b7;
  12531. --f7-range-bar-size: 1px;
  12532. --f7-range-bar-border-radius: 2px;
  12533. --f7-range-knob-size: 28px;
  12534. --f7-range-knob-color: #fff;
  12535. --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  12536. --f7-range-label-size: 20px;
  12537. --f7-range-label-text-color: #000;
  12538. --f7-range-label-bg-color: #fff;
  12539. --f7-range-label-font-size: 12px;
  12540. --f7-range-label-font-weight: normal;
  12541. --f7-range-label-border-radius: 5px;
  12542. --f7-range-label-padding: 0px;
  12543. --f7-range-scale-step-width: 1px;
  12544. --f7-range-scale-font-size: 12px;
  12545. --f7-range-scale-font-weight: 400;
  12546. --f7-range-scale-label-offset: 4px;
  12547. }
  12548. .md {
  12549. --f7-range-size: 20px;
  12550. --f7-range-bar-bg-color: #b9b9b9;
  12551. --f7-range-bar-size: 2px;
  12552. --f7-range-bar-border-radius: 0px;
  12553. --f7-range-knob-size: 12px;
  12554. /*
  12555. --f7-range-knob-color: var(--f7-theme-color);
  12556. */
  12557. --f7-range-knob-box-shadow: none;
  12558. --f7-range-label-size: 26px;
  12559. --f7-range-label-font-weight: normal;
  12560. --f7-range-label-text-color: #fff;
  12561. /*
  12562. --f7-range-label-bg-color: var(--f7-theme-color);
  12563. */
  12564. --f7-range-label-font-size: 10px;
  12565. --f7-range-label-border-radius: 50%;
  12566. --f7-range-label-padding: 0px;
  12567. --f7-range-scale-step-width: 2px;
  12568. --f7-range-scale-font-size: 12px;
  12569. --f7-range-scale-font-weight: 400;
  12570. --f7-range-scale-label-offset: 4px;
  12571. }
  12572. .aurora {
  12573. --f7-range-size: 20px;
  12574. --f7-range-bar-bg-color: #c7c7c7;
  12575. --f7-range-bar-size: 2px;
  12576. --f7-range-bar-border-radius: 2px;
  12577. --f7-range-knob-size: 16px;
  12578. /*
  12579. --f7-range-knob-color: var(--f7-theme-color);
  12580. */
  12581. --f7-range-knob-box-shadow: none;
  12582. --f7-range-label-size: 20px;
  12583. --f7-range-label-text-color: #fff;
  12584. /*
  12585. --f7-range-label-bg-color: var(--f7-theme-color);
  12586. */
  12587. --f7-range-label-font-size: 10px;
  12588. --f7-range-label-font-weight: 600;
  12589. --f7-range-label-border-radius: 4px;
  12590. --f7-range-label-padding: 0px 4px;
  12591. --f7-range-scale-step-width: 2px;
  12592. --f7-range-scale-font-size: 11px;
  12593. --f7-range-scale-font-weight: 500;
  12594. --f7-range-scale-label-offset: 2px;
  12595. }
  12596. .range-slider {
  12597. display: block;
  12598. position: relative;
  12599. align-self: center;
  12600. cursor: pointer;
  12601. -webkit-user-select: none;
  12602. -moz-user-select: none;
  12603. user-select: none;
  12604. }
  12605. .range-slider input[type="range"] {
  12606. display: none;
  12607. }
  12608. .range-slider.range-slider-horizontal {
  12609. width: 100%;
  12610. height: var(--f7-range-size);
  12611. touch-action: pan-y;
  12612. }
  12613. .range-slider.range-slider-vertical {
  12614. height: 100%;
  12615. width: var(--f7-range-size);
  12616. touch-action: pan-x;
  12617. }
  12618. .range-bar {
  12619. position: absolute;
  12620. overflow: hidden;
  12621. background: var(--f7-range-bar-bg-color);
  12622. border-radius: var(--f7-range-bar-border-radius);
  12623. }
  12624. .range-slider-vertical .range-bar {
  12625. left: 50%;
  12626. top: 0;
  12627. height: 100%;
  12628. width: var(--f7-range-bar-size);
  12629. margin-left: calc(-1 * var(--f7-range-bar-size) / 2);
  12630. }
  12631. .range-slider-horizontal .range-bar {
  12632. left: 0;
  12633. top: 50%;
  12634. width: 100%;
  12635. height: var(--f7-range-bar-size);
  12636. margin-top: calc(-1 * var(--f7-range-bar-size) / 2);
  12637. }
  12638. .range-bar-active {
  12639. position: absolute;
  12640. background: var(--f7-range-bar-active-bg-color, var(--f7-theme-color));
  12641. }
  12642. .range-slider-horizontal .range-bar-active {
  12643. right: 0;
  12644. top: 0;
  12645. height: 100%;
  12646. }
  12647. .range-slider-vertical .range-bar-active {
  12648. left: 0;
  12649. bottom: 0;
  12650. width: 100%;
  12651. }
  12652. .range-slider-vertical-reversed .range-bar-active {
  12653. top: 0;
  12654. bottom: auto;
  12655. }
  12656. .range-knob-wrap {
  12657. z-index: 20;
  12658. position: absolute;
  12659. height: var(--f7-range-knob-size);
  12660. width: var(--f7-range-knob-size);
  12661. }
  12662. .range-slider-horizontal .range-knob-wrap {
  12663. top: 50%;
  12664. margin-top: calc(-1 * var(--f7-range-knob-size) / 2);
  12665. margin-right: calc(-1 * var(--f7-range-knob-size) / 2);
  12666. right: 0;
  12667. }
  12668. .range-slider-vertical .range-knob-wrap {
  12669. left: 50%;
  12670. margin-left: calc(-1 * var(--f7-range-knob-size) / 2);
  12671. bottom: 0;
  12672. margin-bottom: calc(-1 * var(--f7-range-knob-size) / 2);
  12673. }
  12674. .range-slider-vertical-reversed .range-knob-wrap {
  12675. bottom: auto;
  12676. top: 0;
  12677. margin-bottom: 0;
  12678. margin-top: calc(-1 * var(--f7-range-knob-size) / 2);
  12679. }
  12680. .range-knob {
  12681. box-sizing: border-box;
  12682. border-radius: 50%;
  12683. position: absolute;
  12684. left: 0;
  12685. top: 0;
  12686. width: 100%;
  12687. height: 100%;
  12688. z-index: 1;
  12689. background: var(--f7-range-knob-color, var(--f7-range-knob-bg-color, var(--f7-theme-color)));
  12690. box-shadow: var(--f7-range-knob-box-shadow);
  12691. }
  12692. .range-knob:after {
  12693. content: '';
  12694. position: absolute;
  12695. left: 50%;
  12696. top: 50%;
  12697. width: 44px;
  12698. height: 44px;
  12699. margin-left: -22px;
  12700. margin-top: -22px;
  12701. }
  12702. .range-knob-label {
  12703. position: absolute;
  12704. left: 50%;
  12705. bottom: 100%;
  12706. text-align: center;
  12707. transition-duration: 120ms;
  12708. transition-property: transform;
  12709. box-sizing: border-box;
  12710. transform: translateY(100%) scale(0);
  12711. height: var(--f7-range-label-size);
  12712. line-height: var(--f7-range-label-size);
  12713. min-width: var(--f7-range-label-size);
  12714. color: var(--f7-range-label-text-color);
  12715. background-color: var(--f7-range-label-bg-color, var(--f7-theme-color));
  12716. font-size: var(--f7-range-label-font-size);
  12717. font-weight: var(--f7-range-label-font-weight);
  12718. border-radius: var(--f7-range-label-border-radius);
  12719. padding: var(--f7-range-label-padding);
  12720. }
  12721. .range-knob-active-state .range-knob-label {
  12722. transform: translateY(0%) scale(1);
  12723. }
  12724. .range-scale {
  12725. position: absolute;
  12726. }
  12727. .range-slider-horizontal .range-scale {
  12728. top: 50%;
  12729. left: 0;
  12730. width: 100%;
  12731. margin-top: calc(var(--f7-range-bar-size) / 2);
  12732. }
  12733. .range-slider-vertical .range-scale {
  12734. right: 50%;
  12735. top: 0;
  12736. height: 100%;
  12737. margin-right: calc(var(--f7-range-bar-size) / 2);
  12738. }
  12739. .range-scale-step {
  12740. position: absolute;
  12741. box-sizing: border-box;
  12742. display: flex;
  12743. font-size: var(--f7-range-scale-font-size);
  12744. font-weight: var(--f7-range-scale-font-weight);
  12745. color: var(--f7-range-scale-text-color, var(--f7-range-bar-bg-color));
  12746. line-height: 1;
  12747. }
  12748. .range-scale-step:before {
  12749. content: '';
  12750. position: absolute;
  12751. background: var(--f7-range-scale-step-bg-color, var(--f7-range-bar-bg-color));
  12752. }
  12753. .range-slider-horizontal .range-scale-step {
  12754. justify-content: center;
  12755. align-items: flex-start;
  12756. width: var(--f7-range-scale-step-width);
  12757. height: var(--f7-range-scale-step-height);
  12758. padding-top: calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));
  12759. top: 0;
  12760. margin-right: calc(-1 * var(--f7-range-scale-step-width) / 2);
  12761. }
  12762. .range-slider-horizontal .range-scale-step:before {
  12763. left: 0;
  12764. top: 0;
  12765. width: 100%;
  12766. height: var(--f7-range-scale-step-height);
  12767. }
  12768. .range-slider-horizontal .range-scale-step:first-child {
  12769. margin-right: 0;
  12770. }
  12771. .range-slider-horizontal .range-scale-step:last-child {
  12772. margin-right: calc(-1 * var(--f7-range-scale-step-width));
  12773. }
  12774. .range-slider-vertical .range-scale-step {
  12775. line-height: 1;
  12776. justify-content: flex-end;
  12777. align-items: center;
  12778. height: var(--f7-range-scale-step-width);
  12779. width: var(--f7-range-scale-step-height);
  12780. padding-right: calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));
  12781. right: 0;
  12782. margin-bottom: calc(-1 * var(--f7-range-scale-step-width) / 2);
  12783. }
  12784. .range-slider-vertical .range-scale-step:first-child {
  12785. margin-bottom: 0;
  12786. }
  12787. .range-slider-vertical .range-scale-step:last-child {
  12788. margin-bottom: calc(-1 * var(--f7-range-scale-step-width));
  12789. }
  12790. .range-slider-vertical .range-scale-step:before {
  12791. right: 0;
  12792. top: 0;
  12793. height: 100%;
  12794. width: var(--f7-range-scale-step-height);
  12795. }
  12796. .range-scale-substep {
  12797. --f7-range-scale-step-bg-color: var(--f7-range-scale-substep-bg-color, var(--f7-range-bar-bg-color));
  12798. --f7-range-scale-step-width: var(--f7-range-scale-substep-width);
  12799. --f7-range-scale-step-height: var(--f7-range-scale-substep-height);
  12800. }
  12801. .ios .range-knob-label {
  12802. margin-bottom: 6px;
  12803. transform: translateX(-50%) translateY(100%) scale(0);
  12804. }
  12805. .ios .range-knob-active-state .range-knob-label {
  12806. transform: translateX(-50%) translateY(0%) scale(1);
  12807. }
  12808. .md .range-knob {
  12809. transition-duration: 200ms;
  12810. transition-property: transform, background-color;
  12811. }
  12812. .md .range-knob-active-state .range-knob {
  12813. transform: scale(1.5);
  12814. }
  12815. .md .range-slider-min:not(.range-slider-dual) .range-knob {
  12816. background: #fff !important;
  12817. border: 2px solid var(--f7-range-bar-bg-color);
  12818. }
  12819. .md .range-knob-label {
  12820. width: var(--f7-range-label-size);
  12821. margin-left: calc(-1 * var(--f7-range-label-size) / 2);
  12822. margin-bottom: 8px;
  12823. }
  12824. .md .range-knob-label:before {
  12825. content: '';
  12826. left: 50%;
  12827. top: 0px;
  12828. margin-left: calc(-1 * var(--f7-range-label-size) / 2);
  12829. position: absolute;
  12830. z-index: -1;
  12831. width: var(--f7-range-label-size);
  12832. height: var(--f7-range-label-size);
  12833. background: var(--f7-range-label-bg-color, var(--f7-theme-color));
  12834. transform: rotate(-45deg);
  12835. border-radius: 50% 50% 50% 0;
  12836. }
  12837. .md .range-knob-active-state .range-knob-label {
  12838. transform: translateY(0%) scale(1);
  12839. }
  12840. .md .range-slider-label .range-knob-active-state .range-knob {
  12841. transform: scale(0);
  12842. }
  12843. .aurora .range-knob-label {
  12844. margin-bottom: 6px;
  12845. transform: translateX(-50%) translateY(100%) scale(0);
  12846. }
  12847. .aurora .range-knob-active-state .range-knob-label {
  12848. transform: translateX(-50%) translateY(0%) scale(1);
  12849. }
  12850. /* === Stepper === */
  12851. :root {
  12852. /*
  12853. --f7-stepper-button-text-color: var(--f7-theme-color);
  12854. --f7-stepper-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
  12855. --f7-stepper-value-text-color: var(--f7-theme-color);
  12856. */
  12857. --f7-stepper-fill-button-text-color: #fff;
  12858. /*
  12859. --f7-stepper-fill-button-bg-color: var(--f7-theme-color);
  12860. */
  12861. --f7-stepper-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0,0,0,0.24);
  12862. --f7-stepper-value-font-weight: 500;
  12863. --f7-stepper-border-width: 2px;
  12864. }
  12865. .ios {
  12866. --f7-stepper-height: 28px;
  12867. --f7-stepper-border-radius: 5px;
  12868. /*
  12869. --f7-stepper-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
  12870. --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-tint);
  12871. */
  12872. --f7-stepper-large-height: 44px;
  12873. --f7-stepper-small-height: 26px;
  12874. --f7-stepper-small-border-width: 2px;
  12875. --f7-stepper-value-font-size: 17px;
  12876. }
  12877. .md {
  12878. --f7-stepper-height: 36px;
  12879. --f7-stepper-border-radius: 4px;
  12880. /*
  12881. --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-shade);
  12882. */
  12883. --f7-stepper-large-height: 48px;
  12884. --f7-stepper-small-border-width: 2px;
  12885. --f7-stepper-small-height: 28px;
  12886. --f7-stepper-value-font-size: 14px;
  12887. --f7-stepper-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
  12888. }
  12889. .md .theme-dark,
  12890. .md.theme-dark {
  12891. --f7-stepper-button-pressed-bg-color: rgba(255, 255, 255, 0.1);
  12892. }
  12893. .aurora {
  12894. /*
  12895. --f7-stepper-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07);
  12896. --f7-stepper-button-fill-hover-bg-color: var(--f7-theme-color-tint);
  12897. */
  12898. --f7-stepper-height: 28px;
  12899. --f7-stepper-border-radius: 4px;
  12900. /*
  12901. --f7-stepper-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
  12902. --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-shade);
  12903. */
  12904. --f7-stepper-large-height: 34px;
  12905. --f7-stepper-small-border-width: 1px;
  12906. --f7-stepper-small-height: 22px;
  12907. --f7-stepper-value-font-size: 14px;
  12908. }
  12909. .stepper {
  12910. display: inline-flex;
  12911. align-items: stretch;
  12912. height: var(--f7-stepper-height);
  12913. border-radius: var(--f7-stepper-border-radius);
  12914. flex-direction: row-reverse;
  12915. }
  12916. .stepper-button,
  12917. .stepper-button-minus,
  12918. .stepper-button-plus {
  12919. background-color: var(--f7-stepper-button-bg-color);
  12920. width: 40px;
  12921. border-radius: var(--f7-stepper-border-radius);
  12922. border: var(--f7-stepper-border-width) solid var(--f7-theme-color);
  12923. color: var(--f7-stepper-button-text-color, var(--f7-theme-color));
  12924. line-height: calc(var(--f7-stepper-height) - var(--f7-stepper-border-width, 0px));
  12925. text-align: center;
  12926. display: flex;
  12927. justify-content: center;
  12928. align-content: center;
  12929. align-items: center;
  12930. flex-shrink: 0;
  12931. box-sizing: border-box;
  12932. position: relative;
  12933. cursor: pointer;
  12934. }
  12935. .stepper-button.active-state,
  12936. .stepper-button-minus.active-state,
  12937. .stepper-button-plus.active-state {
  12938. background-color: var(--f7-stepper-button-pressed-bg-color, rgba(var(--f7-theme-color-rgb), 0.15));
  12939. color: var(--f7-stepper-button-pressed-text-color, var(--f7-stepper-button-text-color, var(--f7-theme-color)));
  12940. }
  12941. .stepper-button:first-child,
  12942. .stepper-button-minus:first-child,
  12943. .stepper-button-plus:first-child {
  12944. border-radius: var(--f7-stepper-border-radius) 0 0 var(--f7-stepper-border-radius);
  12945. }
  12946. .stepper-button:last-child,
  12947. .stepper-button-minus:last-child,
  12948. .stepper-button-plus:last-child {
  12949. border-radius: 0 var(--f7-stepper-border-radius) var(--f7-stepper-border-radius) 0;
  12950. }
  12951. .stepper-button .icon,
  12952. .stepper-button-minus .icon,
  12953. .stepper-button-plus .icon {
  12954. pointer-events: none;
  12955. }
  12956. .stepper-button + .stepper-button,
  12957. .stepper-button-minus + .stepper-button,
  12958. .stepper-button-plus + .stepper-button,
  12959. .stepper-button + .stepper-button-minus,
  12960. .stepper-button-minus + .stepper-button-minus,
  12961. .stepper-button-plus + .stepper-button-minus,
  12962. .stepper-button + .stepper-button-plus,
  12963. .stepper-button-minus + .stepper-button-plus,
  12964. .stepper-button-plus + .stepper-button-plus {
  12965. border-left: none;
  12966. }
  12967. .stepper-button-plus,
  12968. .stepper-button-minus {
  12969. -webkit-user-select: none;
  12970. -moz-user-select: none;
  12971. user-select: none;
  12972. }
  12973. .stepper-button-plus:after,
  12974. .stepper-button-minus:after,
  12975. .stepper-button-plus:before,
  12976. .stepper-button-minus:before {
  12977. content: '';
  12978. position: absolute;
  12979. left: 50%;
  12980. top: 50%;
  12981. transform: translate(-50%, -50%);
  12982. background-color: var(--f7-stepper-button-text-color, var(--f7-theme-color));
  12983. border-radius: 2px;
  12984. }
  12985. .stepper-button-plus:after,
  12986. .stepper-button-minus:after {
  12987. width: 15px;
  12988. height: 2px;
  12989. }
  12990. .stepper-button-plus:before {
  12991. height: 15px;
  12992. width: 2px;
  12993. }
  12994. .stepper-value {
  12995. display: flex;
  12996. align-content: center;
  12997. align-items: center;
  12998. justify-content: center;
  12999. }
  13000. .stepper-input-wrap,
  13001. .stepper-value {
  13002. flex-shrink: 1;
  13003. text-align: center;
  13004. border-top: var(--f7-stepper-border-width) solid var(--f7-theme-color);
  13005. border-bottom: var(--f7-stepper-border-width) solid var(--f7-theme-color);
  13006. }
  13007. .stepper .stepper-input-wrap input,
  13008. .stepper-value {
  13009. width: 45px;
  13010. color: var(--f7-stepper-value-text-color, var(--f7-theme-color));
  13011. font-size: var(--f7-stepper-value-font-size);
  13012. font-weight: var(--f7-stepper-value-font-weight);
  13013. text-align: center;
  13014. }
  13015. .stepper .stepper-input-wrap input {
  13016. height: 100%;
  13017. }
  13018. .stepper-round,
  13019. .ios .stepper-round-ios,
  13020. .md .stepper-round-md,
  13021. .aurora .stepper-round-aurora {
  13022. --f7-stepper-border-radius: var(--f7-stepper-height);
  13023. }
  13024. .stepper-fill,
  13025. .ios .stepper-fill-ios,
  13026. .md .stepper-fill-md,
  13027. .aurora .stepper-fill-aurora {
  13028. --f7-stepper-button-bg-color: var(--f7-stepper-fill-button-bg-color, var(--f7-theme-color));
  13029. --f7-stepper-button-text-color: var(--f7-stepper-fill-button-text-color);
  13030. --f7-touch-ripple-color: var(--f7-touch-ripple-white);
  13031. }
  13032. .stepper-fill .stepper-button + .stepper-button,
  13033. .ios .stepper-fill-ios .stepper-button + .stepper-button,
  13034. .md .stepper-fill-md .stepper-button + .stepper-button,
  13035. .aurora .stepper-fill-aurora .stepper-button + .stepper-button,
  13036. .stepper-raised .stepper-button + .stepper-button,
  13037. .ios .stepper-raised-ios .stepper-button + .stepper-button,
  13038. .md .stepper-raised-md .stepper-button + .stepper-button,
  13039. .aurora .stepper-raised-aurora .stepper-button + .stepper-button,
  13040. .stepper-fill .stepper-button-minus + .stepper-button-plus,
  13041. .ios .stepper-fill-ios .stepper-button-minus + .stepper-button-plus,
  13042. .md .stepper-fill-md .stepper-button-minus + .stepper-button-plus,
  13043. .aurora .stepper-fill-aurora .stepper-button-minus + .stepper-button-plus,
  13044. .stepper-raised .stepper-button-minus + .stepper-button-plus,
  13045. .ios .stepper-raised-ios .stepper-button-minus + .stepper-button-plus,
  13046. .md .stepper-raised-md .stepper-button-minus + .stepper-button-plus,
  13047. .aurora .stepper-raised-aurora .stepper-button-minus + .stepper-button-plus {
  13048. border-left: 1px solid rgba(0, 0, 0, 0.1);
  13049. }
  13050. .stepper-fill .stepper-button + .stepper-button.active-state,
  13051. .ios .stepper-fill-ios .stepper-button + .stepper-button.active-state,
  13052. .md .stepper-fill-md .stepper-button + .stepper-button.active-state,
  13053. .aurora .stepper-fill-aurora .stepper-button + .stepper-button.active-state,
  13054. .stepper-fill .stepper-button-minus + .stepper-button-plus.active-state,
  13055. .ios .stepper-fill-ios .stepper-button-minus + .stepper-button-plus.active-state,
  13056. .md .stepper-fill-md .stepper-button-minus + .stepper-button-plus.active-state,
  13057. .aurora .stepper-fill-aurora .stepper-button-minus + .stepper-button-plus.active-state {
  13058. border-left-color: var(--f7-stepper-button-pressed-bg-color);
  13059. }
  13060. .stepper-raised:not(.stepper-fill) .stepper-input-wrap,
  13061. .ios .stepper-raised-ios:not(.stepper-fill-ios):not(.stepper-fill) .stepper-input-wrap,
  13062. .md .stepper-raised-md:not(.stepper-fill-md):not(.stepper-fill) .stepper-input-wrap,
  13063. .aurora .stepper-raised-aurora:not(.stepper-fill-aurora):not(.stepper-fill) .stepper-input-wrap,
  13064. .stepper-raised:not(.stepper-fill) .stepper-value,
  13065. .ios .stepper-raised-ios:not(.stepper-fill-ios):not(.stepper-fill) .stepper-value,
  13066. .md .stepper-raised-md:not(.stepper-fill-md):not(.stepper-fill) .stepper-value,
  13067. .aurora .stepper-raised-aurora:not(.stepper-fill-aurora):not(.stepper-fill) .stepper-value {
  13068. border-left: 1px solid rgba(0, 0, 0, 0.1);
  13069. border-right: 1px solid rgba(0, 0, 0, 0.1);
  13070. }
  13071. .stepper-large,
  13072. .ios .stepper-large-ios,
  13073. .md .stepper-large-md,
  13074. .aurora .stepper-large-aurora {
  13075. --f7-stepper-height: var(--f7-stepper-large-height);
  13076. }
  13077. .stepper-small,
  13078. .ios .stepper-small-ios,
  13079. .md .stepper-small-md,
  13080. .aurora .stepper-small-aurora {
  13081. --f7-stepper-border-width: var(--f7-stepper-small-border-width);
  13082. --f7-stepper-height: var(--f7-stepper-small-height);
  13083. }
  13084. .ios .stepper-fill.stepper-small-ios,
  13085. .ios .stepper-fill.stepper-small {
  13086. --f7-stepper-button-pressed-bg-color: transparent;
  13087. --f7-stepper-button-pressed-text-color: var(--f7-theme-color);
  13088. }
  13089. .stepper-raised,
  13090. .ios .stepper-raised-ios,
  13091. .md .stepper-raised-md,
  13092. .aurora .stepper-raised-aurora {
  13093. --f7-stepper-border-width: 0;
  13094. box-shadow: var(--f7-stepper-raised-box-shadow);
  13095. }
  13096. .ios .stepper-button .f7-icons,
  13097. .ios .stepper-button-minus .f7-icons,
  13098. .ios .stepper-button-plus .f7-icons {
  13099. font-size: 22px;
  13100. }
  13101. .ios .stepper-fill,
  13102. .ios .stepper-fill-ios {
  13103. --f7-stepper-button-pressed-bg-color: var(--f7-stepper-fill-button-pressed-bg-color, var(--f7-theme-color-tint));
  13104. }
  13105. .ios .stepper-small.stepper-raised,
  13106. .ios .stepper-small-ios.stepper-raised,
  13107. .ios .stepper-small.stepper-raised-ios,
  13108. .ios .stepper-small-ios.stepper-raised-ios {
  13109. --f7-stepper-border-width: 0px;
  13110. }
  13111. .ios .stepper-small .stepper-button,
  13112. .ios .stepper-small-ios .stepper-button,
  13113. .ios .stepper-small .stepper-button-minus,
  13114. .ios .stepper-small-ios .stepper-button-minus,
  13115. .ios .stepper-small .stepper-button-plus,
  13116. .ios .stepper-small-ios .stepper-button-plus {
  13117. transition-duration: 200ms;
  13118. }
  13119. .ios .stepper-small .stepper-button.active-state:after,
  13120. .ios .stepper-small-ios .stepper-button.active-state:after,
  13121. .ios .stepper-small .stepper-button-minus.active-state:after,
  13122. .ios .stepper-small-ios .stepper-button-minus.active-state:after,
  13123. .ios .stepper-small .stepper-button-plus.active-state:after,
  13124. .ios .stepper-small-ios .stepper-button-plus.active-state:after,
  13125. .ios .stepper-small .stepper-button.active-state:before,
  13126. .ios .stepper-small-ios .stepper-button.active-state:before,
  13127. .ios .stepper-small .stepper-button-minus.active-state:before,
  13128. .ios .stepper-small-ios .stepper-button-minus.active-state:before,
  13129. .ios .stepper-small .stepper-button-plus.active-state:before,
  13130. .ios .stepper-small-ios .stepper-button-plus.active-state:before {
  13131. transition-duration: 200ms;
  13132. background-color: var(--f7-theme-color);
  13133. }
  13134. .md .stepper-button,
  13135. .md .stepper-button-minus,
  13136. .md .stepper-button-plus {
  13137. transition-duration: 300ms;
  13138. transform: translate3d(0, 0, 0);
  13139. overflow: hidden;
  13140. }
  13141. .md .stepper-fill,
  13142. .md .stepper-fill-md {
  13143. --f7-stepper-button-pressed-bg-color: var(--f7-stepper-fill-button-pressed-bg-color, var(--f7-theme-color-shade));
  13144. }
  13145. .aurora .stepper-button,
  13146. .aurora .stepper-button-minus,
  13147. .aurora .stepper-button-plus {
  13148. transition-duration: 100ms;
  13149. transform: translate3d(0, 0, 0);
  13150. overflow: hidden;
  13151. }
  13152. .aurora.device-desktop .stepper-button:not(.active-state):not(.no-hover):hover,
  13153. .aurora.device-desktop .stepper-button-minus:not(.active-state):not(.no-hover):hover,
  13154. .aurora.device-desktop .stepper-button-plus:not(.active-state):not(.no-hover):hover {
  13155. background-color: var(--f7-stepper-button-hover-bg-color, rgba(var(--f7-theme-color-rgb), 0.07));
  13156. }
  13157. .aurora .stepper-fill,
  13158. .aurora .stepper-fill-aurora {
  13159. --f7-stepper-button-hover-bg-color: var(--f7-stepper-button-fill-hover-bg-color, var(--f7-theme-color-tint));
  13160. --f7-stepper-button-pressed-bg-color: var(--f7-stepper-fill-button-pressed-bg-color, var(--f7-theme-color-shade));
  13161. }
  13162. /* === Smart Select === */
  13163. .smart-select :root {
  13164. /*
  13165. --f7-smart-select-sheet-bg: var(--f7-list-bg-color);
  13166. --f7-smart-select-sheet-toolbar-border-color: var(--f7-bars-border-color);
  13167. */
  13168. }
  13169. .smart-select select {
  13170. display: none;
  13171. }
  13172. .smart-select .item-after {
  13173. max-width: 70%;
  13174. overflow: hidden;
  13175. text-overflow: ellipsis;
  13176. position: relative;
  13177. display: block;
  13178. }
  13179. .smart-select-sheet .page,
  13180. .smart-select-sheet .sheet-modal-inner,
  13181. .smart-select-sheet .list ul {
  13182. background: var(--f7-smart-select-sheet-bg, var(--f7-list-bg-color));
  13183. }
  13184. .smart-select-sheet .toolbar:after {
  13185. content: '';
  13186. position: absolute;
  13187. background-color: var(--f7-smart-select-sheet-toolbar-border-color, var(--f7-bars-border-color));
  13188. display: block;
  13189. z-index: 15;
  13190. top: auto;
  13191. right: auto;
  13192. bottom: 0;
  13193. left: 0;
  13194. height: 1px;
  13195. width: 100%;
  13196. transform-origin: 50% 100%;
  13197. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  13198. }
  13199. .smart-select-sheet .toolbar:after {
  13200. display: block;
  13201. }
  13202. .smart-select-sheet .list {
  13203. margin: 0;
  13204. }
  13205. .smart-select-sheet .list ul:before,
  13206. .smart-select-sheet .list ul:after {
  13207. display: none !important;
  13208. }
  13209. .smart-select-popover .popover-inner {
  13210. max-height: 40vh;
  13211. }
  13212. /* === Grid === */
  13213. :root {
  13214. --f7-grid-gap: 16px;
  13215. --f7-grid-row-gap: 0px;
  13216. --f7-grid-resize-handler-bg-color: rgba(0, 0, 0, 0.35);
  13217. }
  13218. :root .theme-dark,
  13219. :root.theme-dark {
  13220. --f7-grid-resize-handler-bg-color: rgba(255, 255, 255, 0.35);
  13221. }
  13222. .row {
  13223. display: flex;
  13224. justify-content: space-between;
  13225. flex-wrap: wrap;
  13226. align-items: flex-start;
  13227. --f7-cols-per-row: 1;
  13228. }
  13229. .row + .row {
  13230. margin-top: var(--f7-grid-row-gap);
  13231. }
  13232. .row > [class*="col-"],
  13233. .row > .col {
  13234. box-sizing: border-box;
  13235. width: calc((100% - var(--f7-grid-gap) * (var(--f7-cols-per-row) - 1)) / var(--f7-cols-per-row));
  13236. }
  13237. .row > [class*="col-"].resizable,
  13238. .row > .col.resizable {
  13239. position: relative;
  13240. }
  13241. .row.resizable {
  13242. position: relative;
  13243. }
  13244. .row.no-gap {
  13245. --f7-grid-gap: 0px;
  13246. --f7-grid-row-gap: 0px;
  13247. }
  13248. .row .col-5 {
  13249. --f7-cols-per-row: 20;
  13250. }
  13251. .row .col-10 {
  13252. --f7-cols-per-row: 10;
  13253. }
  13254. .row .col-15 {
  13255. --f7-cols-per-row: 6.66666667;
  13256. }
  13257. .row .col-20 {
  13258. --f7-cols-per-row: 5;
  13259. }
  13260. .row .col-25 {
  13261. --f7-cols-per-row: 4;
  13262. }
  13263. .row .col-30 {
  13264. --f7-cols-per-row: 3.33333333;
  13265. }
  13266. .row .col-33 {
  13267. --f7-cols-per-row: 3;
  13268. }
  13269. .row .col-35 {
  13270. --f7-cols-per-row: 2.85714286;
  13271. }
  13272. .row .col-40 {
  13273. --f7-cols-per-row: 2.5;
  13274. }
  13275. .row .col-45 {
  13276. --f7-cols-per-row: 2.22222222;
  13277. }
  13278. .row .col-50 {
  13279. --f7-cols-per-row: 2;
  13280. }
  13281. .row .col-55 {
  13282. --f7-cols-per-row: 1.81818182;
  13283. }
  13284. .row .col-60 {
  13285. --f7-cols-per-row: 1.66666667;
  13286. }
  13287. .row .col-65 {
  13288. --f7-cols-per-row: 1.53846154;
  13289. }
  13290. .row .col-66 {
  13291. --f7-cols-per-row: 1.5;
  13292. }
  13293. .row .col-70 {
  13294. --f7-cols-per-row: 1.42857143;
  13295. }
  13296. .row .col-75 {
  13297. --f7-cols-per-row: 1.33333333;
  13298. }
  13299. .row .col-80 {
  13300. --f7-cols-per-row: 1.25;
  13301. }
  13302. .row .col-85 {
  13303. --f7-cols-per-row: 1.17647059;
  13304. }
  13305. .row .col-90 {
  13306. --f7-cols-per-row: 1.11111111;
  13307. }
  13308. .row .col-95 {
  13309. --f7-cols-per-row: 1.05263158;
  13310. }
  13311. .row .col-100 {
  13312. --f7-cols-per-row: 1;
  13313. }
  13314. .row .col:nth-last-of-type(1),
  13315. .row .col:nth-last-of-type(1) ~ .col {
  13316. --f7-cols-per-row: 1;
  13317. }
  13318. .row .col:nth-last-of-type(2),
  13319. .row .col:nth-last-of-type(2) ~ .col {
  13320. --f7-cols-per-row: 2;
  13321. }
  13322. .row .col:nth-last-of-type(3),
  13323. .row .col:nth-last-of-type(3) ~ .col {
  13324. --f7-cols-per-row: 3;
  13325. }
  13326. .row .col:nth-last-of-type(4),
  13327. .row .col:nth-last-of-type(4) ~ .col {
  13328. --f7-cols-per-row: 4;
  13329. }
  13330. .row .col:nth-last-of-type(5),
  13331. .row .col:nth-last-of-type(5) ~ .col {
  13332. --f7-cols-per-row: 5;
  13333. }
  13334. .row .col:nth-last-of-type(6),
  13335. .row .col:nth-last-of-type(6) ~ .col {
  13336. --f7-cols-per-row: 6;
  13337. }
  13338. .row .col:nth-last-of-type(7),
  13339. .row .col:nth-last-of-type(7) ~ .col {
  13340. --f7-cols-per-row: 7;
  13341. }
  13342. .row .col:nth-last-of-type(8),
  13343. .row .col:nth-last-of-type(8) ~ .col {
  13344. --f7-cols-per-row: 8;
  13345. }
  13346. .row .col:nth-last-of-type(9),
  13347. .row .col:nth-last-of-type(9) ~ .col {
  13348. --f7-cols-per-row: 9;
  13349. }
  13350. .row .col:nth-last-of-type(10),
  13351. .row .col:nth-last-of-type(10) ~ .col {
  13352. --f7-cols-per-row: 10;
  13353. }
  13354. .row .col:nth-last-of-type(11),
  13355. .row .col:nth-last-of-type(11) ~ .col {
  13356. --f7-cols-per-row: 11;
  13357. }
  13358. .row .col:nth-last-of-type(12),
  13359. .row .col:nth-last-of-type(12) ~ .col {
  13360. --f7-cols-per-row: 12;
  13361. }
  13362. .row .col:nth-last-of-type(13),
  13363. .row .col:nth-last-of-type(13) ~ .col {
  13364. --f7-cols-per-row: 13;
  13365. }
  13366. .row .col:nth-last-of-type(14),
  13367. .row .col:nth-last-of-type(14) ~ .col {
  13368. --f7-cols-per-row: 14;
  13369. }
  13370. .row .col:nth-last-of-type(15),
  13371. .row .col:nth-last-of-type(15) ~ .col {
  13372. --f7-cols-per-row: 15;
  13373. }
  13374. .row .col:nth-last-of-type(16),
  13375. .row .col:nth-last-of-type(16) ~ .col {
  13376. --f7-cols-per-row: 16;
  13377. }
  13378. .row .col:nth-last-of-type(17),
  13379. .row .col:nth-last-of-type(17) ~ .col {
  13380. --f7-cols-per-row: 17;
  13381. }
  13382. .row .col:nth-last-of-type(18),
  13383. .row .col:nth-last-of-type(18) ~ .col {
  13384. --f7-cols-per-row: 18;
  13385. }
  13386. .row .col:nth-last-of-type(19),
  13387. .row .col:nth-last-of-type(19) ~ .col {
  13388. --f7-cols-per-row: 19;
  13389. }
  13390. .row .col:nth-last-of-type(20),
  13391. .row .col:nth-last-of-type(20) ~ .col {
  13392. --f7-cols-per-row: 20;
  13393. }
  13394. .row .col:nth-last-of-type(21),
  13395. .row .col:nth-last-of-type(21) ~ .col {
  13396. --f7-cols-per-row: 21;
  13397. }
  13398. .row .col:nth-last-of-type(22),
  13399. .row .col:nth-last-of-type(22) ~ .col {
  13400. --f7-cols-per-row: 22;
  13401. }
  13402. @media (min-width: 480px) {
  13403. .row .xsmall-5 {
  13404. --f7-cols-per-row: 20;
  13405. }
  13406. .row .xsmall-10 {
  13407. --f7-cols-per-row: 10;
  13408. }
  13409. .row .xsmall-15 {
  13410. --f7-cols-per-row: 6.66666667;
  13411. }
  13412. .row .xsmall-20 {
  13413. --f7-cols-per-row: 5;
  13414. }
  13415. .row .xsmall-25 {
  13416. --f7-cols-per-row: 4;
  13417. }
  13418. .row .xsmall-30 {
  13419. --f7-cols-per-row: 3.33333333;
  13420. }
  13421. .row .xsmall-33 {
  13422. --f7-cols-per-row: 3;
  13423. }
  13424. .row .xsmall-35 {
  13425. --f7-cols-per-row: 2.85714286;
  13426. }
  13427. .row .xsmall-40 {
  13428. --f7-cols-per-row: 2.5;
  13429. }
  13430. .row .xsmall-45 {
  13431. --f7-cols-per-row: 2.22222222;
  13432. }
  13433. .row .xsmall-50 {
  13434. --f7-cols-per-row: 2;
  13435. }
  13436. .row .xsmall-55 {
  13437. --f7-cols-per-row: 1.81818182;
  13438. }
  13439. .row .xsmall-60 {
  13440. --f7-cols-per-row: 1.66666667;
  13441. }
  13442. .row .xsmall-65 {
  13443. --f7-cols-per-row: 1.53846154;
  13444. }
  13445. .row .xsmall-66 {
  13446. --f7-cols-per-row: 1.5;
  13447. }
  13448. .row .xsmall-70 {
  13449. --f7-cols-per-row: 1.42857143;
  13450. }
  13451. .row .xsmall-75 {
  13452. --f7-cols-per-row: 1.33333333;
  13453. }
  13454. .row .xsmall-80 {
  13455. --f7-cols-per-row: 1.25;
  13456. }
  13457. .row .xsmall-85 {
  13458. --f7-cols-per-row: 1.17647059;
  13459. }
  13460. .row .xsmall-90 {
  13461. --f7-cols-per-row: 1.11111111;
  13462. }
  13463. .row .xsmall-95 {
  13464. --f7-cols-per-row: 1.05263158;
  13465. }
  13466. .row .xsmall-100 {
  13467. --f7-cols-per-row: 1;
  13468. }
  13469. .row .xsmall-auto:nth-last-of-type(1),
  13470. .row .xsmall-auto:nth-last-of-type(1) ~ .xsmall-auto {
  13471. --f7-cols-per-row: 1;
  13472. }
  13473. .row .xsmall-auto:nth-last-of-type(2),
  13474. .row .xsmall-auto:nth-last-of-type(2) ~ .xsmall-auto {
  13475. --f7-cols-per-row: 2;
  13476. }
  13477. .row .xsmall-auto:nth-last-of-type(3),
  13478. .row .xsmall-auto:nth-last-of-type(3) ~ .xsmall-auto {
  13479. --f7-cols-per-row: 3;
  13480. }
  13481. .row .xsmall-auto:nth-last-of-type(4),
  13482. .row .xsmall-auto:nth-last-of-type(4) ~ .xsmall-auto {
  13483. --f7-cols-per-row: 4;
  13484. }
  13485. .row .xsmall-auto:nth-last-of-type(5),
  13486. .row .xsmall-auto:nth-last-of-type(5) ~ .xsmall-auto {
  13487. --f7-cols-per-row: 5;
  13488. }
  13489. .row .xsmall-auto:nth-last-of-type(6),
  13490. .row .xsmall-auto:nth-last-of-type(6) ~ .xsmall-auto {
  13491. --f7-cols-per-row: 6;
  13492. }
  13493. .row .xsmall-auto:nth-last-of-type(7),
  13494. .row .xsmall-auto:nth-last-of-type(7) ~ .xsmall-auto {
  13495. --f7-cols-per-row: 7;
  13496. }
  13497. .row .xsmall-auto:nth-last-of-type(8),
  13498. .row .xsmall-auto:nth-last-of-type(8) ~ .xsmall-auto {
  13499. --f7-cols-per-row: 8;
  13500. }
  13501. .row .xsmall-auto:nth-last-of-type(9),
  13502. .row .xsmall-auto:nth-last-of-type(9) ~ .xsmall-auto {
  13503. --f7-cols-per-row: 9;
  13504. }
  13505. .row .xsmall-auto:nth-last-of-type(10),
  13506. .row .xsmall-auto:nth-last-of-type(10) ~ .xsmall-auto {
  13507. --f7-cols-per-row: 10;
  13508. }
  13509. .row .xsmall-auto:nth-last-of-type(11),
  13510. .row .xsmall-auto:nth-last-of-type(11) ~ .xsmall-auto {
  13511. --f7-cols-per-row: 11;
  13512. }
  13513. .row .xsmall-auto:nth-last-of-type(12),
  13514. .row .xsmall-auto:nth-last-of-type(12) ~ .xsmall-auto {
  13515. --f7-cols-per-row: 12;
  13516. }
  13517. .row .xsmall-auto:nth-last-of-type(13),
  13518. .row .xsmall-auto:nth-last-of-type(13) ~ .xsmall-auto {
  13519. --f7-cols-per-row: 13;
  13520. }
  13521. .row .xsmall-auto:nth-last-of-type(14),
  13522. .row .xsmall-auto:nth-last-of-type(14) ~ .xsmall-auto {
  13523. --f7-cols-per-row: 14;
  13524. }
  13525. .row .xsmall-auto:nth-last-of-type(15),
  13526. .row .xsmall-auto:nth-last-of-type(15) ~ .xsmall-auto {
  13527. --f7-cols-per-row: 15;
  13528. }
  13529. .row .xsmall-auto:nth-last-of-type(16),
  13530. .row .xsmall-auto:nth-last-of-type(16) ~ .xsmall-auto {
  13531. --f7-cols-per-row: 16;
  13532. }
  13533. .row .xsmall-auto:nth-last-of-type(17),
  13534. .row .xsmall-auto:nth-last-of-type(17) ~ .xsmall-auto {
  13535. --f7-cols-per-row: 17;
  13536. }
  13537. .row .xsmall-auto:nth-last-of-type(18),
  13538. .row .xsmall-auto:nth-last-of-type(18) ~ .xsmall-auto {
  13539. --f7-cols-per-row: 18;
  13540. }
  13541. .row .xsmall-auto:nth-last-of-type(19),
  13542. .row .xsmall-auto:nth-last-of-type(19) ~ .xsmall-auto {
  13543. --f7-cols-per-row: 19;
  13544. }
  13545. .row .xsmall-auto:nth-last-of-type(20),
  13546. .row .xsmall-auto:nth-last-of-type(20) ~ .xsmall-auto {
  13547. --f7-cols-per-row: 20;
  13548. }
  13549. .row .xsmall-auto:nth-last-of-type(21),
  13550. .row .xsmall-auto:nth-last-of-type(21) ~ .xsmall-auto {
  13551. --f7-cols-per-row: 21;
  13552. }
  13553. .row .xsmall-auto:nth-last-of-type(22),
  13554. .row .xsmall-auto:nth-last-of-type(22) ~ .xsmall-auto {
  13555. --f7-cols-per-row: 22;
  13556. }
  13557. }
  13558. @media (min-width: 568px) {
  13559. .row .small-5 {
  13560. --f7-cols-per-row: 20;
  13561. }
  13562. .row .small-10 {
  13563. --f7-cols-per-row: 10;
  13564. }
  13565. .row .small-15 {
  13566. --f7-cols-per-row: 6.66666667;
  13567. }
  13568. .row .small-20 {
  13569. --f7-cols-per-row: 5;
  13570. }
  13571. .row .small-25 {
  13572. --f7-cols-per-row: 4;
  13573. }
  13574. .row .small-30 {
  13575. --f7-cols-per-row: 3.33333333;
  13576. }
  13577. .row .small-33 {
  13578. --f7-cols-per-row: 3;
  13579. }
  13580. .row .small-35 {
  13581. --f7-cols-per-row: 2.85714286;
  13582. }
  13583. .row .small-40 {
  13584. --f7-cols-per-row: 2.5;
  13585. }
  13586. .row .small-45 {
  13587. --f7-cols-per-row: 2.22222222;
  13588. }
  13589. .row .small-50 {
  13590. --f7-cols-per-row: 2;
  13591. }
  13592. .row .small-55 {
  13593. --f7-cols-per-row: 1.81818182;
  13594. }
  13595. .row .small-60 {
  13596. --f7-cols-per-row: 1.66666667;
  13597. }
  13598. .row .small-65 {
  13599. --f7-cols-per-row: 1.53846154;
  13600. }
  13601. .row .small-66 {
  13602. --f7-cols-per-row: 1.5;
  13603. }
  13604. .row .small-70 {
  13605. --f7-cols-per-row: 1.42857143;
  13606. }
  13607. .row .small-75 {
  13608. --f7-cols-per-row: 1.33333333;
  13609. }
  13610. .row .small-80 {
  13611. --f7-cols-per-row: 1.25;
  13612. }
  13613. .row .small-85 {
  13614. --f7-cols-per-row: 1.17647059;
  13615. }
  13616. .row .small-90 {
  13617. --f7-cols-per-row: 1.11111111;
  13618. }
  13619. .row .small-95 {
  13620. --f7-cols-per-row: 1.05263158;
  13621. }
  13622. .row .small-100 {
  13623. --f7-cols-per-row: 1;
  13624. }
  13625. .row .small-auto:nth-last-of-type(1),
  13626. .row .small-auto:nth-last-of-type(1) ~ .small-auto {
  13627. --f7-cols-per-row: 1;
  13628. }
  13629. .row .small-auto:nth-last-of-type(2),
  13630. .row .small-auto:nth-last-of-type(2) ~ .small-auto {
  13631. --f7-cols-per-row: 2;
  13632. }
  13633. .row .small-auto:nth-last-of-type(3),
  13634. .row .small-auto:nth-last-of-type(3) ~ .small-auto {
  13635. --f7-cols-per-row: 3;
  13636. }
  13637. .row .small-auto:nth-last-of-type(4),
  13638. .row .small-auto:nth-last-of-type(4) ~ .small-auto {
  13639. --f7-cols-per-row: 4;
  13640. }
  13641. .row .small-auto:nth-last-of-type(5),
  13642. .row .small-auto:nth-last-of-type(5) ~ .small-auto {
  13643. --f7-cols-per-row: 5;
  13644. }
  13645. .row .small-auto:nth-last-of-type(6),
  13646. .row .small-auto:nth-last-of-type(6) ~ .small-auto {
  13647. --f7-cols-per-row: 6;
  13648. }
  13649. .row .small-auto:nth-last-of-type(7),
  13650. .row .small-auto:nth-last-of-type(7) ~ .small-auto {
  13651. --f7-cols-per-row: 7;
  13652. }
  13653. .row .small-auto:nth-last-of-type(8),
  13654. .row .small-auto:nth-last-of-type(8) ~ .small-auto {
  13655. --f7-cols-per-row: 8;
  13656. }
  13657. .row .small-auto:nth-last-of-type(9),
  13658. .row .small-auto:nth-last-of-type(9) ~ .small-auto {
  13659. --f7-cols-per-row: 9;
  13660. }
  13661. .row .small-auto:nth-last-of-type(10),
  13662. .row .small-auto:nth-last-of-type(10) ~ .small-auto {
  13663. --f7-cols-per-row: 10;
  13664. }
  13665. .row .small-auto:nth-last-of-type(11),
  13666. .row .small-auto:nth-last-of-type(11) ~ .small-auto {
  13667. --f7-cols-per-row: 11;
  13668. }
  13669. .row .small-auto:nth-last-of-type(12),
  13670. .row .small-auto:nth-last-of-type(12) ~ .small-auto {
  13671. --f7-cols-per-row: 12;
  13672. }
  13673. .row .small-auto:nth-last-of-type(13),
  13674. .row .small-auto:nth-last-of-type(13) ~ .small-auto {
  13675. --f7-cols-per-row: 13;
  13676. }
  13677. .row .small-auto:nth-last-of-type(14),
  13678. .row .small-auto:nth-last-of-type(14) ~ .small-auto {
  13679. --f7-cols-per-row: 14;
  13680. }
  13681. .row .small-auto:nth-last-of-type(15),
  13682. .row .small-auto:nth-last-of-type(15) ~ .small-auto {
  13683. --f7-cols-per-row: 15;
  13684. }
  13685. .row .small-auto:nth-last-of-type(16),
  13686. .row .small-auto:nth-last-of-type(16) ~ .small-auto {
  13687. --f7-cols-per-row: 16;
  13688. }
  13689. .row .small-auto:nth-last-of-type(17),
  13690. .row .small-auto:nth-last-of-type(17) ~ .small-auto {
  13691. --f7-cols-per-row: 17;
  13692. }
  13693. .row .small-auto:nth-last-of-type(18),
  13694. .row .small-auto:nth-last-of-type(18) ~ .small-auto {
  13695. --f7-cols-per-row: 18;
  13696. }
  13697. .row .small-auto:nth-last-of-type(19),
  13698. .row .small-auto:nth-last-of-type(19) ~ .small-auto {
  13699. --f7-cols-per-row: 19;
  13700. }
  13701. .row .small-auto:nth-last-of-type(20),
  13702. .row .small-auto:nth-last-of-type(20) ~ .small-auto {
  13703. --f7-cols-per-row: 20;
  13704. }
  13705. .row .small-auto:nth-last-of-type(21),
  13706. .row .small-auto:nth-last-of-type(21) ~ .small-auto {
  13707. --f7-cols-per-row: 21;
  13708. }
  13709. .row .small-auto:nth-last-of-type(22),
  13710. .row .small-auto:nth-last-of-type(22) ~ .small-auto {
  13711. --f7-cols-per-row: 22;
  13712. }
  13713. }
  13714. @media (min-width: 768px) {
  13715. .row .medium-5 {
  13716. --f7-cols-per-row: 20;
  13717. }
  13718. .row .medium-10 {
  13719. --f7-cols-per-row: 10;
  13720. }
  13721. .row .medium-15 {
  13722. --f7-cols-per-row: 6.66666667;
  13723. }
  13724. .row .medium-20 {
  13725. --f7-cols-per-row: 5;
  13726. }
  13727. .row .medium-25 {
  13728. --f7-cols-per-row: 4;
  13729. }
  13730. .row .medium-30 {
  13731. --f7-cols-per-row: 3.33333333;
  13732. }
  13733. .row .medium-33 {
  13734. --f7-cols-per-row: 3;
  13735. }
  13736. .row .medium-35 {
  13737. --f7-cols-per-row: 2.85714286;
  13738. }
  13739. .row .medium-40 {
  13740. --f7-cols-per-row: 2.5;
  13741. }
  13742. .row .medium-45 {
  13743. --f7-cols-per-row: 2.22222222;
  13744. }
  13745. .row .medium-50 {
  13746. --f7-cols-per-row: 2;
  13747. }
  13748. .row .medium-55 {
  13749. --f7-cols-per-row: 1.81818182;
  13750. }
  13751. .row .medium-60 {
  13752. --f7-cols-per-row: 1.66666667;
  13753. }
  13754. .row .medium-65 {
  13755. --f7-cols-per-row: 1.53846154;
  13756. }
  13757. .row .medium-66 {
  13758. --f7-cols-per-row: 1.5;
  13759. }
  13760. .row .medium-70 {
  13761. --f7-cols-per-row: 1.42857143;
  13762. }
  13763. .row .medium-75 {
  13764. --f7-cols-per-row: 1.33333333;
  13765. }
  13766. .row .medium-80 {
  13767. --f7-cols-per-row: 1.25;
  13768. }
  13769. .row .medium-85 {
  13770. --f7-cols-per-row: 1.17647059;
  13771. }
  13772. .row .medium-90 {
  13773. --f7-cols-per-row: 1.11111111;
  13774. }
  13775. .row .medium-95 {
  13776. --f7-cols-per-row: 1.05263158;
  13777. }
  13778. .row .medium-100 {
  13779. --f7-cols-per-row: 1;
  13780. }
  13781. .row .medium-auto:nth-last-of-type(1),
  13782. .row .medium-auto:nth-last-of-type(1) ~ .medium-auto {
  13783. --f7-cols-per-row: 1;
  13784. }
  13785. .row .medium-auto:nth-last-of-type(2),
  13786. .row .medium-auto:nth-last-of-type(2) ~ .medium-auto {
  13787. --f7-cols-per-row: 2;
  13788. }
  13789. .row .medium-auto:nth-last-of-type(3),
  13790. .row .medium-auto:nth-last-of-type(3) ~ .medium-auto {
  13791. --f7-cols-per-row: 3;
  13792. }
  13793. .row .medium-auto:nth-last-of-type(4),
  13794. .row .medium-auto:nth-last-of-type(4) ~ .medium-auto {
  13795. --f7-cols-per-row: 4;
  13796. }
  13797. .row .medium-auto:nth-last-of-type(5),
  13798. .row .medium-auto:nth-last-of-type(5) ~ .medium-auto {
  13799. --f7-cols-per-row: 5;
  13800. }
  13801. .row .medium-auto:nth-last-of-type(6),
  13802. .row .medium-auto:nth-last-of-type(6) ~ .medium-auto {
  13803. --f7-cols-per-row: 6;
  13804. }
  13805. .row .medium-auto:nth-last-of-type(7),
  13806. .row .medium-auto:nth-last-of-type(7) ~ .medium-auto {
  13807. --f7-cols-per-row: 7;
  13808. }
  13809. .row .medium-auto:nth-last-of-type(8),
  13810. .row .medium-auto:nth-last-of-type(8) ~ .medium-auto {
  13811. --f7-cols-per-row: 8;
  13812. }
  13813. .row .medium-auto:nth-last-of-type(9),
  13814. .row .medium-auto:nth-last-of-type(9) ~ .medium-auto {
  13815. --f7-cols-per-row: 9;
  13816. }
  13817. .row .medium-auto:nth-last-of-type(10),
  13818. .row .medium-auto:nth-last-of-type(10) ~ .medium-auto {
  13819. --f7-cols-per-row: 10;
  13820. }
  13821. .row .medium-auto:nth-last-of-type(11),
  13822. .row .medium-auto:nth-last-of-type(11) ~ .medium-auto {
  13823. --f7-cols-per-row: 11;
  13824. }
  13825. .row .medium-auto:nth-last-of-type(12),
  13826. .row .medium-auto:nth-last-of-type(12) ~ .medium-auto {
  13827. --f7-cols-per-row: 12;
  13828. }
  13829. .row .medium-auto:nth-last-of-type(13),
  13830. .row .medium-auto:nth-last-of-type(13) ~ .medium-auto {
  13831. --f7-cols-per-row: 13;
  13832. }
  13833. .row .medium-auto:nth-last-of-type(14),
  13834. .row .medium-auto:nth-last-of-type(14) ~ .medium-auto {
  13835. --f7-cols-per-row: 14;
  13836. }
  13837. .row .medium-auto:nth-last-of-type(15),
  13838. .row .medium-auto:nth-last-of-type(15) ~ .medium-auto {
  13839. --f7-cols-per-row: 15;
  13840. }
  13841. .row .medium-auto:nth-last-of-type(16),
  13842. .row .medium-auto:nth-last-of-type(16) ~ .medium-auto {
  13843. --f7-cols-per-row: 16;
  13844. }
  13845. .row .medium-auto:nth-last-of-type(17),
  13846. .row .medium-auto:nth-last-of-type(17) ~ .medium-auto {
  13847. --f7-cols-per-row: 17;
  13848. }
  13849. .row .medium-auto:nth-last-of-type(18),
  13850. .row .medium-auto:nth-last-of-type(18) ~ .medium-auto {
  13851. --f7-cols-per-row: 18;
  13852. }
  13853. .row .medium-auto:nth-last-of-type(19),
  13854. .row .medium-auto:nth-last-of-type(19) ~ .medium-auto {
  13855. --f7-cols-per-row: 19;
  13856. }
  13857. .row .medium-auto:nth-last-of-type(20),
  13858. .row .medium-auto:nth-last-of-type(20) ~ .medium-auto {
  13859. --f7-cols-per-row: 20;
  13860. }
  13861. .row .medium-auto:nth-last-of-type(21),
  13862. .row .medium-auto:nth-last-of-type(21) ~ .medium-auto {
  13863. --f7-cols-per-row: 21;
  13864. }
  13865. .row .medium-auto:nth-last-of-type(22),
  13866. .row .medium-auto:nth-last-of-type(22) ~ .medium-auto {
  13867. --f7-cols-per-row: 22;
  13868. }
  13869. }
  13870. @media (min-width: 1024px) {
  13871. .row .large-5 {
  13872. --f7-cols-per-row: 20;
  13873. }
  13874. .row .large-10 {
  13875. --f7-cols-per-row: 10;
  13876. }
  13877. .row .large-15 {
  13878. --f7-cols-per-row: 6.66666667;
  13879. }
  13880. .row .large-20 {
  13881. --f7-cols-per-row: 5;
  13882. }
  13883. .row .large-25 {
  13884. --f7-cols-per-row: 4;
  13885. }
  13886. .row .large-30 {
  13887. --f7-cols-per-row: 3.33333333;
  13888. }
  13889. .row .large-33 {
  13890. --f7-cols-per-row: 3;
  13891. }
  13892. .row .large-35 {
  13893. --f7-cols-per-row: 2.85714286;
  13894. }
  13895. .row .large-40 {
  13896. --f7-cols-per-row: 2.5;
  13897. }
  13898. .row .large-45 {
  13899. --f7-cols-per-row: 2.22222222;
  13900. }
  13901. .row .large-50 {
  13902. --f7-cols-per-row: 2;
  13903. }
  13904. .row .large-55 {
  13905. --f7-cols-per-row: 1.81818182;
  13906. }
  13907. .row .large-60 {
  13908. --f7-cols-per-row: 1.66666667;
  13909. }
  13910. .row .large-65 {
  13911. --f7-cols-per-row: 1.53846154;
  13912. }
  13913. .row .large-66 {
  13914. --f7-cols-per-row: 1.5;
  13915. }
  13916. .row .large-70 {
  13917. --f7-cols-per-row: 1.42857143;
  13918. }
  13919. .row .large-75 {
  13920. --f7-cols-per-row: 1.33333333;
  13921. }
  13922. .row .large-80 {
  13923. --f7-cols-per-row: 1.25;
  13924. }
  13925. .row .large-85 {
  13926. --f7-cols-per-row: 1.17647059;
  13927. }
  13928. .row .large-90 {
  13929. --f7-cols-per-row: 1.11111111;
  13930. }
  13931. .row .large-95 {
  13932. --f7-cols-per-row: 1.05263158;
  13933. }
  13934. .row .large-100 {
  13935. --f7-cols-per-row: 1;
  13936. }
  13937. .row .large-auto:nth-last-of-type(1),
  13938. .row .large-auto:nth-last-of-type(1) ~ .large-auto {
  13939. --f7-cols-per-row: 1;
  13940. }
  13941. .row .large-auto:nth-last-of-type(2),
  13942. .row .large-auto:nth-last-of-type(2) ~ .large-auto {
  13943. --f7-cols-per-row: 2;
  13944. }
  13945. .row .large-auto:nth-last-of-type(3),
  13946. .row .large-auto:nth-last-of-type(3) ~ .large-auto {
  13947. --f7-cols-per-row: 3;
  13948. }
  13949. .row .large-auto:nth-last-of-type(4),
  13950. .row .large-auto:nth-last-of-type(4) ~ .large-auto {
  13951. --f7-cols-per-row: 4;
  13952. }
  13953. .row .large-auto:nth-last-of-type(5),
  13954. .row .large-auto:nth-last-of-type(5) ~ .large-auto {
  13955. --f7-cols-per-row: 5;
  13956. }
  13957. .row .large-auto:nth-last-of-type(6),
  13958. .row .large-auto:nth-last-of-type(6) ~ .large-auto {
  13959. --f7-cols-per-row: 6;
  13960. }
  13961. .row .large-auto:nth-last-of-type(7),
  13962. .row .large-auto:nth-last-of-type(7) ~ .large-auto {
  13963. --f7-cols-per-row: 7;
  13964. }
  13965. .row .large-auto:nth-last-of-type(8),
  13966. .row .large-auto:nth-last-of-type(8) ~ .large-auto {
  13967. --f7-cols-per-row: 8;
  13968. }
  13969. .row .large-auto:nth-last-of-type(9),
  13970. .row .large-auto:nth-last-of-type(9) ~ .large-auto {
  13971. --f7-cols-per-row: 9;
  13972. }
  13973. .row .large-auto:nth-last-of-type(10),
  13974. .row .large-auto:nth-last-of-type(10) ~ .large-auto {
  13975. --f7-cols-per-row: 10;
  13976. }
  13977. .row .large-auto:nth-last-of-type(11),
  13978. .row .large-auto:nth-last-of-type(11) ~ .large-auto {
  13979. --f7-cols-per-row: 11;
  13980. }
  13981. .row .large-auto:nth-last-of-type(12),
  13982. .row .large-auto:nth-last-of-type(12) ~ .large-auto {
  13983. --f7-cols-per-row: 12;
  13984. }
  13985. .row .large-auto:nth-last-of-type(13),
  13986. .row .large-auto:nth-last-of-type(13) ~ .large-auto {
  13987. --f7-cols-per-row: 13;
  13988. }
  13989. .row .large-auto:nth-last-of-type(14),
  13990. .row .large-auto:nth-last-of-type(14) ~ .large-auto {
  13991. --f7-cols-per-row: 14;
  13992. }
  13993. .row .large-auto:nth-last-of-type(15),
  13994. .row .large-auto:nth-last-of-type(15) ~ .large-auto {
  13995. --f7-cols-per-row: 15;
  13996. }
  13997. .row .large-auto:nth-last-of-type(16),
  13998. .row .large-auto:nth-last-of-type(16) ~ .large-auto {
  13999. --f7-cols-per-row: 16;
  14000. }
  14001. .row .large-auto:nth-last-of-type(17),
  14002. .row .large-auto:nth-last-of-type(17) ~ .large-auto {
  14003. --f7-cols-per-row: 17;
  14004. }
  14005. .row .large-auto:nth-last-of-type(18),
  14006. .row .large-auto:nth-last-of-type(18) ~ .large-auto {
  14007. --f7-cols-per-row: 18;
  14008. }
  14009. .row .large-auto:nth-last-of-type(19),
  14010. .row .large-auto:nth-last-of-type(19) ~ .large-auto {
  14011. --f7-cols-per-row: 19;
  14012. }
  14013. .row .large-auto:nth-last-of-type(20),
  14014. .row .large-auto:nth-last-of-type(20) ~ .large-auto {
  14015. --f7-cols-per-row: 20;
  14016. }
  14017. .row .large-auto:nth-last-of-type(21),
  14018. .row .large-auto:nth-last-of-type(21) ~ .large-auto {
  14019. --f7-cols-per-row: 21;
  14020. }
  14021. .row .large-auto:nth-last-of-type(22),
  14022. .row .large-auto:nth-last-of-type(22) ~ .large-auto {
  14023. --f7-cols-per-row: 22;
  14024. }
  14025. }
  14026. @media (min-width: 1200px) {
  14027. .row .xlarge-5 {
  14028. --f7-cols-per-row: 20;
  14029. }
  14030. .row .xlarge-10 {
  14031. --f7-cols-per-row: 10;
  14032. }
  14033. .row .xlarge-15 {
  14034. --f7-cols-per-row: 6.66666667;
  14035. }
  14036. .row .xlarge-20 {
  14037. --f7-cols-per-row: 5;
  14038. }
  14039. .row .xlarge-25 {
  14040. --f7-cols-per-row: 4;
  14041. }
  14042. .row .xlarge-30 {
  14043. --f7-cols-per-row: 3.33333333;
  14044. }
  14045. .row .xlarge-33 {
  14046. --f7-cols-per-row: 3;
  14047. }
  14048. .row .xlarge-35 {
  14049. --f7-cols-per-row: 2.85714286;
  14050. }
  14051. .row .xlarge-40 {
  14052. --f7-cols-per-row: 2.5;
  14053. }
  14054. .row .xlarge-45 {
  14055. --f7-cols-per-row: 2.22222222;
  14056. }
  14057. .row .xlarge-50 {
  14058. --f7-cols-per-row: 2;
  14059. }
  14060. .row .xlarge-55 {
  14061. --f7-cols-per-row: 1.81818182;
  14062. }
  14063. .row .xlarge-60 {
  14064. --f7-cols-per-row: 1.66666667;
  14065. }
  14066. .row .xlarge-65 {
  14067. --f7-cols-per-row: 1.53846154;
  14068. }
  14069. .row .xlarge-66 {
  14070. --f7-cols-per-row: 1.5;
  14071. }
  14072. .row .xlarge-70 {
  14073. --f7-cols-per-row: 1.42857143;
  14074. }
  14075. .row .xlarge-75 {
  14076. --f7-cols-per-row: 1.33333333;
  14077. }
  14078. .row .xlarge-80 {
  14079. --f7-cols-per-row: 1.25;
  14080. }
  14081. .row .xlarge-85 {
  14082. --f7-cols-per-row: 1.17647059;
  14083. }
  14084. .row .xlarge-90 {
  14085. --f7-cols-per-row: 1.11111111;
  14086. }
  14087. .row .xlarge-95 {
  14088. --f7-cols-per-row: 1.05263158;
  14089. }
  14090. .row .xlarge-100 {
  14091. --f7-cols-per-row: 1;
  14092. }
  14093. .row .xlarge-auto:nth-last-of-type(1),
  14094. .row .xlarge-auto:nth-last-of-type(1) ~ .xlarge-auto {
  14095. --f7-cols-per-row: 1;
  14096. }
  14097. .row .xlarge-auto:nth-last-of-type(2),
  14098. .row .xlarge-auto:nth-last-of-type(2) ~ .xlarge-auto {
  14099. --f7-cols-per-row: 2;
  14100. }
  14101. .row .xlarge-auto:nth-last-of-type(3),
  14102. .row .xlarge-auto:nth-last-of-type(3) ~ .xlarge-auto {
  14103. --f7-cols-per-row: 3;
  14104. }
  14105. .row .xlarge-auto:nth-last-of-type(4),
  14106. .row .xlarge-auto:nth-last-of-type(4) ~ .xlarge-auto {
  14107. --f7-cols-per-row: 4;
  14108. }
  14109. .row .xlarge-auto:nth-last-of-type(5),
  14110. .row .xlarge-auto:nth-last-of-type(5) ~ .xlarge-auto {
  14111. --f7-cols-per-row: 5;
  14112. }
  14113. .row .xlarge-auto:nth-last-of-type(6),
  14114. .row .xlarge-auto:nth-last-of-type(6) ~ .xlarge-auto {
  14115. --f7-cols-per-row: 6;
  14116. }
  14117. .row .xlarge-auto:nth-last-of-type(7),
  14118. .row .xlarge-auto:nth-last-of-type(7) ~ .xlarge-auto {
  14119. --f7-cols-per-row: 7;
  14120. }
  14121. .row .xlarge-auto:nth-last-of-type(8),
  14122. .row .xlarge-auto:nth-last-of-type(8) ~ .xlarge-auto {
  14123. --f7-cols-per-row: 8;
  14124. }
  14125. .row .xlarge-auto:nth-last-of-type(9),
  14126. .row .xlarge-auto:nth-last-of-type(9) ~ .xlarge-auto {
  14127. --f7-cols-per-row: 9;
  14128. }
  14129. .row .xlarge-auto:nth-last-of-type(10),
  14130. .row .xlarge-auto:nth-last-of-type(10) ~ .xlarge-auto {
  14131. --f7-cols-per-row: 10;
  14132. }
  14133. .row .xlarge-auto:nth-last-of-type(11),
  14134. .row .xlarge-auto:nth-last-of-type(11) ~ .xlarge-auto {
  14135. --f7-cols-per-row: 11;
  14136. }
  14137. .row .xlarge-auto:nth-last-of-type(12),
  14138. .row .xlarge-auto:nth-last-of-type(12) ~ .xlarge-auto {
  14139. --f7-cols-per-row: 12;
  14140. }
  14141. .row .xlarge-auto:nth-last-of-type(13),
  14142. .row .xlarge-auto:nth-last-of-type(13) ~ .xlarge-auto {
  14143. --f7-cols-per-row: 13;
  14144. }
  14145. .row .xlarge-auto:nth-last-of-type(14),
  14146. .row .xlarge-auto:nth-last-of-type(14) ~ .xlarge-auto {
  14147. --f7-cols-per-row: 14;
  14148. }
  14149. .row .xlarge-auto:nth-last-of-type(15),
  14150. .row .xlarge-auto:nth-last-of-type(15) ~ .xlarge-auto {
  14151. --f7-cols-per-row: 15;
  14152. }
  14153. .row .xlarge-auto:nth-last-of-type(16),
  14154. .row .xlarge-auto:nth-last-of-type(16) ~ .xlarge-auto {
  14155. --f7-cols-per-row: 16;
  14156. }
  14157. .row .xlarge-auto:nth-last-of-type(17),
  14158. .row .xlarge-auto:nth-last-of-type(17) ~ .xlarge-auto {
  14159. --f7-cols-per-row: 17;
  14160. }
  14161. .row .xlarge-auto:nth-last-of-type(18),
  14162. .row .xlarge-auto:nth-last-of-type(18) ~ .xlarge-auto {
  14163. --f7-cols-per-row: 18;
  14164. }
  14165. .row .xlarge-auto:nth-last-of-type(19),
  14166. .row .xlarge-auto:nth-last-of-type(19) ~ .xlarge-auto {
  14167. --f7-cols-per-row: 19;
  14168. }
  14169. .row .xlarge-auto:nth-last-of-type(20),
  14170. .row .xlarge-auto:nth-last-of-type(20) ~ .xlarge-auto {
  14171. --f7-cols-per-row: 20;
  14172. }
  14173. .row .xlarge-auto:nth-last-of-type(21),
  14174. .row .xlarge-auto:nth-last-of-type(21) ~ .xlarge-auto {
  14175. --f7-cols-per-row: 21;
  14176. }
  14177. .row .xlarge-auto:nth-last-of-type(22),
  14178. .row .xlarge-auto:nth-last-of-type(22) ~ .xlarge-auto {
  14179. --f7-cols-per-row: 22;
  14180. }
  14181. }
  14182. .row .resize-handler {
  14183. position: absolute;
  14184. -webkit-user-select: none;
  14185. -moz-user-select: none;
  14186. user-select: none;
  14187. z-index: 100;
  14188. }
  14189. .row .resize-handler:before {
  14190. content: '';
  14191. position: absolute;
  14192. }
  14193. .row .resize-handler:after {
  14194. content: '';
  14195. position: absolute;
  14196. border-radius: 4px;
  14197. background: var(--f7-grid-resize-handler-bg-color);
  14198. }
  14199. .row > .resize-handler {
  14200. width: 100%;
  14201. height: var(--f7-grid-row-gap);
  14202. left: 0;
  14203. top: 100%;
  14204. cursor: row-resize;
  14205. }
  14206. .row > .resize-handler:before {
  14207. left: 0%;
  14208. top: 50%;
  14209. height: 12px;
  14210. width: 100%;
  14211. min-height: var(--f7-grid-row-gap);
  14212. transform: translateY(-50%);
  14213. }
  14214. .row > .resize-handler:after {
  14215. height: 4px;
  14216. margin-top: -2px;
  14217. width: 80%;
  14218. max-width: 20px;
  14219. left: 50%;
  14220. top: 50%;
  14221. transform: translateX(-50%);
  14222. }
  14223. [class*="col-"] > .resize-handler,
  14224. .col > .resize-handler {
  14225. width: var(--f7-grid-gap);
  14226. left: 100%;
  14227. top: 0;
  14228. height: 100%;
  14229. cursor: col-resize;
  14230. }
  14231. [class*="col-"] > .resize-handler:before,
  14232. .col > .resize-handler:before {
  14233. left: 50%;
  14234. top: 0;
  14235. height: 100%;
  14236. width: 12px;
  14237. min-width: var(--f7-grid-gap);
  14238. transform: translateX(-50%);
  14239. }
  14240. [class*="col-"] > .resize-handler:after,
  14241. .col > .resize-handler:after {
  14242. width: 4px;
  14243. margin-left: -2px;
  14244. height: 80%;
  14245. max-height: 20px;
  14246. border-radius: 4px;
  14247. left: 50%;
  14248. top: 50%;
  14249. transform: translateY(-50%);
  14250. }
  14251. .row:last-child > .resize-handler,
  14252. .row:last-of-type > .resize-handler,
  14253. .row [class*="col-"]:last-child > .resize-handler,
  14254. .row [class*="col-"]:last-of-type > .resize-handler,
  14255. .row .col:last-child > .resize-handler,
  14256. .row .col:last-of-type > .resize-handler {
  14257. display: none;
  14258. }
  14259. /* === Calendar/Datepicker === */
  14260. :root {
  14261. --f7-calendar-height: 340px;
  14262. --f7-calendar-sheet-landscape-height: 220px;
  14263. --f7-calendar-popover-width: 320px;
  14264. --f7-calendar-popover-height: 320px;
  14265. --f7-calendar-modal-height: 420px;
  14266. --f7-calendar-modal-max-width: 380px;
  14267. --f7-calendar-modal-border-radius: 4px;
  14268. /*
  14269. --f7-calendar-header-bg-color: var(--f7-bars-bg-color);
  14270. --f7-calendar-header-link-color: var(--f7-bars-link-color);
  14271. --f7-calendar-header-text-color: var(--f7-bars-text-color);
  14272. --f7-calendar-footer-bg-color: var(--f7-bars-bg-color);
  14273. --f7-calendar-footer-border-color: var(--f7-bars-border-color);
  14274. --f7-calendar-footer-link-color: var(--f7-bars-link-color);
  14275. --f7-calendar-footer-text-color: var(--f7-bars-text-color);
  14276. --f7-calendar-week-header-bg-color: var(--f7-bars-bg-color);
  14277. --f7-calendar-week-header-text-color: var(--f7-bars-text-color);
  14278. */
  14279. --f7-calendar-footer-padding: 0 8px;
  14280. --f7-calendar-week-header-font-size: 11px;
  14281. --f7-calendar-selected-text-color: #fff;
  14282. /*
  14283. --f7-calendar-selected-bg-color: var(--f7-theme-color);
  14284. */
  14285. --f7-calendar-prev-next-text-color: #b8b8b8;
  14286. --f7-calendar-disabled-text-color: #d4d4d4;
  14287. --f7-calendar-event-dot-size: 4px;
  14288. /*
  14289. --f7-calendar-event-bg-color: var(--f7-theme-color);
  14290. */
  14291. /*
  14292. --f7-calendar-picker-selected-text-color: var(--f7-theme-color);
  14293. */
  14294. --f7-calendar-day-text-color: #000;
  14295. --f7-calendar-sheet-bg-color: #fff;
  14296. --f7-calendar-modal-bg-color: #fff;
  14297. --f7-calendar-picker-bg-color: #fff;
  14298. --f7-calendar-picker-pressed-bg-color: rgba(0, 0, 0, 0.1);
  14299. --f7-calendar-picker-hover-bg-color: rgba(0, 0, 0, 0.03);
  14300. }
  14301. :root .theme-dark,
  14302. :root.theme-dark {
  14303. --f7-calendar-sheet-border-color: var(--f7-bars-border-color);
  14304. --f7-calendar-modal-bg-color: #121212;
  14305. --f7-calendar-sheet-bg-color: #121212;
  14306. --f7-calendar-picker-bg-color: #1c1c1d;
  14307. --f7-calendar-picker-pressed-bg-color: rgba(255, 255, 255, 0.08);
  14308. --f7-calendar-picker-hover-bg-color: rgba(255, 255, 255, 0.03);
  14309. }
  14310. .ios {
  14311. --f7-calendar-sheet-border-color: #929499;
  14312. --f7-calendar-header-height: 44px;
  14313. --f7-calendar-header-font-size: 17px;
  14314. --f7-calendar-header-font-weight: 600;
  14315. --f7-calendar-header-padding: 0 8px;
  14316. --f7-calendar-footer-height: 44px;
  14317. --f7-calendar-footer-font-size: 17px;
  14318. --f7-calendar-week-header-height: 18px;
  14319. --f7-calendar-day-font-size: 15px;
  14320. --f7-calendar-day-size: 30px;
  14321. --f7-calendar-picker-font-size: 17px;
  14322. --f7-calendar-time-selector-font-size: 17px;
  14323. --f7-calendar-row-border-color: rgba(0, 0, 0, 0.25);
  14324. --f7-calendar-today-text-color: #000;
  14325. --f7-calendar-today-bg-color: #e3e3e3;
  14326. }
  14327. .ios .theme-dark,
  14328. .ios.theme-dark {
  14329. --f7-calendar-row-border-color: var(--f7-bars-border-color);
  14330. --f7-calendar-day-text-color: #fff;
  14331. --f7-calendar-today-text-color: #fff;
  14332. --f7-calendar-today-bg-color: #333;
  14333. }
  14334. .md {
  14335. --f7-calendar-sheet-border-color: #ccc;
  14336. --f7-calendar-header-height: 56px;
  14337. --f7-calendar-header-font-size: 20px;
  14338. --f7-calendar-header-font-weight: 400;
  14339. --f7-calendar-header-padding: 0 24px;
  14340. --f7-calendar-footer-height: 48px;
  14341. --f7-calendar-footer-font-size: 14px;
  14342. --f7-calendar-week-header-height: 24px;
  14343. --f7-calendar-row-border-color: transparent;
  14344. --f7-calendar-day-font-size: 14px;
  14345. /*
  14346. --f7-calendar-today-text-color: var(--f7-theme-color);
  14347. */
  14348. --f7-calendar-today-bg-color: none;
  14349. --f7-calendar-day-size: 32px;
  14350. --f7-calendar-picker-font-size: 14px;
  14351. --f7-calendar-time-selector-font-size: 14px;
  14352. }
  14353. .md .theme-dark,
  14354. .md.theme-dark {
  14355. --f7-calendar-day-text-color: rgba(255, 255, 255, 0.87);
  14356. }
  14357. .aurora {
  14358. --f7-calendar-sheet-border-color: #ccc;
  14359. --f7-calendar-header-height: 38px;
  14360. --f7-calendar-header-font-size: 14px;
  14361. --f7-calendar-header-font-weight: 600;
  14362. --f7-calendar-header-padding: 0 8px;
  14363. --f7-calendar-footer-height: 38px;
  14364. --f7-calendar-footer-font-size: 14px;
  14365. --f7-calendar-week-header-height: 18px;
  14366. --f7-calendar-day-font-size: 13px;
  14367. --f7-calendar-day-size: 30px;
  14368. --f7-calendar-picker-font-size: 14px;
  14369. --f7-calendar-time-selector-font-size: 14px;
  14370. --f7-calendar-row-border-color: #e3e3e3;
  14371. --f7-calendar-today-text-color: #000;
  14372. --f7-calendar-today-bg-color: #e3e3e3;
  14373. }
  14374. .aurora .theme-dark,
  14375. .aurora.theme-dark {
  14376. --f7-calendar-row-border-color: var(--f7-bars-border-color);
  14377. --f7-calendar-day-text-color: #fff;
  14378. --f7-calendar-today-text-color: #fff;
  14379. --f7-calendar-today-bg-color: #333;
  14380. }
  14381. .calendar {
  14382. overflow: hidden;
  14383. height: var(--f7-calendar-height);
  14384. width: 100%;
  14385. display: flex;
  14386. flex-direction: column;
  14387. }
  14388. .calendar.modal-in {
  14389. display: flex;
  14390. }
  14391. @media (orientation: landscape) and (max-height: 415px) {
  14392. .calendar.calendar-sheet {
  14393. height: var(--f7-calendar-sheet-landscape-height);
  14394. }
  14395. .calendar.calendar-modal {
  14396. height: calc(100vh - var(--f7-navbar-height));
  14397. }
  14398. }
  14399. .calendar.calendar-inline,
  14400. .calendar.calendar-popover .calendar {
  14401. position: relative;
  14402. }
  14403. .calendar-sheet {
  14404. --f7-sheet-border-color: var(--f7-calendar-sheet-border-color);
  14405. background: var(--f7-calendar-sheet-bg-color);
  14406. padding-bottom: var(--f7-safe-area-bottom);
  14407. height: calc(var(--f7-calendar-height) + var(--f7-safe-area-bottom));
  14408. }
  14409. .calendar-sheet:before {
  14410. z-index: 600;
  14411. }
  14412. .calendar-sheet .toolbar:before,
  14413. .calendar-modal .toolbar:before,
  14414. .calendar-popover .toolbar:before {
  14415. display: none;
  14416. }
  14417. .calendar-popover {
  14418. width: var(--f7-calendar-popover-width);
  14419. }
  14420. .calendar-popover .toolbar-top,
  14421. .calendar-popover .calendar-header {
  14422. border-radius: var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0;
  14423. }
  14424. .calendar-popover .calendar-header + .toolbar-top {
  14425. border-radius: 0;
  14426. }
  14427. .calendar-popover .toolbar-bottom,
  14428. .calendar-popover .calendar-footer {
  14429. border-radius: 0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius);
  14430. }
  14431. .calendar-popover .calendar {
  14432. height: var(--f7-calendar-popover-height);
  14433. position: relative;
  14434. z-index: 1;
  14435. }
  14436. .calendar-popover .calendar-month-picker,
  14437. .calendar-popover .calendar-year-picker,
  14438. .calendar-popover .calendar-time-picker {
  14439. border-radius: var(--f7-popover-border-radius);
  14440. }
  14441. .calendar-header {
  14442. width: 100%;
  14443. position: relative;
  14444. overflow: hidden;
  14445. flex-shrink: 0;
  14446. white-space: nowrap;
  14447. text-overflow: ellipsis;
  14448. box-sizing: border-box;
  14449. padding: var(--f7-calendar-header-padding);
  14450. background-color: var(--f7-calendar-header-bg-color, var(--f7-bars-bg-color));
  14451. color: var(--f7-calendar-header-text-color, var(--f7-bars-text-color));
  14452. height: var(--f7-calendar-header-height);
  14453. line-height: var(--f7-calendar-header-height);
  14454. font-size: var(--f7-calendar-header-font-size);
  14455. font-weight: var(--f7-calendar-header-font-weight);
  14456. }
  14457. .calendar-header a {
  14458. color: var(--f7-calendar-header-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
  14459. }
  14460. .calendar-footer {
  14461. width: 100%;
  14462. flex-shrink: 0;
  14463. padding: var(--f7-calendar-footer-padding);
  14464. background-color: var(--f7-calendar-footer-bg-color, var(--f7-bars-bg-color));
  14465. color: var(--f7-calendar-footer-text-color, var(--f7-bars-text-color));
  14466. height: var(--f7-calendar-footer-height);
  14467. font-size: var(--f7-calendar-header-font-size);
  14468. display: flex;
  14469. justify-content: flex-end;
  14470. box-sizing: border-box;
  14471. align-items: center;
  14472. position: relative;
  14473. }
  14474. .calendar-footer a {
  14475. color: var(--f7-calendar-footer-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
  14476. }
  14477. .calendar-footer:before {
  14478. content: '';
  14479. position: absolute;
  14480. background-color: var(--f7-calendar-footer-border-color, var(--f7-bars-border-color));
  14481. display: block;
  14482. z-index: 15;
  14483. top: 0;
  14484. right: auto;
  14485. bottom: auto;
  14486. left: 0;
  14487. height: 1px;
  14488. width: 100%;
  14489. transform-origin: 50% 0%;
  14490. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  14491. }
  14492. .calendar-modal {
  14493. position: absolute;
  14494. height: var(--f7-calendar-modal-height);
  14495. overflow: hidden;
  14496. top: 50%;
  14497. left: 50%;
  14498. min-width: 300px;
  14499. max-width: var(--f7-calendar-modal-max-width);
  14500. transform: translate3d(-50%, 100vh, 0);
  14501. transition-property: transform;
  14502. display: flex;
  14503. z-index: 13500;
  14504. background: var(--f7-calendar-modal-bg-color);
  14505. width: 90%;
  14506. border-radius: var(--f7-calendar-modal-border-radius);
  14507. box-shadow: var(--f7-elevation-24);
  14508. }
  14509. .calendar-modal.modal-in,
  14510. .calendar-modal.modal-out {
  14511. transition-duration: 400ms;
  14512. }
  14513. .calendar-modal.modal-in {
  14514. transform: translate3d(-50%, -50%, 0);
  14515. }
  14516. .calendar-modal.modal-out {
  14517. transform: translate3d(-50%, 100vh, 0);
  14518. }
  14519. .calendar-week-header {
  14520. display: flex;
  14521. box-sizing: border-box;
  14522. position: relative;
  14523. font-size: var(--f7-calendar-week-header-font-size);
  14524. background-color: var(--f7-calendar-week-header-bg-color, var(--f7-bars-bg-color));
  14525. color: var(--f7-calendar-week-header-text-color, var(--f7-bars-text-color));
  14526. height: var(--f7-calendar-week-header-height);
  14527. padding-left: var(--f7-safe-area-left);
  14528. padding-right: var(--f7-safe-area-right);
  14529. }
  14530. .calendar-week-header .calendar-week-day {
  14531. flex-shrink: 1;
  14532. width: calc(100% / 7);
  14533. text-align: center;
  14534. line-height: var(--f7-calendar-week-header-height);
  14535. }
  14536. .calendar-months {
  14537. width: 100%;
  14538. height: 100%;
  14539. overflow: hidden;
  14540. position: relative;
  14541. flex-shrink: 10;
  14542. }
  14543. .calendar-months-wrapper {
  14544. position: relative;
  14545. width: 100%;
  14546. height: 100%;
  14547. transition: 300ms;
  14548. }
  14549. .calendar-month {
  14550. display: flex;
  14551. flex-direction: column;
  14552. width: 100%;
  14553. height: 100%;
  14554. position: absolute;
  14555. left: 0;
  14556. top: 0;
  14557. }
  14558. .calendar-row {
  14559. height: 16.66666667%;
  14560. height: calc(100% / 6);
  14561. display: flex;
  14562. flex-shrink: 1;
  14563. width: 100%;
  14564. position: relative;
  14565. box-sizing: border-box;
  14566. padding-left: var(--f7-safe-area-left);
  14567. padding-right: var(--f7-safe-area-right);
  14568. }
  14569. .calendar-row:before {
  14570. content: '';
  14571. position: absolute;
  14572. background-color: var(--f7-calendar-row-border-color);
  14573. display: block;
  14574. z-index: 15;
  14575. top: 0;
  14576. right: auto;
  14577. bottom: auto;
  14578. left: 0;
  14579. height: 1px;
  14580. width: 100%;
  14581. transform-origin: 50% 0%;
  14582. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  14583. }
  14584. .calendar-modal .calendar-months:first-child .calendar-row:first-child:before,
  14585. .calendar-popover .calendar-months:first-child .calendar-row:first-child:before {
  14586. display: none !important;
  14587. }
  14588. .calendar-day {
  14589. flex-shrink: 1;
  14590. display: flex;
  14591. justify-content: center;
  14592. align-items: center;
  14593. box-sizing: border-box;
  14594. width: 14.28571429%;
  14595. width: calc(100% / 7);
  14596. text-align: center;
  14597. cursor: pointer;
  14598. z-index: 20;
  14599. color: var(--f7-calendar-day-text-color);
  14600. height: 100%;
  14601. font-size: var(--f7-calendar-day-font-size);
  14602. }
  14603. .calendar-day.calendar-day-today .calendar-day-number {
  14604. color: var(--f7-calendar-today-text-color, var(--f7-theme-color));
  14605. background-color: var(--f7-calendar-today-bg-color);
  14606. }
  14607. .calendar-day.calendar-day-prev,
  14608. .calendar-day.calendar-day-next {
  14609. color: var(--f7-calendar-prev-next-text-color);
  14610. }
  14611. .calendar-day.calendar-day-disabled {
  14612. color: var(--f7-calendar-disabled-text-color);
  14613. cursor: auto;
  14614. }
  14615. .calendar-day.calendar-day-selected .calendar-day-number {
  14616. color: var(--f7-calendar-selected-text-color);
  14617. background-color: var(--f7-calendar-selected-bg-color, var(--f7-theme-color));
  14618. }
  14619. .calendar-day .calendar-day-number {
  14620. display: inline-block;
  14621. border-radius: 50%;
  14622. position: relative;
  14623. width: var(--f7-calendar-day-size);
  14624. height: var(--f7-calendar-day-size);
  14625. line-height: var(--f7-calendar-day-size);
  14626. }
  14627. .calendar-day .calendar-day-events {
  14628. position: absolute;
  14629. display: flex;
  14630. left: 0;
  14631. width: 100%;
  14632. top: 100%;
  14633. align-items: center;
  14634. justify-content: center;
  14635. margin-top: 1px;
  14636. }
  14637. .calendar-day .calendar-day-event {
  14638. width: var(--f7-calendar-event-dot-size);
  14639. height: var(--f7-calendar-event-dot-size);
  14640. border-radius: calc(var(--f7-calendar-event-dot-size) / 2);
  14641. background-color: var(--f7-calendar-event-bg-color);
  14642. }
  14643. .calendar-day .calendar-day-event + .calendar-day-event {
  14644. margin-left: 2px;
  14645. }
  14646. .calendar-range .calendar-day.calendar-day-selected {
  14647. align-items: stretch;
  14648. align-content: stretch;
  14649. }
  14650. .calendar-range .calendar-day.calendar-day-selected .calendar-day-number {
  14651. width: 100%;
  14652. border-radius: 0;
  14653. height: auto;
  14654. text-align: center;
  14655. display: flex;
  14656. align-items: center;
  14657. justify-content: center;
  14658. }
  14659. .calendar-month-selector,
  14660. .calendar-year-selector {
  14661. display: flex;
  14662. justify-content: space-between;
  14663. align-items: center;
  14664. width: 50%;
  14665. max-width: 200px;
  14666. flex-shrink: 10;
  14667. margin-left: auto;
  14668. margin-right: auto;
  14669. }
  14670. .calendar-month-selector .calendar-day-number,
  14671. .calendar-year-selector .calendar-day-number {
  14672. flex-shrink: 1;
  14673. position: relative;
  14674. overflow: hidden;
  14675. text-overflow: ellipsis;
  14676. }
  14677. .calendar-month-selector a.icon-only,
  14678. .calendar-year-selector a.icon-only {
  14679. min-width: 36px;
  14680. }
  14681. .calendar-month-picker,
  14682. .calendar-year-picker,
  14683. .calendar-time-picker {
  14684. position: absolute;
  14685. width: 100%;
  14686. height: 100%;
  14687. left: 0px;
  14688. top: 0px;
  14689. background: var(--f7-calendar-picker-bg-color);
  14690. z-index: 1000;
  14691. -webkit-user-select: none;
  14692. -moz-user-select: none;
  14693. user-select: none;
  14694. }
  14695. .calendar-month-picker,
  14696. .calendar-year-picker {
  14697. flex-wrap: wrap;
  14698. font-size: var(--f7-calendar-picker-font-size);
  14699. display: flex;
  14700. }
  14701. .calendar-month-picker-item,
  14702. .calendar-year-picker-item {
  14703. display: flex;
  14704. justify-content: center;
  14705. align-items: center;
  14706. position: relative;
  14707. overflow: hidden;
  14708. cursor: pointer;
  14709. transition-duration: 100ms;
  14710. box-sizing: border-box;
  14711. }
  14712. .calendar-month-picker-item span,
  14713. .calendar-year-picker-item span {
  14714. white-space: nowrap;
  14715. text-overflow: ellipsis;
  14716. box-sizing: border-box;
  14717. position: relative;
  14718. overflow: hidden;
  14719. pointer-events: none;
  14720. }
  14721. .device-desktop.aurora .calendar-month-picker-item:hover,
  14722. .device-desktop.aurora .calendar-year-picker-item:hover {
  14723. background-color: var(--f7-calendar-picker-hover-bg-color);
  14724. }
  14725. .calendar-month-picker-item.active-state,
  14726. .calendar-year-picker-item.active-state,
  14727. .device-desktop.aurora .calendar-month-picker-item.active-state,
  14728. .device-desktop.aurora .calendar-year-picker-item.active-state {
  14729. background: var(--f7-calendar-picker-pressed-bg-color);
  14730. }
  14731. .calendar-month-picker-item {
  14732. padding: 5px;
  14733. }
  14734. .calendar-month-picker-item:after {
  14735. content: '';
  14736. position: absolute;
  14737. background-color: var(--f7-calendar-row-border-color);
  14738. display: block;
  14739. z-index: 15;
  14740. top: auto;
  14741. right: auto;
  14742. bottom: 0;
  14743. left: 0;
  14744. height: 1px;
  14745. width: 100%;
  14746. transform-origin: 50% 100%;
  14747. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  14748. }
  14749. .calendar-month-picker-item:before {
  14750. content: '';
  14751. position: absolute;
  14752. background-color: var(--f7-calendar-row-border-color);
  14753. display: block;
  14754. z-index: 15;
  14755. top: 0;
  14756. right: auto;
  14757. bottom: auto;
  14758. left: 0;
  14759. width: 1px;
  14760. height: 100%;
  14761. transform-origin: 0% 50%;
  14762. transform: scaleX(calc(1 / var(--f7-device-pixel-ratio)));
  14763. }
  14764. .sheet-modal .calendar-month-picker-item {
  14765. width: 25%;
  14766. height: calc(100% / 3);
  14767. }
  14768. .sheet-modal .calendar-month-picker-item:nth-child(4n + 1):before {
  14769. display: none !important;
  14770. }
  14771. .sheet-modal .calendar-month-picker-item:nth-child(n + 9):after {
  14772. display: none !important;
  14773. }
  14774. .popover .calendar-month-picker-item,
  14775. .calendar-modal .calendar-month-picker-item {
  14776. width: calc(100% / 3);
  14777. height: 25%;
  14778. }
  14779. .popover .calendar-month-picker-item:nth-child(3n + 1):before,
  14780. .calendar-modal .calendar-month-picker-item:nth-child(3n + 1):before {
  14781. display: none !important;
  14782. }
  14783. .popover .calendar-month-picker-item:nth-child(n + 10):after,
  14784. .calendar-modal .calendar-month-picker-item:nth-child(n + 10):after {
  14785. display: none !important;
  14786. }
  14787. .calendar-month-picker-item-current,
  14788. .calendar-year-picker-item-current {
  14789. color: var(--f7-calendar-picker-selected-text-color, var(--f7-theme-color));
  14790. }
  14791. .calendar-year-picker {
  14792. overflow: auto;
  14793. --webkit-overflow-scrolling: touch;
  14794. }
  14795. .calendar-year-picker-item {
  14796. height: 34px;
  14797. line-height: 34px;
  14798. width: 100%;
  14799. }
  14800. .calendar-year-picker-item:after {
  14801. content: '';
  14802. position: absolute;
  14803. background-color: var(--f7-calendar-row-border-color);
  14804. display: block;
  14805. z-index: 15;
  14806. top: auto;
  14807. right: auto;
  14808. bottom: 0;
  14809. left: 0;
  14810. height: 1px;
  14811. width: 100%;
  14812. transform-origin: 50% 100%;
  14813. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  14814. }
  14815. .calendar-time-selector {
  14816. flex-shrink: 0;
  14817. font-size: var(--f7-calendar-time-selector-font-size);
  14818. position: relative;
  14819. }
  14820. .calendar-time-selector:before {
  14821. content: '';
  14822. position: absolute;
  14823. background-color: var(--f7-calendar-row-border-color);
  14824. display: block;
  14825. z-index: 15;
  14826. top: 0;
  14827. right: auto;
  14828. bottom: auto;
  14829. left: 0;
  14830. height: 1px;
  14831. width: 100%;
  14832. transform-origin: 50% 0%;
  14833. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  14834. }
  14835. .calendar-time-selector a {
  14836. overflow: hidden;
  14837. position: relative;
  14838. justify-content: center;
  14839. align-items: center;
  14840. display: flex;
  14841. width: 100%;
  14842. height: 44px;
  14843. }
  14844. .calendar-time-picker {
  14845. --f7-picker-popover-height: 100%;
  14846. --f7-picker-inline-height: 100%;
  14847. --f7-picker-item-selected-text-color: var(--f7-theme-color);
  14848. }
  14849. .calendar-time-picker .toolbar {
  14850. flex-shrink: 0;
  14851. top: 0 !important;
  14852. }
  14853. .calendar-time-picker .picker {
  14854. height: 100%;
  14855. display: flex;
  14856. flex-direction: column;
  14857. }
  14858. /* === Picker === */
  14859. :root {
  14860. --f7-picker-height: 260px;
  14861. --f7-picker-inline-height: 200px;
  14862. --f7-picker-popover-height: 200px;
  14863. --f7-picker-popover-width: 280px;
  14864. --f7-picker-landscape-height: 200px;
  14865. --f7-picker-item-height: 36px;
  14866. --f7-picker-item-selected-text-color: #000;
  14867. }
  14868. :root .theme-dark,
  14869. :root.theme-dark {
  14870. --f7-picker-item-selected-text-color: #fff;
  14871. }
  14872. .ios {
  14873. --f7-picker-column-font-size: 20px;
  14874. --f7-picker-sheet-bg-color: #cfd5da;
  14875. --f7-picker-divider-text-color: #000;
  14876. --f7-picker-item-text-color: rgba(0, 0, 0, 0.45);
  14877. --f7-picker-item-selected-border-color: rgba(0, 0, 0, 0.22);
  14878. }
  14879. .ios .theme-dark,
  14880. .ios.theme-dark {
  14881. --f7-picker-sheet-bg-color: #1c1c1d;
  14882. --f7-picker-divider-text-color: #fff;
  14883. --f7-picker-item-text-color: rgba(255, 255, 255, 0.55);
  14884. --f7-picker-item-selected-border-color: rgba(255, 255, 255, 0.06);
  14885. }
  14886. .md {
  14887. /*
  14888. --f7-picker-sheet-bg-color: var(--f7-sheet-bg-color);
  14889. */
  14890. --f7-picker-column-font-size: 20px;
  14891. --f7-picker-divider-text-color: rgba(0, 0, 0, 0.87);
  14892. --f7-picker-item-text-color: rgba(0, 0, 0, 0.54);
  14893. --f7-picker-item-selected-border-color: rgba(0, 0, 0, 0.15);
  14894. }
  14895. .md .theme-dark,
  14896. .md.theme-dark {
  14897. --f7-picker-item-text-color: rgba(255, 255, 255, 0.54);
  14898. --f7-picker-divider-text-color: rgba(255, 255, 255, 0.87);
  14899. --f7-picker-item-selected-border-color: rgba(255, 255, 255, 0.15);
  14900. }
  14901. .aurora {
  14902. /*
  14903. --f7-picker-sheet-bg-color: var(--f7-sheet-bg-color);
  14904. */
  14905. --f7-picker-column-font-size: 16px;
  14906. --f7-picker-item-height: 28px;
  14907. --f7-picker-item-text-color: #888;
  14908. --f7-picker-divider-text-color: #000;
  14909. --f7-picker-item-selected-border-color: rgba(0, 0, 0, 0.12);
  14910. }
  14911. .aurora .theme-dark,
  14912. .aurora.theme-dark {
  14913. --f7-picker-divider-text-color: #fff;
  14914. --f7-picker-item-selected-border-color: rgba(255, 255, 255, 0.06);
  14915. }
  14916. .picker {
  14917. width: 100%;
  14918. height: var(--f7-picker-height);
  14919. }
  14920. .picker.picker-inline {
  14921. height: var(--f7-picker-inline-height);
  14922. }
  14923. .popover .picker {
  14924. height: var(--f7-picker-popover-height);
  14925. }
  14926. @media (orientation: landscape) and (max-height: 415px) {
  14927. .picker:not(.picker-inline) {
  14928. height: var(--f7-picker-landscape-height);
  14929. }
  14930. }
  14931. .picker.sheet-modal {
  14932. background: var(--f7-picker-sheet-bg-color, var(--f7-sheet-bg-color));
  14933. }
  14934. .picker-popover {
  14935. width: var(--f7-picker-popover-width);
  14936. }
  14937. .picker-popover .toolbar {
  14938. background: none;
  14939. border-radius: var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0;
  14940. }
  14941. .picker-popover .toolbar:before {
  14942. display: none !important;
  14943. }
  14944. .picker-popover .toolbar + .picker-columns {
  14945. height: calc(100% - var(--f7-toolbar-height));
  14946. }
  14947. .picker-columns {
  14948. display: flex;
  14949. overflow: hidden;
  14950. justify-content: center;
  14951. padding: 0;
  14952. text-align: right;
  14953. height: 100%;
  14954. position: relative;
  14955. -webkit-mask-box-image: linear-gradient(to top, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent);
  14956. font-size: var(--f7-picker-column-font-size);
  14957. }
  14958. .picker-column {
  14959. position: relative;
  14960. max-height: 100%;
  14961. }
  14962. .picker-column.picker-column-first:before,
  14963. .picker-column.picker-column-last:after {
  14964. height: 100%;
  14965. width: 100vw;
  14966. position: absolute;
  14967. content: '';
  14968. top: 0;
  14969. }
  14970. .picker-column.picker-column-first:before {
  14971. left: 100%;
  14972. }
  14973. .picker-column.picker-column-last:after {
  14974. right: 100%;
  14975. }
  14976. .picker-column.picker-column-left {
  14977. text-align: left;
  14978. }
  14979. .picker-column.picker-column-center {
  14980. text-align: center;
  14981. }
  14982. .picker-column.picker-column-right {
  14983. text-align: right;
  14984. }
  14985. .picker-column.picker-column-divider {
  14986. display: flex;
  14987. align-items: center;
  14988. color: var(--f7-picker-divider-text-color);
  14989. }
  14990. .picker-items {
  14991. transition: 300ms;
  14992. transition-timing-function: ease-out;
  14993. }
  14994. .picker-item {
  14995. height: var(--f7-picker-item-height);
  14996. line-height: var(--f7-picker-item-height);
  14997. white-space: nowrap;
  14998. position: relative;
  14999. overflow: hidden;
  15000. text-overflow: ellipsis;
  15001. left: 0;
  15002. top: 0;
  15003. width: 100%;
  15004. box-sizing: border-box;
  15005. transition: 300ms;
  15006. color: var(--f7-picker-item-text-color);
  15007. cursor: pointer;
  15008. }
  15009. .picker-item span {
  15010. padding: 0 10px;
  15011. }
  15012. .picker-column-absolute .picker-item {
  15013. position: absolute;
  15014. }
  15015. .picker-item.picker-item-far {
  15016. pointer-events: none;
  15017. }
  15018. .picker-item.picker-item-selected {
  15019. color: var(--f7-picker-item-selected-text-color);
  15020. transform: translate3d(0, 0, 0) rotateX(0deg);
  15021. }
  15022. .picker-center-highlight {
  15023. height: var(--f7-picker-item-height);
  15024. box-sizing: border-box;
  15025. position: absolute;
  15026. left: 0;
  15027. width: 100%;
  15028. top: 50%;
  15029. margin-top: calc(-1 * var(--f7-picker-item-height) / 2);
  15030. pointer-events: none;
  15031. }
  15032. .picker-center-highlight:before {
  15033. content: '';
  15034. position: absolute;
  15035. background-color: var(--f7-picker-item-selected-border-color);
  15036. display: block;
  15037. z-index: 15;
  15038. top: 0;
  15039. right: auto;
  15040. bottom: auto;
  15041. left: 0;
  15042. height: 1px;
  15043. width: 100%;
  15044. transform-origin: 50% 0%;
  15045. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  15046. }
  15047. .picker-center-highlight:after {
  15048. content: '';
  15049. position: absolute;
  15050. background-color: var(--f7-picker-item-selected-border-color);
  15051. display: block;
  15052. z-index: 15;
  15053. top: auto;
  15054. right: auto;
  15055. bottom: 0;
  15056. left: 0;
  15057. height: 1px;
  15058. width: 100%;
  15059. transform-origin: 50% 100%;
  15060. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  15061. }
  15062. .picker-3d .picker-columns {
  15063. overflow: hidden;
  15064. perspective: 1200px;
  15065. }
  15066. .picker-3d .picker-column,
  15067. .picker-3d .picker-items,
  15068. .picker-3d .picker-item {
  15069. transform-style: preserve-3d;
  15070. }
  15071. .picker-3d .picker-column {
  15072. overflow: visible;
  15073. }
  15074. .picker-3d .picker-item {
  15075. transform-origin: center center -110px;
  15076. -webkit-backface-visibility: hidden;
  15077. backface-visibility: hidden;
  15078. transition-timing-function: ease-out;
  15079. }
  15080. /* === Infinite === */
  15081. .infinite-scroll-preloader {
  15082. margin-left: auto;
  15083. margin-right: auto;
  15084. text-align: center;
  15085. }
  15086. .infinite-scroll-preloader.preloader {
  15087. display: block;
  15088. }
  15089. .ios .infinite-scroll-preloader {
  15090. margin-top: 35px;
  15091. margin-bottom: 35px;
  15092. }
  15093. .ios .infinite-scroll-preloader .preloader,
  15094. .ios .infinite-scroll-preloader.preloader {
  15095. width: 27px;
  15096. height: 27px;
  15097. }
  15098. .md .infinite-scroll-preloader {
  15099. margin-top: 32px;
  15100. margin-bottom: 32px;
  15101. }
  15102. .aurora .infinite-scroll-preloader {
  15103. margin-top: 15px;
  15104. margin-bottom: 15px;
  15105. }
  15106. /* === PTR === */
  15107. .ios {
  15108. --f7-ptr-preloader-size: 28px;
  15109. --f7-ptr-size: 44px;
  15110. }
  15111. .md {
  15112. --f7-ptr-preloader-size: 22px;
  15113. --f7-ptr-size: 40px;
  15114. }
  15115. .aurora {
  15116. --f7-ptr-preloader-size: 20px;
  15117. --f7-ptr-size: 38px;
  15118. }
  15119. .ptr-preloader {
  15120. position: relative;
  15121. top: var(--f7-ptr-top, 0);
  15122. height: var(--f7-ptr-size);
  15123. }
  15124. .ptr-preloader .preloader {
  15125. position: absolute;
  15126. left: 50%;
  15127. width: var(--f7-ptr-preloader-size);
  15128. height: var(--f7-ptr-preloader-size);
  15129. margin-left: calc(-1 * var(--f7-ptr-preloader-size) / 2);
  15130. margin-top: calc(-1 * var(--f7-ptr-preloader-size) / 2);
  15131. top: 50%;
  15132. visibility: hidden;
  15133. }
  15134. .ptr-bottom .ptr-preloader {
  15135. top: auto;
  15136. bottom: 0;
  15137. position: fixed;
  15138. }
  15139. .ptr-with-navbar-large-transparent .ptr-preloader,
  15140. .ptr-with-navbar-transparent .ptr-preloader {
  15141. top: calc(-1 * var(--f7-page-navbar-offset, 0px) + var(--f7-safe-area-top));
  15142. }
  15143. .ios .ptr-preloader {
  15144. margin-top: calc(-1 * var(--f7-ptr-size));
  15145. width: 100%;
  15146. left: 0;
  15147. }
  15148. .ios .ptr-arrow {
  15149. position: absolute;
  15150. left: 50%;
  15151. top: 50%;
  15152. background: no-repeat center;
  15153. z-index: 10;
  15154. transform: rotate(0deg) translate3d(0, 0, 0);
  15155. transition-duration: 300ms;
  15156. transition-property: transform, opacity;
  15157. width: 12px;
  15158. height: 20px;
  15159. margin-left: -6px;
  15160. margin-top: -10px;
  15161. visibility: visible;
  15162. color: var(--f7-preloader-color);
  15163. }
  15164. .ios .ptr-arrow:after {
  15165. font-family: 'framework7-core-icons';
  15166. font-weight: normal;
  15167. font-style: normal;
  15168. line-height: 1;
  15169. letter-spacing: normal;
  15170. text-transform: none;
  15171. white-space: nowrap;
  15172. word-wrap: normal;
  15173. direction: ltr;
  15174. -webkit-font-smoothing: antialiased;
  15175. text-rendering: optimizeLegibility;
  15176. -moz-osx-font-smoothing: grayscale;
  15177. font-feature-settings: "liga";
  15178. text-align: center;
  15179. display: block;
  15180. width: 100%;
  15181. height: 100%;
  15182. font-size: 20px;
  15183. width: 12px;
  15184. height: 20px;
  15185. line-height: 20px;
  15186. font-size: 10px;
  15187. content: 'ptr_arrow_ios';
  15188. }
  15189. .ios .ptr-content:not(.ptr-refreshing) .ptr-preloader .preloader {
  15190. animation: none;
  15191. }
  15192. .ios .ptr-transitioning,
  15193. .ios .ptr-refreshing {
  15194. transition-duration: 300ms;
  15195. transition-property: transform;
  15196. }
  15197. .ios .ptr-refreshing {
  15198. transform: translate3d(0, var(--f7-ptr-size), 0);
  15199. }
  15200. .ios .ptr-refreshing .ptr-arrow {
  15201. visibility: hidden;
  15202. }
  15203. .ios .ptr-refreshing .ptr-preloader .preloader {
  15204. visibility: visible;
  15205. }
  15206. .ios .ptr-pull-up .ptr-arrow {
  15207. transform: rotate(180deg) translate3d(0, 0, 0);
  15208. }
  15209. .ios .ptr-no-navbar,
  15210. .ios .ptr-with-navbar-large-transparent,
  15211. .ios .ptr-with-navbar-transparent {
  15212. margin-top: calc(-1 * var(--f7-ptr-size));
  15213. height: calc(100% + var(--f7-ptr-size));
  15214. }
  15215. .ios .ptr-no-navbar .ptr-preloader,
  15216. .ios .ptr-with-navbar-large-transparent .ptr-preloader,
  15217. .ios .ptr-with-navbar-transparent .ptr-preloader {
  15218. margin-top: 0;
  15219. }
  15220. .ios .ptr-bottom .ptr-preloader {
  15221. margin-top: 0;
  15222. margin-bottom: calc(-1 * var(--f7-ptr-size));
  15223. }
  15224. .ios .ptr-bottom.ptr-transitioning > *,
  15225. .ios .ptr-bottom.ptr-refreshing > * {
  15226. transition-duration: 300ms;
  15227. transition-property: transform;
  15228. }
  15229. .ios .ptr-bottom.ptr-refreshing {
  15230. transform: none;
  15231. }
  15232. .ios .ptr-bottom.ptr-refreshing > * {
  15233. transform: translate3d(0, calc(-1 * var(--f7-ptr-size)), 0);
  15234. }
  15235. .ios .ptr-bottom .ptr-arrow {
  15236. transform: rotate(180deg) translate3d(0, 0, 0);
  15237. }
  15238. .ios .ptr-bottom.ptr-pull-up .ptr-arrow {
  15239. transform: rotate(0deg) translate3d(0, 0, 0);
  15240. }
  15241. .ios .ptr-with-navbar-large-transparent .ptr-preloader .preloader,
  15242. .ios .ptr-with-navbar-transparent .ptr-preloader .preloader,
  15243. .ios .ptr-with-navbar-large-transparent .ptr-preloader .ptr-arrow,
  15244. .ios .ptr-with-navbar-transparent .ptr-preloader .ptr-arrow {
  15245. opacity: 0;
  15246. transition-duration: 300ms;
  15247. transition-property: transform, opacity;
  15248. }
  15249. .ios .ptr-with-navbar-large-transparent.ptr-pull-down .ptr-preloader .preloader,
  15250. .ios .ptr-with-navbar-transparent.ptr-pull-down .ptr-preloader .preloader,
  15251. .ios .ptr-with-navbar-large-transparent.ptr-pull-up .ptr-preloader .preloader,
  15252. .ios .ptr-with-navbar-transparent.ptr-pull-up .ptr-preloader .preloader,
  15253. .ios .ptr-with-navbar-large-transparent.ptr-refreshing .ptr-preloader .preloader,
  15254. .ios .ptr-with-navbar-transparent.ptr-refreshing .ptr-preloader .preloader,
  15255. .ios .ptr-with-navbar-large-transparent.ptr-pull-down .ptr-preloader .ptr-arrow,
  15256. .ios .ptr-with-navbar-transparent.ptr-pull-down .ptr-preloader .ptr-arrow,
  15257. .ios .ptr-with-navbar-large-transparent.ptr-pull-up .ptr-preloader .ptr-arrow,
  15258. .ios .ptr-with-navbar-transparent.ptr-pull-up .ptr-preloader .ptr-arrow,
  15259. .ios .ptr-with-navbar-large-transparent.ptr-refreshing .ptr-preloader .ptr-arrow,
  15260. .ios .ptr-with-navbar-transparent.ptr-refreshing .ptr-preloader .ptr-arrow {
  15261. opacity: 1;
  15262. }
  15263. .ios .ptr-with-navbar-large-transparent.ptr-closing .ptr-preloader .preloader,
  15264. .ios .ptr-with-navbar-transparent.ptr-closing .ptr-preloader .preloader,
  15265. .ios .ptr-with-navbar-large-transparent.ptr-closing .ptr-preloader .ptr-arrow,
  15266. .ios .ptr-with-navbar-transparent.ptr-closing .ptr-preloader .ptr-arrow {
  15267. opacity: 0;
  15268. transition-duration: 300ms;
  15269. }
  15270. .md {
  15271. --f7-ptr-top: -4px;
  15272. }
  15273. .md .ptr-preloader {
  15274. width: var(--f7-ptr-size);
  15275. border-radius: 50%;
  15276. background: #fff;
  15277. margin-top: calc(-1 * var(--f7-ptr-size));
  15278. z-index: 100;
  15279. box-shadow: var(--f7-elevation-1);
  15280. right: 50%;
  15281. margin-right: calc(-1 * var(--f7-ptr-size) / 2);
  15282. }
  15283. .md .ptr-preloader .preloader .preloader-inner-gap,
  15284. .md .ptr-preloader .preloader .preloader-inner-half-circle {
  15285. border-width: 3px;
  15286. }
  15287. .md .ptr-arrow {
  15288. width: 22px;
  15289. height: 22px;
  15290. box-sizing: border-box;
  15291. border: 3px solid var(--f7-preloader-color);
  15292. position: absolute;
  15293. left: 50%;
  15294. top: 50%;
  15295. margin-left: -11px;
  15296. margin-top: -11px;
  15297. border-left-color: transparent;
  15298. border-radius: 50%;
  15299. opacity: 1;
  15300. transform: rotate(150deg);
  15301. }
  15302. .md .ptr-arrow:after {
  15303. content: '';
  15304. width: 0px;
  15305. height: 0px;
  15306. position: absolute;
  15307. left: -5px;
  15308. bottom: 0px;
  15309. border-bottom-width: 6px;
  15310. border-bottom-style: solid;
  15311. border-bottom-color: inherit;
  15312. border-left: 5px solid transparent;
  15313. border-right: 5px solid transparent;
  15314. transform: rotate(-40deg);
  15315. }
  15316. .md .ptr-content:not(.ptr-refreshing):not(.ptr-pull-up) .ptr-preloader .preloader,
  15317. .md .ptr-content:not(.ptr-refreshing):not(.ptr-pull-up) .ptr-preloader .preloader * {
  15318. animation: none;
  15319. }
  15320. .md .ptr-refreshing .ptr-preloader .preloader,
  15321. .md .ptr-pull-up .ptr-preloader .preloader {
  15322. visibility: visible;
  15323. }
  15324. .md .ptr-refreshing .ptr-arrow,
  15325. .md .ptr-pull-up .ptr-arrow {
  15326. visibility: hidden;
  15327. }
  15328. .md .ptr-refreshing .ptr-preloader {
  15329. transform: translate3d(0, 66px, 0);
  15330. }
  15331. .md .ptr-transitioning .ptr-arrow {
  15332. transition: 300ms;
  15333. }
  15334. .md .ptr-pull-up .ptr-arrow {
  15335. transition: 400ms;
  15336. transform: rotate(620deg) !important;
  15337. opacity: 0;
  15338. }
  15339. .md .ptr-transitioning .ptr-preloader,
  15340. .md .ptr-refreshing .ptr-preloader {
  15341. transition-duration: 300ms;
  15342. transition-property: transform, opacity;
  15343. }
  15344. .md .ptr-bottom .ptr-preloader {
  15345. margin-top: 0;
  15346. margin-bottom: calc(-1 * var(--f7-ptr-size) - 4px);
  15347. }
  15348. .md .ptr-bottom.ptr-refreshing .ptr-preloader {
  15349. transform: translate3d(0, -66px, 0);
  15350. }
  15351. .md .ptr-with-navbar-large-transparent .ptr-preloader,
  15352. .md .ptr-with-navbar-transparent .ptr-preloader {
  15353. opacity: 0;
  15354. }
  15355. .md .ptr-with-navbar-large-transparent.ptr-pull-down .ptr-preloader,
  15356. .md .ptr-with-navbar-transparent.ptr-pull-down .ptr-preloader,
  15357. .md .ptr-with-navbar-large-transparent.ptr-pull-up .ptr-preloader,
  15358. .md .ptr-with-navbar-transparent.ptr-pull-up .ptr-preloader,
  15359. .md .ptr-with-navbar-large-transparent.ptr-refreshing .ptr-preloader,
  15360. .md .ptr-with-navbar-transparent.ptr-refreshing .ptr-preloader {
  15361. opacity: 1;
  15362. }
  15363. .md .ptr-with-navbar-large-transparent.ptr-closing .ptr-preloader,
  15364. .md .ptr-with-navbar-transparent.ptr-closing .ptr-preloader {
  15365. opacity: 0;
  15366. transition-duration: 300ms;
  15367. }
  15368. .aurora .ptr-preloader {
  15369. margin-top: calc(-1 * var(--f7-ptr-size));
  15370. width: 100%;
  15371. left: 0;
  15372. }
  15373. .aurora .ptr-arrow {
  15374. position: absolute;
  15375. left: 50%;
  15376. top: 50%;
  15377. background: no-repeat center;
  15378. z-index: 10;
  15379. transform: rotate(0deg) translate3d(0, 0, 0);
  15380. transition-duration: 300ms;
  15381. transition-property: transform, opacity;
  15382. width: 12px;
  15383. height: 20px;
  15384. margin-left: -6px;
  15385. margin-top: -10px;
  15386. visibility: visible;
  15387. color: var(--f7-preloader-color);
  15388. }
  15389. .aurora .ptr-arrow:after {
  15390. font-family: 'framework7-core-icons';
  15391. font-weight: normal;
  15392. font-style: normal;
  15393. line-height: 1;
  15394. letter-spacing: normal;
  15395. text-transform: none;
  15396. white-space: nowrap;
  15397. word-wrap: normal;
  15398. direction: ltr;
  15399. -webkit-font-smoothing: antialiased;
  15400. text-rendering: optimizeLegibility;
  15401. -moz-osx-font-smoothing: grayscale;
  15402. font-feature-settings: "liga";
  15403. text-align: center;
  15404. display: block;
  15405. width: 100%;
  15406. height: 100%;
  15407. font-size: 20px;
  15408. width: 12px;
  15409. height: 20px;
  15410. line-height: 20px;
  15411. font-size: 8px;
  15412. content: 'ptr_arrow_ios';
  15413. }
  15414. .aurora .ptr-content:not(.ptr-refreshing) .ptr-preloader .preloader {
  15415. animation: none;
  15416. }
  15417. .aurora .ptr-transitioning,
  15418. .aurora .ptr-refreshing {
  15419. transition-duration: 300ms;
  15420. transition-property: transform;
  15421. }
  15422. .aurora .ptr-refreshing {
  15423. transform: translate3d(0, var(--f7-ptr-size), 0);
  15424. }
  15425. .aurora .ptr-refreshing .ptr-arrow {
  15426. visibility: hidden;
  15427. }
  15428. .aurora .ptr-refreshing .ptr-preloader .preloader {
  15429. visibility: visible;
  15430. }
  15431. .aurora .ptr-pull-up .ptr-arrow {
  15432. transform: rotate(180deg) translate3d(0, 0, 0);
  15433. }
  15434. .aurora .ptr-no-navbar,
  15435. .aurora .ptr-with-navbar-large-transparent,
  15436. .aurora .ptr-with-navbar-transparent {
  15437. margin-top: calc(-1 * var(--f7-ptr-size));
  15438. height: calc(100% + var(--f7-ptr-size));
  15439. }
  15440. .aurora .ptr-no-navbar .ptr-preloader,
  15441. .aurora .ptr-with-navbar-large-transparent .ptr-preloader,
  15442. .aurora .ptr-with-navbar-transparent .ptr-preloader {
  15443. margin-top: 0;
  15444. }
  15445. .aurora .ptr-bottom .ptr-preloader {
  15446. margin-top: 0;
  15447. margin-bottom: calc(-1 * var(--f7-ptr-size));
  15448. }
  15449. .aurora .ptr-bottom.ptr-transitioning > *,
  15450. .aurora .ptr-bottom.ptr-refreshing > * {
  15451. transition-duration: 300ms;
  15452. transition-property: transform;
  15453. }
  15454. .aurora .ptr-bottom.ptr-refreshing {
  15455. transform: none;
  15456. }
  15457. .aurora .ptr-bottom.ptr-refreshing > * {
  15458. transform: translate3d(0, calc(-1 * var(--f7-ptr-size)), 0);
  15459. }
  15460. .aurora .ptr-bottom .ptr-arrow {
  15461. transform: rotate(180deg) translate3d(0, 0, 0);
  15462. }
  15463. .aurora .ptr-bottom.ptr-pull-up .ptr-arrow {
  15464. transform: rotate(0deg) translate3d(0, 0, 0);
  15465. }
  15466. .aurora .ptr-with-navbar-large-transparent .ptr-preloader .preloader,
  15467. .aurora .ptr-with-navbar-transparent .ptr-preloader .preloader,
  15468. .aurora .ptr-with-navbar-large-transparent .ptr-preloader .ptr-arrow,
  15469. .aurora .ptr-with-navbar-transparent .ptr-preloader .ptr-arrow {
  15470. opacity: 0;
  15471. transition-duration: 300ms;
  15472. transition-property: transform, opacity;
  15473. }
  15474. .aurora .ptr-with-navbar-large-transparent.ptr-pull-down .ptr-preloader .preloader,
  15475. .aurora .ptr-with-navbar-transparent.ptr-pull-down .ptr-preloader .preloader,
  15476. .aurora .ptr-with-navbar-large-transparent.ptr-pull-up .ptr-preloader .preloader,
  15477. .aurora .ptr-with-navbar-transparent.ptr-pull-up .ptr-preloader .preloader,
  15478. .aurora .ptr-with-navbar-large-transparent.ptr-refreshing .ptr-preloader .preloader,
  15479. .aurora .ptr-with-navbar-transparent.ptr-refreshing .ptr-preloader .preloader,
  15480. .aurora .ptr-with-navbar-large-transparent.ptr-pull-down .ptr-preloader .ptr-arrow,
  15481. .aurora .ptr-with-navbar-transparent.ptr-pull-down .ptr-preloader .ptr-arrow,
  15482. .aurora .ptr-with-navbar-large-transparent.ptr-pull-up .ptr-preloader .ptr-arrow,
  15483. .aurora .ptr-with-navbar-transparent.ptr-pull-up .ptr-preloader .ptr-arrow,
  15484. .aurora .ptr-with-navbar-large-transparent.ptr-refreshing .ptr-preloader .ptr-arrow,
  15485. .aurora .ptr-with-navbar-transparent.ptr-refreshing .ptr-preloader .ptr-arrow {
  15486. opacity: 1;
  15487. }
  15488. .aurora .ptr-with-navbar-large-transparent.ptr-closing .ptr-preloader .preloader,
  15489. .aurora .ptr-with-navbar-transparent.ptr-closing .ptr-preloader .preloader,
  15490. .aurora .ptr-with-navbar-large-transparent.ptr-closing .ptr-preloader .ptr-arrow,
  15491. .aurora .ptr-with-navbar-transparent.ptr-closing .ptr-preloader .ptr-arrow {
  15492. opacity: 0;
  15493. transition-duration: 300ms;
  15494. }
  15495. /* === Images Lazy Loading === */
  15496. .lazy-loaded.lazy-fade-in {
  15497. animation: lazyFadeIn 600ms;
  15498. }
  15499. @keyframes lazyFadeIn {
  15500. from {
  15501. opacity: 0;
  15502. }
  15503. to {
  15504. opacity: 1;
  15505. }
  15506. }
  15507. /* === Data Table === */
  15508. :root {
  15509. --f7-table-head-font-size: 12px;
  15510. --f7-table-body-font-size: 14px;
  15511. --f7-table-footer-font-size: 12px;
  15512. --f7-table-input-height: 24px;
  15513. --f7-table-input-font-size: 14px;
  15514. --f7-table-collapsible-cell-padding: 16px;
  15515. --f7-table-link-icon-only-icon-size: 20px;
  15516. --f7-table-sortable-icon-color: #000;
  15517. }
  15518. :root .theme-dark,
  15519. :root.theme-dark {
  15520. --f7-table-cell-border-color: rgba(255, 255, 255, 0.15);
  15521. --f7-table-sortable-icon-color: #fff;
  15522. --f7-table-input-text-color: #fff;
  15523. }
  15524. .ios {
  15525. --f7-table-head-font-weight: 600;
  15526. --f7-table-head-cell-height: 44px;
  15527. --f7-table-head-icon-size: 18px;
  15528. --f7-table-body-cell-height: 44px;
  15529. --f7-table-cell-padding-vertical: 0px;
  15530. --f7-table-cell-padding-horizontal: 16px;
  15531. --f7-table-edge-cell-padding-horizontal: 16px;
  15532. --f7-table-label-cell-padding-horizontal: 16px;
  15533. --f7-table-checkbox-cell-width: 22px;
  15534. /* --f7-table-actions-cell-link-color: var(--f7-theme-color); */
  15535. /* --f7-table-actions-link-color: var(--f7-theme-color); */
  15536. --f7-table-title-font-size: 17px;
  15537. --f7-table-title-font-weight: 600;
  15538. --f7-table-card-header-height: 64px;
  15539. --f7-table-footer-height: 44px;
  15540. --f7-table-head-text-color: rgba(0, 0, 0, 0.45);
  15541. --f7-table-cell-border-color: rgba(0, 0, 0, 0.22);
  15542. --f7-table-selected-row-bg-color: rgba(0, 0, 0, 0.03);
  15543. --f7-table-footer-text-color: rgba(0, 0, 0, 0.45);
  15544. --f7-table-input-text-color: #000;
  15545. }
  15546. .ios .theme-dark,
  15547. .ios.theme-dark {
  15548. --f7-table-head-text-color: rgba(255, 255, 255, 0.55);
  15549. --f7-table-footer-text-color: rgba(255, 255, 255, 0.55);
  15550. --f7-table-selected-row-bg-color: rgba(255, 255, 255, 0.08);
  15551. }
  15552. .md {
  15553. --f7-table-head-font-weight: 500;
  15554. --f7-table-head-cell-height: 56px;
  15555. --f7-table-head-icon-size: 16px;
  15556. --f7-table-body-cell-height: 48px;
  15557. --f7-table-cell-padding-vertical: 0px;
  15558. --f7-table-cell-padding-horizontal: 28px;
  15559. --f7-table-edge-cell-padding-horizontal: 24px;
  15560. --f7-table-label-cell-padding-horizontal: 24px;
  15561. --f7-table-checkbox-cell-width: 18px;
  15562. --f7-table-title-font-size: 20px;
  15563. --f7-table-title-font-weight: 400;
  15564. --f7-table-card-header-height: 64px;
  15565. --f7-table-footer-height: 56px;
  15566. --f7-table-head-text-color: rgba(0, 0, 0, 0.54);
  15567. --f7-table-cell-border-color: rgba(0, 0, 0, 0.12);
  15568. --f7-table-actions-cell-link-color: rgba(0, 0, 0, 0.54);
  15569. --f7-table-selected-row-bg-color: #f5f5f5;
  15570. --f7-table-actions-link-color: rgba(0, 0, 0, 0.54);
  15571. --f7-table-footer-text-color: rgba(0, 0, 0, 0.54);
  15572. --f7-table-input-text-color: #212121;
  15573. }
  15574. .md .theme-dark,
  15575. .md.theme-dark {
  15576. --f7-table-head-text-color: rgba(255, 255, 255, 0.54);
  15577. --f7-table-footer-text-color: rgba(255, 255, 255, 0.54);
  15578. --f7-table-selected-row-bg-color: rgba(255, 255, 255, 0.05);
  15579. --f7-table-actions-cell-link-color: rgba(255, 255, 255, 0.54);
  15580. --f7-table-actions-link-color: rgba(255, 255, 255, 0.54);
  15581. }
  15582. .aurora {
  15583. --f7-table-link-icon-only-icon-size: 18px;
  15584. --f7-table-head-font-weight: 400;
  15585. --f7-table-head-cell-height: 32px;
  15586. --f7-table-head-icon-size: 18px;
  15587. --f7-table-body-cell-height: 32px;
  15588. --f7-table-cell-padding-vertical: 5px;
  15589. --f7-table-cell-padding-horizontal: 10px;
  15590. --f7-table-edge-cell-padding-horizontal: 16px;
  15591. --f7-table-label-cell-padding-horizontal: 16px;
  15592. --f7-table-checkbox-cell-width: 22px;
  15593. /* --f7-table-actions-cell-link-color: var(--f7-theme-color); */
  15594. /* --f7-table-actions-link-color: var(--f7-theme-color); */
  15595. --f7-table-title-font-size: 14px;
  15596. --f7-table-title-font-weight: 600;
  15597. --f7-table-card-header-height: 42px;
  15598. --f7-table-footer-height: 32px;
  15599. --f7-table-head-text-color: rgba(0, 0, 0, 0.6);
  15600. --f7-table-cell-border-color: rgba(0, 0, 0, 0.12);
  15601. --f7-table-selected-row-bg-color: rgba(0, 0, 0, 0.03);
  15602. --f7-table-footer-text-color: rgba(0, 0, 0, 0.5);
  15603. --f7-table-input-text-color: #000;
  15604. }
  15605. .aurora .theme-dark,
  15606. .aurora.theme-dark {
  15607. --f7-table-selected-row-bg-color: rgba(255, 255, 255, 0.03);
  15608. --f7-table-head-text-color: rgba(255, 255, 255, 0.54);
  15609. --f7-table-footer-text-color: rgba(255, 255, 255, 0.54);
  15610. }
  15611. .data-table {
  15612. overflow-x: auto;
  15613. }
  15614. .data-table table,
  15615. table.data-table {
  15616. width: 100%;
  15617. border: none;
  15618. padding: 0;
  15619. margin: 0;
  15620. border-collapse: collapse;
  15621. text-align: right;
  15622. }
  15623. .data-table thead th,
  15624. .data-table thead td {
  15625. font-size: var(--f7-table-head-font-size);
  15626. font-weight: var(--f7-table-head-font-weight);
  15627. overflow: hidden;
  15628. white-space: nowrap;
  15629. text-overflow: ellipsis;
  15630. line-height: 16px;
  15631. height: var(--f7-table-head-cell-height);
  15632. }
  15633. .data-table thead th:not(.sortable-cell-active),
  15634. .data-table thead td:not(.sortable-cell-active) {
  15635. color: var(--f7-table-head-text-color);
  15636. }
  15637. .data-table thead i.icon,
  15638. .data-table thead i.f7-icons,
  15639. .data-table thead i.material-icons {
  15640. vertical-align: top;
  15641. font-size: var(--f7-table-head-icon-size);
  15642. }
  15643. .data-table tbody {
  15644. font-size: var(--f7-table-body-font-size);
  15645. }
  15646. .data-table tbody th,
  15647. .data-table tbody td {
  15648. height: var(--f7-table-body-cell-height);
  15649. }
  15650. .data-table tbody tr.data-table-row-selected,
  15651. .device-desktop .data-table tbody tr:hover {
  15652. background: var(--f7-table-selected-row-bg-color);
  15653. }
  15654. .data-table tbody td:before,
  15655. .data-table tbody th:before {
  15656. content: '';
  15657. position: absolute;
  15658. background-color: var(--f7-table-cell-border-color);
  15659. display: block;
  15660. z-index: 15;
  15661. top: 0;
  15662. right: auto;
  15663. bottom: auto;
  15664. left: 0;
  15665. height: 1px;
  15666. width: 100%;
  15667. transform-origin: 50% 0%;
  15668. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  15669. }
  15670. .data-table th,
  15671. .data-table td {
  15672. --f7-table-cell-padding-left: var(--f7-table-cell-padding-horizontal);
  15673. --f7-table-cell-padding-right: var(--f7-table-cell-padding-horizontal);
  15674. padding-top: var(--f7-table-cell-padding-vertical);
  15675. padding-bottom: var(--f7-table-cell-padding-vertical);
  15676. padding-left: var(--f7-table-cell-padding-left);
  15677. padding-right: var(--f7-table-cell-padding-right);
  15678. position: relative;
  15679. box-sizing: border-box;
  15680. }
  15681. .data-table th:first-child,
  15682. .data-table td:first-child {
  15683. --f7-table-cell-padding-right: var(--f7-table-edge-cell-padding-horizontal);
  15684. }
  15685. .data-table th:last-child,
  15686. .data-table td:last-child {
  15687. --f7-table-cell-padding-left: var(--f7-table-edge-cell-padding-horizontal);
  15688. }
  15689. .data-table th.label-cell,
  15690. .data-table td.label-cell {
  15691. --f7-table-cell-padding-left: var(--f7-table-label-cell-padding-horizontal);
  15692. --f7-table-cell-padding-right: var(--f7-table-label-cell-padding-horizontal);
  15693. }
  15694. .data-table th.numeric-cell,
  15695. .data-table td.numeric-cell {
  15696. text-align: left;
  15697. }
  15698. .data-table th.checkbox-cell,
  15699. .data-table td.checkbox-cell {
  15700. overflow: visible;
  15701. width: var(--f7-table-checkbox-cell-width);
  15702. }
  15703. .data-table th.checkbox-cell label + span,
  15704. .data-table td.checkbox-cell label + span {
  15705. margin-right: 8px;
  15706. }
  15707. .data-table th.checkbox-cell:first-child,
  15708. .data-table td.checkbox-cell:first-child {
  15709. padding-left: calc(var(--f7-table-cell-padding-left) / 2);
  15710. }
  15711. .data-table th.checkbox-cell:first-child + td,
  15712. .data-table td.checkbox-cell:first-child + td,
  15713. .data-table th.checkbox-cell:first-child + th,
  15714. .data-table td.checkbox-cell:first-child + th {
  15715. padding-right: calc(var(--f7-table-cell-padding-right) / 2);
  15716. }
  15717. .data-table th.checkbox-cell:last-child,
  15718. .data-table td.checkbox-cell:last-child {
  15719. padding-right: calc(var(--f7-table-cell-padding-right) / 2);
  15720. }
  15721. .data-table th.actions-cell,
  15722. .data-table td.actions-cell {
  15723. text-align: left;
  15724. white-space: nowrap;
  15725. }
  15726. .data-table th.actions-cell a.link,
  15727. .data-table td.actions-cell a.link {
  15728. color: var(--f7-table-actions-cell-link-color, var(--f7-theme-color));
  15729. }
  15730. .data-table th a.icon-only,
  15731. .data-table td a.icon-only,
  15732. .card .data-table th a.icon-only,
  15733. .card .data-table td a.icon-only,
  15734. .card.data-table th a.icon-only,
  15735. .card.data-table td a.icon-only {
  15736. display: inline-block;
  15737. vertical-align: middle;
  15738. text-align: center;
  15739. font-size: 0;
  15740. min-width: 0;
  15741. }
  15742. .data-table th a.icon-only i,
  15743. .data-table td a.icon-only i,
  15744. .card .data-table th a.icon-only i,
  15745. .card .data-table td a.icon-only i,
  15746. .card.data-table th a.icon-only i,
  15747. .card.data-table td a.icon-only i {
  15748. font-size: var(--f7-table-link-icon-only-icon-size);
  15749. vertical-align: middle;
  15750. }
  15751. .data-table .sortable-cell:not(.input-cell) {
  15752. cursor: pointer;
  15753. position: relative;
  15754. }
  15755. .data-table .sortable-cell.input-cell .table-head-label {
  15756. cursor: pointer;
  15757. position: relative;
  15758. }
  15759. .data-table .sortable-cell:not(.numeric-cell):not(.input-cell):after,
  15760. .data-table .sortable-cell.numeric-cell:not(.input-cell):before,
  15761. .data-table .sortable-cell:not(.numeric-cell).input-cell > .table-head-label:after,
  15762. .data-table .sortable-cell.numeric-cell.input-cell > .table-head-label:before {
  15763. content: 'arrow_bottom_md';
  15764. font-family: 'framework7-core-icons';
  15765. font-weight: normal;
  15766. font-style: normal;
  15767. line-height: 1;
  15768. letter-spacing: normal;
  15769. text-transform: none;
  15770. white-space: nowrap;
  15771. word-wrap: normal;
  15772. direction: ltr;
  15773. -webkit-font-smoothing: antialiased;
  15774. text-rendering: optimizeLegibility;
  15775. -moz-osx-font-smoothing: grayscale;
  15776. font-feature-settings: "liga";
  15777. text-align: center;
  15778. display: block;
  15779. width: 100%;
  15780. height: 100%;
  15781. font-size: 20px;
  15782. display: inline-block;
  15783. vertical-align: top;
  15784. width: 16px;
  15785. height: 16px;
  15786. color: var(--f7-table-sortable-icon-color);
  15787. font-size: 13px;
  15788. line-height: 16px;
  15789. transition-duration: 300ms;
  15790. transform: rotate(0);
  15791. opacity: 0;
  15792. }
  15793. .device-desktop .data-table .sortable-cell:not(.sortable-cell-active):hover:after,
  15794. .device-desktop .data-table .sortable-cell:not(.sortable-cell-active) .table-head-label:hover:after,
  15795. .device-desktop .data-table .sortable-cell:not(.sortable-cell-active):hover:before,
  15796. .device-desktop .data-table .sortable-cell:not(.sortable-cell-active) .table-head-label:hover:before {
  15797. opacity: 0.54;
  15798. }
  15799. .data-table .sortable-cell.sortable-cell-active:after,
  15800. .data-table .sortable-cell.sortable-cell-active .table-head-label:after,
  15801. .data-table .sortable-cell.sortable-cell-active:before,
  15802. .data-table .sortable-cell.sortable-cell-active .table-head-label:before {
  15803. opacity: 0.87 !important;
  15804. }
  15805. .data-table .sortable-cell.sortable-desc:after,
  15806. .data-table .sortable-cell.sortable-desc:after,
  15807. .data-table .table-head-label:after,
  15808. .data-table .sortable-cell.sortable-desc:before,
  15809. .data-table .sortable-cell.sortable-desc:before,
  15810. .data-table .table-head-label:before {
  15811. transform: rotate(180deg) !important;
  15812. }
  15813. .data-table.card .card-header,
  15814. .card .data-table .card-header,
  15815. .data-table.card .card-footer,
  15816. .card .data-table .card-footer {
  15817. padding-left: var(--f7-table-edge-cell-padding-horizontal);
  15818. padding-right: var(--f7-table-edge-cell-padding-horizontal);
  15819. }
  15820. .data-table.card .card-header,
  15821. .card .data-table .card-header {
  15822. min-height: var(--f7-table-card-header-height);
  15823. }
  15824. .data-table.card .card-content,
  15825. .card .data-table .card-content {
  15826. overflow-x: auto;
  15827. }
  15828. .data-table.card .card-footer,
  15829. .card .data-table .card-footer {
  15830. min-height: var(--f7-table-footer-height);
  15831. }
  15832. .data-table .data-table-title {
  15833. font-size: var(--f7-table-title-font-size);
  15834. font-weight: var(--f7-table-title-font-weight);
  15835. }
  15836. .data-table .data-table-links,
  15837. .data-table .data-table-actions {
  15838. display: flex;
  15839. }
  15840. .data-table .data-table-links .button {
  15841. min-width: 64px;
  15842. }
  15843. .data-table .data-table-actions {
  15844. margin-right: auto;
  15845. align-items: center;
  15846. }
  15847. .data-table .data-table-actions a.link {
  15848. color: var(--f7-table-actions-link-color, var(--f7-theme-color));
  15849. min-width: 0;
  15850. }
  15851. .data-table .data-table-actions a.link.icon-only {
  15852. line-height: 1;
  15853. justify-content: center;
  15854. padding: 0;
  15855. }
  15856. .data-table .data-table-header,
  15857. .data-table .data-table-header-selected {
  15858. display: flex;
  15859. justify-content: space-between;
  15860. align-items: center;
  15861. width: 100%;
  15862. }
  15863. .data-table .card-header > .data-table-header,
  15864. .data-table .card-header > .data-table-header-selected {
  15865. padding-top: var(--f7-card-header-padding-vertical);
  15866. padding-bottom: var(--f7-card-header-padding-vertical);
  15867. height: 100%;
  15868. padding-right: var(--f7-table-edge-cell-padding-horizontal);
  15869. padding-left: var(--f7-table-edge-cell-padding-horizontal);
  15870. margin-right: calc(-1 * var(--f7-table-edge-cell-padding-horizontal));
  15871. margin-left: calc(-1 * var(--f7-table-edge-cell-padding-horizontal));
  15872. }
  15873. .data-table .data-table-header-selected {
  15874. background: rgba(var(--f7-theme-color-rgb), 0.1);
  15875. display: none;
  15876. }
  15877. .data-table.data-table-has-checked .data-table-header {
  15878. display: none;
  15879. }
  15880. .data-table.data-table-has-checked .data-table-header-selected {
  15881. display: flex;
  15882. }
  15883. .data-table .data-table-title-selected {
  15884. font-size: 14px;
  15885. color: var(--f7-theme-color);
  15886. }
  15887. .data-table .data-table-footer {
  15888. display: flex;
  15889. align-items: center;
  15890. box-sizing: border-box;
  15891. position: relative;
  15892. font-size: var(--f7-table-footer-font-size);
  15893. overflow: hidden;
  15894. min-height: var(--f7-table-footer-height);
  15895. color: var(--f7-table-footer-text-color);
  15896. justify-content: flex-start;
  15897. }
  15898. .data-table .data-table-footer:before {
  15899. content: '';
  15900. position: absolute;
  15901. background-color: var(--f7-table-cell-border-color);
  15902. display: block;
  15903. z-index: 15;
  15904. top: 0;
  15905. right: auto;
  15906. bottom: auto;
  15907. left: 0;
  15908. height: 1px;
  15909. width: 100%;
  15910. transform-origin: 50% 0%;
  15911. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  15912. }
  15913. .data-table .data-table-rows-select,
  15914. .data-table .data-table-pagination {
  15915. display: flex;
  15916. align-items: center;
  15917. }
  15918. .data-table .input-cell {
  15919. padding-top: 8px;
  15920. padding-bottom: 8px;
  15921. height: auto;
  15922. vertical-align: top;
  15923. }
  15924. .data-table .input-cell .table-head-label + .input {
  15925. margin-top: 4px;
  15926. }
  15927. .data-table .input-cell .input {
  15928. height: var(--f7-table-input-height);
  15929. }
  15930. .data-table .input-cell .input input,
  15931. .data-table .input-cell .input textarea,
  15932. .data-table .input-cell .input select {
  15933. height: var(--f7-table-input-height);
  15934. color: var(--f7-table-input-text-color);
  15935. font-size: var(--f7-table-input-font-size);
  15936. }
  15937. @media (max-width: 480px) and (orientation: portrait) {
  15938. .data-table.data-table-collapsible thead {
  15939. display: none;
  15940. }
  15941. .data-table.data-table-collapsible tbody,
  15942. .data-table.data-table-collapsible tr,
  15943. .data-table.data-table-collapsible td {
  15944. display: block;
  15945. }
  15946. .data-table.data-table-collapsible tr {
  15947. position: relative;
  15948. }
  15949. .data-table.data-table-collapsible tr:before {
  15950. content: '';
  15951. position: absolute;
  15952. background-color: var(--f7-table-cell-border-color);
  15953. display: block;
  15954. z-index: 15;
  15955. top: 0;
  15956. right: auto;
  15957. bottom: auto;
  15958. left: 0;
  15959. height: 1px;
  15960. width: 100%;
  15961. transform-origin: 50% 0%;
  15962. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  15963. }
  15964. .data-table.data-table-collapsible tr:hover {
  15965. background-color: inherit;
  15966. }
  15967. .data-table.data-table-collapsible td {
  15968. --f7-table-cell-padding-left: var(--f7-table-collapsible-cell-padding);
  15969. --f7-table-cell-padding-right: var(--f7-table-collapsible-cell-padding);
  15970. height: auto;
  15971. min-height: var(--f7-table-body-cell-height);
  15972. display: flex;
  15973. align-content: center;
  15974. align-items: center;
  15975. justify-content: flex-start;
  15976. text-align: right;
  15977. }
  15978. .data-table.data-table-collapsible td:before {
  15979. display: none !important;
  15980. }
  15981. .data-table.data-table-collapsible td:not(.checkbox-cell):before {
  15982. width: 40%;
  15983. display: block !important;
  15984. content: attr(data-collapsible-title);
  15985. position: relative;
  15986. height: auto;
  15987. background: none !important;
  15988. transform: none !important;
  15989. font-size: var(--f7-table-head-font-size);
  15990. font-weight: var(--f7-table-head-font-weight);
  15991. color: var(--f7-table-head-text-color);
  15992. margin-left: 16px;
  15993. flex-shrink: 0;
  15994. }
  15995. .data-table.data-table-collapsible td.checkbox-cell {
  15996. position: absolute;
  15997. top: 0;
  15998. right: 0;
  15999. }
  16000. .data-table.data-table-collapsible td.checkbox-cell + td {
  16001. padding-right: 16px;
  16002. }
  16003. .data-table.data-table-collapsible td.checkbox-cell ~ td {
  16004. margin-right: 32px;
  16005. }
  16006. }
  16007. .data-table .xsmall-only,
  16008. .data-table .xsmall-landscape-only {
  16009. display: none;
  16010. }
  16011. @media (min-width: 480px) {
  16012. .data-table .xsmall-only {
  16013. display: table-cell;
  16014. }
  16015. }
  16016. @media (min-width: 480px) and (orientation: landscape) {
  16017. .data-table .xsmall-landscape-only {
  16018. display: table-cell;
  16019. }
  16020. }
  16021. .data-table .small-only,
  16022. .data-table .small-landscape-only {
  16023. display: none;
  16024. }
  16025. @media (min-width: 568px) {
  16026. .data-table .small-only {
  16027. display: table-cell;
  16028. }
  16029. }
  16030. @media (min-width: 568px) and (orientation: landscape) {
  16031. .data-table .small-landscape-only {
  16032. display: table-cell;
  16033. }
  16034. }
  16035. .data-table .medium-only,
  16036. .data-table .medium-landscape-only {
  16037. display: none;
  16038. }
  16039. @media (min-width: 768px) {
  16040. .data-table .medium-only {
  16041. display: table-cell;
  16042. }
  16043. }
  16044. @media (min-width: 768px) and (orientation: landscape) {
  16045. .data-table .medium-landscape-only {
  16046. display: table-cell;
  16047. }
  16048. }
  16049. .data-table .large-only,
  16050. .data-table .large-landscape-only {
  16051. display: none;
  16052. }
  16053. @media (min-width: 1024px) {
  16054. .data-table .large-only {
  16055. display: table-cell;
  16056. }
  16057. }
  16058. @media (min-width: 1024px) and (orientation: landscape) {
  16059. .data-table .large-landscape-only {
  16060. display: table-cell;
  16061. }
  16062. }
  16063. .data-table .xlarge-only,
  16064. .data-table .xlarge-landscape-only {
  16065. display: none;
  16066. }
  16067. @media (min-width: 1200px) {
  16068. .data-table .xlarge-only {
  16069. display: table-cell;
  16070. }
  16071. }
  16072. @media (min-width: 1200px) and (orientation: landscape) {
  16073. .data-table .xlarge-landscape-only {
  16074. display: table-cell;
  16075. }
  16076. }
  16077. .ios .data-table th.actions-cell a.link + a.link,
  16078. .ios .data-table td.actions-cell a.link + a.link {
  16079. margin-right: 16px;
  16080. }
  16081. .ios .sortable-cell:not(.numeric-cell):after {
  16082. margin-right: 5px;
  16083. }
  16084. .ios .sortable-cell.numeric-cell:before {
  16085. margin-left: 5px;
  16086. }
  16087. .ios .data-table-links a.link + a.link,
  16088. .ios .data-table-actions a.link + a.link,
  16089. .ios .data-table-links .button + .button,
  16090. .ios .data-table-actions .button + .button {
  16091. margin-right: 16px;
  16092. }
  16093. .ios .data-table-actions a.link.icon-only {
  16094. width: 44px;
  16095. height: 44px;
  16096. }
  16097. .ios .data-table-rows-select a.link,
  16098. .ios .data-table-pagination a.link {
  16099. width: 44px;
  16100. height: 44px;
  16101. }
  16102. .ios .data-table-rows-select + .data-table-pagination {
  16103. margin-right: 30px;
  16104. }
  16105. .ios .data-table-rows-select .input {
  16106. margin-right: 20px;
  16107. }
  16108. .ios .data-table-pagination-label {
  16109. margin-left: 16px;
  16110. }
  16111. .md .data-table th.actions-cell a.link + a.link,
  16112. .md .data-table td.actions-cell a.link + a.link {
  16113. margin-right: 24px;
  16114. }
  16115. .md .data-table th.actions-cell a.icon-only,
  16116. .md .data-table td.actions-cell a.icon-only {
  16117. width: 24px;
  16118. height: 24px;
  16119. line-height: 24px;
  16120. }
  16121. .md .sortable-cell:not(.numeric-cell):after {
  16122. margin-right: 8px;
  16123. }
  16124. .md .sortable-cell.numeric-cell:before {
  16125. margin-left: 8px;
  16126. }
  16127. .md .data-table-links a.link + a.link,
  16128. .md .data-table-actions a.link + a.link,
  16129. .md .data-table-links .button + .button,
  16130. .md .data-table-actions .button + .button {
  16131. margin-right: 24px;
  16132. }
  16133. .md .data-table-actions a.link.icon-only {
  16134. width: 24px;
  16135. height: 24px;
  16136. overflow: visible;
  16137. }
  16138. .md .data-table-actions a.link.icon-only.active-state {
  16139. background: none;
  16140. }
  16141. .md .data-table-rows-select a.link,
  16142. .md .data-table-pagination a.link {
  16143. width: 48px;
  16144. height: 48px;
  16145. }
  16146. .md .data-table-rows-select a.link:before,
  16147. .md .data-table-pagination a.link:before {
  16148. content: '';
  16149. width: 152%;
  16150. height: 152%;
  16151. position: absolute;
  16152. left: -26%;
  16153. top: -26%;
  16154. background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
  16155. background-repeat: no-repeat;
  16156. background-position: center;
  16157. background-size: 100% 100%;
  16158. opacity: 0;
  16159. pointer-events: none;
  16160. transition-duration: 600ms;
  16161. }
  16162. .md .data-table-rows-select a.link.active-state:before,
  16163. .md .data-table-pagination a.link.active-state:before {
  16164. opacity: 1;
  16165. transition-duration: 150ms;
  16166. }
  16167. .md .data-table-rows-select + .data-table-pagination {
  16168. margin-right: 32px;
  16169. }
  16170. .md .data-table-rows-select .input {
  16171. margin-right: 24px;
  16172. }
  16173. .md .data-table-pagination-label {
  16174. margin-left: 20px;
  16175. }
  16176. .md .input-cell .input-clear-button {
  16177. transform: scale(0.8);
  16178. }
  16179. .aurora .data-table th.actions-cell a.link + a.link,
  16180. .aurora .data-table td.actions-cell a.link + a.link {
  16181. margin-right: 10px;
  16182. }
  16183. .aurora .sortable-cell:not(.numeric-cell):after {
  16184. margin-right: 5px;
  16185. }
  16186. .aurora .sortable-cell.numeric-cell:before {
  16187. margin-left: 5px;
  16188. }
  16189. .aurora .data-table-links a.link + a.link,
  16190. .aurora .data-table-actions a.link + a.link,
  16191. .aurora .data-table-links .button + .button,
  16192. .aurora .data-table-actions .button + .button {
  16193. margin-right: 10px;
  16194. }
  16195. .aurora .data-table-rows-select a.link,
  16196. .aurora .data-table-pagination a.link {
  16197. width: 32px;
  16198. height: 32px;
  16199. }
  16200. .aurora .data-table-rows-select + .data-table-pagination {
  16201. margin-right: 16px;
  16202. }
  16203. .aurora .data-table-rows-select .input {
  16204. margin-right: 10px;
  16205. }
  16206. .aurora .data-table-pagination-label {
  16207. margin-left: 10px;
  16208. }
  16209. /* === FAB === */
  16210. :root {
  16211. --f7-fab-margin: 16px;
  16212. --f7-fab-text-color: #fff;
  16213. --f7-fab-extended-text-font-size: 14px;
  16214. --f7-fab-extended-text-padding: 0 20px;
  16215. --f7-fab-label-bg-color: #fff;
  16216. --f7-fab-label-text-color: #333;
  16217. --f7-fab-label-border-radius: 4px;
  16218. --f7-fab-label-padding: 4px 12px;
  16219. --f7-fab-button-size: 40px;
  16220. /* --f7-fab-pressed-bg-color: var(--f7-theme-color-shade); */
  16221. }
  16222. .ios {
  16223. --f7-fab-size: 50px;
  16224. --f7-fab-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
  16225. --f7-fab-extended-size: 50px;
  16226. --f7-fab-extended-text-font-weight: 600;
  16227. --f7-fab-extended-text-letter-spacing: 0;
  16228. --f7-fab-label-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
  16229. --f7-fab-label-font-size: inherit;
  16230. }
  16231. .md {
  16232. --f7-fab-size: 56px;
  16233. --f7-fab-box-shadow: var(--f7-elevation-6);
  16234. --f7-fab-extended-size: 48px;
  16235. --f7-fab-extended-text-font-weight: 500;
  16236. --f7-fab-extended-text-letter-spacing: 0.03em;
  16237. --f7-fab-label-box-shadow: var(--f7-elevation-3);
  16238. --f7-fab-label-font-size: inherit;
  16239. }
  16240. .aurora {
  16241. --f7-fab-size: 40px;
  16242. --f7-fab-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
  16243. --f7-fab-extended-size: 38px;
  16244. --f7-fab-extended-text-font-weight: 500;
  16245. --f7-fab-extended-text-letter-spacing: 0;
  16246. --f7-fab-label-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
  16247. --f7-fab-label-font-size: 12px;
  16248. }
  16249. .fab-backdrop {
  16250. z-index: 1400;
  16251. }
  16252. .fab {
  16253. position: absolute;
  16254. z-index: 1500;
  16255. }
  16256. .fab a {
  16257. --f7-touch-ripple-color: var(--f7-touch-ripple-white);
  16258. }
  16259. .fab-left-top,
  16260. .fab-left-center,
  16261. .fab-left-bottom {
  16262. left: calc(var(--f7-fab-margin) + var(--f7-safe-area-left));
  16263. }
  16264. .fab-right-top,
  16265. .fab-right-center,
  16266. .fab-right-bottom {
  16267. right: calc(var(--f7-fab-margin) + var(--f7-safe-area-right));
  16268. }
  16269. .fab-left-top,
  16270. .fab-center-top,
  16271. .fab-right-top {
  16272. top: var(--f7-fab-margin);
  16273. }
  16274. .fab-left-bottom,
  16275. .fab-center-bottom,
  16276. .fab-right-bottom {
  16277. bottom: calc(var(--f7-fab-margin) + var(--f7-safe-area-bottom));
  16278. }
  16279. .fab-center-top,
  16280. .fab-center-center,
  16281. .fab-center-bottom {
  16282. left: 50%;
  16283. transform: translateX(-50%);
  16284. }
  16285. .fab-left-center,
  16286. .fab-center-center,
  16287. .fab-right-center {
  16288. top: 50%;
  16289. transform: translateY(-50%);
  16290. }
  16291. .fab-center-center {
  16292. top: 50%;
  16293. left: 50%;
  16294. transform: translateX(-50%) translateY(-50%);
  16295. }
  16296. .fab > a,
  16297. .fab-buttons a {
  16298. background-color: var(--f7-fab-bg-color, var(--f7-theme-color));
  16299. width: var(--f7-fab-size);
  16300. height: var(--f7-fab-size);
  16301. box-shadow: var(--f7-fab-box-shadow);
  16302. border-radius: calc(var(--f7-fab-size) / 2);
  16303. position: relative;
  16304. transition-duration: 300ms;
  16305. display: flex;
  16306. align-items: center;
  16307. justify-content: center;
  16308. overflow: hidden;
  16309. z-index: 1;
  16310. color: var(--f7-fab-text-color);
  16311. }
  16312. .fab > a.active-state,
  16313. .fab-buttons a.active-state {
  16314. background-color: var(--f7-fab-pressed-bg-color, var(--f7-theme-color-shade));
  16315. }
  16316. .fab > a i {
  16317. position: absolute;
  16318. left: 50%;
  16319. top: 50%;
  16320. transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
  16321. transition: 300ms;
  16322. }
  16323. .fab > a i + i {
  16324. transform: translate3d(-50%, -50%, 0) rotate(-90deg) scale(0.5);
  16325. opacity: 0;
  16326. }
  16327. .fab-buttons a {
  16328. border-radius: calc(var(--f7-fab-button-size) / 2);
  16329. width: var(--f7-fab-button-size);
  16330. height: var(--f7-fab-button-size);
  16331. }
  16332. .fab-buttons {
  16333. display: flex;
  16334. visibility: hidden;
  16335. pointer-events: none;
  16336. position: absolute;
  16337. }
  16338. .fab-buttons a {
  16339. opacity: 0;
  16340. }
  16341. .fab-opened:not(.fab-morph) > a i {
  16342. transform: translate3d(-50%, -50%, 0) rotate(90deg) scale(0.5);
  16343. opacity: 0;
  16344. }
  16345. .fab-opened:not(.fab-morph) > a i + i {
  16346. transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
  16347. opacity: 1;
  16348. }
  16349. .fab-opened .fab-buttons {
  16350. visibility: visible;
  16351. pointer-events: auto;
  16352. }
  16353. .fab-opened .fab-buttons a {
  16354. opacity: 1;
  16355. transform: translate3d(0, 0px, 0) scale(1) !important;
  16356. }
  16357. .fab-opened .fab-buttons a:nth-child(2) {
  16358. transition-delay: 50ms;
  16359. }
  16360. .fab-opened .fab-buttons a:nth-child(3) {
  16361. transition-delay: 100ms;
  16362. }
  16363. .fab-opened .fab-buttons a:nth-child(4) {
  16364. transition-delay: 150ms;
  16365. }
  16366. .fab-opened .fab-buttons a:nth-child(5) {
  16367. transition-delay: 200ms;
  16368. }
  16369. .fab-opened .fab-buttons a:nth-child(6) {
  16370. transition-delay: 250ms;
  16371. }
  16372. .fab-buttons-top,
  16373. .fab-buttons-bottom {
  16374. left: 50%;
  16375. width: var(--f7-fab-button-size);
  16376. margin-left: calc(-1 * var(--f7-fab-button-size) / 2);
  16377. }
  16378. .fab-buttons-top {
  16379. bottom: 100%;
  16380. margin-bottom: 16px;
  16381. flex-direction: column-reverse;
  16382. }
  16383. .fab-buttons-top a {
  16384. transform: translate3d(0, 8px, 0) scale(0.3);
  16385. transform-origin: center bottom;
  16386. }
  16387. .fab-buttons-top a + a {
  16388. margin-bottom: 16px;
  16389. }
  16390. .fab-buttons-bottom {
  16391. top: 100%;
  16392. margin-top: 16px;
  16393. flex-direction: column;
  16394. }
  16395. .fab-buttons-bottom a {
  16396. transform: translate3d(0, -8px, 0) scale(0.3);
  16397. transform-origin: center top;
  16398. }
  16399. .fab-buttons-bottom a + a {
  16400. margin-top: 16px;
  16401. }
  16402. .fab-buttons-left,
  16403. .fab-buttons-right {
  16404. top: 50%;
  16405. height: var(--f7-fab-button-size);
  16406. margin-top: calc(-1 * var(--f7-fab-button-size) / 2);
  16407. }
  16408. .fab-buttons-left {
  16409. right: 100%;
  16410. margin-right: 16px;
  16411. }
  16412. .fab-buttons-left a {
  16413. transform: translate3d(8px, 0px, 0) scale(0.3);
  16414. transform-origin: right center;
  16415. }
  16416. .fab-buttons-left a + a {
  16417. margin-right: 16px;
  16418. }
  16419. .fab-buttons-right {
  16420. left: 100%;
  16421. margin-left: 16px;
  16422. flex-direction: row-reverse;
  16423. }
  16424. .fab-buttons-right a {
  16425. transform: translate3d(-8px, 0, 0) scale(0.3);
  16426. transform-origin: left center;
  16427. }
  16428. .fab-buttons-right a + a {
  16429. margin-left: 16px;
  16430. }
  16431. .fab-buttons-center {
  16432. left: 0%;
  16433. top: 0%;
  16434. width: 100%;
  16435. height: 100%;
  16436. }
  16437. .fab-buttons-center a {
  16438. position: absolute;
  16439. }
  16440. .fab-buttons-center a:nth-child(1) {
  16441. left: 50%;
  16442. margin-left: calc(-1 * var(--f7-fab-button-size) / 2);
  16443. bottom: 100%;
  16444. margin-bottom: 16px;
  16445. transform: translateY(-8px) scale(0.3);
  16446. transform-origin: center bottom;
  16447. }
  16448. .fab-buttons-center a:nth-child(2) {
  16449. left: 100%;
  16450. margin-top: calc(-1 * var(--f7-fab-button-size) / 2);
  16451. top: 50%;
  16452. margin-left: 16px;
  16453. transform: translateX(-8px) scale(0.3);
  16454. transform-origin: left center;
  16455. }
  16456. .fab-buttons-center a:nth-child(3) {
  16457. left: 50%;
  16458. margin-left: calc(-1 * var(--f7-fab-button-size) / 2);
  16459. top: 100%;
  16460. margin-top: 16px;
  16461. transform: translateY(8px) scale(0.3);
  16462. transform-origin: center top;
  16463. }
  16464. .fab-buttons-center a:nth-child(4) {
  16465. right: 100%;
  16466. margin-top: calc(-1 * var(--f7-fab-button-size) / 2);
  16467. top: 50%;
  16468. margin-right: 16px;
  16469. transform: translateX(8px) scale(0.3);
  16470. transform-origin: right center;
  16471. }
  16472. .fab-morph {
  16473. border-radius: calc(var(--f7-fab-size) / 2);
  16474. background: var(--f7-fab-bg-color, var(--f7-theme-color));
  16475. box-shadow: var(--f7-fab-box-shadow);
  16476. }
  16477. .fab-morph > a {
  16478. box-shadow: none;
  16479. background: none !important;
  16480. }
  16481. .fab-opened.fab-morph > a i {
  16482. opacity: 0;
  16483. }
  16484. .fab-morph,
  16485. .fab-morph > a,
  16486. .fab-morph-target {
  16487. transition-duration: 250ms;
  16488. }
  16489. .fab-morph-target:not(.fab-morph-target-visible) {
  16490. display: none;
  16491. }
  16492. .fab-extended {
  16493. width: auto;
  16494. min-width: var(--f7-fab-extended-size);
  16495. }
  16496. .fab-extended > a {
  16497. width: 100%;
  16498. height: var(--f7-fab-extended-size);
  16499. }
  16500. .fab-extended > a i {
  16501. left: calc(var(--f7-fab-extended-size) / 2);
  16502. }
  16503. .fab-extended i ~ .fab-text {
  16504. padding-left: var(--f7-fab-extended-size);
  16505. }
  16506. .fab-extended > a {
  16507. width: 100% !important;
  16508. }
  16509. .fab-text {
  16510. box-sizing: border-box;
  16511. font-size: var(--f7-fab-extended-text-font-size);
  16512. padding: var(--f7-fab-extended-text-padding);
  16513. font-weight: var(--f7-fab-extended-text-font-weight);
  16514. letter-spacing: var(--f7-fab-extended-text-letter-spacing);
  16515. text-transform: uppercase;
  16516. }
  16517. .fab-label-button {
  16518. overflow: visible !important;
  16519. }
  16520. .fab-label {
  16521. position: absolute;
  16522. top: 50%;
  16523. padding: var(--f7-fab-label-padding);
  16524. border-radius: var(--f7-fab-label-border-radius);
  16525. background: var(--f7-fab-label-bg-color);
  16526. color: var(--f7-fab-label-text-color);
  16527. box-shadow: var(--f7-fab-label-box-shadow);
  16528. white-space: nowrap;
  16529. transform: translateY(-50%);
  16530. pointer-events: none;
  16531. font-size: var(--f7-fab-label-font-size);
  16532. }
  16533. .fab-right-top .fab-label,
  16534. .fab-right-center .fab-label,
  16535. .fab-right-bottom .fab-label {
  16536. right: 100%;
  16537. margin-right: 8px;
  16538. }
  16539. .fab-left-top .fab-label,
  16540. .fab-left-center .fab-label,
  16541. .fab-left-bottom .fab-label {
  16542. left: 100%;
  16543. margin-left: 8px;
  16544. }
  16545. .navbar ~ * .fab-left-top,
  16546. .navbar ~ * .fab-center-top,
  16547. .navbar ~ * .fab-right-top,
  16548. .navbar ~ .fab-left-top,
  16549. .navbar ~ .fab-center-top,
  16550. .navbar ~ .fab-right-top,
  16551. .navbars ~ * .fab-left-top,
  16552. .navbars ~ * .fab-center-top,
  16553. .navbars ~ * .fab-right-top,
  16554. .navbars ~ .fab-left-top,
  16555. .navbars ~ .fab-center-top,
  16556. .navbars ~ .fab-right-top {
  16557. margin-top: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
  16558. }
  16559. .toolbar-top ~ * .fab-left-top,
  16560. .toolbar-top ~ * .fab-center-top,
  16561. .toolbar-top ~ * .fab-right-top,
  16562. .toolbar-top ~ .fab-left-top,
  16563. .toolbar-top ~ .fab-center-top,
  16564. .toolbar-top ~ .fab-right-top,
  16565. .ios .toolbar-top-ios ~ * .fab-left-top,
  16566. .ios .toolbar-top-ios ~ * .fab-center-top,
  16567. .ios .toolbar-top-ios ~ * .fab-right-top,
  16568. .ios .toolbar-top-ios ~ .fab-left-top,
  16569. .ios .toolbar-top-ios ~ .fab-center-top,
  16570. .ios .toolbar-top-ios ~ .fab-right-top,
  16571. .md .toolbar-top-md ~ * .fab-left-top,
  16572. .md .toolbar-top-md ~ * .fab-center-top,
  16573. .md .toolbar-top-md ~ * .fab-right-top,
  16574. .md .toolbar-top-md ~ .fab-left-top,
  16575. .md .toolbar-top-md ~ .fab-center-top,
  16576. .md .toolbar-top-md ~ .fab-right-top {
  16577. margin-top: var(--f7-toolbar-height);
  16578. }
  16579. .toolbar-bottom ~ * .fab-left-bottom,
  16580. .toolbar-bottom ~ * .fab-center-bottom,
  16581. .toolbar-bottom ~ * .fab-right-bottom,
  16582. .toolbar-bottom ~ .fab-left-bottom,
  16583. .toolbar-bottom ~ .fab-center-bottom,
  16584. .toolbar-bottom ~ .fab-right-bottom,
  16585. .ios .toolbar-bottom-ios ~ * .fab-left-bottom,
  16586. .ios .toolbar-bottom-ios ~ * .fab-center-bottom,
  16587. .ios .toolbar-bottom-ios ~ * .fab-right-bottom,
  16588. .ios .toolbar-bottom-ios ~ .fab-left-bottom,
  16589. .ios .toolbar-bottom-ios ~ .fab-center-bottom,
  16590. .ios .toolbar-bottom-ios ~ .fab-right-bottom,
  16591. .md .toolbar-bottom-md ~ * .fab-left-bottom,
  16592. .md .toolbar-bottom-md ~ * .fab-center-bottom,
  16593. .md .toolbar-bottom-md ~ * .fab-right-bottom,
  16594. .md .toolbar-bottom-md ~ .fab-left-bottom,
  16595. .md .toolbar-bottom-md ~ .fab-center-bottom,
  16596. .md .toolbar-bottom-md ~ .fab-right-bottom {
  16597. margin-bottom: var(--f7-toolbar-height);
  16598. }
  16599. .tabbar-labels.toolbar-bottom ~ * .fab-left-bottom,
  16600. .tabbar-labels.toolbar-bottom ~ * .fab-center-bottom,
  16601. .tabbar-labels.toolbar-bottom ~ * .fab-right-bottom,
  16602. .tabbar-labels.toolbar-bottom ~ .fab-left-bottom,
  16603. .tabbar-labels.toolbar-bottom ~ .fab-center-bottom,
  16604. .tabbar-labels.toolbar-bottom ~ .fab-right-bottom,
  16605. .ios .tabbar-labels.toolbar-bottom-ios ~ * .fab-left-bottom,
  16606. .ios .tabbar-labels.toolbar-bottom-ios ~ * .fab-center-bottom,
  16607. .ios .tabbar-labels.toolbar-bottom-ios ~ * .fab-right-bottom,
  16608. .ios .tabbar-labels.toolbar-bottom-ios ~ .fab-left-bottom,
  16609. .ios .tabbar-labels.toolbar-bottom-ios ~ .fab-center-bottom,
  16610. .ios .tabbar-labels.toolbar-bottom-ios ~ .fab-right-bottom,
  16611. .md .tabbar-labels.toolbar-bottom-md ~ * .fab-left-bottom,
  16612. .md .tabbar-labels.toolbar-bottom-md ~ * .fab-center-bottom,
  16613. .md .tabbar-labels.toolbar-bottom-md ~ * .fab-right-bottom,
  16614. .md .tabbar-labels.toolbar-bottom-md ~ .fab-left-bottom,
  16615. .md .tabbar-labels.toolbar-bottom-md ~ .fab-center-bottom,
  16616. .md .tabbar-labels.toolbar-bottom-md ~ .fab-right-bottom {
  16617. margin-bottom: var(--f7-tabbar-labels-height);
  16618. }
  16619. .tabbar-labels.toolbar-top ~ * .fab-left-bottom,
  16620. .tabbar-labels.toolbar-top ~ * .fab-center-bottom,
  16621. .tabbar-labels.toolbar-top ~ * .fab-right-bottom,
  16622. .tabbar-labels.toolbar-top ~ .fab-left-bottom,
  16623. .tabbar-labels.toolbar-top ~ .fab-center-bottom,
  16624. .tabbar-labels.toolbar-top ~ .fab-right-bottom,
  16625. .ios .tabbar-labels.toolbar-top-ios ~ * .fab-left-bottom,
  16626. .ios .tabbar-labels.toolbar-top-ios ~ * .fab-center-bottom,
  16627. .ios .tabbar-labels.toolbar-top-ios ~ * .fab-right-bottom,
  16628. .ios .tabbar-labels.toolbar-top-ios ~ .fab-left-bottom,
  16629. .ios .tabbar-labels.toolbar-top-ios ~ .fab-center-bottom,
  16630. .ios .tabbar-labels.toolbar-top-ios ~ .fab-right-bottom,
  16631. .md .tabbar-labels.toolbar-top-md ~ * .fab-left-bottom,
  16632. .md .tabbar-labels.toolbar-top-md ~ * .fab-center-bottom,
  16633. .md .tabbar-labels.toolbar-top-md ~ * .fab-right-bottom,
  16634. .md .tabbar-labels.toolbar-top-md ~ .fab-left-bottom,
  16635. .md .tabbar-labels.toolbar-top-md ~ .fab-center-bottom,
  16636. .md .tabbar-labels.toolbar-top-md ~ .fab-right-bottom {
  16637. margin-top: var(--f7-tabbar-labels-height);
  16638. }
  16639. .messagebar ~ * .fab-left-bottom,
  16640. .messagebar ~ * .fab-center-bottom,
  16641. .messagebar ~ * .fab-right-bottom,
  16642. .messagebar ~ .fab-left-bottom,
  16643. .messagebar ~ .fab-center-bottom,
  16644. .messagebar ~ .fab-right-bottom {
  16645. margin-bottom: var(--f7-messagebar-height);
  16646. }
  16647. .navbar + .toolbar-top ~ * .fab-left-top,
  16648. .ios .navbar + .toolbar-top-ios ~ * .fab-left-top,
  16649. .md .navbar + .toolbar-top-ios ~ * .fab-left-top,
  16650. .navbar + .toolbar-top ~ * .fab-center-top,
  16651. .ios .navbar + .toolbar-top-ios ~ * .fab-center-top,
  16652. .md .navbar + .toolbar-top-ios ~ * .fab-center-top,
  16653. .navbar + .toolbar-top ~ * .fab-right-top,
  16654. .ios .navbar + .toolbar-top-ios ~ * .fab-right-top,
  16655. .md .navbar + .toolbar-top-ios ~ * .fab-right-top,
  16656. .navbar + .toolbar-top ~ .fab-left-top,
  16657. .ios .navbar + .toolbar-top-ios ~ .fab-left-top,
  16658. .md .navbar + .toolbar-top-ios ~ .fab-left-top,
  16659. .navbar + .toolbar-top ~ .fab-center-top,
  16660. .ios .navbar + .toolbar-top-ios ~ .fab-center-top,
  16661. .md .navbar + .toolbar-top-ios ~ .fab-center-top,
  16662. .navbar + .toolbar-top ~ .fab-right-top,
  16663. .ios .navbar + .toolbar-top-ios ~ .fab-right-top,
  16664. .md .navbar + .toolbar-top-ios ~ .fab-right-top {
  16665. margin-top: calc(var(--f7-toolbar-height) + var(--f7-navbar-height) + var(--f7-safe-area-top));
  16666. }
  16667. .navbar + .toolbar-top.tabbar-labels ~ * .fab-left-top,
  16668. .ios .navbar + .toolbar-top-ios.tabbar-labels ~ * .fab-left-top,
  16669. .md .navbar + .toolbar-top-ios.tabbar-labels ~ * .fab-left-top,
  16670. .navbar + .toolbar-top.tabbar-labels ~ * .fab-center-top,
  16671. .ios .navbar + .toolbar-top-ios.tabbar-labels ~ * .fab-center-top,
  16672. .md .navbar + .toolbar-top-ios.tabbar-labels ~ * .fab-center-top,
  16673. .navbar + .toolbar-top.tabbar-labels ~ * .fab-right-top,
  16674. .ios .navbar + .toolbar-top-ios.tabbar-labels ~ * .fab-right-top,
  16675. .md .navbar + .toolbar-top-ios.tabbar-labels ~ * .fab-right-top,
  16676. .navbar + .toolbar-top.tabbar-labels ~ .fab-left-top,
  16677. .ios .navbar + .toolbar-top-ios.tabbar-labels ~ .fab-left-top,
  16678. .md .navbar + .toolbar-top-ios.tabbar-labels ~ .fab-left-top,
  16679. .navbar + .toolbar-top.tabbar-labels ~ .fab-center-top,
  16680. .ios .navbar + .toolbar-top-ios.tabbar-labels ~ .fab-center-top,
  16681. .md .navbar + .toolbar-top-ios.tabbar-labels ~ .fab-center-top,
  16682. .navbar + .toolbar-top.tabbar-labels ~ .fab-right-top,
  16683. .ios .navbar + .toolbar-top-ios.tabbar-labels ~ .fab-right-top,
  16684. .md .navbar + .toolbar-top-ios.tabbar-labels ~ .fab-right-top {
  16685. margin-top: calc(var(--f7-tabbar-labels-height) + var(--f7-navbar-height) + var(--f7-safe-area-top));
  16686. }
  16687. .navbars + .toolbar-top ~ * .fab-left-top,
  16688. .ios .navbars + .toolbar-top-ios ~ * .fab-left-top,
  16689. .navbars + .toolbar-top ~ * .fab-center-top,
  16690. .ios .navbars + .toolbar-top-ios ~ * .fab-center-top,
  16691. .navbars + .toolbar-top ~ * .fab-right-top,
  16692. .ios .navbars + .toolbar-top-ios ~ * .fab-right-top,
  16693. .navbars + .toolbar-top ~ .fab-left-top,
  16694. .ios .navbars + .toolbar-top-ios ~ .fab-left-top,
  16695. .navbars + .toolbar-top ~ .fab-center-top,
  16696. .ios .navbars + .toolbar-top-ios ~ .fab-center-top,
  16697. .navbars + .toolbar-top ~ .fab-right-top,
  16698. .ios .navbars + .toolbar-top-ios ~ .fab-right-top {
  16699. margin-top: calc(var(--f7-toolbar-height) + var(--f7-navbar-height) + var(--f7-safe-area-top));
  16700. }
  16701. .navbars + .toolbar-top.tabbar-labels ~ * .fab-left-top,
  16702. .ios .navbars + .toolbar-top-ios.tabbar-labels ~ * .fab-left-top,
  16703. .navbars + .toolbar-top.tabbar-labels ~ * .fab-center-top,
  16704. .ios .navbars + .toolbar-top-ios.tabbar-labels ~ * .fab-center-top,
  16705. .navbars + .toolbar-top.tabbar-labels ~ * .fab-right-top,
  16706. .ios .navbars + .toolbar-top-ios.tabbar-labels ~ * .fab-right-top,
  16707. .navbars + .toolbar-top.tabbar-labels ~ .fab-left-top,
  16708. .ios .navbars + .toolbar-top-ios.tabbar-labels ~ .fab-left-top,
  16709. .navbars + .toolbar-top.tabbar-labels ~ .fab-center-top,
  16710. .ios .navbars + .toolbar-top-ios.tabbar-labels ~ .fab-center-top,
  16711. .navbars + .toolbar-top.tabbar-labels ~ .fab-right-top,
  16712. .ios .navbars + .toolbar-top-ios.tabbar-labels ~ .fab-right-top {
  16713. margin-top: calc(var(--f7-tabbar-labels-height) + var(--f7-navbar-height) + var(--f7-safe-area-top));
  16714. }
  16715. .ios .fab > a.active-state,
  16716. .ios .fab-buttons a.active-state {
  16717. transition-duration: 0ms;
  16718. }
  16719. /* === Searchbar === */
  16720. :root {
  16721. /*
  16722. --f7-searchbar-link-color: var(--f7-bars-link-color);
  16723. --f7-searchbar-inline-input-font-size: var(--f7-searchbar-input-font-size);
  16724. --f7-searchbar-inline-input-height: var(--f7-searchbar-input-height);
  16725. */
  16726. --f7-searchbar-input-border-width: 0px;
  16727. --f7-searchbar-input-border-color: transparent;
  16728. --f7-searchbar-input-text-color: #000;
  16729. --f7-searchbar-placeholder-color: rgba(0, 0, 0, 0.4);
  16730. }
  16731. :root .theme-dark,
  16732. :root.theme-dark {
  16733. --f7-searchbar-input-text-color: #fff;
  16734. --f7-searchbar-placeholder-color: rgba(255, 255, 255, 0.4);
  16735. }
  16736. .ios {
  16737. /*
  16738. --f7-searchbar-bg-image: var(--f7-bars-bg-image);
  16739. --f7-searchbar-bg-color: var(--f7-bars-bg-color);
  16740. --f7-searchbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
  16741. --f7-searchbar-border-color: var(--f7-bars-border-color);
  16742. */
  16743. --f7-searchbar-height: 44px;
  16744. --f7-searchbar-inner-padding-left: 8px;
  16745. --f7-searchbar-inner-padding-right: 8px;
  16746. /*
  16747. --f7-searchbar-link-color: var(--f7-bars-link-color, var(--f7-theme-color));
  16748. */
  16749. --f7-searchbar-input-font-size: 17px;
  16750. --f7-searchbar-input-border-radius: 8px;
  16751. --f7-searchbar-input-height: 32px;
  16752. --f7-searchbar-input-padding-horizontal: 28px;
  16753. /*
  16754. --f7-searchbar-inline-input-padding-horizontal: var(--f7-searchbar-input-padding-horizontal);
  16755. --f7-searchbar-input-clear-button-color: var(--f7-input-clear-button-color);
  16756. */
  16757. --f7-searchbar-backdrop-bg-color: rgba(0, 0, 0, 0.4);
  16758. --f7-searchbar-shadow-image: none;
  16759. --f7-searchbar-in-page-content-margin: 0px;
  16760. --f7-searchbar-in-page-content-box-shadow: none;
  16761. --f7-searchbar-in-page-content-border-radius: 0;
  16762. --f7-searchbar-in-page-content-input-border-radius: 0;
  16763. --f7-searchbar-search-icon-color: rgba(0, 0, 0, 0.4);
  16764. --f7-searchbar-input-bg-color: #e4e4e4;
  16765. }
  16766. .ios .theme-dark,
  16767. .ios.theme-dark {
  16768. --f7-searchbar-search-icon-color: rgba(255, 255, 255, 0.4);
  16769. --f7-searchbar-input-bg-color: #2a2a2a;
  16770. }
  16771. .md {
  16772. --f7-searchbar-border-color: transparent;
  16773. --f7-searchbar-height: 48px;
  16774. --f7-searchbar-inner-padding-left: 0px;
  16775. --f7-searchbar-inner-padding-right: 0px;
  16776. --f7-searchbar-link-color: #737373;
  16777. --f7-searchbar-search-icon-color: #737373;
  16778. --f7-searchbar-input-font-size: 20px;
  16779. --f7-searchbar-input-border-radius: 0px;
  16780. --f7-searchbar-input-height: 100%;
  16781. --f7-searchbar-input-padding-horizontal: 48px;
  16782. --f7-searchbar-inline-input-padding-horizontal: 24px;
  16783. --f7-searchbar-input-clear-button-color: #737373;
  16784. --f7-searchbar-backdrop-bg-color: rgba(0, 0, 0, 0.25);
  16785. --f7-searchbar-shadow-image: var(--f7-bars-shadow-bottom-image);
  16786. --f7-searchbar-in-page-content-margin: 8px;
  16787. --f7-searchbar-in-page-content-box-shadow: var(--f7-elevation-1);
  16788. --f7-searchbar-in-page-content-border-radius: 4px;
  16789. --f7-searchbar-in-page-content-input-border-radius: 4px;
  16790. --f7-searchbar-bg-color: #fff;
  16791. --f7-searchbar-input-bg-color: #fff;
  16792. }
  16793. .md .theme-dark,
  16794. .md.theme-dark {
  16795. --f7-searchbar-bg-color: #202020;
  16796. --f7-searchbar-input-bg-color: #202020;
  16797. }
  16798. .aurora {
  16799. /*
  16800. --f7-searchbar-bg-image: var(--f7-bars-bg-image);
  16801. --f7-searchbar-bg-color: var(--f7-bars-bg-color);
  16802. --f7-searchbar-border-color: var(--f7-bars-border-color);
  16803. */
  16804. --f7-searchbar-height: 38px;
  16805. --f7-searchbar-inner-padding-left: 8px;
  16806. --f7-searchbar-inner-padding-right: 8px;
  16807. /*
  16808. --f7-searchbar-link-color: var(--f7-bars-link-color, var(--f7-theme-color));
  16809. */
  16810. --f7-searchbar-input-font-size: 13px;
  16811. --f7-searchbar-input-border-radius: 4px;
  16812. --f7-searchbar-input-height: 24px;
  16813. --f7-searchbar-input-padding-horizontal: 24px;
  16814. /*
  16815. --f7-searchbar-inline-input-padding-horizontal: var(--f7-searchbar-input-padding-horizontal;
  16816. --f7-searchbar-input-clear-button-color: var(--f7-input-clear-button-color);
  16817. */
  16818. --f7-searchbar-backdrop-bg-color: rgba(0, 0, 0, 0.4);
  16819. --f7-searchbar-shadow-image: none;
  16820. --f7-searchbar-in-page-content-margin: 0px;
  16821. --f7-searchbar-in-page-content-box-shadow: none;
  16822. --f7-searchbar-in-page-content-border-radius: 0;
  16823. /*
  16824. --f7-searchbar-in-page-content-input-border-radius: var(--f7-searchbar-input-border-radius);
  16825. */
  16826. --f7-searchbar-search-icon-color: rgba(0, 0, 0, 0.4);
  16827. --f7-searchbar-input-bg-color: #fff;
  16828. }
  16829. .aurora .theme-dark,
  16830. .aurora.theme-dark {
  16831. --f7-searchbar-input-bg-color: #333;
  16832. --f7-searchbar-search-icon-color: rgba(255, 255, 255, 0.4);
  16833. }
  16834. .searchbar {
  16835. width: 100%;
  16836. position: relative;
  16837. z-index: 200;
  16838. height: var(--f7-searchbar-height);
  16839. background-image: var(--f7-searchbar-bg-image, var(--f7-bars-bg-image));
  16840. background-color: var(--f7-searchbar-bg-color, var(--f7-bars-bg-color));
  16841. }
  16842. @supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  16843. .ios-translucent-bars .searchbar {
  16844. background-color: rgba(var(--f7-searchbar-bg-color-rgb, var(--f7-bars-bg-color-rgb)), var(--f7-bars-translucent-opacity));
  16845. -webkit-backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
  16846. backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
  16847. }
  16848. }
  16849. .ios .subnavbar .searchbar {
  16850. background-color: transparent;
  16851. -webkit-backdrop-filter: none;
  16852. backdrop-filter: none;
  16853. }
  16854. .ios .subnavbar .searchbar:after {
  16855. display: none !important;
  16856. }
  16857. .searchbar.no-hairline:after,
  16858. .searchbar.no-border:after {
  16859. display: none !important;
  16860. }
  16861. .searchbar.no-shadow:before {
  16862. display: none !important;
  16863. }
  16864. .searchbar:after {
  16865. content: '';
  16866. position: absolute;
  16867. background-color: var(--f7-searchbar-border-color, var(--f7-bars-border-color));
  16868. display: block;
  16869. z-index: 15;
  16870. top: auto;
  16871. right: auto;
  16872. bottom: 0;
  16873. left: 0;
  16874. height: 1px;
  16875. width: 100%;
  16876. transform-origin: 50% 100%;
  16877. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  16878. }
  16879. .page > .searchbar:not(.searchbar-inline) {
  16880. z-index: 600;
  16881. }
  16882. .page > .searchbar:not(.searchbar-inline):before {
  16883. content: '';
  16884. position: absolute;
  16885. right: 0;
  16886. width: 100%;
  16887. top: 100%;
  16888. bottom: auto;
  16889. height: 8px;
  16890. pointer-events: none;
  16891. background: var(--f7-searchbar-shadow-image);
  16892. }
  16893. .searchbar input[type="text"],
  16894. .searchbar input[type="search"] {
  16895. box-sizing: border-box;
  16896. width: 100%;
  16897. height: 100%;
  16898. display: block;
  16899. border: var(--f7-searchbar-input-border-width) solid var(--f7-searchbar-input-border-color);
  16900. -webkit-appearance: none;
  16901. -moz-appearance: none;
  16902. appearance: none;
  16903. font-family: inherit;
  16904. font-weight: normal;
  16905. color: var(--f7-searchbar-input-text-color);
  16906. font-size: var(--f7-searchbar-input-font-size);
  16907. background-color: var(--f7-searchbar-input-bg-color);
  16908. border-radius: var(--f7-searchbar-input-border-radius);
  16909. position: relative;
  16910. padding: 0;
  16911. padding-left: calc(var(--f7-searchbar-input-padding-horizontal) + var(--f7-searchbar-input-extra-padding-right, 0px));
  16912. padding-right: calc(var(--f7-searchbar-input-padding-horizontal) + var(--f7-searchbar-input-extra-padding-left, 0px));
  16913. }
  16914. .searchbar input[type="text"]::-webkit-input-placeholder, .searchbar input[type="search"]::-webkit-input-placeholder {
  16915. color: var(--f7-searchbar-placeholder-color);
  16916. opacity: 1;
  16917. }
  16918. .searchbar input[type="text"]::placeholder,
  16919. .searchbar input[type="search"]::placeholder {
  16920. color: var(--f7-searchbar-placeholder-color);
  16921. opacity: 1;
  16922. }
  16923. .searchbar input::-webkit-search-cancel-button {
  16924. -webkit-appearance: none;
  16925. appearance: none;
  16926. }
  16927. .searchbar .searchbar-input-wrap {
  16928. flex-shrink: 1;
  16929. width: 100%;
  16930. height: var(--f7-searchbar-input-height);
  16931. position: relative;
  16932. }
  16933. .searchbar a {
  16934. color: var(--f7-searchbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
  16935. }
  16936. .page > .searchbar:not(.searchbar-inline) {
  16937. position: absolute;
  16938. left: 0;
  16939. top: 0;
  16940. }
  16941. .page-content .searchbar:not(.searchbar-inline) {
  16942. border-radius: var(--f7-searchbar-in-page-content-border-radius);
  16943. margin: var(--f7-searchbar-in-page-content-margin);
  16944. width: auto;
  16945. box-shadow: var(--f7-searchbar-in-page-content-box-shadow);
  16946. }
  16947. .page-content .searchbar:not(.searchbar-inline) .searchbar-inner,
  16948. .page-content .searchbar:not(.searchbar-inline) input[type="text"],
  16949. .page-content .searchbar:not(.searchbar-inline) input[type="search"] {
  16950. border-radius: var(--f7-searchbar-in-page-content-input-border-radius, var(--f7-searchbar-input-border-radius));
  16951. }
  16952. .searchbar .input-clear-button {
  16953. color: var(--f7-searchbar-input-clear-button-color, var(--f7-input-clear-button-color));
  16954. }
  16955. .searchbar-expandable {
  16956. --f7-searchbar-expandable-size: var(--f7-searchbar-height);
  16957. position: absolute;
  16958. transition-duration: 300ms;
  16959. pointer-events: none;
  16960. }
  16961. .navbar .searchbar-expandable {
  16962. background: transparent;
  16963. }
  16964. .navbar .searchbar-expandable:after {
  16965. display: none !important;
  16966. }
  16967. .navbar .searchbar.searchbar-expandable {
  16968. --f7-searchbar-expandable-size: var(--f7-navbar-height);
  16969. }
  16970. .toolbar .searchbar.searchbar-expandable {
  16971. --f7-searchbar-expandable-size: var(--f7-toolbar-height);
  16972. }
  16973. .subnavbar .searchbar.searchbar-expandable {
  16974. --f7-searchbar-expandable-size: var(--f7-subnavbar-height);
  16975. }
  16976. .tabbar-labels .searchbar.searchbar-expandable {
  16977. --f7-searchbar-expandable-size: var(--f7-tabbar-labels-height);
  16978. }
  16979. .searchbar-inner {
  16980. position: absolute;
  16981. left: 0;
  16982. top: 0;
  16983. width: 100%;
  16984. height: 100%;
  16985. display: flex;
  16986. align-items: center;
  16987. box-sizing: border-box;
  16988. padding: 0 calc(var(--f7-searchbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left));
  16989. }
  16990. .searchbar-disable-button {
  16991. cursor: pointer;
  16992. pointer-events: none;
  16993. -webkit-appearance: none;
  16994. -moz-appearance: none;
  16995. appearance: none;
  16996. background: none;
  16997. border: none;
  16998. outline: 0;
  16999. padding: 0;
  17000. margin: 0;
  17001. width: auto;
  17002. opacity: 0;
  17003. }
  17004. .searchbar-icon {
  17005. pointer-events: none;
  17006. background-position: center;
  17007. background-repeat: no-repeat;
  17008. }
  17009. .searchbar-icon:after {
  17010. color: var(--f7-searchbar-search-icon-color);
  17011. font-family: 'framework7-core-icons';
  17012. font-weight: normal;
  17013. font-style: normal;
  17014. line-height: 1;
  17015. letter-spacing: normal;
  17016. text-transform: none;
  17017. white-space: nowrap;
  17018. word-wrap: normal;
  17019. direction: ltr;
  17020. -webkit-font-smoothing: antialiased;
  17021. text-rendering: optimizeLegibility;
  17022. -moz-osx-font-smoothing: grayscale;
  17023. font-feature-settings: "liga";
  17024. text-align: center;
  17025. display: block;
  17026. width: 100%;
  17027. height: 100%;
  17028. font-size: 20px;
  17029. }
  17030. .searchbar-backdrop {
  17031. position: absolute;
  17032. left: 0;
  17033. top: 0;
  17034. width: 100%;
  17035. height: 100%;
  17036. z-index: 100;
  17037. opacity: 0;
  17038. pointer-events: none;
  17039. transition-duration: 300ms;
  17040. transform: translate3d(0, 0, 0);
  17041. background: var(--f7-searchbar-backdrop-bg-color);
  17042. }
  17043. .searchbar-backdrop.searchbar-backdrop-in {
  17044. opacity: 1;
  17045. pointer-events: auto;
  17046. }
  17047. .page-content > .searchbar-backdrop {
  17048. position: fixed;
  17049. }
  17050. .searchbar-not-found {
  17051. display: none;
  17052. }
  17053. .hidden-by-searchbar,
  17054. .list .hidden-by-searchbar,
  17055. .list.li.hidden-by-searchbar,
  17056. .list li.hidden-by-searchbar {
  17057. display: none !important;
  17058. }
  17059. .navbar.with-searchbar-expandable-enabled-no-transition,
  17060. .navbar.with-searchbar-expandable-enabled-no-transition {
  17061. --f7-navbar-large-collapse-progress: 1;
  17062. }
  17063. .navbar.with-searchbar-expandable-enabled,
  17064. .navbar.with-searchbar-expandable-enabled {
  17065. --f7-navbar-large-collapse-progress: 1;
  17066. }
  17067. .navbar.with-searchbar-expandable-enabled .navbar-bg,
  17068. .navbar.with-searchbar-expandable-enabled .navbar-bg,
  17069. .navbar.with-searchbar-expandable-enabled .title-large,
  17070. .navbar.with-searchbar-expandable-enabled .title-large,
  17071. .navbar.with-searchbar-expandable-enabled .title-large-text,
  17072. .navbar.with-searchbar-expandable-enabled .title-large-text {
  17073. transition-duration: 300ms;
  17074. }
  17075. .navbar.with-searchbar-expandable-closing .navbar-bg,
  17076. .navbar.with-searchbar-expandable-closing .navbar-bg,
  17077. .navbar.with-searchbar-expandable-closing .title-large,
  17078. .navbar.with-searchbar-expandable-closing .title-large,
  17079. .navbar.with-searchbar-expandable-closing .title-large-text,
  17080. .navbar.with-searchbar-expandable-closing .title-large-text {
  17081. transition-duration: 300ms;
  17082. }
  17083. .page-content.with-searchbar-expandable-enabled {
  17084. height: calc(100% + var(--f7-navbar-large-title-height));
  17085. transform: translateY(calc(-1 * var(--f7-navbar-large-title-height)));
  17086. transition-duration: 300ms;
  17087. transition-property: transform;
  17088. }
  17089. .page-content.with-searchbar-expandable-closing {
  17090. transition-duration: 300ms;
  17091. }
  17092. .navbar ~ .page:not(.no-navbar) > .searchbar,
  17093. .navbars ~ .page:not(.no-navbar) > .searchbar,
  17094. .page > .navbar ~ .searchbar {
  17095. top: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
  17096. }
  17097. .navbar ~ .page-with-navbar-large:not(.no-navbar) .searchbar,
  17098. .navbars ~ .page-with-navbar-large:not(.no-navbar) .searchbar,
  17099. .page-with-navbar-large .navbar ~ .searchbar,
  17100. .page-with-navbar-large .navbar ~ * .searchbar {
  17101. top: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height) + var(--f7-safe-area-top));
  17102. transform: translate3d(0, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
  17103. }
  17104. .navbars ~ .page-with-navbar-large:not(.no-navbar) .page-content .searchbar,
  17105. .page-with-navbar-large .page-content .searchbar {
  17106. top: 0;
  17107. transform: none;
  17108. }
  17109. .searchbar ~ * {
  17110. --f7-page-searchbar-offset: var(--f7-searchbar-height);
  17111. }
  17112. .page > .toolbar-top ~ .searchbar,
  17113. .ios .page > .toolbar-top-ios ~ .searchbar,
  17114. .md .page > .toolbar-top-md ~ .searchbar,
  17115. .aurora .page > .toolbar-top-aurora ~ .searchbar {
  17116. top: var(--f7-toolbar-height);
  17117. }
  17118. .page > .tabbar-labels.toolbar-top ~ .searchbar,
  17119. .ios .page > .tabbar-labels.toolbar-top-ios ~ .searchbar,
  17120. .md .page > .tabbar-labels.toolbar-top-md ~ .searchbar,
  17121. .aurora .page > .tabbar-labels.toolbar-top-aurora ~ .searchbar {
  17122. top: var(--f7-tabbar-labels-height);
  17123. }
  17124. .page > .navbar ~ .toolbar-top ~ .searchbar,
  17125. .ios .page > .navbar ~ .toolbar-top-ios ~ .searchbar,
  17126. .md .page > .navbar ~ .toolbar-top-md ~ .searchbar,
  17127. .aurora .page > .navbar ~ .toolbar-top-aurora ~ .searchbar {
  17128. top: calc(var(--f7-navbar-height) + var(--f7-toolbar-height) + var(--f7-safe-area-top));
  17129. }
  17130. .page > .navbar ~ .tabbar-labels.toolbar-top ~ .searchbar,
  17131. .ios .page > .navbar ~ .tabbar-labels.toolbar-top-ios ~ .searchbar,
  17132. .md .page > .navbar ~ .tabbar-labels.toolbar-top-md ~ .searchbar,
  17133. .aurora .page > .navbar ~ .tabbar-labels.toolbar-top-aurora ~ .searchbar {
  17134. top: calc(var(--f7-navbar-height) + var(--f7-tabbar-labels-height) + var(--f7-safe-area-top));
  17135. }
  17136. .searchbar.searchbar-inline {
  17137. width: auto;
  17138. height: auto;
  17139. background-color: transparent;
  17140. background-image: none;
  17141. }
  17142. .searchbar.searchbar-inline:after,
  17143. .searchbar.searchbar-inline:before {
  17144. display: none !important;
  17145. }
  17146. .searchbar.searchbar-inline .searchbar-input-wrap {
  17147. height: var(--f7-searchbar-inline-input-height, var(--f7-searchbar-input-height));
  17148. }
  17149. .searchbar.searchbar-inline .searchbar-inner {
  17150. padding: 0;
  17151. position: static;
  17152. width: auto;
  17153. height: auto;
  17154. }
  17155. .searchbar.searchbar-inline input[type="text"],
  17156. .searchbar.searchbar-inline input[type="search"] {
  17157. font-size: var(--f7-searchbar-inline-input-font-size, var(--f7-searchbar-input-font-size));
  17158. padding-left: calc(var(--f7-searchbar-inline-input-padding-horizontal, var(--f7-searchbar-input-padding-horizontal)) + var(--f7-searchbar-input-extra-padding-right, 0px));
  17159. padding-right: calc(var(--f7-searchbar-inline-input-padding-horizontal, var(--f7-searchbar-input-padding-horizontal)) + var(--f7-searchbar-input-extra-padding-left, 0px));
  17160. }
  17161. .ios .searchbar input[type="search"],
  17162. .ios .searchbar input[type="text"] {
  17163. z-index: 30;
  17164. }
  17165. .ios .searchbar .input-clear-button {
  17166. z-index: 40;
  17167. left: 7px;
  17168. }
  17169. .ios .searchbar-icon {
  17170. width: 13px;
  17171. height: 13px;
  17172. position: absolute;
  17173. top: 50%;
  17174. margin-top: -6px;
  17175. z-index: 40;
  17176. right: 8px;
  17177. }
  17178. .ios .searchbar-icon:after {
  17179. content: 'search_ios';
  17180. line-height: 13px;
  17181. }
  17182. .ios .searchbar-disable-button {
  17183. font-size: 17px;
  17184. flex-shrink: 0;
  17185. transform: translate3d(0, 0, 0);
  17186. transition-duration: 300ms;
  17187. color: var(--f7-searchbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
  17188. display: none;
  17189. }
  17190. .ios .searchbar-disable-button.active-state {
  17191. transition-duration: 0ms;
  17192. opacity: 0.3 !important;
  17193. }
  17194. .ios .searchbar-enabled .searchbar-disable-button {
  17195. pointer-events: auto;
  17196. opacity: 1;
  17197. margin-right: 8px;
  17198. }
  17199. .ios .searchbar:not(.searchbar-enabled) .searchbar-disable-button {
  17200. transition-duration: 300ms !important;
  17201. }
  17202. .ios .searchbar-expandable {
  17203. right: 0;
  17204. bottom: 0;
  17205. opacity: 1;
  17206. width: 100%;
  17207. height: 0%;
  17208. transform: translate3d(0, 0, 0);
  17209. overflow: hidden;
  17210. }
  17211. .ios .searchbar-expandable .searchbar-disable-button {
  17212. margin-right: 8px;
  17213. opacity: 1;
  17214. display: block;
  17215. }
  17216. .ios .searchbar-expandable .searchbar-inner {
  17217. height: var(--f7-searchbar-expandable-size);
  17218. }
  17219. .ios .navbar.with-searchbar-expandable-enabled .navbar-bg,
  17220. .ios .navbar.with-searchbar-expandable-closing .navbar-bg {
  17221. transition-property: transform, opacity;
  17222. }
  17223. .ios .navbar.with-searchbar-expandable-enabled .navbar-bg,
  17224. .ios .navbar.with-searchbar-expandable-closing .navbar-bg,
  17225. .ios .navbar.with-searchbar-expandable-enabled .left,
  17226. .ios .navbar.with-searchbar-expandable-closing .left,
  17227. .ios .navbar.with-searchbar-expandable-enabled .title,
  17228. .ios .navbar.with-searchbar-expandable-closing .title,
  17229. .ios .navbar.with-searchbar-expandable-enabled .right,
  17230. .ios .navbar.with-searchbar-expandable-closing .right {
  17231. transition-duration: 300ms;
  17232. }
  17233. .ios .navbar.with-searchbar-expandable-enabled .left,
  17234. .ios .navbar.with-searchbar-expandable-enabled-no-transition .left,
  17235. .ios .navbar.with-searchbar-expandable-enabled .title,
  17236. .ios .navbar.with-searchbar-expandable-enabled-no-transition .title,
  17237. .ios .navbar.with-searchbar-expandable-enabled .right,
  17238. .ios .navbar.with-searchbar-expandable-enabled-no-transition .right {
  17239. transform: translateY(calc(-1 * var(--f7-navbar-height)));
  17240. opacity: 0 !important;
  17241. }
  17242. .ios .searchbar-expandable.searchbar-enabled {
  17243. opacity: 1;
  17244. height: var(--f7-searchbar-expandable-size);
  17245. pointer-events: auto;
  17246. }
  17247. .md .searchbar-icon,
  17248. .md .searchbar-disable-button {
  17249. position: absolute;
  17250. right: calc(-4px + var(--f7-safe-area-right));
  17251. top: 50%;
  17252. transition-duration: 300ms;
  17253. }
  17254. .md .searchbar-icon {
  17255. width: 24px;
  17256. height: 24px;
  17257. margin-left: 12px;
  17258. margin-top: -12px;
  17259. }
  17260. .md .searchbar-icon:after {
  17261. content: 'search_md';
  17262. line-height: 1.2;
  17263. }
  17264. .md .searchbar-disable-button {
  17265. width: 48px;
  17266. height: 48px;
  17267. transform: rotate(-90deg) scale(0.5);
  17268. font-size: 0 !important;
  17269. display: block;
  17270. margin-top: -24px;
  17271. color: var(--f7-searchbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
  17272. }
  17273. .md .searchbar-disable-button:before {
  17274. content: '';
  17275. width: 152%;
  17276. height: 152%;
  17277. position: absolute;
  17278. left: -26%;
  17279. top: -26%;
  17280. background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
  17281. background-repeat: no-repeat;
  17282. background-position: center;
  17283. background-size: 100% 100%;
  17284. opacity: 0;
  17285. pointer-events: none;
  17286. transition-duration: 600ms;
  17287. }
  17288. .md .searchbar-disable-button.active-state:before {
  17289. opacity: 1;
  17290. transition-duration: 150ms;
  17291. }
  17292. .md .searchbar-disable-button:after {
  17293. font-family: 'framework7-core-icons';
  17294. font-weight: normal;
  17295. font-style: normal;
  17296. line-height: 1;
  17297. letter-spacing: normal;
  17298. text-transform: none;
  17299. white-space: nowrap;
  17300. word-wrap: normal;
  17301. direction: ltr;
  17302. -webkit-font-smoothing: antialiased;
  17303. text-rendering: optimizeLegibility;
  17304. -moz-osx-font-smoothing: grayscale;
  17305. font-feature-settings: "liga";
  17306. text-align: center;
  17307. display: block;
  17308. width: 100%;
  17309. height: 100%;
  17310. font-size: 20px;
  17311. line-height: 48px;
  17312. content: "arrow_right_md";
  17313. }
  17314. .md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-disable-button {
  17315. transform: rotate(0deg) scale(1);
  17316. pointer-events: auto;
  17317. opacity: 1;
  17318. }
  17319. .md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-icon {
  17320. opacity: 0;
  17321. transform: rotate(90deg) scale(0.5);
  17322. }
  17323. .md .searchbar {
  17324. --f7-searchbar-input-extra-padding-left: 16px;
  17325. }
  17326. .md .searchbar .input-clear-button {
  17327. width: 48px;
  17328. height: 48px;
  17329. margin-top: -24px;
  17330. left: 0;
  17331. }
  17332. .md .searchbar .input-clear-button:before {
  17333. content: '';
  17334. width: 152%;
  17335. height: 152%;
  17336. position: absolute;
  17337. left: -26%;
  17338. top: -26%;
  17339. background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
  17340. background-repeat: no-repeat;
  17341. background-position: center;
  17342. background-size: 100% 100%;
  17343. opacity: 0;
  17344. pointer-events: none;
  17345. transition-duration: 600ms;
  17346. }
  17347. .md .searchbar .input-clear-button.active-state:before {
  17348. opacity: 1;
  17349. transition-duration: 150ms;
  17350. }
  17351. .md .searchbar .input-clear-button:after {
  17352. line-height: 48px;
  17353. content: 'delete_md';
  17354. opacity: 1;
  17355. }
  17356. .md .searchbar .input-clear-button:before {
  17357. margin-left: 0;
  17358. margin-top: 0;
  17359. }
  17360. .md .page > .searchbar,
  17361. .md .subnavbar .searchbar,
  17362. .md .searchbar-expandable {
  17363. --f7-searchbar-input-extra-padding-left: 24px;
  17364. }
  17365. .md .page > .searchbar .searchbar-icon,
  17366. .md .subnavbar .searchbar .searchbar-icon,
  17367. .md .searchbar-expandable .searchbar-icon,
  17368. .md .page > .searchbar .searchbar-disable-button,
  17369. .md .subnavbar .searchbar .searchbar-disable-button,
  17370. .md .searchbar-expandable .searchbar-disable-button {
  17371. right: calc(-4px + 8px + var(--f7-safe-area-right));
  17372. }
  17373. .md .searchbar-expandable {
  17374. height: var(--f7-searchbar-expandable-size);
  17375. opacity: 0;
  17376. bottom: 0;
  17377. border-radius: calc(var(--f7-searchbar-expandable-size));
  17378. width: calc(var(--f7-searchbar-expandable-size));
  17379. margin-top: calc(var(--f7-searchbar-expandable-size) * -1 / 2);
  17380. transform: translate3d(0px, 0px, 0px);
  17381. right: 100%;
  17382. margin-right: calc(var(--f7-searchbar-expandable-size) * -1);
  17383. }
  17384. .md .searchbar-expandable.searchbar-enabled {
  17385. width: 100%;
  17386. border-radius: 0;
  17387. opacity: 1;
  17388. pointer-events: auto;
  17389. margin-top: 0;
  17390. right: 0;
  17391. margin-right: 0;
  17392. }
  17393. .aurora .searchbar input[type="search"],
  17394. .aurora .searchbar input[type="text"] {
  17395. z-index: 30;
  17396. }
  17397. .aurora .searchbar .input-clear-button {
  17398. z-index: 40;
  17399. left: 4px;
  17400. }
  17401. .aurora .searchbar-icon {
  17402. width: 13px;
  17403. height: 13px;
  17404. position: absolute;
  17405. top: 50%;
  17406. margin-top: -6px;
  17407. z-index: 40;
  17408. right: 6px;
  17409. }
  17410. .aurora .searchbar-icon:after {
  17411. content: 'search_aurora';
  17412. line-height: 13px;
  17413. }
  17414. .aurora .searchbar-disable-button {
  17415. font-size: 14px;
  17416. flex-shrink: 0;
  17417. transform: translate3d(0, 0, 0);
  17418. transition-duration: 300ms;
  17419. color: var(--f7-searchbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
  17420. display: none;
  17421. }
  17422. .aurora .searchbar-disable-button.active-state {
  17423. transition-duration: 0ms;
  17424. opacity: 0.3 !important;
  17425. }
  17426. .aurora .searchbar-enabled .searchbar-disable-button {
  17427. pointer-events: auto;
  17428. opacity: 1;
  17429. margin-right: 8px;
  17430. }
  17431. .aurora .searchbar:not(.searchbar-enabled) .searchbar-disable-button {
  17432. transition-duration: 300ms !important;
  17433. }
  17434. .aurora .searchbar-expandable {
  17435. right: 0;
  17436. top: auto;
  17437. bottom: 0;
  17438. opacity: 0;
  17439. width: 100%;
  17440. transform: translate3d(0, 0, 0);
  17441. overflow: hidden;
  17442. }
  17443. .aurora .searchbar-expandable .searchbar-disable-button {
  17444. margin-right: 8px;
  17445. opacity: 1;
  17446. display: block;
  17447. }
  17448. .aurora .searchbar-expandable .searchbar-inner {
  17449. height: var(--f7-searchbar-expandable-size);
  17450. }
  17451. .aurora .searchbar-expandable.searchbar-enabled {
  17452. opacity: 1;
  17453. pointer-events: auto;
  17454. }
  17455. /* === Messages === */
  17456. :root {
  17457. --f7-message-text-header-text-color: inherit;
  17458. --f7-message-text-header-opacity: 0.65;
  17459. --f7-message-text-header-font-size: 12px;
  17460. --f7-message-text-footer-text-color: inherit;
  17461. --f7-message-text-footer-opacity: 0.65;
  17462. --f7-message-text-footer-font-size: 12px;
  17463. --f7-message-bubble-line-height: 1.2;
  17464. --f7-message-header-font-size: 12px;
  17465. --f7-message-footer-font-size: 11px;
  17466. --f7-message-name-font-size: 12px;
  17467. --f7-message-name-font-weight: inherit;
  17468. --f7-message-avatar-border-radius: 50%;
  17469. --f7-messages-title-font-weight: inherit;
  17470. /*
  17471. --f7-message-sent-bg-color: var(--f7-theme-color);
  17472. */
  17473. --f7-message-sent-text-color: #fff;
  17474. --f7-messages-content-bg-color: #fff;
  17475. --f7-message-typing-indicator-bg-color: #000;
  17476. --f7-message-received-bg-color: #e5e5ea;
  17477. --f7-message-received-text-color: #000;
  17478. }
  17479. :root .theme-dark,
  17480. :root.theme-dark {
  17481. --f7-messages-title-text-color: rgba(255, 255, 255, 0.54);
  17482. --f7-message-header-text-color: rgba(255, 255, 255, 0.54);
  17483. --f7-message-name-text-color: rgba(255, 255, 255, 0.54);
  17484. --f7-message-footer-text-color: rgba(255, 255, 255, 0.54);
  17485. --f7-messages-content-bg-color: transparent;
  17486. --f7-message-received-bg-color: #252525;
  17487. --f7-message-received-text-color: #fff;
  17488. --f7-message-typing-indicator-bg-color: #fff;
  17489. }
  17490. .ios {
  17491. --f7-messages-title-text-color: rgba(0, 0, 0, 0.45);
  17492. --f7-messages-title-font-size: 11px;
  17493. --f7-message-header-text-color: rgba(0, 0, 0, 0.45);
  17494. --f7-message-footer-text-color: rgba(0, 0, 0, 0.45);
  17495. --f7-message-name-text-color: rgba(0, 0, 0, 0.45);
  17496. --f7-message-avatar-size: 29px;
  17497. --f7-message-margin: 10px;
  17498. --f7-message-bubble-min-height: 32px;
  17499. --f7-message-bubble-font-size: 17px;
  17500. --f7-message-bubble-border-radius: 16px;
  17501. --f7-message-bubble-padding-vertical: 6px;
  17502. --f7-message-bubble-padding-horizontal: 16px;
  17503. --f7-message-typing-indicator-opacity: 0.35;
  17504. }
  17505. .md {
  17506. --f7-messages-title-font-size: 12px;
  17507. --f7-message-avatar-size: 32px;
  17508. --f7-message-margin: 16px;
  17509. --f7-message-bubble-min-height: 32px;
  17510. --f7-message-bubble-font-size: 16px;
  17511. --f7-message-bubble-border-radius: 4px;
  17512. --f7-message-bubble-padding-vertical: 6px;
  17513. --f7-message-bubble-padding-horizontal: 8px;
  17514. --f7-message-typing-indicator-opacity: 0.6;
  17515. --f7-messages-title-text-color: rgba(0, 0, 0, 0.51);
  17516. --f7-message-header-text-color: rgba(0, 0, 0, 0.51);
  17517. --f7-message-footer-text-color: rgba(0, 0, 0, 0.51);
  17518. --f7-message-name-text-color: rgba(0, 0, 0, 0.51);
  17519. }
  17520. .aurora {
  17521. --f7-messages-title-font-size: 12px;
  17522. --f7-message-avatar-size: 24px;
  17523. --f7-message-margin: 10px;
  17524. --f7-message-bubble-min-height: 28px;
  17525. --f7-message-bubble-font-size: 13px;
  17526. --f7-message-bubble-line-height: 1.4;
  17527. --f7-message-bubble-border-radius: 14px;
  17528. --f7-message-bubble-padding-vertical: 5px;
  17529. --f7-message-bubble-padding-horizontal: 10px;
  17530. --f7-message-typing-indicator-opacity: 0.5;
  17531. --f7-messages-title-text-color: rgba(0, 0, 0, 0.51);
  17532. --f7-message-header-text-color: rgba(0, 0, 0, 0.51);
  17533. --f7-message-footer-text-color: rgba(0, 0, 0, 0.51);
  17534. --f7-message-name-text-color: rgba(0, 0, 0, 0.51);
  17535. }
  17536. .messages-content,
  17537. .messages {
  17538. background: var(--f7-messages-content-bg-color);
  17539. }
  17540. .messages {
  17541. display: flex;
  17542. flex-direction: column;
  17543. min-height: 100%;
  17544. position: relative;
  17545. z-index: 1;
  17546. }
  17547. .messages-title,
  17548. .message {
  17549. margin-top: var(--f7-message-margin);
  17550. }
  17551. .messages-title:last-child,
  17552. .message:last-child {
  17553. margin-bottom: var(--f7-message-margin);
  17554. }
  17555. .messages-title {
  17556. text-align: center;
  17557. width: 100%;
  17558. line-height: 1;
  17559. color: var(--f7-messages-title-text-color);
  17560. font-size: var(--f7-messages-title-font-size);
  17561. font-weight: var(--f7-messages-title-font-weight);
  17562. }
  17563. .message {
  17564. max-width: 70%;
  17565. box-sizing: border-box;
  17566. display: flex;
  17567. align-items: flex-end;
  17568. position: relative;
  17569. z-index: 1;
  17570. transform: translate3d(0, 0, 0);
  17571. }
  17572. .message-avatar {
  17573. border-radius: var(--f7-message-avatar-border-radius);
  17574. position: relative;
  17575. background-size: cover;
  17576. align-self: flex-end;
  17577. flex-shrink: 0;
  17578. width: var(--f7-message-avatar-size);
  17579. height: var(--f7-message-avatar-size);
  17580. }
  17581. .message-content {
  17582. position: relative;
  17583. display: flex;
  17584. flex-direction: column;
  17585. }
  17586. .message-header,
  17587. .message-footer,
  17588. .message-name {
  17589. line-height: 1;
  17590. }
  17591. .message-header {
  17592. color: var(--f7-message-header-text-color);
  17593. font-size: var(--f7-message-header-font-size);
  17594. }
  17595. .message-footer {
  17596. color: var(--f7-message-footer-text-color);
  17597. font-size: var(--f7-message-footer-font-size);
  17598. margin-bottom: -1em;
  17599. }
  17600. .message-name {
  17601. color: var(--f7-message-name-text-color);
  17602. font-size: var(--f7-message-name-font-size);
  17603. font-weight: var(--f7-message-name-font-weight);
  17604. }
  17605. .message-bubble {
  17606. box-sizing: border-box;
  17607. word-break: break-word;
  17608. display: flex;
  17609. flex-direction: column;
  17610. position: relative;
  17611. line-height: var(--f7-message-bubble-line-height);
  17612. font-size: var(--f7-message-bubble-font-size);
  17613. border-radius: var(--f7-message-bubble-border-radius);
  17614. padding: var(--f7-message-bubble-padding-vertical) var(--f7-message-bubble-padding-horizontal);
  17615. min-height: var(--f7-message-bubble-min-height);
  17616. }
  17617. .message-image img {
  17618. display: block;
  17619. max-width: 100%;
  17620. height: auto;
  17621. width: auto;
  17622. }
  17623. .message-text-header,
  17624. .message-text-footer {
  17625. line-height: 1;
  17626. }
  17627. .message-text-header {
  17628. color: var(--f7-message-text-header-text-color);
  17629. opacity: var(--f7-message-text-header-opacity);
  17630. font-size: var(--f7-message-text-header-font-size);
  17631. }
  17632. .message-text-footer {
  17633. color: var(--f7-message-text-footer-text-color);
  17634. opacity: var(--f7-message-text-footer-opacity);
  17635. font-size: var(--f7-message-text-footer-font-size);
  17636. }
  17637. .message-text {
  17638. text-align: left;
  17639. }
  17640. .message-sent {
  17641. text-align: right;
  17642. flex-direction: row;
  17643. align-self: flex-start;
  17644. }
  17645. .message-sent .message-bubble {
  17646. color: var(--f7-message-sent-text-color);
  17647. background: var(--f7-message-sent-bg-color, var(--f7-theme-color));
  17648. }
  17649. .message-sent .message-content {
  17650. align-items: flex-start;
  17651. }
  17652. .message-sent.message-tail .message-bubble {
  17653. border-radius: var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) 0 var(--f7-message-bubble-border-radius);
  17654. }
  17655. .message-received {
  17656. flex-direction: row-reverse;
  17657. align-self: flex-end;
  17658. }
  17659. .message-received .message-bubble {
  17660. color: var(--f7-message-received-text-color);
  17661. background: var(--f7-message-received-bg-color);
  17662. }
  17663. .message-received .message-content {
  17664. align-items: flex-end;
  17665. }
  17666. .message-received.message-tail .message-bubble {
  17667. border-radius: var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) 0;
  17668. }
  17669. .message:not(.message-last) .message-avatar {
  17670. opacity: 0;
  17671. }
  17672. .message:not(.message-first) .message-name {
  17673. display: none;
  17674. }
  17675. .message.message-same-name .message-name {
  17676. display: none;
  17677. }
  17678. .message.message-same-header .message-header {
  17679. display: none;
  17680. }
  17681. .message.message-same-footer .message-footer {
  17682. display: none;
  17683. }
  17684. .message-appear-from-bottom {
  17685. animation: message-appear-from-bottom 300ms;
  17686. }
  17687. .message-appear-from-top {
  17688. animation: message-appear-from-top 300ms;
  17689. }
  17690. .message-typing-indicator {
  17691. display: inline-block;
  17692. font-size: 0;
  17693. vertical-align: middle;
  17694. }
  17695. .message-typing-indicator > div {
  17696. display: inline-block;
  17697. position: relative;
  17698. background: var(--f7-message-typing-indicator-bg-color);
  17699. opacity: var(--f7-message-typing-indicator-opacity);
  17700. vertical-align: middle;
  17701. border-radius: 50%;
  17702. }
  17703. @keyframes message-appear-from-bottom {
  17704. from {
  17705. transform: translate3d(0, 100%, 0);
  17706. }
  17707. to {
  17708. transform: translate3d(0, 0, 0);
  17709. }
  17710. }
  17711. @keyframes message-appear-from-top {
  17712. from {
  17713. transform: translate3d(0, -100%, 0);
  17714. }
  17715. to {
  17716. transform: translate3d(0, 0, 0);
  17717. }
  17718. }
  17719. .ios .messages-title b,
  17720. .ios .message-header b,
  17721. .ios .message-footer b,
  17722. .ios .message-name b {
  17723. font-weight: 600;
  17724. }
  17725. .ios .message-header,
  17726. .ios .message-name {
  17727. margin-bottom: 3px;
  17728. }
  17729. .ios .message-footer {
  17730. margin-top: 3px;
  17731. }
  17732. .ios .message-bubble {
  17733. min-width: 48px;
  17734. }
  17735. .ios .message-image {
  17736. margin: var(--f7-message-bubble-padding-vertical) calc(-1 * var(--f7-message-bubble-padding-horizontal));
  17737. }
  17738. .ios .message-image:first-child {
  17739. margin-top: calc(-1 * var(--f7-message-bubble-padding-vertical));
  17740. }
  17741. .ios .message-image:first-child img {
  17742. border-top-left-radius: var(--f7-message-bubble-border-radius);
  17743. border-top-right-radius: var(--f7-message-bubble-border-radius);
  17744. }
  17745. .ios .message-image:last-child {
  17746. margin-bottom: calc(-1 * var(--f7-message-bubble-padding-vertical));
  17747. }
  17748. .ios .message-image:last-child img {
  17749. border-bottom-left-radius: var(--f7-message-bubble-border-radius);
  17750. border-bottom-right-radius: var(--f7-message-bubble-border-radius);
  17751. }
  17752. .ios .message-text-header {
  17753. margin-bottom: 3px;
  17754. }
  17755. .ios .message-text-footer {
  17756. margin-top: 3px;
  17757. }
  17758. .ios .message-received {
  17759. margin-left: calc(10px + var(--f7-safe-area-left));
  17760. }
  17761. .ios .message-received .message-header,
  17762. .ios .message-received .message-footer,
  17763. .ios .message-received .message-name {
  17764. margin-left: var(--f7-message-bubble-padding-horizontal);
  17765. }
  17766. .ios .message-received .message-bubble {
  17767. padding-left: calc(var(--f7-message-bubble-padding-horizontal) + 6px);
  17768. -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 50% 42% 46% 56%;
  17769. }
  17770. .ios .message-received .message-image {
  17771. margin-left: calc(-1 * (var(--f7-message-bubble-padding-horizontal) + 6px));
  17772. }
  17773. .ios .message-received.message-tail:not(.message-typing) .message-bubble {
  17774. -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m0 70c6-2 12-10 12-19v-16l14 27s-8 8-26 8z'/></svg>") 50% 42% 46% 56%;
  17775. }
  17776. .ios .message-received.message-tail:not(.message-typing) .message-bubble .message-image:last-child img {
  17777. border-bottom-left-radius: 0px;
  17778. }
  17779. .ios .message-sent {
  17780. margin-right: calc(10px + var(--f7-safe-area-right));
  17781. }
  17782. .ios .message-sent .message-header,
  17783. .ios .message-sent .message-footer,
  17784. .ios .message-sent .message-name {
  17785. margin-right: var(--f7-message-bubble-padding-horizontal);
  17786. }
  17787. .ios .message-sent .message-bubble {
  17788. padding-right: calc(var(--f7-message-bubble-padding-horizontal) + 6px);
  17789. -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 50% 56% 46% 42%;
  17790. }
  17791. .ios .message-sent .message-image {
  17792. margin-right: calc(-1 * (var(--f7-message-bubble-padding-horizontal) + 6px));
  17793. }
  17794. .ios .message-sent.message-tail .message-bubble {
  17795. -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m96 70c-6-2-12-10-12-19v-16l-14 27s8 8 26 8z'/></svg>") 50% 56% 46% 42%;
  17796. }
  17797. .ios .message-sent.message-tail .message-bubble .message-image:last-child img {
  17798. border-bottom-right-radius: 0px;
  17799. }
  17800. .ios .message + .message:not(.message-first) {
  17801. margin-top: 1px;
  17802. }
  17803. .ios .message-received.message-typing .message-content:after,
  17804. .ios .message-received.message-typing .message-content:before {
  17805. content: '';
  17806. position: absolute;
  17807. background: var(--f7-message-received-bg-color);
  17808. border-radius: 50%;
  17809. }
  17810. .ios .message-received.message-typing .message-content:after {
  17811. width: 11px;
  17812. height: 11px;
  17813. left: 4px;
  17814. bottom: 0px;
  17815. }
  17816. .ios .message-received.message-typing .message-content:before {
  17817. width: 6px;
  17818. height: 6px;
  17819. left: -1px;
  17820. bottom: -4px;
  17821. }
  17822. .ios .message-typing-indicator > div {
  17823. width: 9px;
  17824. height: 9px;
  17825. }
  17826. .ios .message-typing-indicator > div + div {
  17827. margin-right: 4px;
  17828. }
  17829. .ios .message-typing-indicator > div:nth-child(1) {
  17830. animation: ios-message-typing-indicator 900ms infinite;
  17831. }
  17832. .ios .message-typing-indicator > div:nth-child(2) {
  17833. animation: ios-message-typing-indicator 900ms 150ms infinite;
  17834. }
  17835. .ios .message-typing-indicator > div:nth-child(3) {
  17836. animation: ios-message-typing-indicator 900ms 300ms infinite;
  17837. }
  17838. @keyframes ios-message-typing-indicator {
  17839. 0% {
  17840. opacity: 0.35;
  17841. }
  17842. 25% {
  17843. opacity: 0.2;
  17844. }
  17845. 50% {
  17846. opacity: 0.2;
  17847. }
  17848. }
  17849. .md .messages-title b,
  17850. .md .message-header b,
  17851. .md .message-footer b,
  17852. .md .message-name b {
  17853. font-weight: 500;
  17854. }
  17855. .md .message-header,
  17856. .md .message-name {
  17857. margin-bottom: 2px;
  17858. }
  17859. .md .message-footer {
  17860. margin-top: 2px;
  17861. }
  17862. .md .message-text-header {
  17863. margin-bottom: 4px;
  17864. }
  17865. .md .message-text-footer {
  17866. margin-top: 4px;
  17867. }
  17868. .md .message-received.message-tail .message-bubble:before,
  17869. .md .message-sent.message-tail .message-bubble:before {
  17870. position: absolute;
  17871. content: '';
  17872. bottom: 0;
  17873. width: 0;
  17874. height: 0;
  17875. }
  17876. .md .message-received {
  17877. margin-left: calc(8px + var(--f7-safe-area-left));
  17878. }
  17879. .md .message-received .message-avatar + .message-content {
  17880. margin-left: var(--f7-message-bubble-padding-horizontal);
  17881. }
  17882. .md .message-received.message-tail .message-bubble:before {
  17883. border-left: 8px solid transparent;
  17884. border-right: 0 solid transparent;
  17885. border-bottom: 8px solid var(--f7-message-received-bg-color);
  17886. right: 100%;
  17887. }
  17888. .md .message-sent {
  17889. margin-right: calc(8px + var(--f7-safe-area-right));
  17890. }
  17891. .md .message-sent .message-avatar + .message-content {
  17892. margin-right: var(--f7-message-bubble-padding-horizontal);
  17893. }
  17894. .md .message-sent.message-tail .message-bubble:before {
  17895. border-left: 0 solid transparent;
  17896. border-right: 8px solid transparent;
  17897. border-bottom: 8px solid var(--f7-message-sent-bg-color, var(--f7-theme-color));
  17898. left: 100%;
  17899. }
  17900. .md .message + .message:not(.message-first) {
  17901. margin-top: 8px;
  17902. }
  17903. .md .message-typing-indicator > div {
  17904. width: 6px;
  17905. height: 6px;
  17906. }
  17907. .md .message-typing-indicator > div + div {
  17908. margin-right: 6px;
  17909. }
  17910. .md .message-typing-indicator > div:nth-child(1) {
  17911. animation: md-message-typing-indicator 900ms infinite;
  17912. }
  17913. .md .message-typing-indicator > div:nth-child(2) {
  17914. animation: md-message-typing-indicator 900ms 150ms infinite;
  17915. }
  17916. .md .message-typing-indicator > div:nth-child(3) {
  17917. animation: md-message-typing-indicator 900ms 300ms infinite;
  17918. }
  17919. @keyframes md-message-typing-indicator {
  17920. 0% {
  17921. transform: translateY(0%);
  17922. }
  17923. 25% {
  17924. transform: translateY(-5px);
  17925. }
  17926. 50% {
  17927. transform: translateY(0%);
  17928. }
  17929. }
  17930. .aurora .messages-title b,
  17931. .aurora .message-header b,
  17932. .aurora .message-footer b,
  17933. .aurora .message-name b {
  17934. font-weight: 500;
  17935. }
  17936. .aurora .message-header,
  17937. .aurora .message-name {
  17938. margin-bottom: 2px;
  17939. }
  17940. .aurora .message-footer {
  17941. margin-top: 2px;
  17942. }
  17943. .aurora .message-text-header {
  17944. margin-bottom: 2px;
  17945. }
  17946. .aurora .message-text-footer {
  17947. margin-top: 2px;
  17948. }
  17949. .aurora .message-received.message-tail .message-bubble:before,
  17950. .aurora .message-sent.message-tail .message-bubble:before {
  17951. position: absolute;
  17952. content: '';
  17953. bottom: 0;
  17954. width: 0;
  17955. height: 0;
  17956. }
  17957. .aurora .message-image {
  17958. margin: var(--f7-message-bubble-padding-vertical) calc(-1 * var(--f7-message-bubble-padding-horizontal) + 4px);
  17959. }
  17960. .aurora .message-image:first-child {
  17961. margin-top: calc(-1 * var(--f7-message-bubble-padding-vertical) + 4px);
  17962. }
  17963. .aurora .message-image:first-child img {
  17964. border-top-left-radius: var(--f7-message-bubble-border-radius);
  17965. border-top-right-radius: var(--f7-message-bubble-border-radius);
  17966. }
  17967. .aurora .message-image:last-child {
  17968. margin-bottom: calc(-1 * var(--f7-message-bubble-padding-vertical) + 4px);
  17969. }
  17970. .aurora .message-image:last-child img {
  17971. border-bottom-left-radius: var(--f7-message-bubble-border-radius);
  17972. border-bottom-right-radius: var(--f7-message-bubble-border-radius);
  17973. }
  17974. .aurora .message-received {
  17975. margin-left: calc(16px + var(--f7-safe-area-left));
  17976. }
  17977. .aurora .message-received .message-avatar + .message-content {
  17978. margin-left: 5px;
  17979. }
  17980. .aurora .message-received .message-header,
  17981. .aurora .message-received .message-footer,
  17982. .aurora .message-received .message-name {
  17983. margin-left: var(--f7-message-bubble-padding-horizontal);
  17984. }
  17985. .aurora .message-received.message-tail .message-bubble:before {
  17986. border-left: 6px solid transparent;
  17987. border-right: 0 solid transparent;
  17988. border-bottom: 6px solid var(--f7-message-received-bg-color);
  17989. right: 100%;
  17990. transform: translate(2px, 0px) rotate(-15deg);
  17991. transform-origin: right bottom;
  17992. }
  17993. .aurora .message-sent {
  17994. margin-right: calc(16px + var(--f7-safe-area-right));
  17995. }
  17996. .aurora .message-sent .message-avatar + .message-content {
  17997. margin-right: 5px;
  17998. }
  17999. .aurora .message-sent .message-header,
  18000. .aurora .message-sent .message-footer,
  18001. .aurora .message-sent .message-name {
  18002. margin-right: var(--f7-message-bubble-padding-horizontal);
  18003. }
  18004. .aurora .message-sent.message-tail .message-bubble:before {
  18005. border-left: 0 solid transparent;
  18006. border-right: 6px solid transparent;
  18007. border-bottom: 6px solid var(--f7-message-sent-bg-color, var(--f7-theme-color));
  18008. left: 100%;
  18009. transform: translate(-2px, 0px) rotate(15deg);
  18010. transform-origin: left bottom;
  18011. }
  18012. .aurora .message + .message:not(.message-first) {
  18013. margin-top: 5px;
  18014. }
  18015. .aurora .message-typing-indicator > div {
  18016. width: 6px;
  18017. height: 6px;
  18018. }
  18019. .aurora .message-typing-indicator > div + div {
  18020. margin-right: 4px;
  18021. }
  18022. .aurora .message-typing-indicator > div:nth-child(1) {
  18023. animation: aurora-message-typing-indicator 900ms infinite;
  18024. }
  18025. .aurora .message-typing-indicator > div:nth-child(2) {
  18026. animation: aurora-message-typing-indicator 900ms 150ms infinite;
  18027. }
  18028. .aurora .message-typing-indicator > div:nth-child(3) {
  18029. animation: aurora-message-typing-indicator 900ms 300ms infinite;
  18030. }
  18031. @keyframes aurora-message-typing-indicator {
  18032. 0% {
  18033. transform: translateY(0%);
  18034. }
  18035. 50% {
  18036. transform: translateY(-5px);
  18037. }
  18038. 100% {
  18039. transform: translateY(0%);
  18040. }
  18041. }
  18042. /* === Messagebar === */
  18043. :root {
  18044. --f7-messagebar-shadow-image: none;
  18045. --f7-messagebar-textarea-bg-color: transparent;
  18046. --f7-messagebar-attachments-height: 155px;
  18047. --f7-messagebar-attachment-height: 155px;
  18048. --f7-messagebar-attachment-landscape-height: 120px;
  18049. --f7-messagebar-sheet-height: 252px;
  18050. --f7-messagebar-sheet-landscape-height: 192px;
  18051. /*
  18052. --f7-messagebar-inner-padding-left: var(--f7-toolbar-inner-padding-left);
  18053. --f7-messagebar-inner-padding-right: var(--f7-toolbar-inner-padding-right);
  18054. */
  18055. --f7-messagebar-bg-color: #fff;
  18056. --f7-messagebar-bg-color-rgb: 255, 255, 255;
  18057. }
  18058. :root .theme-dark,
  18059. :root.theme-dark {
  18060. --f7-messagebar-bg-color: var(--f7-bars-bg-color);
  18061. --f7-messagebar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
  18062. }
  18063. .ios {
  18064. --f7-messagebar-height: 44px;
  18065. --f7-messagebar-font-size: 17px;
  18066. /*
  18067. --f7-messagebar-link-color: var(--f7-theme-color);
  18068. */
  18069. --f7-messagebar-border-color: transparent;
  18070. --f7-messagebar-textarea-border-radius: 17px;
  18071. --f7-messagebar-textarea-padding: 6px 16px;
  18072. --f7-messagebar-textarea-height: 34px;
  18073. --f7-messagebar-textarea-font-size: 17px;
  18074. --f7-messagebar-textarea-line-height: 20px;
  18075. --f7-messagebar-sheet-bg-color: #d1d5da;
  18076. --f7-messagebar-attachment-border-radius: 12px;
  18077. --f7-messagebar-textarea-text-color: #000;
  18078. --f7-messagebar-textarea-border: 1px solid #c8c8cd;
  18079. --f7-messagebar-attachments-border-color: #c8c8cd;
  18080. }
  18081. .ios .theme-dark,
  18082. .ios.theme-dark {
  18083. --f7-messagebar-textarea-text-color: #fff;
  18084. --f7-messagebar-textarea-border: 1px solid var(--f7-bars-border-color);
  18085. --f7-messagebar-attachments-border-color: var(--f7-bars-border-color);
  18086. }
  18087. .md {
  18088. --f7-messagebar-height: 48px;
  18089. --f7-messagebar-font-size: 16px;
  18090. --f7-messagebar-textarea-border-radius: 0px;
  18091. --f7-messagebar-textarea-padding: 5px 8px;
  18092. --f7-messagebar-textarea-height: 32px;
  18093. --f7-messagebar-textarea-font-size: 16px;
  18094. --f7-messagebar-textarea-line-height: 22px;
  18095. --f7-messagebar-textarea-border: 1px solid transparent;
  18096. --f7-messagebar-sheet-bg-color: #fff;
  18097. --f7-messagebar-attachment-border-radius: 4px;
  18098. --f7-messagebar-link-color: #333;
  18099. --f7-messagebar-border-color: #d1d1d1;
  18100. --f7-messagebar-textarea-text-color: #333;
  18101. --f7-messagebar-attachments-border-color: #ddd;
  18102. }
  18103. .md .theme-dark,
  18104. .md.theme-dark {
  18105. --f7-messagebar-border-color: transparent;
  18106. --f7-messagebar-link-color: rgba(255, 255, 255, 0.87);
  18107. --f7-messagebar-textarea-text-color: rgba(255, 255, 255, 0.87);
  18108. --f7-messagebar-attachments-border-color: rgba(255, 255, 255, 0.2);
  18109. }
  18110. .aurora {
  18111. --f7-messagebar-height: 38px;
  18112. --f7-messagebar-font-size: 14px;
  18113. /*
  18114. --f7-messagebar-link-color: var(--f7-theme-color);
  18115. */
  18116. --f7-messagebar-border-color: transparent;
  18117. --f7-messagebar-textarea-border-radius: 12px;
  18118. --f7-messagebar-textarea-padding: 3px 10px;
  18119. --f7-messagebar-textarea-height: 24px;
  18120. --f7-messagebar-textarea-font-size: 13px;
  18121. --f7-messagebar-textarea-line-height: 16px;
  18122. --f7-messagebar-sheet-bg-color: #fff;
  18123. --f7-messagebar-attachment-border-radius: 12px;
  18124. --f7-messagebar-textarea-text-color: #000;
  18125. --f7-messagebar-textarea-border: 1px solid #c8c8cd;
  18126. --f7-messagebar-attachments-border-color: #c8c8cd;
  18127. }
  18128. .aurora .theme-dark,
  18129. .aurora.theme-dark {
  18130. --f7-messagebar-textarea-text-color: #fff;
  18131. --f7-messagebar-textarea-border: 1px solid var(--f7-bars-border-color);
  18132. --f7-messagebar-attachments-border-color: var(--f7-bars-border-color);
  18133. }
  18134. .messagebar {
  18135. transform: translate3d(0, 0, 0);
  18136. background: var(--f7-messagebar-bg-color);
  18137. height: auto;
  18138. min-height: var(--f7-messagebar-height);
  18139. font-size: var(--f7-messagebar-font-size);
  18140. padding-bottom: var(--f7-safe-area-bottom);
  18141. bottom: 0;
  18142. }
  18143. .messagebar:before {
  18144. content: '';
  18145. position: absolute;
  18146. background-color: var(--f7-messagebar-border-color);
  18147. display: block;
  18148. z-index: 15;
  18149. top: 0;
  18150. right: auto;
  18151. bottom: auto;
  18152. left: 0;
  18153. height: 1px;
  18154. width: 100%;
  18155. transform-origin: 50% 0%;
  18156. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  18157. }
  18158. .messagebar:after {
  18159. content: '';
  18160. position: absolute;
  18161. right: 0;
  18162. width: 100%;
  18163. bottom: 100%;
  18164. height: 8px;
  18165. top: auto;
  18166. pointer-events: none;
  18167. background: var(--f7-messagebar-shadow-image);
  18168. transform: translate3d(0, 0, 0);
  18169. }
  18170. @supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  18171. .ios-translucent-bars .messagebar {
  18172. background-color: rgba(var(--f7-messagebar-bg-color-rgb), var(--f7-bars-translucent-opacity));
  18173. -webkit-backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
  18174. backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
  18175. }
  18176. }
  18177. .messagebar.no-hairline:before,
  18178. .messagebar.no-border:before {
  18179. display: none !important;
  18180. }
  18181. .messagebar.no-shadow:after,
  18182. .messagebar.toolbar-hidden:after {
  18183. display: none !important;
  18184. }
  18185. .messagebar .toolbar-inner {
  18186. top: auto;
  18187. position: relative;
  18188. height: auto;
  18189. bottom: auto;
  18190. padding-left: calc(var(--f7-messagebar-inner-padding-left, var(--f7-toolbar-inner-padding-left)) + var(--f7-safe-area-left));
  18191. padding-right: calc(var(--f7-messagebar-inner-padding-right, var(--f7-toolbar-inner-padding-right)) + var(--f7-safe-area-right));
  18192. flex-direction: row-reverse;
  18193. }
  18194. .messagebar.messagebar-sheet-visible > .toolbar-inner {
  18195. bottom: 0;
  18196. }
  18197. .messagebar .messagebar-area {
  18198. width: 100%;
  18199. flex-shrink: 1;
  18200. overflow: hidden;
  18201. position: relative;
  18202. }
  18203. .messagebar textarea {
  18204. width: 100%;
  18205. flex-shrink: 1;
  18206. background-color: var(--f7-messagebar-textarea-bg-color);
  18207. border-radius: var(--f7-messagebar-textarea-border-radius);
  18208. padding: var(--f7-messagebar-textarea-padding);
  18209. height: var(--f7-messagebar-textarea-height);
  18210. color: var(--f7-messagebar-textarea-text-color);
  18211. font-size: var(--f7-messagebar-textarea-font-size);
  18212. line-height: var(--f7-messagebar-textarea-line-height);
  18213. border: var(--f7-messagebar-textarea-border);
  18214. }
  18215. .messagebar a.link {
  18216. align-self: flex-end;
  18217. flex-shrink: 0;
  18218. color: var(--f7-messagebar-link-color, var(--f7-theme-color));
  18219. }
  18220. .messagebar-attachments {
  18221. width: 100%;
  18222. overflow: auto;
  18223. -webkit-overflow-scrolling: touch;
  18224. font-size: 0;
  18225. white-space: nowrap;
  18226. box-sizing: border-box;
  18227. position: relative;
  18228. }
  18229. .messagebar:not(.messagebar-attachments-visible) .messagebar-attachments {
  18230. display: none;
  18231. }
  18232. .messagebar-attachment {
  18233. background-size: cover;
  18234. background-position: center;
  18235. background-repeat: no-repeat;
  18236. display: inline-block;
  18237. vertical-align: middle;
  18238. white-space: normal;
  18239. height: var(--f7-messagebar-attachment-height);
  18240. position: relative;
  18241. border-radius: var(--f7-messagebar-attachment-border-radius);
  18242. }
  18243. @media (orientation: landscape) {
  18244. .messagebar-attachment {
  18245. height: var(--f7-messagebar-attachment-landscape-height);
  18246. }
  18247. }
  18248. .messagebar-attachment img {
  18249. display: block;
  18250. width: auto;
  18251. height: 100%;
  18252. border-radius: var(--f7-messagebar-attachment-border-radius);
  18253. }
  18254. .messagebar-attachment + .messagebar-attachment {
  18255. margin-right: 8px;
  18256. }
  18257. .messagebar-sheet {
  18258. overflow: auto;
  18259. -webkit-overflow-scrolling: touch;
  18260. display: flex;
  18261. flex-wrap: wrap;
  18262. flex-direction: column;
  18263. align-content: flex-start;
  18264. height: var(--f7-messagebar-sheet-height);
  18265. background-color: var(--f7-messagebar-sheet-bg-color);
  18266. padding-left: var(--f7-safe-area-left);
  18267. padding-right: var(--f7-safe-area-right);
  18268. }
  18269. @media (orientation: landscape) {
  18270. .messagebar-sheet {
  18271. height: var(--f7-messagebar-sheet-landscape-height);
  18272. }
  18273. }
  18274. .messagebar-sheet-image,
  18275. .messagebar-sheet-item {
  18276. box-sizing: border-box;
  18277. flex-shrink: 0;
  18278. margin-top: 1px;
  18279. position: relative;
  18280. overflow: hidden;
  18281. height: calc((var(--f7-messagebar-sheet-height) - 2px) / 2);
  18282. width: calc((var(--f7-messagebar-sheet-height) - 2px) / 2);
  18283. margin-right: 1px;
  18284. }
  18285. @media (orientation: landscape) {
  18286. .messagebar-sheet-image,
  18287. .messagebar-sheet-item {
  18288. width: calc((var(--f7-messagebar-sheet-landscape-height) - 2px) / 2);
  18289. height: calc((var(--f7-messagebar-sheet-landscape-height) - 2px) / 2);
  18290. }
  18291. }
  18292. .messagebar-sheet-image .icon-checkbox,
  18293. .messagebar-sheet-item .icon-checkbox,
  18294. .messagebar-sheet-image .icon-radio,
  18295. .messagebar-sheet-item .icon-radio {
  18296. position: absolute;
  18297. right: 8px;
  18298. bottom: 8px;
  18299. }
  18300. .messagebar-sheet-image {
  18301. background-size: cover;
  18302. background-position: center;
  18303. background-repeat: no-repeat;
  18304. }
  18305. .messagebar-attachment-delete {
  18306. display: block;
  18307. position: absolute;
  18308. border-radius: 50%;
  18309. box-sizing: border-box;
  18310. cursor: pointer;
  18311. box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
  18312. }
  18313. .messagebar-attachment-delete:after,
  18314. .messagebar-attachment-delete:before {
  18315. position: absolute;
  18316. content: '';
  18317. left: 50%;
  18318. top: 50%;
  18319. }
  18320. .messagebar-attachment-delete:after {
  18321. transform: rotate(45deg);
  18322. }
  18323. .messagebar-attachment-delete:before {
  18324. transform: rotate(-45deg);
  18325. }
  18326. .messagebar:not(.messagebar-sheet-visible) .messagebar-sheet {
  18327. display: none;
  18328. }
  18329. .messagebar ~ * {
  18330. --f7-page-toolbar-bottom-offset: var(--f7-messagebar-height);
  18331. }
  18332. .ios .messagebar a.link.icon-only:first-child {
  18333. margin-left: -8px;
  18334. }
  18335. .ios .messagebar a.link.icon-only:last-child {
  18336. margin-right: -8px;
  18337. }
  18338. .ios .messagebar a.link:not(.icon-only) + .messagebar-area {
  18339. margin-left: 8px;
  18340. }
  18341. .ios .messagebar .messagebar-area + a.link:not(.icon-only) {
  18342. margin-left: 8px;
  18343. }
  18344. .ios .messagebar-area {
  18345. margin-top: 5px;
  18346. margin-bottom: 5px;
  18347. }
  18348. .ios .messagebar-attachments {
  18349. padding: 5px;
  18350. border-radius: var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius) 0 0;
  18351. border: 1px solid var(--f7-messagebar-attachments-border-color);
  18352. border-bottom: none;
  18353. }
  18354. .ios .messagebar-attachments-visible .messagebar-attachments + textarea {
  18355. border-radius: 0 0 var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius);
  18356. }
  18357. .ios .messagebar-attachment {
  18358. font-size: 14px;
  18359. }
  18360. .ios .messagebar-attachment-delete {
  18361. right: 5px;
  18362. top: 5px;
  18363. width: 20px;
  18364. height: 20px;
  18365. background: #7d7e80;
  18366. border: 2px solid #fff;
  18367. }
  18368. .ios .messagebar-attachment-delete:after,
  18369. .ios .messagebar-attachment-delete:before {
  18370. width: 10px;
  18371. height: 2px;
  18372. background: #fff;
  18373. margin-left: -5px;
  18374. margin-top: -1px;
  18375. }
  18376. .md .messagebar-attachments {
  18377. padding: 8px;
  18378. border-bottom: 1px solid var(--f7-messagebar-attachments-border-color);
  18379. }
  18380. .md .messagebar-area {
  18381. margin-top: 8px;
  18382. margin-bottom: 8px;
  18383. }
  18384. .md .messagebar-sheet-image .icon-checkbox,
  18385. .md .messagebar-sheet-item .icon-checkbox {
  18386. border-color: #fff;
  18387. background: rgba(255, 255, 255, 0.25);
  18388. box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  18389. }
  18390. .md .messagebar-attachment-delete {
  18391. right: 8px;
  18392. top: 8px;
  18393. width: 24px;
  18394. height: 24px;
  18395. background-color: var(--f7-theme-color);
  18396. border-radius: 4px;
  18397. }
  18398. .md .messagebar-attachment-delete:after,
  18399. .md .messagebar-attachment-delete:before {
  18400. width: 14px;
  18401. height: 2px;
  18402. background: #fff;
  18403. margin-left: -7px;
  18404. margin-top: -1px;
  18405. }
  18406. .aurora .messagebar a.link + .messagebar-area {
  18407. margin-left: 5px;
  18408. }
  18409. .aurora .messagebar .messagebar-area + a.link {
  18410. margin-left: 5px;
  18411. }
  18412. .aurora .messagebar-area {
  18413. margin-top: 5px;
  18414. margin-bottom: 5px;
  18415. }
  18416. .aurora .messagebar-sheet-image .icon-checkbox,
  18417. .aurora .messagebar-sheet-item .icon-checkbox {
  18418. background: rgba(255, 255, 255, 0.25);
  18419. }
  18420. .aurora .messagebar-attachments {
  18421. padding: 5px;
  18422. border-radius: var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius) 0 0;
  18423. border: 1px solid var(--f7-messagebar-attachments-border-color);
  18424. border-bottom: none;
  18425. }
  18426. .aurora .messagebar-attachments-visible .messagebar-attachments + textarea {
  18427. border-radius: 0 0 var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius);
  18428. }
  18429. .aurora .messagebar-attachment {
  18430. font-size: 14px;
  18431. }
  18432. .aurora .messagebar-attachment-delete {
  18433. right: 5px;
  18434. top: 5px;
  18435. width: 14px;
  18436. height: 14px;
  18437. background: #808080;
  18438. }
  18439. .aurora .messagebar-attachment-delete:after,
  18440. .aurora .messagebar-attachment-delete:before {
  18441. width: 8px;
  18442. height: 1px;
  18443. background: #fff;
  18444. margin-left: -4px;
  18445. margin-top: -1px;
  18446. }
  18447. /* === Swiper === */
  18448. @font-face {
  18449. font-family: 'swiper-icons';
  18450. src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff");
  18451. font-weight: 400;
  18452. font-style: normal;
  18453. }
  18454. :root {
  18455. --swiper-theme-color: #007aff;
  18456. }
  18457. .swiper-container {
  18458. margin-left: auto;
  18459. margin-right: auto;
  18460. position: relative;
  18461. overflow: hidden;
  18462. list-style: none;
  18463. padding: 0;
  18464. /* Fix of Webkit flickering */
  18465. z-index: 1;
  18466. }
  18467. .swiper-container-vertical > .swiper-wrapper {
  18468. flex-direction: column;
  18469. }
  18470. .swiper-wrapper {
  18471. position: relative;
  18472. width: 100%;
  18473. height: 100%;
  18474. z-index: 1;
  18475. display: flex;
  18476. transition-property: transform;
  18477. box-sizing: content-box;
  18478. }
  18479. .swiper-container-android .swiper-slide,
  18480. .swiper-wrapper {
  18481. transform: translate3d(0px, 0, 0);
  18482. }
  18483. .swiper-container-multirow > .swiper-wrapper {
  18484. flex-wrap: wrap;
  18485. }
  18486. .swiper-container-multirow-column > .swiper-wrapper {
  18487. flex-wrap: wrap;
  18488. flex-direction: column;
  18489. }
  18490. .swiper-container-free-mode > .swiper-wrapper {
  18491. transition-timing-function: ease-out;
  18492. margin: 0 auto;
  18493. }
  18494. .swiper-slide {
  18495. flex-shrink: 0;
  18496. width: 100%;
  18497. height: 100%;
  18498. position: relative;
  18499. transition-property: transform;
  18500. }
  18501. .swiper-slide-invisible-blank {
  18502. visibility: hidden;
  18503. }
  18504. /* Auto Height */
  18505. .swiper-container-autoheight,
  18506. .swiper-container-autoheight .swiper-slide {
  18507. height: auto;
  18508. }
  18509. .swiper-container-autoheight .swiper-wrapper {
  18510. align-items: flex-start;
  18511. transition-property: transform, height;
  18512. }
  18513. /* 3D Effects */
  18514. .swiper-container-3d {
  18515. perspective: 1200px;
  18516. }
  18517. .swiper-container-3d .swiper-wrapper,
  18518. .swiper-container-3d .swiper-slide,
  18519. .swiper-container-3d .swiper-slide-shadow-left,
  18520. .swiper-container-3d .swiper-slide-shadow-right,
  18521. .swiper-container-3d .swiper-slide-shadow-top,
  18522. .swiper-container-3d .swiper-slide-shadow-bottom,
  18523. .swiper-container-3d .swiper-cube-shadow {
  18524. transform-style: preserve-3d;
  18525. }
  18526. .swiper-container-3d .swiper-slide-shadow-left,
  18527. .swiper-container-3d .swiper-slide-shadow-right,
  18528. .swiper-container-3d .swiper-slide-shadow-top,
  18529. .swiper-container-3d .swiper-slide-shadow-bottom {
  18530. position: absolute;
  18531. left: 0;
  18532. top: 0;
  18533. width: 100%;
  18534. height: 100%;
  18535. pointer-events: none;
  18536. z-index: 10;
  18537. }
  18538. .swiper-container-3d .swiper-slide-shadow-left {
  18539. background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  18540. }
  18541. .swiper-container-3d .swiper-slide-shadow-right {
  18542. background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  18543. }
  18544. .swiper-container-3d .swiper-slide-shadow-top {
  18545. background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  18546. }
  18547. .swiper-container-3d .swiper-slide-shadow-bottom {
  18548. background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  18549. }
  18550. /* CSS Mode */
  18551. .swiper-container-css-mode > .swiper-wrapper {
  18552. overflow: auto;
  18553. scrollbar-width: none;
  18554. /* For Firefox */
  18555. -ms-overflow-style: none;
  18556. /* For Internet Explorer and Edge */
  18557. }
  18558. .swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar {
  18559. display: none;
  18560. }
  18561. .swiper-container-css-mode > .swiper-wrapper > .swiper-slide {
  18562. scroll-snap-align: start start;
  18563. }
  18564. .swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper {
  18565. scroll-snap-type: x mandatory;
  18566. }
  18567. .swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper {
  18568. scroll-snap-type: y mandatory;
  18569. }
  18570. /* a11y */
  18571. .swiper-container .swiper-notification {
  18572. position: absolute;
  18573. left: 0;
  18574. top: 0;
  18575. pointer-events: none;
  18576. opacity: 0;
  18577. z-index: -1000;
  18578. }
  18579. .swiper-container-cube {
  18580. overflow: visible;
  18581. }
  18582. .swiper-container-cube .swiper-slide {
  18583. pointer-events: none;
  18584. -webkit-backface-visibility: hidden;
  18585. backface-visibility: hidden;
  18586. z-index: 1;
  18587. visibility: hidden;
  18588. transform-origin: 0 0;
  18589. width: 100%;
  18590. height: 100%;
  18591. }
  18592. .swiper-container-cube .swiper-slide .swiper-slide {
  18593. pointer-events: none;
  18594. }
  18595. .swiper-container-cube.swiper-container-rtl .swiper-slide {
  18596. transform-origin: 100% 0;
  18597. }
  18598. .swiper-container-cube .swiper-slide-active,
  18599. .swiper-container-cube .swiper-slide-active .swiper-slide-active {
  18600. pointer-events: auto;
  18601. }
  18602. .swiper-container-cube .swiper-slide-active,
  18603. .swiper-container-cube .swiper-slide-next,
  18604. .swiper-container-cube .swiper-slide-prev,
  18605. .swiper-container-cube .swiper-slide-next + .swiper-slide {
  18606. pointer-events: auto;
  18607. visibility: visible;
  18608. }
  18609. .swiper-container-cube .swiper-slide-shadow-top,
  18610. .swiper-container-cube .swiper-slide-shadow-bottom,
  18611. .swiper-container-cube .swiper-slide-shadow-left,
  18612. .swiper-container-cube .swiper-slide-shadow-right {
  18613. z-index: 0;
  18614. -webkit-backface-visibility: hidden;
  18615. backface-visibility: hidden;
  18616. }
  18617. .swiper-container-cube .swiper-cube-shadow {
  18618. position: absolute;
  18619. left: 0;
  18620. bottom: 0px;
  18621. width: 100%;
  18622. height: 100%;
  18623. background: #000;
  18624. opacity: 0.6;
  18625. -webkit-filter: blur(50px);
  18626. filter: blur(50px);
  18627. z-index: 0;
  18628. }
  18629. .swiper-container-fade.swiper-container-free-mode .swiper-slide {
  18630. transition-timing-function: ease-out;
  18631. }
  18632. .swiper-container-fade .swiper-slide {
  18633. pointer-events: none;
  18634. transition-property: opacity;
  18635. }
  18636. .swiper-container-fade .swiper-slide .swiper-slide {
  18637. pointer-events: none;
  18638. }
  18639. .swiper-container-fade .swiper-slide-active,
  18640. .swiper-container-fade .swiper-slide-active .swiper-slide-active {
  18641. pointer-events: auto;
  18642. }
  18643. .swiper-container-flip {
  18644. overflow: visible;
  18645. }
  18646. .swiper-container-flip .swiper-slide {
  18647. pointer-events: none;
  18648. -webkit-backface-visibility: hidden;
  18649. backface-visibility: hidden;
  18650. z-index: 1;
  18651. }
  18652. .swiper-container-flip .swiper-slide .swiper-slide {
  18653. pointer-events: none;
  18654. }
  18655. .swiper-container-flip .swiper-slide-active,
  18656. .swiper-container-flip .swiper-slide-active .swiper-slide-active {
  18657. pointer-events: auto;
  18658. }
  18659. .swiper-container-flip .swiper-slide-shadow-top,
  18660. .swiper-container-flip .swiper-slide-shadow-bottom,
  18661. .swiper-container-flip .swiper-slide-shadow-left,
  18662. .swiper-container-flip .swiper-slide-shadow-right {
  18663. z-index: 0;
  18664. -webkit-backface-visibility: hidden;
  18665. backface-visibility: hidden;
  18666. }
  18667. /* Preloader */
  18668. :root {
  18669. /*
  18670. --swiper-preloader-color: var(--swiper-theme-color);
  18671. */
  18672. }
  18673. .swiper-lazy-preloader {
  18674. width: 42px;
  18675. height: 42px;
  18676. position: absolute;
  18677. left: 50%;
  18678. top: 50%;
  18679. margin-left: -21px;
  18680. margin-top: -21px;
  18681. z-index: 10;
  18682. transform-origin: 50%;
  18683. animation: swiper-preloader-spin 1s infinite linear;
  18684. box-sizing: border-box;
  18685. border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  18686. border-radius: 50%;
  18687. border-top-color: transparent;
  18688. }
  18689. .swiper-lazy-preloader-white {
  18690. --swiper-preloader-color: #fff;
  18691. }
  18692. .swiper-lazy-preloader-black {
  18693. --swiper-preloader-color: #000;
  18694. }
  18695. @keyframes swiper-preloader-spin {
  18696. 100% {
  18697. transform: rotate(360deg);
  18698. }
  18699. }
  18700. :root {
  18701. --swiper-navigation-size: 44px;
  18702. /*
  18703. --swiper-navigation-color: var(--swiper-theme-color);
  18704. */
  18705. }
  18706. .swiper-button-prev,
  18707. .swiper-button-next {
  18708. position: absolute;
  18709. top: 50%;
  18710. width: calc(var(--swiper-navigation-size) / 44 * 27);
  18711. height: var(--swiper-navigation-size);
  18712. margin-top: calc(-1 * var(--swiper-navigation-size) / 2);
  18713. z-index: 10;
  18714. cursor: pointer;
  18715. display: flex;
  18716. align-items: center;
  18717. justify-content: center;
  18718. color: var(--swiper-navigation-color, var(--swiper-theme-color));
  18719. }
  18720. .swiper-button-prev.swiper-button-disabled,
  18721. .swiper-button-next.swiper-button-disabled {
  18722. opacity: 0.35;
  18723. cursor: auto;
  18724. pointer-events: none;
  18725. }
  18726. .swiper-button-prev:after,
  18727. .swiper-button-next:after {
  18728. font-family: swiper-icons;
  18729. font-size: var(--swiper-navigation-size);
  18730. text-transform: none !important;
  18731. letter-spacing: 0;
  18732. text-transform: none;
  18733. font-variant: initial;
  18734. line-height: 1;
  18735. }
  18736. .swiper-button-prev,
  18737. .swiper-container-rtl .swiper-button-next {
  18738. left: 10px;
  18739. right: auto;
  18740. }
  18741. .swiper-button-prev:after,
  18742. .swiper-container-rtl .swiper-button-next:after {
  18743. content: 'prev';
  18744. }
  18745. .swiper-button-next,
  18746. .swiper-container-rtl .swiper-button-prev {
  18747. right: 10px;
  18748. left: auto;
  18749. }
  18750. .swiper-button-next:after,
  18751. .swiper-container-rtl .swiper-button-prev:after {
  18752. content: 'next';
  18753. }
  18754. .swiper-button-lock {
  18755. display: none;
  18756. }
  18757. :root {
  18758. /*
  18759. --swiper-pagination-color: var(--swiper-theme-color);
  18760. */
  18761. }
  18762. .swiper-pagination {
  18763. position: absolute;
  18764. text-align: center;
  18765. transition: 300ms opacity;
  18766. transform: translate3d(0, 0, 0);
  18767. z-index: 10;
  18768. }
  18769. .swiper-pagination.swiper-pagination-hidden {
  18770. opacity: 0;
  18771. }
  18772. /* Common Styles */
  18773. .swiper-pagination-fraction,
  18774. .swiper-pagination-custom,
  18775. .swiper-container-horizontal > .swiper-pagination-bullets {
  18776. bottom: 10px;
  18777. left: 0;
  18778. width: 100%;
  18779. }
  18780. /* Bullets */
  18781. .swiper-pagination-bullets-dynamic {
  18782. overflow: hidden;
  18783. font-size: 0;
  18784. }
  18785. .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  18786. transform: scale(0.33);
  18787. position: relative;
  18788. }
  18789. .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  18790. transform: scale(1);
  18791. }
  18792. .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  18793. transform: scale(1);
  18794. }
  18795. .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  18796. transform: scale(0.66);
  18797. }
  18798. .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  18799. transform: scale(0.33);
  18800. }
  18801. .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  18802. transform: scale(0.66);
  18803. }
  18804. .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  18805. transform: scale(0.33);
  18806. }
  18807. .swiper-pagination-bullet {
  18808. width: 8px;
  18809. height: 8px;
  18810. display: inline-block;
  18811. border-radius: 100%;
  18812. background: #000;
  18813. opacity: 0.2;
  18814. }
  18815. button.swiper-pagination-bullet {
  18816. border: none;
  18817. margin: 0;
  18818. padding: 0;
  18819. box-shadow: none;
  18820. -webkit-appearance: none;
  18821. -moz-appearance: none;
  18822. appearance: none;
  18823. }
  18824. .swiper-pagination-clickable .swiper-pagination-bullet {
  18825. cursor: pointer;
  18826. }
  18827. .swiper-pagination-bullet-active {
  18828. opacity: 1;
  18829. background: var(--swiper-pagination-color, var(--swiper-theme-color));
  18830. }
  18831. .swiper-container-vertical > .swiper-pagination-bullets {
  18832. right: 10px;
  18833. top: 50%;
  18834. transform: translate3d(0px, -50%, 0);
  18835. }
  18836. .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  18837. margin: 6px 0;
  18838. display: block;
  18839. }
  18840. .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  18841. top: 50%;
  18842. transform: translateY(-50%);
  18843. width: 8px;
  18844. }
  18845. .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  18846. display: inline-block;
  18847. transition: 200ms transform, 200ms top;
  18848. }
  18849. .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  18850. margin: 0 4px;
  18851. }
  18852. .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  18853. left: 50%;
  18854. transform: translateX(-50%);
  18855. white-space: nowrap;
  18856. }
  18857. .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  18858. transition: 200ms transform, 200ms left;
  18859. }
  18860. .swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  18861. transition: 200ms transform, 200ms right;
  18862. }
  18863. /* Progress */
  18864. .swiper-pagination-progressbar {
  18865. background: rgba(0, 0, 0, 0.25);
  18866. position: absolute;
  18867. }
  18868. .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  18869. background: var(--swiper-pagination-color, var(--swiper-theme-color));
  18870. position: absolute;
  18871. left: 0;
  18872. top: 0;
  18873. width: 100%;
  18874. height: 100%;
  18875. transform: scale(0);
  18876. transform-origin: left top;
  18877. }
  18878. .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  18879. transform-origin: right top;
  18880. }
  18881. .swiper-container-horizontal > .swiper-pagination-progressbar,
  18882. .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  18883. width: 100%;
  18884. height: 4px;
  18885. left: 0;
  18886. top: 0;
  18887. }
  18888. .swiper-container-vertical > .swiper-pagination-progressbar,
  18889. .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  18890. width: 4px;
  18891. height: 100%;
  18892. left: 0;
  18893. top: 0;
  18894. }
  18895. .swiper-pagination-lock {
  18896. display: none;
  18897. }
  18898. /* Scrollbar */
  18899. .swiper-scrollbar {
  18900. border-radius: 10px;
  18901. position: relative;
  18902. -ms-touch-action: none;
  18903. background: rgba(0, 0, 0, 0.1);
  18904. }
  18905. .swiper-container-horizontal > .swiper-scrollbar {
  18906. position: absolute;
  18907. left: 1%;
  18908. bottom: 3px;
  18909. z-index: 50;
  18910. height: 5px;
  18911. width: 98%;
  18912. }
  18913. .swiper-container-vertical > .swiper-scrollbar {
  18914. position: absolute;
  18915. right: 3px;
  18916. top: 1%;
  18917. z-index: 50;
  18918. width: 5px;
  18919. height: 98%;
  18920. }
  18921. .swiper-scrollbar-drag {
  18922. height: 100%;
  18923. width: 100%;
  18924. position: relative;
  18925. background: rgba(0, 0, 0, 0.5);
  18926. border-radius: 10px;
  18927. left: 0;
  18928. top: 0;
  18929. }
  18930. .swiper-scrollbar-cursor-drag {
  18931. cursor: move;
  18932. }
  18933. .swiper-scrollbar-lock {
  18934. display: none;
  18935. }
  18936. .swiper-zoom-container {
  18937. width: 100%;
  18938. height: 100%;
  18939. display: flex;
  18940. justify-content: center;
  18941. align-items: center;
  18942. text-align: center;
  18943. }
  18944. .swiper-zoom-container > img,
  18945. .swiper-zoom-container > svg,
  18946. .swiper-zoom-container > canvas {
  18947. max-width: 100%;
  18948. max-height: 100%;
  18949. object-fit: contain;
  18950. }
  18951. .swiper-slide-zoomed {
  18952. cursor: move;
  18953. }
  18954. :root {
  18955. --swiper-theme-color: var(--f7-theme-color);
  18956. }
  18957. /* === Photo Browser === */
  18958. :root {
  18959. --f7-photobrowser-bg-color: #fff;
  18960. --f7-photobrowser-bars-bg-image: none;
  18961. /*
  18962. --f7-photobrowser-bars-bg-color: rgba(var(--f7-bars-bg-color-rgb), 0.95);
  18963. --f7-photobrowser-bars-text-color: var(--f7-bars-text-color);
  18964. --f7-photobrowser-bars-link-color: var(--f7-bars-link-color);
  18965. */
  18966. --f7-photobrowser-caption-font-size: 14px;
  18967. --f7-photobrowser-caption-light-text-color: #000;
  18968. --f7-photobrowser-caption-light-bg-color: rgba(255, 255, 255, 0.8);
  18969. --f7-photobrowser-caption-dark-text-color: #fff;
  18970. --f7-photobrowser-caption-dark-bg-color: rgba(0, 0, 0, 0.8);
  18971. --f7-photobrowser-exposed-bg-color: #000;
  18972. --f7-photobrowser-dark-bg-color: #000;
  18973. --f7-photobrowser-dark-bars-bg-color: rgba(27, 27, 27, 0.8);
  18974. --f7-photobrowser-dark-bars-text-color: #fff;
  18975. --f7-photobrowser-dark-bars-link-color: #fff;
  18976. }
  18977. .photo-browser {
  18978. position: absolute;
  18979. left: 0;
  18980. top: 0;
  18981. width: 100%;
  18982. height: 100%;
  18983. z-index: 400;
  18984. }
  18985. .photo-browser-standalone.modal-in {
  18986. transition-duration: 0ms;
  18987. animation: photo-browser-in 400ms;
  18988. }
  18989. .photo-browser-standalone.modal-out {
  18990. transition-duration: 0ms;
  18991. animation: photo-browser-out 400ms !important;
  18992. }
  18993. .photo-browser-standalone.modal-out.swipe-close-to-bottom,
  18994. .photo-browser-standalone.modal-out.swipe-close-to-top {
  18995. animation: none !important;
  18996. }
  18997. .photo-browser-standalone.photo-browser-transitioning {
  18998. transition: 400ms;
  18999. transition-property: transform;
  19000. animation: none !important;
  19001. }
  19002. .photo-browser-popup.modal-out.swipe-close-to-bottom,
  19003. .photo-browser-popup.modal-out.swipe-close-to-top {
  19004. transition-duration: 300ms;
  19005. }
  19006. .photo-browser-popup.modal-out.swipe-close-to-bottom {
  19007. transform: translate3d(0, 100vh, 0);
  19008. }
  19009. .photo-browser-popup.modal-out.swipe-close-to-top {
  19010. transform: translate3d(0, -100vh, 0);
  19011. }
  19012. .photo-browser-page {
  19013. background: none;
  19014. }
  19015. .photo-browser-page .toolbar {
  19016. transform: none;
  19017. }
  19018. .photo-browser-popup {
  19019. background: none;
  19020. }
  19021. .photo-browser-of {
  19022. margin: 0 5px;
  19023. }
  19024. .photo-browser-captions {
  19025. pointer-events: none;
  19026. position: absolute;
  19027. left: 0;
  19028. width: 100%;
  19029. bottom: var(--f7-safe-area-bottom);
  19030. z-index: 10;
  19031. opacity: 1;
  19032. transition: 400ms;
  19033. }
  19034. .photo-browser-captions.photo-browser-captions-exposed {
  19035. opacity: 0;
  19036. }
  19037. .toolbar ~ .photo-browser-captions {
  19038. bottom: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
  19039. transform: translate3d(0, 0px, 0);
  19040. }
  19041. .toolbar ~ .photo-browser-captions.photo-browser-captions-exposed {
  19042. transform: translate3d(0, 0px, 0);
  19043. }
  19044. .photo-browser-caption {
  19045. box-sizing: border-box;
  19046. transition: 300ms;
  19047. position: absolute;
  19048. bottom: 0;
  19049. left: 0;
  19050. opacity: 0;
  19051. padding: 4px 5px;
  19052. width: 100%;
  19053. text-align: center;
  19054. font-size: var(--f7-photobrowser-caption-font-size);
  19055. }
  19056. .photo-browser-caption:empty {
  19057. display: none;
  19058. }
  19059. .photo-browser-caption.photo-browser-caption-active {
  19060. opacity: 1;
  19061. }
  19062. .photo-browser-captions-light .photo-browser-caption {
  19063. color: var(--f7-photobrowser-caption-light-text-color);
  19064. background: var(--f7-photobrowser-caption-light-bg-color);
  19065. }
  19066. .photo-browser-captions-dark .photo-browser-caption {
  19067. color: var(--f7-photobrowser-caption-dark-text-color);
  19068. background: var(--f7-photobrowser-caption-dark-bg-color);
  19069. }
  19070. .photo-browser-swiper-container {
  19071. position: absolute;
  19072. left: 0;
  19073. top: 0;
  19074. width: 100%;
  19075. height: 100%;
  19076. overflow: hidden;
  19077. background: var(--f7-photobrowser-bg-color);
  19078. transition: 400ms;
  19079. transition-property: background-color;
  19080. }
  19081. .photo-browser-prev.swiper-button-disabled,
  19082. .photo-browser-next.swiper-button-disabled {
  19083. opacity: 0.3;
  19084. pointer-events: none;
  19085. }
  19086. .photo-browser-slide {
  19087. width: 100%;
  19088. height: 100%;
  19089. position: relative;
  19090. overflow: hidden;
  19091. display: flex;
  19092. justify-content: center;
  19093. align-items: center;
  19094. flex-shrink: 0;
  19095. box-sizing: border-box;
  19096. }
  19097. .photo-browser-slide span.swiper-zoom-container {
  19098. display: none;
  19099. }
  19100. .photo-browser-slide img {
  19101. width: auto;
  19102. height: auto;
  19103. max-width: 100%;
  19104. max-height: 100%;
  19105. display: none;
  19106. }
  19107. .photo-browser-slide.swiper-slide-active span.swiper-zoom-container,
  19108. .photo-browser-slide.swiper-slide-next span.swiper-zoom-container,
  19109. .photo-browser-slide.swiper-slide-prev span.swiper-zoom-container {
  19110. display: flex;
  19111. }
  19112. .photo-browser-slide.swiper-slide-active img,
  19113. .photo-browser-slide.swiper-slide-next img,
  19114. .photo-browser-slide.swiper-slide-prev img {
  19115. display: inline;
  19116. }
  19117. .photo-browser-slide.swiper-slide-active.photo-browser-slide-lazy .preloader,
  19118. .photo-browser-slide.swiper-slide-next.photo-browser-slide-lazy .preloader,
  19119. .photo-browser-slide.swiper-slide-prev.photo-browser-slide-lazy .preloader {
  19120. display: block;
  19121. }
  19122. .photo-browser-slide iframe {
  19123. width: 100%;
  19124. height: 100%;
  19125. }
  19126. .photo-browser-slide .preloader {
  19127. display: none;
  19128. position: absolute;
  19129. width: 42px;
  19130. height: 42px;
  19131. margin-left: -21px;
  19132. margin-top: -21px;
  19133. left: 50%;
  19134. top: 50%;
  19135. }
  19136. .photo-browser-page .navbar-bg,
  19137. .navbar-photo-browser .navbar-bg,
  19138. .photo-browser-page .toolbar {
  19139. background-color: var(--f7-photobrowser-bars-bg-color, rgba(var(--f7-bars-bg-color-rgb), 0.95));
  19140. background-image: var(--f7-photobrowser-bars-bg-image);
  19141. }
  19142. .photo-browser-page .navbar,
  19143. .photo-browser-page .toolbar {
  19144. transition: 400ms;
  19145. color: var(--f7-photobrowser-bars-text-color, var(--f7-bars-text-color));
  19146. }
  19147. .photo-browser-page .navbar a,
  19148. .photo-browser-page .toolbar a {
  19149. color: var(--f7-photobrowser-bars-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
  19150. }
  19151. .photo-browser-exposed .navbar,
  19152. .photo-browser-exposed .toolbar {
  19153. opacity: 0;
  19154. visibility: hidden;
  19155. pointer-events: none;
  19156. }
  19157. .photo-browser-exposed .toolbar ~ .photo-browser-captions {
  19158. transform: translate3d(0, var(--f7-toolbar-height), 0);
  19159. }
  19160. .photo-browser-exposed .photo-browser-swiper-container {
  19161. background: var(--f7-photobrowser-exposed-bg-color);
  19162. }
  19163. .photo-browser-exposed .photo-browser-caption {
  19164. color: var(--f7-photobrowser-caption-dark-text-color);
  19165. background: var(--f7-photobrowser-caption-dark-bg-color);
  19166. }
  19167. .view.with-photo-browser-page-exposed .navbar {
  19168. opacity: 0;
  19169. pointer-events: none;
  19170. }
  19171. .photo-browser-page-dark .navbar-bg,
  19172. .navbar-photo-browser-dark .navbar-bg,
  19173. .photo-browser-page-dark .toolbar {
  19174. background: var(--f7-photobrowser-dark-bars-bg-color);
  19175. }
  19176. .photo-browser-page-dark .navbar-bg:before,
  19177. .navbar-photo-browser-dark .navbar-bg:before,
  19178. .photo-browser-page-dark .toolbar:before,
  19179. .photo-browser-page-dark .navbar-bg:after,
  19180. .navbar-photo-browser-dark .navbar-bg:after,
  19181. .photo-browser-page-dark .toolbar:after {
  19182. display: none !important;
  19183. }
  19184. .navbar-photo-browser-dark,
  19185. .photo-browser-dark .navbar,
  19186. .photo-browser-dark .toolbar,
  19187. .photo-browser-dark-page .navbar,
  19188. .photo-browser-dark-page .toolbar {
  19189. --f7-touch-ripple-color: var(--f7-touch-ripple-white);
  19190. --f7-link-highlight-color: var(--f7-link-highlight-white);
  19191. color: var(--f7-photobrowser-dark-bars-text-color);
  19192. }
  19193. .navbar-photo-browser-dark a,
  19194. .photo-browser-dark .navbar a,
  19195. .photo-browser-dark .toolbar a,
  19196. .photo-browser-dark-page .navbar a,
  19197. .photo-browser-dark-page .toolbar a {
  19198. color: var(--f7-photobrowser-dark-bars-link-color);
  19199. }
  19200. .photo-browser-dark .photo-browser-swiper-container,
  19201. .photo-browser-page-dark .photo-browser-swiper-container {
  19202. background: var(--f7-photobrowser-dark-bg-color);
  19203. }
  19204. @keyframes photo-browser-in {
  19205. 0% {
  19206. transform: translate3d(0, 0, 0) scale(0.5);
  19207. opacity: 0;
  19208. }
  19209. 50% {
  19210. transform: translate3d(0, 0, 0) scale(1.05);
  19211. opacity: 1;
  19212. }
  19213. 100% {
  19214. transform: translate3d(0, 0, 0) scale(1);
  19215. opacity: 1;
  19216. }
  19217. }
  19218. @keyframes photo-browser-out {
  19219. 0% {
  19220. transform: translate3d(0, 0, 0) scale(1);
  19221. opacity: 1;
  19222. }
  19223. 50% {
  19224. transform: translate3d(0, 0, 0) scale(1.05);
  19225. opacity: 1;
  19226. }
  19227. 100% {
  19228. transform: translate3d(0, 0, 0) scale(0.5);
  19229. opacity: 0;
  19230. }
  19231. }
  19232. /* === Notifications === */
  19233. :root {
  19234. --f7-notification-max-width: 568px;
  19235. --f7-notification-subtitle-text-transform: none;
  19236. --f7-notification-subtitle-line-height: 1.35;
  19237. --f7-notification-text-text-transform: none;
  19238. --f7-notification-text-font-weight: 400;
  19239. }
  19240. :root .theme-dark,
  19241. :root.theme-dark {
  19242. --f7-notification-subtitle-color: #fff;
  19243. }
  19244. .ios {
  19245. --f7-notification-margin: 8px;
  19246. --f7-notification-padding: 10px;
  19247. --f7-notification-border-radius: 12px;
  19248. --f7-notification-box-shadow: 0px 5px 25px -10px rgba(0, 0, 0, 0.7);
  19249. --f7-notification-icon-size: 20px;
  19250. --f7-notification-title-font-size: 13px;
  19251. --f7-notification-title-text-transform: uppercase;
  19252. --f7-notification-title-line-height: 1.4;
  19253. --f7-notification-title-font-weight: 400;
  19254. --f7-notification-title-letter-spacing: 0.02em;
  19255. --f7-notification-title-right-font-size: 13px;
  19256. --f7-notification-subtitle-font-size: 15px;
  19257. --f7-notification-subtitle-font-weight: 600;
  19258. --f7-notification-text-font-size: 15px;
  19259. --f7-notification-text-line-height: 1.2;
  19260. --f7-notification-bg-color: rgba(250, 250, 250, 0.95);
  19261. --f7-notification-bg-color-rgb: 255, 255, 255;
  19262. --f7-notification-title-color: #000;
  19263. --f7-notification-title-right-color: rgba(0, 0, 0, 0.45);
  19264. --f7-notification-subtitle-color: #000;
  19265. --f7-notification-text-color: #000;
  19266. }
  19267. .ios .theme-dark,
  19268. .ios.theme-dark {
  19269. --f7-notification-bg-color: rgba(30, 30, 30, 0.95);
  19270. --f7-notification-bg-color-rgb: 30, 30, 30;
  19271. --f7-notification-title-color: #fff;
  19272. --f7-notification-text-color: #fff;
  19273. --f7-notification-title-right-color: rgba(255, 255, 255, 0.55);
  19274. }
  19275. .md {
  19276. --f7-notification-margin: 0px;
  19277. --f7-notification-padding: 16px;
  19278. --f7-notification-border-radius: 0px;
  19279. --f7-notification-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.24);
  19280. --f7-notification-icon-size: 16px;
  19281. --f7-notification-title-color: var(--f7-theme-color);
  19282. --f7-notification-title-font-size: 12px;
  19283. --f7-notification-title-text-transform: none;
  19284. --f7-notification-title-line-height: 1;
  19285. --f7-notification-title-font-weight: 400;
  19286. --f7-notification-title-right-font-size: 12px;
  19287. --f7-notification-subtitle-font-size: 14px;
  19288. --f7-notification-subtitle-font-weight: 400;
  19289. --f7-notification-text-font-size: 14px;
  19290. --f7-notification-text-line-height: 1.35;
  19291. --f7-notification-bg-color: #fff;
  19292. --f7-notification-title-right-color: rgba(0, 0, 0, 0.54);
  19293. --f7-notification-subtitle-color: #212121;
  19294. --f7-notification-text-color: rgba(0, 0, 0, 0.54);
  19295. }
  19296. .md .theme-dark,
  19297. .md.theme-dark {
  19298. --f7-notification-bg-color: #242424;
  19299. --f7-notification-title-right-color: rgba(255, 255, 255, 0.54);
  19300. --f7-notification-text-color: rgba(255, 255, 255, 0.54);
  19301. }
  19302. .aurora {
  19303. --f7-notification-margin: 10px;
  19304. --f7-notification-padding: 10px;
  19305. --f7-notification-border-radius: 4px;
  19306. --f7-notification-box-shadow: 0px 5px 25px -10px rgba(0, 0, 0, 0.7);
  19307. --f7-notification-icon-size: 18px;
  19308. --f7-notification-title-font-size: 13px;
  19309. --f7-notification-title-text-transform: uppercase;
  19310. --f7-notification-title-line-height: 1.4;
  19311. --f7-notification-title-font-weight: 500;
  19312. --f7-notification-title-letter-spacing: 0.02em;
  19313. --f7-notification-title-right-font-size: 13px;
  19314. --f7-notification-subtitle-font-size: 12px;
  19315. --f7-notification-subtitle-font-weight: 600;
  19316. --f7-notification-text-font-size: 12px;
  19317. --f7-notification-text-line-height: 1.2;
  19318. --f7-notification-bg-color: #fff;
  19319. --f7-notification-title-color: #000;
  19320. --f7-notification-title-right-color: rgba(255, 255, 255, 0.6);
  19321. --f7-notification-subtitle-color: #000;
  19322. --f7-notification-text-color: #000;
  19323. }
  19324. .aurora .theme-dark,
  19325. .aurora.theme-dark {
  19326. --f7-notification-bg-color: #242424;
  19327. --f7-notification-title-color: #fff;
  19328. --f7-notification-text-color: #fff;
  19329. --f7-notification-title-right-color: rgba(255, 255, 255, 0.54);
  19330. }
  19331. .notification {
  19332. --f7-link-highlight-color: var(--f7-link-highlight-black);
  19333. --f7-touch-ripple-color: var(--f7-touch-ripple-black);
  19334. position: absolute;
  19335. left: var(--f7-notification-margin);
  19336. top: var(--f7-notification-margin);
  19337. width: calc(100% - var(--f7-notification-margin) * 2);
  19338. z-index: 20000;
  19339. font-size: 14px;
  19340. margin: 0;
  19341. border: none;
  19342. display: none;
  19343. box-sizing: border-box;
  19344. transition-property: transform;
  19345. direction: ltr;
  19346. max-width: var(--f7-notification-max-width);
  19347. padding: var(--f7-notification-padding);
  19348. border-radius: var(--f7-notification-border-radius);
  19349. box-shadow: var(--f7-notification-box-shadow);
  19350. background: var(--f7-notification-bg-color);
  19351. margin-top: var(--f7-safe-area-top);
  19352. }
  19353. @supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  19354. .ios-translucent-modals .notification {
  19355. background-color: rgba(var(--f7-notification-bg-color-rgb), 0.8);
  19356. -webkit-backdrop-filter: saturate(180%) blur(20px);
  19357. backdrop-filter: saturate(180%) blur(20px);
  19358. }
  19359. }
  19360. @media (min-width: 568px) {
  19361. .notification {
  19362. left: 50%;
  19363. width: var(--f7-notification-max-width);
  19364. margin-left: calc(-1 * var(--f7-notification-max-width) / 2);
  19365. }
  19366. }
  19367. .notification-title {
  19368. color: var(--f7-notification-title-color, var(--f7-theme-color));
  19369. font-size: var(--f7-notification-title-font-size);
  19370. text-transform: var(--f7-notification-title-text-transform);
  19371. line-height: var(--f7-notification-title-line-height);
  19372. font-weight: var(--f7-notification-title-font-weight);
  19373. letter-spacing: var(--f7-notification-title-letter-spacing);
  19374. }
  19375. .notification-subtitle {
  19376. color: var(--f7-notification-subtitle-color);
  19377. font-size: var(--f7-notification-subtitle-font-size);
  19378. text-transform: var(--f7-notification-subtitle-text-transform);
  19379. line-height: var(--f7-notification-subtitle-line-height);
  19380. font-weight: var(--f7-notification-subtitle-font-weight);
  19381. }
  19382. .notification-text {
  19383. color: var(--f7-notification-text-color);
  19384. font-size: var(--f7-notification-text-font-size);
  19385. text-transform: var(--f7-notification-text-text-transform);
  19386. line-height: var(--f7-notification-text-line-height);
  19387. font-weight: var(--f7-notification-text-font-weight);
  19388. }
  19389. .notification-title-right-text {
  19390. color: var(--f7-notification-title-right-color);
  19391. font-size: var(--f7-notification-title-right-font-size);
  19392. }
  19393. .notification-icon {
  19394. font-size: 0;
  19395. line-height: var(--f7-notification-icon-size);
  19396. }
  19397. .notification-icon i,
  19398. .notification-icon {
  19399. width: var(--f7-notification-icon-size) !important;
  19400. height: var(--f7-notification-icon-size) !important;
  19401. }
  19402. .notification-icon i {
  19403. font-size: var(--f7-notification-icon-size);
  19404. }
  19405. .notification-icon img {
  19406. height: var(--f7-notification-icon-size);
  19407. }
  19408. .notification-header {
  19409. display: flex;
  19410. justify-content: flex-start;
  19411. align-items: center;
  19412. }
  19413. .notification-close-button {
  19414. margin-left: auto;
  19415. cursor: pointer;
  19416. position: relative;
  19417. }
  19418. .notification-close-button:after {
  19419. font-family: 'framework7-core-icons';
  19420. font-weight: normal;
  19421. font-style: normal;
  19422. line-height: 1;
  19423. letter-spacing: normal;
  19424. text-transform: none;
  19425. white-space: nowrap;
  19426. word-wrap: normal;
  19427. direction: ltr;
  19428. -webkit-font-smoothing: antialiased;
  19429. text-rendering: optimizeLegibility;
  19430. -moz-osx-font-smoothing: grayscale;
  19431. font-feature-settings: "liga";
  19432. display: block;
  19433. width: 100%;
  19434. height: 100%;
  19435. font-size: 20px;
  19436. position: absolute;
  19437. left: 50%;
  19438. top: 50%;
  19439. text-align: center;
  19440. }
  19441. .ios .notification {
  19442. transition-duration: 450ms;
  19443. transform: translate3d(0%, -200%, 0);
  19444. }
  19445. .ios .notification.modal-in {
  19446. transform: translate3d(0%, 0%, 0);
  19447. opacity: 1;
  19448. }
  19449. .ios .notification.modal-out {
  19450. transform: translate3d(0%, -200%, 0);
  19451. }
  19452. .ios .notification-icon {
  19453. margin-right: 8px;
  19454. }
  19455. .ios .notification-header + .notification-content {
  19456. margin-top: 10px;
  19457. }
  19458. .ios .notification-title-right-text {
  19459. margin-right: 6px;
  19460. margin-left: auto;
  19461. }
  19462. .ios .notification-title-right-text + .notification-close-button {
  19463. margin-left: 10px;
  19464. }
  19465. .ios .notification-close-button {
  19466. font-size: 14px;
  19467. width: 20px;
  19468. height: 20px;
  19469. opacity: 0.3;
  19470. transition-duration: 300ms;
  19471. }
  19472. .ios .notification-close-button.active-state {
  19473. transition-duration: 0ms;
  19474. opacity: 0.1;
  19475. }
  19476. .ios .notification-close-button:after {
  19477. color: #000;
  19478. content: 'notification_close_ios';
  19479. font-size: 0.65em;
  19480. line-height: 44px;
  19481. width: 44px;
  19482. height: 44px;
  19483. margin-left: -22px;
  19484. margin-top: -22px;
  19485. }
  19486. .ios .theme-dark .notification-close-button:after,
  19487. .ios.theme-dark .notification-close-button:after {
  19488. color: #fff;
  19489. }
  19490. .md .notification {
  19491. transform: translate3d(0, -150%, 0);
  19492. }
  19493. .md .notification.modal-in {
  19494. transition-duration: 0ms;
  19495. animation: notification-md-in 400ms ease-out;
  19496. transform: translate3d(0, 0%, 0);
  19497. }
  19498. .md .notification.modal-in.notification-transitioning {
  19499. transition-duration: 200ms;
  19500. }
  19501. .md .notification.modal-out {
  19502. animation: none;
  19503. transition-duration: 200ms;
  19504. transition-timing-function: ease-in;
  19505. transform: translate3d(0, -150%, 0);
  19506. }
  19507. .md .notification-icon {
  19508. margin-right: 8px;
  19509. }
  19510. .md .notification-subtitle + .notification-text {
  19511. margin-top: 2px;
  19512. }
  19513. .md .notification-header + .notification-content {
  19514. margin-top: 6px;
  19515. }
  19516. .md .notification-title-right-text {
  19517. margin-left: 4px;
  19518. }
  19519. .md .notification-title-right-text:before {
  19520. content: '';
  19521. width: 3px;
  19522. height: 3px;
  19523. border-radius: 50%;
  19524. display: inline-block;
  19525. vertical-align: middle;
  19526. margin-right: 4px;
  19527. background: var(--f7-notification-title-right-color);
  19528. }
  19529. .md .notification-close-button {
  19530. width: 16px;
  19531. height: 16px;
  19532. transition-duration: 300ms;
  19533. }
  19534. .md .notification-close-button:before {
  19535. content: '';
  19536. width: 152%;
  19537. height: 152%;
  19538. position: absolute;
  19539. left: -26%;
  19540. top: -26%;
  19541. background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
  19542. background-repeat: no-repeat;
  19543. background-position: center;
  19544. background-size: 100% 100%;
  19545. opacity: 0;
  19546. pointer-events: none;
  19547. transition-duration: 600ms;
  19548. }
  19549. .md .notification-close-button.active-state:before {
  19550. opacity: 1;
  19551. transition-duration: 150ms;
  19552. }
  19553. .md .notification-close-button:before,
  19554. .md .notification-close-button:after {
  19555. width: 48px;
  19556. height: 48px;
  19557. left: 50%;
  19558. top: 50%;
  19559. margin-left: -24px;
  19560. margin-top: -24px;
  19561. }
  19562. .md .notification-close-button:after {
  19563. color: #737373;
  19564. content: 'delete_md';
  19565. line-height: 48px;
  19566. font-size: 14px;
  19567. }
  19568. @keyframes notification-md-in {
  19569. 0% {
  19570. transform: translate3d(0, -150%, 0);
  19571. }
  19572. 50% {
  19573. transform: translate3d(0, 10%, 0);
  19574. }
  19575. 100% {
  19576. transform: translate3d(0, 0%, 0);
  19577. }
  19578. }
  19579. .aurora .notification {
  19580. transition-duration: 450ms;
  19581. transform: translate3d(0%, -200%, 0);
  19582. }
  19583. .aurora .notification.modal-in {
  19584. transform: translate3d(0%, 0%, 0);
  19585. opacity: 1;
  19586. }
  19587. .aurora .notification.modal-out {
  19588. transform: translate3d(0%, -200%, 0);
  19589. }
  19590. .aurora .notification-icon {
  19591. margin-right: 10px;
  19592. }
  19593. .aurora .notification-header + .notification-content {
  19594. margin-top: 10px;
  19595. }
  19596. .aurora .notification-title-right-text {
  19597. margin-right: 0px;
  19598. margin-left: auto;
  19599. }
  19600. .aurora .notification-title-right-text + .notification-close-button {
  19601. margin-left: 10px;
  19602. }
  19603. .aurora .notification-close-button {
  19604. font-size: 14px;
  19605. width: 16px;
  19606. height: 16px;
  19607. opacity: 0.4;
  19608. transition-duration: 300ms;
  19609. }
  19610. .aurora .notification-close-button.active-state {
  19611. transition-duration: 0ms;
  19612. opacity: 0.6;
  19613. }
  19614. .aurora .notification-close-button:after {
  19615. color: #000;
  19616. content: 'notification_close_ios';
  19617. font-size: 0.5em;
  19618. line-height: 38px;
  19619. width: 38px;
  19620. height: 38px;
  19621. margin-left: -19px;
  19622. margin-top: -19px;
  19623. }
  19624. .aurora .theme-dark .notification-close-button:after,
  19625. .aurora.theme-dark .notification-close-button:after {
  19626. color: #fff;
  19627. }
  19628. /* === Autocomplete === */
  19629. :root {
  19630. --f7-autocomplete-dropdown-placeholder-color: #a9a9a9;
  19631. --f7-autocomplete-dropdown-preloader-size: 20px;
  19632. /*
  19633. --f7-autocomplete-dropdown-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.2);
  19634. */
  19635. --f7-autocomplete-dropdown-bg-color: #fff;
  19636. }
  19637. :root .theme-dark,
  19638. :root.theme-dark {
  19639. --f7-autocomplete-dropdown-bg-color: #1c1c1d;
  19640. }
  19641. .ios {
  19642. --f7-autocomplete-dropdown-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
  19643. --f7-autocomplete-dropdown-text-matching-font-weight: 600;
  19644. --f7-autocomplete-dropdown-font-size: var(--f7-list-font-size);
  19645. --f7-autocomplete-dropdown-text-color: #000;
  19646. --f7-autocomplete-dropdown-text-matching-color: #000;
  19647. }
  19648. .ios .theme-dark,
  19649. .ios.theme-dark {
  19650. --f7-autocomplete-dropdown-text-color: #fff;
  19651. --f7-autocomplete-dropdown-text-matching-color: #fff;
  19652. }
  19653. .md {
  19654. --f7-autocomplete-dropdown-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
  19655. --f7-autocomplete-dropdown-text-matching-font-weight: 400;
  19656. --f7-autocomplete-dropdown-font-size: var(--f7-list-font-size);
  19657. --f7-autocomplete-dropdown-text-color: rgba(0, 0, 0, 0.54);
  19658. --f7-autocomplete-dropdown-text-matching-color: #212121;
  19659. }
  19660. .md .theme-dark,
  19661. .md.theme-dark {
  19662. --f7-autocomplete-dropdown-text-color: rgba(255, 255, 255, 0.54);
  19663. --f7-autocomplete-dropdown-text-matching-color: rgba(255, 255, 255, 0.87);
  19664. }
  19665. .aurora {
  19666. --f7-autocomplete-dropdown-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  19667. --f7-autocomplete-dropdown-text-matching-font-weight: 700;
  19668. --f7-autocomplete-dropdown-font-size: 13px;
  19669. --f7-autocomplete-dropdown-text-color: #000;
  19670. --f7-autocomplete-dropdown-text-matching-color: #000;
  19671. }
  19672. .aurora .theme-dark,
  19673. .aurora.theme-dark {
  19674. --f7-autocomplete-dropdown-text-color: #fff;
  19675. --f7-autocomplete-dropdown-text-matching-color: #fff;
  19676. }
  19677. .autocomplete-page .autocomplete-found {
  19678. display: block;
  19679. }
  19680. .autocomplete-page .autocomplete-not-found {
  19681. display: none;
  19682. }
  19683. .autocomplete-page .autocomplete-values {
  19684. display: block;
  19685. }
  19686. .autocomplete-page .list ul:empty {
  19687. display: none;
  19688. }
  19689. .autocomplete-preloader:not(.autocomplete-preloader-visible) {
  19690. visibility: hidden;
  19691. }
  19692. .autocomplete-preloader:not(.autocomplete-preloader-visible),
  19693. .autocomplete-preloader:not(.autocomplete-preloader-visible) * {
  19694. animation: none;
  19695. }
  19696. .autocomplete-dropdown {
  19697. background: var(--f7-autocomplete-dropdown-bg-color);
  19698. box-shadow: var(--f7-autocomplete-dropdown-box-shadow);
  19699. box-sizing: border-box;
  19700. position: absolute;
  19701. z-index: 500;
  19702. width: 100%;
  19703. right: 0;
  19704. }
  19705. .autocomplete-dropdown .autocomplete-dropdown-inner {
  19706. position: relative;
  19707. overflow: auto;
  19708. -webkit-overflow-scrolling: touch;
  19709. height: 100%;
  19710. z-index: 1;
  19711. }
  19712. .autocomplete-dropdown .autocomplete-preloader {
  19713. display: none;
  19714. position: absolute;
  19715. bottom: 100%;
  19716. width: var(--f7-autocomplete-dropdown-preloader-size);
  19717. height: var(--f7-autocomplete-dropdown-preloader-size);
  19718. }
  19719. .autocomplete-dropdown .autocomplete-preloader-visible {
  19720. display: block;
  19721. }
  19722. .autocomplete-dropdown .autocomplete-dropdown-placeholder {
  19723. color: var(--f7-autocomplete-dropdown-placeholder-color);
  19724. }
  19725. .autocomplete-dropdown .list {
  19726. margin: 0;
  19727. color: var(--f7-autocomplete-dropdown-text-color);
  19728. font-size: var(--f7-autocomplete-dropdown-font-size);
  19729. }
  19730. .autocomplete-dropdown .list b {
  19731. color: var(--f7-autocomplete-dropdown-text-matching-color);
  19732. font-weight: var(--f7-autocomplete-dropdown-text-matching-font-weight);
  19733. }
  19734. .autocomplete-dropdown .list ul {
  19735. background: none !important;
  19736. }
  19737. .autocomplete-dropdown .list ul:before,
  19738. .autocomplete-dropdown .list ul:after {
  19739. display: none !important;
  19740. }
  19741. .autocomplete-dropdown .autocomplete-dropdown-selected {
  19742. background: var(--f7-autocomplete-dropdown-selected-bg-color, rgba(var(--f7-theme-color-rgb), 0.2));
  19743. }
  19744. .searchbar-input-wrap .autocomplete-dropdown {
  19745. background-color: var(--f7-searchbar-input-bg-color, var(--f7-searchbar-bg-color));
  19746. border-radius: var(--f7-searchbar-input-border-radius);
  19747. }
  19748. .searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-placeholder {
  19749. color: var(--f7-searchbar-placeholder-color);
  19750. }
  19751. .searchbar-input-wrap .autocomplete-dropdown li:last-child {
  19752. border-radius: 0 0 var(--f7-searchbar-input-border-radius) var(--f7-searchbar-input-border-radius);
  19753. position: relative;
  19754. overflow: hidden;
  19755. }
  19756. .searchbar-input-wrap .autocomplete-dropdown .item-content {
  19757. padding-right: calc(var(--f7-searchbar-input-padding-horizontal) + var(--f7-searchbar-input-extra-padding-left));
  19758. }
  19759. .list .item-content-dropdown-expanded .item-title.item-label {
  19760. width: 0;
  19761. flex-shrink: 10;
  19762. overflow: hidden;
  19763. }
  19764. .list .item-content-dropdown-expanded .item-title.item-label + .item-input-wrap {
  19765. margin-right: 0;
  19766. }
  19767. .list .item-content-dropdown-expanded .item-input-wrap {
  19768. width: 100%;
  19769. }
  19770. .ios .autocomplete-dropdown .autocomplete-preloader {
  19771. left: 16px;
  19772. margin-bottom: 12px;
  19773. }
  19774. .ios .searchbar-input-wrap .autocomplete-dropdown {
  19775. margin-top: calc(-1 * var(--f7-searchbar-input-height));
  19776. top: 100%;
  19777. z-index: 20;
  19778. }
  19779. .ios .searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-inner {
  19780. padding-top: var(--f7-searchbar-input-height);
  19781. }
  19782. .md .autocomplete-page .navbar .autocomplete-preloader {
  19783. margin-left: 8px;
  19784. }
  19785. .md .autocomplete-popup .navbar .autocomplete-preloader {
  19786. margin-right: 8px;
  19787. margin-left: 16px;
  19788. }
  19789. .md .autocomplete-dropdown .autocomplete-preloader {
  19790. left: 16px;
  19791. margin-bottom: 8px;
  19792. }
  19793. .md .autocomplete-dropdown .autocomplete-preloader .preloader-inner-gap,
  19794. .md .autocomplete-dropdown .autocomplete-preloader .preloader-inner-half-circle {
  19795. border-width: 3px;
  19796. }
  19797. .aurora .autocomplete-dropdown .autocomplete-preloader {
  19798. left: 16px;
  19799. margin-bottom: 2px;
  19800. }
  19801. .aurora .searchbar-input-wrap .autocomplete-dropdown {
  19802. margin-top: calc(-1 * var(--f7-searchbar-input-height));
  19803. top: 100%;
  19804. z-index: 20;
  19805. }
  19806. .aurora .searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-inner {
  19807. padding-top: var(--f7-searchbar-input-height);
  19808. }
  19809. /* === Tooltip === */
  19810. :root {
  19811. --f7-tooltip-bg-color: rgba(0, 0, 0, 0.87);
  19812. --f7-tooltip-text-color: #fff;
  19813. --f7-tooltip-border-radius: 4px;
  19814. --f7-tooltip-padding: 8px 16px;
  19815. --f7-tooltip-font-size: 14px;
  19816. --f7-tooltip-font-weight: 500;
  19817. --f7-tooltip-desktop-padding: 6px 8px;
  19818. --f7-tooltip-desktop-font-size: 12px;
  19819. }
  19820. .tooltip {
  19821. position: absolute;
  19822. z-index: 20000;
  19823. background: var(--f7-tooltip-bg-color);
  19824. border-radius: var(--f7-tooltip-border-radius);
  19825. padding: var(--f7-tooltip-padding);
  19826. color: var(--f7-tooltip-text-color);
  19827. font-size: var(--f7-tooltip-font-size);
  19828. font-weight: var(--f7-tooltip-font-weight);
  19829. box-sizing: border-box;
  19830. line-height: 1.2;
  19831. opacity: 0;
  19832. transform: scale(0.9);
  19833. transition-duration: 150ms;
  19834. transition-property: opacity, transform;
  19835. z-index: 99000;
  19836. }
  19837. .tooltip.tooltip-in {
  19838. transform: scale(1);
  19839. opacity: 1;
  19840. }
  19841. .tooltip.tooltip-out {
  19842. opacity: 0;
  19843. transform: scale(1);
  19844. }
  19845. .device-desktop .tooltip {
  19846. font-size: var(--f7-tooltip-desktop-font-size);
  19847. padding: var(--f7-tooltip-desktop-padding);
  19848. }
  19849. /* === Gauge === */
  19850. .gauge {
  19851. position: relative;
  19852. text-align: center;
  19853. margin-left: auto;
  19854. margin-right: auto;
  19855. display: inline-block;
  19856. }
  19857. .gauge-svg,
  19858. .gauge svg {
  19859. max-width: 100%;
  19860. height: auto;
  19861. }
  19862. .gauge-svg circle,
  19863. .gauge svg circle,
  19864. .gauge-svg path,
  19865. .gauge svg path {
  19866. transition-duration: 400ms;
  19867. }
  19868. /* === Skeleton === */
  19869. :root {
  19870. --f7-skeleton-color: #ccc;
  19871. }
  19872. .theme-dark {
  19873. --f7-skeleton-color: #515151;
  19874. }
  19875. .skeleton-text {
  19876. font-family: 'framework7-skeleton' !important;
  19877. }
  19878. .skeleton-text,
  19879. .skeleton-text * {
  19880. color: var(--f7-skeleton-color) !important;
  19881. font-weight: normal !important;
  19882. font-style: normal !important;
  19883. letter-spacing: -0.015em !important;
  19884. }
  19885. .skeleton-block {
  19886. height: 1em;
  19887. background: var(--f7-skeleton-color) !important;
  19888. width: 100%;
  19889. }
  19890. .skeleton-effect-fade {
  19891. animation: skeleton-effect-fade 1s infinite;
  19892. }
  19893. .skeleton-effect-blink {
  19894. -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
  19895. mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
  19896. -webkit-mask-size: 200% 100%;
  19897. mask-size: 200% 100%;
  19898. -webkit-mask-repeat: repeat;
  19899. mask-repeat: repeat;
  19900. -webkit-mask-position: 50% top;
  19901. mask-position: 50% top;
  19902. animation: skeleton-effect-blink 1s infinite;
  19903. }
  19904. .skeleton-effect-pulse {
  19905. animation: skeleton-effect-pulse 1s infinite;
  19906. }
  19907. @keyframes skeleton-effect-fade {
  19908. 0% {
  19909. opacity: 1;
  19910. }
  19911. 50% {
  19912. opacity: 0.2;
  19913. }
  19914. 100% {
  19915. opacity: 1;
  19916. }
  19917. }
  19918. @keyframes skeleton-effect-blink {
  19919. 0% {
  19920. -webkit-mask-position: 50% top;
  19921. mask-position: 50% top;
  19922. }
  19923. 100% {
  19924. -webkit-mask-position: -150% top;
  19925. mask-position: -150% top;
  19926. }
  19927. }
  19928. @keyframes skeleton-effect-pulse {
  19929. 0% {
  19930. transform: scale(1);
  19931. }
  19932. 40% {
  19933. transform: scale(1);
  19934. }
  19935. 50% {
  19936. transform: scale(0.975);
  19937. }
  19938. 100% {
  19939. transform: scale(1);
  19940. }
  19941. }
  19942. /* === Menu === */
  19943. :root {
  19944. --f7-menu-text-color: #fff;
  19945. --f7-menu-font-size: 16px;
  19946. --f7-menu-font-weight: 500;
  19947. --f7-menu-line-height: 1.2;
  19948. --f7-menu-bg-color: rgba(0, 0, 0, 0.9);
  19949. --f7-menu-item-pressed-bg-color: rgba(20, 20, 20, 0.9);
  19950. --f7-menu-item-padding-horizontal: 12px;
  19951. --f7-menu-item-spacing: 6px;
  19952. --f7-menu-item-height: 40px;
  19953. --f7-menu-item-dropdown-icon-color: rgba(255, 255, 255, 0.4);
  19954. --f7-menu-item-border-radius: 8px;
  19955. /*
  19956. --f7-menu-dropdown-pressed-bg-color: var(--f7-theme-color);
  19957. */
  19958. --f7-menu-dropdown-item-height: 28px;
  19959. --f7-menu-dropdown-divider-color: rgba(255, 255, 255, 0.2);
  19960. --f7-menu-dropdown-padding-vertical: 6px;
  19961. /*
  19962. --f7-menu-dropdown-border-radius: var(--f7-menu-item-border-radius);
  19963. */
  19964. }
  19965. .aurora {
  19966. --f7-menu-font-size: 13px;
  19967. --f7-menu-item-height: 28px;
  19968. --f7-menu-dropdown-item-height: 24px;
  19969. --f7-menu-item-border-radius: 5px;
  19970. --f7-menu-item-padding-horizontal: 10px;
  19971. }
  19972. .menu {
  19973. z-index: 1000;
  19974. position: relative;
  19975. transform: translate3d(0, 0, 0);
  19976. --f7-touch-ripple-color: var(--f7-touch-ripple-white);
  19977. }
  19978. .menu-inner {
  19979. display: flex;
  19980. justify-content: flex-start;
  19981. align-items: flex-start;
  19982. padding-left: var(--f7-menu-item-spacing);
  19983. padding-right: var(--f7-menu-item-spacing);
  19984. }
  19985. .menu-inner:after {
  19986. content: '';
  19987. width: var(--f7-menu-item-spacing);
  19988. height: 100%;
  19989. flex-shrink: 0;
  19990. }
  19991. .menu-item {
  19992. height: var(--f7-menu-item-height);
  19993. min-width: var(--f7-menu-item-height);
  19994. flex-shrink: 0;
  19995. background: var(--f7-menu-bg-color);
  19996. color: var(--f7-menu-text-color);
  19997. border-radius: var(--f7-menu-item-border-radius);
  19998. position: relative;
  19999. box-sizing: border-box;
  20000. font-size: var(--f7-menu-font-size);
  20001. font-weight: var(--f7-menu-font-weight);
  20002. cursor: pointer;
  20003. margin-right: var(--f7-menu-item-spacing);
  20004. }
  20005. .menu-item:first-child {
  20006. margin-right: 0;
  20007. }
  20008. .menu-item.active-state:not(.menu-item-dropdown-opened) {
  20009. background-color: rgba(0, 0, 0, 0.7);
  20010. }
  20011. .menu-item.icon-only {
  20012. padding-left: 0;
  20013. padding-right: 0;
  20014. }
  20015. .menu-item-content {
  20016. display: flex;
  20017. justify-content: center;
  20018. align-items: center;
  20019. padding: 0 var(--f7-menu-item-padding-horizontal);
  20020. height: 100%;
  20021. box-sizing: border-box;
  20022. width: 100%;
  20023. overflow: hidden;
  20024. border-radius: var(--f7-menu-item-border-radius);
  20025. position: relative;
  20026. }
  20027. .menu-item-content.icon-only,
  20028. .icon-only .menu-item-content {
  20029. padding-left: 0;
  20030. padding-right: 0;
  20031. }
  20032. .menu-item-dropdown .menu-item-content:after {
  20033. content: '';
  20034. position: absolute;
  20035. width: 20px;
  20036. height: 2px;
  20037. left: 50%;
  20038. transform: translateX(-50%);
  20039. bottom: 4px;
  20040. background: var(--f7-menu-item-dropdown-icon-color);
  20041. border-radius: 4px;
  20042. }
  20043. .menu-dropdown {
  20044. opacity: 0;
  20045. visibility: hidden;
  20046. pointer-events: none;
  20047. cursor: auto;
  20048. height: 10px;
  20049. background: var(--f7-menu-bg-color);
  20050. position: relative;
  20051. }
  20052. .menu-dropdown-content {
  20053. position: absolute;
  20054. top: 100%;
  20055. border-radius: var(--f7-menu-dropdown-border-radius, var(--f7-menu-item-border-radius));
  20056. padding-top: var(--f7-menu-dropdown-padding-vertical);
  20057. padding-bottom: var(--f7-menu-dropdown-padding-vertical);
  20058. box-sizing: border-box;
  20059. background: var(--f7-menu-bg-color);
  20060. overflow: auto;
  20061. -webkit-overflow-scrolling: touch;
  20062. min-width: calc(100% + 24px);
  20063. }
  20064. .menu-dropdown-link,
  20065. .menu-dropdown-item {
  20066. display: flex;
  20067. justify-content: space-between;
  20068. align-items: center;
  20069. padding-left: var(--f7-menu-item-padding-horizontal);
  20070. padding-right: var(--f7-menu-item-padding-horizontal);
  20071. min-height: var(--f7-menu-dropdown-item-height);
  20072. line-height: var(--f7-menu-line-height);
  20073. font-size: var(--f7-menu-font-size);
  20074. color: var(--f7-menu-text-color);
  20075. font-weight: var(--f7-menu-font-weight);
  20076. white-space: nowrap;
  20077. min-width: 100px;
  20078. }
  20079. .menu-dropdown-link i,
  20080. .menu-dropdown-item i,
  20081. .menu-dropdown-link i.icon,
  20082. .menu-dropdown-item i.icon,
  20083. .menu-dropdown-link i.f7-icons,
  20084. .menu-dropdown-item i.f7-icons,
  20085. .menu-dropdown-link i.material-icons,
  20086. .menu-dropdown-item i.material-icons {
  20087. font-size: 20px;
  20088. }
  20089. .menu-dropdown-link.active-state {
  20090. background: var(--f7-menu-dropdown-pressed-bg-color, var(--f7-theme-color));
  20091. color: var(--f7-menu-text-color);
  20092. }
  20093. .menu-dropdown-divider {
  20094. height: 1px;
  20095. margin-top: 2px;
  20096. margin-bottom: 2px;
  20097. background: var(--f7-menu-dropdown-divider-color);
  20098. }
  20099. .menu-item-dropdown-opened {
  20100. border-bottom-left-radius: 0px;
  20101. border-bottom-right-radius: 0px;
  20102. }
  20103. .menu-item-dropdown-opened .menu-item-content:after {
  20104. opacity: 0;
  20105. }
  20106. .menu-item-dropdown-opened .menu-dropdown {
  20107. opacity: 1;
  20108. visibility: visible;
  20109. pointer-events: auto;
  20110. }
  20111. .menu-item-dropdown-left .menu-dropdown:after,
  20112. .menu-item-dropdown-center .menu-dropdown:after,
  20113. .menu-dropdown-left:after,
  20114. .menu-dropdown-center:after {
  20115. content: '';
  20116. position: absolute;
  20117. left: 100%;
  20118. bottom: 0;
  20119. width: var(--f7-menu-item-border-radius);
  20120. height: var(--f7-menu-item-border-radius);
  20121. background-image: radial-gradient(ellipse at 100% 0%, transparent 0%, transparent 70%, var(--f7-menu-bg-color) 72%);
  20122. }
  20123. .menu-item-dropdown-right .menu-dropdown:before,
  20124. .menu-item-dropdown-center .menu-dropdown:before,
  20125. .menu-dropdown-right:before,
  20126. .menu-dropdown-center:before {
  20127. content: '';
  20128. position: absolute;
  20129. right: 100%;
  20130. bottom: 0;
  20131. width: var(--f7-menu-item-border-radius);
  20132. height: var(--f7-menu-item-border-radius);
  20133. background-image: radial-gradient(ellipse at 0% 0%, transparent 0%, transparent 70%, var(--f7-menu-bg-color) 72%);
  20134. }
  20135. .menu-item-dropdown-left .menu-dropdown-content,
  20136. .menu-dropdown-left .menu-dropdown-content {
  20137. left: 0;
  20138. border-top-left-radius: 0px;
  20139. }
  20140. .menu-item-dropdown-right .menu-dropdown-content,
  20141. .menu-dropdown-right .menu-dropdown-content {
  20142. right: 0;
  20143. border-top-right-radius: 0px;
  20144. }
  20145. .menu-item-dropdown-center .menu-dropdown-content,
  20146. .menu-dropdown-center .menu-dropdown-content {
  20147. left: 50%;
  20148. min-width: calc(100% + 24px + 24px);
  20149. transform: translateX(-50%);
  20150. }
  20151. /* === Color Picker === */
  20152. :root {
  20153. --f7-color-picker-popover-width: 350px;
  20154. --f7-color-picker-slider-size: 6px;
  20155. --f7-color-picker-slider-knob-size: 16px;
  20156. --f7-color-picker-bar-size: 50px;
  20157. --f7-color-picker-bar-min-height: 260px;
  20158. --f7-color-picker-value-width: 64px;
  20159. --f7-color-picker-value-height: 32px;
  20160. --f7-color-picker-value-font-size: 16px;
  20161. --f7-color-picker-value-border-radius: 4px;
  20162. --f7-color-picker-hex-value-width: 84px;
  20163. --f7-color-picker-label-font-size: 14px;
  20164. --f7-color-picker-label-width: 10px;
  20165. --f7-color-picker-label-height: 14px;
  20166. --f7-color-picker-sb-spectrum-height: 260px;
  20167. --f7-color-picker-sb-spectrum-handle-size: 16px;
  20168. --f7-color-picker-wheel-width: 330px;
  20169. --f7-color-picker-palette-value-width: 36px;
  20170. --f7-color-picker-palette-value-height: 36px;
  20171. --f7-color-picker-initial-current-color-height: 40px;
  20172. --f7-color-picker-initial-current-color-border-radius: 4px;
  20173. --f7-color-picker-sheet-bg-color: #fff;
  20174. --f7-color-picker-popup-bg-color: #fff;
  20175. --f7-color-picker-value-bg-color: rgba(0, 0, 0, 0.05);
  20176. --f7-color-picker-group-bg-color: rgba(0, 0, 0, 0.05);
  20177. --f7-color-picker-group-value-bg-color: #fff;
  20178. }
  20179. :root .theme-dark,
  20180. :root.theme-dark {
  20181. --f7-color-picker-sheet-bg-color: #121212;
  20182. --f7-color-picker-popup-bg-color: #121212;
  20183. --f7-color-picker-value-bg-color: rgba(255, 255, 255, 0.1);
  20184. --f7-color-picker-group-bg-color: #000;
  20185. --f7-color-picker-group-value-bg-color: rgba(255, 255, 255, 0.12);
  20186. }
  20187. .color-picker {
  20188. overflow: hidden;
  20189. width: 100%;
  20190. display: flex;
  20191. flex-direction: column;
  20192. }
  20193. .color-picker.color-picker-inline,
  20194. .color-picker-popover .color-picker,
  20195. .color-picker-popup .color-picker {
  20196. position: relative;
  20197. }
  20198. .color-picker-sheet-modal {
  20199. background: var(--f7-color-picker-sheet-bg-color);
  20200. }
  20201. .color-picker-sheet-modal:before {
  20202. z-index: 600;
  20203. }
  20204. .color-picker-sheet-modal .sheet-modal-inner {
  20205. margin-bottom: var(--f7-safe-area-bottom);
  20206. }
  20207. .color-picker-popup .page {
  20208. background: var(--f7-color-picker-popup-bg-color);
  20209. }
  20210. .color-picker-popup .page-content {
  20211. padding-bottom: var(--f7-safe-area-bottom);
  20212. }
  20213. .color-picker-popover .color-picker,
  20214. .color-picker-popup .color-picker,
  20215. .color-picker-page .color-picker {
  20216. height: 100%;
  20217. }
  20218. .color-picker-popover .color-picker .toolbar,
  20219. .color-picker-popup .color-picker .toolbar,
  20220. .color-picker-page .color-picker .toolbar {
  20221. position: absolute;
  20222. }
  20223. .color-picker-popover {
  20224. width: var(--f7-color-picker-popover-width);
  20225. max-width: 90vw;
  20226. max-height: 80vh;
  20227. }
  20228. .color-picker-popover .color-picker {
  20229. max-height: 80vh;
  20230. }
  20231. .color-picker-popover .toolbar-top {
  20232. border-top-left-radius: var(--f7-popover-border-radius);
  20233. border-top-right-radius: var(--f7-popover-border-radius);
  20234. }
  20235. .color-picker-popover .color-picker-module-palette {
  20236. overflow: hidden;
  20237. flex-shrink: 0;
  20238. }
  20239. .color-picker-popover .color-picker-module-palette:first-child {
  20240. border-top-left-radius: var(--f7-popover-border-radius);
  20241. border-top-right-radius: var(--f7-popover-border-radius);
  20242. }
  20243. .color-picker-popover .color-picker-module-palette:last-child {
  20244. border-bottom-left-radius: var(--f7-popover-border-radius);
  20245. border-bottom-right-radius: var(--f7-popover-border-radius);
  20246. }
  20247. .color-picker-popover .color-picker-module-palette:first-child:last-child {
  20248. border-radius: var(--f7-popover-border-radius);
  20249. }
  20250. .color-picker-popover .toolbar ~ .page-content .color-picker-module-palette:first-child {
  20251. border-top-left-radius: 0;
  20252. border-top-right-radius: 0;
  20253. }
  20254. .color-picker-popup .page-content,
  20255. .color-picker-popover .page-content,
  20256. .color-picker-sheet-modal .page-content,
  20257. .color-picker-page .page-content {
  20258. display: flex;
  20259. justify-content: flex-start;
  20260. align-items: stretch;
  20261. flex-direction: column;
  20262. overflow-x: hidden;
  20263. }
  20264. .color-picker-module {
  20265. margin-top: 5px;
  20266. }
  20267. .color-picker-module:last-child {
  20268. margin-bottom: 5px;
  20269. }
  20270. .color-picker-module-sb-spectrum,
  20271. .color-picker-module-hs-spectrum {
  20272. margin-left: 10px;
  20273. margin-right: 10px;
  20274. }
  20275. .color-picker-module-sb-spectrum:first-child,
  20276. .color-picker-module-hs-spectrum:first-child {
  20277. margin-top: 10px;
  20278. }
  20279. .color-picker-module-sb-spectrum .color-picker-sb-spectrum,
  20280. .color-picker-module-hs-spectrum .color-picker-sb-spectrum,
  20281. .color-picker-module-sb-spectrum .color-picker-hs-spectrum,
  20282. .color-picker-module-hs-spectrum .color-picker-hs-spectrum {
  20283. border-radius: 4px;
  20284. height: var(--f7-color-picker-sb-spectrum-height);
  20285. }
  20286. .color-picker-sb-spectrum {
  20287. background-color: #000;
  20288. background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%);
  20289. position: relative;
  20290. }
  20291. .color-picker-hs-spectrum {
  20292. position: relative;
  20293. background-image: linear-gradient(to right, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%));
  20294. }
  20295. .color-picker-hs-spectrum:after {
  20296. content: '';
  20297. position: absolute;
  20298. left: 0;
  20299. top: 0;
  20300. width: 100%;
  20301. height: 100%;
  20302. background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff);
  20303. }
  20304. .color-picker-sb-spectrum-handle,
  20305. .color-picker-hs-spectrum-handle {
  20306. width: 4px;
  20307. height: 4px;
  20308. position: absolute;
  20309. left: -2px;
  20310. top: -2px;
  20311. z-index: 1;
  20312. }
  20313. .color-picker-sb-spectrum-handle:after,
  20314. .color-picker-hs-spectrum-handle:after {
  20315. background-color: inherit;
  20316. content: '';
  20317. position: absolute;
  20318. width: var(--f7-color-picker-sb-spectrum-handle-size);
  20319. height: var(--f7-color-picker-sb-spectrum-handle-size);
  20320. border: 1px solid #fff;
  20321. border-radius: 50%;
  20322. box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
  20323. box-sizing: border-box;
  20324. left: 50%;
  20325. top: 50%;
  20326. transform: translate(-50%, -50%);
  20327. transition: 150ms;
  20328. transition-property: transform;
  20329. transform-origin: center;
  20330. }
  20331. .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after,
  20332. .color-picker-hs-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after,
  20333. .color-picker-sb-spectrum-handle.color-picker-hs-spectrum-handle-pressed:after,
  20334. .color-picker-hs-spectrum-handle.color-picker-hs-spectrum-handle-pressed:after {
  20335. transform: scale(1.5) translate(-33.333%, -33.333%);
  20336. }
  20337. .color-picker-module-wheel {
  20338. margin-left: 10px;
  20339. margin-right: 10px;
  20340. }
  20341. .color-picker-wheel {
  20342. position: relative;
  20343. width: var(--f7-color-picker-wheel-width);
  20344. max-width: 100%;
  20345. height: auto;
  20346. font-size: 0;
  20347. margin-left: auto;
  20348. margin-right: auto;
  20349. }
  20350. .color-picker-wheel svg {
  20351. width: 100%;
  20352. height: auto;
  20353. }
  20354. .color-picker-wheel .color-picker-wheel-handle {
  20355. width: calc(100% / 6);
  20356. height: calc(100% / 6);
  20357. position: absolute;
  20358. box-sizing: border-box;
  20359. border: 2px solid #fff;
  20360. box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
  20361. background: red;
  20362. border-radius: 50%;
  20363. left: 0;
  20364. top: 0;
  20365. }
  20366. .color-picker-wheel .color-picker-sb-spectrum {
  20367. width: 45%;
  20368. height: 45%;
  20369. left: 50%;
  20370. top: 50%;
  20371. transform: translate3d(-50%, -50%, 0);
  20372. position: absolute;
  20373. }
  20374. .color-picker-slider-wrap {
  20375. display: flex;
  20376. align-items: center;
  20377. margin-bottom: 2px;
  20378. }
  20379. .color-picker-slider-wrap + .color-picker-slider-wrap {
  20380. margin-top: 5px;
  20381. }
  20382. .color-picker-hex-wrap {
  20383. justify-content: space-between;
  20384. display: flex;
  20385. align-items: center;
  20386. }
  20387. .color-picker-slider-label,
  20388. .color-picker-hex-label {
  20389. font-size: var(--f7-color-picker-label-font-size);
  20390. width: var(--f7-color-picker-label-size);
  20391. flex-shrink: 0;
  20392. margin-left: 12px;
  20393. }
  20394. .color-picker-hex-label {
  20395. width: auto;
  20396. }
  20397. .color-picker-bar-value,
  20398. .color-picker-slider-value,
  20399. .color-picker-hex-value {
  20400. width: var(--f7-color-picker-value-width);
  20401. height: var(--f7-color-picker-value-height);
  20402. background: var(--f7-color-picker-value-bg-color);
  20403. border-radius: var(--f7-color-picker-value-border-radius);
  20404. text-align: center;
  20405. font-size: var(--f7-color-picker-value-font-size);
  20406. display: flex;
  20407. justify-content: center;
  20408. align-items: center;
  20409. flex-shrink: 0;
  20410. margin-right: 10px;
  20411. }
  20412. .color-picker-bar-value input,
  20413. .color-picker-slider-value input,
  20414. .color-picker-hex-value input {
  20415. width: 100%;
  20416. height: 100%;
  20417. -webkit-appearance: none;
  20418. -moz-appearance: none;
  20419. appearance: none;
  20420. border: none;
  20421. outline: 0;
  20422. background: transparent;
  20423. color: inherit;
  20424. font-family: inherit;
  20425. font-size: inherit;
  20426. text-align: center;
  20427. display: block;
  20428. border-radius: 4px;
  20429. }
  20430. .color-picker-bar-value input::-webkit-inner-spin-button,
  20431. .color-picker-slider-value input::-webkit-inner-spin-button,
  20432. .color-picker-hex-value input::-webkit-inner-spin-button,
  20433. .color-picker-bar-value input::-webkit-outer-spin-button,
  20434. .color-picker-slider-value input::-webkit-outer-spin-button,
  20435. .color-picker-hex-value input::-webkit-outer-spin-button {
  20436. -webkit-appearance: none;
  20437. -moz-appearance: none;
  20438. appearance: none;
  20439. margin: 0;
  20440. display: none;
  20441. }
  20442. .color-picker-hex-value {
  20443. width: var(--f7-color-picker-hex-value-width);
  20444. }
  20445. .color-picker-hex-value:first-child {
  20446. margin-right: auto;
  20447. }
  20448. .color-picker-slider {
  20449. --f7-range-bar-active-bg-color: transparent;
  20450. --f7-range-bar-size: var(--f7-color-picker-slider-size);
  20451. --f7-range-bar-border-radius: var(--f7-color-picker-slider-size);
  20452. --f7-range-knob-size: var(--f7-color-picker-slider-knob-size);
  20453. --f7-range-knob-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  20454. }
  20455. .color-picker-slider .range-knob {
  20456. transition-duration: 200ms;
  20457. transition-property: transform;
  20458. }
  20459. .color-picker-slider .range-knob:after {
  20460. width: 30px;
  20461. height: 30px;
  20462. margin-left: -16px;
  20463. margin-top: -16px;
  20464. }
  20465. .color-picker-slider .range-knob-active-state .range-knob {
  20466. transform: scale(1.5);
  20467. }
  20468. .md .color-picker-slider.range-slider-min:not(.range-slider-dual) .range-knob {
  20469. background: var(--f7-range-knob-color) !important;
  20470. border: none;
  20471. }
  20472. .color-picker-module-rgb-bars {
  20473. display: flex;
  20474. justify-content: space-around;
  20475. justify-content: space-evenly;
  20476. align-items: stretch;
  20477. height: 100%;
  20478. min-height: var(--f7-color-picker-bar-min-height);
  20479. padding-bottom: 10px;
  20480. padding-top: 10px;
  20481. box-sizing: border-box;
  20482. }
  20483. .color-picker-bar-wrap {
  20484. display: flex;
  20485. align-items: center;
  20486. flex-direction: column-reverse;
  20487. }
  20488. .color-picker-bar {
  20489. --f7-range-bar-active-bg-color: transparent;
  20490. --f7-range-bar-size: var(--f7-color-picker-bar-size);
  20491. --f7-range-bar-border-radius: 2px;
  20492. --f7-range-knob-size: 6px;
  20493. --f7-range-knob-box-shadow: 0 0px 3px rgba(0, 0, 0, 0.3);
  20494. --f7-range-knob-color: #fff;
  20495. }
  20496. .color-picker-bar .range-knob {
  20497. transition-duration: 0ms;
  20498. transition-property: transform;
  20499. border-radius: 3px;
  20500. }
  20501. .color-picker-bar .range-knob-wrap {
  20502. height: 6px;
  20503. width: calc(var(--f7-color-picker-bar-size) - 4px);
  20504. margin-left: calc(-0.5 * (var(--f7-color-picker-bar-size) - 4px));
  20505. }
  20506. .color-picker-bar .range-knob-active-state .range-knob {
  20507. transform: scale(1);
  20508. }
  20509. .md .color-picker-bar.range-slider-min:not(.range-slider-dual) .range-knob {
  20510. background: var(--f7-range-knob-color) !important;
  20511. border: none;
  20512. }
  20513. .color-picker-bar-label {
  20514. font-size: var(--f7-color-picker-label-size);
  20515. margin-top: 12px;
  20516. line-height: 1;
  20517. height: var(--f7-color-picker-label-height);
  20518. flex-shrink: 0;
  20519. }
  20520. .color-picker-bar-value {
  20521. margin-left: 0;
  20522. margin-bottom: 10px;
  20523. }
  20524. .color-picker-slider-alpha {
  20525. --f7-range-knob-color: #fff;
  20526. }
  20527. .color-picker-slider-alpha .range-bar {
  20528. background-image: linear-gradient(to left, rgba(0, 0, 0, 0), #000), linear-gradient(to right, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%), linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
  20529. background-size: 100% 100%, 6px 3px, 6px 3px;
  20530. background-position: 0 0, 0px 3px, 0 0;
  20531. background-repeat: repeat-y, repeat-x, repeat-x;
  20532. }
  20533. .color-picker-slider-hue .range-bar {
  20534. background-image: linear-gradient(to left, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%));
  20535. }
  20536. .color-picker-slider-brightness .range-bar {
  20537. background-image: linear-gradient(to left, #000, #fff);
  20538. }
  20539. .color-picker-module-palette {
  20540. margin-top: 16px;
  20541. }
  20542. .color-picker-module-palette:first-child {
  20543. margin-top: 0;
  20544. }
  20545. .color-picker-module-palette:last-child {
  20546. margin-bottom: 0;
  20547. }
  20548. .color-picker-module-palette:first-child:last-child {
  20549. margin: 0;
  20550. }
  20551. .color-picker-palette {
  20552. display: flex;
  20553. flex-wrap: wrap;
  20554. }
  20555. .color-picker-palette-row {
  20556. width: 100%;
  20557. display: flex;
  20558. flex-wrap: nowrap;
  20559. }
  20560. .color-picker-palette-row .color-picker-palette-value {
  20561. width: 100%;
  20562. }
  20563. .color-picker-palette-value {
  20564. width: var(--f7-color-picker-palette-value-width);
  20565. height: var(--f7-color-picker-palette-value-height);
  20566. cursor: pointer;
  20567. }
  20568. .color-picker-module-initial-current-colors,
  20569. .color-picker-module-current-color {
  20570. margin-left: 10px;
  20571. margin-right: 10px;
  20572. border-radius: var(--f7-color-picker-initial-current-color-border-radius);
  20573. overflow: hidden;
  20574. flex-shrink: 0;
  20575. }
  20576. .color-picker-initial-color,
  20577. .color-picker-current-color {
  20578. height: var(--f7-color-picker-initial-current-color-height);
  20579. }
  20580. .color-picker-initial-current-colors {
  20581. display: flex;
  20582. }
  20583. .color-picker-initial-current-colors .color-picker-initial-color,
  20584. .color-picker-initial-current-colors .color-picker-current-color {
  20585. width: 50%;
  20586. }
  20587. .color-picker-module-rgb-sliders,
  20588. .color-picker-module-hsb-sliders,
  20589. .color-picker-module-alpha-slider,
  20590. .color-picker-module-hue-slider,
  20591. .color-picker-module-brightness-slider,
  20592. .color-picker-module-hex {
  20593. margin-left: 10px;
  20594. margin-right: 10px;
  20595. }
  20596. .color-picker-grouped-modules .color-picker-module-rgb-sliders,
  20597. .color-picker-grouped-modules .color-picker-module-hsb-sliders,
  20598. .color-picker-grouped-modules .color-picker-module-alpha-slider,
  20599. .color-picker-grouped-modules .color-picker-module-hue-slider,
  20600. .color-picker-grouped-modules .color-picker-module-brightness-slider,
  20601. .color-picker-grouped-modules .color-picker-module-hex {
  20602. background: var(--f7-color-picker-group-bg-color);
  20603. padding: 5px;
  20604. border-radius: 4px;
  20605. margin-top: 16px;
  20606. margin-left: 5px;
  20607. margin-right: 5px;
  20608. }
  20609. .color-picker-grouped-modules .color-picker-module-rgb-sliders:last-child,
  20610. .color-picker-grouped-modules .color-picker-module-hsb-sliders:last-child,
  20611. .color-picker-grouped-modules .color-picker-module-alpha-slider:last-child,
  20612. .color-picker-grouped-modules .color-picker-module-hue-slider:last-child,
  20613. .color-picker-grouped-modules .color-picker-module-brightness-slider:last-child,
  20614. .color-picker-grouped-modules .color-picker-module-hex:last-child {
  20615. margin-bottom: 16px;
  20616. }
  20617. .color-picker-grouped-modules .color-picker-slider-value,
  20618. .color-picker-grouped-modules .color-picker-hex-value {
  20619. background: var(--f7-color-picker-group-value-bg-color);
  20620. }
  20621. .color-picker-grouped-modules .color-picker-slider-label,
  20622. .color-picker-grouped-modules .color-picker-hex-label {
  20623. margin-right: 5px;
  20624. }
  20625. .color-picker-grouped-modules .color-picker-module-rgb-sliders .range-slider:first-child,
  20626. .color-picker-grouped-modules .color-picker-module-hsb-sliders .range-slider:first-child,
  20627. .color-picker-grouped-modules .color-picker-module-alpha-slider .range-slider:first-child,
  20628. .color-picker-grouped-modules .color-picker-module-hue-slider .range-slider:first-child,
  20629. .color-picker-grouped-modules .color-picker-module-brightness-slider .range-slider:first-child {
  20630. margin-right: 5px;
  20631. }
  20632. .color-picker-grouped-modules .color-picker-module-rgb-sliders .range-slider:last-child,
  20633. .color-picker-grouped-modules .color-picker-module-hsb-sliders .range-slider:last-child,
  20634. .color-picker-grouped-modules .color-picker-module-alpha-slider .range-slider:last-child,
  20635. .color-picker-grouped-modules .color-picker-module-hue-slider .range-slider:last-child,
  20636. .color-picker-grouped-modules .color-picker-module-brightness-slider .range-slider:last-child {
  20637. margin-left: 5px;
  20638. }
  20639. /* === Treeview === */
  20640. :root {
  20641. --f7-treeview-item-padding-left: 16px;
  20642. --f7-treeview-item-padding-right: 16px;
  20643. --f7-treeview-toggle-size: 24px;
  20644. --f7-treeview-children-offset: 29px;
  20645. --f7-treeview-label-font-weight: 400;
  20646. --f7-treeview-label-text-color: inherit;
  20647. /*
  20648. --f7-treeview-selectable-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.2);
  20649. */
  20650. --f7-treeview-toggle-color: rgba(0, 0, 0, 0.5);
  20651. --f7-treeview-toggle-hover-bg-color: rgba(0, 0, 0, 0.1);
  20652. --f7-treeview-toggle-pressed-bg-color: rgba(0, 0, 0, 0.15);
  20653. --f7-treeview-icon-color: rgba(0, 0, 0, 0.5);
  20654. --f7-treeview-selectable-hover-bg-color: rgba(0, 0, 0, 0.1);
  20655. --f7-treeview-link-hover-bg-color: rgba(0, 0, 0, 0.1);
  20656. --f7-treeview-link-pressed-bg-color: rgba(0, 0, 0, 0.15);
  20657. }
  20658. :root .theme-dark,
  20659. :root.theme-dark {
  20660. --f7-treeview-toggle-color: rgba(255, 255, 255, 0.5);
  20661. --f7-treeview-toggle-hover-bg-color: rgba(255, 255, 255, 0.03);
  20662. --f7-treeview-toggle-pressed-bg-color: rgba(255, 255, 255, 0.1);
  20663. --f7-treeview-icon-color: rgba(255, 255, 255, 0.75);
  20664. --f7-treeview-selectable-hover-bg-color: rgba(255, 255, 255, 0.03);
  20665. --f7-treeview-link-hover-bg-color: rgba(255, 255, 255, 0.03);
  20666. --f7-treeview-link-pressed-bg-color: rgba(255, 255, 255, 0.11);
  20667. }
  20668. .ios {
  20669. --f7-treeview-item-height: 34px;
  20670. --f7-treeview-label-font-size: 17px;
  20671. --f7-treeview-icon-size: 24px;
  20672. }
  20673. .md {
  20674. --f7-treeview-item-height: 34px;
  20675. --f7-treeview-label-font-size: 16px;
  20676. --f7-treeview-icon-size: 24px;
  20677. }
  20678. .aurora {
  20679. --f7-treeview-item-height: 28px;
  20680. --f7-treeview-label-font-size: 14px;
  20681. --f7-treeview-icon-size: 20px;
  20682. }
  20683. .treeview-item-root {
  20684. padding-right: var(--f7-treeview-item-padding-left);
  20685. padding-left: var(--f7-treeview-item-padding-right);
  20686. min-height: var(--f7-treeview-item-height);
  20687. display: flex;
  20688. align-items: center;
  20689. justify-content: flex-start;
  20690. }
  20691. .treeview-item-content {
  20692. display: flex;
  20693. justify-content: flex-start;
  20694. align-items: center;
  20695. }
  20696. .treeview-item-content > i,
  20697. .treeview-item-content > .f7-icons,
  20698. .treeview-item-content > .material-icons {
  20699. font-size: var(--f7-treeview-icon-size);
  20700. color: var(--f7-treeview-icon-color);
  20701. }
  20702. .treeview-item-content:first-child {
  20703. margin-right: calc(var(--f7-treeview-toggle-size) + 5px);
  20704. }
  20705. .treeview-item-content > * + * {
  20706. margin-right: 5px;
  20707. }
  20708. .treeview-item-label {
  20709. font-size: var(--f7-treeview-label-font-size);
  20710. font-weight: var(--f7-treeview-label-font-weight);
  20711. color: var(--f7-treeview-label-text-color);
  20712. }
  20713. .treeview-toggle {
  20714. width: var(--f7-treeview-toggle-size);
  20715. height: var(--f7-treeview-toggle-size);
  20716. cursor: pointer;
  20717. border-radius: 4px;
  20718. background-color: rgba(0, 0, 0, 0);
  20719. transition-duration: 200ms;
  20720. position: relative;
  20721. margin-left: 5px;
  20722. }
  20723. .treeview-toggle.active-state {
  20724. background-color: var(--f7-treeview-toggle-pressed-bg-color);
  20725. }
  20726. .treeview-toggle:after {
  20727. transition-duration: 200ms;
  20728. content: '';
  20729. position: absolute;
  20730. left: 50%;
  20731. top: 50%;
  20732. width: 0;
  20733. height: 0;
  20734. border-top: 5px solid transparent;
  20735. border-bottom: 5px solid transparent;
  20736. transform: translate(-50%, -50%);
  20737. border-right: 6px solid var(--f7-treeview-toggle-color);
  20738. }
  20739. .treeview-toggle-hidden {
  20740. opacity: 0;
  20741. pointer-events: none;
  20742. visibility: hidden;
  20743. }
  20744. .treeview-preloader {
  20745. --f7-preloader-size: var(--f7-treeview-toggle-size);
  20746. margin-left: calc(-1 * var(--f7-treeview-toggle-size));
  20747. }
  20748. .treeview-item-children {
  20749. display: none;
  20750. }
  20751. .treeview-item-opened > .treeview-item-children {
  20752. display: block;
  20753. }
  20754. .treeview-item-opened > .treeview-item-root .treeview-toggle:after {
  20755. transform: translate(-50%, -50%) rotate(-90deg);
  20756. }
  20757. a.treeview-item-root {
  20758. color: var(--f7-treeview-label-text-color);
  20759. }
  20760. .treeview-item-selectable > .treeview-item-root,
  20761. .treeview-item-selectable.treeview-item-root {
  20762. cursor: pointer;
  20763. transition-duration: 150ms;
  20764. }
  20765. a.treeview-item-root {
  20766. transition-duration: 150ms;
  20767. }
  20768. a.treeview-item-root.active-state {
  20769. background: var(--f7-treeview-link-pressed-bg-color);
  20770. }
  20771. .treeview-item-toggle > .treeview-item-root,
  20772. .treeview-item-toggle.treeview-item-root {
  20773. cursor: pointer;
  20774. }
  20775. .treeview-item-selected > .treeview-item-root,
  20776. .treeview-item-selected.treeview-item-root {
  20777. background: var(--f7-treeview-selectable-selected-bg-color, rgba(var(--f7-theme-color-rgb), 0.2));
  20778. }
  20779. .treeview-item .treeview-item .treeview-item-root {
  20780. padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 1);
  20781. }
  20782. .treeview-item .treeview-item .treeview-item .treeview-item-root {
  20783. padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 2);
  20784. }
  20785. .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
  20786. padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 3);
  20787. }
  20788. .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
  20789. padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 4);
  20790. }
  20791. .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
  20792. padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 5);
  20793. }
  20794. .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
  20795. padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 6);
  20796. }
  20797. .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
  20798. padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 7);
  20799. }
  20800. .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
  20801. padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 8);
  20802. }
  20803. .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
  20804. padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 9);
  20805. }
  20806. .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
  20807. padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 10);
  20808. }
  20809. .aurora .treeview-toggle:hover {
  20810. background-color: var(--f7-treeview-toggle-hover-bg-color);
  20811. }
  20812. .aurora .treeview-toggle.active-state {
  20813. background-color: var(--f7-treeview-toggle-pressed-bg-color);
  20814. }
  20815. .aurora .treeview-item-selectable > .treeview-item-root:hover,
  20816. .aurora .treeview-item-selectable.treeview-item-root:hover {
  20817. background: var(--f7-treeview-selectable-hover-bg-color);
  20818. }
  20819. .aurora a.treeview-item-root:hover {
  20820. background: var(--f7-treeview-link-hover-bg-color);
  20821. }
  20822. .aurora a.treeview-item-root.active-state {
  20823. background: var(--f7-treeview-link-pressed-bg-color);
  20824. }
  20825. .aurora .treeview-item-selected > .treeview-item-root:hover,
  20826. .aurora .treeview-item-selected.treeview-item-root:hover {
  20827. background: var(--f7-treeview-selectable-selected-bg-color, rgba(var(--f7-theme-color-rgb), 0.2));
  20828. }
  20829. /* === Stepper === */
  20830. :root {
  20831. --f7-text-editor-font-size: inherit;
  20832. --f7-text-editor-font-weight: inherit;
  20833. --f7-text-editor-border-width: 1px;
  20834. --f7-text-editor-height: 250px;
  20835. --f7-text-editor-margin: 16px;
  20836. --f7-text-editor-padding: 8px;
  20837. --f7-text-editor-button-bg-color: transparent;
  20838. --f7-text-editor-button-size: 28px;
  20839. --f7-text-editor-button-icon-size: 20px;
  20840. --f7-text-editor-button-margin: 2px;
  20841. --f7-text-editor-button-border-radius: 2px;
  20842. --f7-text-editor-text-color: #000;
  20843. --f7-text-editor-bg-color: #fff;
  20844. --f7-text-editor-border-color: rgba(0, 0, 0, 0.1);
  20845. --f7-text-editor-toolbar-bg-color: #fff;
  20846. --f7-text-editor-button-text-color: #333;
  20847. --f7-text-editor-button-divider-color: rgba(0, 0, 0, 0.15);
  20848. --f7-text-editor-placeholder-color: rgba(0, 0, 0, 0.35);
  20849. }
  20850. :root .theme-dark,
  20851. :root.theme-dark {
  20852. --f7-text-editor-bg-color: #121212;
  20853. --f7-text-editor-border-color: rgba(255, 255, 255, 0.1);
  20854. --f7-text-editor-toolbar-bg-color: #202020;
  20855. --f7-text-editor-text-color: #fff;
  20856. --f7-text-editor-placeholder-color: rgba(255, 255, 255, 0.35);
  20857. --f7-text-editor-button-text-color: #fff;
  20858. --f7-text-editor-button-divider-color: rgba(255, 255, 255, 0.15);
  20859. }
  20860. .ios {
  20861. --f7-text-editor-toolbar-padding: 6px;
  20862. --f7-text-editor-toolbar-border-color: rgba(0, 0, 0, 0.25);
  20863. }
  20864. .ios .theme-dark,
  20865. .ios.theme-dark {
  20866. --f7-text-editor-toolbar-bg-color: #121212;
  20867. --f7-text-editor-toolbar-border-color: rgba(255, 255, 255, 0.1);
  20868. }
  20869. .md {
  20870. --f7-text-editor-toolbar-padding: 8px;
  20871. --f7-text-editor-toolbar-box-shadow: 0px 2px 3px -1px rgba(0, 0, 0, 0.25);
  20872. }
  20873. .aurora {
  20874. --f7-text-editor-toolbar-padding: 3px;
  20875. --f7-text-editor-toolbar-border-color: rgba(0, 0, 0, 0.25);
  20876. }
  20877. .aurora .theme-dark,
  20878. .aurora.theme-dark {
  20879. --f7-text-editor-toolbar-border-color: rgba(255, 255, 255, 0.1);
  20880. }
  20881. .text-editor {
  20882. margin: var(--f7-text-editor-margin);
  20883. background-color: var(--f7-text-editor-bg-color);
  20884. display: block;
  20885. position: relative;
  20886. border: var(--f7-text-editor-border-width) solid var(--f7-text-editor-border-color);
  20887. display: flex;
  20888. flex-direction: column;
  20889. align-items: stretch;
  20890. height: var(--f7-text-editor-height);
  20891. box-sizing: border-box;
  20892. }
  20893. .text-editor.text-editor-resizable {
  20894. height: auto;
  20895. }
  20896. .text-editor-toolbar {
  20897. display: flex;
  20898. flex-wrap: wrap;
  20899. background: var(--f7-text-editor-toolbar-bg-color);
  20900. z-index: 100;
  20901. position: relative;
  20902. position: -webkit-sticky;
  20903. position: sticky;
  20904. left: 0;
  20905. top: 0;
  20906. padding: var(--f7-text-editor-toolbar-padding);
  20907. flex-shrink: 0;
  20908. box-shadow: var(--f7-text-editor-toolbar-box-shadow);
  20909. box-sizing: border-box;
  20910. }
  20911. .text-editor-toolbar:after {
  20912. content: '';
  20913. position: absolute;
  20914. background-color: var(--f7-text-editor-toolbar-border-color);
  20915. display: block;
  20916. z-index: 15;
  20917. top: auto;
  20918. right: auto;
  20919. bottom: 0;
  20920. left: 0;
  20921. height: 1px;
  20922. width: 100%;
  20923. transform-origin: 50% 100%;
  20924. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  20925. }
  20926. button.text-editor-button {
  20927. -webkit-appearance: none;
  20928. -moz-appearance: none;
  20929. appearance: none;
  20930. border: none;
  20931. padding: 0;
  20932. margin: 0;
  20933. outline: 0;
  20934. font-family: inherit;
  20935. background: transparent;
  20936. cursor: pointer;
  20937. box-shadow: none;
  20938. border-radius: var(--f7-text-editor-button-border-radius);
  20939. position: relative;
  20940. z-index: 1;
  20941. display: flex;
  20942. width: auto;
  20943. overflow: hidden;
  20944. width: var(--f7-text-editor-button-size);
  20945. height: var(--f7-text-editor-button-size);
  20946. align-items: center;
  20947. justify-content: center;
  20948. margin: var(--f7-text-editor-button-margin);
  20949. box-sizing: border-box;
  20950. color: var(--f7-text-editor-button-text-color);
  20951. background-color: var(--f7-text-editor-button-bg-color);
  20952. flex-shrink: 0;
  20953. }
  20954. button.text-editor-button i {
  20955. font-size: var(--f7-text-editor-button-icon-size);
  20956. font-style: normal;
  20957. }
  20958. button.text-editor-button i sup,
  20959. button.text-editor-button i sub {
  20960. font-size: 60%;
  20961. }
  20962. .text-editor-button-divider {
  20963. width: 1px;
  20964. background: var(--f7-text-editor-button-divider-color);
  20965. margin: 0 2px;
  20966. flex-shrink: 0;
  20967. }
  20968. .text-editor-content {
  20969. -webkit-user-modify: read-write;
  20970. -webkit-appearance: none;
  20971. -moz-appearance: none;
  20972. appearance: none;
  20973. border: none;
  20974. outline: 0;
  20975. height: 100%;
  20976. -webkit-user-select: text;
  20977. -moz-user-select: text;
  20978. user-select: text;
  20979. padding: var(--f7-text-editor-padding);
  20980. overflow: auto;
  20981. flex-shrink: 10;
  20982. box-sizing: border-box;
  20983. color: var(--f7-text-editor-text-color);
  20984. font-size: var(--f7-text-editor-font-size);
  20985. font-weight: var(--f7-text-editor-font-weight);
  20986. }
  20987. .text-editor-content .text-editor-placeholder {
  20988. pointer-events: none;
  20989. color: var(--f7-text-editor-placeholder-color);
  20990. }
  20991. .text-editor-content img {
  20992. max-width: 100%;
  20993. }
  20994. .text-editor-content a {
  20995. pointer-events: none;
  20996. }
  20997. .text-editor-popover {
  20998. z-index: 12500;
  20999. width: auto;
  21000. max-width: 80vw;
  21001. }
  21002. .text-editor-popover .popover-inner {
  21003. display: flex;
  21004. flex-wrap: wrap;
  21005. padding: 3px;
  21006. }
  21007. .text-editor-keyboard-toolbar {
  21008. position: absolute;
  21009. z-index: 6000;
  21010. --f7-safe-area-bottom: 0px;
  21011. }
  21012. .text-editor-keyboard-toolbar .toolbar-inner {
  21013. justify-content: flex-start !important;
  21014. overflow: auto;
  21015. -webkit-overflow-scrolling: touch;
  21016. }
  21017. .text-editor-keyboard-toolbar .toolbar-inner::-webkit-scrollbar {
  21018. display: none;
  21019. }
  21020. .text-editor-keyboard-toolbar .toolbar-inner .text-editor-button-divider {
  21021. height: 100%;
  21022. }
  21023. .item-input .text-editor {
  21024. border: none;
  21025. margin: 0;
  21026. background-color: var(--f7-input-bg-color, transparent);
  21027. }
  21028. .item-input .text-editor-content {
  21029. padding-top: var(--f7-textarea-padding-vertical);
  21030. padding-bottom: var(--f7-textarea-padding-vertical);
  21031. padding-left: var(--f7-input-padding-left);
  21032. padding-right: var(--f7-input-padding-right);
  21033. color: var(--f7-input-text-color);
  21034. font-size: var(--f7-input-font-size);
  21035. }
  21036. .item-input .text-editor-toolbar {
  21037. box-shadow: none;
  21038. }
  21039. .item-input .text-editor-toolbar:after {
  21040. display: none !important;
  21041. }
  21042. .item-input-outline .text-editor-content {
  21043. border-radius: var(--f7-input-outline-border-radius);
  21044. padding-left: var(--f7-input-outline-padding-horizontal);
  21045. padding-right: var(--f7-input-outline-padding-horizontal);
  21046. }
  21047. .ios button.text-editor-button {
  21048. transition: opacity 300ms;
  21049. }
  21050. .ios button.text-editor-button.active-state {
  21051. opacity: 0.3;
  21052. transition-duration: 0ms;
  21053. }
  21054. .md button.text-editor-button:before {
  21055. content: '';
  21056. width: 152%;
  21057. height: 152%;
  21058. position: absolute;
  21059. left: -26%;
  21060. top: -26%;
  21061. background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
  21062. background-repeat: no-repeat;
  21063. background-position: center;
  21064. background-size: 100% 100%;
  21065. opacity: 0;
  21066. pointer-events: none;
  21067. transition-duration: 600ms;
  21068. }
  21069. .md button.text-editor-button.active-state:before {
  21070. opacity: 1;
  21071. transition-duration: 150ms;
  21072. }
  21073. .md .text-editor-keyboard-toolbar .toolbar-inner {
  21074. padding-left: 8px;
  21075. padding-right: 8px;
  21076. }
  21077. .aurora button.text-editor-button {
  21078. transition: opacity 300ms;
  21079. }
  21080. .aurora button.text-editor-button.active-state {
  21081. opacity: 0.3;
  21082. transition-duration: 0ms;
  21083. }
  21084. /* === Elevation === */
  21085. :root {
  21086. --f7-elevation-0: 0px 0px 0px 0px rgba(0, 0, 0, 0);
  21087. --f7-elevation-1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
  21088. 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
  21089. 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  21090. --f7-elevation-2: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
  21091. 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
  21092. 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  21093. --f7-elevation-3: 0px 3px 3px -2px rgba(0, 0, 0, 0.2),
  21094. 0px 3px 4px 0px rgba(0, 0, 0, 0.14),
  21095. 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  21096. --f7-elevation-4: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
  21097. 0px 4px 5px 0px rgba(0, 0, 0, 0.14),
  21098. 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  21099. --f7-elevation-5: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
  21100. 0px 5px 8px 0px rgba(0, 0, 0, 0.14),
  21101. 0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  21102. --f7-elevation-6: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
  21103. 0px 6px 10px 0px rgba(0, 0, 0, 0.14),
  21104. 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  21105. --f7-elevation-7: 0px 4px 5px -2px rgba(0, 0, 0, 0.2),
  21106. 0px 7px 10px 1px rgba(0, 0, 0, 0.14),
  21107. 0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  21108. --f7-elevation-8: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
  21109. 0px 8px 10px 1px rgba(0, 0, 0, 0.14),
  21110. 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  21111. --f7-elevation-9: 0px 5px 6px -3px rgba(0, 0, 0, 0.2),
  21112. 0px 9px 12px 1px rgba(0, 0, 0, 0.14),
  21113. 0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  21114. --f7-elevation-10: 0px 6px 6px -3px rgba(0, 0, 0, 0.2),
  21115. 0px 10px 14px 1px rgba(0, 0, 0, 0.14),
  21116. 0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  21117. --f7-elevation-11: 0px 6px 7px -4px rgba(0, 0, 0, 0.2),
  21118. 0px 11px 15px 1px rgba(0, 0, 0, 0.14),
  21119. 0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  21120. --f7-elevation-12: 0px 7px 8px -4px rgba(0, 0, 0, 0.2),
  21121. 0px 12px 17px 2px rgba(0, 0, 0, 0.14),
  21122. 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  21123. --f7-elevation-13: 0px 7px 8px -4px rgba(0, 0, 0, 0.2),
  21124. 0px 13px 19px 2px rgba(0, 0, 0, 0.14),
  21125. 0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  21126. --f7-elevation-14: 0px 7px 9px -4px rgba(0, 0, 0, 0.2),
  21127. 0px 14px 21px 2px rgba(0, 0, 0, 0.14),
  21128. 0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  21129. --f7-elevation-15: 0px 8px 9px -5px rgba(0, 0, 0, 0.2),
  21130. 0px 15px 22px 2px rgba(0, 0, 0, 0.14),
  21131. 0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  21132. --f7-elevation-16: 0px 8px 10px -5px rgba(0, 0, 0, 0.2),
  21133. 0px 16px 24px 2px rgba(0, 0, 0, 0.14),
  21134. 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  21135. --f7-elevation-17: 0px 8px 11px -5px rgba(0, 0, 0, 0.2),
  21136. 0px 17px 26px 2px rgba(0, 0, 0, 0.14),
  21137. 0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  21138. --f7-elevation-18: 0px 9px 11px -5px rgba(0, 0, 0, 0.2),
  21139. 0px 18px 28px 2px rgba(0, 0, 0, 0.14),
  21140. 0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  21141. --f7-elevation-19: 0px 9px 12px -6px rgba(0, 0, 0, 0.2),
  21142. 0px 19px 29px 2px rgba(0, 0, 0, 0.14),
  21143. 0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  21144. --f7-elevation-20: 0px 10px 13px -6px rgba(0, 0, 0, 0.2),
  21145. 0px 20px 31px 3px rgba(0, 0, 0, 0.14),
  21146. 0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  21147. --f7-elevation-21: 0px 10px 13px -6px rgba(0, 0, 0, 0.2),
  21148. 0px 21px 33px 3px rgba(0, 0, 0, 0.14),
  21149. 0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  21150. --f7-elevation-22: 0px 10px 14px -6px rgba(0, 0, 0, 0.2),
  21151. 0px 22px 35px 3px rgba(0, 0, 0, 0.14),
  21152. 0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  21153. --f7-elevation-23: 0px 11px 14px -7px rgba(0, 0, 0, 0.2),
  21154. 0px 23px 36px 3px rgba(0, 0, 0, 0.14),
  21155. 0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  21156. --f7-elevation-24: 0px 11px 15px -7px rgba(0, 0, 0, 0.2),
  21157. 0px 24px 38px 3px rgba(0, 0, 0, 0.14),
  21158. 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  21159. }
  21160. .elevation-0 {
  21161. box-shadow: var(--f7-elevation-0) !important;
  21162. }
  21163. .elevation-1 {
  21164. box-shadow: var(--f7-elevation-1) !important;
  21165. }
  21166. .elevation-2 {
  21167. box-shadow: var(--f7-elevation-2) !important;
  21168. }
  21169. .elevation-3 {
  21170. box-shadow: var(--f7-elevation-3) !important;
  21171. }
  21172. .elevation-4 {
  21173. box-shadow: var(--f7-elevation-4) !important;
  21174. }
  21175. .elevation-5 {
  21176. box-shadow: var(--f7-elevation-5) !important;
  21177. }
  21178. .elevation-6 {
  21179. box-shadow: var(--f7-elevation-6) !important;
  21180. }
  21181. .elevation-7 {
  21182. box-shadow: var(--f7-elevation-7) !important;
  21183. }
  21184. .elevation-8 {
  21185. box-shadow: var(--f7-elevation-8) !important;
  21186. }
  21187. .elevation-9 {
  21188. box-shadow: var(--f7-elevation-9) !important;
  21189. }
  21190. .elevation-10 {
  21191. box-shadow: var(--f7-elevation-10) !important;
  21192. }
  21193. .elevation-11 {
  21194. box-shadow: var(--f7-elevation-11) !important;
  21195. }
  21196. .elevation-12 {
  21197. box-shadow: var(--f7-elevation-12) !important;
  21198. }
  21199. .elevation-13 {
  21200. box-shadow: var(--f7-elevation-13) !important;
  21201. }
  21202. .elevation-14 {
  21203. box-shadow: var(--f7-elevation-14) !important;
  21204. }
  21205. .elevation-15 {
  21206. box-shadow: var(--f7-elevation-15) !important;
  21207. }
  21208. .elevation-16 {
  21209. box-shadow: var(--f7-elevation-16) !important;
  21210. }
  21211. .elevation-17 {
  21212. box-shadow: var(--f7-elevation-17) !important;
  21213. }
  21214. .elevation-18 {
  21215. box-shadow: var(--f7-elevation-18) !important;
  21216. }
  21217. .elevation-19 {
  21218. box-shadow: var(--f7-elevation-19) !important;
  21219. }
  21220. .elevation-20 {
  21221. box-shadow: var(--f7-elevation-20) !important;
  21222. }
  21223. .elevation-21 {
  21224. box-shadow: var(--f7-elevation-21) !important;
  21225. }
  21226. .elevation-22 {
  21227. box-shadow: var(--f7-elevation-22) !important;
  21228. }
  21229. .elevation-23 {
  21230. box-shadow: var(--f7-elevation-23) !important;
  21231. }
  21232. .elevation-24 {
  21233. box-shadow: var(--f7-elevation-24) !important;
  21234. }
  21235. .device-desktop .elevation-hover-0:hover {
  21236. box-shadow: var(--f7-elevation-0) !important;
  21237. }
  21238. .device-desktop .elevation-hover-1:hover {
  21239. box-shadow: var(--f7-elevation-1) !important;
  21240. }
  21241. .device-desktop .elevation-hover-2:hover {
  21242. box-shadow: var(--f7-elevation-2) !important;
  21243. }
  21244. .device-desktop .elevation-hover-3:hover {
  21245. box-shadow: var(--f7-elevation-3) !important;
  21246. }
  21247. .device-desktop .elevation-hover-4:hover {
  21248. box-shadow: var(--f7-elevation-4) !important;
  21249. }
  21250. .device-desktop .elevation-hover-5:hover {
  21251. box-shadow: var(--f7-elevation-5) !important;
  21252. }
  21253. .device-desktop .elevation-hover-6:hover {
  21254. box-shadow: var(--f7-elevation-6) !important;
  21255. }
  21256. .device-desktop .elevation-hover-7:hover {
  21257. box-shadow: var(--f7-elevation-7) !important;
  21258. }
  21259. .device-desktop .elevation-hover-8:hover {
  21260. box-shadow: var(--f7-elevation-8) !important;
  21261. }
  21262. .device-desktop .elevation-hover-9:hover {
  21263. box-shadow: var(--f7-elevation-9) !important;
  21264. }
  21265. .device-desktop .elevation-hover-10:hover {
  21266. box-shadow: var(--f7-elevation-10) !important;
  21267. }
  21268. .device-desktop .elevation-hover-11:hover {
  21269. box-shadow: var(--f7-elevation-11) !important;
  21270. }
  21271. .device-desktop .elevation-hover-12:hover {
  21272. box-shadow: var(--f7-elevation-12) !important;
  21273. }
  21274. .device-desktop .elevation-hover-13:hover {
  21275. box-shadow: var(--f7-elevation-13) !important;
  21276. }
  21277. .device-desktop .elevation-hover-14:hover {
  21278. box-shadow: var(--f7-elevation-14) !important;
  21279. }
  21280. .device-desktop .elevation-hover-15:hover {
  21281. box-shadow: var(--f7-elevation-15) !important;
  21282. }
  21283. .device-desktop .elevation-hover-16:hover {
  21284. box-shadow: var(--f7-elevation-16) !important;
  21285. }
  21286. .device-desktop .elevation-hover-17:hover {
  21287. box-shadow: var(--f7-elevation-17) !important;
  21288. }
  21289. .device-desktop .elevation-hover-18:hover {
  21290. box-shadow: var(--f7-elevation-18) !important;
  21291. }
  21292. .device-desktop .elevation-hover-19:hover {
  21293. box-shadow: var(--f7-elevation-19) !important;
  21294. }
  21295. .device-desktop .elevation-hover-20:hover {
  21296. box-shadow: var(--f7-elevation-20) !important;
  21297. }
  21298. .device-desktop .elevation-hover-21:hover {
  21299. box-shadow: var(--f7-elevation-21) !important;
  21300. }
  21301. .device-desktop .elevation-hover-22:hover {
  21302. box-shadow: var(--f7-elevation-22) !important;
  21303. }
  21304. .device-desktop .elevation-hover-23:hover {
  21305. box-shadow: var(--f7-elevation-23) !important;
  21306. }
  21307. .device-desktop .elevation-hover-24:hover {
  21308. box-shadow: var(--f7-elevation-24) !important;
  21309. }
  21310. .active-state.elevation-pressed-0,
  21311. .device-desktop .active-state.elevation-pressed-0 {
  21312. box-shadow: var(--f7-elevation-0) !important;
  21313. }
  21314. .active-state.elevation-pressed-1,
  21315. .device-desktop .active-state.elevation-pressed-1 {
  21316. box-shadow: var(--f7-elevation-1) !important;
  21317. }
  21318. .active-state.elevation-pressed-2,
  21319. .device-desktop .active-state.elevation-pressed-2 {
  21320. box-shadow: var(--f7-elevation-2) !important;
  21321. }
  21322. .active-state.elevation-pressed-3,
  21323. .device-desktop .active-state.elevation-pressed-3 {
  21324. box-shadow: var(--f7-elevation-3) !important;
  21325. }
  21326. .active-state.elevation-pressed-4,
  21327. .device-desktop .active-state.elevation-pressed-4 {
  21328. box-shadow: var(--f7-elevation-4) !important;
  21329. }
  21330. .active-state.elevation-pressed-5,
  21331. .device-desktop .active-state.elevation-pressed-5 {
  21332. box-shadow: var(--f7-elevation-5) !important;
  21333. }
  21334. .active-state.elevation-pressed-6,
  21335. .device-desktop .active-state.elevation-pressed-6 {
  21336. box-shadow: var(--f7-elevation-6) !important;
  21337. }
  21338. .active-state.elevation-pressed-7,
  21339. .device-desktop .active-state.elevation-pressed-7 {
  21340. box-shadow: var(--f7-elevation-7) !important;
  21341. }
  21342. .active-state.elevation-pressed-8,
  21343. .device-desktop .active-state.elevation-pressed-8 {
  21344. box-shadow: var(--f7-elevation-8) !important;
  21345. }
  21346. .active-state.elevation-pressed-9,
  21347. .device-desktop .active-state.elevation-pressed-9 {
  21348. box-shadow: var(--f7-elevation-9) !important;
  21349. }
  21350. .active-state.elevation-pressed-10,
  21351. .device-desktop .active-state.elevation-pressed-10 {
  21352. box-shadow: var(--f7-elevation-10) !important;
  21353. }
  21354. .active-state.elevation-pressed-11,
  21355. .device-desktop .active-state.elevation-pressed-11 {
  21356. box-shadow: var(--f7-elevation-11) !important;
  21357. }
  21358. .active-state.elevation-pressed-12,
  21359. .device-desktop .active-state.elevation-pressed-12 {
  21360. box-shadow: var(--f7-elevation-12) !important;
  21361. }
  21362. .active-state.elevation-pressed-13,
  21363. .device-desktop .active-state.elevation-pressed-13 {
  21364. box-shadow: var(--f7-elevation-13) !important;
  21365. }
  21366. .active-state.elevation-pressed-14,
  21367. .device-desktop .active-state.elevation-pressed-14 {
  21368. box-shadow: var(--f7-elevation-14) !important;
  21369. }
  21370. .active-state.elevation-pressed-15,
  21371. .device-desktop .active-state.elevation-pressed-15 {
  21372. box-shadow: var(--f7-elevation-15) !important;
  21373. }
  21374. .active-state.elevation-pressed-16,
  21375. .device-desktop .active-state.elevation-pressed-16 {
  21376. box-shadow: var(--f7-elevation-16) !important;
  21377. }
  21378. .active-state.elevation-pressed-17,
  21379. .device-desktop .active-state.elevation-pressed-17 {
  21380. box-shadow: var(--f7-elevation-17) !important;
  21381. }
  21382. .active-state.elevation-pressed-18,
  21383. .device-desktop .active-state.elevation-pressed-18 {
  21384. box-shadow: var(--f7-elevation-18) !important;
  21385. }
  21386. .active-state.elevation-pressed-19,
  21387. .device-desktop .active-state.elevation-pressed-19 {
  21388. box-shadow: var(--f7-elevation-19) !important;
  21389. }
  21390. .active-state.elevation-pressed-20,
  21391. .device-desktop .active-state.elevation-pressed-20 {
  21392. box-shadow: var(--f7-elevation-20) !important;
  21393. }
  21394. .active-state.elevation-pressed-21,
  21395. .device-desktop .active-state.elevation-pressed-21 {
  21396. box-shadow: var(--f7-elevation-21) !important;
  21397. }
  21398. .active-state.elevation-pressed-22,
  21399. .device-desktop .active-state.elevation-pressed-22 {
  21400. box-shadow: var(--f7-elevation-22) !important;
  21401. }
  21402. .active-state.elevation-pressed-23,
  21403. .device-desktop .active-state.elevation-pressed-23 {
  21404. box-shadow: var(--f7-elevation-23) !important;
  21405. }
  21406. .active-state.elevation-pressed-24,
  21407. .device-desktop .active-state.elevation-pressed-24 {
  21408. box-shadow: var(--f7-elevation-24) !important;
  21409. }
  21410. .elevation-transition-100 {
  21411. transition-duration: 100ms;
  21412. transition-property: box-shadow;
  21413. }
  21414. .elevation-transition,
  21415. .elevation-transition-200 {
  21416. transition-duration: 200ms;
  21417. transition-property: box-shadow;
  21418. }
  21419. .elevation-transition-300 {
  21420. transition-duration: 300ms;
  21421. transition-property: box-shadow;
  21422. }
  21423. .elevation-transition-400 {
  21424. transition-duration: 400ms;
  21425. transition-property: box-shadow;
  21426. }
  21427. .elevation-transition-500 {
  21428. transition-duration: 500ms;
  21429. transition-property: box-shadow;
  21430. }
  21431. /* === Typography === */
  21432. :root {
  21433. --f7-typography-padding: 16px;
  21434. --f7-typography-margin: 16px;
  21435. }
  21436. .display-flex {
  21437. display: flex !important;
  21438. }
  21439. .display-block {
  21440. display: block !important;
  21441. }
  21442. .display-inline-flex {
  21443. display: inline-flex !important;
  21444. }
  21445. .display-inline-block {
  21446. display: inline-block !important;
  21447. }
  21448. .display-inline {
  21449. display: inline !important;
  21450. }
  21451. .display-none {
  21452. display: none !important;
  21453. }
  21454. .flex-shrink-0 {
  21455. flex-shrink: 0 !important;
  21456. }
  21457. .flex-shrink-1 {
  21458. flex-shrink: 1 !important;
  21459. }
  21460. .flex-shrink-2 {
  21461. flex-shrink: 2 !important;
  21462. }
  21463. .flex-shrink-3 {
  21464. flex-shrink: 3 !important;
  21465. }
  21466. .flex-shrink-4 {
  21467. flex-shrink: 4 !important;
  21468. }
  21469. .flex-shrink-5 {
  21470. flex-shrink: 5 !important;
  21471. }
  21472. .flex-shrink-6 {
  21473. flex-shrink: 6 !important;
  21474. }
  21475. .flex-shrink-7 {
  21476. flex-shrink: 7 !important;
  21477. }
  21478. .flex-shrink-8 {
  21479. flex-shrink: 8 !important;
  21480. }
  21481. .flex-shrink-9 {
  21482. flex-shrink: 9 !important;
  21483. }
  21484. .flex-shrink-10 {
  21485. flex-shrink: 10 !important;
  21486. }
  21487. .flex-direction-row {
  21488. flex-direction: row !important;
  21489. }
  21490. .flex-direction-row-reverse {
  21491. flex-direction: row-reverse !important;
  21492. }
  21493. .flex-direction-column {
  21494. flex-direction: column !important;
  21495. }
  21496. .flex-direction-column-reverse {
  21497. flex-direction: column-reverse !important;
  21498. }
  21499. .justify-content-flex-start {
  21500. justify-content: flex-start !important;
  21501. }
  21502. .justify-content-center {
  21503. justify-content: center !important;
  21504. }
  21505. .justify-content-flex-end {
  21506. justify-content: flex-end !important;
  21507. }
  21508. .justify-content-space-between {
  21509. justify-content: space-between !important;
  21510. }
  21511. .justify-content-space-around {
  21512. justify-content: space-around !important;
  21513. }
  21514. .justify-content-space-evenly {
  21515. justify-content: space-evenly !important;
  21516. }
  21517. .justify-content-stretch {
  21518. justify-content: stretch !important;
  21519. }
  21520. .justify-content-start {
  21521. justify-content: start !important;
  21522. }
  21523. .justify-content-end {
  21524. justify-content: end !important;
  21525. }
  21526. .justify-content-left {
  21527. justify-content: left !important;
  21528. }
  21529. .justify-content-right {
  21530. justify-content: right !important;
  21531. }
  21532. .align-content-flex-start {
  21533. align-content: flex-start !important;
  21534. }
  21535. .align-content-flex-end {
  21536. align-content: flex-end !important;
  21537. }
  21538. .align-content-center {
  21539. align-content: center !important;
  21540. }
  21541. .align-content-space-between {
  21542. align-content: space-between !important;
  21543. }
  21544. .align-content-space-around {
  21545. align-content: space-around !important;
  21546. }
  21547. .align-content-stretch {
  21548. align-content: stretch !important;
  21549. }
  21550. .align-items-baseline {
  21551. align-items: baseline !important;
  21552. }
  21553. .align-items-flex-start {
  21554. align-items: flex-start !important;
  21555. }
  21556. .align-items-flex-end {
  21557. align-items: flex-end !important;
  21558. }
  21559. .align-items-center {
  21560. align-items: center !important;
  21561. }
  21562. .align-items-stretch {
  21563. align-items: stretch !important;
  21564. }
  21565. .align-self-flex-start {
  21566. align-self: flex-start !important;
  21567. }
  21568. .align-self-flex-end {
  21569. align-self: flex-end !important;
  21570. }
  21571. .align-self-center {
  21572. align-self: center !important;
  21573. }
  21574. .align-self-stretch {
  21575. align-self: stretch !important;
  21576. }
  21577. .text-align-left {
  21578. text-align: left !important;
  21579. }
  21580. .text-align-center {
  21581. text-align: center !important;
  21582. }
  21583. .text-align-right {
  21584. text-align: right !important;
  21585. }
  21586. .text-align-justify {
  21587. text-align: justify !important;
  21588. }
  21589. .float-left {
  21590. float: left !important;
  21591. }
  21592. .float-right {
  21593. float: right !important;
  21594. }
  21595. .float-none {
  21596. float: none !important;
  21597. }
  21598. .vertical-align-bottom {
  21599. vertical-align: bottom !important;
  21600. }
  21601. .vertical-align-middle {
  21602. vertical-align: middle !important;
  21603. }
  21604. .vertical-align-top {
  21605. vertical-align: top !important;
  21606. }
  21607. .no-padding {
  21608. padding: 0 !important;
  21609. }
  21610. .no-padding-left {
  21611. padding-left: 0 !important;
  21612. }
  21613. .no-padding-right {
  21614. padding-right: 0 !important;
  21615. }
  21616. .no-padding-horizontal {
  21617. padding-left: 0 !important;
  21618. padding-right: 0 !important;
  21619. }
  21620. .no-padding-top {
  21621. padding-top: 0 !important;
  21622. }
  21623. .no-padding-bottom {
  21624. padding-bottom: 0 !important;
  21625. }
  21626. .no-padding-vertical {
  21627. padding-top: 0 !important;
  21628. padding-bottom: 0 !important;
  21629. }
  21630. .no-margin {
  21631. margin: 0 !important;
  21632. }
  21633. .no-margin-left {
  21634. margin-left: 0 !important;
  21635. }
  21636. .no-margin-right {
  21637. margin-right: 0 !important;
  21638. }
  21639. .no-margin-horizontal {
  21640. margin-left: 0 !important;
  21641. margin-right: 0 !important;
  21642. }
  21643. .no-margin-top {
  21644. margin-top: 0 !important;
  21645. }
  21646. .no-margin-bottom {
  21647. margin-bottom: 0 !important;
  21648. }
  21649. .no-margin-vertical {
  21650. margin-top: 0 !important;
  21651. margin-bottom: 0 !important;
  21652. }
  21653. .width-auto {
  21654. width: auto !important;
  21655. }
  21656. .width-100 {
  21657. width: 100% !important;
  21658. }
  21659. .padding {
  21660. padding: var(--f7-typography-padding) !important;
  21661. }
  21662. .padding-half {
  21663. padding: calc(var(--f7-typography-padding) / 2) !important;
  21664. }
  21665. .padding-top {
  21666. padding-top: var(--f7-typography-padding) !important;
  21667. }
  21668. .padding-top-half {
  21669. padding-top: calc(var(--f7-typography-padding) / 2) !important;
  21670. }
  21671. .padding-bottom {
  21672. padding-bottom: var(--f7-typography-padding) !important;
  21673. }
  21674. .padding-bottom-half {
  21675. padding-bottom: calc(var(--f7-typography-padding) / 2) !important;
  21676. }
  21677. .padding-left {
  21678. padding-left: var(--f7-typography-padding) !important;
  21679. }
  21680. .padding-left-half {
  21681. padding-left: calc(var(--f7-typography-padding) / 2) !important;
  21682. }
  21683. .padding-right {
  21684. padding-right: var(--f7-typography-padding) !important;
  21685. }
  21686. .padding-right-half {
  21687. padding-right: calc(var(--f7-typography-padding) / 2) !important;
  21688. }
  21689. .padding-vertical {
  21690. padding-top: var(--f7-typography-padding) !important;
  21691. padding-bottom: var(--f7-typography-padding) !important;
  21692. }
  21693. .padding-vertical-half {
  21694. padding-top: calc(var(--f7-typography-padding) / 2) !important;
  21695. padding-bottom: calc(var(--f7-typography-padding) / 2) !important;
  21696. }
  21697. .padding-horizontal {
  21698. padding-left: var(--f7-typography-padding) !important;
  21699. padding-right: var(--f7-typography-padding) !important;
  21700. }
  21701. .padding-horizontal-half {
  21702. padding-left: calc(var(--f7-typography-padding) / 2) !important;
  21703. padding-right: calc(var(--f7-typography-padding) / 2) !important;
  21704. }
  21705. .margin {
  21706. margin: var(--f7-typography-margin) !important;
  21707. }
  21708. .margin-half {
  21709. margin: calc(var(--f7-typography-margin) / 2) !important;
  21710. }
  21711. .margin-top {
  21712. margin-top: var(--f7-typography-margin) !important;
  21713. }
  21714. .margin-top-half {
  21715. margin-top: calc(var(--f7-typography-margin) / 2) !important;
  21716. }
  21717. .margin-bottom {
  21718. margin-bottom: var(--f7-typography-margin) !important;
  21719. }
  21720. .margin-bottom-half {
  21721. margin-bottom: calc(var(--f7-typography-margin) / 2) !important;
  21722. }
  21723. .margin-left {
  21724. margin-left: var(--f7-typography-margin) !important;
  21725. }
  21726. .margin-left-half {
  21727. margin-left: calc(var(--f7-typography-margin) / 2) !important;
  21728. }
  21729. .margin-right {
  21730. margin-right: var(--f7-typography-margin) !important;
  21731. }
  21732. .margin-right-half {
  21733. margin-right: calc(var(--f7-typography-margin) / 2) !important;
  21734. }
  21735. .margin-vertical {
  21736. margin-top: var(--f7-typography-margin) !important;
  21737. margin-bottom: var(--f7-typography-margin) !important;
  21738. }
  21739. .margin-vertical-half {
  21740. margin-top: calc(var(--f7-typography-margin) / 2) !important;
  21741. margin-bottom: calc(var(--f7-typography-margin) / 2) !important;
  21742. }
  21743. .margin-horizontal {
  21744. margin-left: var(--f7-typography-margin) !important;
  21745. margin-right: var(--f7-typography-margin) !important;
  21746. }
  21747. .margin-horizontal-half {
  21748. margin-left: calc(var(--f7-typography-margin) / 2) !important;
  21749. margin-right: calc(var(--f7-typography-margin) / 2) !important;
  21750. }
  21751. [class*="text-color-"] {
  21752. color: var(--f7-theme-color-text-color) !important;
  21753. }
  21754. [class*="bg-color-"] {
  21755. background-color: var(--f7-theme-color-bg-color) !important;
  21756. }
  21757. [class*="border-color-"] {
  21758. border-color: var(--f7-theme-color-border-color) !important;
  21759. }
  21760. iframe#viAd {
  21761. z-index: 12900 !important;
  21762. background: #000 !important;
  21763. }
  21764. .vi-overlay {
  21765. background: rgba(0, 0, 0, 0.85);
  21766. z-index: 13100;
  21767. position: absolute;
  21768. left: 0%;
  21769. top: 0%;
  21770. width: 100%;
  21771. height: 100%;
  21772. border-radius: 3px;
  21773. display: flex;
  21774. justify-content: center;
  21775. flex-direction: column;
  21776. align-items: center;
  21777. align-content: center;
  21778. text-align: center;
  21779. -webkit-user-select: none;
  21780. -moz-user-select: none;
  21781. user-select: none;
  21782. }
  21783. @supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  21784. .vi-overlay {
  21785. background: rgba(0, 0, 0, 0.65);
  21786. -webkit-backdrop-filter: blur(10px);
  21787. backdrop-filter: blur(10px);
  21788. }
  21789. }
  21790. .vi-overlay .vi-overlay-text {
  21791. text-align: center;
  21792. color: #fff;
  21793. max-width: 80%;
  21794. }
  21795. .vi-overlay .vi-overlay-text + .vi-overlay-play-button {
  21796. margin-top: 15px;
  21797. }
  21798. .vi-overlay .vi-overlay-play-button {
  21799. width: 44px;
  21800. height: 44px;
  21801. border-radius: 50%;
  21802. border: 2px solid #fff;
  21803. position: relative;
  21804. }
  21805. .vi-overlay .vi-overlay-play-button.active-state {
  21806. opacity: 0.55;
  21807. }
  21808. .vi-overlay .vi-overlay-play-button:before {
  21809. content: '';
  21810. width: 0;
  21811. height: 0;
  21812. border-top: 8px solid transparent;
  21813. border-bottom: 8px solid transparent;
  21814. border-left: 14px solid #fff;
  21815. position: absolute;
  21816. left: 50%;
  21817. top: 50%;
  21818. margin-left: 2px;
  21819. transform: translate(-50%, -50%);
  21820. }