modify style

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

@@ -24,7 +24,7 @@
     --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-group-title-height: 36px;
     --f7-list-item-header-font-size: 12px;
     --f7-list-item-title-font-size: 17px;
     --f7-list-item-text-font-size: 15px;
@@ -58,6 +58,7 @@
     --ebk-smaller-font-size: 10px;
     --ebk-large-footer-font-size: 13px;
     --ebk-sheet-title-font-size: 18px;
+    --ebk-popover-list-group-title-height: 29px;
     --ebk-numpad-value-height: 50px;
     --ebk-numpad-value-small-font-size: 20px;
     --ebk-numpad-value-normal-font-size: 22px;
@@ -72,9 +73,6 @@
     --ebk-pie-chart-toolbox-text-font-size: 16px;
     --ebk-trends-bar-chart-legend-icon-font-size: 18px;
     --ebk-trends-bar-chart-legend-text-font-size: 14px;
-    --ebk-account-list-group-title-height: 36px;
-    --ebk-reconciliation-statement-list-group-title-height: 36px;
-    --ebk-synchronized-settings-list-group-title-height: 36px;
     --ebk-synchronized-settings-list-device-icon-font-size: 19px;
     --ebk-category-separate-icon-font-size: 18px;
     --ebk-transaction-date-width: 25px;

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

@@ -24,7 +24,7 @@
     --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-group-title-height: 37px;
     --f7-list-item-header-font-size: 13px;
     --f7-list-item-title-font-size: 17px;
     --f7-list-item-text-font-size: 16px;
@@ -58,6 +58,7 @@
     --ebk-smaller-font-size: 11px;
     --ebk-large-footer-font-size: 14px;
     --ebk-sheet-title-font-size: 19px;
+    --ebk-popover-list-group-title-height: 30px;
     --ebk-numpad-value-height: 52px;
     --ebk-numpad-value-small-font-size: 21px;
     --ebk-numpad-value-normal-font-size: 23px;
@@ -72,9 +73,6 @@
     --ebk-pie-chart-toolbox-text-font-size: 17px;
     --ebk-trends-bar-chart-legend-icon-font-size: 19px;
     --ebk-trends-bar-chart-legend-text-font-size: 15px;
-    --ebk-account-list-group-title-height: 37px;
-    --ebk-reconciliation-statement-list-group-title-height: 37px;
-    --ebk-synchronized-settings-list-group-title-height: 37px;
     --ebk-synchronized-settings-list-device-icon-font-size: 20px;
     --ebk-category-separate-icon-font-size: 18px;
     --ebk-transaction-date-width: 28px;

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

@@ -24,7 +24,7 @@
     --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-group-title-height: 36px;
     --f7-list-item-header-font-size: 12px;
     --f7-list-item-title-font-size: 15px;
     --f7-list-item-text-font-size: 14px;
@@ -58,6 +58,7 @@
     --ebk-smaller-font-size: 10px;
     --ebk-large-footer-font-size: 13px;
     --ebk-sheet-title-font-size: 18px;
+    --ebk-popover-list-group-title-height: 28px;
     --ebk-numpad-value-height: 50px;
     --ebk-numpad-value-small-font-size: 20px;
     --ebk-numpad-value-normal-font-size: 22px;
@@ -72,9 +73,6 @@
     --ebk-pie-chart-toolbox-text-font-size: 16px;
     --ebk-trends-bar-chart-legend-icon-font-size: 16px;
     --ebk-trends-bar-chart-legend-text-font-size: 12px;
-    --ebk-account-list-group-title-height: 36px;
-    --ebk-reconciliation-statement-list-group-title-height: 36px;
-    --ebk-synchronized-settings-list-group-title-height: 36px;
     --ebk-synchronized-settings-list-device-icon-font-size: 18px;
     --ebk-category-separate-icon-font-size: 18px;
     --ebk-transaction-date-width: 25px;

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

@@ -24,7 +24,7 @@
     --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-group-title-height: 38px;
     --f7-list-item-header-font-size: 14px;
     --f7-list-item-title-font-size: 18px;
     --f7-list-item-text-font-size: 17px;
@@ -58,6 +58,7 @@
     --ebk-smaller-font-size: 12px;
     --ebk-large-footer-font-size: 15px;
     --ebk-sheet-title-font-size: 20px;
+    --ebk-popover-list-group-title-height: 32px;
     --ebk-numpad-value-height: 54px;
     --ebk-numpad-value-small-font-size: 22px;
     --ebk-numpad-value-normal-font-size: 24px;
@@ -72,9 +73,6 @@
     --ebk-pie-chart-toolbox-text-font-size: 18px;
     --ebk-trends-bar-chart-legend-icon-font-size: 20px;
     --ebk-trends-bar-chart-legend-text-font-size: 16px;
-    --ebk-account-list-group-title-height: 38px;
-    --ebk-reconciliation-statement-list-group-title-height: 38px;
-    --ebk-synchronized-settings-list-group-title-height: 38px;
     --ebk-synchronized-settings-list-device-icon-font-size: 21px;
     --ebk-category-separate-icon-font-size: 18px;
     --ebk-transaction-date-width: 30px;

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

@@ -24,7 +24,7 @@
     --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-group-title-height: 40px;
     --f7-list-item-header-font-size: 16px;
     --f7-list-item-title-font-size: 20px;
     --f7-list-item-text-font-size: 17px;
@@ -58,6 +58,7 @@
     --ebk-smaller-font-size: 14px;
     --ebk-large-footer-font-size: 16px;
     --ebk-sheet-title-font-size: 22px;
+    --ebk-popover-list-group-title-height: 34px;
     --ebk-numpad-value-height: 60px;
     --ebk-numpad-value-small-font-size: 22px;
     --ebk-numpad-value-normal-font-size: 26px;
@@ -72,9 +73,6 @@
     --ebk-pie-chart-toolbox-text-font-size: 20px;
     --ebk-trends-bar-chart-legend-icon-font-size: 22px;
     --ebk-trends-bar-chart-legend-text-font-size: 18px;
-    --ebk-account-list-group-title-height: 40px;
-    --ebk-reconciliation-statement-list-group-title-height: 40px;
-    --ebk-synchronized-settings-list-group-title-height: 40px;
     --ebk-synchronized-settings-list-device-icon-font-size: 22px;
     --ebk-category-separate-icon-font-size: 20px;
     --ebk-transaction-date-width: 32px;

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

@@ -58,6 +58,7 @@
     --ebk-smaller-font-size: 16px;
     --ebk-large-footer-font-size: 18px;
     --ebk-sheet-title-font-size: 24px;
+    --ebk-popover-list-group-title-height: 36px;
     --ebk-numpad-value-height: 60px;
     --ebk-numpad-value-small-font-size: 24px;
     --ebk-numpad-value-normal-font-size: 28px;
@@ -72,9 +73,6 @@
     --ebk-pie-chart-toolbox-text-font-size: 22px;
     --ebk-trends-bar-chart-legend-icon-font-size: 24px;
     --ebk-trends-bar-chart-legend-text-font-size: 20px;
-    --ebk-account-list-group-title-height: 42px;
-    --ebk-reconciliation-statement-list-group-title-height: 42px;
-    --ebk-synchronized-settings-list-group-title-height: 42px;
     --ebk-synchronized-settings-list-device-icon-font-size: 24px;
     --ebk-category-separate-icon-font-size: 20px;
     --ebk-transaction-date-width: 36px;

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

@@ -24,7 +24,7 @@
     --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-group-title-height: 44px;
     --f7-list-item-header-font-size: 20px;
     --f7-list-item-title-font-size: 24px;
     --f7-list-item-text-font-size: 21px;
@@ -58,6 +58,7 @@
     --ebk-smaller-font-size: 18px;
     --ebk-large-footer-font-size: 20px;
     --ebk-sheet-title-font-size: 26px;
+    --ebk-popover-list-group-title-height: 38px;
     --ebk-numpad-value-height: 60px;
     --ebk-numpad-value-small-font-size: 26px;
     --ebk-numpad-value-normal-font-size: 26px;
@@ -72,9 +73,6 @@
     --ebk-pie-chart-toolbox-text-font-size: 24px;
     --ebk-trends-bar-chart-legend-icon-font-size: 26px;
     --ebk-trends-bar-chart-legend-text-font-size: 22px;
-    --ebk-account-list-group-title-height: 44px;
-    --ebk-reconciliation-statement-list-group-title-height: 44px;
-    --ebk-synchronized-settings-list-group-title-height: 44px;
     --ebk-synchronized-settings-list-device-icon-font-size: 26px;
     --ebk-category-separate-icon-font-size: 22px;
     --ebk-transaction-date-width: 40px;

src/styles/mobile/global.css

@@ -422,6 +422,10 @@ i.icon.la, i.icon.las, i.icon.lab {
     font-size: var(--f7-toggle-height);
 }
 
+.popover > .popover-inner > .list .list-group-title {
+    --f7-list-group-title-height: var(--ebk-popover-list-group-title-height);
+}
+
 .no-sortable > .sortable-handler {
     display: none;
 }
@@ -519,6 +523,10 @@ i.icon.la, i.icon.las, i.icon.lab {
     margin: 0;
 }
 
+.combination-list-wrapper .list.combination-list-header .item-inner {
+    align-content: center;
+}
+
 .combination-list-wrapper .list.combination-list-header .item-title {
     width: 100%;
     display: flex;

src/views/mobile/accounts/EditPage.vue

@@ -763,10 +763,6 @@ init();
     text-overflow: ellipsis;
 }
 
-.subaccount-edit-list {
-    --f7-list-group-title-height: 40px;
-}
-
 .subaccount-delete-button {
     margin-left: auto;
 }

src/views/mobile/accounts/ListPage.vue

@@ -495,7 +495,6 @@ init();
 }
 
 .account-list {
-    --f7-list-group-title-height: var(--ebk-account-list-group-title-height);
     --f7-list-item-footer-font-size: var(--ebk-large-footer-font-size);
 }
 

src/views/mobile/accounts/ReconciliationStatementPage.vue

@@ -471,8 +471,8 @@ init();
     align-content: center;
     padding-top: 0;
     padding-bottom: 0;
-    height: var(--ebk-reconciliation-statement-list-group-title-height);
+    height: var(--f7-list-group-title-height);
-    line-height: var(--ebk-reconciliation-statement-list-group-title-height);
+    line-height: var(--f7-list-group-title-height);
     background-color: var(--f7-list-group-title-bg-color);
 }
 

src/views/mobile/settings/AccountFilterSettingsPage.vue

@@ -15,13 +15,11 @@
                 <f7-accordion-item>
                     <f7-block-title>
                         <f7-accordion-toggle>
-                            <f7-list strong inset dividers media-list
+                            <f7-list strong inset dividers
                                      class="combination-list-header combination-list-opened">
-                                <f7-list-item>
+                                <f7-list-item group-title>
-                                    <template #title>
+                                    <small>Account Category</small>
-                                        <span>Account Category</span>
+                                    <f7-icon class="combination-list-chevron-icon" f7="chevron_up"></f7-icon>
-                                        <f7-icon class="combination-list-chevron-icon" f7="chevron_up"></f7-icon>
-                                    </template>
                                 </f7-list-item>
                             </f7-list>
                         </f7-accordion-toggle>
@@ -54,14 +52,12 @@
                                    @accordion:close="collapseStates[accountCategory.category].opened = false">
                     <f7-block-title>
                         <f7-accordion-toggle>
-                            <f7-list strong inset dividers media-list
+                            <f7-list strong inset dividers
                                      class="combination-list-header"
                                      :class="collapseStates[accountCategory.category].opened ? 'combination-list-opened' : 'combination-list-closed'">
-                                <f7-list-item>
+                                <f7-list-item group-title>
-                                    <template #title>
+                                    <small>{{ tt(accountCategory.name) }}</small>
-                                        <span>{{ tt(accountCategory.name) }}</span>
+                                    <f7-icon class="combination-list-chevron-icon" :f7="collapseStates[accountCategory.category].opened ? 'chevron_up' : 'chevron_down'"></f7-icon>
-                                        <f7-icon class="combination-list-chevron-icon" :f7="collapseStates[accountCategory.category].opened ? 'chevron_up' : 'chevron_down'"></f7-icon>
-                                    </template>
                                 </f7-list-item>
                             </f7-list>
                         </f7-accordion-toggle>

src/views/mobile/settings/ApplicationCloudSyncSettingsPage.vue

@@ -192,10 +192,6 @@ init();
 </script>
 
 <style>
-.synchronized-settings-list {
-    --f7-list-group-title-height: var(--ebk-synchronized-settings-list-group-title-height);
-}
-
 .synchronized-settings-device-icon {
     font-size: var(--ebk-synchronized-settings-list-device-icon-font-size);
 }

src/views/mobile/settings/CategoryFilterSettingsPage.vue

@@ -15,13 +15,11 @@
                 <f7-accordion-item>
                     <f7-block-title>
                         <f7-accordion-toggle>
-                            <f7-list strong inset dividers media-list
+                            <f7-list strong inset dividers
                                      class="combination-list-header combination-list-opened">
-                                <f7-list-item>
+                                <f7-list-item group-title>
-                                    <template #title>
+                                    <small>Transaction Category</small>
-                                        <span>Transaction Category</span>
+                                    <f7-icon class="combination-list-chevron-icon" f7="chevron_up"></f7-icon>
-                                        <f7-icon class="combination-list-chevron-icon" f7="chevron_up"></f7-icon>
-                                    </template>
                                 </f7-list-item>
                             </f7-list>
                         </f7-accordion-toggle>
@@ -59,14 +57,12 @@
                                @accordion:close="collapseStates[categoryType.type].opened = false">
                 <f7-block-title>
                     <f7-accordion-toggle>
-                        <f7-list strong inset dividers media-list
+                        <f7-list strong inset dividers
                                  class="combination-list-header"
                                  :class="collapseStates[categoryType.type].opened ? 'combination-list-opened' : 'combination-list-closed'">
-                            <f7-list-item>
+                            <f7-list-item group-title>
-                                <template #title>
+                                <small>{{ getCategoryTypeName(categoryType.type) }}</small>
-                                    <span>{{ getCategoryTypeName(categoryType.type) }}</span>
+                                <f7-icon class="combination-list-chevron-icon" :f7="collapseStates[categoryType.type].opened ? 'chevron_up' : 'chevron_down'"></f7-icon>
-                                    <f7-icon class="combination-list-chevron-icon" :f7="collapseStates[categoryType.type].opened ? 'chevron_up' : 'chevron_down'"></f7-icon>
-                                </template>
                             </f7-list-item>
                         </f7-list>
                     </f7-accordion-toggle>

src/views/mobile/settings/TransactionTagFilterSettingsPage.vue

@@ -13,13 +13,11 @@
             <f7-accordion-item>
                 <f7-block-title>
                     <f7-accordion-toggle>
-                        <f7-list strong inset dividers media-list
+                        <f7-list strong inset dividers
                                  class="combination-list-header combination-list-opened">
-                            <f7-list-item>
+                            <f7-list-item group-title>
-                                <template #title>
+                                <small>Tags</small>
-                                    <span>Tags</span>
+                                <f7-icon class="combination-list-chevron-icon" f7="chevron_up"></f7-icon>
-                                    <f7-icon class="combination-list-chevron-icon" f7="chevron_up"></f7-icon>
-                                </template>
                             </f7-list-item>
                         </f7-list>
                     </f7-accordion-toggle>
@@ -58,14 +56,12 @@
                                @accordion:close="collapseStates['default'].opened = false">
                 <f7-block-title>
                     <f7-accordion-toggle>
-                        <f7-list strong inset dividers media-list
+                        <f7-list strong inset dividers
                                  class="combination-list-header"
                                  :class="collapseStates['default'].opened ? 'combination-list-opened' : 'combination-list-closed'">
-                            <f7-list-item>
+                            <f7-list-item group-title>
-                                <template #title>
+                                <small>{{ tt('Tags') }}</small>
-                                    <span>{{ tt('Tags') }}</span>
+                                <f7-icon class="combination-list-chevron-icon" :f7="collapseStates['default'].opened ? 'chevron_up' : 'chevron_down'"></f7-icon>
-                                    <f7-icon class="combination-list-chevron-icon" :f7="collapseStates['default'].opened ? 'chevron_up' : 'chevron_down'"></f7-icon>
-                                </template>
                             </f7-list-item>
                         </f7-list>
                     </f7-accordion-toggle>

src/views/mobile/statistics/TransactionPage.vue

@@ -18,7 +18,9 @@
                     @popover:open="scrollPopoverToSelectedItem">
             <f7-list dividers>
                 <f7-list-group>
-                    <f7-list-item group-title :title="tt('Categorical Analysis')" />
+                    <f7-list-item group-title>
+                        <small>{{ tt('Categorical Analysis') }}</small>
+                    </f7-list-item>
                     <f7-list-item :title="tt(dataType.name)"
                                   :class="{ 'list-item-selected': analysisType === StatisticsAnalysisType.CategoricalAnalysis && query.chartDataType === dataType.type }"
                                   :key="dataType.type"
@@ -30,7 +32,9 @@
                     </f7-list-item>
                 </f7-list-group>
                 <f7-list-group>
-                    <f7-list-item group-title :title="tt('Trend Analysis')" />
+                    <f7-list-item group-title>
+                        <small>{{ tt('Trend Analysis') }}</small>
+                    </f7-list-item>
                     <f7-list-item :title="tt(dataType.name)"
                                   :class="{ 'list-item-selected': analysisType === StatisticsAnalysisType.TrendAnalysis && query.chartDataType === dataType.type }"
                                   :key="dataType.type"

src/views/mobile/transactions/ListPage.vue

@@ -477,7 +477,9 @@
         <f7-popover class="more-popover-menu"
                     v-model:opened="showMorePopover">
             <f7-list dividers>
-                <f7-list-item group-title :title="tt('Type')" />
+                <f7-list-item group-title>
+                    <small>{{ tt('Type') }}</small>
+                </f7-list-item>
                 <f7-list-item :class="{ 'list-item-selected': query.type === 0 }" :title="tt('All')" @click="changeTypeFilter(0)">
                     <template #after>
                         <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.type === 0"></f7-icon>
@@ -504,7 +506,9 @@
                     </template>
                 </f7-list-item>
 
-                <f7-list-item group-title :title="tt('Amount')" />
+                <f7-list-item group-title>
+                    <small>{{ tt('Amount') }}</small>
+                </f7-list-item>
                 <f7-list-item :class="{ 'list-item-selected': !query.amountFilter }" :title="tt('All')" @click="changeAmountFilter('')">
                     <template #after>
                         <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="!query.amountFilter"></f7-icon>
@@ -521,7 +525,9 @@
                     </template>
                 </f7-list-item>
 
-                <f7-list-item group-title :title="tt('Tags')" />
+                <f7-list-item group-title>
+                    <small>{{ tt('Tags') }}</small>
+                </f7-list-item>
                 <f7-list-item :class="{ 'list-item-selected': !query.tagIds }" :title="tt('All')" @click="changeTagFilter('')">
                     <template #after>
                         <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="!query.tagIds"></f7-icon>