diff options
author | ng <�> | 2022-10-23 01:33:46 +0200 |
---|---|---|
committer | ng <�> | 2022-10-23 01:33:46 +0200 |
commit | 6d51979a9e01d05f625f4f1abdad61a8913cb1e0 (patch) | |
tree | b00dc55bd47a5283ae845718cfe37b58ba8bbece /packages | |
parent | 7139fdadb7f803f6ecfd295ab570435898f709ce (diff) | |
download | merchant-backoffice-6d51979a9e01d05f625f4f1abdad61a8913cb1e0.tar.gz merchant-backoffice-6d51979a9e01d05f625f4f1abdad61a8913cb1e0.tar.bz2 merchant-backoffice-6d51979a9e01d05f625f4f1abdad61a8913cb1e0.zip |
fix: 🐛 Use a local cop yof the variables
Diffstat (limited to 'packages')
-rw-r--r-- | packages/bank/src/scss/_import_theme.scss | 80 |
1 files changed, 79 insertions, 1 deletions
diff --git a/packages/bank/src/scss/_import_theme.scss b/packages/bank/src/scss/_import_theme.scss index 36fbf98..ea89011 100644 --- a/packages/bank/src/scss/_import_theme.scss +++ b/packages/bank/src/scss/_import_theme.scss @@ -1 +1,79 @@ -@import url(https://demo.taler.net/static/theme.css); +/* This file contains colour-scheme- & theme-related stuffs */ + +/* Light Theme (Default) */ +:root { + /* Common Green (treat as private vars if possible) */ + --green-0: #233a13; + --green-1: #385723; + --green-2: #457a22; + --green-3: #568636; + + /* Black/Grey/White */ + --grey-0: #000000; + --grey-1: #1a1a1a; + --grey-2: #2b2b2b; + --grey-3: #4a4a4a; + --grey-4: #6d6d6d; + --grey-5: #8e8e8e; + --grey-6: #a0a0a0; + --grey-7: #b3b3b3; + --grey-8: #e4e4e4; + --grey-9: #ffffff; + --black: var(--grey-0); + --white: var(--grey-9); + + /* Demo Commons */ + --demo-common-dark-blue: #1e2739; + --demo-common-blue: #0042b2; + --demo-common-highlight-blue: #3daee9; + + /* Navigation Bar */ + --navbar-foreground: var(--white); + --navbar-background: var(--green-1); + --navbar-button-selected: var(--green-0); + --navbar-button-hovering: var(--green-3); + + /* Main Content */ + --main-text-colour: var(--black); + --main-background-colour: var(--white); + + /* Misc */ + --default-link-colour: var(--black); + --quote-background-colour: var(--grey-8); + + /* Buttons */ + --button-confirm-background: var(--green-2); + --button-confirm-foreground: var(--white); + --button-confirm-hovering-background: var(--green-1); + --button-confirm-hovering-foreground: var(--white); + --button-confirm-active-background: var(--green-1); + --button-confirm-active-foreground: var(--white); + + /* Info Icon */ + --license-info-icon-filter: none; +} + +/* Dark Theme Overwrites (UA can choose to enable this selector if it wants) */ +@media (prefers-color-scheme: dark) { + /* Modify core colour scheme */ + html:not([data-force-light-theme]) { + /* Link-related */ + --default-link-colour: var(--white); + + /* Main Content */ + --main-background-colour: var(--grey-2); + --main-text-colour: var(--grey-8); + + /* Misc */ + --quote-background-colour: var(--grey-3); + + /* Info Icon */ + --license-info-icon-filter: invert() hue-rotate(180deg); + } +} + +/* Universal theming, keep this minimal! */ +html { + background: var(--main-background-colour); + color: var(--main-text-colour); +} |