Major CSS revamp

- Get rid of Bootstrap (except we still rely on some JS)
- Use BEM class names
- Rework variables/theme config
- Fix various bugs, including some on mobile

The CSS is still not ideal – it needs to be cleaned up some more. But
that can be a focus for after beta.

less/forum/DiscussionListItem.less

@@ -0,0 +1,253 @@
+.DiscussionListItem {
+  .tooltip .tooltip-inner {
+    max-width: none;
+  }
+}
+.DiscussionListItem a {
+  text-decoration: none;
+}
+.DiscussionListItem-content {
+  position: relative;
+  color: @muted-color;
+}
+.DiscussionListItem-main {
+  color: inherit;
+  text-decoration: none;
+}
+.DiscussionListItem-author {
+  float: left;
+  margin-top: 15px;
+}
+.DiscussionListItem-badges {
+  float: left;
+  margin-top: 10px;
+  text-align: right;
+  white-space: nowrap;
+  pointer-events: none;
+
+  .badge {
+    margin-left: -15px;
+    position: relative;
+    pointer-events: auto;
+  }
+}
+.DiscussionListItem-main {
+  display: inline-block;
+  width: 100%;
+  padding: 12px 0;
+}
+.DiscussionListItem-title {
+  margin: 0 0 5px;
+  line-height: 1.3;
+  color: @heading-color;
+  font-weight: normal;
+
+  .unread & {
+    font-weight: bold;
+  }
+}
+.DiscussionListItem-info {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+
+  > li {
+    display: inline;
+  }
+  .username {
+    font-weight: bold;
+  }
+}
+.DiscussionListItem-count {
+  float: right;
+  margin-top: 12px;
+  text-decoration: none;
+
+  .unread & {
+    cursor: pointer;
+  }
+}
+.DiscussionListItem-relevantPosts {
+  padding-bottom: 15px;
+
+  @media @phone {
+    margin-left: -45px;
+    margin-right: -35px;
+  }
+
+  .PostPreview {
+    background: @control-bg;
+    display: block;
+    padding: 10px 15px;
+    border-bottom: 2px dotted @body-bg;
+    color: @muted-color;
+    transition: border-color 0.2s;
+
+    .DiscussionListItem:hover & {
+      border-color: lighten(@control-bg, 3%);
+    }
+
+    .Avatar, time {
+      display: none;
+    }
+    .PostPreview-content {
+      padding-left: 0;
+    }
+    &:first-child {
+      border-radius: @border-radius @border-radius 0 0;
+    }
+    &:hover {
+      background: darken(@control-bg, 3%);
+      text-decoration: none;
+    }
+  }
+}
+
+
+@media @phone {
+  .DiscussionListItem-controls {
+    display: none;
+  }
+  .DiscussionListItem-content {
+    padding-left: 15px + 45px;
+    padding-right: 15px + 35px;
+
+    &:active {
+      background: @control-bg;
+    }
+  }
+  .DiscussionListItem-author {
+    margin-left: -45px;
+
+    .Avatar {
+      .Avatar--size(32px);
+    }
+  }
+  .DiscussionListItem-badges {
+    margin-left: -45px;
+    width: 38px;
+
+    .badge {
+      .Badge--size(20px);
+      margin-left: -13px;
+    }
+  }
+  .DiscussionListItem-main {
+    margin-right: -45px;
+  }
+  .DiscussionListItem-title {
+    font-size: 14px;
+    text-decoration: none !important;
+  }
+  .DiscussionListItem-count {
+    margin-right: -35px;
+    background: @control-bg;
+    color: @control-color;
+    border-radius: @border-radius;
+    font-size: 12px;
+    padding: 2px 6px;
+
+    .unread& {
+      background: @primary-color;
+      color: #fff;
+      font-weight: bold;
+
+      &:active {
+        opacity: 0.5;
+      }
+    }
+  }
+}
+
+
+
+@media @tablet-up {
+  .DiscussionListItem {
+    position: relative;
+    margin-right: -15px;
+    padding-right: 15px;
+    padding-left: 15px;
+    margin-left: -15px;
+    border-radius: @border-radius;
+    transition: background 0.2s;
+
+    &:hover {
+      background: @control-bg;
+    }
+    &:hover .DiscussionListItem-controls,
+    .DiscussionListItem-controls.open {
+      opacity: 1;
+    }
+    .DiscussionListItem-controls.open {
+      z-index: 3;
+    }
+  }
+  .DiscussionListItem-controls {
+    position: absolute;
+    right: 0;
+    top: 15px;
+    z-index: 1;
+    opacity: 0;
+    transition: opacity 0.2s;
+
+    .Dropdown-toggle {
+      display: block;
+    }
+    .Dropdown-menu {
+      right: 0;
+      left: auto;
+    }
+  }
+  .DiscussionListItem-content {
+    padding-left: 52px;
+    padding-right: 75px;
+  }
+  .DiscussionListItem-author {
+    margin-left: -52px;
+
+    .Avatar {
+      .Avatar--size(36px);
+    }
+  }
+  .DiscussionListItem-badges {
+    margin-left: -55px;
+    width: 48px;
+  }
+  .DiscussionListItem-main {
+    margin-right: -65px;
+  }
+  .DiscussionListItem-title {
+    font-size: 16px;
+  }
+  .DiscussionListItem-count {
+    margin-top: 21px;
+    margin-right: -65px;
+    width: 55px;
+    color: @muted-color;
+    font-size: 14px;
+    padding-left: 21px;
+
+    &:before {
+      .fa();
+      content: @fa-var-comment-o;
+      float: left;
+      margin-left: -21px;
+      margin-top: 3px;
+    }
+    .unread & {
+      color: @heading-color;
+      font-weight: bold;
+
+      &:before {
+        content: @fa-var-comment;
+      }
+      &:hover:before {
+        content: @fa-var-check;
+      }
+    }
+  }
+}