Merge pull request #1547 from awesomerobot/master

minimizing the desktop topic view, removes grey background

app/assets/stylesheets/common/components/navs.css.scss

@@ -33,8 +33,6 @@
       color: $nav-pills-color;
       font-size: 16px;
       line-height: 20px;
-      text-shadow: 0 1px 0 rgba($white, 0.6);
-      @include border-radius-all(4px);
       &:hover {
         border-color: $nav-pills-border-color-hover;
         color: $nav-pills-color-hover;
@@ -42,11 +40,9 @@
       }
     }
     &.active > a, > a.active {
-      border-color: $nav-pills-border-color-active;
+      border-color: darken($nav-pills-background-color-active, 10%);
-      color: $nav-pills-color-active;
+      color: #fff;
-      text-shadow: 0 1px 0 rgba($black, 0.24);
       background-color: $nav-pills-background-color-active;
-      @include box-shadow((0 1px 3px rgba($black, 0.16), inset 0 1px 0 rgba($white, 0.22)));
     }
   }
 }

app/assets/stylesheets/common/foundation/variables.scss

@@ -110,7 +110,7 @@ $topic-list-th-background-color: #f6f6f6 !default;
 $topic-list-td-color: #808080 !default;
 $topic-list-td-border-color: #ededed !default;
 $topic-list-star-color: #eee !default;
-$topic-list-starred-color: #f7cb1d !default;
+$topic-list-starred-color: #e45735 !default;
 
 // Generic
 // --------------------------------------------------

app/assets/stylesheets/desktop.css.erb

@@ -1,6 +1,5 @@
 //  Manifest
 //
 //= require common
-//= require ./vendor/bootstrap
 
 //= require_tree ./desktop

app/assets/stylesheets/desktop/compose.scss

@@ -233,6 +233,7 @@
 
   // When the post is new (new topic) the sizings are different
   &.edit-title {
+
     &.open {
       height: 400px;
     }
@@ -240,6 +241,8 @@
       input#reply-title {
         padding: 7px 10px;
         margin: 6px 10px 3px 0;
+        width: 400px;
+    
       }
       .wmd-controls {
         @include transition(top 0.3s ease);
@@ -337,10 +340,6 @@
     left: 432px;
     top: -19px;
   }
-  button.btn.no-text {
-    margin: 7px 0 0 5px;
-    position: absolute;
-  }
 }
 
 .reply-to {
@@ -510,7 +509,6 @@ div.ac-wrap {
 }
 
 .admin-options-form {
-  margin-top: 8px;
   display: none;
 }
 
@@ -534,3 +532,9 @@ div.ac-wrap {
     }
   }
 }
+
+#reply-control button.btn.no-text {
+  margin: 7px 0 0 5px; 
+  position: absolute;  
+}
+

app/assets/stylesheets/desktop/discourse.scss

@@ -6,13 +6,14 @@
 @import "common/foundation/mixins";
 @import "common/foundation/helpers";
 
+
 body {
   min-width: $large-width;
 }
 
 .container {
   @extend .clearfix;
-  width: $large-width;
+  max-width: $large-width;
   margin-right: auto;
   margin-left: auto;
 }
@@ -104,7 +105,6 @@ body {
     height: 100%;
     @include border-radius-all(5px);
     .contents {
-      padding: 10px 20px 20px 20px;
     }
     &.white {
       background-color: $white;
@@ -112,7 +112,7 @@ body {
   }
   #main {
     .icon-star.starred {
-      color: #fe1;
+      color: #e45735;
     }
     a.star {
       display: inline-block;
@@ -124,7 +124,7 @@ body {
         content: "\f005";
       }
       &.starred {
-        color: #fe1;
+        color: #e45735;
         text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
         @include hover {
           opacity: 1;
@@ -298,3 +298,493 @@ blockquote {
 .profiler-results.profiler-left {
   top: 60px !important;
 }
+
+
+/* bootstrap carryover */
+
+
+body {
+
+  input, textarea, select {
+    color: #222222;
+  }
+
+  code, pre {
+    font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    margin: 0;
+    font-family: inherit;
+    font-weight: bold;
+    color: inherit;
+    text-rendering: optimizelegibility;
+  }
+ 
+
+  // this removes the unwanted top margin on a paragraph under a heading
+  h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
+    margin-top:0px;
+  }
+
+
+  form {
+    margin: 0 0 18px;
+  }
+  label, input, button, select, textarea {
+    font-size: 13px;
+    font-weight: normal;
+    line-height: 18px;
+  }
+  input, button, select, textarea {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  }
+  label {
+    display: block;
+    margin-bottom: 5px;
+  }
+  select, textarea {
+    display: inline-block;
+    padding: 4px;
+    margin-bottom: 9px;
+    font-size: 13px;
+    line-height: 18px;
+    color: #555555;
+  }
+  input {
+    &[type="text"], &[type="password"], &[type="datetime"], &[type="datetime-local"], &[type="date"], &[type="month"], &[type="time"], &[type="week"], &[type="number"], &[type="email"], &[type="url"], &[type="search"], &[type="tel"], &[type="color"] {
+      display: inline-block;
+      height: 18px;
+      padding: 4px;
+      margin-bottom: 9px;
+      font-size: 13px;
+      line-height: 18px;
+      color: #555555;
+    }
+  }
+  input {
+    width: 210px;
+  }
+  textarea {
+    width: 210px;
+    height: auto;
+    background-color: white;
+    border: 1px solid #cccccc;
+    border-radius: 3px;
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
+    transition: border linear 0.2s, box-shadow linear 0.2s;
+  }
+  input {
+    &[type="text"], &[type="password"], &[type="datetime"], &[type="datetime-local"], &[type="date"], &[type="month"], &[type="time"], &[type="week"], &[type="number"], &[type="email"], &[type="url"], &[type="search"], &[type="tel"], &[type="color"] {
+      background-color: white;
+      border: 1px solid #cccccc;
+      border-radius: 3px;
+      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+      -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
+      transition: border linear 0.2s, box-shadow linear 0.2s;
+    }
+  }
+  textarea:focus {
+    border-color: rgba(82, 168, 236, 0.8);
+    outline: 0;
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+  }
+  input {
+    &[type="text"]:focus, &[type="password"]:focus, &[type="datetime"]:focus, &[type="datetime-local"]:focus, &[type="date"]:focus, &[type="month"]:focus, &[type="time"]:focus, &[type="week"]:focus, &[type="number"]:focus, &[type="email"]:focus, &[type="url"]:focus, &[type="search"]:focus, &[type="tel"]:focus, &[type="color"]:focus {
+      border-color: rgba(82, 168, 236, 0.8);
+      outline: 0;
+      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+    }
+  }
+
+  input {
+    &[type="radio"], &[type="checkbox"] {
+      margin: 3px 0;
+      line-height: normal;
+      cursor: pointer;
+    }
+    &[type="submit"], &[type="reset"], &[type="button"], &[type="radio"], &[type="checkbox"] {
+      width: auto;
+    }
+  }
+
+  select, input[type="file"] {
+    line-height: 28px;
+  }
+
+  select {
+    width: 220px;
+    border: 1px solid #bbbbbb;
+    &[multiple], &[size] {
+      height: auto;
+    }
+    &:focus {
+      outline: thin dotted #333333;
+      outline: 5px auto -webkit-focus-ring-color;
+      outline-offset: -2px;
+    }
+  }
+  input {
+    &[type="file"]:focus, &[type="radio"]:focus, &[type="checkbox"]:focus {
+      outline: thin dotted #333333;
+      outline: 5px auto -webkit-focus-ring-color;
+      outline-offset: -2px;
+    }
+  }
+  .radio, .checkbox {
+    min-height: 18px;
+    padding-left: 18px;
+  }
+  .radio input[type="radio"], .checkbox input[type="checkbox"] {
+    float: left;
+    margin-left: -18px;
+  }
+  .controls > {
+    .radio:first-child, .checkbox:first-child {
+      padding-top: 5px;
+    }
+  }
+  .radio.inline, .checkbox.inline {
+    display: inline-block;
+    padding-top: 5px;
+    margin-bottom: 0;
+    vertical-align: middle;
+  }
+  .radio.inline .radio.inline, .checkbox.inline .checkbox.inline {
+    margin-left: 10px;
+  }
+  .input-xxlarge {
+    width: 530px;
+  }
+  input[class*="span"], select[class*="span"], textarea[class*="span"] {
+    float: none;
+    margin-left: 0;
+  }
+  .input-append {
+    input[class*="span"] {
+      display: inline-block;
+    }
+  }
+  .input-prepend {
+    input[class*="span"] {
+      display: inline-block;
+    }
+  }
+  input, textarea {
+    margin-left: 0;
+  }
+  input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
+    cursor: not-allowed;
+    background-color: #eeeeee;
+    border-color: #dddddd;
+  }
+  input {
+    &[type="radio"][disabled], &[type="checkbox"][disabled], &[type="radio"][readonly], &[type="checkbox"][readonly] {
+      background-color: transparent;
+    }
+  }
+  .control-group {
+    &.warning {
+      > label {
+        color: #c09853;
+      }
+      .checkbox, .radio, input, select, textarea {
+        color: #c09853;
+        border-color: #c09853;
+      }
+      .checkbox:focus, .radio:focus, input:focus, select:focus, textarea:focus {
+        border-color: #a47e3c;
+        box-shadow: 0 0 6px #dbc59e;
+      }
+      .input-prepend .add-on, .input-append .add-on {
+        color: #c09853;
+        background-color: #fcf8e3;
+        border-color: #c09853;
+      }
+    }
+    &.error {
+      > label {
+        color: #b94a48;
+      }
+      .checkbox, .radio, input, select, textarea {
+        color: #b94a48;
+        border-color: #b94a48;
+      }
+      .checkbox:focus, .radio:focus, input:focus, select:focus, textarea:focus {
+        border-color: #953b39;
+        box-shadow: 0 0 6px #d59392;
+      }
+      .input-prepend .add-on, .input-append .add-on {
+        color: #b94a48;
+        background-color: #f2dede;
+        border-color: #b94a48;
+      }
+    }
+    &.success {
+      > label {
+        color: #468847;
+      }
+      .checkbox, .radio, input, select, textarea {
+        color: #468847;
+        border-color: #468847;
+      }
+      .checkbox:focus, .radio:focus, input:focus, select:focus, textarea:focus {
+        border-color: #356635;
+        box-shadow: 0 0 6px #7aba7b;
+      }
+      .input-prepend .add-on, .input-append .add-on {
+        color: #468847;
+        background-color: #dff0d8;
+        border-color: #468847;
+      }
+    }
+  }
+  input:focus:required:invalid, textarea:focus:required:invalid, select:focus:required:invalid {
+    color: #b94a48;
+    border-color: #ee5f5b;
+  }
+  input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, select:focus:required:invalid:focus {
+    border-color: #e9322d;
+    box-shadow: 0 0 6px #f8b9b7;
+  }
+
+  .input-prepend, .input-append {
+    margin-bottom: 5px;
+  }
+  .input-prepend input, .input-append input, .input-prepend select, .input-append select {
+    position: relative;
+    margin-bottom: 0;
+    *margin-left: 0;
+    vertical-align: middle;
+    border-radius: 0 3px 3px 0;
+  }
+  .input-prepend input:focus, .input-append input:focus, .input-prepend select:focus, .input-append select:focus {
+    z-index: 2;
+  }
+  .input-prepend .add-on, .input-append .add-on {
+    display: inline-block;
+    width: auto;
+    height: 18px;
+    min-width: 16px;
+    padding: 4px 5px;
+    font-weight: normal;
+    line-height: 18px;
+    text-align: center;
+    text-shadow: 0 1px 0 white;
+    vertical-align: middle;
+    background-color: #eeeeee;
+    border: 1px solid #cccccc;
+  }
+  .input-prepend .add-on, .input-append .add-on, .input-prepend .btn, .input-append .btn {
+    margin-left: -1px;
+    border-radius: 0;
+  }
+  .input-prepend .active, .input-append .active {
+    background-color: #a9dba9;
+    border-color: #46a546;
+  }
+  .input-prepend {
+    .add-on, .btn {
+      margin-right: -1px;
+    }
+    .add-on:first-child, .btn:first-child {
+      border-radius: 3px 0 0 3px;
+    }
+  }
+  .input-append {
+    input, select {
+      border-radius: 3px 0 0 3px;
+    }
+    .add-on:last-child, .btn:last-child {
+      border-radius: 0 3px 3px 0;
+    }
+  }
+  .input-prepend.input-append {
+    input, select {
+      border-radius: 0;
+    }
+    .add-on:first-child, .btn:first-child {
+      margin-right: -1px;
+      border-radius: 3px 0 0 3px;
+    }
+    .add-on:last-child, .btn:last-child {
+      margin-left: -1px;
+      border-radius: 0 3px 3px 0;
+    }
+  }
+
+  .form-horizontal input, .form-horizontal textarea, .form-horizontal select,  .form-horizontal .input-prepend, .form-horizontal .input-append {
+    display: inline-block;
+    *display: inline;
+    margin-bottom: 0;
+  }
+  .form-horizontal .hide {
+    display: none;
+  }
+
+  .control-group {
+    margin-bottom: 9px;
+  }
+  .form-horizontal {
+    .control-group {
+      margin-bottom: 18px;
+      *zoom: 1;
+      &:before {
+        display: table;
+        content: "";
+      }
+      &:after {
+        display: table;
+        content: "";
+        clear: both;
+      }
+    }
+    .control-indent {
+      margin-left: 20px;
+      margin-bottom: 10px;
+    }
+    .control-label {
+      float: left;
+      width: 140px;
+      padding-top: 5px;
+      text-align: right;
+      font-weight: bold;
+    }
+    .controls {
+      *display: inline-block;
+      *padding-left: 20px;
+      margin-left: 160px;
+      *margin-left: 0;
+      &:first-child {
+        *padding-left: 160px;
+      }
+    }
+  }
+
+  .alert {
+    padding: 8px 35px 8px 14px;
+    margin-bottom: 18px;
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+    background-color: #fcf8e3;
+    border: 1px solid #fbeed5;
+    border-radius: 4px;
+    color: #c09853;
+  }
+  .alert .close {
+    position: relative;
+    top: -2px;
+    right: -21px;
+    line-height: 18px;
+  }
+  .alert-success {
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
+    color: #468847;
+  }
+  .alert-error {
+    background-color: #f2dede;
+    border-color: #eed3d7;
+    color: #b94a48;
+  }
+  .alert-info {
+    background-color: #d9edf7;
+    border-color: #bce8f1;
+    color: #3a87ad;
+  }
+  .alert {
+    .close {
+      float: right;
+      font-size: 20px;
+      font-weight: bold;
+      line-height: 18px;
+      color: black;
+      text-shadow: 0 1px 0 white;
+      opacity: 0.2;
+      filter: alpha(opacity = 20);
+      @include hover {
+        color: black;
+        text-decoration: none;
+        cursor: pointer;
+        opacity: 0.4;
+        filter: alpha(opacity = 40);
+      }
+    }
+    button.close {
+      padding: 0;
+      cursor: pointer;
+      background: transparent;
+      border: 0;
+      -webkit-appearance: none;
+    }
+  }
+  .bootbox.modal {
+    .modal-footer {
+      a.btn-primary {
+        color: white;
+      }
+    }
+  }
+}
+
+/* bootstrap colums */
+
+.row {
+  *zoom: 1;
+}
+.row:before,
+.row:after {
+  display: table;
+  content: "";
+}
+.row:after {
+  clear: both;
+}
+[class*="span"] {
+  float: left;
+}
+.span24 {
+  width: 1236px;
+}
+.span15 {
+  width: 768px;
+  margin-left: 12px;
+}
+.span14 {
+  width: 716px;
+}
+.span13 {
+  width: 664px;
+}
+.span11 {
+  width: 560px;
+}
+.span10 {
+  width: 508px;
+}
+.span8 {
+  width: 404px;
+}
+.span6 {
+  width: 300px;
+}
+.span5 {
+  width: 248px;
+}
+.span4 {
+  width: 196px;
+  margin-right: 12px;
+}
+.span3 {
+  width: 144px;
+}
+.span2 {
+  width: 92px;
+}
+.offset2 {
+  margin-left: 116px;
+}
+.offset1 {
+  margin-left: 64px;
+}
+

app/assets/stylesheets/desktop/topic-list.scss

@@ -8,6 +8,8 @@
 // List controls
 // --------------------------------------------------
 
+
+
 #list-controls {
   .nav {
     float: left;
@@ -56,7 +58,7 @@
     }
     &.category-description {
       td {
-        color: #000;
+        color: $nav-pills-border-color-active;
       }
     }
     &.highlighted {
@@ -80,7 +82,7 @@
     color: $topic-list-th-color;
     font-weight: bold;
     font-size: 13px;
-    @include box-shadow(inset 0 1px 0 $white);
+    background: #f6f6f6;
     &:first-of-type {
       @include border-radius-all(4px 0 0 0);
     }
@@ -93,12 +95,16 @@
     color: $topic-list-td-color;
     font-size: 14px;
   }
+
+
+
   .star {
     width: 20px;
     padding-right: 0;
     .icon-star {
       position: relative;
-      top: 1px;
+      top: -1px;
+      font-size: 15px !important;
     }
     + .main-link {
       padding-left: 0;
@@ -192,38 +198,18 @@
 }
 
 
-#topic-list.categories {
+#topic-list tbody tr.has-excerpt .star
-  th.latest, td.latest {
+ {
-    padding-left: 12px;
+
-  }
+
-  th.num {
+  vertical-align: top;
-    width: 45px;
+  margin-top: 3px;
-  }
-  .last-user-info {
-    font-size: 12px;
-    margin-top: 3px;
-  }
-  tbody td {
-    padding-bottom: 20px;
-  }
-  .category{
-    position: relative;
-    width: 55%;
-    .featured-users {
-      position: absolute;
-      right: 18px;
-      top: 3px;
-    }
-    .category-description {
-      margin-top: 10px;
-    }
-    .badge-category {
-      padding: 6px 10px;
-      font-size: 14px;
-    }
-  }
 }
 
+
+
+
+
 // Category list
 // --------------------------------------------------
 
@@ -339,6 +325,12 @@
   }
   #list-area {
     margin-bottom: 300px;
+
+
+.topic-statuses .topic-status i {font-size: 15px;}
+
+
+
     .empty-topic-list {
       padding: 10px;
     }

app/assets/stylesheets/desktop/topic.scss

@@ -1,417 +1,94 @@
-/* styles that apply when viewing a topic/topic */
 
-@import "common/foundation/variables";
+.post-info a {color: #aaa;}
-@import "common/foundation/mixins";
 
-// Topic title
+.topic-meta-data-inside {
-// --------------------------------------------------
+  float: right; 
-
+  margin-top: -30px;
-
+  font-size: 12px;
-// note that this CSS affects both the docked title and the in-page title
-#topic-title,
-.extra-info-wrapper {
-  h1 {
-    display: inline-block;
-    max-width: 850px;
-    margin-top: 5px;
-    font-size: 22px;
-    line-height: 28px;
-  }
-
-  .star {
-    height: 40px;
-    font-size: 20px !important;
-    line-height: 36px !important;
-    vertical-align: top;
-  }
-  .topic-statuses {
-    &:empty {
-      display: none;
-    }
-  }
-  .topic-status {
-    margin: 0 4px 0 0;
-    padding: 0;
-    &:last-of-type {
-      margin-right: 0;
-    }
-    > .icon {
-      display: inline-block;
-      margin-top: 2px;
-      vertical-align: top;
-      font-size: 23px;
-      line-height: 23px;
-    }
-  }
-  h1 > .badge-category {
-    margin-top: 5px;
-    vertical-align: top;
-  }
-  .edit-topic {
-    i {
-      font-size: 12px;
-      line-height: 28px;
-      vertical-align: top;
-    }
-    .discourse-no-touch & {
-      visibility: hidden;
-    }
-  }
-  @include hover {
-    .edit-topic {
-      visibility: visible;
-    }
-  }
-  #edit-title,
-  .chzn-container {
-    margin: 6px 0;
-  }
-  .category-combobox {
-    width: 330px;
-    .chzn-drop {
-      left: -9000px;
-      width: 328px;
-    }
-    .chzn-search input {
-      width: 278px;
-    }
-  }
-  button {
-    margin: 8px 0;
-    vertical-align: top;
-  }
-  .btn-primary {
-    margin-left: 5px;
-  }
 }
 
 
-// when the H1 is docked at the top, there is less room
+.post-info  {
-// due to the username and search / notifications / etc controls
+  display: inline-block;
-.extra-info-wrapper {
-  @include medium-width {
-    h1 {
-      max-width: 735px;
-    }
-  }
-  @include small-width {
-    h1 {
-      max-width: 690px;
-    }
-  }
 }
 
+.edits {margin-right: 5px;}
 
-// Page header
 #topic-title {
-  margin-bottom: 14px;
+  margin-bottom: 20px;
-  #edit-title {
+margin: -20px 0 0 0;
-    width: 350px;
+line-height: 1.7em;
-  }
+
+h1 {
+
+  font-size: 2em;   
+  margin: 0;
+
+
+a.badge-category {vertical-align: top;}
+
+a.edit-topic {font-size: 15px;}
+
 }
 
-// App header
+
-.extra-info-wrapper {
+}
-  float: left;
+
+#topic-closing-info {
   margin-left: 10px;
 }
 
-#multi-select-options {
+.docked #topic-progress {
-  button {
+    box-shadow: 0 0 3px #aaa;
-    margin-bottom: 5px;
-    width: 150px;
-  }
-}
-
-#topic-filter {
-  background-color: $highlight_light;
-  padding: 8px;
-  bottom: 0;
-  position: fixed;
-  width: 100%;
-  font-size: 15px;
-  z-index: 495
-}
-
-#main {
-  // used in topic onebox
-  .topic-info {
-    margin-top: 20px;
-    .info-line {
-      float: left;
-      color: lighten($black, 40%);
-    }
-    .posters {
-      margin-right: 10px;
-      float: right;
-    }
-  }
-  section.divider {
-    background-color: $dark_gray;
-    height: 3px;
-    margin: 10px 0 20px 0;
-    opacity: 1;
-    @include transition(opacity 3s);
-    &.fade {
-      opacity: 0;
-    }
-  }
-  a.mention, .ac-wrap .item span {
-    @include border-radius-all(6px);
-    background-color: $quote-background;
-    padding: 2px 5px;
-    color: $darkish_gray;
-  }
-  a.mention {
-    cursor: pointer;
-    .clicks {
-      display:none;
-    }
-  }
-  span.spoiler {
-    background-color: $black;
-    color: $black;
-    padding: 2px;
-    @include hover {
-      color: $white;
-    }
-  }
-
-  a.attachment:before {
-    display: inline-block;
-    margin-right: 4px;
-    font-family: "FontAwesome";
-    content: "\f019";
-  }
-  .attachment + .size {
-    margin: 0 5px;
-  }
-
-  // When we are quoting something
-  aside.quote {
-    border-left: 5px solid darken($quote-background, 20%);
-    margin-top: 14px;
-    font-size: 14px;
-    line-height: 20px;
-    padding-left: 5px;
-    background-color: $quote-background;
-    overflow: hidden;
-    &:nth-of-type(1) {
-      margin: 0;
-    }
-    .title {
-      padding: 8px 8px 0px;
-      background-color: $quote-background;
-      a,
-      .avatar {
-        margin-right: 4px;
-        vertical-align: top;
-      }
-    }
-    .quote-controls {
-      float: right;
-      color: #323232;
-      @include fades-in(0.25s);
-      a {
-        margin: 0;
-      }
-      .back:before,
-      .quote-other-topic:before {
-        display: inline-block;
-        margin-left: 8px;
-        color: #323232;
-        font-family: "FontAwesome";
-      }
-      .back:before {
-        content: "\f062";
-      }
-      .quote-other-topic:before {
-        content: "\f061";
-      }
-    }
-    .discourse-touch & {
-      .quote-controls {
-        @include visible;
-        i,
-        a {
-          opacity: 0.5;
-        }
-      }
-    }
-    @include hover {
-      .quote-controls {
-        @include visible;
-      }
-    }
-    blockquote {
-      margin: 0;
-      border: 0;
-      padding: 8px;
-      color: #333;
-      *:last-child {
-        margin-bottom: 0;
-      }
-      .highlighted {
-        display: inline;
-        padding: 3px 5px 3px 8px;
-        background-color: $highlight;
-      }
-    }
-  }
-  .quote-button {
-    background-color: $blue;
-    z-index: 500;
-    color: $white;
-    font-weight: bold;
-    font-size: 14px;
-    padding: 5px 9px 5px 9px;
-    text-decoration: none;
-    border: 5px solid rgba(0, 0, 0, 0.75);
-    top: 10px;
-    left: 10px;
-    position: absolute;
-    display: none;
-    @include border-radius-all(4px);
-    @include hover {
-      cursor: pointer;
-      background-color: lighten($blue, 10%);
-    }
-    &.visible {
-      display: block;
-    }
-  }
-  #topic-bottom {
-    height: 20px;
-  }
-
-  #topic-list {
-    th {
-      background-color: $topic-list-th-background-color;
-    }
-  }
-
-  #suggested-topics {
-    margin: 40px 0 40px 20px;
-    width: 1110px;
-    @include medium-width { width: 970px; }
-    @include small-width { width: 870px; }
-    h3 {
-      font-size: 15px;
-      margin-left: 6px;
-      color: darken($darkish_gray, 20%);
-      margin-bottom: 10px;
-    }
-  }
-
-  #topic-footer-buttons {
-    margin: 20px 0 0 103px;
-
-    width: 1027px;
-    @include medium-width { width: 887px; }
-    @include small-width { width: 787px; }
-
-    .btn-group {
-      margin-top: 20px;
-      p {
-        line-height: 32px;
-        float: left;
-        margin: 0 10px;
-        color: #7f7f7f;
-      }
-      h4.title {
-        line-height: 32px;
-        font-weight: normal;
-        float: left;
-        display: inline;
-      }
-    }
-    ul.dropdown-menu {
-      top: auto;
-      bottom: 115%;
-      left: 0px;
-    }
-    ul li a {
-      span {
-        display: block;
-        font-size: 11px;
-      }
-      span.title {
-        font-weight: bold;
-        font-size: 14px;
-      }
-    }
-    button {
-      margin-right: 5px;
-      span.caret {
-        margin-left: 10px;
-      }
-      i {
-        margin-right: 5px;
-      }
-    }
-  }
-
-  #topic-closing-info {
-    margin-left: 103px;
-  }
-}
-
-kbd {
-  white-space: nowrap;
-  border-style: solid;
-  border-color: #cccccc #aaaaaa #888888 #bbbbbb;
-  padding: 0px 6px;
-  @include box-shadow(0 1px 0 rgba(0, 0, 0, 0.2) 0 0 0 1px white inset);
-  border-radius: 4px;
-  background-color: #fafafa;
-  border-width: 1px 1px 2px;
-  color: #444444;
-  font-family: "Helvetica Neue", Helvetica, Arial, Sans-serif;
-  font-size: 11px;
-  font-weight: bold;
-  white-space: nowrap;
-  display: inline-block;
-  margin-bottom: 5px;
-}
-
-.post-text img {
-  max-width: 640px;
 }
 
 #topic-progress-wrapper {
   position: fixed;
   width: 0;
+  right: 0;
   bottom: 0px;
-  right: 50%;
   z-index: 500;
+  margin-right: 140px;
   outline: 1px solid transparent;
+
+
 }
 
-.posts .spinner {
+
-  width: 100px;
+.reply-new {
-  margin: 0 auto 30px 375px;
+i {
+
+  margin-right: 5px;
+  background: #fff;
+  border: 1px solid #ddd;
+  padding: 3px 4px; 
+  border-radius: 20px;
 }
 
-.posts-wrapper {
-  position: relative;
 }
 
-#topic-progress-wrapper.docked {
+a.reply-new {color: #aaa;}
-  #topic-progress {
+a:hover.reply-new {color: #56aed3; 
-    margin-left: 6px;
+
-  }
+i {background: #e4f2f8;
-  position: absolute;
+  border: none;
+  padding: 4px 5px;
 }
 
+}
+
+
 #topic-progress {
+
+    box-shadow: 0 0 3px #000;
+
   position: relative;
-  left: 275px;
   &.hidden {
     display: none;
   }
   border: none;
-  background-color: $white;
+  background-color: #ddd;
-  color: $darkish_gray;
+  color: #666;
   width: 130px;
   height: 34px;
   .nums {
@@ -430,28 +107,20 @@ kbd {
     left: 4px;
     border: 0;
     background: none;
-    color: $darkish_gray;
+  color: #666;
-    width: 60px;
-    text-align: left;
     i {
       font-size: 18px;
     }
     &:nth-of-type(2) {
       right: 4px;
       left: auto;
-      text-align: right;
-    }
-    @include hover {
-      color: darken($darkish_gray, 10%);
-      &:disabled {
-        cursor: default;
-        color: lighten($darkish_gray, 30%);
-      }
     }
 
+
     &:disabled {
+
       cursor: default;
-      color: lighten($darkish_gray, 30%);
+  color: #666;
     }
   }
   h4 {
@@ -464,55 +133,36 @@ kbd {
     top: 0px;
     bottom: 0px;
     width: 0px;
-    border-right: 1px solid $white;
+    border-right: 1px solid #ccc;
     // background-color: #d4eaf4;
     // background-color: #C5E8F7;
     background-color: #C6F3B6;
   }
 }
 
-#edit-title {
+#topic-progress-wrapper.docked {
-  vertical-align: top;
-}
-
-.private_message .participants .user {
-  float: left;
-  display: block;
-  line-height: 35px;
-  margin-right: 15px;
-  margin-top: 8px;
-  &.group {
-    color: black;
-  }
-}
-
-.posts-wrapper .spinner {
-  margin-left: 390px;
-}
-
-
-@include medium-width {
-  .posts-wrapper .spinner {
-    margin-left: 380px;
-  }
   #topic-progress {
-    left: 325px;
+  }
+  position: absolute;
+}
+
+.topic-statuses .topic-status {
+  padding: 0;
+  i {
+    margin-left: 5px !important;
+    font-size:20px;
+
   }
 }
 
 
-@include small-width {
-  .posts-wrapper .spinner {
-    margin-left: 360px;
-  }
-  #topic-progress {
-    left: 0;
-  }
-  #topic-progress-wrapper {
-    right: 180px;
-  }
-}
 
-.remove-invited .icon-remove {
+
-  font-size: 10px;
+.topic-post:last-of-type {padding-bottom: 40px;}
-}
+
+.heatmap-high {color: #f77 !important;}
+.heatmap-med {color: #a00 !important;}
+.heatmap-low {color: #700 !important;}
+
+.onebox-result {margin-top: 15px;}
+.source .info {padding-right: 10px;}

app/assets/stylesheets/desktop/user.scss

@@ -62,6 +62,7 @@
 
   h3 {
     color: #666;
+    margin: 20px 0 10px 0;
   }
 
   .summary {
@@ -129,43 +130,6 @@
     @include border-radius-all(4px);
   }
 
-
-  .about.collapsed-info {
-    .controls {
-      margin-top: 0;
-    }
-
-    .details {
-      .secondary { display: none; }
-      .bio { display: none; }
-
-      .primary {
-        width: 100%;
-        text-align: left;
-        margin-top: 0;
-
-        .avatar {
-          float: left;
-          margin-right: 10px;
-          border: 2px solid white;
-          width: 45px;
-          height: 45px;
-        }
-
-        h1 {
-          font-size: 20px;
-          line-height: 22px;
-        }
-
-        h2 {
-          font-size: 17px;
-          line-height: 20px;
-          margin-top: 4px;
-        }
-      }
-    }
-  }
-
   .about {
     background-color: #444;
     margin-bottom: 10px;
@@ -202,10 +166,12 @@
       }
 
       .primary {
-        margin-top: 30px;
+        margin-top: 20px;
         float: left;
         width: 75%;
 
+        h1, h2 {margin-top: 10px;}
+
         .bio {
           color: #ddd;