UX: improve styling of closed messages

also cleans up styling of time gaps on mobile

app/assets/stylesheets/common/base/topic-post.scss

@@ -279,14 +279,24 @@ table.md-table {
     text-transform: uppercase;
     font-weight: bold;
     font-size: 0.9em;
-    color: lighten($primary, 60%);
+    color: lighten($primary, 50%);
+
+    .custom-message {
+      text-transform: none;
+      margin: 15px 0px 5px;
+      font-weight: normal;
+      font-size: 14px;
+      p {
+        margin: 5px 0;
+      }
+    }
 
     .avatar {
       margin-right: 0.8em;
       float: left;
     }
 
-    p {
+    > p {
       margin: 0;
       padding-top: 4px;
     }

app/assets/stylesheets/mobile/topic-post.scss

@@ -512,3 +512,17 @@ span.highlighted {
 .read-state {
   display: none;
 }
+
+.small-action .small-action-desc {
+  .custom-message {
+    margin-left: -40px;
+  }
+}
+
+.small-action .topic-avatar {
+  padding: 0;
+}
+
+.small-action.time-gap .topic-avatar {
+  margin-top: -5px;
+}