framework7 8.3.4 → 9.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (345) hide show
  1. package/components/accordion/accordion-rtl.css +1 -1
  2. package/components/accordion/accordion.css +1 -1
  3. package/components/actions/actions-ios.less +22 -15
  4. package/components/actions/actions-rtl.css +1 -1
  5. package/components/actions/actions-vars.less +4 -7
  6. package/components/actions/actions.css +1 -1
  7. package/components/actions/actions.js +2 -8
  8. package/components/actions/actions.less +0 -3
  9. package/components/app/app-class.d.ts +2 -0
  10. package/components/app/app-class.js +19 -15
  11. package/components/app/app-vars.less +41 -6
  12. package/components/app/app.less +1 -1
  13. package/components/area-chart/area-chart-class.js +18 -31
  14. package/components/area-chart/area-chart-rtl.css +1 -1
  15. package/components/area-chart/area-chart.css +1 -1
  16. package/components/autocomplete/autocomplete-class.js +13 -14
  17. package/components/autocomplete/autocomplete-ios.less +16 -0
  18. package/components/autocomplete/autocomplete-rtl.css +1 -1
  19. package/components/autocomplete/autocomplete.css +1 -1
  20. package/components/autocomplete/autocomplete.d.ts +3 -3
  21. package/components/autocomplete/autocomplete.js +3 -3
  22. package/components/autocomplete/autocomplete.less +7 -1
  23. package/components/block/block-vars.less +6 -6
  24. package/components/breadcrumbs/breadcrumbs-rtl.css +1 -1
  25. package/components/breadcrumbs/breadcrumbs.css +1 -1
  26. package/components/button/button-vars.less +13 -12
  27. package/components/button/button.less +2 -1
  28. package/components/calendar/calendar-class.js +20 -17
  29. package/components/calendar/calendar-ios.less +43 -0
  30. package/components/calendar/calendar-md.less +3 -0
  31. package/components/calendar/calendar-rtl.css +1 -1
  32. package/components/calendar/calendar-vars.less +24 -19
  33. package/components/calendar/calendar.css +1 -1
  34. package/components/calendar/calendar.d.ts +1 -1
  35. package/components/calendar/calendar.js +5 -8
  36. package/components/calendar/calendar.less +4 -2
  37. package/components/card/card-rtl.css +1 -1
  38. package/components/card/card-vars.less +5 -5
  39. package/components/card/card.css +1 -1
  40. package/components/card/card.js +3 -18
  41. package/components/card/card.less +1 -1
  42. package/components/checkbox/checkbox-rtl.css +1 -1
  43. package/components/checkbox/checkbox.css +1 -1
  44. package/components/chip/chip-rtl.css +1 -1
  45. package/components/chip/chip.css +1 -1
  46. package/components/color-picker/color-picker-class.js +11 -23
  47. package/components/color-picker/color-picker-ios.less +9 -0
  48. package/components/color-picker/color-picker-md.less +15 -0
  49. package/components/color-picker/color-picker-rtl.css +1 -1
  50. package/components/color-picker/color-picker-vars.less +9 -3
  51. package/components/color-picker/color-picker.css +1 -1
  52. package/components/color-picker/color-picker.d.ts +1 -2
  53. package/components/color-picker/color-picker.js +3 -7
  54. package/components/color-picker/color-picker.less +5 -25
  55. package/components/color-picker/modules/alpha-slider.js +2 -0
  56. package/components/color-picker/modules/brightness-slider.js +2 -0
  57. package/components/color-picker/modules/hs-spectrum.js +1 -2
  58. package/components/color-picker/modules/hsb-sliders.js +6 -0
  59. package/components/color-picker/modules/hue-slider.js +2 -0
  60. package/components/color-picker/modules/rgb-bars.js +6 -0
  61. package/components/color-picker/modules/rgb-sliders.js +6 -0
  62. package/components/color-picker/modules/sb-spectrum.js +1 -2
  63. package/components/color-picker/modules/wheel.js +1 -2
  64. package/components/contacts-list/contacts-list-rtl.css +1 -1
  65. package/components/contacts-list/contacts-list.css +1 -1
  66. package/components/data-table/data-table-class.js +1 -4
  67. package/components/data-table/data-table-ios.less +1 -1
  68. package/components/data-table/data-table-md.less +4 -2
  69. package/components/data-table/data-table-rtl.css +1 -1
  70. package/components/data-table/data-table.css +1 -1
  71. package/components/data-table/data-table.less +4 -4
  72. package/components/dialog/dialog-class.js +6 -3
  73. package/components/dialog/dialog-ios.less +10 -34
  74. package/components/dialog/dialog-md.less +2 -22
  75. package/components/dialog/dialog-rtl.css +1 -1
  76. package/components/dialog/dialog-vars.less +8 -10
  77. package/components/dialog/dialog.css +1 -1
  78. package/components/dialog/dialog.js +9 -27
  79. package/components/dialog/dialog.less +6 -25
  80. package/components/fab/fab-ios.less +2 -0
  81. package/components/fab/fab-rtl.css +1 -1
  82. package/components/fab/fab-vars.less +30 -6
  83. package/components/fab/fab.css +1 -1
  84. package/components/fab/fab.js +3 -12
  85. package/components/gauge/gauge-class.js +2 -8
  86. package/components/gauge/gauge-rtl.css +1 -1
  87. package/components/gauge/gauge.css +1 -1
  88. package/components/icon/icon-ios.less +10 -0
  89. package/components/icon/icon-md.less +9 -0
  90. package/components/icon/icon.less +2 -1
  91. package/components/infinite-scroll/infinite-scroll-rtl.css +1 -1
  92. package/components/infinite-scroll/infinite-scroll.css +1 -1
  93. package/components/input/input-ios.less +3 -2
  94. package/components/input/input-rtl.css +1 -1
  95. package/components/input/input.css +1 -1
  96. package/components/input/input.js +2 -5
  97. package/components/list/list-vars.less +7 -5
  98. package/components/list/list.less +1 -1
  99. package/components/list-index/list-index-class.js +3 -7
  100. package/components/list-index/list-index-rtl.css +1 -1
  101. package/components/list-index/list-index.css +1 -1
  102. package/components/login-screen/login-screen-rtl.css +1 -1
  103. package/components/login-screen/login-screen.css +1 -1
  104. package/components/login-screen/login-screen.js +2 -8
  105. package/components/login-screen/login-screen.less +1 -0
  106. package/components/messagebar/messagebar-class.js +5 -20
  107. package/components/messagebar/messagebar-ios.less +19 -14
  108. package/components/messagebar/messagebar-md.less +3 -0
  109. package/components/messagebar/messagebar-rtl.css +1 -1
  110. package/components/messagebar/messagebar-vars.less +12 -15
  111. package/components/messagebar/messagebar.css +1 -1
  112. package/components/messagebar/messagebar.less +4 -5
  113. package/components/messages/messages-class.js +25 -52
  114. package/components/messages/messages-ios.less +6 -2
  115. package/components/messages/messages-rtl.css +1 -1
  116. package/components/messages/messages-vars.less +1 -1
  117. package/components/messages/messages.css +1 -1
  118. package/components/navbar/navbar-ios.less +52 -672
  119. package/components/navbar/navbar-md.less +41 -1
  120. package/components/navbar/navbar-vars.less +4 -3
  121. package/components/navbar/navbar.js +28 -185
  122. package/components/navbar/navbar.less +8 -66
  123. package/components/notification/notification-class.js +6 -6
  124. package/components/notification/notification-ios.less +3 -8
  125. package/components/notification/notification-md.less +1 -20
  126. package/components/notification/notification-rtl.css +1 -1
  127. package/components/notification/notification-vars.less +13 -16
  128. package/components/notification/notification.css +1 -1
  129. package/components/notification/notification.less +8 -1
  130. package/components/page/page-ios.less +1 -8
  131. package/components/page/page-md.less +12 -11
  132. package/components/page/page.less +14 -12
  133. package/components/panel/panel-class.js +7 -28
  134. package/components/panel/panel-ios.less +4 -0
  135. package/components/panel/panel-rtl.css +1 -3
  136. package/components/panel/panel-vars.less +8 -5
  137. package/components/panel/panel.css +1 -3
  138. package/components/panel/panel.js +8 -32
  139. package/components/panel/panel.less +9 -9
  140. package/components/panel/resizable-panel.js +2 -4
  141. package/components/photo-browser/photo-browser-class.js +12 -47
  142. package/components/photo-browser/photo-browser-rtl.css +1 -1
  143. package/components/photo-browser/photo-browser-vars.less +8 -10
  144. package/components/photo-browser/photo-browser.css +1 -1
  145. package/components/photo-browser/photo-browser.d.ts +2 -4
  146. package/components/photo-browser/photo-browser.js +1 -3
  147. package/components/photo-browser/photo-browser.less +15 -71
  148. package/components/picker/picker-class.js +4 -5
  149. package/components/picker/picker-ios.less +6 -1
  150. package/components/picker/picker-md.less +9 -0
  151. package/components/picker/picker-rtl.css +1 -1
  152. package/components/picker/picker-vars.less +1 -1
  153. package/components/picker/picker.css +1 -1
  154. package/components/picker/picker.d.ts +1 -1
  155. package/components/picker/picker.js +2 -5
  156. package/components/picker/picker.less +0 -4
  157. package/components/pie-chart/pie-chart-class.js +7 -14
  158. package/components/pie-chart/pie-chart-rtl.css +1 -1
  159. package/components/pie-chart/pie-chart.css +1 -1
  160. package/components/popover/popover-class.js +22 -62
  161. package/components/popover/popover-ios.less +66 -2
  162. package/components/popover/popover-md.less +2 -27
  163. package/components/popover/popover-rtl.css +1 -1
  164. package/components/popover/popover-vars.less +2 -3
  165. package/components/popover/popover.css +1 -1
  166. package/components/popover/popover.d.ts +0 -2
  167. package/components/popover/popover.js +2 -9
  168. package/components/popover/popover.less +28 -50
  169. package/components/popup/popup-class.js +15 -9
  170. package/components/popup/popup-rtl.css +1 -1
  171. package/components/popup/popup-vars.less +2 -2
  172. package/components/popup/popup.css +1 -1
  173. package/components/popup/popup.js +2 -8
  174. package/components/popup/popup.less +6 -6
  175. package/components/preloader/preloader-rtl.css +1 -1
  176. package/components/preloader/preloader.css +1 -1
  177. package/components/preloader/preloader.js +2 -8
  178. package/components/progressbar/progressbar-md.less +12 -0
  179. package/components/progressbar/progressbar-rtl.css +1 -1
  180. package/components/progressbar/progressbar-vars.less +6 -5
  181. package/components/progressbar/progressbar.css +1 -1
  182. package/components/progressbar/progressbar.js +3 -12
  183. package/components/progressbar/progressbar.less +6 -0
  184. package/components/pull-to-refresh/pull-to-refresh-class.js +5 -12
  185. package/components/pull-to-refresh/pull-to-refresh-rtl.css +1 -1
  186. package/components/pull-to-refresh/pull-to-refresh.css +1 -1
  187. package/components/radio/radio-rtl.css +1 -1
  188. package/components/radio/radio.css +1 -1
  189. package/components/range/range-class.js +34 -27
  190. package/components/range/range-ios.less +60 -0
  191. package/components/range/range-md.less +67 -4
  192. package/components/range/range-rtl.css +1 -1
  193. package/components/range/range-vars.less +18 -13
  194. package/components/range/range.css +1 -1
  195. package/components/range/range.d.ts +3 -1
  196. package/components/range/range.js +2 -8
  197. package/components/range/range.less +11 -24
  198. package/components/searchbar/searchbar-class.js +7 -8
  199. package/components/searchbar/searchbar-ios.less +37 -13
  200. package/components/searchbar/searchbar-md.less +5 -0
  201. package/components/searchbar/searchbar-rtl.css +1 -1
  202. package/components/searchbar/searchbar-vars.less +13 -16
  203. package/components/searchbar/searchbar.css +1 -1
  204. package/components/searchbar/searchbar.js +4 -32
  205. package/components/searchbar/searchbar.less +4 -5
  206. package/components/sheet/sheet-class.js +21 -17
  207. package/components/sheet/sheet-ios.less +10 -0
  208. package/components/sheet/sheet-md.less +14 -0
  209. package/components/sheet/sheet-rtl.css +1 -1
  210. package/components/sheet/sheet-vars.less +5 -9
  211. package/components/sheet/sheet.css +1 -1
  212. package/components/sheet/sheet.js +2 -8
  213. package/components/sheet/sheet.less +5 -17
  214. package/components/skeleton/skeleton-rtl.css +1 -1
  215. package/components/skeleton/skeleton.css +1 -1
  216. package/components/smart-select/smart-select-class.js +15 -20
  217. package/components/smart-select/smart-select-rtl.css +1 -1
  218. package/components/smart-select/smart-select.css +1 -1
  219. package/components/smart-select/smart-select.d.ts +5 -7
  220. package/components/smart-select/smart-select.js +4 -4
  221. package/components/sortable/sortable-rtl.css +1 -1
  222. package/components/sortable/sortable.css +1 -1
  223. package/components/sortable/sortable.js +8 -27
  224. package/components/statusbar/statusbar.js +2 -5
  225. package/components/stepper/stepper-rtl.css +1 -1
  226. package/components/stepper/stepper-vars.less +3 -3
  227. package/components/stepper/stepper.css +1 -1
  228. package/components/stepper/stepper.js +2 -8
  229. package/components/subnavbar/subnavbar-ios.less +16 -1
  230. package/components/subnavbar/subnavbar-md.less +5 -5
  231. package/components/subnavbar/subnavbar-vars.less +12 -6
  232. package/components/subnavbar/subnavbar.less +5 -6
  233. package/components/swipeout/swipeout-ios.less +37 -0
  234. package/components/swipeout/swipeout-md.less +56 -0
  235. package/components/swipeout/swipeout-rtl.css +1 -1
  236. package/components/swipeout/swipeout-vars.less +13 -2
  237. package/components/swipeout/swipeout.css +1 -1
  238. package/components/swipeout/swipeout.js +102 -35
  239. package/components/swipeout/swipeout.less +20 -44
  240. package/components/swiper/swiper-rtl.css +1 -1
  241. package/components/swiper/swiper.css +1 -1
  242. package/components/tabs/tabs-rtl.css +1 -1
  243. package/components/tabs/tabs.css +1 -1
  244. package/components/tabs/tabs.js +3 -9
  245. package/components/text-editor/text-editor-class.js +1 -1
  246. package/components/text-editor/text-editor-rtl.css +1 -1
  247. package/components/text-editor/text-editor.css +1 -1
  248. package/components/timeline/timeline-ios.less +0 -5
  249. package/components/timeline/timeline-md.less +0 -5
  250. package/components/timeline/timeline-rtl.css +1 -1
  251. package/components/timeline/timeline-vars.less +1 -17
  252. package/components/timeline/timeline.css +1 -1
  253. package/components/timeline/timeline.less +0 -196
  254. package/components/toast/toast-class.js +2 -2
  255. package/components/toast/toast-ios.less +2 -0
  256. package/components/toast/toast-rtl.css +1 -1
  257. package/components/toast/toast-vars.less +2 -4
  258. package/components/toast/toast.css +1 -1
  259. package/components/toast/toast.less +1 -1
  260. package/components/toggle/toggle-class.js +5 -12
  261. package/components/toggle/toggle-ios.less +68 -50
  262. package/components/toggle/toggle-rtl.css +1 -1
  263. package/components/toggle/toggle-vars.less +2 -2
  264. package/components/toggle/toggle.css +1 -1
  265. package/components/toolbar/tabbar-highlight.js +134 -0
  266. package/components/toolbar/toolbar-ios.less +160 -14
  267. package/components/toolbar/toolbar-md.less +77 -3
  268. package/components/toolbar/toolbar-vars.less +14 -10
  269. package/components/toolbar/toolbar.js +32 -13
  270. package/components/toolbar/toolbar.less +8 -56
  271. package/components/tooltip/tooltip-class.js +13 -16
  272. package/components/tooltip/tooltip-rtl.css +1 -1
  273. package/components/tooltip/tooltip.css +1 -1
  274. package/components/tooltip/tooltip.js +0 -16
  275. package/components/touch-highlight/touch-highlight-ios.less +17 -0
  276. package/components/touch-highlight/touch-highlight-md.less +2 -0
  277. package/components/touch-highlight/touch-highlight-vars.less +8 -0
  278. package/components/touch-highlight/touch-highlight.d.ts +25 -0
  279. package/components/touch-highlight/touch-highlight.js +123 -0
  280. package/components/touch-highlight/touch-highlight.less +9 -0
  281. package/components/touch-ripple/touch-ripple.js +1 -4
  282. package/components/treeview/treeview-rtl.css +1 -1
  283. package/components/treeview/treeview.css +1 -1
  284. package/components/typography/typography-rtl.css +1 -1
  285. package/components/typography/typography.css +1 -1
  286. package/components/view/resizable-view.js +2 -4
  287. package/components/view/view-class.js +1 -15
  288. package/components/view/view.d.ts +0 -4
  289. package/components/view/view.js +1 -5
  290. package/components/virtual-list/virtual-list-class.js +2 -8
  291. package/framework7-bundle-rtl.css +2284 -3019
  292. package/framework7-bundle-rtl.min.css +4 -10
  293. package/framework7-bundle.css +2245 -2978
  294. package/framework7-bundle.esm.js +5 -4
  295. package/framework7-bundle.js +7180 -6477
  296. package/framework7-bundle.js.map +1 -1
  297. package/framework7-bundle.less +4 -3
  298. package/framework7-bundle.min.css +4 -10
  299. package/framework7-bundle.min.js +4 -4
  300. package/framework7-bundle.min.js.map +1 -1
  301. package/framework7-lite-bundle.esm.js +5 -4
  302. package/framework7-lite.esm.js +5 -4
  303. package/framework7-rtl.css +509 -844
  304. package/framework7-rtl.min.css +4 -8
  305. package/framework7-types.d.ts +5 -1
  306. package/framework7.css +509 -843
  307. package/framework7.d.ts +4 -0
  308. package/framework7.esm.js +5 -4
  309. package/framework7.less +4 -3
  310. package/framework7.min.css +4 -8
  311. package/less/mixins.less +10 -12
  312. package/modules/component/$h.js +1 -4
  313. package/modules/component/$jsx.js +1 -4
  314. package/modules/component/component-class.js +49 -114
  315. package/modules/component/component.js +6 -7
  316. package/modules/component/eventslisteners.js +1 -4
  317. package/modules/component/snabbdom/modules/hero.js +0 -1
  318. package/modules/component/snabbdom/modules/style.js +1 -1
  319. package/modules/component/vdom.js +17 -29
  320. package/modules/router/back.js +22 -96
  321. package/modules/router/clear-previous-history.js +1 -7
  322. package/modules/router/component-loader.js +23 -32
  323. package/modules/router/modal.js +1 -4
  324. package/modules/router/navigate.js +28 -167
  325. package/modules/router/redirect.js +1 -5
  326. package/modules/router/router-class.js +28 -293
  327. package/modules/router/router.d.ts +2 -0
  328. package/modules/router/swipe-back.js +10 -318
  329. package/modules/router/tab.js +1 -4
  330. package/modules/service-worker/service-worker.js +1 -1
  331. package/modules/store/create-store.js +2 -8
  332. package/modules/touch/touch.d.ts +5 -3
  333. package/modules/touch/touch.js +23 -37
  334. package/package.json +4 -4
  335. package/shared/$jsx.js +1 -4
  336. package/shared/class.js +5 -26
  337. package/shared/constructor-methods.js +4 -19
  338. package/shared/events-class.js +3 -12
  339. package/shared/get-device.js +4 -11
  340. package/shared/get-support.d.ts +0 -6
  341. package/shared/get-support.js +1 -20
  342. package/shared/material-color-utils.js +2102 -693
  343. package/shared/material-colors.js +94 -23
  344. package/shared/modal-methods.js +2 -8
  345. package/shared/utils.js +23 -45
package/components/messages/messages-rtl.css CHANGED
@@ -1 +1 @@
1
- :root{--f7-message-text-header-opacity:0.65;--f7-message-text-header-font-size:12px;--f7-message-text-footer-opacity:0.65;--f7-message-text-footer-font-size:12px;--f7-message-bubble-line-height:1.2;--f7-message-header-font-size:12px;--f7-message-footer-font-size:11px;--f7-message-name-font-size:12px;--f7-message-name-font-weight:inherit;--f7-message-avatar-border-radius:50%;--f7-messages-title-font-weight:inherit;--f7-message-typing-indicator-bg-color:#000}:root .dark,:root.dark{--f7-message-typing-indicator-bg-color:#fff}.ios{--f7-message-text-header-text-color:inherit;--f7-message-text-footer-text-color:inherit;--f7-messages-title-font-size:11px;--f7-message-avatar-size:29px;--f7-message-margin:10px;--f7-message-bubble-min-height:32px;--f7-message-bubble-font-size:17px;--f7-message-bubble-border-radius:16px;--f7-message-bubble-padding-vertical:6px;--f7-message-bubble-padding-horizontal:16px;--f7-message-typing-indicator-opacity:0.35;--f7-message-sent-text-color:#fff;--f7-messages-content-bg-color:#fff;--f7-message-received-text-color:#000;--f7-message-received-bg-color:#e5e5ea;--f7-messages-title-text-color:rgba(0, 0, 0, 0.45);--f7-message-header-text-color:rgba(0, 0, 0, 0.45);--f7-message-footer-text-color:rgba(0, 0, 0, 0.45);--f7-message-name-text-color:rgba(0, 0, 0, 0.45)}.ios .dark,.ios.dark{--f7-message-received-bg-color:#252525;--f7-message-received-text-color:#fff;--f7-messages-content-bg-color:transparent;--f7-messages-title-text-color:rgba(255, 255, 255, 0.54);--f7-message-header-text-color:rgba(255, 255, 255, 0.54);--f7-message-name-text-color:rgba(255, 255, 255, 0.54);--f7-message-footer-text-color:rgba(255, 255, 255, 0.54)}.md{--f7-messages-content-bg-color:transparent;--f7-messages-title-font-size:12px;--f7-message-avatar-size:32px;--f7-message-margin:16px;--f7-message-bubble-min-height:40px;--f7-message-bubble-font-size:16px;--f7-message-bubble-border-radius:20px;--f7-message-bubble-padding-vertical:10px;--f7-message-bubble-padding-horizontal:16px;--f7-message-typing-indicator-opacity:0.6}.md,.md .dark,.md [class*=color-]{--f7-message-sent-bg-color:var(--f7-md-primary);--f7-message-sent-text-color:var(--f7-md-on-primary);--f7-message-received-bg-color:var(--f7-md-surface-variant);--f7-message-received-text-color:var(--f7-md-on-surface);--f7-message-text-header-text-color:var(--f7-md-on-surface-variant);--f7-message-text-footer-text-color:var(--f7-md-on-surface-variant);--f7-messages-title-text-color:var(--f7-md-on-surface-variant);--f7-message-header-text-color:var(--f7-md-on-surface-variant);--f7-message-footer-text-color:var(--f7-md-on-surface-variant);--f7-message-name-text-color:var(--f7-md-on-surface-variant)}.messages,.messages-content{background:var(--f7-messages-content-bg-color)}.messages{display:flex;flex-direction:column;min-height:100%;position:relative;z-index:1}.message,.messages-title{margin-top:var(--f7-message-margin)}.message:last-child,.messages-title:last-child{margin-bottom:var(--f7-message-margin)}.messages-title{text-align:center;width:100%;line-height:1;color:var(--f7-messages-title-text-color);font-size:var(--f7-messages-title-font-size);font-weight:var(--f7-messages-title-font-weight)}.message{max-width:70%;box-sizing:border-box;display:flex;align-items:flex-end;position:relative;z-index:1;transform:translate3d(0,0,0)}.message-avatar{border-radius:var(--f7-message-avatar-border-radius);position:relative;background-size:cover;align-self:flex-end;flex-shrink:0;width:var(--f7-message-avatar-size);height:var(--f7-message-avatar-size)}.message-content{position:relative;display:flex;flex-direction:column}.message-footer,.message-header,.message-name{line-height:1}.message-header{color:var(--f7-message-header-text-color);font-size:var(--f7-message-header-font-size)}.message-footer{color:var(--f7-message-footer-text-color);font-size:var(--f7-message-footer-font-size);margin-bottom:-1em}.message-name{color:var(--f7-message-name-text-color);font-size:var(--f7-message-name-font-size);font-weight:var(--f7-message-name-font-weight)}.message-bubble{box-sizing:border-box;word-break:break-word;display:flex;flex-direction:column;position:relative;line-height:var(--f7-message-bubble-line-height);font-size:var(--f7-message-bubble-font-size);border-radius:var(--f7-message-bubble-border-radius);padding:var(--f7-message-bubble-padding-vertical) var(--f7-message-bubble-padding-horizontal);min-height:var(--f7-message-bubble-min-height)}.message-image img{display:block;max-width:100%;height:auto;width:auto}.message-text-footer,.message-text-header{line-height:1}.message-text-header{color:var(--f7-message-text-header-text-color);opacity:var(--f7-message-text-header-opacity);font-size:var(--f7-message-text-header-font-size)}.message-text-footer{color:var(--f7-message-text-footer-text-color);opacity:var(--f7-message-text-footer-opacity);font-size:var(--f7-message-text-footer-font-size)}.message-text{text-align:left}.message-sent{text-align:right;flex-direction:row;align-self:flex-start}.message-sent .message-bubble{color:var(--f7-message-sent-text-color);background:var(--f7-message-sent-bg-color,var(--f7-theme-color))}.message-sent .message-content{align-items:flex-start}.message-received{flex-direction:row-reverse;align-self:flex-end}.message-received .message-bubble{color:var(--f7-message-received-text-color);background:var(--f7-message-received-bg-color)}.message-received .message-content{align-items:flex-end}.message:not(.message-last) .message-avatar{opacity:0}.message:not(.message-first) .message-name{display:none}.message.message-same-name .message-name{display:none}.message.message-same-header .message-header{display:none}.message.message-same-footer .message-footer{display:none}.message-appear-from-bottom{animation:message-appear-from-bottom .3s}.message-appear-from-top{animation:message-appear-from-top .3s}.message-typing-indicator{display:inline-block;font-size:0;vertical-align:middle}.message-typing-indicator>div{display:inline-block;position:relative;background:var(--f7-message-typing-indicator-bg-color);opacity:var(--f7-message-typing-indicator-opacity);vertical-align:middle;border-radius:50%}@keyframes message-appear-from-bottom{from{transform:translate3d(0,100%,0)}to{transform:translate3d(0,0,0)}}@keyframes message-appear-from-top{from{transform:translate3d(0,-100%,0)}to{transform:translate3d(0,0,0)}}.ios .message-footer b,.ios .message-header b,.ios .message-name b,.ios .messages-title b{font-weight:600}.ios .message-header,.ios .message-name{margin-bottom:3px}.ios .message-footer{margin-top:3px}.ios .message-bubble{min-width:48px}.ios .message-image{margin:var(--f7-message-bubble-padding-vertical) calc(-1 * var(--f7-message-bubble-padding-horizontal))}.ios .message-image:first-child{margin-top:calc(-1 * var(--f7-message-bubble-padding-vertical))}.ios .message-image:first-child img{border-top-left-radius:var(--f7-message-bubble-border-radius);border-top-right-radius:var(--f7-message-bubble-border-radius)}.ios .message-image:last-child{margin-bottom:calc(-1 * var(--f7-message-bubble-padding-vertical))}.ios .message-image:last-child img{border-bottom-left-radius:var(--f7-message-bubble-border-radius);border-bottom-right-radius:var(--f7-message-bubble-border-radius)}.ios .message-text-header{margin-bottom:3px}.ios .message-text-footer{margin-top:3px}.ios .message-received{margin-left:calc(10px + var(--f7-safe-area-left))}.ios .message-received .message-footer,.ios .message-received .message-header,.ios .message-received .message-name{margin-left:var(--f7-message-bubble-padding-horizontal)}.ios .message-received .message-bubble{padding-left:calc(var(--f7-message-bubble-padding-horizontal) + 6px);-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%}.ios .message-received .message-image{margin-left:calc(-1 * (var(--f7-message-bubble-padding-horizontal) + 6px))}.ios .message-received.message-tail .message-bubble{border-radius:var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) 0}.ios .message-received.message-tail:not(.message-typing) .message-bubble{-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%}.ios .message-received.message-tail:not(.message-typing) .message-bubble .message-image:last-child img{border-bottom-left-radius:0px}.ios .message-sent{margin-right:calc(10px + var(--f7-safe-area-right))}.ios .message-sent .message-footer,.ios .message-sent .message-header,.ios .message-sent .message-name{margin-right:var(--f7-message-bubble-padding-horizontal)}.ios .message-sent .message-bubble{padding-right:calc(var(--f7-message-bubble-padding-horizontal) + 6px);-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%}.ios .message-sent .message-image{margin-right:calc(-1 * (var(--f7-message-bubble-padding-horizontal) + 6px))}.ios .message-sent.message-tail .message-bubble{border-radius:var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) 0 var(--f7-message-bubble-border-radius)}.ios .message-sent.message-tail .message-bubble{-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%}.ios .message-sent.message-tail .message-bubble .message-image:last-child img{border-bottom-right-radius:0px}.ios .message+.message:not(.message-first){margin-top:1px}.ios .message-received.message-typing .message-content:after,.ios .message-received.message-typing .message-content:before{content:'';position:absolute;background:var(--f7-message-received-bg-color);border-radius:50%}.ios .message-received.message-typing .message-content:after{width:11px;height:11px;left:4px;bottom:0px}.ios .message-received.message-typing .message-content:before{width:6px;height:6px;left:-1px;bottom:-4px}.ios .message-typing-indicator>div{width:9px;height:9px}.ios .message-typing-indicator>div+div{margin-right:4px}.ios .message-typing-indicator>div:first-child{animation:ios-message-typing-indicator .9s infinite}.ios .message-typing-indicator>div:nth-child(2){animation:ios-message-typing-indicator .9s 150ms infinite}.ios .message-typing-indicator>div:nth-child(3){animation:ios-message-typing-indicator .9s .3s infinite}@keyframes ios-message-typing-indicator{0%{opacity:.35}25%{opacity:.2}50%{opacity:.2}}.md .message-footer b,.md .message-header b,.md .message-name b,.md .messages-title b{font-weight:500}.md .message-header,.md .message-name{margin-bottom:2px}.md .message-footer{margin-top:2px}.md .message-text-header{margin-bottom:4px}.md .message-text-footer{margin-top:4px}.md .message-image{margin:calc(-1 * var(--f7-message-bubble-padding-vertical)) calc(-1 * var(--f7-message-bubble-padding-horizontal))}.md .message-image,.md .message-image img{border-radius:var(--f7-message-bubble-border-radius)}.md .message-received{margin-left:calc(8px + var(--f7-safe-area-left))}.md .message-received .message-footer,.md .message-received .message-header,.md .message-received .message-name{margin-left:16px}.md .message-received.message-first:not(.message-last) .message-bubble,.md .message-received.message-first:not(.message-last) .message-image,.md .message-received.message-first:not(.message-last) .message-image img{border-bottom-left-radius:4px}.md .message-received.message-last:not(.message-first) .message-bubble,.md .message-received.message-last:not(.message-first) .message-image,.md .message-received.message-last:not(.message-first) .message-image img{border-top-left-radius:4px}.md .message-received:not(.message-last):not(.message-first) .message-bubble,.md .message-received:not(.message-last):not(.message-first) .message-image,.md .message-received:not(.message-last):not(.message-first) .message-image img{border-bottom-left-radius:4px;border-top-left-radius:4px}.md .message-received .message-avatar+.message-content{margin-left:8px}.md .message-sent{margin-right:calc(8px + var(--f7-safe-area-right))}.md .message-sent .message-footer,.md .message-sent .message-header,.md .message-sent .message-name{margin-right:16px}.md .message-sent.message-first:not(.message-last) .message-bubble,.md .message-sent.message-first:not(.message-last) .message-image,.md .message-sent.message-first:not(.message-last) .message-image img{border-bottom-right-radius:4px}.md .message-sent.message-last:not(.message-first) .message-bubble,.md .message-sent.message-last:not(.message-first) .message-image,.md .message-sent.message-last:not(.message-first) .message-image img{border-top-right-radius:4px}.md .message-sent:not(.message-last):not(.message-first) .message-bubble,.md .message-sent:not(.message-last):not(.message-first) .message-image,.md .message-sent:not(.message-last):not(.message-first) .message-image img{border-bottom-right-radius:4px;border-top-right-radius:4px}.md .message-sent .message-avatar+.message-content{margin-right:var(--f7-message-bubble-padding-horizontal)}.md .message+.message:not(.message-first){margin-top:2px}.md .message-typing-indicator>div{width:6px;height:6px}.md .message-typing-indicator>div+div{margin-right:6px}.md .message-typing-indicator>div:first-child{animation:md-message-typing-indicator .9s infinite}.md .message-typing-indicator>div:nth-child(2){animation:md-message-typing-indicator .9s 150ms infinite}.md .message-typing-indicator>div:nth-child(3){animation:md-message-typing-indicator .9s .3s infinite}@keyframes md-message-typing-indicator{0%{transform:translateY(0%)}25%{transform:translateY(-5px)}50%{transform:translateY(0%)}}
1
+ :root{--f7-message-text-header-opacity:0.65;--f7-message-text-header-font-size:12px;--f7-message-text-footer-opacity:0.65;--f7-message-text-footer-font-size:12px;--f7-message-bubble-line-height:1.2;--f7-message-header-font-size:12px;--f7-message-footer-font-size:11px;--f7-message-name-font-size:12px;--f7-message-name-font-weight:inherit;--f7-message-avatar-border-radius:50%;--f7-messages-title-font-weight:inherit;--f7-message-typing-indicator-bg-color:#000}:root .dark,:root.dark{--f7-message-typing-indicator-bg-color:#fff}.ios{--f7-message-text-header-text-color:inherit;--f7-message-text-footer-text-color:inherit;--f7-messages-title-font-size:11px;--f7-message-avatar-size:29px;--f7-message-margin:16px;--f7-message-bubble-min-height:32px;--f7-message-bubble-font-size:17px;--f7-message-bubble-border-radius:16px;--f7-message-bubble-padding-vertical:6px;--f7-message-bubble-padding-horizontal:16px;--f7-message-typing-indicator-opacity:0.35;--f7-message-sent-text-color:#fff;--f7-messages-content-bg-color:#fff;--f7-message-received-text-color:#000;--f7-message-received-bg-color:#e5e5ea;--f7-messages-title-text-color:#00000073;--f7-message-header-text-color:#00000073;--f7-message-footer-text-color:#00000073;--f7-message-name-text-color:#00000073}.ios .dark,.ios.dark{--f7-message-received-bg-color:#252525;--f7-message-received-text-color:#fff;--f7-messages-content-bg-color:#0000;--f7-messages-title-text-color:#ffffff8a;--f7-message-header-text-color:#ffffff8a;--f7-message-name-text-color:#ffffff8a;--f7-message-footer-text-color:#ffffff8a}.md{--f7-messages-content-bg-color:#0000;--f7-messages-title-font-size:12px;--f7-message-avatar-size:32px;--f7-message-margin:16px;--f7-message-bubble-min-height:40px;--f7-message-bubble-font-size:16px;--f7-message-bubble-border-radius:20px;--f7-message-bubble-padding-vertical:10px;--f7-message-bubble-padding-horizontal:16px;--f7-message-typing-indicator-opacity:0.6}.md,.md .dark,.md [class*=color-]{--f7-message-sent-bg-color:var(--f7-md-primary);--f7-message-sent-text-color:var(--f7-md-on-primary);--f7-message-received-bg-color:var(--f7-md-surface-variant);--f7-message-received-text-color:var(--f7-md-on-surface);--f7-message-text-header-text-color:var(--f7-md-on-surface-variant);--f7-message-text-footer-text-color:var(--f7-md-on-surface-variant);--f7-messages-title-text-color:var(--f7-md-on-surface-variant);--f7-message-header-text-color:var(--f7-md-on-surface-variant);--f7-message-footer-text-color:var(--f7-md-on-surface-variant);--f7-message-name-text-color:var(--f7-md-on-surface-variant)}.messages,.messages-content{background:var(--f7-messages-content-bg-color)}.messages{display:flex;flex-direction:column;min-height:100%;position:relative;z-index:1}.message,.messages-title{margin-top:var(--f7-message-margin)}.message:last-child,.messages-title:last-child{margin-bottom:var(--f7-message-margin)}.messages-title{color:var(--f7-messages-title-text-color);font-size:var(--f7-messages-title-font-size);font-weight:var(--f7-messages-title-font-weight);line-height:1;text-align:center;width:100%}.message{align-items:flex-end;box-sizing:border-box;display:flex;max-width:70%;position:relative;transform:translateZ(0);z-index:1}.message-avatar{align-self:flex-end;background-size:cover;border-radius:var(--f7-message-avatar-border-radius);flex-shrink:0;height:var(--f7-message-avatar-size);position:relative;width:var(--f7-message-avatar-size)}.message-content{display:flex;flex-direction:column;position:relative}.message-footer,.message-header,.message-name{line-height:1}.message-header{color:var(--f7-message-header-text-color);font-size:var(--f7-message-header-font-size)}.message-footer{color:var(--f7-message-footer-text-color);font-size:var(--f7-message-footer-font-size);margin-bottom:-1em}.message-name{color:var(--f7-message-name-text-color);font-size:var(--f7-message-name-font-size);font-weight:var(--f7-message-name-font-weight)}.message-bubble{border-radius:var(--f7-message-bubble-border-radius);box-sizing:border-box;display:flex;flex-direction:column;font-size:var(--f7-message-bubble-font-size);line-height:var(--f7-message-bubble-line-height);min-height:var(--f7-message-bubble-min-height);padding:var(--f7-message-bubble-padding-vertical) var(--f7-message-bubble-padding-horizontal);position:relative;word-break:break-word}.message-image img{display:block;height:auto;max-width:100%;width:auto}.message-text-footer,.message-text-header{line-height:1}.message-text-header{color:var(--f7-message-text-header-text-color);font-size:var(--f7-message-text-header-font-size);opacity:var(--f7-message-text-header-opacity)}.message-text-footer{color:var(--f7-message-text-footer-text-color);font-size:var(--f7-message-text-footer-font-size);opacity:var(--f7-message-text-footer-opacity)}.message-text{text-align:left}.message-sent{align-self:flex-start;flex-direction:row;text-align:right}.message-sent .message-bubble{background:var(--f7-message-sent-bg-color,var(--f7-theme-color));color:var(--f7-message-sent-text-color)}.message-sent .message-content{align-items:flex-start}.message-received{align-self:flex-end;flex-direction:row-reverse}.message-received .message-bubble{background:var(--f7-message-received-bg-color);color:var(--f7-message-received-text-color)}.message-received .message-content{align-items:flex-end}.message:not(.message-last) .message-avatar{opacity:0}.message.message-same-footer .message-footer,.message.message-same-header .message-header,.message.message-same-name .message-name,.message:not(.message-first) .message-name{display:none}.message-appear-from-bottom{animation:message-appear-from-bottom .3s}.message-appear-from-top{animation:message-appear-from-top .3s}.message-typing-indicator{display:inline-block;font-size:0;vertical-align:middle}.message-typing-indicator>div{background:var(--f7-message-typing-indicator-bg-color);border-radius:50%;display:inline-block;opacity:var(--f7-message-typing-indicator-opacity);position:relative;vertical-align:middle}@keyframes message-appear-from-bottom{0%{transform:translate3d(0,100%,0)}to{transform:translateZ(0)}}@keyframes message-appear-from-top{0%{transform:translate3d(0,-100%,0)}to{transform:translateZ(0)}}.ios .messages{box-sizing:border-box;padding-bottom:16px}.ios .message-footer b,.ios .message-header b,.ios .message-name b,.ios .messages-title b{font-weight:600}.ios .message-header,.ios .message-name{margin-bottom:3px}.ios .message-footer{margin-top:3px}.ios .message-bubble{min-width:48px}.ios .message-image{margin:var(--f7-message-bubble-padding-vertical) calc(var(--f7-message-bubble-padding-horizontal)*-1)}.ios .message-image:first-child{margin-top:calc(var(--f7-message-bubble-padding-vertical)*-1)}.ios .message-image:first-child img{border-top-left-radius:var(--f7-message-bubble-border-radius);border-top-right-radius:var(--f7-message-bubble-border-radius)}.ios .message-image:last-child{margin-bottom:calc(var(--f7-message-bubble-padding-vertical)*-1)}.ios .message-image:last-child img{border-bottom-left-radius:var(--f7-message-bubble-border-radius);border-bottom-right-radius:var(--f7-message-bubble-border-radius)}.ios .message-text-header{margin-bottom:3px}.ios .message-text-footer{margin-top:3px}.ios .message-received{margin-left:calc(16px + var(--f7-safe-area-left))}.ios .message-received .message-footer,.ios .message-received .message-header,.ios .message-received .message-name{margin-left:var(--f7-message-bubble-padding-horizontal)}.ios .message-received .message-bubble{padding-left:calc(var(--f7-message-bubble-padding-horizontal) + 6px);-webkit-mask-box-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="35" viewBox="0 0 96 70"><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 35"/></svg>') 50% 42% 46% 56%}.ios .message-received .message-image{margin-left:calc((var(--f7-message-bubble-padding-horizontal) + 6px)*-1)}.ios .message-received.message-tail .message-bubble{border-radius:var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) 0}.ios .message-received.message-tail:not(.message-typing) .message-bubble{-webkit-mask-box-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="35" viewBox="0 0 96 70"><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 35"/><path d="M0 70c6-2 12-10 12-19V35l14 27s-8 8-26 8"/></svg>') 50% 42% 46% 56%}.ios .message-received.message-tail:not(.message-typing) .message-bubble .message-image:last-child img{border-bottom-left-radius:0}.ios .message-sent{margin-right:calc(16px + var(--f7-safe-area-right))}.ios .message-sent .message-footer,.ios .message-sent .message-header,.ios .message-sent .message-name{margin-right:var(--f7-message-bubble-padding-horizontal)}.ios .message-sent .message-bubble{padding-right:calc(var(--f7-message-bubble-padding-horizontal) + 6px);-webkit-mask-box-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="35" viewBox="0 0 96 70"><path d="M84 35c1 7-5 37-42 35C5 72-1 42 0 35-1 28 5-2 42 0c37-2 43 28 42 35"/></svg>') 50% 56% 46% 42%}.ios .message-sent .message-image{margin-right:calc((var(--f7-message-bubble-padding-horizontal) + 6px)*-1)}.ios .message-sent.message-tail .message-bubble{border-radius:var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) 0 var(--f7-message-bubble-border-radius);-webkit-mask-box-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="35" viewBox="0 0 96 70"><path d="M84 35c1 7-5 37-42 35C5 72-1 42 0 35-1 28 5-2 42 0c37-2 43 28 42 35"/><path d="M96 70c-6-2-12-10-12-19V35L70 62s8 8 26 8"/></svg>') 50% 56% 46% 42%}.ios .message-sent.message-tail .message-bubble .message-image:last-child img{border-bottom-right-radius:0}.ios .message+.message:not(.message-first){margin-top:1px}.ios .message-received.message-typing .message-content:after,.ios .message-received.message-typing .message-content:before{background:var(--f7-message-received-bg-color);border-radius:50%;content:"";position:absolute}.ios .message-received.message-typing .message-content:after{bottom:0;height:11px;left:4px;width:11px}.ios .message-received.message-typing .message-content:before{bottom:-4px;height:6px;left:-1px;width:6px}.ios .message-typing-indicator>div{height:9px;width:9px}.ios .message-typing-indicator>div+div{margin-right:4px}.ios .message-typing-indicator>div:first-child{animation:ios-message-typing-indicator .9s infinite}.ios .message-typing-indicator>div:nth-child(2){animation:ios-message-typing-indicator .9s .15s infinite}.ios .message-typing-indicator>div:nth-child(3){animation:ios-message-typing-indicator .9s .3s infinite}@keyframes ios-message-typing-indicator{0%{opacity:.35}25%{opacity:.2}50%{opacity:.2}}.md .message-footer b,.md .message-header b,.md .message-name b,.md .messages-title b{font-weight:500}.md .message-header,.md .message-name{margin-bottom:2px}.md .message-footer{margin-top:2px}.md .message-text-header{margin-bottom:4px}.md .message-text-footer{margin-top:4px}.md .message-image{margin:calc(var(--f7-message-bubble-padding-vertical)*-1) calc(var(--f7-message-bubble-padding-horizontal)*-1)}.md .message-image,.md .message-image img{border-radius:var(--f7-message-bubble-border-radius)}.md .message-received{margin-left:calc(8px + var(--f7-safe-area-left))}.md .message-received .message-footer,.md .message-received .message-header,.md .message-received .message-name{margin-left:16px}.md .message-received.message-first:not(.message-last) .message-bubble,.md .message-received.message-first:not(.message-last) .message-image,.md .message-received.message-first:not(.message-last) .message-image img{border-bottom-left-radius:4px}.md .message-received.message-last:not(.message-first) .message-bubble,.md .message-received.message-last:not(.message-first) .message-image,.md .message-received.message-last:not(.message-first) .message-image img{border-top-left-radius:4px}.md .message-received:not(.message-last):not(.message-first) .message-bubble,.md .message-received:not(.message-last):not(.message-first) .message-image,.md .message-received:not(.message-last):not(.message-first) .message-image img{border-bottom-left-radius:4px;border-top-left-radius:4px}.md .message-received .message-avatar+.message-content{margin-left:8px}.md .message-sent{margin-right:calc(8px + var(--f7-safe-area-right))}.md .message-sent .message-footer,.md .message-sent .message-header,.md .message-sent .message-name{margin-right:16px}.md .message-sent.message-first:not(.message-last) .message-bubble,.md .message-sent.message-first:not(.message-last) .message-image,.md .message-sent.message-first:not(.message-last) .message-image img{border-bottom-right-radius:4px}.md .message-sent.message-last:not(.message-first) .message-bubble,.md .message-sent.message-last:not(.message-first) .message-image,.md .message-sent.message-last:not(.message-first) .message-image img{border-top-right-radius:4px}.md .message-sent:not(.message-last):not(.message-first) .message-bubble,.md .message-sent:not(.message-last):not(.message-first) .message-image,.md .message-sent:not(.message-last):not(.message-first) .message-image img{border-bottom-right-radius:4px;border-top-right-radius:4px}.md .message-sent .message-avatar+.message-content{margin-right:var(--f7-message-bubble-padding-horizontal)}.md .message+.message:not(.message-first){margin-top:2px}.md .message-typing-indicator>div{height:6px;width:6px}.md .message-typing-indicator>div+div{margin-right:6px}.md .message-typing-indicator>div:first-child{animation:md-message-typing-indicator .9s infinite}.md .message-typing-indicator>div:nth-child(2){animation:md-message-typing-indicator .9s .15s infinite}.md .message-typing-indicator>div:nth-child(3){animation:md-message-typing-indicator .9s .3s infinite}@keyframes md-message-typing-indicator{0%{transform:translateY(0)}25%{transform:translateY(-5px)}50%{transform:translateY(0)}}
package/components/messages/messages-vars.less CHANGED
@@ -23,7 +23,7 @@
23
23
  --f7-message-text-footer-text-color: inherit;
24
24
  --f7-messages-title-font-size: 11px;
25
25
  --f7-message-avatar-size: 29px;
26
- --f7-message-margin: 10px;
26
+ --f7-message-margin: 16px;
27
27
  --f7-message-bubble-min-height: 32px;
28
28
  --f7-message-bubble-font-size: 17px;
29
29
  --f7-message-bubble-border-radius: 16px;
package/components/messages/messages.css CHANGED
@@ -1 +1 @@
1
- :root{--f7-message-text-header-opacity:0.65;--f7-message-text-header-font-size:12px;--f7-message-text-footer-opacity:0.65;--f7-message-text-footer-font-size:12px;--f7-message-bubble-line-height:1.2;--f7-message-header-font-size:12px;--f7-message-footer-font-size:11px;--f7-message-name-font-size:12px;--f7-message-name-font-weight:inherit;--f7-message-avatar-border-radius:50%;--f7-messages-title-font-weight:inherit;--f7-message-typing-indicator-bg-color:#000}:root .dark,:root.dark{--f7-message-typing-indicator-bg-color:#fff}.ios{--f7-message-text-header-text-color:inherit;--f7-message-text-footer-text-color:inherit;--f7-messages-title-font-size:11px;--f7-message-avatar-size:29px;--f7-message-margin:10px;--f7-message-bubble-min-height:32px;--f7-message-bubble-font-size:17px;--f7-message-bubble-border-radius:16px;--f7-message-bubble-padding-vertical:6px;--f7-message-bubble-padding-horizontal:16px;--f7-message-typing-indicator-opacity:0.35;--f7-message-sent-text-color:#fff;--f7-messages-content-bg-color:#fff;--f7-message-received-text-color:#000;--f7-message-received-bg-color:#e5e5ea;--f7-messages-title-text-color:rgba(0, 0, 0, 0.45);--f7-message-header-text-color:rgba(0, 0, 0, 0.45);--f7-message-footer-text-color:rgba(0, 0, 0, 0.45);--f7-message-name-text-color:rgba(0, 0, 0, 0.45)}.ios .dark,.ios.dark{--f7-message-received-bg-color:#252525;--f7-message-received-text-color:#fff;--f7-messages-content-bg-color:transparent;--f7-messages-title-text-color:rgba(255, 255, 255, 0.54);--f7-message-header-text-color:rgba(255, 255, 255, 0.54);--f7-message-name-text-color:rgba(255, 255, 255, 0.54);--f7-message-footer-text-color:rgba(255, 255, 255, 0.54)}.md{--f7-messages-content-bg-color:transparent;--f7-messages-title-font-size:12px;--f7-message-avatar-size:32px;--f7-message-margin:16px;--f7-message-bubble-min-height:40px;--f7-message-bubble-font-size:16px;--f7-message-bubble-border-radius:20px;--f7-message-bubble-padding-vertical:10px;--f7-message-bubble-padding-horizontal:16px;--f7-message-typing-indicator-opacity:0.6}.md,.md .dark,.md [class*=color-]{--f7-message-sent-bg-color:var(--f7-md-primary);--f7-message-sent-text-color:var(--f7-md-on-primary);--f7-message-received-bg-color:var(--f7-md-surface-variant);--f7-message-received-text-color:var(--f7-md-on-surface);--f7-message-text-header-text-color:var(--f7-md-on-surface-variant);--f7-message-text-footer-text-color:var(--f7-md-on-surface-variant);--f7-messages-title-text-color:var(--f7-md-on-surface-variant);--f7-message-header-text-color:var(--f7-md-on-surface-variant);--f7-message-footer-text-color:var(--f7-md-on-surface-variant);--f7-message-name-text-color:var(--f7-md-on-surface-variant)}.messages,.messages-content{background:var(--f7-messages-content-bg-color)}.messages{display:flex;flex-direction:column;min-height:100%;position:relative;z-index:1}.message,.messages-title{margin-top:var(--f7-message-margin)}.message:last-child,.messages-title:last-child{margin-bottom:var(--f7-message-margin)}.messages-title{text-align:center;width:100%;line-height:1;color:var(--f7-messages-title-text-color);font-size:var(--f7-messages-title-font-size);font-weight:var(--f7-messages-title-font-weight)}.message{max-width:70%;box-sizing:border-box;display:flex;align-items:flex-end;position:relative;z-index:1;transform:translate3d(0,0,0)}.message-avatar{border-radius:var(--f7-message-avatar-border-radius);position:relative;background-size:cover;align-self:flex-end;flex-shrink:0;width:var(--f7-message-avatar-size);height:var(--f7-message-avatar-size)}.message-content{position:relative;display:flex;flex-direction:column}.message-footer,.message-header,.message-name{line-height:1}.message-header{color:var(--f7-message-header-text-color);font-size:var(--f7-message-header-font-size)}.message-footer{color:var(--f7-message-footer-text-color);font-size:var(--f7-message-footer-font-size);margin-bottom:-1em}.message-name{color:var(--f7-message-name-text-color);font-size:var(--f7-message-name-font-size);font-weight:var(--f7-message-name-font-weight)}.message-bubble{box-sizing:border-box;word-break:break-word;display:flex;flex-direction:column;position:relative;line-height:var(--f7-message-bubble-line-height);font-size:var(--f7-message-bubble-font-size);border-radius:var(--f7-message-bubble-border-radius);padding:var(--f7-message-bubble-padding-vertical) var(--f7-message-bubble-padding-horizontal);min-height:var(--f7-message-bubble-min-height)}.message-image img{display:block;max-width:100%;height:auto;width:auto}.message-text-footer,.message-text-header{line-height:1}.message-text-header{color:var(--f7-message-text-header-text-color);opacity:var(--f7-message-text-header-opacity);font-size:var(--f7-message-text-header-font-size)}.message-text-footer{color:var(--f7-message-text-footer-text-color);opacity:var(--f7-message-text-footer-opacity);font-size:var(--f7-message-text-footer-font-size)}.message-text{text-align:left}.message-sent{text-align:right;flex-direction:row-reverse;align-self:flex-end}.message-sent .message-bubble{color:var(--f7-message-sent-text-color);background:var(--f7-message-sent-bg-color,var(--f7-theme-color))}.message-sent .message-content{align-items:flex-end}.message-received{flex-direction:row}.message-received .message-bubble{color:var(--f7-message-received-text-color);background:var(--f7-message-received-bg-color)}.message-received .message-content{align-items:flex-start}.message:not(.message-last) .message-avatar{opacity:0}.message:not(.message-first) .message-name{display:none}.message.message-same-name .message-name{display:none}.message.message-same-header .message-header{display:none}.message.message-same-footer .message-footer{display:none}.message-appear-from-bottom{animation:message-appear-from-bottom .3s}.message-appear-from-top{animation:message-appear-from-top .3s}.message-typing-indicator{display:inline-block;font-size:0;vertical-align:middle}.message-typing-indicator>div{display:inline-block;position:relative;background:var(--f7-message-typing-indicator-bg-color);opacity:var(--f7-message-typing-indicator-opacity);vertical-align:middle;border-radius:50%}@keyframes message-appear-from-bottom{from{transform:translate3d(0,100%,0)}to{transform:translate3d(0,0,0)}}@keyframes message-appear-from-top{from{transform:translate3d(0,-100%,0)}to{transform:translate3d(0,0,0)}}.ios .message-footer b,.ios .message-header b,.ios .message-name b,.ios .messages-title b{font-weight:600}.ios .message-header,.ios .message-name{margin-bottom:3px}.ios .message-footer{margin-top:3px}.ios .message-bubble{min-width:48px}.ios .message-image{margin:var(--f7-message-bubble-padding-vertical) calc(-1 * var(--f7-message-bubble-padding-horizontal))}.ios .message-image:first-child{margin-top:calc(-1 * var(--f7-message-bubble-padding-vertical))}.ios .message-image:first-child img{border-top-left-radius:var(--f7-message-bubble-border-radius);border-top-right-radius:var(--f7-message-bubble-border-radius)}.ios .message-image:last-child{margin-bottom:calc(-1 * var(--f7-message-bubble-padding-vertical))}.ios .message-image:last-child img{border-bottom-left-radius:var(--f7-message-bubble-border-radius);border-bottom-right-radius:var(--f7-message-bubble-border-radius)}.ios .message-text-header{margin-bottom:3px}.ios .message-text-footer{margin-top:3px}.ios .message-received{margin-left:calc(10px + var(--f7-safe-area-left))}.ios .message-received .message-footer,.ios .message-received .message-header,.ios .message-received .message-name{margin-left:var(--f7-message-bubble-padding-horizontal)}.ios .message-received .message-bubble{padding-left:calc(var(--f7-message-bubble-padding-horizontal) + 6px);-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%}.ios .message-received .message-image{margin-left:calc(-1 * (var(--f7-message-bubble-padding-horizontal) + 6px))}.ios .message-received.message-tail .message-bubble{border-radius:var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) 0}.ios .message-received.message-tail:not(.message-typing) .message-bubble{-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%}.ios .message-received.message-tail:not(.message-typing) .message-bubble .message-image:last-child img{border-bottom-left-radius:0px}.ios .message-sent{margin-right:calc(10px + var(--f7-safe-area-right))}.ios .message-sent .message-footer,.ios .message-sent .message-header,.ios .message-sent .message-name{margin-right:var(--f7-message-bubble-padding-horizontal)}.ios .message-sent .message-bubble{padding-right:calc(var(--f7-message-bubble-padding-horizontal) + 6px);-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%}.ios .message-sent .message-image{margin-right:calc(-1 * (var(--f7-message-bubble-padding-horizontal) + 6px))}.ios .message-sent.message-tail .message-bubble{border-radius:var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) 0 var(--f7-message-bubble-border-radius)}.ios .message-sent.message-tail .message-bubble{-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%}.ios .message-sent.message-tail .message-bubble .message-image:last-child img{border-bottom-right-radius:0px}.ios .message+.message:not(.message-first){margin-top:1px}.ios .message-received.message-typing .message-content:after,.ios .message-received.message-typing .message-content:before{content:'';position:absolute;background:var(--f7-message-received-bg-color);border-radius:50%}.ios .message-received.message-typing .message-content:after{width:11px;height:11px;left:4px;bottom:0px}.ios .message-received.message-typing .message-content:before{width:6px;height:6px;left:-1px;bottom:-4px}.ios .message-typing-indicator>div{width:9px;height:9px}.ios .message-typing-indicator>div+div{margin-left:4px}.ios .message-typing-indicator>div:first-child{animation:ios-message-typing-indicator .9s infinite}.ios .message-typing-indicator>div:nth-child(2){animation:ios-message-typing-indicator .9s 150ms infinite}.ios .message-typing-indicator>div:nth-child(3){animation:ios-message-typing-indicator .9s .3s infinite}@keyframes ios-message-typing-indicator{0%{opacity:.35}25%{opacity:.2}50%{opacity:.2}}.md .message-footer b,.md .message-header b,.md .message-name b,.md .messages-title b{font-weight:500}.md .message-header,.md .message-name{margin-bottom:2px}.md .message-footer{margin-top:2px}.md .message-text-header{margin-bottom:4px}.md .message-text-footer{margin-top:4px}.md .message-image{margin:calc(-1 * var(--f7-message-bubble-padding-vertical)) calc(-1 * var(--f7-message-bubble-padding-horizontal))}.md .message-image,.md .message-image img{border-radius:var(--f7-message-bubble-border-radius)}.md .message-received{margin-left:calc(8px + var(--f7-safe-area-left))}.md .message-received .message-footer,.md .message-received .message-header,.md .message-received .message-name{margin-left:16px}.md .message-received.message-first:not(.message-last) .message-bubble,.md .message-received.message-first:not(.message-last) .message-image,.md .message-received.message-first:not(.message-last) .message-image img{border-bottom-left-radius:4px}.md .message-received.message-last:not(.message-first) .message-bubble,.md .message-received.message-last:not(.message-first) .message-image,.md .message-received.message-last:not(.message-first) .message-image img{border-top-left-radius:4px}.md .message-received:not(.message-last):not(.message-first) .message-bubble,.md .message-received:not(.message-last):not(.message-first) .message-image,.md .message-received:not(.message-last):not(.message-first) .message-image img{border-bottom-left-radius:4px;border-top-left-radius:4px}.md .message-received .message-avatar+.message-content{margin-left:8px}.md .message-sent{margin-right:calc(8px + var(--f7-safe-area-right))}.md .message-sent .message-footer,.md .message-sent .message-header,.md .message-sent .message-name{margin-right:16px}.md .message-sent.message-first:not(.message-last) .message-bubble,.md .message-sent.message-first:not(.message-last) .message-image,.md .message-sent.message-first:not(.message-last) .message-image img{border-bottom-right-radius:4px}.md .message-sent.message-last:not(.message-first) .message-bubble,.md .message-sent.message-last:not(.message-first) .message-image,.md .message-sent.message-last:not(.message-first) .message-image img{border-top-right-radius:4px}.md .message-sent:not(.message-last):not(.message-first) .message-bubble,.md .message-sent:not(.message-last):not(.message-first) .message-image,.md .message-sent:not(.message-last):not(.message-first) .message-image img{border-bottom-right-radius:4px;border-top-right-radius:4px}.md .message-sent .message-avatar+.message-content{margin-right:var(--f7-message-bubble-padding-horizontal)}.md .message+.message:not(.message-first){margin-top:2px}.md .message-typing-indicator>div{width:6px;height:6px}.md .message-typing-indicator>div+div{margin-left:6px}.md .message-typing-indicator>div:first-child{animation:md-message-typing-indicator .9s infinite}.md .message-typing-indicator>div:nth-child(2){animation:md-message-typing-indicator .9s 150ms infinite}.md .message-typing-indicator>div:nth-child(3){animation:md-message-typing-indicator .9s .3s infinite}@keyframes md-message-typing-indicator{0%{transform:translateY(0%)}25%{transform:translateY(-5px)}50%{transform:translateY(0%)}}
1
+ :root{--f7-message-text-header-opacity:0.65;--f7-message-text-header-font-size:12px;--f7-message-text-footer-opacity:0.65;--f7-message-text-footer-font-size:12px;--f7-message-bubble-line-height:1.2;--f7-message-header-font-size:12px;--f7-message-footer-font-size:11px;--f7-message-name-font-size:12px;--f7-message-name-font-weight:inherit;--f7-message-avatar-border-radius:50%;--f7-messages-title-font-weight:inherit;--f7-message-typing-indicator-bg-color:#000}:root .dark,:root.dark{--f7-message-typing-indicator-bg-color:#fff}.ios{--f7-message-text-header-text-color:inherit;--f7-message-text-footer-text-color:inherit;--f7-messages-title-font-size:11px;--f7-message-avatar-size:29px;--f7-message-margin:16px;--f7-message-bubble-min-height:32px;--f7-message-bubble-font-size:17px;--f7-message-bubble-border-radius:16px;--f7-message-bubble-padding-vertical:6px;--f7-message-bubble-padding-horizontal:16px;--f7-message-typing-indicator-opacity:0.35;--f7-message-sent-text-color:#fff;--f7-messages-content-bg-color:#fff;--f7-message-received-text-color:#000;--f7-message-received-bg-color:#e5e5ea;--f7-messages-title-text-color:#00000073;--f7-message-header-text-color:#00000073;--f7-message-footer-text-color:#00000073;--f7-message-name-text-color:#00000073}.ios .dark,.ios.dark{--f7-message-received-bg-color:#252525;--f7-message-received-text-color:#fff;--f7-messages-content-bg-color:#0000;--f7-messages-title-text-color:#ffffff8a;--f7-message-header-text-color:#ffffff8a;--f7-message-name-text-color:#ffffff8a;--f7-message-footer-text-color:#ffffff8a}.md{--f7-messages-content-bg-color:#0000;--f7-messages-title-font-size:12px;--f7-message-avatar-size:32px;--f7-message-margin:16px;--f7-message-bubble-min-height:40px;--f7-message-bubble-font-size:16px;--f7-message-bubble-border-radius:20px;--f7-message-bubble-padding-vertical:10px;--f7-message-bubble-padding-horizontal:16px;--f7-message-typing-indicator-opacity:0.6}.md,.md .dark,.md [class*=color-]{--f7-message-sent-bg-color:var(--f7-md-primary);--f7-message-sent-text-color:var(--f7-md-on-primary);--f7-message-received-bg-color:var(--f7-md-surface-variant);--f7-message-received-text-color:var(--f7-md-on-surface);--f7-message-text-header-text-color:var(--f7-md-on-surface-variant);--f7-message-text-footer-text-color:var(--f7-md-on-surface-variant);--f7-messages-title-text-color:var(--f7-md-on-surface-variant);--f7-message-header-text-color:var(--f7-md-on-surface-variant);--f7-message-footer-text-color:var(--f7-md-on-surface-variant);--f7-message-name-text-color:var(--f7-md-on-surface-variant)}.messages,.messages-content{background:var(--f7-messages-content-bg-color)}.messages{display:flex;flex-direction:column;min-height:100%;position:relative;z-index:1}.message,.messages-title{margin-top:var(--f7-message-margin)}.message:last-child,.messages-title:last-child{margin-bottom:var(--f7-message-margin)}.messages-title{color:var(--f7-messages-title-text-color);font-size:var(--f7-messages-title-font-size);font-weight:var(--f7-messages-title-font-weight);line-height:1;text-align:center;width:100%}.message{align-items:flex-end;box-sizing:border-box;display:flex;max-width:70%;position:relative;transform:translateZ(0);z-index:1}.message-avatar{align-self:flex-end;background-size:cover;border-radius:var(--f7-message-avatar-border-radius);flex-shrink:0;height:var(--f7-message-avatar-size);position:relative;width:var(--f7-message-avatar-size)}.message-content{display:flex;flex-direction:column;position:relative}.message-footer,.message-header,.message-name{line-height:1}.message-header{color:var(--f7-message-header-text-color);font-size:var(--f7-message-header-font-size)}.message-footer{color:var(--f7-message-footer-text-color);font-size:var(--f7-message-footer-font-size);margin-bottom:-1em}.message-name{color:var(--f7-message-name-text-color);font-size:var(--f7-message-name-font-size);font-weight:var(--f7-message-name-font-weight)}.message-bubble{border-radius:var(--f7-message-bubble-border-radius);box-sizing:border-box;display:flex;flex-direction:column;font-size:var(--f7-message-bubble-font-size);line-height:var(--f7-message-bubble-line-height);min-height:var(--f7-message-bubble-min-height);padding:var(--f7-message-bubble-padding-vertical) var(--f7-message-bubble-padding-horizontal);position:relative;word-break:break-word}.message-image img{display:block;height:auto;max-width:100%;width:auto}.message-text-footer,.message-text-header{line-height:1}.message-text-header{color:var(--f7-message-text-header-text-color);font-size:var(--f7-message-text-header-font-size);opacity:var(--f7-message-text-header-opacity)}.message-text-footer{color:var(--f7-message-text-footer-text-color);font-size:var(--f7-message-text-footer-font-size);opacity:var(--f7-message-text-footer-opacity)}.message-text{text-align:left}.message-sent{align-self:flex-end;flex-direction:row-reverse;text-align:right}.message-sent .message-bubble{background:var(--f7-message-sent-bg-color,var(--f7-theme-color));color:var(--f7-message-sent-text-color)}.message-sent .message-content{align-items:flex-end}.message-received{flex-direction:row}.message-received .message-bubble{background:var(--f7-message-received-bg-color);color:var(--f7-message-received-text-color)}.message-received .message-content{align-items:flex-start}.message:not(.message-last) .message-avatar{opacity:0}.message.message-same-footer .message-footer,.message.message-same-header .message-header,.message.message-same-name .message-name,.message:not(.message-first) .message-name{display:none}.message-appear-from-bottom{animation:message-appear-from-bottom .3s}.message-appear-from-top{animation:message-appear-from-top .3s}.message-typing-indicator{display:inline-block;font-size:0;vertical-align:middle}.message-typing-indicator>div{background:var(--f7-message-typing-indicator-bg-color);border-radius:50%;display:inline-block;opacity:var(--f7-message-typing-indicator-opacity);position:relative;vertical-align:middle}@keyframes message-appear-from-bottom{0%{transform:translate3d(0,100%,0)}to{transform:translateZ(0)}}@keyframes message-appear-from-top{0%{transform:translate3d(0,-100%,0)}to{transform:translateZ(0)}}.ios .messages{box-sizing:border-box;padding-bottom:16px}.ios .message-footer b,.ios .message-header b,.ios .message-name b,.ios .messages-title b{font-weight:600}.ios .message-header,.ios .message-name{margin-bottom:3px}.ios .message-footer{margin-top:3px}.ios .message-bubble{min-width:48px}.ios .message-image{margin:var(--f7-message-bubble-padding-vertical) calc(var(--f7-message-bubble-padding-horizontal)*-1)}.ios .message-image:first-child{margin-top:calc(var(--f7-message-bubble-padding-vertical)*-1)}.ios .message-image:first-child img{border-top-left-radius:var(--f7-message-bubble-border-radius);border-top-right-radius:var(--f7-message-bubble-border-radius)}.ios .message-image:last-child{margin-bottom:calc(var(--f7-message-bubble-padding-vertical)*-1)}.ios .message-image:last-child img{border-bottom-left-radius:var(--f7-message-bubble-border-radius);border-bottom-right-radius:var(--f7-message-bubble-border-radius)}.ios .message-text-header{margin-bottom:3px}.ios .message-text-footer{margin-top:3px}.ios .message-received{margin-left:calc(16px + var(--f7-safe-area-left))}.ios .message-received .message-footer,.ios .message-received .message-header,.ios .message-received .message-name{margin-left:var(--f7-message-bubble-padding-horizontal)}.ios .message-received .message-bubble{padding-left:calc(var(--f7-message-bubble-padding-horizontal) + 6px);-webkit-mask-box-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="35" viewBox="0 0 96 70"><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 35"/></svg>') 50% 42% 46% 56%}.ios .message-received .message-image{margin-left:calc((var(--f7-message-bubble-padding-horizontal) + 6px)*-1)}.ios .message-received.message-tail .message-bubble{border-radius:var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) 0}.ios .message-received.message-tail:not(.message-typing) .message-bubble{-webkit-mask-box-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="35" viewBox="0 0 96 70"><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 35"/><path d="M0 70c6-2 12-10 12-19V35l14 27s-8 8-26 8"/></svg>') 50% 42% 46% 56%}.ios .message-received.message-tail:not(.message-typing) .message-bubble .message-image:last-child img{border-bottom-left-radius:0}.ios .message-sent{margin-right:calc(16px + var(--f7-safe-area-right))}.ios .message-sent .message-footer,.ios .message-sent .message-header,.ios .message-sent .message-name{margin-right:var(--f7-message-bubble-padding-horizontal)}.ios .message-sent .message-bubble{padding-right:calc(var(--f7-message-bubble-padding-horizontal) + 6px);-webkit-mask-box-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="35" viewBox="0 0 96 70"><path d="M84 35c1 7-5 37-42 35C5 72-1 42 0 35-1 28 5-2 42 0c37-2 43 28 42 35"/></svg>') 50% 56% 46% 42%}.ios .message-sent .message-image{margin-right:calc((var(--f7-message-bubble-padding-horizontal) + 6px)*-1)}.ios .message-sent.message-tail .message-bubble{border-radius:var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) 0 var(--f7-message-bubble-border-radius);-webkit-mask-box-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="35" viewBox="0 0 96 70"><path d="M84 35c1 7-5 37-42 35C5 72-1 42 0 35-1 28 5-2 42 0c37-2 43 28 42 35"/><path d="M96 70c-6-2-12-10-12-19V35L70 62s8 8 26 8"/></svg>') 50% 56% 46% 42%}.ios .message-sent.message-tail .message-bubble .message-image:last-child img{border-bottom-right-radius:0}.ios .message+.message:not(.message-first){margin-top:1px}.ios .message-received.message-typing .message-content:after,.ios .message-received.message-typing .message-content:before{background:var(--f7-message-received-bg-color);border-radius:50%;content:"";position:absolute}.ios .message-received.message-typing .message-content:after{bottom:0;height:11px;left:4px;width:11px}.ios .message-received.message-typing .message-content:before{bottom:-4px;height:6px;left:-1px;width:6px}.ios .message-typing-indicator>div{height:9px;width:9px}.ios .message-typing-indicator>div+div{margin-left:4px}.ios .message-typing-indicator>div:first-child{animation:ios-message-typing-indicator .9s infinite}.ios .message-typing-indicator>div:nth-child(2){animation:ios-message-typing-indicator .9s .15s infinite}.ios .message-typing-indicator>div:nth-child(3){animation:ios-message-typing-indicator .9s .3s infinite}@keyframes ios-message-typing-indicator{0%{opacity:.35}25%{opacity:.2}50%{opacity:.2}}.md .message-footer b,.md .message-header b,.md .message-name b,.md .messages-title b{font-weight:500}.md .message-header,.md .message-name{margin-bottom:2px}.md .message-footer{margin-top:2px}.md .message-text-header{margin-bottom:4px}.md .message-text-footer{margin-top:4px}.md .message-image{margin:calc(var(--f7-message-bubble-padding-vertical)*-1) calc(var(--f7-message-bubble-padding-horizontal)*-1)}.md .message-image,.md .message-image img{border-radius:var(--f7-message-bubble-border-radius)}.md .message-received{margin-left:calc(8px + var(--f7-safe-area-left))}.md .message-received .message-footer,.md .message-received .message-header,.md .message-received .message-name{margin-left:16px}.md .message-received.message-first:not(.message-last) .message-bubble,.md .message-received.message-first:not(.message-last) .message-image,.md .message-received.message-first:not(.message-last) .message-image img{border-bottom-left-radius:4px}.md .message-received.message-last:not(.message-first) .message-bubble,.md .message-received.message-last:not(.message-first) .message-image,.md .message-received.message-last:not(.message-first) .message-image img{border-top-left-radius:4px}.md .message-received:not(.message-last):not(.message-first) .message-bubble,.md .message-received:not(.message-last):not(.message-first) .message-image,.md .message-received:not(.message-last):not(.message-first) .message-image img{border-bottom-left-radius:4px;border-top-left-radius:4px}.md .message-received .message-avatar+.message-content{margin-left:8px}.md .message-sent{margin-right:calc(8px + var(--f7-safe-area-right))}.md .message-sent .message-footer,.md .message-sent .message-header,.md .message-sent .message-name{margin-right:16px}.md .message-sent.message-first:not(.message-last) .message-bubble,.md .message-sent.message-first:not(.message-last) .message-image,.md .message-sent.message-first:not(.message-last) .message-image img{border-bottom-right-radius:4px}.md .message-sent.message-last:not(.message-first) .message-bubble,.md .message-sent.message-last:not(.message-first) .message-image,.md .message-sent.message-last:not(.message-first) .message-image img{border-top-right-radius:4px}.md .message-sent:not(.message-last):not(.message-first) .message-bubble,.md .message-sent:not(.message-last):not(.message-first) .message-image,.md .message-sent:not(.message-last):not(.message-first) .message-image img{border-bottom-right-radius:4px;border-top-right-radius:4px}.md .message-sent .message-avatar+.message-content{margin-right:var(--f7-message-bubble-padding-horizontal)}.md .message+.message:not(.message-first){margin-top:2px}.md .message-typing-indicator>div{height:6px;width:6px}.md .message-typing-indicator>div+div{margin-left:6px}.md .message-typing-indicator>div:first-child{animation:md-message-typing-indicator .9s infinite}.md .message-typing-indicator>div:nth-child(2){animation:md-message-typing-indicator .9s .15s infinite}.md .message-typing-indicator>div:nth-child(3){animation:md-message-typing-indicator .9s .3s infinite}@keyframes md-message-typing-indicator{0%{transform:translateY(0)}25%{transform:translateY(-5px)}50%{transform:translateY(0)}}