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

support setting expense / income amount color

Browse Source
This commit is contained in:
MaysWind
2024-07-13 20:46:42 +08:00
parent 84a96d80b7
commit b1343ba92a
29 changed files with 586 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/desktop/amount-color.scss
+133
View File
@@ -0,0 +1,133 @@
:root {
--ebk-amount-color-green: 0, 150, 136;
--ebk-amount-color-red: 212, 63, 63;
--ebk-amount-color-yellow: 226, 182, 10;
}
:root.expense-amount-color-green {
.v-theme--light,
.v-theme--dark {
--v-theme-expense: var(--ebk-amount-color-green);
}
.text-expense {
color: rgb(var(--ebk-amount-color-green));
}
.bg-expense {
color: rgb(var(--v-theme-on-primary)) !important;
background-color: rgb(var(--ebk-amount-color-green));
}
}
:root.income-amount-color-green {
.v-theme--light,
.v-theme--dark {
--v-theme-income: var(--ebk-amount-color-green);
}
.text-income {
color: rgb(var(--ebk-amount-color-green));
}
.bg-income {
color: rgb(var(--v-theme-on-primary)) !important;
background-color: rgb(var(--ebk-amount-color-green));
}
}
:root.expense-amount-color-red {
.v-theme--light,
.v-theme--dark {
--v-theme-expense: var(--ebk-amount-color-red);
}
.text-expense {
color: rgb(var(--ebk-amount-color-red));
}
.bg-expense {
color: rgb(var(--v-theme-on-primary)) !important;
background-color: rgb(var(--ebk-amount-color-red));
}
}
:root.income-amount-color-red {
.v-theme--light,
.v-theme--dark {
--v-theme-income: var(--ebk-amount-color-red);
}
.text-income {
color: rgb(var(--ebk-amount-color-red));
}
.bg-income {
color: rgb(var(--v-theme-on-primary)) !important;
background-color: rgb(var(--ebk-amount-color-red));
}
}
:root.expense-amount-color-yellow {
.v-theme--light,
.v-theme--dark {
--v-theme-expense: var(--ebk-amount-color-yellow);
}
.text-expense {
color: rgb(var(--ebk-amount-color-yellow));
}
.bg-expense {
color: rgb(var(--v-theme-on-primary)) !important;
background-color: rgb(var(--ebk-amount-color-yellow));
}
}
:root.income-amount-color-yellow {
.v-theme--light,
.v-theme--dark {
--v-theme-income: var(--ebk-amount-color-yellow);
}
.text-income {
color: rgb(var(--ebk-amount-color-yellow));
}
.bg-income {
color: rgb(var(--v-theme-on-primary)) !important;
background-color: rgb(var(--ebk-amount-color-yellow));
}
}
:root.expense-amount-color-blackorwhite {
.v-theme--light,
.v-theme--dark {
--v-theme-expense: var(--v-theme-on-surface);
.text-expense {
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
}
.bg-expense {
color: rgb(var(--v-theme-surface)) !important;
background-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
}
}
}
:root.income-amount-color-blackorwhite {
.v-theme--light,
.v-theme--dark {
--v-theme-income: var(--v-theme-on-surface);
.text-income {
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
}
.bg-income {
color: rgb(var(--v-theme-surface)) !important;
background-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
}
}
}
src/styles/mobile/amount-color.css
+47
View File
@@ -0,0 +1,47 @@
:root {
--ebk-amount-color-green: 0, 150, 136;
--ebk-amount-color-red: 212, 63, 63;
--ebk-amount-color-yellow: 226, 182, 10;
--ebk-amount-color-black: 65, 57, 53;
--ebk-amount-color-white: 250, 240, 237;
}
:root.expense-amount-color-green .text-expense {
color: rgb(var(--ebk-amount-color-green)) !important;
}
:root.income-amount-color-green .text-income {
color: rgb(var(--ebk-amount-color-green)) !important;
}
:root.expense-amount-color-red .text-expense {
color: rgb(var(--ebk-amount-color-red)) !important;
}
:root.income-amount-color-red .text-income {
color: rgb(var(--ebk-amount-color-red)) !important;
}
:root.expense-amount-color-yellow .text-expense {
color: rgb(var(--ebk-amount-color-yellow)) !important;
}
:root.income-amount-color-yellow .text-income {
color: rgb(var(--ebk-amount-color-yellow)) !important;
}
:root.expense-amount-color-blackorwhite .text-expense {
color: rgb(var(--ebk-amount-color-black)) !important;
}
:root.dark.expense-amount-color-blackorwhite .text-expense {
color: rgb(var(--ebk-amount-color-white)) !important;
}
:root.income-amount-color-blackorwhite .text-income {
color: rgb(var(--ebk-amount-color-black)) !important;
}
:root.dark.income-amount-color-blackorwhite .text-income {
color: rgb(var(--ebk-amount-color-white)) !important;
}