Improve some focus styles and make statblocks tabbable

src/components/ActionButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <button @mouseover="describe" class="action-button" @click="execute">
+  <button @focus="describe" class="action-button" @click="execute">
     <div class="action-title">{{ action.name }}</div>
     <div class="action-desc">{{ action.desc }}</div>
   </button>
@@ -59,6 +59,11 @@ export default class ActionButton extends Vue {
   border-color: #666;
   border-style: outset;
   user-select: none;
+  outline: none;
+}
+
+.action-button:focus {
+  background: #444;
 }
 
 .action-button:hover {

src/components/ChoiceButton.vue

@@ -42,8 +42,8 @@ export default class ChoiceButton extends Vue {
 .choice-button,
 .choice-button:hover,
 .choice-button:active {
-  width: 90%;
-  margin: 5%;
+  width: calc(100%-16pt);
+  margin: 8pt;
   background: repeating-linear-gradient(45deg, #333, #333 20px, #222 20px, #222 40px);
   color: #ccc;
   font-size: 150%;
@@ -52,7 +52,7 @@ export default class ChoiceButton extends Vue {
   border-radius: 8px;
   border-style: outset;
   outline: none;
-  padding: 0;
+  padding: 4pt;
 }
 
 .choice-button:focus {

src/components/Statblock.vue

@@ -1,5 +1,5 @@
 <template>
-  <div @click="$emit('select', $el)" class="statblock">
+  <div @click="$emit('select', $el)" @keyup.enter="$emit('select', $el)" class="statblock" tabindex="0">
     <div class="statblock-shader statblock-shader-hover"></div>
     <div class="statblock-shader statblock-shader-selected marching-ants"></div>
     <div class="statblock-shader statblock-shader-selected-ally marching-ants"></div>
@@ -180,6 +180,7 @@ a {
   overflow: hidden;
   background: none;
   border-radius: 10px;
+  outline: none;
 }
 
 .stat-line {
@@ -351,7 +352,8 @@ a {
   opacity: 0;
 }
 
-.statblock:hover .statblock-shader-hover {
+.statblock:hover .statblock-shader-hover,
+.statblock:focus .statblock-shader-hover {
   background: white;
   opacity: 0.20;
 }