mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-15 23:47:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

modify color and background image in desktop version

Browse Source
This commit is contained in:
MaysWind
2025-08-31 00:20:17 +08:00
parent 8154bd712b
commit 20e2444307
22 changed files with 996 additions and 1278 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/desktop-main.ts
+9 -5
View File
@@ -299,8 +299,8 @@ const vuetify = createVuetify({
'primary': '#c67e48',
'primary-darken-1': '#b67443',
'on-primary': '#ffffff',
'secondary': '#8a8d93',
'secondary-darken-1': '#545659',
'secondary': '#8c8c8c',
'secondary-darken-1': '#595754',
'on-secondary': '#ffffff',
'success': '#4cd964',
'success-darken-1': '#40b654',
@@ -321,6 +321,7 @@ const vuetify = createVuetify({
'on-surface': '#413935',
'notification-background': '#ffffff',
'on-notification-background': '#000',
'grey': '#8c8c8c',
'grey-50': '#fafafa',
'grey-100': '#f0f2f8',
'grey-200': '#eeeeee',
@@ -331,7 +332,7 @@ const vuetify = createVuetify({
'grey-700': '#616161',
'grey-800': '#424242',
'grey-900': '#212121',
'perfect-scrollbar-thumb': '#dbdade',
'perfect-scrollbar-thumb': '#dedcda',
'skin-bordered-background': '#fff',
'skin-bordered-surface': '#fff',
'expansion-panel-text-custom-bg': '#fafafa'
@@ -340,6 +341,7 @@ const vuetify = createVuetify({
'code-color': '#ff8000',
'overlay-scrim-background': '#413935',
'tooltip-background': '#212121',
'tooltip-color': '#ffffff',
'overlay-scrim-opacity': 0.5,
'hover-opacity': 0.04,
'focus-opacity': 0.1,
@@ -369,7 +371,7 @@ const vuetify = createVuetify({
'primary': '#c67e48',
'primary-darken-1': '#b67443',
'on-primary': '#ffffff',
'secondary': '#4d4c4b',
'secondary': '#9d9b99',
'secondary-darken-1': '#3e3d3c',
'on-secondary': '#fff',
'success': '#4cd964',
@@ -391,6 +393,7 @@ const vuetify = createVuetify({
'on-surface': '#fcf0e3',
'notification-background': '#1e1e1e',
'on-notification-background': '#fff',
'grey': '#4d4c4b',
'grey-50': '#212121',
'grey-100': '#424242',
'grey-200': '#616161',
@@ -409,7 +412,8 @@ const vuetify = createVuetify({
variables: {
'code-color': '#ff8000',
'overlay-scrim-background': '#1a1a1a',
'tooltip-background': '#d7d7d7',
'tooltip-background': '#333333',
'tooltip-color': '#eeeeee',
'overlay-scrim-opacity': 0.6,
'hover-opacity': 0.04,
'focus-opacity': 0.1,
src/styles/desktop/global.scss
+31
View File
@@ -103,6 +103,12 @@ input[type=number] {
min-block-size: calc(var(--vh, 1vh) * 100);
}
.v-theme--dark {
.auth-image-background {
background-color: #202122;
}
}
.auth-card {
background-color: rgb(var(--v-theme-surface));
}
@@ -253,6 +259,15 @@ html[dir="rtl"] .bidirectional-switch {
}
}
.v-theme--dark {
.v-btn--variant-elevated,
.v-btn--variant-flat {
&.v-btn--disabled .v-btn__overlay {
opacity: 0.35;
}
}
}
.v-btn {
.v-btn__prepend,
.v-btn__append {
@@ -348,6 +363,22 @@ html[dir="rtl"] .v-img.img-with-direction > img {
color: rgba(var(--v-theme-income), var(--v-medium-emphasis-opacity)) !important;
}
.v-tooltip {
.v-overlay__content {
color: rgb(var(--v-tooltip-color));
}
}
.v-snackbar {
.v-snackbar__content {
color: rgb(var(--v-tooltip-color));
}
.bg-notification-background .v-snackbar__content {
color: rgb(var(--v-theme-on-notification-background)) !important;
}
}
.v-switch.v-switch--inset {
.v-switch__track {
min-width: 1.875rem !important;
src/views/desktop/ForgetPasswordPage.vue
+3 -2
View File
@@ -7,7 +7,7 @@
</div>
</router-link>
<v-row no-gutters class="auth-wrapper">
<v-col cols="12" md="8" class="d-none d-md-flex align-center justify-center position-relative">
<v-col cols="12" md="8" class="auth-image-background d-none d-md-flex align-center justify-center position-relative">
<div class="d-flex auth-img-footer" v-if="!isDarkMode">
<v-img class="img-with-direction" src="img/desktop/background.svg"/>
</div>
@@ -15,7 +15,8 @@
<v-img class="img-with-direction" src="img/desktop/background-dark.svg"/>
</div>
<div class="d-flex align-center justify-center w-100 pt-10">
<v-img class="img-with-direction" max-width="600px" src="img/desktop/people4.svg"/>
<v-img class="img-with-direction" max-width="600px" src="img/desktop/people4.svg" v-if="!isDarkMode"/>
<v-img class="img-with-direction" max-width="600px" src="img/desktop/people4-dark.svg" v-else-if="isDarkMode"/>
</div>
</v-col>
<v-col cols="12" md="4" class="auth-card d-flex flex-column">
src/views/desktop/HomePage.vue
+1 -1
View File
@@ -59,7 +59,7 @@
<v-col cols="12" md="4">
<div class="d-flex align-center">
<div class="me-3">
<v-avatar rounded color="secondary" size="42" class="elevation-1">
<v-avatar rounded color="grey" size="42" class="elevation-1">
<v-icon size="24" :icon="mdiBankOutline"/>
</v-avatar>
</div>
src/views/desktop/LoginPage.vue
+3 -2
View File
@@ -7,7 +7,7 @@
</div>
</router-link>
<v-row no-gutters class="auth-wrapper">
<v-col cols="12" md="8" class="d-none d-md-flex align-center justify-center position-relative">
<v-col cols="12" md="8" class="auth-image-background d-none d-md-flex align-center justify-center position-relative">
<div class="d-flex auth-img-footer" v-if="!isDarkMode">
<v-img class="img-with-direction" src="img/desktop/background.svg"/>
</div>
@@ -15,7 +15,8 @@
<v-img class="img-with-direction" src="img/desktop/background-dark.svg"/>
</div>
<div class="d-flex align-center justify-center w-100 pt-10">
<v-img class="img-with-direction" max-width="600px" src="img/desktop/people1.svg"/>
<v-img class="img-with-direction" max-width="600px" src="img/desktop/people1.svg" v-if="!isDarkMode"/>
<v-img class="img-with-direction" max-width="600px" src="img/desktop/people1-dark.svg" v-else-if="isDarkMode"/>
</div>
</v-col>
<v-col cols="12" md="4" class="auth-card d-flex flex-column">
src/views/desktop/ResetPasswordPage.vue
+3 -2
View File
@@ -7,7 +7,7 @@
</div>
</router-link>
<v-row no-gutters class="auth-wrapper">
<v-col cols="12" md="8" class="d-none d-md-flex align-center justify-center position-relative">
<v-col cols="12" md="8" class="auth-image-background d-none d-md-flex align-center justify-center position-relative">
<div class="d-flex auth-img-footer" v-if="!isDarkMode">
<v-img class="img-with-direction" src="img/desktop/background.svg"/>
</div>
@@ -15,7 +15,8 @@
<v-img class="img-with-direction" src="img/desktop/background-dark.svg"/>
</div>
<div class="d-flex align-center justify-center w-100 pt-10">
<v-img class="img-with-direction" max-width="600px" src="img/desktop/people4.svg"/>
<v-img class="img-with-direction" max-width="600px" src="img/desktop/people4.svg" v-if="!isDarkMode"/>
<v-img class="img-with-direction" max-width="600px" src="img/desktop/people4-dark.svg" v-else-if="isDarkMode"/>
</div>
</v-col>
<v-col cols="12" md="4" class="auth-card d-flex flex-column">
src/views/desktop/SignupPage.vue
+3 -2
View File
@@ -7,7 +7,7 @@
</div>
</router-link>
<v-row no-gutters class="auth-wrapper">
<v-col cols="12" md="4" class="d-none d-md-flex align-center justify-center position-relative">
<v-col cols="12" md="4" class="auth-image-background d-none d-md-flex align-center justify-center position-relative">
<div class="d-flex auth-img-footer" v-if="!isDarkMode">
<v-img class="img-with-direction" src="img/desktop/background.svg"/>
</div>
@@ -15,7 +15,8 @@
<v-img class="img-with-direction" src="img/desktop/background-dark.svg"/>
</div>
<div class="d-flex align-center justify-center w-100 pt-10">
<v-img class="img-with-direction" max-width="320px" src="img/desktop/people2.svg"/>
<v-img class="img-with-direction" max-width="320px" src="img/desktop/people2.svg" v-if="!isDarkMode"/>
<v-img class="img-with-direction" max-width="320px" src="img/desktop/people2-dark.svg" v-else-if="isDarkMode"/>
</div>
</v-col>
<v-col cols="12" md="8" class="auth-card d-flex align-center justify-center pa-10">
src/views/desktop/UnlockPage.vue
+3 -2
View File
@@ -7,7 +7,7 @@
</div>
</router-link>
<v-row no-gutters class="auth-wrapper">
<v-col cols="12" md="8" class="d-none d-md-flex align-center justify-center position-relative">
<v-col cols="12" md="8" class="auth-image-background d-none d-md-flex align-center justify-center position-relative">
<div class="d-flex auth-img-footer" v-if="!isDarkMode">
<v-img class="img-with-direction" src="img/desktop/background.svg"/>
</div>
@@ -15,7 +15,8 @@
<v-img class="img-with-direction" src="img/desktop/background-dark.svg"/>
</div>
<div class="d-flex align-center justify-center w-100 pt-10">
<v-img class="img-with-direction" max-width="600px" src="img/desktop/people3.svg"/>
<v-img class="img-with-direction" max-width="600px" src="img/desktop/people3.svg" v-if="!isDarkMode"/>
<v-img class="img-with-direction" max-width="600px" src="img/desktop/people3-dark.svg" v-else-if="isDarkMode"/>
</div>
</v-col>
<v-col cols="12" md="4" class="auth-card d-flex flex-column">
src/views/desktop/VerifyEmailPage.vue
+3 -2
View File
@@ -7,7 +7,7 @@
</div>
</router-link>
<v-row no-gutters class="auth-wrapper">
<v-col cols="12" md="8" class="d-none d-md-flex align-center justify-center position-relative">
<v-col cols="12" md="8" class="auth-image-background d-none d-md-flex align-center justify-center position-relative">
<div class="d-flex auth-img-footer" v-if="!isDarkMode">
<v-img class="img-with-direction" src="img/desktop/background.svg"/>
</div>
@@ -15,7 +15,8 @@
<v-img class="img-with-direction" src="img/desktop/background-dark.svg"/>
</div>
<div class="d-flex align-center justify-center w-100 pt-10">
<v-img class="img-with-direction" max-width="320px" src="img/desktop/people2.svg"/>
<v-img class="img-with-direction" max-width="320px" src="img/desktop/people2.svg" v-if="!isDarkMode"/>
<v-img class="img-with-direction" max-width="320px" src="img/desktop/people2-dark.svg" v-else-if="isDarkMode"/>
</div>
</v-col>
<v-col cols="12" md="4" class="auth-card d-flex flex-column">
src/views/desktop/overview/cards/IncomeExpenseOverviewCard.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<v-card :class="{ 'disabled': disabled }">
<v-card-text class="d-flex align-center">
<v-avatar color="secondary" size="38">
<v-avatar color="grey" size="38">
<v-icon size="24" :icon="icon" />
</v-avatar>
<span class="font-weight-bold ms-3">{{ title }}</span>
src/views/desktop/transactions/import/ImportDialog.vue
+1 -1
View File
@@ -598,7 +598,7 @@
</template>
<template #item.time="{ item }">
<span>{{ getDisplayDateTime(item) }}</span>
<v-chip class="ms-1" variant="flat" color="secondary" size="x-small"
<v-chip class="ms-1" variant="flat" color="grey" size="x-small"
v-if="item.utcOffset !== currentTimezoneOffsetMinutes">{{ getDisplayTimezone(item) }}</v-chip>
</template>
<template #item.type="{ value }">
src/views/desktop/user/settings/tabs/UserDataManagementSettingTab.vue
+1 -1
View File
@@ -41,7 +41,7 @@
title: 'Transaction Tags',
count: displayDataStatistics ? displayDataStatistics.totalTransactionTagCount : '-',
icon: mdiTagOutline,
color: 'secondary'
color: 'grey'
},
{
title: 'Transaction Pictures',