Improve page styles

scss/main.scss

@@ -76,13 +76,23 @@
   @import "modules/color-overrides";
   @import "modules/hacks";
 
-  @import "pages/api";
-  @import "pages/apps";
-  @import "pages/oauth";
-  @import "pages/pricing";
-  @import "pages/spaces";
-  @import "pages/split";
-  @import "pages/status";
-  @import "pages/website";
+  @import "modules/pages/admin/base";
+  @import "modules/pages/admin/account";
+  @import "modules/pages/admin/billing";
+  @import "modules/pages/admin/customize";
+  @import "modules/pages/admin/directory";
+  @import "modules/pages/admin/files";
+  @import "modules/pages/admin/help";
+  @import "modules/pages/admin/nav";
+  @import "modules/pages/admin/pricing";
+  @import "modules/pages/admin/settings";
+  @import "modules/pages/admin/statistics";
+  @import "modules/pages/admin/tooltips";
+  @import "modules/pages/api";
+  @import "modules/pages/apps";
+  @import "modules/pages/downloads";
+  @import "modules/pages/oauth";
+  @import "modules/pages/spaces";
+  @import "modules/pages/status";
 
 }

scss/pages/_api.scss → scss/modules/pages/_api.scss

@@ -1,3 +1,7 @@
+.api #header_logo img {
+  display: none;
+}
+
 body.api {
   header .header_links a {
     color: $base-font-color;
@@ -132,9 +136,95 @@ body.api {
   .hljs-regexp {
     color: map-get($code-colors, link);
   }
+
+  span {
+    &.btn {
+      background-color: $color-base;
+    }
+
+    &.deprecation,
+    &.warning {
+      background-color: $color-red;
+      border-color: $color-red;
+    }
+  }
 }
 
 nav#api_nav {
   background: transparent;
   text-shadow: 0 1px 1px $color-shadow-medium;
 }
+
+#api_nav .footer_nav {
+  a {
+    color: $base-link-color;
+
+    &:hover {
+      color: $base-link-color-active;
+    }
+  }
+
+  .footer_signature {
+    color: $color-red;
+  }
+}
+
+.api_articles {
+  .api_articles_section {
+    border-bottom-color: $color-base;
+  }
+
+  .article_tag_count {
+    color: $color-highlight;
+  }
+}
+
+.api.feature_related_content {
+  #api_related_content {
+    h2 {
+      color: $base-font-color;
+    }
+
+    .article_link_title_wrapper {
+      color: $base-link-color;
+    }
+  }
+}
+
+.tab_menu {
+  background-color: $color-shade-dark;
+
+  &.grey {
+    background-color: $color-shade-dark;
+  }
+
+  .tab {
+    color: $base-font-color;
+
+    &:hover {
+      box-shadow: inset 0 -4px 0 0 rgba($color-red, 0.4);
+    }
+
+    &.active,
+    &:active,
+    &:focus {
+      box-shadow: inset 0 -4px 0 0 $color-red;
+      color: $base-font-color;
+    }
+
+    &:disabled {
+      color: $color-highlight;
+    }
+  }
+}
+
+.page_faq,
+.page_scim {
+  h3 {
+    background-color: $color-base;
+  }
+}
+
+.application_config aside {
+  color: $color-highlight;
+}

scss/pages/_apps.scss → scss/modules/pages/_apps.scss

@@ -1,4 +1,73 @@
+.menu_launcher,
+.menu_launcher_large {
+  background-color: $color-shade-light;
+  border: 1px solid $color-base;
+  color: $base-font-color;
+}
+
+.menu_launcher_large {
+  border: 1px solid $color-base;
+}
+
+.menu.avatar_menu ul li {
+  &:hover ts-icon {
+    background: $color-shade-light;
+    color: $base-font-color;
+  }
+
+  a {
+    color: $base-font-color;
+
+    img,
+    ts-icon {
+      background-color: $color-shade-light;
+      color: $base-font-color;
+    }
+  }
+}
+
 #page {
+  .media_list {
+    background-color: $color-shade-dark;
+    border: 1px solid $color-shade-light;
+
+    > li {
+      + li::before {
+        border-top: 1px solid $color-shade-light;
+      }
+
+      &.interactive {
+        a {
+          color: $base-font-color;
+
+          &:focus,
+          &:hover {
+            background: $color-shade-light;
+            border-color: $color-shade-lightest;
+          }
+        }
+      }
+
+      .media_list_text {
+        color: $base-font-color;
+      }
+    }
+
+    &.media_list_with_arrows a {
+      &::before {
+        color: $color-highlight;
+      }
+    }
+  }
+
+  .media_list_title {
+    color: $base-font-color;
+  }
+
+  .media_list_subtitle {
+    color: $color-highlight;
+  }
+
   .sidebar_menu_list_item {
     color: $base-font-color;
 
@@ -75,25 +144,31 @@
   }
 }
 
-nav.top.apps_nav {
-  background: transparent;
-
-  &.persistent .nav_title {
-    border-color: $color-shade-light;
+nav.top {
+  &.persistent ul a {
+    color: $base-font-color;
   }
 
-  &.clear_nav {
+  &.apps_nav {
+    background: transparent;
+
+    &.persistent .nav_title {
+      border-color: $color-shade-lightest;
+    }
+
+    &.clear_nav {
+      .nav_title a {
+        color: $base-font-color;
+      }
+    }
+
     .nav_title a {
       color: $base-font-color;
     }
-  }
 
-  .nav_title a {
-    color: $base-font-color;
-  }
-
-  ul a.active {
-    color: $base-link-color-active;
+    ul a.active {
+      color: $base-link-color-active;
+    }
   }
 }
 
@@ -153,3 +228,23 @@ a.plastic_typeahead_item {
 .icon_search_input {
   color: $color-highlight;
 }
+
+.quote_block {
+  color: $base-font-color;
+
+  &::before {
+    background-color: $color-shade-light;
+  }
+}
+
+.well {
+  background: $color-shade-darkest;
+  border-color: darken($color-shade-darkest, 2%);
+  color: $base-font-color;
+  text-shadow: 0 1px 1px $color-shadow-dark;
+}
+
+.service_breadcrumbs li .ts_icon,
+.service_breadcrumbs li span {
+  color: $color-highlight;
+}

scss/modules/pages/_downloads.scss

@@ -0,0 +1,66 @@
+.downloads_header {
+  background-color: $color-shade-lightest;
+
+  .welcome .meta {
+    color: $base-font-color;
+
+    a {
+      color: $base-font-color;
+    }
+
+    .pipe_sep {
+      background-color: $color-shadow-medium;
+    }
+  }
+
+  select[name=build_variant] {
+    color: $base-font-color;
+  }
+}
+
+.stay_in_sync {
+  .card {
+    background-color: $color-shade-dark;
+    border-color: $color-shade-darkest;
+
+    h2 {
+      color: $base-font-color;
+    }
+  }
+
+  .other_links {
+    color: $color-highlight;
+
+    a {
+      color: $base-font-color;
+    }
+  }
+}
+
+.sms_form {
+  .sms_number_container::before {
+    color: $color-highlight;
+  }
+
+  input[name=sms_number] {
+    color: $base-font-color;
+  }
+
+  input[type=submit] {
+    background-color: $color-base;
+    color: $base-link-color;
+  }
+
+  .sms_select_container .lazy_filter_select {
+    background-color: $color-shade-light;
+  }
+}
+
+.go_button {
+  background-color: $color-base;
+  color: $base-link-color;
+}
+
+nav.top.fixed {
+  display: none;
+}