add more supported font size

src/MobileApp.vue

@@ -263,176 +263,18 @@ i.icon.la, i.icon.las, i.icon.lab {
     font-size: var(--ebk-icon-font-size);
 }
 
+.ios .searchbar-icon:after {
+    font-size: var(--ebk-searchbar-icon-font-size);
+}
+
 .ios .searchbar-disable-button {
-    font-size: var(--f7-searchbar-disable-button-font-size);
+    font-size: var(--ebk-searchbar-disable-button-font-size);
 }
 
 .chip.chip-placeholder {
     border: 0;
 }
 
-/** multiple font size **/
-:root {
-    --ebk-icon-font-size: 28px;
-    --ebk-icon-text-margin: 2px;
-    --ebk-hide-icon-font-size: 18px;
-    --ebk-big-icon-button-size: 42px;
-    --ebk-right-bottom-icon-font-size: 13px;
-    --ebk-list-item-checked-icon-font-size: 20px;
-    --ebk-smaller-font-size: 10px;
-    --ebk-large-footer-font-size: 13px;
-    --ebk-sheet-title-font-size: 18px;
-    --ebk-numpad-value-height: 50px;
-    --ebk-numpad-value-small-font-size: 20px;
-    --ebk-numpad-value-normal-font-size: 22px;
-    --ebk-numpad-value-large-font-size: 24px;
-    --ebk-numpad-normal-button-font-size: 28px;
-    --ebk-numpad-confirm-button-font-size: 20px;
-    --ebk-amount-small-font-size: 32px;
-    --ebk-amount-normal-font-size: 36px;
-    --ebk-amount-large-font-size: 40px;
-    --ebk-pie-chart-toolbox-percentage-height: 30px;
-    --ebk-pie-chart-toolbox-percentage-font-size: 18px;
-    --ebk-pie-chart-toolbox-text-font-size: 16px;
-    --ebk-account-list-group-title-height: 36px;
-    --ebk-transaction-date-width: 25px;
-    --ebk-transaction-day-font-size: 16px;
-    --ebk-transaction-day-of-week-font-size: 12px;
-    --ebk-license-popup-title-font-size: 30px;
-}
-
-:root.font-large {
-    font-size: 17px;
-    --f7-font-size: 17px;
-    --f7-navbar-font-size: 20px;
-    --f7-searchbar-input-font-size: 20px;
-    --f7-searchbar-disable-button-font-size: 20px;
-    --f7-toolbar-font-size: 20px;
-    --f7-tabbar-icon-size: 30px;
-    --f7-toolbar-height: 60px;
-    --f7-tabbar-icons-height: 60px;
-    --f7-tabbar-label-font-size: 17px;
-    --f7-label-font-size: 16px;
-    --f7-input-font-size: 20px;
-    --f7-button-font-size: 18px;
-    --f7-button-small-font-size: 15px;
-    --f7-button-large-font-size: 20px;
-    --f7-chip-font-size: 16px;
-    --f7-block-title-font-size: 20px;
-    --f7-block-font-size: 20px;
-    --f7-block-footer-font-size: 15px;
-    --f7-card-header-font-size: 20px;
-    --f7-list-group-title-font-size: 22px;
-    --f7-list-item-header-font-size: 16px;
-    --f7-list-item-title-font-size: 20px;
-    --f7-list-item-text-font-size: 17px;
-    --f7-list-font-size: 20px;
-    --f7-list-item-after-font-size: 20px;
-    --f7-list-item-footer-font-size: 15px;
-    --f7-list-button-font-size: 20px;
-    --f7-treeview-label-font-size: 20px;
-    --f7-swipeout-button-font-size: 20px;
-    --f7-dialog-title-font-size: 20px;
-    --f7-dialog-font-size: 17px;
-    --f7-dialog-button-font-size: 20px;
-    --f7-actions-button-font-size: 22px;
-    --ebk-icon-font-size: 32px;
-    --ebk-icon-text-margin: 4px;
-    --ebk-hide-icon-font-size: 24px;
-    --ebk-big-icon-button-size: 52px;
-    --ebk-right-bottom-icon-font-size: 15px;
-    --ebk-list-item-checked-icon-font-size: 24px;
-    --ebk-smaller-font-size: 14px;
-    --ebk-large-footer-font-size: 16px;
-    --ebk-sheet-title-font-size: 22px;
-    --ebk-numpad-value-height: 60px;
-    --ebk-numpad-value-small-font-size: 22px;
-    --ebk-numpad-value-normal-font-size: 26px;
-    --ebk-numpad-value-large-font-size: 30px;
-    --ebk-numpad-normal-button-font-size: 32px;
-    --ebk-numpad-confirm-button-font-size: 22px;
-    --ebk-amount-small-font-size: 32px;
-    --ebk-amount-normal-font-size: 36px;
-    --ebk-amount-large-font-size: 40px;
-    --ebk-pie-chart-toolbox-percentage-height: 30px;
-    --ebk-pie-chart-toolbox-percentage-font-size: 22px;
-    --ebk-pie-chart-toolbox-text-font-size: 20px;
-    --ebk-account-list-group-title-height: 40px;
-    --ebk-transaction-date-width: 32px;
-    --ebk-transaction-day-font-size: 20px;
-    --ebk-transaction-day-of-week-font-size: 15px;
-    --ebk-license-popup-title-font-size: 36px;
-}
-
-:root.font-extra-large {
-    font-size: 21px;
-    --f7-font-size: 21px;
-    --f7-navbar-font-size: 24px;
-    --f7-searchbar-input-font-size: 24px;
-    --f7-searchbar-disable-button-font-size: 24px;
-    --f7-toolbar-font-size: 24px;
-    --f7-tabbar-icon-size: 30px;
-    --f7-toolbar-height: 66px;
-    --f7-tabbar-icons-height: 66px;
-    --f7-tabbar-label-font-size: 21px;
-    --f7-label-font-size: 20px;
-    --f7-label-height: 22px;
-    --f7-input-font-size: 24px;
-    --f7-input-height: 60px;
-    --f7-button-font-size: 22px;
-    --f7-button-small-font-size: 19px;
-    --f7-button-large-font-size: 24px;
-    --f7-button-height: 32px;
-    --f7-chip-font-size: 20px;
-    --f7-block-title-font-size: 24px;
-    --f7-block-title-line-height: 26px;
-    --f7-block-font-size: 24px;
-    --f7-block-footer-font-size: 19px;
-    --f7-card-header-font-size: 24px;
-    --f7-list-group-title-font-size: 26px;
-    --f7-list-group-title-height: 48px;
-    --f7-list-item-header-font-size: 20px;
-    --f7-list-item-title-font-size: 24px;
-    --f7-list-item-text-font-size: 21px;
-    --f7-list-font-size: 24px;
-    --f7-list-item-after-font-size: 24px;
-    --f7-list-item-footer-font-size: 19px;
-    --f7-list-button-font-size: 24px;
-    --f7-list-item-min-height: 54px;
-    --f7-treeview-label-font-size: 24px;
-    --f7-swipeout-button-font-size: 24px;
-    --f7-dialog-title-font-size: 24px;
-    --f7-dialog-font-size: 21px;
-    --f7-dialog-button-font-size: 24px;
-    --f7-actions-button-font-size: 26px;
-    --ebk-icon-font-size: 36px;
-    --ebk-icon-text-margin: 4px;
-    --ebk-hide-icon-font-size: 28px;
-    --ebk-big-icon-button-size: 58px;
-    --ebk-right-bottom-icon-font-size: 19px;
-    --ebk-list-item-checked-icon-font-size: 28px;
-    --ebk-smaller-font-size: 18px;
-    --ebk-large-footer-font-size: 20px;
-    --ebk-sheet-title-font-size: 26px;
-    --ebk-numpad-value-height: 60px;
-    --ebk-numpad-value-small-font-size: 26px;
-    --ebk-numpad-value-normal-font-size: 26px;
-    --ebk-numpad-value-large-font-size: 30px;
-    --ebk-numpad-normal-button-font-size: 32px;
-    --ebk-numpad-confirm-button-font-size: 26px;
-    --ebk-amount-small-font-size: 34px;
-    --ebk-amount-normal-font-size: 40px;
-    --ebk-amount-large-font-size: 44px;
-    --ebk-pie-chart-toolbox-percentage-height: 30px;
-    --ebk-pie-chart-toolbox-percentage-font-size: 26px;
-    --ebk-pie-chart-toolbox-text-font-size: 24px;
-    --ebk-account-list-group-title-height: 44px;
-    --ebk-transaction-date-width: 40px;
-    --ebk-transaction-day-font-size: 24px;
-    --ebk-transaction-day-of-week-font-size: 19px;
-    --ebk-license-popup-title-font-size: 40px;
-}
-
 /** custom class **/
 .ebk-small-amount {
     --f7-list-item-title-font-size: var(--ebk-amount-small-font-size) !important;

src/consts/font.js

@@ -0,0 +1,48 @@
+const allFontSize = {
+    Small: {
+        type: 0,
+        className: 'font-size-small'
+    },
+    Default: {
+        type: 1,
+        className: 'font-size-default'
+    },
+    Large: {
+        type: 2,
+        className: 'font-size-large'
+    },
+    XLarge: {
+        type: 3,
+        className: 'font-size-x-large'
+    },
+    XXLarge: {
+        type: 4,
+        className: 'font-size-xx-large'
+    },
+    XXXLarge: {
+        type: 5,
+        className: 'font-size-xxx-large'
+    },
+    XXXXLarge: {
+        type: 6,
+        className: 'font-size-xxxx-large'
+    }
+}
+
+const allFontSizeArray = [
+    allFontSize.Small,
+    allFontSize.Default,
+    allFontSize.Large,
+    allFontSize.XLarge,
+    allFontSize.XXLarge,
+    allFontSize.XXXLarge,
+    allFontSize.XXXXLarge
+];
+
+const defaultFontSize = allFontSize.Default;
+
+export default {
+    allFontSize: allFontSize,
+    allFontSizeArray: allFontSizeArray,
+    defaultFontSize: defaultFontSize
+};

src/lib/settings.js

@@ -8,7 +8,7 @@ const serverSettingsCookieKey = 'ebk_server_settings';
 
 const defaultSettings = {
     theme: 'auto',
-    fontSize: 'default',
+    fontSize: 0,
     timeZone: '',
     debug: false,
     applicationLock: false,

src/lib/ui.mobile.js

@@ -1,5 +1,6 @@
 import { f7, f7ready } from 'framework7-vue';
 
+import fontConstants from '@/consts/font.js';
 import settings from './settings.js';
 import {
     getLocalizedError,
@@ -130,18 +131,18 @@ export function autoChangeTextareaSize(el) {
     });
 }
 
-export function setAppFontSize(value) {
+export function setAppFontSize(type) {
-    let fontSizeClass = 'font-default';
+    const htmlElement = elements('html');
 
-    if (value === 'extraLarge') {
+    for (let i = 0; i < fontConstants.allFontSizeArray.length; i++) {
-        fontSizeClass = 'font-extra-large';
+        const fontSizeType = fontConstants.allFontSizeArray[i];
-    } else if (value === 'large') {
+
-        fontSizeClass = 'font-large';
+        if (fontSizeType.type === type) {
+            if (!htmlElement.hasClass(fontSizeType.className)) {
+                htmlElement.addClass(fontSizeType.className);
+            }
+        } else {
+            htmlElement.removeClass(fontSizeType.className);
+        }
     }
-
-    elements('html')
-        .removeClass('font-default')
-        .removeClass('font-large')
-        .removeClass('font-extra-large')
-        .addClass(fontSizeClass);
 }

src/locales/en.js

@@ -695,6 +695,7 @@ export default {
     'Not Specified': 'Not Specified',
     'No results': 'No results',
     'Unknown': 'Unknown',
+    'Default': 'Default',
     'Done': 'Done',
     'Continue': 'Continue',
     'Status': 'Status',
@@ -938,9 +939,6 @@ export default {
     'Light': 'Light',
     'Dark': 'Dark',
     'Font Size': 'Font Size',
-    'Default': 'Default',
-    'Large': 'Large',
-    'Extra Large': 'Extra Large',
     'Timezone': 'Timezone',
     'System Default': 'System Default',
     'Language Default': 'Language Default',

src/locales/zh_Hans.js

@@ -695,6 +695,7 @@ export default {
     'Not Specified': '未指定',
     'No results': '无结果',
     'Unknown': '未知',
+    'Default': '默认',
     'Done': '完成',
     'Continue': '继续',
     'Status': '状态',
@@ -938,9 +939,6 @@ export default {
     'Light': '浅色',
     'Dark': '深色',
     'Font Size': '字体大小',
-    'Default': '默认',
-    'Large': '大',
-    'Extra Large': '最大',
     'Timezone': '时区',
     'System Default': '系统默认',
     'Language Default': '语言默认',

src/styles/mobile/font-size-default.css

@@ -0,0 +1,30 @@
+:root {
+    --ebk-icon-font-size: 28px;
+    --ebk-icon-text-margin: 2px;
+    --ebk-hide-icon-font-size: 18px;
+    --ebk-big-icon-button-size: 42px;
+    --ebk-right-bottom-icon-font-size: 13px;
+    --ebk-list-item-checked-icon-font-size: 20px;
+    --ebk-searchbar-icon-font-size: 20px;
+    --ebk-searchbar-disable-button-font-size: 17px;
+    --ebk-smaller-font-size: 10px;
+    --ebk-large-footer-font-size: 13px;
+    --ebk-sheet-title-font-size: 18px;
+    --ebk-numpad-value-height: 50px;
+    --ebk-numpad-value-small-font-size: 20px;
+    --ebk-numpad-value-normal-font-size: 22px;
+    --ebk-numpad-value-large-font-size: 24px;
+    --ebk-numpad-normal-button-font-size: 28px;
+    --ebk-numpad-confirm-button-font-size: 20px;
+    --ebk-amount-small-font-size: 32px;
+    --ebk-amount-normal-font-size: 36px;
+    --ebk-amount-large-font-size: 40px;
+    --ebk-pie-chart-toolbox-percentage-height: 30px;
+    --ebk-pie-chart-toolbox-percentage-font-size: 18px;
+    --ebk-pie-chart-toolbox-text-font-size: 16px;
+    --ebk-account-list-group-title-height: 36px;
+    --ebk-transaction-date-width: 25px;
+    --ebk-transaction-day-font-size: 16px;
+    --ebk-transaction-day-of-week-font-size: 12px;
+    --ebk-license-popup-title-font-size: 30px;
+}

src/styles/mobile/font-size-large.css

@@ -0,0 +1,64 @@
+:root.font-size-large {
+    font-size: 15px;
+    --f7-font-size: 15px;
+    --f7-navbar-font-size: 18px;
+    --f7-searchbar-input-font-size: 18px;
+    --f7-toolbar-font-size: 18px;
+    --f7-tabbar-icon-size: 29px;
+    --f7-toolbar-height: 50px;
+    --f7-tabbar-icons-height: 50px;
+    --f7-tabbar-label-font-size: 13px;
+    --f7-label-font-size: 13px;
+    --f7-input-font-size: 17px;
+    --f7-button-font-size: 15px;
+    --f7-button-small-font-size: 14px;
+    --f7-button-large-font-size: 18px;
+    --f7-chip-font-size: 15px;
+    --f7-block-title-font-size: 17px;
+    --f7-block-font-size: 17px;
+    --f7-block-footer-font-size: 15px;
+    --f7-card-header-font-size: 18px;
+    --f7-list-group-title-font-size: 18px;
+    --f7-list-item-header-font-size: 13px;
+    --f7-list-item-title-font-size: 17px;
+    --f7-list-item-text-font-size: 16px;
+    --f7-list-font-size: 17px;
+    --f7-list-item-after-font-size: 17px;
+    --f7-list-item-footer-font-size: 13px;
+    --f7-list-button-font-size: 17px;
+    --f7-list-item-min-height: 46px;
+    --f7-treeview-label-font-size: 18px;
+    --f7-swipeout-button-font-size: 17px;
+    --f7-dialog-title-font-size: 19px;
+    --f7-dialog-font-size: 15px;
+    --f7-dialog-button-font-size: 18px;
+    --f7-actions-button-font-size: 21px;
+    --ebk-icon-font-size: 29px;
+    --ebk-icon-text-margin: 3px;
+    --ebk-hide-icon-font-size: 19px;
+    --ebk-big-icon-button-size: 44px;
+    --ebk-right-bottom-icon-font-size: 13px;
+    --ebk-list-item-checked-icon-font-size: 21px;
+    --ebk-searchbar-icon-font-size: 20px;
+    --ebk-searchbar-disable-button-font-size: 17px;
+    --ebk-smaller-font-size: 11px;
+    --ebk-large-footer-font-size: 14px;
+    --ebk-sheet-title-font-size: 19px;
+    --ebk-numpad-value-height: 52px;
+    --ebk-numpad-value-small-font-size: 21px;
+    --ebk-numpad-value-normal-font-size: 23px;
+    --ebk-numpad-value-large-font-size: 25px;
+    --ebk-numpad-normal-button-font-size: 29px;
+    --ebk-numpad-confirm-button-font-size: 21px;
+    --ebk-amount-small-font-size: 32px;
+    --ebk-amount-normal-font-size: 36px;
+    --ebk-amount-large-font-size: 40px;
+    --ebk-pie-chart-toolbox-percentage-height: 30px;
+    --ebk-pie-chart-toolbox-percentage-font-size: 19px;
+    --ebk-pie-chart-toolbox-text-font-size: 17px;
+    --ebk-account-list-group-title-height: 37px;
+    --ebk-transaction-date-width: 28px;
+    --ebk-transaction-day-font-size: 17px;
+    --ebk-transaction-day-of-week-font-size: 13px;
+    --ebk-license-popup-title-font-size: 31px;
+}

src/styles/mobile/font-size-small.css

@@ -0,0 +1,65 @@
+:root.font-size-small {
+    --f7-list-item-padding-horizontal: 12px;
+    --f7-list-item-padding-vertical: 8px;
+    --f7-list-media-item-padding-vertical: 8px;
+    font-size: 13px;
+    --f7-font-size: 13px;
+    --f7-navbar-font-size: 16px;
+    --f7-searchbar-input-font-size: 16px;
+    --f7-toolbar-font-size: 16px;
+    --f7-tabbar-icon-size: 28px;
+    --f7-tabbar-label-font-size: 12px;
+    --f7-label-font-size: 12px;
+    --f7-input-font-size: 15px;
+    --f7-button-font-size: 13px;
+    --f7-button-small-font-size: 12px;
+    --f7-button-large-font-size: 16px;
+    --f7-chip-font-size: 13px;
+    --f7-block-title-font-size: 15px;
+    --f7-block-font-size: 15px;
+    --f7-block-footer-font-size: 13px;
+    --f7-card-header-font-size: 16px;
+    --f7-list-group-title-font-size: 15px;
+    --f7-list-item-header-font-size: 12px;
+    --f7-list-item-title-font-size: 15px;
+    --f7-list-item-text-font-size: 14px;
+    --f7-list-font-size: 15px;
+    --f7-list-item-after-font-size: 15px;
+    --f7-list-item-footer-font-size: 12px;
+    --f7-list-button-font-size: 15px;
+    --f7-list-item-min-height: 40px;
+    --f7-treeview-label-font-size: 16px;
+    --f7-swipeout-button-font-size: 15px;
+    --f7-dialog-title-font-size: 16px;
+    --f7-dialog-font-size: 13px;
+    --f7-dialog-button-font-size: 16px;
+    --f7-actions-button-font-size: 18px;
+    --ebk-icon-font-size: 28px;
+    --ebk-icon-text-margin: 2px;
+    --ebk-hide-icon-font-size: 18px;
+    --ebk-big-icon-button-size: 42px;
+    --ebk-right-bottom-icon-font-size: 13px;
+    --ebk-list-item-checked-icon-font-size: 20px;
+    --ebk-searchbar-icon-font-size: 20px;
+    --ebk-searchbar-disable-button-font-size: 17px;
+    --ebk-smaller-font-size: 10px;
+    --ebk-large-footer-font-size: 13px;
+    --ebk-sheet-title-font-size: 18px;
+    --ebk-numpad-value-height: 50px;
+    --ebk-numpad-value-small-font-size: 20px;
+    --ebk-numpad-value-normal-font-size: 22px;
+    --ebk-numpad-value-large-font-size: 24px;
+    --ebk-numpad-normal-button-font-size: 28px;
+    --ebk-numpad-confirm-button-font-size: 20px;
+    --ebk-amount-small-font-size: 32px;
+    --ebk-amount-normal-font-size: 36px;
+    --ebk-amount-large-font-size: 40px;
+    --ebk-pie-chart-toolbox-percentage-height: 30px;
+    --ebk-pie-chart-toolbox-percentage-font-size: 18px;
+    --ebk-pie-chart-toolbox-text-font-size: 16px;
+    --ebk-account-list-group-title-height: 36px;
+    --ebk-transaction-date-width: 25px;
+    --ebk-transaction-day-font-size: 16px;
+    --ebk-transaction-day-of-week-font-size: 12px;
+    --ebk-license-popup-title-font-size: 30px;
+}

src/styles/mobile/font-size-x-large.css

@@ -0,0 +1,64 @@
+:root.font-size-x-large {
+    font-size: 16px;
+    --f7-font-size: 16px;
+    --f7-navbar-font-size: 19px;
+    --f7-searchbar-input-font-size: 19px;
+    --f7-toolbar-font-size: 19px;
+    --f7-tabbar-icon-size: 30px;
+    --f7-toolbar-height: 54px;
+    --f7-tabbar-icons-height: 54px;
+    --f7-tabbar-label-font-size: 14px;
+    --f7-label-font-size: 14px;
+    --f7-input-font-size: 18px;
+    --f7-button-font-size: 16px;
+    --f7-button-small-font-size: 15px;
+    --f7-button-large-font-size: 19px;
+    --f7-chip-font-size: 16px;
+    --f7-block-title-font-size: 18px;
+    --f7-block-font-size: 18px;
+    --f7-block-footer-font-size: 16px;
+    --f7-card-header-font-size: 19px;
+    --f7-list-group-title-font-size: 20px;
+    --f7-list-item-header-font-size: 14px;
+    --f7-list-item-title-font-size: 18px;
+    --f7-list-item-text-font-size: 17px;
+    --f7-list-font-size: 18px;
+    --f7-list-item-after-font-size: 18px;
+    --f7-list-item-footer-font-size: 14px;
+    --f7-list-button-font-size: 18px;
+    --f7-list-item-min-height: 48px;
+    --f7-treeview-label-font-size: 19px;
+    --f7-swipeout-button-font-size: 18px;
+    --f7-dialog-title-font-size: 20px;
+    --f7-dialog-font-size: 16px;
+    --f7-dialog-button-font-size: 19px;
+    --f7-actions-button-font-size: 22px;
+    --ebk-icon-font-size: 30px;
+    --ebk-icon-text-margin: 3px;
+    --ebk-hide-icon-font-size: 20px;
+    --ebk-big-icon-button-size: 48px;
+    --ebk-right-bottom-icon-font-size: 14px;
+    --ebk-list-item-checked-icon-font-size: 22px;
+    --ebk-searchbar-icon-font-size: 20px;
+    --ebk-searchbar-disable-button-font-size: 18px;
+    --ebk-smaller-font-size: 12px;
+    --ebk-large-footer-font-size: 15px;
+    --ebk-sheet-title-font-size: 20px;
+    --ebk-numpad-value-height: 54px;
+    --ebk-numpad-value-small-font-size: 22px;
+    --ebk-numpad-value-normal-font-size: 24px;
+    --ebk-numpad-value-large-font-size: 26px;
+    --ebk-numpad-normal-button-font-size: 30px;
+    --ebk-numpad-confirm-button-font-size: 22px;
+    --ebk-amount-small-font-size: 32px;
+    --ebk-amount-normal-font-size: 36px;
+    --ebk-amount-large-font-size: 40px;
+    --ebk-pie-chart-toolbox-percentage-height: 30px;
+    --ebk-pie-chart-toolbox-percentage-font-size: 20px;
+    --ebk-pie-chart-toolbox-text-font-size: 18px;
+    --ebk-account-list-group-title-height: 38px;
+    --ebk-transaction-date-width: 30px;
+    --ebk-transaction-day-font-size: 18px;
+    --ebk-transaction-day-of-week-font-size: 14px;
+    --ebk-license-popup-title-font-size: 32px;
+}

src/styles/mobile/font-size-xx-large.css

@@ -0,0 +1,69 @@
+:root.font-size-xx-large {
+    font-size: 17px;
+    --f7-font-size: 17px;
+    --f7-navbar-font-size: 20px;
+    --f7-searchbar-input-font-size: 20px;
+    --f7-searchbar-input-height: 34px;
+    --f7-toolbar-font-size: 20px;
+    --f7-tabbar-icon-size: 32px;
+    --f7-toolbar-height: 62px;
+    --f7-tabbar-icons-height: 62px;
+    --f7-tabbar-label-font-size: 17px;
+    --f7-label-font-size: 16px;
+    --f7-label-height: 18px;
+    --f7-input-font-size: 20px;
+    --f7-input-height: 56px;
+    --f7-button-font-size: 18px;
+    --f7-button-small-font-size: 15px;
+    --f7-button-large-font-size: 20px;
+    --f7-chip-font-size: 16px;
+    --f7-block-title-font-size: 20px;
+    --f7-block-title-line-height: 22px;
+    --f7-block-font-size: 20px;
+    --f7-block-footer-font-size: 15px;
+    --f7-card-header-font-size: 20px;
+    --f7-list-group-title-font-size: 22px;
+    --f7-list-group-title-height: 38px;
+    --f7-list-item-header-font-size: 16px;
+    --f7-list-item-title-font-size: 20px;
+    --f7-list-item-text-font-size: 17px;
+    --f7-list-font-size: 20px;
+    --f7-list-item-after-font-size: 20px;
+    --f7-list-item-footer-font-size: 15px;
+    --f7-list-button-font-size: 20px;
+    --f7-list-item-min-height: 50px;
+    --f7-treeview-label-font-size: 20px;
+    --f7-swipeout-button-font-size: 20px;
+    --f7-dialog-title-font-size: 20px;
+    --f7-dialog-font-size: 17px;
+    --f7-dialog-button-font-size: 20px;
+    --f7-actions-button-font-size: 22px;
+    --ebk-icon-font-size: 32px;
+    --ebk-icon-text-margin: 4px;
+    --ebk-hide-icon-font-size: 24px;
+    --ebk-big-icon-button-size: 54px;
+    --ebk-right-bottom-icon-font-size: 15px;
+    --ebk-list-item-checked-icon-font-size: 24px;
+    --ebk-searchbar-icon-font-size: 22px;
+    --ebk-searchbar-disable-button-font-size: 20px;
+    --ebk-smaller-font-size: 14px;
+    --ebk-large-footer-font-size: 16px;
+    --ebk-sheet-title-font-size: 22px;
+    --ebk-numpad-value-height: 60px;
+    --ebk-numpad-value-small-font-size: 22px;
+    --ebk-numpad-value-normal-font-size: 26px;
+    --ebk-numpad-value-large-font-size: 30px;
+    --ebk-numpad-normal-button-font-size: 32px;
+    --ebk-numpad-confirm-button-font-size: 22px;
+    --ebk-amount-small-font-size: 32px;
+    --ebk-amount-normal-font-size: 36px;
+    --ebk-amount-large-font-size: 40px;
+    --ebk-pie-chart-toolbox-percentage-height: 30px;
+    --ebk-pie-chart-toolbox-percentage-font-size: 22px;
+    --ebk-pie-chart-toolbox-text-font-size: 20px;
+    --ebk-account-list-group-title-height: 40px;
+    --ebk-transaction-date-width: 32px;
+    --ebk-transaction-day-font-size: 20px;
+    --ebk-transaction-day-of-week-font-size: 15px;
+    --ebk-license-popup-title-font-size: 36px;
+}

src/styles/mobile/font-size-xxx-large.css

@@ -0,0 +1,70 @@
+:root.font-size-xxx-large {
+    font-size: 19px;
+    --f7-font-size: 19px;
+    --f7-navbar-font-size: 22px;
+    --f7-searchbar-input-font-size: 22px;
+    --f7-searchbar-input-height: 36px;
+    --f7-toolbar-font-size: 22px;
+    --f7-tabbar-icon-size: 34px;
+    --f7-toolbar-height: 66px;
+    --f7-tabbar-icons-height: 66px;
+    --f7-tabbar-label-font-size: 19px;
+    --f7-label-font-size: 18px;
+    --f7-label-height: 20px;
+    --f7-input-font-size: 22px;
+    --f7-input-height: 60px;
+    --f7-button-font-size: 20px;
+    --f7-button-small-font-size: 17px;
+    --f7-button-large-font-size: 22px;
+    --f7-button-height: 30px;
+    --f7-chip-font-size: 18px;
+    --f7-block-title-font-size: 22px;
+    --f7-block-title-line-height: 24px;
+    --f7-block-font-size: 22px;
+    --f7-block-footer-font-size: 17px;
+    --f7-card-header-font-size: 22px;
+    --f7-list-group-title-font-size: 24px;
+    --f7-list-group-title-height: 42px;
+    --f7-list-item-header-font-size: 18px;
+    --f7-list-item-title-font-size: 22px;
+    --f7-list-item-text-font-size: 19px;
+    --f7-list-font-size: 22px;
+    --f7-list-item-after-font-size: 22px;
+    --f7-list-item-footer-font-size: 17px;
+    --f7-list-button-font-size: 22px;
+    --f7-list-item-min-height: 52px;
+    --f7-treeview-label-font-size: 22px;
+    --f7-swipeout-button-font-size: 22px;
+    --f7-dialog-title-font-size: 22px;
+    --f7-dialog-font-size: 19px;
+    --f7-dialog-button-font-size: 22px;
+    --f7-actions-button-font-size: 24px;
+    --ebk-icon-font-size: 34px;
+    --ebk-icon-text-margin: 4px;
+    --ebk-hide-icon-font-size: 26px;
+    --ebk-big-icon-button-size: 58px;
+    --ebk-right-bottom-icon-font-size: 17px;
+    --ebk-list-item-checked-icon-font-size: 26px;
+    --ebk-searchbar-icon-font-size: 24px;
+    --ebk-searchbar-disable-button-font-size: 22px;
+    --ebk-smaller-font-size: 16px;
+    --ebk-large-footer-font-size: 18px;
+    --ebk-sheet-title-font-size: 24px;
+    --ebk-numpad-value-height: 60px;
+    --ebk-numpad-value-small-font-size: 24px;
+    --ebk-numpad-value-normal-font-size: 28px;
+    --ebk-numpad-value-large-font-size: 30px;
+    --ebk-numpad-normal-button-font-size: 32px;
+    --ebk-numpad-confirm-button-font-size: 24px;
+    --ebk-amount-small-font-size: 34px;
+    --ebk-amount-normal-font-size: 38px;
+    --ebk-amount-large-font-size: 42px;
+    --ebk-pie-chart-toolbox-percentage-height: 30px;
+    --ebk-pie-chart-toolbox-percentage-font-size: 24px;
+    --ebk-pie-chart-toolbox-text-font-size: 22px;
+    --ebk-account-list-group-title-height: 42px;
+    --ebk-transaction-date-width: 36px;
+    --ebk-transaction-day-font-size: 22px;
+    --ebk-transaction-day-of-week-font-size: 17px;
+    --ebk-license-popup-title-font-size: 38px;
+}

src/styles/mobile/font-size-xxxx-large.css

@@ -0,0 +1,70 @@
+:root.font-size-xxxx-large {
+    font-size: 21px;
+    --f7-font-size: 21px;
+    --f7-navbar-font-size: 24px;
+    --f7-searchbar-input-font-size: 24px;
+    --f7-searchbar-input-height: 38px;
+    --f7-toolbar-font-size: 24px;
+    --f7-tabbar-icon-size: 36px;
+    --f7-toolbar-height: 70px;
+    --f7-tabbar-icons-height: 70px;
+    --f7-tabbar-label-font-size: 21px;
+    --f7-label-font-size: 20px;
+    --f7-label-height: 22px;
+    --f7-input-font-size: 24px;
+    --f7-input-height: 64px;
+    --f7-button-font-size: 22px;
+    --f7-button-small-font-size: 19px;
+    --f7-button-large-font-size: 24px;
+    --f7-button-height: 32px;
+    --f7-chip-font-size: 20px;
+    --f7-block-title-font-size: 24px;
+    --f7-block-title-line-height: 26px;
+    --f7-block-font-size: 24px;
+    --f7-block-footer-font-size: 19px;
+    --f7-card-header-font-size: 24px;
+    --f7-list-group-title-font-size: 26px;
+    --f7-list-group-title-height: 48px;
+    --f7-list-item-header-font-size: 20px;
+    --f7-list-item-title-font-size: 24px;
+    --f7-list-item-text-font-size: 21px;
+    --f7-list-font-size: 24px;
+    --f7-list-item-after-font-size: 24px;
+    --f7-list-item-footer-font-size: 19px;
+    --f7-list-button-font-size: 24px;
+    --f7-list-item-min-height: 54px;
+    --f7-treeview-label-font-size: 24px;
+    --f7-swipeout-button-font-size: 24px;
+    --f7-dialog-title-font-size: 24px;
+    --f7-dialog-font-size: 21px;
+    --f7-dialog-button-font-size: 24px;
+    --f7-actions-button-font-size: 26px;
+    --ebk-icon-font-size: 36px;
+    --ebk-icon-text-margin: 4px;
+    --ebk-hide-icon-font-size: 28px;
+    --ebk-big-icon-button-size: 64px;
+    --ebk-right-bottom-icon-font-size: 19px;
+    --ebk-list-item-checked-icon-font-size: 28px;
+    --ebk-searchbar-icon-font-size: 26px;
+    --ebk-searchbar-disable-button-font-size: 24px;
+    --ebk-smaller-font-size: 18px;
+    --ebk-large-footer-font-size: 20px;
+    --ebk-sheet-title-font-size: 26px;
+    --ebk-numpad-value-height: 60px;
+    --ebk-numpad-value-small-font-size: 26px;
+    --ebk-numpad-value-normal-font-size: 26px;
+    --ebk-numpad-value-large-font-size: 30px;
+    --ebk-numpad-normal-button-font-size: 32px;
+    --ebk-numpad-confirm-button-font-size: 26px;
+    --ebk-amount-small-font-size: 34px;
+    --ebk-amount-normal-font-size: 40px;
+    --ebk-amount-large-font-size: 44px;
+    --ebk-pie-chart-toolbox-percentage-height: 30px;
+    --ebk-pie-chart-toolbox-percentage-font-size: 26px;
+    --ebk-pie-chart-toolbox-text-font-size: 24px;
+    --ebk-account-list-group-title-height: 44px;
+    --ebk-transaction-date-width: 40px;
+    --ebk-transaction-day-font-size: 24px;
+    --ebk-transaction-day-of-week-font-size: 19px;
+    --ebk-license-popup-title-font-size: 40px;
+}