Improve hover highlight UI effects for cards in dark mode

In light mode a change in elevation changes the drop shadow, but this is 
all but invisible in dark mode, so I added a highlight to the cards when 
hovering to show that the card can be expanded with a click

app/imports/ui/creature/character/characterSheetTabs/CharacterTab.vue

@@ -5,6 +5,8 @@
         <v-card
           hover
           data-id="creature-summary"
+          @mouseover="summaryHover = true"
+          @mouseleave="summaryHover = false"
           @click="showCharacterForm"
         >
           <v-img
@@ -18,6 +20,7 @@
             {{ creature.alignment }}<br>
             {{ creature.gender }}
           </v-card-text>
+          <card-highlight :active="summaryHover" />
         </v-card>
       </div>
       <div>
@@ -25,9 +28,21 @@
           data-id="slot-card"
           @toolbarclick="showSlotDialog"
         >
-          <v-toolbar-title slot="toolbar">
-            Build
-          </v-toolbar-title>
+          <template slot="toolbar">
+            <v-toolbar-title>
+              Build
+            </v-toolbar-title>
+            <v-spacer />
+            <v-toolbar-title>
+              <v-icon
+                small
+                style="width: 16px;"
+                class="mr-1"
+              >
+                mdi-pencil
+              </v-icon>
+            </v-toolbar-title>
+          </template>
           <v-card-text style="background-color: inherit;">
             <slots :creature-id="creatureId" />
           </v-card-text>
@@ -121,6 +136,7 @@ import ColumnLayout from '/imports/ui/components/ColumnLayout.vue';
 import NoteCard from '/imports/ui/properties/components/persona/NoteCard.vue';
 import Slots from '/imports/ui/creature/slots/Slots.vue';
 import ToolbarCard from '/imports/ui/components/ToolbarCard.vue';
+import CardHighlight from '/imports/ui/components/CardHighlight.vue';
 
 export default {
   components: {
@@ -128,6 +144,7 @@ export default {
     NoteCard,
     Slots,
     ToolbarCard,
+    CardHighlight,
   },
   props: {
     creatureId: {
@@ -135,6 +152,9 @@ export default {
       required: true,
     },
   },
+  data(){return {
+    summaryHover: false,
+  }},
   computed: {
     highestClassLevels(){
       let highestLevels = {};

app/imports/ui/creature/character/characterSheetTabs/InventoryTab.vue

@@ -55,9 +55,7 @@
         </v-card>
       </div>
       <div>
-        <toolbar-card
-          :color="creature.color"
-        >
+        <toolbar-card transparent-toolbar>
           <v-toolbar-title slot="toolbar">
             Equipped
           </v-toolbar-title>
@@ -71,9 +69,7 @@
         </toolbar-card>
       </div>
       <div>
-        <toolbar-card
-          :color="creature.color"
-        >
+        <toolbar-card transparent-toolbar>
           <v-toolbar-title slot="toolbar">
             Carried
           </v-toolbar-title>

app/imports/ui/creature/character/characterSheetTabs/StatsTab.vue

@@ -242,7 +242,7 @@
       <div
         v-for="action in actions"
         :key="action._id"
-        class="actions"
+        class="action"
       >
         <action-card
           :model="action"
@@ -253,7 +253,7 @@
       <div
         v-for="attack in attacks"
         :key="attack._id"
-        class="attacks"
+        class="attack"
       >
         <action-card
           attack