diff --git a/src/Mobile.vue b/src/Mobile.vue
index 1bf1fa36..d8e62e1c 100644
--- a/src/Mobile.vue
+++ b/src/Mobile.vue
@@ -190,6 +190,10 @@ i.icon.la, i.icon.las, i.icon.lab {
     color: var(--f7-theme-color);
 }
 
+.card-header-content {
+    opacity: 0.6;
+}
+
 .nested-list-item .item-title {
     width: 100%;
 }
diff --git a/src/views/mobile/Home.vue b/src/views/mobile/Home.vue
index deb4b218..a70c8d98 100644
--- a/src/views/mobile/Home.vue
+++ b/src/views/mobile/Home.vue
@@ -7,12 +7,12 @@
         <f7-card class="home-summary-card" :class="{ 'skeleton-text': loading }">
             <f7-card-header class="display-block" style="padding-top: 120px;">
                 <p class="no-margin">
-                    <span :style="{ opacity: 0.6 }" v-if="loading">
+                    <span class="card-header-content" v-if="loading">
                         <span class="home-summary-month">MM</span>
                         <span>·</span>
                         <small>Expense</small>
                     </span>
-                    <span :style="{ opacity: 0.6 }" v-else-if="!loading">
+                    <span class="card-header-content" v-else-if="!loading">
                         <span class="home-summary-month">{{ dateRange.thisMonth.startTime | moment('MMMM') | monthNameLocalizedKey | localized }}</span>
                         <span>·</span>
                         <small>{{ $t('Expense') }}</small>
diff --git a/src/views/mobile/Signup.vue b/src/views/mobile/Signup.vue
index 8f7abbf6..c0fa742d 100644
--- a/src/views/mobile/Signup.vue
+++ b/src/views/mobile/Signup.vue
@@ -133,7 +133,7 @@
                 </f7-navbar>
                 <f7-card v-for="(categories, categoryType) in presetCategories" :key="categoryType">
                     <f7-card-header>
-                        <small :style="{ opacity: 0.6 }">
+                        <small class="card-header-content">
                             <span>{{ categoryType | categoryTypeName($constants.category.allCategoryTypes) | localized }}</span>
                         </small>
                     </f7-card-header>
diff --git a/src/views/mobile/accounts/List.vue b/src/views/mobile/accounts/List.vue
index f4c2a5df..1c10c6cd 100644
--- a/src/views/mobile/accounts/List.vue
+++ b/src/views/mobile/accounts/List.vue
@@ -13,8 +13,8 @@
         <f7-card class="account-overview-card" :class="{ 'skeleton-text': loading }">
             <f7-card-header class="display-block" style="padding-top: 120px;">
                 <p class="no-margin">
-                    <small :style="{ opacity: 0.6 }" v-if="loading">Net assets</small>
-                    <small :style="{ opacity: 0.6 }" v-else-if="!loading">{{ $t('Net assets') }}</small>
+                    <small class="card-header-content" v-if="loading">Net assets</small>
+                    <small class="card-header-content" v-else-if="!loading">{{ $t('Net assets') }}</small>
                 </p>
                 <p class="no-margin">
                     <span class="net-assets" v-if="loading">0.00 USD</span>
@@ -40,7 +40,7 @@
 
         <f7-card class="skeleton-text" v-if="loading">
             <f7-card-header>
-                <small style="opacity: 0.6;">Account Category</small>
+                <small class="card-header-content">Account Category</small>
             </f7-card-header>
             <f7-card-content class="no-safe-areas" :padding="false">
                 <f7-list>
@@ -58,7 +58,7 @@
 
         <f7-card class="skeleton-text" v-if="loading">
             <f7-card-header>
-                <small style="opacity: 0.6;">Account Category 2</small>
+                <small class="card-header-content">Account Category 2</small>
             </f7-card-header>
             <f7-card-content class="no-safe-areas" :padding="false">
                 <f7-list>
@@ -84,7 +84,7 @@
 
         <f7-card class="skeleton-text" v-if="loading">
             <f7-card-header>
-                <small style="opacity: 0.6;">Account Category 3</small>
+                <small class="card-header-content">Account Category 3</small>
             </f7-card-header>
             <f7-card-content class="no-safe-areas" :padding="false">
                 <f7-list>
@@ -118,7 +118,7 @@
 
         <f7-card v-for="accountCategory in allAccountCategories" :key="accountCategory.id" v-show="(showHidden && hasAccount(accountCategory, false)) || hasAccount(accountCategory, true)">
             <f7-card-header>
-                <small :style="{ opacity: 0.6 }">
+                <small class="card-header-content">
                     <span>{{ $t(accountCategory.name) }}</span>
                     <span style="margin-left: 10px">{{ accountCategoryTotalBalance(accountCategory) | currency(defaultCurrency) }}</span>
                 </small>
diff --git a/src/views/mobile/categories/Preset.vue b/src/views/mobile/categories/Preset.vue
index 5c8340fc..92add927 100644
--- a/src/views/mobile/categories/Preset.vue
+++ b/src/views/mobile/categories/Preset.vue
@@ -11,7 +11,7 @@
 
         <f7-card v-for="categoryInfo in allCategories" :key="categoryInfo.type">
             <f7-card-header>
-                <small :style="{ opacity: 0.6 }">
+                <small class="card-header-content">
                     <span>{{ categoryInfo.type | categoryTypeName($constants.category.allCategoryTypes) | localized }}</span>
                 </small>
             </f7-card-header>
diff --git a/src/views/mobile/statistics/AccountFilterSettings.vue b/src/views/mobile/statistics/AccountFilterSettings.vue
index 34d2c49b..7b2d9963 100644
--- a/src/views/mobile/statistics/AccountFilterSettings.vue
+++ b/src/views/mobile/statistics/AccountFilterSettings.vue
@@ -11,7 +11,7 @@
 
         <f7-card class="skeleton-text" v-if="loading">
             <f7-card-header>
-                <small :style="{ opacity: 0.6 }">
+                <small class="card-header-content">
                     <span>Account Category</span>
                 </small>
             </f7-card-header>
@@ -27,7 +27,7 @@
 
         <f7-card class="skeleton-text" v-if="loading">
             <f7-card-header>
-                <small :style="{ opacity: 0.6 }">
+                <small class="card-header-content">
                     <span>Account Category 2</span>
                 </small>
             </f7-card-header>
@@ -47,7 +47,7 @@
         <f7-block class="no-padding no-margin" v-if="!loading">
             <f7-card v-for="accountCategory in allAccountCategories" :key="accountCategory.id" v-show="hasShownAccount(accountCategory)">
                 <f7-card-header>
-                    <small :style="{ opacity: 0.6 }">
+                    <small class="card-header-content">
                         <span>{{ $t(accountCategory.name) }}</span>
                     </small>
                 </f7-card-header>
diff --git a/src/views/mobile/statistics/CategoryFilterSettings.vue b/src/views/mobile/statistics/CategoryFilterSettings.vue
index 6b0f7e42..fa11095a 100644
--- a/src/views/mobile/statistics/CategoryFilterSettings.vue
+++ b/src/views/mobile/statistics/CategoryFilterSettings.vue
@@ -11,7 +11,7 @@
 
         <f7-card class="skeleton-text" v-if="loading">
             <f7-card-header>
-                <small :style="{ opacity: 0.6 }">
+                <small class="card-header-content">
                     <span>Transaction Category</span>
                 </small>
             </f7-card-header>
@@ -52,7 +52,7 @@
         <f7-block class="no-padding no-margin" v-if="!loading">
             <f7-card v-for="(categories, categoryType) in allTransactionCategories" :key="categoryType">
                 <f7-card-header>
-                    <small :style="{ opacity: 0.6 }">
+                    <small class="card-header-content">
                         <span>{{ categoryType | categoryTypeName($constants.category.allCategoryTypes) | localized }}</span>
                     </small>
                 </f7-card-header>
diff --git a/src/views/mobile/transactions/List.vue b/src/views/mobile/transactions/List.vue
index b3fd6a60..a11b76c9 100644
--- a/src/views/mobile/transactions/List.vue
+++ b/src/views/mobile/transactions/List.vue
@@ -42,7 +42,7 @@
         <f7-card class="skeleton-text" v-if="loading">
             <f7-card-header>
                 <div class="full-line">
-                    <small :style="{ opacity: 0.6 }">YYYY-MM</small>
+                    <small class="card-header-content">YYYY-MM</small>
                     <small class="transaction-amount-statistics">
                         <span>0.00 USD</span>
                         <span>0.00 USD</span>
@@ -136,7 +136,7 @@
                                @accordion:close="collapseTransactionMonthList(transactionMonthList, true)">
                 <f7-card-header>
                     <f7-accordion-toggle class="full-line">
-                        <small :style="{ opacity: 0.6 }">
+                        <small class="card-header-content">
                             <span>{{ transactionMonthList.yearMonth | moment($t('format.yearMonth.long')) }}</span>
                         </small>
                         <small class="transaction-amount-statistics" v-if="transactionMonthList.totalAmount">