refs #66 Change background color when toot is focused

src/renderer/components/TimelineSpace/Cards/Notification/Favourite.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="favourite">
+  <div class="favourite" tabIndex="0">
     <div class="action">
       <div class="action-mark">
         <icon name="star" scale="0.7"></icon>
@@ -51,7 +51,7 @@ export default {
 .fill-line {
   height: 1px;
   background-color: #f2f6fc;
-  margin: 4px 0;
+  margin: 4px 0 0;
 }
 
 .bold {
@@ -59,7 +59,7 @@ export default {
 }
 
 .favourite {
-  margin-top: 8px;
+  padding: 8px 0 0 16px;
 
   .action {
     margin-right: 8px;
@@ -125,4 +125,9 @@ export default {
     }
   }
 }
+
+.favourite:focus {
+  outline: 0;
+  background-color: #f2f6fc;
+}
 </style>

src/renderer/components/TimelineSpace/Cards/Notification/Follow.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="follow">
+  <div class="follow" tabIndex="0">
     <div class="action">
       <div class="action-mark">
         <icon name="user-plus" scale="0.7"></icon>
@@ -27,7 +27,7 @@ export default {
 .fill-line {
   height: 1px;
   background-color: #f2f6fc;
-  margin: 4px 0;
+  margin: 4px 0 0;
 }
 
 .bold {
@@ -35,7 +35,7 @@ export default {
 }
 
 .follow {
-  margin-top: 8px;
+  padding: 8px 0 0 16px;
 
   .action {
     margin-right: 8px;
@@ -65,4 +65,9 @@ export default {
     }
   }
 }
+
+.follow:focus {
+  outline: 0;
+  background-color: #f2f6fc;
+}
 </style>

src/renderer/components/TimelineSpace/Cards/Notification/Reblog.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="reblog">
+  <div class="reblog" tabIndex="0">
     <div class="action">
       <div class="action-mark">
         <icon name="retweet" scala="0.7"></icon>
@@ -51,7 +51,7 @@ export default {
 .fill-line {
   height: 1px;
   background-color: #f2f6fc;
-  margin: 4px 0;
+  margin: 4px 0 0;
 }
 
 .bold {
@@ -59,7 +59,7 @@ export default {
 }
 
 .reblog {
-  margin-top: 8px;
+  padding: 8px 0 0 16px;
 
   .action {
     margin-right: 8px;
@@ -102,7 +102,7 @@ export default {
     }
 
     .detail {
-      margin: 8px 8px 0 42px;
+      margin: 8px 8px 0 42px;;
       color: #909399;
 
       .toot-header {
@@ -125,4 +125,9 @@ export default {
     }
   }
 }
+
+.reblog:focus {
+  outline: 0;
+  background-color: #f2f6fc;
+}
 </style>

src/renderer/components/TimelineSpace/Cards/Toot.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="toot">
+  <div class="toot" tabIndex="0">
     <div class="icon">
       <img :src="originalMessage(message).account.avatar" />
     </div>
@@ -133,11 +133,13 @@ function findLink (target) {
 <style lang="scss" scoped>
 .fill-line {
   height: 1px;
-  background-color: #f2f6fc;
-  margin: 4px 0;
+  background-color: #ebeef5;
+  margin: 4px 0 0;
 }
 
 .toot {
+  padding: 4px 0 0 16px;
+
   .icon {
     float: left;
 
@@ -149,9 +151,7 @@ function findLink (target) {
   }
 
   .detail {
-    margin-left: 42px;
-    margin-right: 8px;
-    margin-top: 8px;
+    margin: 0 8px 0 42px;
 
     .toot-header {
       .user {
@@ -214,4 +214,9 @@ function findLink (target) {
     }
   }
 }
+
+.toot:focus {
+  background-color: #f2f6fc;
+  outline: 0;
+}
 </style>

src/renderer/components/TimelineSpace/Favourites.vue

@@ -45,9 +45,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-#favourites {
-  margin-left: 16px;
-}
-</style>

src/renderer/components/TimelineSpace/Home.vue

@@ -21,8 +21,3 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-.home-timeline {
-  margin-left: 16px;
-}
-</style>

src/renderer/components/TimelineSpace/Local.vue

@@ -32,9 +32,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-#local {
-  margin-left: 16px;
-}
-</style>

src/renderer/components/TimelineSpace/Notifications.vue

@@ -20,9 +20,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-.notifications {
-  margin-left: 16px;
-}
-</style>

src/renderer/components/TimelineSpace/Public.vue

@@ -32,9 +32,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-#public {
-  margin-left: 16px;
-}
-</style>