From a1c828fe62aeafb3f4dfb4b5a091081099d74b3f Mon Sep 17 00:00:00 2001 From: MaysWind Date: Mon, 12 Jun 2023 23:18:07 +0800 Subject: [PATCH] add more supported font size --- src/MobileApp.vue | 168 +-------------------- src/consts/font.js | 48 ++++++ src/lib/settings.js | 2 +- src/lib/ui.mobile.js | 25 +-- src/locales/en.js | 4 +- src/locales/zh_Hans.js | 4 +- src/styles/mobile/font-size-default.css | 30 ++++ src/styles/mobile/font-size-large.css | 64 ++++++++ src/styles/mobile/font-size-small.css | 65 ++++++++ src/styles/mobile/font-size-x-large.css | 64 ++++++++ src/styles/mobile/font-size-xx-large.css | 69 +++++++++ src/styles/mobile/font-size-xxx-large.css | 70 +++++++++ src/styles/mobile/font-size-xxxx-large.css | 70 +++++++++ 13 files changed, 501 insertions(+), 182 deletions(-) create mode 100644 src/consts/font.js create mode 100644 src/styles/mobile/font-size-default.css create mode 100644 src/styles/mobile/font-size-large.css create mode 100644 src/styles/mobile/font-size-small.css create mode 100644 src/styles/mobile/font-size-x-large.css create mode 100644 src/styles/mobile/font-size-xx-large.css create mode 100644 src/styles/mobile/font-size-xxx-large.css create mode 100644 src/styles/mobile/font-size-xxxx-large.css diff --git a/src/MobileApp.vue b/src/MobileApp.vue index 87ca347e..e8c002b9 100644 --- a/src/MobileApp.vue +++ b/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; diff --git a/src/consts/font.js b/src/consts/font.js new file mode 100644 index 00000000..70bcbbef --- /dev/null +++ b/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 +}; diff --git a/src/lib/settings.js b/src/lib/settings.js index e9e6fa99..97fbb25c 100644 --- a/src/lib/settings.js +++ b/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, diff --git a/src/lib/ui.mobile.js b/src/lib/ui.mobile.js index 543705dc..b59f2ab6 100644 --- a/src/lib/ui.mobile.js +++ b/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) { - let fontSizeClass = 'font-default'; +export function setAppFontSize(type) { + const htmlElement = elements('html'); - if (value === 'extraLarge') { - fontSizeClass = 'font-extra-large'; - } else if (value === 'large') { - fontSizeClass = 'font-large'; + for (let i = 0; i < fontConstants.allFontSizeArray.length; i++) { + const fontSizeType = fontConstants.allFontSizeArray[i]; + + 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); } diff --git a/src/locales/en.js b/src/locales/en.js index eabfbf47..5dc50d42 100644 --- a/src/locales/en.js +++ b/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', diff --git a/src/locales/zh_Hans.js b/src/locales/zh_Hans.js index a0be9e2e..1ad13e97 100644 --- a/src/locales/zh_Hans.js +++ b/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': '语言默认', diff --git a/src/styles/mobile/font-size-default.css b/src/styles/mobile/font-size-default.css new file mode 100644 index 00000000..46dcb7e8 --- /dev/null +++ b/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; +} diff --git a/src/styles/mobile/font-size-large.css b/src/styles/mobile/font-size-large.css new file mode 100644 index 00000000..b3a175c8 --- /dev/null +++ b/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; +} diff --git a/src/styles/mobile/font-size-small.css b/src/styles/mobile/font-size-small.css new file mode 100644 index 00000000..ad8d1b0f --- /dev/null +++ b/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; +} diff --git a/src/styles/mobile/font-size-x-large.css b/src/styles/mobile/font-size-x-large.css new file mode 100644 index 00000000..7e7bfbcd --- /dev/null +++ b/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; +} diff --git a/src/styles/mobile/font-size-xx-large.css b/src/styles/mobile/font-size-xx-large.css new file mode 100644 index 00000000..7ece9d14 --- /dev/null +++ b/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; +} diff --git a/src/styles/mobile/font-size-xxx-large.css b/src/styles/mobile/font-size-xxx-large.css new file mode 100644 index 00000000..53187f2b --- /dev/null +++ b/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; +} diff --git a/src/styles/mobile/font-size-xxxx-large.css b/src/styles/mobile/font-size-xxxx-large.css new file mode 100644 index 00000000..ba05fdc6 --- /dev/null +++ b/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; +}