Move CSS to App.vue + add some rules

src/App.vue

@@ -52,11 +52,22 @@ export default {
   margin-top: 60px;
 }
 
+/* Global Styles */
+
 button {
   font-size: 16px;
   padding: 8px;
   border-radius: 3px;
   margin: 5px 10px 5px 0px;
+  cursor: pointer;
+}
+
+button:disabled {
+  cursor: auto;
+}
+
+.clickable {
+  cursor: pointer;
 }
 
 input[type='checkbox'] {
@@ -75,4 +86,85 @@ input[type='checkbox'] {
 input[type='checkbox']:checked {
   background: #679;
 }
+
+/* Modal */
+
+.modal, .overlay {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  left: 0;
+  top: 0;
+}
+.overlay {
+  opacity: 0.5;
+  background-color: black;
+}
+.modal-card {
+  position: relative;
+  max-width: 80%;
+  margin: auto;
+  margin-top: 30px;
+  padding: 20px;
+  background-color: white;
+  min-height: 500px;
+  z-index: 10;
+  opacity: 1;
+}
+
+/* Email Modal */
+
+.email-display {
+  text-align: left;
+}
+
+/* Mail Table */
+
+.mail-table {
+  max-width: 1000px;
+  margin: auto;
+  border-collapse: collapse;
+}
+.mail-table tr.read {
+  background-color: #EEE;
+}
+.mail-table tr {
+  height: 40px;
+}
+.mail-table td {
+  border-bottom: 1px solid black;
+  padding: 5px;
+  text-align: left;
+}
+.mail-table tr:first-of-type td {
+  border-top: 1px solid black;
+}
+.mail-table td p {
+  max-height: 1.2em;
+  overflow-y: hidden;
+  margin: 0;
+}
+
+.mail-table td.date {
+  width: 120px;
+}
+
+/* Bulk Action Bar */
+
+.bulk-action-bar {
+  width: 100%;
+  max-width: 1000px;
+  margin: auto;
+  text-align: left;
+  padding-bottom: 8px;
+}
+
+.bulk-action-bar input {
+  margin: 5px;
+}
+
+.bulk-action-bar .checkbox {
+  margin-right: 6px;
+  margin-left: 3px;
+}
 </style>