modify style
This commit is contained in:
MaysWind
@@ -227,6 +227,9 @@ const vuetify = createVuetify({
|
||||
VSnackbar: {
|
||||
timeout: 3000
|
||||
},
|
||||
VTable: {
|
||||
hover: true
|
||||
},
|
||||
VTabs: {
|
||||
color: 'primary',
|
||||
VSlideGroup: {
|
||||
|
||||
@@ -109,6 +109,30 @@ input[type=number] {
|
||||
th {
|
||||
background: rgb(var(--v-table-header-background)) !important;
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background: #fcfcfc;
|
||||
}
|
||||
|
||||
tr.even-row {
|
||||
background: #fcfcfc;
|
||||
}
|
||||
|
||||
tbody.has-bottom-border > tr:last-child > td {
|
||||
border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
}
|
||||
}
|
||||
|
||||
.v-theme--dark {
|
||||
.v-table {
|
||||
tr:nth-child(even) {
|
||||
background: #161616;
|
||||
}
|
||||
|
||||
tr.even-row {
|
||||
background: #161616;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-bottom-icon .v-badge__badge {
|
||||
@@ -126,6 +150,10 @@ input[type=number] {
|
||||
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
||||
}
|
||||
|
||||
.text-caption {
|
||||
color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
|
||||
}
|
||||
|
||||
.v-label {
|
||||
&:not(.v-field-label--floating) {
|
||||
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
||||
|
||||
@@ -5,26 +5,26 @@
|
||||
<v-card-text>
|
||||
<v-row no-gutters>
|
||||
<v-col cols="12" md="2">
|
||||
<span class="text-subtitle-1">{{ $t('Version') }}</span>
|
||||
<span class="text-body-1">{{ $t('Version') }}</span>
|
||||
</v-col>
|
||||
<v-col cols="12" md="10" class="mb-6">
|
||||
<span class="text-subtitle-1">{{ version }}</span>
|
||||
<span class="text-body-1">{{ version }}</span>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row no-gutters v-if="buildTime">
|
||||
<v-col cols="12" md="2">
|
||||
<span class="text-subtitle-1">{{ $t('Build Time') }}</span>
|
||||
<span class="text-body-1">{{ $t('Build Time') }}</span>
|
||||
</v-col>
|
||||
<v-col cols="12" md="10" class="mb-6">
|
||||
<span class="text-subtitle-1">{{ buildTime }}</span>
|
||||
<span class="text-body-1">{{ buildTime }}</span>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row no-gutters>
|
||||
<v-col cols="12" md="2">
|
||||
<span class="text-subtitle-1">{{ $t('Official Website') }}</span>
|
||||
<span class="text-body-1">{{ $t('Official Website') }}</span>
|
||||
</v-col>
|
||||
<v-col cols="12" md="10" class="mb-6">
|
||||
<a class="text-subtitle-1" href="https://github.com/mayswind/ezbookkeeping" target="_blank">
|
||||
<a class="text-body-1" href="https://github.com/mayswind/ezbookkeeping" target="_blank">
|
||||
https://github.com/mayswind/ezbookkeeping
|
||||
</a>
|
||||
</v-col>
|
||||
|
||||
@@ -6,24 +6,24 @@
|
||||
<div>
|
||||
<div class="mx-6 my-4">
|
||||
<small>{{ $t('Net assets') }}</small>
|
||||
<p class="text-subtitle-1 text-income mb-2">
|
||||
<p class="text-body-1 text-income mt-1 mb-3">
|
||||
<span v-if="!loading">{{ netAssets }}</span>
|
||||
<span v-else-if="loading">
|
||||
<v-skeleton-loader class="accounts-summary-skeleton mt-2 mb-4" type="text" :loading="true"></v-skeleton-loader>
|
||||
<v-skeleton-loader class="accounts-summary-skeleton mt-3 mb-4" type="text" :loading="true"></v-skeleton-loader>
|
||||
</span>
|
||||
</p>
|
||||
<small>{{ $t('Total liabilities') }}</small>
|
||||
<p class="text-subtitle-1 text-expense mb-2">
|
||||
<p class="text-body-1 text-expense mt-1 mb-3">
|
||||
<span v-if="!loading">{{ totalLiabilities }}</span>
|
||||
<span v-else-if="loading">
|
||||
<v-skeleton-loader class="accounts-summary-skeleton mt-2 mb-4" type="text" :loading="true"></v-skeleton-loader>
|
||||
<v-skeleton-loader class="accounts-summary-skeleton mt-3 mb-4" type="text" :loading="true"></v-skeleton-loader>
|
||||
</span>
|
||||
</p>
|
||||
<small>{{ $t('Total assets') }}</small>
|
||||
<p class="text-subtitle-1">
|
||||
<p class="text-body-1 mt-1">
|
||||
<span v-if="!loading">{{ totalAssets }}</span>
|
||||
<span v-else-if="loading">
|
||||
<v-skeleton-loader class="accounts-summary-skeleton mt-2 mb-6" type="text" :loading="true"></v-skeleton-loader>
|
||||
<v-skeleton-loader class="accounts-summary-skeleton mt-3 mb-5" type="text" :loading="true"></v-skeleton-loader>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
@@ -116,10 +116,10 @@
|
||||
<v-card border class="card-title-with-bg account-card mb-8 h-auto" v-if="showHidden || !element.hidden">
|
||||
<template #title>
|
||||
<div class="account-title d-flex align-baseline">
|
||||
<ItemIcon icon-type="account" :icon-id="element.icon"
|
||||
<ItemIcon size="1.5rem" icon-type="account" :icon-id="element.icon"
|
||||
:color="element.color" :hidden-status="element.hidden" />
|
||||
<span class="account-name ml-3">{{ element.name }}</span>
|
||||
<small class="account-currency ml-3">
|
||||
<span class="account-name ml-2">{{ element.name }}</span>
|
||||
<small class="account-currency ml-2">
|
||||
{{ accountCurrency(element) }}
|
||||
</small>
|
||||
<v-spacer/>
|
||||
@@ -147,9 +147,9 @@
|
||||
<v-btn :key="subAccount.id" :value="subAccount.id"
|
||||
v-for="subAccount in element.subAccounts"
|
||||
v-show="showHidden || !subAccount.hidden">
|
||||
<ItemIcon icon-type="account" :icon-id="subAccount.icon"
|
||||
<ItemIcon size="1.5rem" icon-type="account" :icon-id="subAccount.icon"
|
||||
:color="subAccount.color" :hidden-status="subAccount.hidden" />
|
||||
<span class="ml-3">{{ subAccount.name }}</span>
|
||||
<span class="ml-2">{{ subAccount.name }}</span>
|
||||
</v-btn>
|
||||
</v-btn-toggle>
|
||||
</div>
|
||||
@@ -521,7 +521,13 @@ export default {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.account-card > .v-card-item {
|
||||
padding-top: 0.875rem;
|
||||
padding-bottom: 0.875rem;
|
||||
}
|
||||
|
||||
.account-card .account-title {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem !important;
|
||||
}
|
||||
|
||||
@@ -545,7 +551,7 @@ export default {
|
||||
}
|
||||
|
||||
.account-card .account-balance {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.25rem;
|
||||
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -6,19 +6,19 @@
|
||||
<div>
|
||||
<div class="mx-6 my-4">
|
||||
<small>{{ $t('Data source') }}</small>
|
||||
<p class="text-subtitle-1 mb-2">
|
||||
<p class="text-body-1 mt-1 mb-3">
|
||||
<a tabindex="-1" target="_blank" :href="exchangeRatesData.referenceUrl" v-if="!loading && exchangeRatesData && exchangeRatesData.referenceUrl">{{ exchangeRatesData.dataSource }}</a>
|
||||
<span v-else-if="!loading && exchangeRatesData && !exchangeRatesData.referenceUrl">{{ exchangeRatesData.dataSource }}</span>
|
||||
<span v-else-if="!loading && !exchangeRatesData">{{ $t('None') }}</span>
|
||||
<span v-else-if="loading">
|
||||
<v-skeleton-loader class="exchange-rates-summary-skeleton mt-2 mb-4" type="text" :loading="true"></v-skeleton-loader>
|
||||
<v-skeleton-loader class="exchange-rates-summary-skeleton mt-3 mb-4" type="text" :loading="true"></v-skeleton-loader>
|
||||
</span>
|
||||
</p>
|
||||
<small v-if="exchangeRatesDataUpdateTime">{{ $t('Last Updated') }}</small>
|
||||
<p class="text-subtitle-1" v-if="exchangeRatesDataUpdateTime">
|
||||
<p class="text-body-1 mt-1" v-if="exchangeRatesDataUpdateTime">
|
||||
<span v-if="!loading">{{ exchangeRatesDataUpdateTime }}</span>
|
||||
<span v-if="loading">
|
||||
<v-skeleton-loader class="exchange-rates-summary-skeleton mt-2 mb-6" type="text" :loading="true"></v-skeleton-loader>
|
||||
<v-skeleton-loader class="exchange-rates-summary-skeleton mt-3 mb-5" type="text" :loading="true"></v-skeleton-loader>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
@@ -86,10 +86,10 @@
|
||||
|
||||
<tr :key="exchangeRate.currencyCode" v-for="exchangeRate in availableExchangeRates">
|
||||
<td>
|
||||
<span>{{ exchangeRate.currencyDisplayName }}</span>
|
||||
<small class="smaller ml-1">{{ exchangeRate.currencyCode }}</small>
|
||||
<span class="text-sm">{{ exchangeRate.currencyDisplayName }}</span>
|
||||
<span class="text-caption ml-1">{{ exchangeRate.currencyCode }}</span>
|
||||
</td>
|
||||
<td class="text-right">{{ getDisplayConvertedAmount(exchangeRate) }}</td>
|
||||
<td class="text-sm text-right">{{ getDisplayConvertedAmount(exchangeRate) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<v-btn class="ml-3" color="default" variant="outlined"
|
||||
:disabled="loading || updating || hasEditingTag" @click="add">{{ $t('Add') }}</v-btn>
|
||||
<v-btn class="ml-3" color="primary" variant="tonal"
|
||||
:disabled="loading" @click="saveSortResult"
|
||||
:disabled="loading || updating || hasEditingTag" @click="saveSortResult"
|
||||
v-if="displayOrderModified">{{ $t('Save Display Order') }}</v-btn>
|
||||
<v-btn density="compact" color="default" variant="text"
|
||||
class="ml-2" :icon="true" :disabled="loading || updating || hasEditingTag"
|
||||
@@ -61,19 +61,20 @@
|
||||
item-key="id"
|
||||
handle=".drag-handle"
|
||||
ghost-class="dragging-item"
|
||||
:class="{ 'has-bottom-border': newTag }"
|
||||
:disabled="noAvailableTag"
|
||||
v-model="tags"
|
||||
@change="onMove">
|
||||
<template #item="{ element }">
|
||||
<tr v-show="showHidden || !element.hidden">
|
||||
<tr class="text-sm" v-if="showHidden || !element.hidden">
|
||||
<td>
|
||||
<div class="d-flex align-center" v-if="editingTag.id !== element.id">
|
||||
<v-badge class="right-bottom-icon" color="secondary"
|
||||
location="bottom right" offset-x="8" :icon="icons.hide"
|
||||
v-if="element.hidden">
|
||||
<v-icon size="24" start :icon="icons.tag"/>
|
||||
<v-icon size="20" start :icon="icons.tag"/>
|
||||
</v-badge>
|
||||
<v-icon size="24" start :icon="icons.tag" v-else-if="!element.hidden"/>
|
||||
<v-icon size="20" start :icon="icons.tag" v-else-if="!element.hidden"/>
|
||||
{{ element.name }}
|
||||
</div>
|
||||
<v-text-field
|
||||
@@ -91,9 +92,9 @@
|
||||
<v-badge class="right-bottom-icon" color="secondary"
|
||||
location="bottom right" offset-x="8" :icon="icons.hide"
|
||||
v-if="element.hidden">
|
||||
<v-icon size="24" start :icon="icons.tag"/>
|
||||
<v-icon size="20" start :icon="icons.tag"/>
|
||||
</v-badge>
|
||||
<v-icon size="24" start :icon="icons.tag" v-else-if="!element.hidden"/>
|
||||
<v-icon size="20" start :icon="icons.tag" v-else-if="!element.hidden"/>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</td>
|
||||
@@ -151,14 +152,14 @@
|
||||
</draggable-list>
|
||||
|
||||
<tbody v-if="newTag">
|
||||
<tr>
|
||||
<tr class="text-sm" :class="{ 'even-row': availableTagCount & 1 === 1}">
|
||||
<td>
|
||||
<v-text-field type="text" color="primary" clearable
|
||||
density="compact" variant="underlined"
|
||||
:disabled="loading || updating" :placeholder="$t('Tag Title')"
|
||||
v-model="newTag.name" @keyup.enter="save(newTag)">
|
||||
<template #prepend>
|
||||
<v-icon size="24" start :icon="icons.tag"/>
|
||||
<v-icon size="20" start :icon="icons.tag"/>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</td>
|
||||
@@ -462,15 +463,16 @@ export default {
|
||||
}
|
||||
|
||||
.transaction-tags-table .v-text-field.v-text-field--plain-underlined .v-input__prepend {
|
||||
padding-top: 10px;
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.transaction-tags-table tr:last-child .v-text-field.v-text-field--plain-underlined .v-input__prepend {
|
||||
padding-top: 9px;
|
||||
padding-top: 11px;
|
||||
}
|
||||
|
||||
.transaction-tags-table .v-text-field .v-field__input {
|
||||
padding-top: 2px;
|
||||
font-size: 0.875rem;
|
||||
padding-top: 1px;
|
||||
color: rgba(var(--v-theme-on-surface));
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,10 +3,10 @@
|
||||
<v-col cols="12">
|
||||
<v-card :title="$t('Application Lock')">
|
||||
<v-card-text class="pb-0">
|
||||
<p class="text-subtitle-1 font-weight-semibold" v-if="!isEnableApplicationLock">
|
||||
<p class="text-body-1 font-weight-semibold" v-if="!isEnableApplicationLock">
|
||||
{{ $t('Application lock is not enabled') }}
|
||||
</p>
|
||||
<p class="text-subtitle-1" v-if="isEnableApplicationLock">
|
||||
<p class="text-body-1" v-if="isEnableApplicationLock">
|
||||
{{ $t('Application lock has been enabled') }}
|
||||
</p>
|
||||
</v-card-text>
|
||||
@@ -22,10 +22,10 @@
|
||||
</v-card-text>
|
||||
|
||||
<v-card-text class="pb-0">
|
||||
<p class="text-subtitle-1 font-weight-semibold" v-if="!isEnableApplicationLock">
|
||||
<p class="text-body-1 font-weight-semibold" v-if="!isEnableApplicationLock">
|
||||
{{ $t('Please input a new 6-digit PIN code. PIN code would encrypt your local data, so you need input this PIN code when you launch this app. If this PIN code is lost, you should re-login.') }}
|
||||
</p>
|
||||
<p class="text-subtitle-1 font-weight-semibold" v-if="isEnableApplicationLock">
|
||||
<p class="text-body-1 font-weight-semibold" v-if="isEnableApplicationLock">
|
||||
{{ $t('Please enter your current PIN code when disable application lock.') }}
|
||||
</p>
|
||||
</v-card-text>
|
||||
|
||||
@@ -52,7 +52,7 @@
|
||||
</div>
|
||||
|
||||
<v-card-text v-if="!loading && !hasAnyAvailableAccount">
|
||||
<span class="text-subtitle-1">{{ $t('No available account') }}</span>
|
||||
<span class="text-body-1">{{ $t('No available account') }}</span>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-text v-else-if="!loading && hasAnyAvailableAccount">
|
||||
|
||||
@@ -81,7 +81,7 @@
|
||||
<v-col cols="12" v-if="isDataExportingEnabled">
|
||||
<v-card :class="{ 'disabled': exportingData }" :title="$t('Export Data')">
|
||||
<v-card-text>
|
||||
<span class="text-subtitle-1">{{ $t('Export all data to csv file.') }} {{ $t('It may take a long time, please wait for a few minutes.') }}</span>
|
||||
<span class="text-body-1">{{ $t('Export all data to csv file.') }} {{ $t('It may take a long time, please wait for a few minutes.') }}</span>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-text class="d-flex flex-wrap gap-4">
|
||||
@@ -101,7 +101,7 @@
|
||||
|
||||
<v-form>
|
||||
<v-card-text class="py-0">
|
||||
<span class="text-subtitle-1 text-error">
|
||||
<span class="text-body-1 text-error">
|
||||
<v-icon :icon="icons.alert"/>
|
||||
{{ $t('You CANNOT undo this action. This will clear your accounts, categories, tags and transactions data. Please input your current password to confirm.') }}
|
||||
</span>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<v-card :class="{ 'disabled': updatingPassword }" :title="$t('Modify Password')">
|
||||
<v-form>
|
||||
<v-card-text class="pt-0">
|
||||
<span class="text-subtitle-1">{{ $t('After the password is changed, other devices will be logged out, please log in again on other devices by using the new password.') }}</span>
|
||||
<span class="text-body-1">{{ $t('After the password is changed, other devices will be logged out, please log in again on other devices by using the new password.') }}</span>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-text>
|
||||
|
||||
@@ -8,13 +8,13 @@
|
||||
</template>
|
||||
|
||||
<v-card-text class="pb-0">
|
||||
<p class="text-subtitle-1 font-weight-semibold" v-if="!new2FAQRCode">
|
||||
<p class="text-body-1 font-weight-semibold" v-if="!new2FAQRCode">
|
||||
{{ status === true ? $t('Two-factor authentication has been enabled.') : $t('Two-factor authentication is not enabled yet.') }}
|
||||
</p>
|
||||
<p class="text-subtitle-1" v-if="new2FAQRCode">
|
||||
<p class="text-body-1" v-if="new2FAQRCode">
|
||||
{{ $t('Please use two factor authentication app scan the below qrcode and input current passcode') }}
|
||||
</p>
|
||||
<p class="text-subtitle-1" v-if="status === true">
|
||||
<p class="text-body-1" v-if="status === true">
|
||||
{{ $t('Please enter your current password when disable two factor authentication or regenerate two factor authentication backup codes. If you regenerate backup codes, the old codes will be invalidated.') }}
|
||||
</p>
|
||||
</v-card-text>
|
||||
@@ -91,7 +91,7 @@
|
||||
</template>
|
||||
|
||||
<v-card-text>
|
||||
<p class="text-subtitle-1" v-if="status === true">
|
||||
<p class="text-body-1" v-if="status === true">
|
||||
{{ $t('Please copy these backup codes to safe place, the below codes can only be shown once. If these codes were lost, you can regenerate backup codes at any time.') }}
|
||||
</p>
|
||||
<v-textarea class="backup-code" readonly="readonly" :rows="10" :value="currentBackupCode"/>
|
||||
|
||||
Reference in New Issue
Block a user