Clean and simplify some annotation and thread CSS

- Keep the namespaced classes sorted by file
- Keep the collapsed annotation overrides in the annotation file
- Improve the vertical alignment of the timestamp better
- Make margins and elements go away in the collapsed state rather
  than using negative margins to hide them
- Simplify the thread expander styles

h/static/styles/annotations.scss

@@ -18,7 +18,10 @@
 }
 
 .annotation-timestamp {
-  line-height: 2;
+  float: right;
+  font-size: .8em;
+  line-height: 1;
+  margin-top: (1 / (1 - .8)) * .1em;  // scale up .1em offset to align baseline
   color: $text-color;
   &:hover { color: $link-color-hover; }
   &:focus { outline: 0; }
@@ -162,3 +165,24 @@ privacy {
     color: $text-color;
   }
 }
+
+
+.annotation-collapsed-replies {
+  display: none;
+}
+
+.annotation.collapsed {
+  margin-bottom: 0;
+
+  .annotation-header {
+    margin: 0;
+  }
+
+  .annotation-body, .tags, .annotation-actions, .annotation-footer {
+    display: none;
+  }
+
+  .annotation-collapsed-replies {
+    display: inline;
+  }
+}

h/static/styles/threads.scss

 $thread-padding: 1em;
-$threadexp-width: 1em;
 
 .stream-list {
   & > * {
@@ -16,45 +15,11 @@ $threadexp-width: 1em;
   }
 }
 
-.annotation-collapsed-replies {
-  display: none;
-}
-
-.thread-replies {
-  .thread:first-child {
-    margin-top: 0.5em;
-  }
-
-  .reply-count {
-    display: none;
-  }
-
-  .thread-message {
-    &.collapsed {
-      margin-bottom: -2.5em;
-    }
-  }
-
-  .annotation {
-    &.collapsed {
-      .annotation-body, .tags, .annotation-actions {
-        display: none;
-      }
-
-      .annotation-collapsed-replies {
-        display: inline;
-
-        .reply-count {
-          display: inline;
-          margin-left: .4em;
-        }
-      }
-    }
-  }
+.thread-replies .thread:first-child {
+  margin-top: 0.5em;
 }
 
 .thread {
-  @include pie-clearfix;
   cursor: pointer;
   position: relative;
 
@@ -82,27 +47,18 @@ $threadexp-width: 1em;
   }
 
   .threadexp {
-    background: $white;
-    color: $gray-light;
     position: absolute;
+    left: -.7em;
     width: 1.4em;
     height: 1.4em;
-    top: 0;
-    left: -.7em;
-    font-size: 1.4em;
+    font-size: 1.1em;
 
     span {
-      position: absolute;
-      left: (1.4 - $threadexp-width) / 2;
-      width: $threadexp-width;
-      height: $threadexp-width;
-
-      &:before {
-        font-size: $threadexp-width;
-        position: absolute;
-        top: 0;
-        left: 0;
-      }
+      background: $white;
+      color: $gray-light;
+      display: block;
+      line-height: inherit;
+      text-align: center;
     }
   }
 }

h/templates/client/annotation.html

@@ -43,7 +43,7 @@
   </span>
 
   <!-- Timestamp -->
-  <a class="annotation-timestamp small pull-right"
+  <a class="annotation-timestamp"
      target="_blank"
      title="{{vm.annotation.updated | moment:'LLLL'}}"
      ng-if="!vm.editing && vm.annotation.updated"