New design

assets/javascripts/templates/pages/news_tmpl.coffee

@@ -33,7 +33,11 @@ newsItem = (date, news) ->
   result
 
 app.news = [
-  [ 1413676800000, # October 19, 2014
+  [ 1415491200000, # November 9, 2014
+    """ New design
+        Feedback welcome on <a href="https://twitter.com/DevDocs" target="_blank">Twitter</a> and <a href="https://github.com/Thibaut/devdocs" target="_blank">GitHub</a>. """
+  ], [
+    1413676800000, # October 19, 2014
     """ New <a href="/svg/">SVG</a>, <a href="/marionette/">Marionette.js</a>, and <a href="/mongoose/">Mongoose</a> documentations """,
   ], [
     1413590400000, # October 18, 2014

assets/javascripts/templates/pages/root_tmpl.coffee.erb

@@ -13,8 +13,8 @@ app.templates.intro = """
     <ol class="_intro-list">
       <li>Your local version of DevDocs won't self-update. Unless you're offline or modifying the code,
           I recommend using the hosted version at <a href="http://devdocs.io">devdocs.io</a>.
-      <li>Run <code class="_label">thor docs:list</code> to see all available documentations.
-      <li>Run <code class="_label">thor docs:download --all</code> to download/update all documentations.
+      <li>Run <code>thor docs:list</code> to see all available documentations.
+      <li>Run <code>thor docs:download --all</code> to download/update all documentations.
         <li>To be notified about new versions, don't forget to <a href="https://github.com/Thibaut/devdocs/subscription">watch the repository</a> on GitHub.
       <li>The <a href="https://github.com/Thibaut/devdocs/issues">issue tracker</a> is the preferred channel for bug reports and
           feature requests. For everything else, use the <a href="https://groups.google.com/d/forum/devdocs">mailing list</a>.

assets/javascripts/views/search/search_scope.coffee

@@ -49,7 +49,7 @@ class app.views.SearchScope extends app.View
 
     @input.removeAttribute 'placeholder'
     @input.value = @input.value[@input.selectionStart..]
-    @input.style.paddingLeft = @tag.offsetWidth + 6 + 'px'
+    @input.style.paddingLeft = @tag.offsetWidth + 10 + 'px'
     $.trigger @input, 'input'
 
   reset: =>

assets/javascripts/views/sidebar/sidebar_hover.coffee

@@ -59,7 +59,7 @@ class app.views.SidebarHover extends app.View
     el.classList.contains 'active'
 
   isTruncated: (el) ->
-    el.scrollWidth >= el.offsetWidth
+    el.scrollWidth > el.offsetWidth
 
   onFocus: (event) =>
     @focusTime = Date.now()

assets/stylesheets/components/_app.scss

@@ -26,7 +26,7 @@
     line-height: 1;
     margin-top: -.75em;
     font-size: 4rem;
-    color: #ccc;
+    color: $loadingText;
     text-align: center;
     letter-spacing: -.125rem;
     opacity: 0;

assets/stylesheets/components/_content.scss

@@ -7,9 +7,6 @@
   z-index: $contentZ;
   height: 100%;
   margin-left: $sidebarWidth;
-  border-top: 1px solid #b4b7bf;
-  box-shadow: inset 0 1px rgba(black, .04), // top inner shadow
-              inset 1px 0 #f4f4f4;          // left inner shadow
   pointer-events: none;
   @extend %border-box;
 
@@ -20,7 +17,7 @@
   position: relative;
   height: 100%;
   overflow-y: scroll;
-  margin-left: 1rem;
+  margin-left: .875rem;
   padding: 1.25rem 1.5rem 0;
   font-size: .875rem;
   pointer-events: auto;
@@ -28,6 +25,8 @@
   @extend %border-box;
 
   -webkit-padding-start: .75rem;
+  -webkit-padding-end: 1rem;
+
   @media (-moz-overlay-scrollbars) { padding-left: .75rem; }
   @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { margin-left: 0; }
 
@@ -36,10 +35,28 @@
     display: block;
     margin-bottom: 1.25rem;
   }
+
+  &::-webkit-scrollbar { -webkit-appearance: none; }
+  &::-webkit-scrollbar:vertical { width: 14px; }
+  &::-webkit-scrollbar:horizontal { height: 14px }
+  &::-webkit-scrollbar-button { display: none; }
+  &::-webkit-scrollbar-track { background: $contentBackground; }
+  &::-webkit-scrollbar-thumb {
+    min-height: 2rem;
+    background: $scrollbarColor;
+    background-clip: padding-box;
+    border: 5px solid $contentBackground;
+    border-radius: 10px;
+
+    &:active {
+      background-color: $scrollbarColorHover;
+      border-width: 4px;
+    }
+  }
 }
 
 ._content-loading:before {
-  color: #e6e6e6;
+  opacity: 1;
   @extend ._booting:before;
 }
 
@@ -48,7 +65,7 @@
 //
 
 ._splash-title {
-  color: #ddd;
+  color: $splashText;
   cursor: default;
   opacity: 1;
   @extend ._booting:before, %user-select-none;
@@ -58,7 +75,7 @@
   position: absolute;
   bottom: 1.25rem;
   line-height: 1rem;
-  color: #bbb;
+  color: $promoText;
 
   &:hover { color: $linkColor; }
 }
@@ -73,6 +90,7 @@
 
 ._splash-gratipay {
   right: 1.25rem;
+  -webkit-margin-end: -.5rem;
   @extend %splash-promo;
 
   > ._gratipay-logo-bw { opacity: .35; }
@@ -175,7 +193,7 @@
     height: 1px;
     line-height: 0;
     margin-left: 1rem;
-    background: #dde3e8;
+    background: $boxBorderLight;
   }
 }
 
@@ -297,7 +315,7 @@
 ._note { @extend %note; }
 ._note-green { @extend %note-green; }
 ._label { @extend %label; }
-._highlight { background: #fffdcd !important; }
+._highlight { background: $highlightBackground !important; }
 
 ._github-btn {
   display: inline-block;

assets/stylesheets/components/_header.scss

@@ -10,11 +10,8 @@
   right: 0;
   height: $headerHeight;
   line-height: $headerHeight;
-  text-shadow: 0 1px rgba(white, .5);
-  background: -webkit-linear-gradient(top,       #f6f6f8, #e4e4e6);
-  background:         linear-gradient(to bottom, #f6f6f8, #e4e4e6);
-  box-shadow: inset 0 1px rgba(white, .8),  // top inner glow
-              inset 0 -1px rgba(white, .3); // bottom inner glow
+  background: $headerBackground;
+  border-bottom: 1px solid $headerBorder;
   @extend %user-select-none;
 
   a:focus { outline: 0; }
@@ -28,30 +25,38 @@
   float: right;
   margin-right: .5rem;
   font-size: .875rem;
-  color: lighten($textColor, 5%);
+  color: $textColor;
 }
 
 ._nav-link,
 ._nav-link:hover {
+  position: relative;
   float: left;
   padding: 0 1.25rem;
   color: inherit;
   text-decoration: none;
-  background-clip: padding-box;
-  border: solid transparent;
-  border-width: 0 1px;
 }
 
-._nav-current,
-._nav-current:hover {
-  color: lighten($textColor, 8%);
-  background: -webkit-linear-gradient(top,       #e1e1e4, #f2f2f5);
-  background:         linear-gradient(to bottom, #e1e1e4, #f2f2f5);
-  border-color: rgba(black, .15);
-  box-shadow: inset 0 1px rgba(black, .07),    // top border
-              inset 0 1px 2px rgba(black, .1), // top inner shadow
-              1px 0 rgba(white, .2),           // right glow
-              -1px 0 rgba(white, .2);          // left glow
+._nav-link {
+  &:before, &:after {
+    position: absolute;
+    left: 50%;
+    bottom: 0;
+    width: 0;
+    height: 0;
+    margin-left: -.375rem;
+    border: .375rem solid transparent;
+    border-bottom-color: darken($headerBorder, 2%);
+  }
+
+  &:after {
+    bottom: -1px;
+    border-bottom-color: $contentBackground;
+  }
+}
+
+._nav-current {
+  &:before, &:after { content: ''; }
 }
 
 //
@@ -66,21 +71,9 @@
   line-height: inherit;
   font-size: inherit;
 
-  &:before, &:after { // left border
-    content: '';
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: -1px;
-    width: 1px;
-    background: -webkit-linear-gradient(bottom, #b4b7bf, rgba(#b4b7bf, 0) 80%);
-    background:         linear-gradient(to top, #b4b7bf, rgba(#b4b7bf, 0) 80%);
-  }
-
-  &:after { // left glow
-    left: -2px;
-    background: -webkit-linear-gradient(bottom, rgba(white, .4), rgba(white, 0) 80%);
-    background:         linear-gradient(to top, rgba(white, .4), rgba(white, 0) 80%);
+  > ._nav-link {
+    float: none;
+    padding: 0 1rem;
   }
 }
 
@@ -93,8 +86,7 @@
   float: left;
   width: $sidebarWidth;
   height: 100%;
-  padding: .625rem;
-  border-right: 1px solid transparent;
+  padding: .5rem 0 .5rem .5rem;
   @extend %border-box;
 
   @media #{$mediumScreen} { width: $sidebarMediumWidth; }
@@ -103,7 +95,7 @@
     position: absolute;
     top: 1rem;
     left: 1rem;
-    opacity: .5;
+    opacity: .4;
     @extend %icon, %icon-search;
   }
 }
@@ -112,19 +104,17 @@
   display: block;
   width: 100%;
   height: 100%;
-  padding: 0 .75rem 1px 1.625rem;
+  padding: 0 .75rem 1px 1.75rem;
   font-size: .875rem;
+  background: $contentBackground;
   border: 1px solid;
-  border-color: #b2b5bb #babbc5 #bebfc6;
-  border-radius: 1rem;
-  box-shadow: inset 0 1px 1px rgba(black, .1), // top inner shadow
-              0 1px rgba(white, .3);           // bottom glow
+  border-color: darken($headerBorder, 2%);
+  border-radius: 3px;
 
   &:focus {
     outline: 0;
-    border-color: #35b5f4 #35b5f4 #30aeee;
-    box-shadow: inset 0 0 1px rgba(#35b5f4, .5), // inner glow
-                0 0 2px rgba(#35b5f4, .8);       // outer glow
+    border-color: $inputFocusBorder;
+    box-shadow: 0 0 1px $inputFocusBorder;
   }
 }
 
@@ -132,7 +122,7 @@
   display: none;
   position: absolute;
   top: .5em;
-  right: .5em;
+  right: 0;
   padding: .5em;
   cursor: pointer;
   opacity: .3;
@@ -147,13 +137,10 @@
   position: absolute;
   top: .875rem;
   left: .875rem;
-  margin: -1px 0 0 -1px;
-  padding: 0 .625rem;
+  padding: 0 .5rem;
   line-height: 1.25rem;
   font-size: .875rem;
-  background: #dfeafe;
-  border: 1px solid #98aed8;
-  border-radius: .75rem;
-  box-shadow: inset 0 1px rgba(white, .2), // top inner glow
-              0 1px rgba(black, .05);      // bottom shadow
+  color: $textColorLight;
+  background: darken($headerBackground, 5%);
+  border-radius: 2px;
 }

assets/stylesheets/components/_mobile.scss

@@ -14,7 +14,6 @@
   ._container {
     margin: 0;
     border: 0;
-    box-shadow: none;
   }
 
   ._content {
@@ -24,19 +23,11 @@
     padding: .75rem 1rem 2.5rem;
   }
 
-  ._booting:before, ._content-loading:before {
-    font-size: 3rem;
-    color: #ccc;
-  }
+  ._booting:before, ._content-loading:before { font-size: 3rem; }
 
   // Header
 
-  ._header {
-    position: fixed;
-    z-index: $contentZ + 1;
-    border-bottom: 1px solid #b4b7bf;
-    box-shadow: 0 1px rgba(black, .03);
-  }
+  ._header { position: fixed; }
 
   ._logo, ._nav { display: none; }
   ._home-link, ._menu-link { display: block; }
@@ -52,7 +43,6 @@
     &:before { left: .5rem; }
   }
 
-  ._search-clear { padding-right: 0; }
   ._search-tag { left: .325rem; }
 
   // Sidebar
@@ -62,21 +52,17 @@
     min-height: 100%;
     overflow: visible;
     padding-bottom: 2rem;
-    box-shadow: none;
 
     > ._list { padding-bottom: 0; }
   }
 
-  ._list, ._sidebar-footer {
-    width: 100%;
-    box-shadow: none;
-  }
+  ._list, ._sidebar-footer { width: 100%; }
 
   ._list-item {
     white-space: normal;
     word-wrap: break-word;
     overflow-wrap: break-word;
-    border-right-width: 0;
+    box-shadow: none;
   }
 
   ._list-result {
@@ -101,7 +87,7 @@
 
   ._sidebar-footer-save {
     margin-top: 1rem;
-    border-bottom: 1px solid #bac6d7;
+    box-shadow: 0 1px $noteGreenBorder, 0 -1px $noteGreenBorder;
   }
 
   // Notice
@@ -111,7 +97,6 @@
     left: 0;
     padding: 0 .5rem;
 
-    &:before { content: none; }
     ~ ._sidebar { padding-bottom: 4rem; }
   }
 

assets/stylesheets/components/_notice.scss

@@ -6,27 +6,12 @@
   right: 0;
   height: 2.5rem;
   padding: 0 1.25rem;
-  text-shadow: 0 1px rgba(white, .5);
-  background: #faf9e2;
-  box-shadow: inset 0 1px #dddaaa,          // top border
-              inset 0 2px rgba(white, .7),  // top inner glow
-              inset 1px 0 rgba(black, .03); // left inner shadow
+  background: $noticeBackground;
+  box-shadow: inset 0 1px $noticeBorder;
 
   @media #{$mediumScreen} { left: $sidebarMediumWidth; }
 
   ~ ._container { padding-bottom: 2.5rem; }
-
-  &:before {
-    content: '';
-    position: absolute;
-    bottom: 100%;
-    left: 1.5rem;
-    right: 1.5rem;
-    height: 1.5rem;
-    background-image: -webkit-linear-gradient(top,       rgba(white, 0), rgba(white, .95));
-    background-image:         linear-gradient(to bottom, rgba(white, 0), rgba(white, .95));
-    pointer-events: none;
-  }
 }
 
 ._notice-text {

assets/stylesheets/components/_notif.scss

@@ -7,16 +7,9 @@
   max-width: 90%;
   padding: .75rem 1rem;
   font-size: .75rem;
-  color: white;
-  text-shadow: 0 1px 1px rgba(black, .4);
-  background: -webkit-linear-gradient(top,       rgba(#3a3a3a, .9), rgba(#202020, .9));
-  background:         linear-gradient(to bottom, rgba(#3a3a3a, .9), rgba(#202020, .9));
-  background-clip: padding-box;
-  border: 1px solid black;
+  color: $notifColor;
+  background: $notifBackground;
   border-radius: .25rem;
-  box-shadow: inset 0 1px rgba(white, .1),     // top inner glow
-              inset 0 0 0 1px rgba(white, .1), // inner glow
-              0 1px 3px rgba(black, .5);       // drop shadow
   transition: opacity .2s;
   opacity: 0;
   cursor: default;
@@ -63,7 +56,7 @@
   > ._news-row {
     line-height: 1.125rem;
     font-size: .6875rem;
-    color: #bbb;
+    color: $notifColorLight;
 
     + ._news-row { margin-top: .75rem; }
   }
@@ -89,9 +82,7 @@
     margin: 0 .25rem;
     padding: 0;
     color: inherit;
-    text-shadow: inherit;
     background: none;
     border: 0;
-    box-shadow: none;
   }
 }

assets/stylesheets/components/_page.scss

@@ -16,7 +16,7 @@
   iframe {
     display: block;
     padding: 1px;
-    border: 1px dotted #ddd;
+    border: 1px dotted $boxBorder;
     border-radius: 3px;
   }
 }
@@ -41,8 +41,7 @@
   display: inline-block;
   margin: 0;
   padding: .25rem .75rem;
-  text-shadow: 0 1px rgba(white, .3);
-  background: #f2f2f2;
+  background: $labelBackground;
   border-radius: 3px;
 }
 

assets/stylesheets/components/_path.scss

@@ -8,11 +8,8 @@
   line-height: 2rem;
   padding: 0 .375rem;
   font-size: .875rem;
-  text-shadow: 0 1px rgba(white, .5);
-  background: #f5f5f7;
-  box-shadow: inset 0 1px #d5d5da,          // top border
-              inset 0 2px rgba(white, .3),  // top inner glow
-              inset 1px 0 rgba(black, .03); // left inner shadow
+  background: $pathBackground;
+  box-shadow: inset 0 1px $pathBorder;
 
   @media #{$mediumScreen} { left: $sidebarMediumWidth; }
 

assets/stylesheets/components/_sidebar.scss

@@ -8,28 +8,26 @@
   top: $headerHeight;
   bottom: 0;
   left: 0;
+  margin-top: 1px;
   overflow-x: hidden;
   overflow-y: scroll;
-  text-shadow: 0 1px rgba(white, .3);
-  background: #e5eaf4;
-  box-shadow: inset 0 1px #b4b7bf,          // top border
-              inset 0 2px rgba(black, .03); // top inner shadow
+  background: $sidebarBackground;
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: none; // IE 10 doesn't support pointer-events
   @extend %user-select-none;
 
-  &::-webkit-scrollbar { width: 10px; }
+  &::-webkit-scrollbar { -webkit-appearance: none; width: 10px; }
   &::-webkit-scrollbar-button { display: none; }
-  &::-webkit-scrollbar-track { background: white; }
+  &::-webkit-scrollbar-track { background: $contentBackground; }
   &::-webkit-scrollbar-thumb {
-    min-height: 1rem;
-    background: #ccc;
+    min-height: 2rem;
+    background: $scrollbarColor;
     background-clip: padding-box;
-    border: 3px solid white;
+    border: 3px solid $contentBackground;
     border-radius: 5px;
 
     &:active {
-      background-color: #999;
+      background-color: $scrollbarColorHover;
       border-width: 2px;
     }
   }
@@ -46,15 +44,14 @@
   padding: 0;
   list-style: none;
   width: $sidebarWidth;
+  box-shadow: inset -1px 0 $sidebarBorder;
+  @extend %border-box;
 
   @media #{$mediumScreen} { width: $sidebarMediumWidth; }
 
   ._sidebar > & {
     min-height: 100%;
     padding-bottom: 3.5rem;
-    box-shadow: inset -1px 0 #bbc1cc,         // right border
-                inset -2px 0 rgba(white, .2); // right inner glow
-    @extend %border-box;
   }
 }
 
@@ -74,16 +71,15 @@
   position: relative;
   overflow: hidden;
   padding: .25rem .75rem;
-  line-height: 1.25rem;
+  line-height: 1.5rem;
   font-size: .875rem;
   white-space: nowrap;
   word-wrap: normal;
   overflow-wrap: normal;
   text-overflow: ellipsis;
-  text-shadow: 0 1px rgba(white, .3);
-  border: solid transparent;
-  border-width: 1px 1px 1px 0;
   cursor: default;
+  background: $sidebarBackground;
+  box-shadow: inset -1px 0 $sidebarBorder;
 
   &, &:hover {
     color: inherit;
@@ -94,26 +90,21 @@
   &.focus:hover,
   &.active,
   &.active:hover {
-    color: white;
-    text-shadow: 0 1px rgba(black, .2);
-    background: -webkit-linear-gradient(top,       #bfc6dd, #949eb8);
-    background:         linear-gradient(to bottom, #bfc6dd, #949eb8);
-    border-color: #96a1c6 #8e99b7 #7f87a4;
-    box-shadow: inset 0 1px rgba(white, .15),     // top inner glow
-                inset 0 0 0 1px rgba(white, .08), // inner glow
-                0 1px rgba(black, .05);           // drop shadow
+    color: $focusText;
+    background: $focusBackground;
+    box-shadow: inset -1px 0 $focusBorder;
   }
 
   &.active,
   &.active:hover {
-    background: -webkit-linear-gradient(top,       #65b2fb, #3492e9);
-    background:         linear-gradient(to bottom, #65b2fb, #3492e9);
-    border-color: #318ce4 #2b82db #2878c7;
+    color: $selectionText;
+    background: $selectionBackground;
+    box-shadow: inset -1px 0 $selectionBorder;
   }
 
   &:before {
     float: left;
-    margin: .125rem .625rem 0 0;
+    margin: .25rem .625rem 0 0;
     @extend %icon;
   }
 }
@@ -136,10 +127,7 @@
 
 ._list-dir,
 %_list-dir {
-  line-height: 1.5rem;
   padding-left: 2.25rem;
-
-  &:before { margin-top: .25rem; }
 }
 
 ._list-disabled {
@@ -155,9 +143,9 @@
   left: .25rem;
   padding: .5rem;
   cursor: pointer;
-  opacity: .45;
+  opacity: .4;
 
-  &:hover { opacity: .7; }
+  &:hover { opacity: .65; }
 
   &:before {
     @extend %icon, %icon-dir;
@@ -172,11 +160,11 @@
 ._list-sub {
   > ._list-item { padding-left: 2.75rem; }
   > ._list-item:before { content: none; }
-  > ._list-dir { line-height: 1.25rem; }
+  > ._list-dir { line-height: 1.375rem; }
 
   ._list-arrow {
     left: 1rem;
-    padding: .375rem;
+    padding: .4375rem;
   }
 }
 
@@ -220,17 +208,14 @@
     left: .5rem;
     width: .75rem;
     height: 1px;
-    background: rgba(white, .9);
-    box-shadow: 0 -3px rgba(white, .9),  // top line
-                0 3px rgba(white, .9),   // bottom line
-                0 -2px rgba(black, .15), // top shadow
-                0 1px rgba(black, .15),  // middle shadow
-                0 4px rgba(black, .15);  // bottom shadow
+    background: rgba($selectionText, .9);
+    box-shadow: 0 -3px rgba($selectionText, .9), // top line
+                0 3px rgba($selectionText, .9);  // bottom line
   }
 }
 
 ._list-noresults {
-  padding: .625rem .75rem;
+  padding: .5rem .75rem;
   line-height: 1.25rem;
   font-size: .8125rem;
   color: $textColorLight;
@@ -238,7 +223,7 @@
 
 ._list-noresults-note {
   display: block;
-  margin-top: .375rem;
+  margin-top: .25rem;
 }
 
 ._list-noresults-link { cursor: pointer; }
@@ -252,39 +237,21 @@
   z-index: $hoverZ;
   left: 0;
   overflow: visible;
+  min-width: $sidebarWidth;
   padding: .25rem .75rem;
-  background-color: #e5eaf4;
   pointer-events: none;
   -webkit-font-smoothing: subpixel-antialiased;
   -webkit-transform: translate3d(0, 0, 0);
           transform: translate3d(0, 0, 0);
+  @extend %border-box;
+
+  @media #{$mediumScreen} { min-width: $sidebarMediumWidth; }
 
   &:not(._list-result) {
     padding-left: 2.75rem;
 
     &:before { content: none; }
   }
-
-  &:not(.focus):not(.active):after {
-    content: '';
-    position: absolute;
-    top: -1px;
-    bottom: -1px;
-    left: $sidebarWidth;
-    right: -2px;
-    margin-left: -1px;
-    border: 1px solid #bbc1cc;
-    border-left-width: 0;
-    border-radius: 0 2px 2px 0;
-    box-shadow: inset -1px 0 rgba(white, .15), // right inner glow
-                inset 0 1px rgba(white, .15),  // top inner glow
-                inset 0 -1px rgba(white, .15), // bottom inner glow
-                1px 0 rgba(black, .04),        // right shadow
-                0 1px rgba(black, .04),        // bottom shadow
-                0 -1px rgba(black, .02);       // top shadow
-
-    @media #{$mediumScreen} { left: $sidebarMediumWidth; }
-  }
 }
 
 //
@@ -336,9 +303,8 @@
   bottom: 0;
   left: 0;
   width: $sidebarWidth;
-  background: #e5eaf4;
-  box-shadow: inset -1px 0 #bbc1cc,         // right border
-              inset -2px 0 rgba(white, .2); // right inner glow
+  background: $sidebarBackground;
+  box-shadow: inset -1px 0 $sidebarBorder;
 
   @media #{$mediumScreen} { width: $sidebarMediumWidth; }
 
@@ -349,8 +315,8 @@
     left: 0;
     right: 1px;
     height: 1em;
-    background-image: -webkit-linear-gradient(top,       rgba(#e5eaf4, 0), rgba(#e5eaf4, .95));
-    background-image:         linear-gradient(to bottom, rgba(#e5eaf4, 0), rgba(#e5eaf4, .95));
+    background-image: -webkit-linear-gradient(top,       rgba($sidebarBackground, 0), rgba($sidebarBackground, .95));
+    background-image:         linear-gradient(to bottom, rgba($sidebarBackground, 0), rgba($sidebarBackground, .95));
     pointer-events: none;
   }
 }
@@ -384,11 +350,9 @@
 ._sidebar-footer-save {
   margin-right: 1px;
   font-weight: bold;
-  background-image: -webkit-linear-gradient(top,       #fbfbfe, #f5f5f8 50%, #eeeef1 51%, #e8e8ec);
-  background-image:         linear-gradient(to bottom, #fbfbfe, #f5f5f8 50%, #eeeef1 51%, #e8e8ec);
-  box-shadow: inset 0 1px white,               // top inner glow
-              inset 0 0 0 1px rgba(white, .2), // inner glow
-              0 -1px #c4cfde;                  // top border
+  background: $noteGreenBackground;
+  box-shadow: inset 0 1px $noteGreenBorder,
+                    1px 0 $noteGreenBorder;
 
   &:before { @extend %icon-check; }
 }

assets/stylesheets/global/_base.scss

@@ -1,7 +1,7 @@
 html {
   height: 100%;
   font-size: 100%;
-  background: white;
+  background: $contentBackground;
 
   @media #{$mediumScreen} { font-size: 93.75%; }
 }
@@ -110,11 +110,10 @@ a > code { color: inherit; }
 table {
   margin: 1.5em 0;
   background: none;
-  border: 1px solid #d5d5d5;
+  border: 1px solid $boxBorder;
   border-collapse: separate;
   border-spacing: 0;
   border-radius: 3px;
-  box-shadow: 0 1px 1px rgba(black, .04);
 }
 
 th, td {
@@ -127,17 +126,13 @@ th, td {
 
 th {
   border: 0;
-  border-bottom: 1px solid #d5d5d5;
+  border-bottom: 1px solid $boxBorder;
   border-radius: 0;
   @extend %heading-box;
 
-  &:empty {
-    background: none;
-    box-shadow: none;
-  }
+  &:empty { background: none; }
 
-  + th { border-left: 1px solid rgba(black, .12); }
-  + td { border-left: 1px solid #d5d5d5; }
+  + th, + td { border-left: 1px solid $boxBorder; }
 
   tr:first-child > &:first-child { border-top-left-radius: 3px; }
   tr:first-child > &:last-child { border-top-right-radius: 3px; }
@@ -148,9 +143,9 @@ th {
 }
 
 td {
-  border-bottom: 1px solid #e5e5e5;
+  border-bottom: 1px solid $boxBorderLight;
 
-  + td { border-left: 1px solid #e5e5e5; }
+  + td { border-left: 1px solid $boxBorderLight; }
   tr:last-child > & { border-bottom: 0; }
 }
 
@@ -162,7 +157,7 @@ input {
   @extend %border-box;
 }
 
-input[type="search"] { -webkit-appearance: textfield; }
+input[type="search"] { -webkit-appearance: none; }
 
 input[type="search"]::-webkit-search-cancel-button,
 input[type="search"]::-webkit-search-decoration {
@@ -176,6 +171,6 @@ input[type="search"]::-webkit-search-decoration {
   border: 0 !important;
 }
 
-::-webkit-input-placeholder { color: #aaa; }
-::-moz-placeholder          { color: #aaa; opacity: 1; }
-:-ms-input-placeholder      { color: #aaa; }
+::-webkit-input-placeholder { color: $textColorLighter; }
+::-moz-placeholder          { color: $textColorLighter; opacity: 1; }
+:-ms-input-placeholder      { color: $textColorLighter; }

assets/stylesheets/global/_classes.scss

@@ -19,25 +19,15 @@
 //
 
 %box {
-  text-shadow: 0 1px rgba(white, .3);
-  background: #f8f8f8;
-  border: 1px solid;
-  border-color: #d5d5d5 #d5d5d5 #d1d1d1;
+  background: $boxBackground;
+  border: 1px solid $boxBorder;
   border-radius: 3px;
-  box-shadow: inset 0 1px rgba(white, .3), // top inner glow
-              0 1px 1px rgba(black, .04);  // drop shadow
 }
 
 %heading-box {
-  text-shadow: 0 1px rgba(white, .3);
-  background: -webkit-linear-gradient(top,       #f7f7fa, #f0f0f2);
-  background:         linear-gradient(to bottom, #f7f7fa, #f0f0f2);
-  border: 1px solid;
-  border-color: #d5d5d5 #d5d5d5 #d1d1d1;
+  background: $boxHeaderBackground;
+  border: 1px solid $boxBorder;
   border-radius: 3px;
-  box-shadow: inset 0 1px rgba(white, .3),     // top inner glow
-              inset 0 0 0 1px rgba(white, .2), // inner glow
-              0 1px 1px rgba(black, .04);      // drop shadow
 }
 
 %block-heading {
@@ -56,48 +46,16 @@
 %note {
   margin: 1.5rem 0;
   padding: .5rem .875rem;
-  text-shadow: 0 1px rgba(white, .3);
-  background: #faf9e2;
-  border: 1px solid;
-  border-color: #dddaaa #dddaaa #d7d7a9;
+  background: $noteBackground;
+  border: 1px solid $noteBorder;
   border-radius: 3px;
-  box-shadow: inset 0 1px rgba(white, .2),  // top inner glow
-              0 1px 1px rgba(black, .04);   // drop shadow
 }
 
-%note-green {
-  background: #f1faeb;
-  border-color: #b3dba8 #b3dba8 #aed7a5;
-}
-
-%note-blue {
-  background: #f2f2ff;
-  border-color: #c6cde9 #c6cde9 #c3cce7;
-}
-
-%note-gold {
-  background: #fff0aa;
-  border-color: #ddce81 #ddce81 #d9ca7f;
-}
-
-%note-red {
-  background: #fed5d3;
-  border-color: #dc7874 #dc7874 #d47474;
-}
-
-//
-// Labels
-//
-
 %label {
   margin: 0 1px;
-  padding: 0 .3em 1px;
-  text-shadow: 0 1px rgba(white, .3);
-  background: #f2f2f2;
-  border: 1px solid;
-  border-color: #d2d2d2 #d2d2d2 #ccc;
-  border-radius: 2px;
-  box-shadow: 0 1px rgba(black, .04);
+  padding: 1px 4px 2px;
+  background: $labelBackground;
+  border-radius: 3px;
 }
 
 %block-label {
@@ -107,27 +65,29 @@
   padding-left: .5em;
   padding-right: .5em;
   font-size: inherit;
+  border: 1px solid $boxBorder;
+  border-radius: 2px;
   @extend %label;
 }
 
-%label-green {
-  background: #f1faeb;
-  border-color: #b3dba8 #b3dba8 #aed7a5;
+%note-green, %label-green {
+  background: $noteGreenBackground;
+  border-color: $noteGreenBorder;
 }
 
-%label-blue {
-  background: #dbe4ff;
-  border-color: #a8a9e2;
+%note-blue, %label-blue {
+  background: $noteBlueBackground;
+  border-color: $noteBlueBorder;
 }
 
-%label-yellow {
-  background: #ffdfb2;
-  border-color: #c2a16f;
+%note-orange, %label-orange {
+  background: $noteOrangeBackground;
+  border-color: $noteOrangeBorder;
 }
 
-%label-red {
-  background: #fed5d3;
-  border-color: #dc7874;
+%note-red, %label-red {
+  background: $noteRedBackground;
+  border-color: $noteRedBorder;
 }
 
 //

assets/stylesheets/global/_variables.scss

@@ -1,22 +1,80 @@
 $baseFont: 'Open Sans', Helvetica, Arial, sans-serif;
 $monoFont: 'Source Code Pro', 'Inconsolata-g', Consolas, Menlo, monospace;
 
-$textColor: #39393e;
-$textColorLight: #6b6f78;
-$textColorLighter: #9498a6;
+$headerHeight: 3rem;
+$sidebarWidth: 18rem;
+$sidebarMediumWidth: 16rem;
+
+$contentBackground: #fff;
+
+$textColor: #333;
+$textColorLight: #666;
+$textColorLighter: #999;
+
+$inputFocusBorder: #35b5f4;
+
+$focusBackground: #e5e5e5;
+$focusBorder: #d4d4d4;
+$focusText: #000;
+
+$loadingText: #e6e6e6;
+$splashText: #ddd;
+$promoText: #bbb;
+
+$selectionBackground: #398df0;
+$selectionBorder: #196fc2;
+$selectionText: #fff;
+
+$highlightBackground: #fffdcd;
 
 $linkColor: #0082c6;
 $linkColorHover: #0072c5;
 
-$headerHeight: 3rem;
+$headerBackground: #f0f0f0;
+$headerBorder: #d9d9d9;
 
-$sidebarWidth: 18rem;
-$sidebarMediumWidth: 16rem;
+$sidebarBackground: #f9f9f9;
+$sidebarBorder: #e3e3e3;
+
+$scrollbarColor: #d2d2d2;
+$scrollbarColorHover: #aaa;
+
+$pathBackground: $sidebarBackground;
+$pathBorder: $sidebarBorder;
+
+$noticeBackground: #faf9e2;
+$noticeBorder: #e2e2c1;
+
+$boxBackground: #fafafa;
+$boxBorder: #d8d8d8;
+$boxBorderLight: #e5e5e5;
+$boxHeaderBackground: #f5f5f5;
+
+$noteBackground: #f8f8dd;
+$noteBorder: #d3d952;
+
+$noteGreenBackground: #e7f8e1;
+$noteGreenBorder: #89da70;
+
+$noteBlueBackground: #d4f3fd;
+$noteBlueBorder: #94bbeb;
+
+$noteOrangeBackground: #fbe6d1;
+$noteOrangeBorder: #ec8b01;
+
+$noteRedBackground: #fed5d3;
+$noteRedBorder: #dc7874;
+
+$labelBackground: #f4f4f4;
+
+$notifBackground: rgba(#333, .85);
+$notifColor: #fff;
+$notifColorLight: #bbb;
 
 $mediumScreen: '(max-width: 800px)';
 
-$headerZ: 1;
+$contentZ: 1;
 $sidebarZ: 2;
-$contentZ: 3;
+$headerZ: 3;
 $noticeZ: 4;
 $hoverZ: 5;

assets/stylesheets/pages/_angular.scss

@@ -30,7 +30,7 @@
     line-height: 1.7rem;
     padding-left: 1em;
     font-size: .875rem;
-    background: white;
+    background: $contentBackground;
   }
 
   .defs {

assets/stylesheets/pages/_c.scss

@@ -9,7 +9,6 @@
     line-height: inherit;
     background: none;
     border: 0;
-    box-shadow: none;
   }
 
   .t-lines > span { display: block; } // numeric/fenv, string/byte, etc.
@@ -30,7 +29,7 @@
     margin: 1rem 0;
     padding: .375rem;
     font-size: .75rem;
-    border: 1px solid #ccc;
+    border: 1px solid $boxBorder;
     border-radius: 2px;
   }
 }

assets/stylesheets/pages/_maxcdn.scss

@@ -19,7 +19,7 @@
     height: 2rem;
     padding: 0;
     list-style: none;
-    border-bottom: 1px solid #ddd;
+    border-bottom: 1px solid $boxBorder;
 
     > li {
       float: left;
@@ -37,8 +37,8 @@
       &.active > a {
         color: $textColor;
         text-decoration: none;
-        background: white;
-        border-color: #ddd #ddd transparent;
+        background: $contentBackground;
+        border-color: $boxBorder $boxBorder transparent;
         cursor: default;
       }
     }

assets/stylesheets/pages/_mdn.scss

@@ -55,7 +55,7 @@
   }
 
   .deprecated, .obsolete { @extend %label-red; }
-  .nonStandard, .projectSpecific, .experimental { @extend %label-yellow; }
+  .nonStandard, .projectSpecific, .experimental { @extend %label-orange; }
 
   .htmlelt,
   .cssprop {

assets/stylesheets/pages/_node.scss

@@ -1,6 +1,6 @@
 ._node {
   .api_stability_0, .api_stability_1 { @extend %note, %note-red; }
-  .api_stability_2 { @extend %note, %note-gold; }
+  .api_stability_2 { @extend %note; }
   .api_stability_3, .api_stability_4 { @extend %note, %note-green; }
   .api_stability_5 { @extend %note, %note-blue; }
 

assets/stylesheets/pages/_rdoc.scss

@@ -38,8 +38,8 @@
     top: 0;
     left: -1em;
     right: 0;
-    background: rgba(white, .95);
-    box-shadow: 0 1em 1em 1em white;
+    background: rgba($contentBackground, .95);
+    box-shadow: 0 1em 1em 1em $contentBackground;
 
     > pre { margin: 0; }
   }

assets/stylesheets/pages/_yii.scss

@@ -17,7 +17,7 @@
   }
 
   .summaryTable td:first-child[rowspan] {
-    border-right: 1px solid #e5e5e5;
+    border-right: 1px solid $boxBorderLight;
 
     + td { border-left: 0; }
   }