From 9c02ad73accc019339a7c78e590c13e3d467bfc2 Mon Sep 17 00:00:00 2001
From: Kris Aubuchon <shout@k-ris.com>
Date: Mon, 26 May 2014 11:33:47 -0400
Subject: [PATCH] merging more styles into base, also fixing <big> abuse

---
 .../stylesheets/common/base/discourse.scss    |   4 +
 .../stylesheets/common/base/header.scss       | 239 ++++++++++++++++++
 app/assets/stylesheets/desktop/header.scss    | 202 ---------------
 .../stylesheets/desktop/topic-list.scss       |   6 +
 app/assets/stylesheets/mobile/header.scss     | 197 +--------------
 5 files changed, 255 insertions(+), 393 deletions(-)
 create mode 100644 app/assets/stylesheets/common/base/header.scss

diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index edd8e832c46..8e14dc45b1c 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -8,6 +8,10 @@
   margin-left: 12px;
 }
 
+big {
+  font-size: 28px;
+}
+
 blockquote {
   background-color: scale-color-diff();
   border-left: 5px solid darken(scale-color-diff(), 10%);
diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
new file mode 100644
index 00000000000..502ffe5a62f
--- /dev/null
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -0,0 +1,239 @@
+.d-header {
+    min-width: 100%;
+    position: absolute;
+    top: 0;
+    z-index: 1001;
+    background-color: $header_background;
+    box-shadow: 0 2px 4px -2px rgba($header_primary, .25);
+
+    .docked & {
+      position: fixed;
+
+    }
+
+    .contents {
+      margin: 10px 0;
+    }
+
+    .title {
+      display: table;
+      float: left;
+      height: 40px;
+      > a {
+        display: table-cell;
+        vertical-align: middle;
+      }
+    }
+
+    #site-logo {
+      max-height: 40px;
+      max-width: 122px;
+    }
+
+    .fa-home {
+      font-size: 20px;
+      line-height: 40px;
+    }
+
+    .panel {
+      float: right;
+      position: relative;
+    }
+
+    .current-username {
+      float: left;
+      a {
+        color: $header_primary;
+        font-size: 14px;
+      }
+    }
+    button.login-button {
+      float: left;
+      margin-top: 7px;
+      padding: 6px 10px;
+      .fa { margin-right: 3px; }
+    }
+    .icons {
+      float: left;
+      text-align: center;
+      margin: 0 0 0 5px;
+      list-style: none;
+      > li {
+        float: left;
+      }
+      .icon {
+        display: block;
+        padding: 3px;
+        color: scale-color($header_primary, $lightness: 50%);
+        text-decoration: none;
+        cursor: pointer;
+        border-top: 1px solid transparent;
+        border-left: 1px solid transparent;
+        border-right: 1px solid transparent;
+
+
+        &:hover {
+          color: $primary;
+          background-color:  scale-color-diff();
+          border-top: 1px solid transparent;
+          border-left: 1px solid transparent;
+          border-right: 1px solid transparent;
+        }
+        &:active {
+          color: $primary;
+          background-color: scale-color-diff();
+        }
+      }
+      .active .icon {
+        position: relative;
+        color: #7b7b7b;
+        background-color: $secondary;
+        cursor: default;
+        border-top: 1px solid scale-color-diff();
+        border-left: 1px solid scale-color-diff();
+        border-right: 1px solid scale-color-diff();
+        &:after {
+          display: block;
+          position: absolute;
+          top: 100%;
+          left: 0;
+          z-index: 1101;
+          width: 100%;
+          height: 0;
+          content: "";
+          border-top: 1px solid $secondary;
+        }
+        &:hover {
+        border-bottom: none;
+        }
+      }
+      [class^="fa fa-"] {
+        width: 32px;
+        height: 32px;
+        font-size: 20px;
+        line-height: 32px;
+        display: inline-block;
+      }
+      .notifications {
+        position: relative;
+      }
+      .badge-notification {
+        position: absolute;
+        top: -9px;
+        z-index: 1;
+        margin-left: 0;
+      }
+      .unread-notifications {
+        right: -4px;
+        background-color: scale-color($tertiary, $lightness: 50%);
+      }
+      .unread-private-messages {
+        left: -4px;
+      }
+    }
+    .flagged-posts {
+      background-color: $danger;
+    }
+
+}
+
+.d-dropdown {
+    display: none;
+    position: absolute;
+    background: $secondary;
+    max-height: 417px;
+    top: 100%;
+    right: 0;
+    z-index: 1100;
+    overflow: auto;
+    border: 1px solid scale-color-diff();
+    @include box-shadow(0 2px 2px rgba($primary, .4));
+
+  ul {
+    margin: 0;
+    list-style: none;
+  }
+  li {
+    padding: 5px;
+    font-size: 13px;
+    line-height: 16px;
+    .fa {
+      margin-right: 3px;
+    }
+  }
+
+  .selected {
+    background-color: scale-color($tertiary, $lightness: 90%);
+  }
+
+  // Notifications
+
+  &#notifications-dropdown {
+    .fa {
+      color: scale-color($primary, $lightness: 50%);
+    }
+    li {
+      background-color: scale-color($tertiary, $lightness: 90%);
+    }
+    .read {
+      background-color: $secondary;
+    }
+    .none {
+      padding: 5px;
+    }
+    .loading {
+      padding: 10px;
+      display: block;
+      color: scale-color($primary, $lightness: 50%);
+      font-size: 24px;
+      text-align: center;
+    }
+  }
+
+  // Search
+
+  input[type='text'] {
+    width: 298px;
+    height: 22px;
+    margin: 5px;
+    padding: 5px;
+  }
+  .searching {
+    display: block;
+    position: absolute;
+    top: 13px;
+    right: 13px;
+    color: scale-color($primary, $lightness: 50%);
+    font-size: 18px;
+  }
+  .no-results {
+    padding: 0 5px 5px;
+  }
+  .filter {
+    float: right;
+  }
+
+  // Categories
+
+  .category {
+    float: left;
+    background-color: transparent;
+    line-height: 20px;
+  }
+
+  &#user-dropdown {
+    width: 118px;
+    .user-dropdown-links {
+    text-align: right;
+
+    }
+  }
+
+  .btn {
+    padding: 2px 8px;
+    margin-bottom: 2px;
+    .fa {
+      margin-right: 5px;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/desktop/header.scss b/app/assets/stylesheets/desktop/header.scss
index 7d0753be104..b901e6107a3 100644
--- a/app/assets/stylesheets/desktop/header.scss
+++ b/app/assets/stylesheets/desktop/header.scss
@@ -3,138 +3,19 @@
 // --------------------------------------------------
 
 .d-header {
-  min-width: 100%;
-  position: absolute;
-  top: 0;
   left: 0;
   z-index: 1000;
-  box-shadow: 0 2px 4px -2px rgba($header_primary, .25);
-  background-color: $header_background;
   padding-top: 3px;
-  .docked & {
-    position: fixed;
-  }
-  .contents {
-    margin: 10px 0;
-  }
-  .title {
-    display: table;
-    float: left;
-    height: 40px;
-    > a {
-      display: table-cell;
-      vertical-align: middle;
-    }
-  }
-  #site-logo {
-    max-height: 40px;
-  }
   .fa-home {
-    font-size: 20px;
-    line-height: 40px;
     padding-right: 3px;
     padding-top: 3px;
   }
-  .panel {
-    float: right;
-    position: relative;
-  }
   .current-username {
-    float: left;
     a {
-      color: $header_primary;
-      font-size: 14px;
       display:block;
       margin-top: 10px;
     }
   }
-  button.login-button {
-    float: left;
-    margin-top: 7px;
-    padding: 6px 10px;
-    .fa { margin-right: 3px; }
-  }
-  .icons {
-    float: left;
-    text-align: center;
-    margin: 0 0 0 5px;
-    list-style: none;
-    > li {
-      float: left;
-    }
-    .icon {
-      display: block;
-      padding: 3px;
-      color: scale-color($header_primary, $lightness: 50%);
-      text-decoration: none;
-      cursor: pointer;
-      border-top: 1px solid transparent;
-      border-left: 1px solid transparent;
-      border-right: 1px solid transparent;
-
-
-      &:hover {
-        color: $primary;
-        background-color:  scale-color-diff();
-        border-top: 1px solid transparent;
-        border-left: 1px solid transparent;
-        border-right: 1px solid transparent;
-      }
-      &:active {
-        color: $primary;
-        background-color: scale-color-diff();
-      }
-    }
-    .active .icon {
-      position: relative;
-      color: #7b7b7b;
-      background-color: $secondary;
-      cursor: default;
-      border-top: 1px solid scale-color-diff();
-      border-left: 1px solid scale-color-diff();
-      border-right: 1px solid scale-color-diff();
-      &:after {
-        display: block;
-        position: absolute;
-        top: 100%;
-        left: 0;
-        z-index: 1101;
-        width: 100%;
-        height: 0;
-        content: "";
-        border-top: 1px solid $secondary;
-      }
-      &:hover {
-      border-bottom: none;
-      }
-    }
-    [class^="fa fa-"] {
-      width: 32px;
-      height: 32px;
-      font-size: 20px;
-      line-height: 32px;
-      display: inline-block;
-    }
-    .notifications {
-      position: relative;
-    }
-    .badge-notification {
-      position: absolute;
-      top: -9px;
-      z-index: 1;
-      margin-left: 0;
-    }
-    .unread-notifications {
-      right: -4px;
-      background-color: scale-color($tertiary, $lightness: 50%);
-    }
-    .unread-private-messages {
-      left: -4px;
-    }
-  }
-  .flagged-posts {
-    background-color: $danger;
-  }
 }
 
 /* needs to be global, used in user-drop down and user page too */
@@ -142,7 +23,6 @@
   background-color: $success;
 }
 
-
 #main {
   position: relative;
 }
@@ -155,102 +35,20 @@
 // --------------------------------------------------
 
 .d-dropdown {
-  display: none;
-  position: absolute;
   width: 320px;
-  max-height: 417px;
-  top: 100%;
-  right: 0;
-  z-index: 1100;
   overflow: auto;
-  border: 1px solid scale-color-diff();
-  background-color: $secondary;
-  @include box-shadow(0 2px 2px rgba($primary, .4));
-
   // Common
 
-  ul {
-    margin: 0;
-    list-style: none;
-  }
-  li {
-    padding: 5px;
-    font-size: 13px;
-    line-height: 16px;
-    .fa {
-      margin-right: 3px;
-    }
-  }
   .heading {
     border-top: 1px solid scale-color-diff();
   }
-  .selected {
-    background-color: scale-color($tertiary, $lightness: 90%);
-  }
-
-  // Notifications
-
-  &#notifications-dropdown {
-    .fa {
-      color: scale-color($primary, $lightness: 50%);
-    }
-    li {
-      background-color: scale-color($tertiary, $lightness: 90%);
-    }
-    .read {
-      background-color: $secondary;
-    }
-    .none {
-      padding: 5px;
-    }
-    .loading {
-      padding: 10px;
-      display: block;
-      color: scale-color($primary, $lightness: 50%);
-      font-size: 24px;
-      text-align: center;
-    }
-  }
-
-  // Search
-
-  input[type='text'] {
-    width: 298px;
-    height: 22px;
-    margin: 5px;
-    padding: 5px;
-  }
-  .searching {
-    display: block;
-    position: absolute;
-    top: 13px;
-    right: 13px;
-    color: scale-color($primary, $lightness: 50%);
-    font-size: 18px;
-  }
-  .no-results {
-    padding: 0 5px 5px;
-  }
-  .filter {
-    float: right;
-  }
 
   // Categories
 
   .category {
-    float: left;
-    background-color: transparent;
     line-height: 20px;
   }
 
-  &#user-dropdown {
-    width: 118px;
-    .user-dropdown-links {
-    text-align: right;
-
-    }
-  }
-
   .btn {
     padding: 2px 8px;
     margin-bottom: 2px;
diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
index 1af2665a5ae..f7f0d50c60b 100644
--- a/app/assets/stylesheets/desktop/topic-list.scss
+++ b/app/assets/stylesheets/desktop/topic-list.scss
@@ -234,6 +234,12 @@
   th.posts {
     position: relative;
   }
+  tbody tr:nth-child(odd) {
+    background-color: darken($secondary, 3%);
+  }
+  tbody tr:nth-child(even) {
+    background-color: $secondary;
+  }
   th .toggle-admin {
     position: absolute;
     padding: 3px 8px;
diff --git a/app/assets/stylesheets/mobile/header.scss b/app/assets/stylesheets/mobile/header.scss
index 012c5d40ae2..8ec4f4292be 100644
--- a/app/assets/stylesheets/mobile/header.scss
+++ b/app/assets/stylesheets/mobile/header.scss
@@ -5,243 +5,58 @@
 .d-header {
   padding-left: 10px !important;
   padding-right: 10px !important;
-  min-width: 100%;
-  position: absolute;
-  top: 0;
-  z-index: 1001;
-  background-color: $header_background;
-  box-shadow: 0 0 3px rgba($header_primary, .6);
-
-  .docked & {
-    position: fixed;
-
-  }
 
   a.star {float: left;}
-  .contents {
-    margin: 10px 0;
-  }
-  .title {
-    display: table;
-    float: left;
-    height: 40px;
-    > a {
-      display: table-cell;
-      vertical-align: middle;
-    }
-  }
-  #site-logo {
-    max-height: 40px;
-    max-width: 122px;
-  }
-  .fa-home {
-    font-size: 20px;
-    line-height: 40px;
-  }
+
   .panel {
-    float: right;
-    position: relative;
     margin-right: 20px;
   }
   .current-username {
-    float: left;
     display: none;
     a {
-      color: darken($header_primary, 40%);
-      font-size: 14px;
       line-height: 40px;
     }
   }
-  button.login-button {
-    float: left;
-    margin-top: 7px;
-    padding: 6px 10px;
-    .fa { margin-right: 3px; }
-  }
+
   .icons {
-    float: left;
-    text-align: center;
-    margin: 0 0 0 5px;
-    list-style: none;
-    > li {
-      float: left;
-    }
-    .icon {
-      display: block;
-      padding: 4px;
-      color: scale-color($header_primary, $lightness: 50%);
-      text-decoration: none;
-      cursor: pointer;
-      &:hover {
-        color: $primary;
-        background-color: scale-color($primary, $lightness: 75%);
-      }
-      &:active {
-        color: $primary;
-        background-color: scale-color($primary, $lightness: 75%);
-      }
-    }
-    .active .icon {
-      position: relative;
-      color: scale-color($primary, $lightness: 75%);
-      background-color: $secondary;
-      border: 1px solid scale-color-diff();
-      cursor: default;
-      &:after {
-        display: block;
-        position: absolute;
-        top: 100%;
-        left: 0;
-        z-index: 1101;
-        width: 100%;
-        height: 0;
-        content: "";
-        border-top: 1px solid $secondary;
-      }
-    }
-    [class^="fa fa-"] {
-      width: 32px;
-      height: 32px;
-      font-size: 20px;
-      line-height: 32px;
-      display: inline-block;
-    }
-    .notifications {
-      position: relative;
-    }
     .badge-notification {
-      position: absolute;
-      top: -9px;
-      z-index: 1;
-      margin-left: 0;
       color: $tertiary !important;
       /* this !important is a terrible hack but the badge colors are
       being overridden in a way I can't figure out on mobile, appears
       to be a CSS precedence problem */
     }
-    .unread-notifications {
-      right: -4px;
-      background-color: scale-color($tertiary, $lightness: 40%);
-      color: $tertiary;
-    }
-    .unread-private-messages {
-      left: -4px;
-    }
-  }
-  .flagged-posts {
-    background-color: $danger;
+
+    .active .icon {
+      &:after { margin-top: -1px; }
   }
 }
-/* needs to be global, used in user-drop down and user page too */
-.unread-private-messages {
-  background-color: $success;
 }
-
-#main {
-  position: relative;
-}
-
 #main-outlet {
   padding-top: 60px;
 }
 
+
 // Dropdowns
 // --------------------------------------------------
 
 .d-dropdown {
-  display: none;
   width: 290px;
-  position: absolute;
-  top: 100%;
-  right: 0;
-  z-index: 1100;
   margin-top: -1px;
-  border: 1px solid scale-color-diff();;
-  background-color: $secondary;
-  @include box-shadow(0 1px 1px rgba($primary, 0.2));
 
   // Common
 
-  ul {
-    margin: 0;
-    list-style: none;
-  }
-  li {
-    padding: 5px;
-    font-size: 13px;
-    line-height: 16px;
-    .fa {
-      margin-right: 3px;
-    }
-  }
   .heading {
     color: $primary;
     font-weight: bold;
     font-size: 12px;
     line-height: 15px;
-
-
-  }
-  .selected {
-    background-color: scale-color($tertiary, $lightness: 75%);
-  }
-
-  // Notifications
-
-  &#notifications-dropdown {
-    .fa {
-      color: #777;
-    }
-    li {
-      background-color: scale-color($tertiary, $lightness: 85%);
-    }
-    .read {
-      background-color: $secondary;
-    }
-    .none {
-      padding: 5px;
-    }
-    .loading {
-      padding: 10px;
-      display: block;
-      color: #777;
-      font-size: 24px;
-      text-align: center;
-    }
   }
 
   // Search
 
   input[type='text'] {
     width: 267px;
-    height: 22px;
-    margin: 5px;
-    padding: 5px;
     font-size: 16px;
-    &:focus {
-      @include box-shadow((inset 0 1px 1px rgba($primary, 0.075), 0 0 4px rgba(82, 168, 236, 0.6)));
-    }
-  }
-  .searching {
-    display: block;
-    position: absolute;
-    top: 13px;
-    right: 13px;
-    color: #777;
-    font-size: 18px;
-  }
-  .no-results {
-    padding: 0 5px 5px;
-  }
-  .filter {
-    float: right;
-  }
-
-  // Categories
-
-  .category {
-    float: left;
-    background-color: transparent;
   }
 
   &#user-dropdown {