improve text size settings

2023-06-14 00:46:44 +08:00
parent 27f2f9f13a
commit 171b8afa8e
19 changed files with 354 additions and 118 deletions
@@ -263,6 +263,10 @@ i.icon.la, i.icon.las, i.icon.lab {
    font-size: var(--ebk-icon-font-size);
 }

+.f7-icons, .framework7-icons {
+    font-size: var(--ebk-icon-font-size);
+}
+
 .ios .searchbar-icon:after {
    font-size: var(--ebk-searchbar-icon-font-size);
 }
@@ -495,6 +499,10 @@ i.icon.la, i.icon.las, i.icon.lab {
    margin-left: 6px;
 }

+.icon-after-text i.icon {
+    font-size: var(--ebk-icon-after-text-font-size);
+}
+
 .badge.right-bottom-icon {
    margin-left: -12px;
    margin-top: 14px;
@@ -11,7 +11,7 @@
                    <span>{{ hint }}</span>
                    <f7-link id="copy-to-clipboard-icon" ref="copyToClipboardIcon"
                             class="icon-after-text"
-                             icon-only icon-f7="doc_on_doc" icon-size="16px"
+                             icon-only icon-f7="doc_on_doc"
                             v-if="enableCopy"
                    ></f7-link>
                </p>
@@ -40,9 +40,11 @@ const allFontSizeArray = [
 ];

 const defaultFontSize = allFontSize.Default;
+const fontSizePreviewClassNamePrefix = 'preview-';

 export default {
    allFontSize: allFontSize,
    allFontSizeArray: allFontSizeArray,
-    defaultFontSize: defaultFontSize
+    defaultFontSize: defaultFontSize,
+    fontSizePreviewClassNamePrefix: fontSizePreviewClassNamePrefix
 };
@@ -146,3 +146,15 @@ export function setAppFontSize(type) {
        }
    }
 }
+
+export function getFontSizePreviewClassName(type) {
+    for (let i = 0; i < fontConstants.allFontSizeArray.length; i++) {
+        const fontSizeType = fontConstants.allFontSizeArray[i];
+
+        if (fontSizeType.type === type) {
+            return fontConstants.fontSizePreviewClassNamePrefix + fontSizeType.className;
+        }
+    }
+
+    return fontConstants.fontSizePreviewClassNamePrefix + fontConstants.defaultFontSize.className;
+}
@@ -938,7 +938,7 @@ export default {
    'Theme': 'Theme',
    'Light': 'Light',
    'Dark': 'Dark',
-    'Font Size': 'Font Size',
+    'Text Size': 'Text Size',
    'Timezone': 'Timezone',
    'System Default': 'System Default',
    'Language Default': 'Language Default',
@@ -938,7 +938,7 @@ export default {
    'Theme': '主题',
    'Light': '浅色',
    'Dark': '深色',
-    'Font Size': '字体大小',
+    'Text Size': '文字大小',
    'Timezone': '时区',
    'System Default': '系统默认',
    'Language Default': '语言默认',
@@ -16,7 +16,7 @@ import StatisticsSettingsPage from '@/views/mobile/statistics/SettingsPage.vue';
 import StatisticsAccountFilterSettingsPage from '@/views/mobile/statistics/AccountFilterSettingsPage.vue';
 import StatisticsCategoryFilterSettingsPage from '@/views/mobile/statistics/CategoryFilterSettingsPage.vue';

-import FontSizeSettingsPage from '@/views/mobile/settings/FontSizeSettingsPage.vue';
+import TextSizeSettingsPage from '@/views/mobile/settings/TextSizeSettingsPage.vue';

 import SettingsPage from '@/views/mobile/SettingsPage.vue';
 import ApplicationLockPage from '@/views/mobile/ApplicationLockPage.vue';
@@ -198,8 +198,8 @@ const routes = [
        beforeEnter: [checkLogin]
    },
    {
-        path: '/settings/fontsize',
-        async: asyncResolve(FontSizeSettingsPage),
+        path: '/settings/textsize',
+        async: asyncResolve(TextSizeSettingsPage),
        beforeEnter: [checkLogin]
    },
    {
@@ -1,8 +1,53 @@
-:root {
+:root,
+:root .preview-font-size-default {
+    font-size: 14px;
+    --f7-font-size: 14px;
+    --f7-navbar-font-size: 17px;
+    --f7-searchbar-input-font-size: 17px;
+    --f7-searchbar-input-height: 32px;
+    --f7-toolbar-font-size: 17px;
+    --f7-tabbar-icon-size: 28px;
+    --f7-tabbar-icons-height: 50px;
+    --f7-tabbar-label-font-size: 12px;
+    --f7-label-font-size: 12px;
+    --f7-label-height: 16px;
+    --f7-input-font-size: 16px;
+    --f7-input-height: 40px;
+    --f7-button-font-size: 14px;
+    --f7-button-small-font-size: 13px;
+    --f7-button-small-height: 26px;
+    --f7-button-large-font-size: 17px;
+    --f7-chip-font-size: 14px;
+    --f7-block-title-font-size: 16px;
+    --f7-block-title-line-height: 20px;
+    --f7-block-font-size: 17px;
+    --f7-block-footer-font-size: 14px;
+    --f7-card-header-font-size: 17px;
+    --f7-list-group-title-font-size: 17px;
+    --f7-list-group-title-height: 31px;
+    --f7-list-item-header-font-size: 12px;
+    --f7-list-item-title-font-size: 17px;
+    --f7-list-item-text-font-size: 15px;
+    --f7-list-font-size: 17px;
+    --f7-list-item-after-font-size: 17px;
+    --f7-list-item-footer-font-size: 12px;
+    --f7-list-button-font-size: 16px;
+    --f7-list-item-min-height: 44px;
+    --f7-list-item-padding-horizontal: 16px;
+    --f7-list-media-item-padding-vertical: 10px;
+    --f7-treeview-label-font-size: 17px;
+    --f7-swipeout-button-font-size: 16px;
+    --f7-dialog-title-font-size: 18px;
+    --f7-dialog-font-size: 14px;
+    --f7-dialog-button-font-size: 17px;
+    --f7-actions-button-font-size: 20px;
+    --dp-font-size: 17px;
+    --dp-time-font-size: 34px;
    --ebk-icon-font-size: 28px;
    --ebk-icon-text-margin: 2px;
    --ebk-hide-icon-font-size: 18px;
    --ebk-big-icon-button-size: 42px;
+    --ebk-icon-after-text-font-size: 16px;
    --ebk-right-bottom-icon-font-size: 13px;
    --ebk-list-item-checked-icon-font-size: 20px;
    --ebk-searchbar-icon-font-size: 20px;
@@ -23,8 +68,10 @@
    --ebk-pie-chart-toolbox-percentage-font-size: 18px;
    --ebk-pie-chart-toolbox-text-font-size: 16px;
    --ebk-account-list-group-title-height: 36px;
+    --ebk-category-separate-icon-font-size: 18px;
    --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;
+    --ebk-license-content-font-size: 14px;
 }
@@ -1,24 +1,30 @@
-:root.font-size-large {
+:root.font-size-large,
+:root .preview-font-size-large {
    font-size: 15px;
    --f7-font-size: 15px;
    --f7-navbar-font-size: 18px;
    --f7-searchbar-input-font-size: 18px;
+    --f7-searchbar-input-height: 32px;
    --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-label-height: 16px;
    --f7-input-font-size: 17px;
+    --f7-input-height: 40px;
    --f7-button-font-size: 15px;
    --f7-button-small-font-size: 14px;
+    --f7-button-small-height: 26px;
    --f7-button-large-font-size: 18px;
    --f7-chip-font-size: 15px;
    --f7-block-title-font-size: 17px;
+    --f7-block-title-line-height: 20px;
    --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-group-title-height: 31px;
    --f7-list-item-header-font-size: 13px;
    --f7-list-item-title-font-size: 17px;
    --f7-list-item-text-font-size: 16px;
@@ -27,16 +33,21 @@
    --f7-list-item-footer-font-size: 13px;
    --f7-list-button-font-size: 17px;
    --f7-list-item-min-height: 46px;
+    --f7-list-item-padding-horizontal: 16px;
+    --f7-list-media-item-padding-vertical: 10px;
    --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;
+    --dp-font-size: 17px;
+    --dp-time-font-size: 34px;
    --ebk-icon-font-size: 29px;
    --ebk-icon-text-margin: 3px;
    --ebk-hide-icon-font-size: 19px;
    --ebk-big-icon-button-size: 44px;
+    --ebk-icon-after-text-font-size: 17px;
    --ebk-right-bottom-icon-font-size: 13px;
    --ebk-list-item-checked-icon-font-size: 21px;
    --ebk-searchbar-icon-font-size: 20px;
@@ -57,8 +68,10 @@
    --ebk-pie-chart-toolbox-percentage-font-size: 19px;
    --ebk-pie-chart-toolbox-text-font-size: 17px;
    --ebk-account-list-group-title-height: 37px;
+    --ebk-category-separate-icon-font-size: 18px;
    --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;
+    --ebk-license-content-font-size: 15px;
 }
@@ -1,25 +1,30 @@
-:root.font-size-small {
-    --f7-list-item-padding-horizontal: 12px;
-    --f7-list-item-padding-vertical: 8px;
-    --f7-list-media-item-padding-vertical: 8px;
+:root.font-size-small,
+:root .preview-font-size-small {
    font-size: 13px;
    --f7-font-size: 13px;
    --f7-navbar-font-size: 16px;
    --f7-searchbar-input-font-size: 16px;
+    --f7-searchbar-input-height: 32px;
    --f7-toolbar-font-size: 16px;
    --f7-tabbar-icon-size: 28px;
+    --f7-tabbar-icons-height: 50px;
    --f7-tabbar-label-font-size: 12px;
    --f7-label-font-size: 12px;
+    --f7-label-height: 16px;
    --f7-input-font-size: 15px;
+    --f7-input-height: 40px;
    --f7-button-font-size: 13px;
    --f7-button-small-font-size: 12px;
+    --f7-button-small-height: 26px;
    --f7-button-large-font-size: 16px;
    --f7-chip-font-size: 13px;
    --f7-block-title-font-size: 15px;
+    --f7-block-title-line-height: 20px;
    --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-group-title-height: 31px;
    --f7-list-item-header-font-size: 12px;
    --f7-list-item-title-font-size: 15px;
    --f7-list-item-text-font-size: 14px;
@@ -28,16 +33,21 @@
    --f7-list-item-footer-font-size: 12px;
    --f7-list-button-font-size: 15px;
    --f7-list-item-min-height: 40px;
+    --f7-list-item-padding-horizontal: 12px;
+    --f7-list-media-item-padding-vertical: 8px;
    --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;
+    --dp-font-size: 15px;
+    --dp-time-font-size: 30px;
    --ebk-icon-font-size: 28px;
    --ebk-icon-text-margin: 2px;
    --ebk-hide-icon-font-size: 18px;
    --ebk-big-icon-button-size: 42px;
+    --ebk-icon-after-text-font-size: 15px;
    --ebk-right-bottom-icon-font-size: 13px;
    --ebk-list-item-checked-icon-font-size: 20px;
    --ebk-searchbar-icon-font-size: 20px;
@@ -58,8 +68,10 @@
    --ebk-pie-chart-toolbox-percentage-font-size: 18px;
    --ebk-pie-chart-toolbox-text-font-size: 16px;
    --ebk-account-list-group-title-height: 36px;
+    --ebk-category-separate-icon-font-size: 18px;
    --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;
+    --ebk-license-content-font-size: 13px;
 }
@@ -1,24 +1,30 @@
-:root.font-size-x-large {
+:root.font-size-x-large,
+:root .preview-font-size-x-large {
    font-size: 16px;
    --f7-font-size: 16px;
    --f7-navbar-font-size: 19px;
    --f7-searchbar-input-font-size: 19px;
+    --f7-searchbar-input-height: 32px;
    --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-label-height: 16px;
    --f7-input-font-size: 18px;
+    --f7-input-height: 40px;
    --f7-button-font-size: 16px;
    --f7-button-small-font-size: 15px;
+    --f7-button-small-height: 26px;
    --f7-button-large-font-size: 19px;
    --f7-chip-font-size: 16px;
    --f7-block-title-font-size: 18px;
+    --f7-block-title-line-height: 20px;
    --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-group-title-height: 31px;
    --f7-list-item-header-font-size: 14px;
    --f7-list-item-title-font-size: 18px;
    --f7-list-item-text-font-size: 17px;
@@ -27,16 +33,21 @@
    --f7-list-item-footer-font-size: 14px;
    --f7-list-button-font-size: 18px;
    --f7-list-item-min-height: 48px;
+    --f7-list-item-padding-horizontal: 16px;
+    --f7-list-media-item-padding-vertical: 10px;
    --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;
+    --dp-font-size: 18px;
+    --dp-time-font-size: 36px;
    --ebk-icon-font-size: 30px;
    --ebk-icon-text-margin: 3px;
    --ebk-hide-icon-font-size: 20px;
    --ebk-big-icon-button-size: 48px;
+    --ebk-icon-after-text-font-size: 17px;
    --ebk-right-bottom-icon-font-size: 14px;
    --ebk-list-item-checked-icon-font-size: 22px;
    --ebk-searchbar-icon-font-size: 20px;
@@ -57,8 +68,10 @@
    --ebk-pie-chart-toolbox-percentage-font-size: 20px;
    --ebk-pie-chart-toolbox-text-font-size: 18px;
    --ebk-account-list-group-title-height: 38px;
+    --ebk-category-separate-icon-font-size: 18px;
    --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;
+    --ebk-license-content-font-size: 16px;
 }
@@ -1,4 +1,5 @@
-:root.font-size-xx-large {
+:root.font-size-xx-large,
+:root .preview-font-size-xx-large {
    font-size: 17px;
    --f7-font-size: 17px;
    --f7-navbar-font-size: 20px;
@@ -6,7 +7,6 @@
    --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;
@@ -15,6 +15,7 @@
    --f7-input-height: 56px;
    --f7-button-font-size: 18px;
    --f7-button-small-font-size: 15px;
+    --f7-button-small-height: 26px;
    --f7-button-large-font-size: 20px;
    --f7-chip-font-size: 16px;
    --f7-block-title-font-size: 20px;
@@ -32,16 +33,21 @@
    --f7-list-item-footer-font-size: 15px;
    --f7-list-button-font-size: 20px;
    --f7-list-item-min-height: 50px;
+    --f7-list-item-padding-horizontal: 16px;
+    --f7-list-media-item-padding-vertical: 10px;
    --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;
+    --dp-font-size: 20px;
+    --dp-time-font-size: 38px;
    --ebk-icon-font-size: 32px;
    --ebk-icon-text-margin: 4px;
    --ebk-hide-icon-font-size: 24px;
    --ebk-big-icon-button-size: 54px;
+    --ebk-icon-after-text-font-size: 18px;
    --ebk-right-bottom-icon-font-size: 15px;
    --ebk-list-item-checked-icon-font-size: 24px;
    --ebk-searchbar-icon-font-size: 22px;
@@ -62,8 +68,10 @@
    --ebk-pie-chart-toolbox-percentage-font-size: 22px;
    --ebk-pie-chart-toolbox-text-font-size: 20px;
    --ebk-account-list-group-title-height: 40px;
+    --ebk-category-separate-icon-font-size: 20px;
    --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;
+    --ebk-license-content-font-size: 17px;
 }
@@ -1,4 +1,5 @@
-:root.font-size-xxx-large {
+:root.font-size-xxx-large,
+:root .preview-font-size-xxx-large {
    font-size: 19px;
    --f7-font-size: 19px;
    --f7-navbar-font-size: 22px;
@@ -6,7 +7,6 @@
    --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;
@@ -15,8 +15,8 @@
    --f7-input-height: 60px;
    --f7-button-font-size: 20px;
    --f7-button-small-font-size: 17px;
+    --f7-button-small-height: 30px;
    --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;
@@ -33,16 +33,21 @@
    --f7-list-item-footer-font-size: 17px;
    --f7-list-button-font-size: 22px;
    --f7-list-item-min-height: 52px;
+    --f7-list-item-padding-horizontal: 16px;
+    --f7-list-media-item-padding-vertical: 10px;
    --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;
+    --dp-font-size: 22px;
+    --dp-time-font-size: 38px;
    --ebk-icon-font-size: 34px;
    --ebk-icon-text-margin: 4px;
    --ebk-hide-icon-font-size: 26px;
    --ebk-big-icon-button-size: 58px;
+    --ebk-icon-after-text-font-size: 20px;
    --ebk-right-bottom-icon-font-size: 17px;
    --ebk-list-item-checked-icon-font-size: 26px;
    --ebk-searchbar-icon-font-size: 24px;
@@ -63,8 +68,10 @@
    --ebk-pie-chart-toolbox-percentage-font-size: 24px;
    --ebk-pie-chart-toolbox-text-font-size: 22px;
    --ebk-account-list-group-title-height: 42px;
+    --ebk-category-separate-icon-font-size: 20px;
    --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;
+    --ebk-license-content-font-size: 19px;
 }
@@ -1,4 +1,5 @@
-:root.font-size-xxxx-large {
+:root.font-size-xxxx-large,
+:root .preview-font-size-xxxx-large {
    font-size: 21px;
    --f7-font-size: 21px;
    --f7-navbar-font-size: 24px;
@@ -6,7 +7,6 @@
    --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;
@@ -15,8 +15,8 @@
    --f7-input-height: 64px;
    --f7-button-font-size: 22px;
    --f7-button-small-font-size: 19px;
+    --f7-button-small-height: 32px;
    --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;
@@ -33,16 +33,21 @@
    --f7-list-item-footer-font-size: 19px;
    --f7-list-button-font-size: 24px;
    --f7-list-item-min-height: 54px;
+    --f7-list-item-padding-horizontal: 16px;
+    --f7-list-media-item-padding-vertical: 10px;
    --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;
+    --dp-font-size: 22px;
+    --dp-time-font-size: 38px;
    --ebk-icon-font-size: 36px;
    --ebk-icon-text-margin: 4px;
    --ebk-hide-icon-font-size: 28px;
    --ebk-big-icon-button-size: 64px;
+    --ebk-icon-after-text-font-size: 22px;
    --ebk-right-bottom-icon-font-size: 19px;
    --ebk-list-item-checked-icon-font-size: 28px;
    --ebk-searchbar-icon-font-size: 26px;
@@ -63,8 +68,10 @@
    --ebk-pie-chart-toolbox-percentage-font-size: 26px;
    --ebk-pie-chart-toolbox-text-font-size: 24px;
    --ebk-account-list-group-title-height: 44px;
+    --ebk-category-separate-icon-font-size: 22px;
    --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;
+    --ebk-license-content-font-size: 21px;
 }
@@ -15,7 +15,7 @@
                    <div class="swipe-handler" style="z-index: 10"></div>
                    <f7-subnavbar :title="$t('License') "></f7-subnavbar>
                </f7-navbar>
-                <f7-block strong outline>
+                <f7-block strong outline class="license-content">
                    <p>
                        <span :key="num" v-for="(line, num) in licenseLines"
                              :style="{ 'display': line ? 'initial' : 'block', 'padding' : line ? '0' : '0 0 1em 0' }">
@@ -81,4 +81,8 @@ export default {
 .license-popup .subnavbar-title {
    --f7-subnavbar-title-font-size: var(--ebk-license-popup-title-font-size);
 }
+
+.license-content {
+    font-size: var(--ebk-license-content-font-size);
+}
 </style>
@@ -26,7 +26,7 @@
                </select>
            </f7-list-item>

-            <f7-list-item :title="$t('Font Size')" link="/settings/fontsize"></f7-list-item>
+            <f7-list-item :title="$t('Text Size')" link="/settings/textsize"></f7-list-item>

            <f7-list-item
                :key="currentLocale + '_timezone'"
@@ -1,90 +0,0 @@
-<template>
-    <f7-page>
-        <f7-navbar>
-            <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
-            <f7-nav-title :title="$t('Font Size')"></f7-nav-title>
-            <f7-nav-right>
-                <f7-link :text="$t('Done')" @click="setFontSize"></f7-link>
-            </f7-nav-right>
-        </f7-navbar>
-
-        <f7-list strong inset>
-            <f7-list-item>
-                <div class="full-line padding-bottom padding-top-half">
-                    <div class="display-flex justify-content-space-between">
-                        <div class="fontsize-minimum">A</div>
-                        <div class="fontsize-maximum">A</div>
-                        <div class="fontsize-default" :style="'left: ' + (100 / maxFontSizeType - 6) + '%'">{{ $t('Default') }}</div>
-                    </div>
-                    <f7-range
-                        :min="minFontSizeType"
-                        :max="maxFontSizeType"
-                        :step="1"
-                        :scale="true"
-                        :scale-steps="maxFontSizeType"
-                        :scale-sub-steps="1"
-                        :format-scale-label="getFontSizeName"
-                        v-model:value="fontSize"
-                    />
-                </div>
-            </f7-list-item>
-        </f7-list>
-    </f7-page>
-</template>
-
-<script>
-import fontConstants from '@/consts/font.js';
-import { setAppFontSize } from '@/lib/ui.mobile.js';
-
-export default {
-    props: [
-        'f7router'
-    ],
-    data() {
-        return {
-            fontSize: this.$settings.getFontSize()
-        }
-    },
-    computed: {
-        minFontSizeType() {
-            return 0;
-        },
-        maxFontSizeType() {
-            return fontConstants.allFontSizeArray.length - 1;
-        }
-    },
-    methods: {
-        setFontSize() {
-            const router = this.f7router;
-
-            if (this.fontSize !== this.$settings.getFontSize()) {
-                this.$settings.setFontSize(this.fontSize);
-                setAppFontSize(this.fontSize);
-            }
-
-            router.back();
-        },
-        getFontSizeName() {
-            return '';
-        }
-    }
-}
-</script>
-
-<style>
-.fontsize-minimum {
-    font-size: 15px;
-    align-self: end;
-}
-
-.fontsize-maximum {
-    font-size: 24px;
-    align-self: end;
-}
-
-.fontsize-default {
-    font-size: 17px;
-    position: absolute;
-    align-self: end;
-}
-</style>
@@ -0,0 +1,193 @@
+<template>
+    <f7-page>
+        <f7-navbar>
+            <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
+            <f7-nav-title :title="$t('Text Size')"></f7-nav-title>
+            <f7-nav-right>
+                <f7-link :text="$t('Done')" @click="setFontSize"></f7-link>
+            </f7-nav-right>
+        </f7-navbar>
+
+        <f7-block class="no-padding no-margin readonly" :class="fontSizePreviewClassName">
+            <f7-block class="combination-list-wrapper margin-vertical">
+                <f7-accordion-item>
+                    <f7-block-title>
+                        <f7-accordion-toggle>
+                            <f7-list strong inset dividers media-list
+                                     class="transaction-amount-list combination-list-header combination-list-opened">
+                                <f7-list-item>
+                                    <template #title>
+                                        <small>{{ currentLongYearMonth }}</small>
+                                        <small class="transaction-amount-statistics">
+                                            <span class="text-color-red">{{ `+${getDisplayAmount('12345')}` }}</span>
+                                            <span class="text-color-teal">{{ `-${getDisplayAmount('67890')}` }}</span>
+                                        </small>
+                                        <f7-icon class="combination-list-chevron-icon" f7="chevron_up"></f7-icon>
+                                    </template>
+                                </f7-list-item>
+                            </f7-list>
+                        </f7-accordion-toggle>
+                    </f7-block-title>
+                    <f7-accordion-content style="height: auto">
+                        <f7-list strong inset dividers media-list accordion-list class="transaction-info-list combination-list-content">
+                            <f7-list-item chevron-center class="transaction-info" link="#">
+                                <template #media>
+                                    <div class="display-flex flex-direction-column transaction-date">
+                                        <span class="transaction-day full-line flex-direction-column">{{ currentDayOfMonth }}</span>
+                                        <span class="transaction-day-of-week full-line flex-direction-column">{{ currentDayOfWeek }}</span>
+                                    </div>
+                                </template>
+                                <template #inner>
+                                    <div class="display-flex no-padding-horizontal">
+                                        <div class="item-media">
+                                            <div class="transaction-icon display-flex align-items-center">
+                                                <f7-icon f7="pencil_ellipsis_rectangle"></f7-icon>
+                                            </div>
+                                        </div>
+                                        <div class="actual-item-inner">
+                                            <div class="item-title-row">
+                                                <div class="item-title">
+                                                    <div class="transaction-category-name no-padding">
+                                                        <span>{{ $t('Category Name') }}</span>
+                                                    </div>
+                                                </div>
+                                                <div class="item-after">
+                                                    <div class="transaction-amount">
+                                                        <span>{{ getDisplayAmount('12345') }}</span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="item-text">
+                                                <div class="transaction-comment">
+                                                    <span>{{ $t('Description') }}</span>
+                                                </div>
+                                            </div>
+                                            <div class="item-footer">
+                                                <div class="transaction-footer">
+                                                    <span>{{ currentShortTime }}</span>
+                                                    <span>·</span>
+                                                    <span>{{ $t('Account Name') }}</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </template>
+                            </f7-list-item>
+                        </f7-list>
+                    </f7-accordion-content>
+                </f7-accordion-item>
+            </f7-block>
+        </f7-block>
+
+        <f7-block class="fontsize-panel no-padding margin-bottom">
+            <f7-block strong inset class="no-padding-bottom margin-bottom">
+                <div class="full-line padding-bottom padding-top-half">
+                    <div class="display-flex justify-content-space-between">
+                        <div class="fontsize-minimum">A</div>
+                        <div class="fontsize-maximum">A</div>
+                        <div class="fontsize-default" :style="`left: calc(${100 / maxFontSizeType}% - 6px)`">{{ $t('Default') }}</div>
+                    </div>
+                    <f7-range
+                        :min="minFontSizeType"
+                        :max="maxFontSizeType"
+                        :step="1"
+                        :scale="true"
+                        :scale-steps="maxFontSizeType"
+                        :scale-sub-steps="1"
+                        :format-scale-label="getFontSizeName"
+                        v-model:value="fontSize"
+                    />
+                </div>
+            </f7-block>
+        </f7-block>
+    </f7-page>
+</template>
+
+<script>
+import { mapStores } from 'pinia';
+import { useUserStore } from '@/stores/user.js';
+
+import fontConstants from '@/consts/font.js';
+import { getCurrentUnixTime, getDay, getDayOfWeekName } from '@/lib/datetime.js';
+import { setAppFontSize, getFontSizePreviewClassName } from '@/lib/ui.mobile.js';
+
+export default {
+    props: [
+        'f7router'
+    ],
+    data() {
+        const self = this;
+
+        return {
+            currentTime: getCurrentUnixTime(),
+            fontSize: self.$settings.getFontSize()
+        }
+    },
+    computed: {
+        ...mapStores(useUserStore),
+        minFontSizeType() {
+            return 0;
+        },
+        maxFontSizeType() {
+            return fontConstants.allFontSizeArray.length - 1;
+        },
+        fontSizePreviewClassName() {
+            return getFontSizePreviewClassName(this.fontSize);
+        },
+        currentLongYearMonth() {
+            return this.$locale.formatUnixTimeToLongYearMonth(this.userStore, this.currentTime);
+        },
+        currentDayOfMonth() {
+            return getDay(this.currentTime);
+        },
+        currentDayOfWeek() {
+            return this.$t(`datetime.${getDayOfWeekName(this.currentTime)}.short`);
+        },
+        currentShortTime() {
+            return this.$locale.formatUnixTimeToShortTime(this.userStore, this.currentTime);
+        }
+    },
+    methods: {
+        setFontSize() {
+            const router = this.f7router;
+
+            if (this.fontSize !== this.$settings.getFontSize()) {
+                this.$settings.setFontSize(this.fontSize);
+                setAppFontSize(this.fontSize);
+            }
+
+            router.back();
+        },
+        getFontSizeName() {
+            return '';
+        },
+        getDisplayAmount(value) {
+            return this.$locale.getDisplayCurrency(value, this.userStore.currentUserDefaultCurrency);
+        }
+    }
+}
+</script>
+
+<style>
+.fontsize-panel {
+    position: fixed;
+    width: 100%;
+    bottom: 0;
+}
+
+.fontsize-minimum {
+    font-size: 15px;
+    align-self: end;
+}
+
+.fontsize-maximum {
+    font-size: 24px;
+    align-self: end;
+}
+
+.fontsize-default {
+    font-size: 17px;
+    position: absolute;
+    align-self: end;
+}
+</style>
@@ -1047,10 +1047,10 @@ export default {
 </script>

 <style>
-.category-separate-icon {
+.category-separate-icon.icon {
    margin-left: 5px;
    margin-right: 5px;
-    font-size: 18px;
+    font-size: var(--ebk-category-separate-icon-font-size);
    line-height: 16px;
    color: var(--f7-color-gray-tint);
 }