From 4f96d817d5ec0f96ea472c482880bc3186269518 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Fri, 26 Mar 2021 09:48:29 +0200
Subject: [PATCH] Change card and background color scheme

---
 app/imports/ui/creature/character/CharacterSheet.vue |  1 +
 app/imports/ui/log/CharacterLog.vue                  |  8 +-------
 app/imports/ui/pages/Account.vue                     |  2 +-
 app/imports/ui/styles/cardColors.css                 | 10 ++++++++++
 app/imports/ui/styles/stylesIndex.js                 |  3 ++-
 5 files changed, 15 insertions(+), 9 deletions(-)
 create mode 100644 app/imports/ui/styles/cardColors.css

diff --git a/app/imports/ui/creature/character/CharacterSheet.vue b/app/imports/ui/creature/character/CharacterSheet.vue
index be587041..639fc237 100644
--- a/app/imports/ui/creature/character/CharacterSheet.vue
+++ b/app/imports/ui/creature/character/CharacterSheet.vue
@@ -36,6 +36,7 @@
       >
         <v-tabs-items
           :value="$store.getters.tabById($route.params.id)"
+          class="card-background"
           @change="e => $store.commit(
             'setTabForCharacterSheet',
             {id: $route.params.id, tab: e}
diff --git a/app/imports/ui/log/CharacterLog.vue b/app/imports/ui/log/CharacterLog.vue
index e7885208..d6995b78 100644
--- a/app/imports/ui/log/CharacterLog.vue
+++ b/app/imports/ui/log/CharacterLog.vue
@@ -6,7 +6,7 @@
     <v-slide-y-reverse-transition
       group
       hide-on-leave
-      class="log-entries flex layout column reverse align-end pa-3"
+      class="card-background flex layout column reverse align-end pa-3"
       style="overflow: auto;"
     >
       <log-entry
@@ -122,10 +122,4 @@ export default {
   .log-tab p:last-child {
     margin-bottom: 0;
   }
-  .theme--dark .log-entries {
-    background: #303030;
-  }
-  .log-entries {
-    background: #fafafa;
-  }
 </style>
diff --git a/app/imports/ui/pages/Account.vue b/app/imports/ui/pages/Account.vue
index 46ac2354..875f4239 100644
--- a/app/imports/ui/pages/Account.vue
+++ b/app/imports/ui/pages/Account.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="layout justify-center">
+  <div class="layout justify-center card-background">
     <v-card
       class="ma-4 pa-2"
       style="flex-basis: 900px"
diff --git a/app/imports/ui/styles/cardColors.css b/app/imports/ui/styles/cardColors.css
new file mode 100644
index 00000000..079f4427
--- /dev/null
+++ b/app/imports/ui/styles/cardColors.css
@@ -0,0 +1,10 @@
+.theme--dark.v-sheet {
+  background-color: #303030;
+}
+
+.theme--dark .card-background {
+  background: #000;
+}
+.card-background {
+  background: #fafafa;
+}
diff --git a/app/imports/ui/styles/stylesIndex.js b/app/imports/ui/styles/stylesIndex.js
index 147433b6..7c571afe 100644
--- a/app/imports/ui/styles/stylesIndex.js
+++ b/app/imports/ui/styles/stylesIndex.js
@@ -4,4 +4,5 @@ import './centeredInputs.css';
 import './largeFormatInputs.css';
 import './fitAvatars.css';
 import './lineClamp.css';
-import './toolbarFlex.css'
+import './toolbarFlex.css';
+import './cardColors.css';