Improve public comments display

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/common.scss

@@ -11,7 +11,8 @@ a {
   &.router-link-active,
   &.comment-link,
   &.pagination-link,
-  &.datepicker-cell {
+  &.datepicker-cell,
+  &.list-item {
     text-decoration: none;
   }
 }
@@ -27,3 +28,25 @@ input.input {
 figure img.is-rounded {
   border: 1px solid #cdcaea;
 }
+
+$color-black: #000;
+
+.mention {
+  background: rgba($color-black, 0.1);
+  color: rgba($color-black, 0.6);
+  font-size: 0.9rem;
+  font-weight: bold;
+  border-radius: 5px;
+  padding: 0.2rem;
+  white-space: nowrap;
+  margin-right: 0.2rem;
+}
+
+.mention-suggestion {
+  color: rgba($color-black, 0.6);
+}
+
+.mention .mention {
+  background: initial;
+  margin-right: 0;
+}

js/src/components/Editor.vue

@@ -687,24 +687,6 @@ $color-white: #eee;
     color: $color-white;
   }
 }
-.mention {
-  background: rgba($color-black, 0.1);
-  color: rgba($color-black, 0.6);
-  font-size: 0.9rem;
-  font-weight: bold;
-  border-radius: 5px;
-  padding: 0.2rem;
-  white-space: nowrap;
-  margin-right: 0.2rem;
-}
-.mention-suggestion {
-  color: rgba($color-black, 0.6);
-}
-
-.mention .mention {
-  background: initial;
-  margin-right: 0;
-}
 
 .suggestion-list {
   padding: 0.2rem;

js/src/views/Account/IdentityPickerWrapper.vue

@@ -79,5 +79,10 @@ export default class IdentityPickerWrapper extends Vue {
   .inline {
     cursor: pointer;
   }
+
+  .media {
+    border-top: none;
+    padding-top: 0;
+  }
 }
 </style>