diff --git a/assets/images/icons.png b/assets/images/icons.png index 701f0d07..d332a724 100644 Binary files a/assets/images/icons.png and b/assets/images/icons.png differ diff --git a/assets/images/icons@2x.png b/assets/images/icons@2x.png index 3ae14726..673274c5 100644 Binary files a/assets/images/icons@2x.png and b/assets/images/icons@2x.png differ diff --git a/assets/javascripts/templates/pages/news_tmpl.coffee b/assets/javascripts/templates/pages/news_tmpl.coffee index eaf9f59f..4fd474a6 100644 --- a/assets/javascripts/templates/pages/news_tmpl.coffee +++ b/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 Twitter and GitHub. """ + ], [ + 1413676800000, # October 19, 2014 """ New SVG, Marionette.js, and Mongoose documentations """, ], [ 1413590400000, # October 18, 2014 diff --git a/assets/javascripts/templates/pages/root_tmpl.coffee.erb b/assets/javascripts/templates/pages/root_tmpl.coffee.erb index bcd0a5ee..0d292830 100644 --- a/assets/javascripts/templates/pages/root_tmpl.coffee.erb +++ b/assets/javascripts/templates/pages/root_tmpl.coffee.erb @@ -13,8 +13,8 @@ app.templates.intro = """
  1. Your local version of DevDocs won't self-update. Unless you're offline or modifying the code, I recommend using the hosted version at devdocs.io. -
  2. Run thor docs:list to see all available documentations. -
  3. Run thor docs:download --all to download/update all documentations. +
  4. Run thor docs:list to see all available documentations. +
  5. Run thor docs:download --all to download/update all documentations.
  6. To be notified about new versions, don't forget to watch the repository on GitHub.
  7. The issue tracker is the preferred channel for bug reports and feature requests. For everything else, use the mailing list. diff --git a/assets/javascripts/views/search/search_scope.coffee b/assets/javascripts/views/search/search_scope.coffee index 69e73243..4e4e0745 100644 --- a/assets/javascripts/views/search/search_scope.coffee +++ b/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: => diff --git a/assets/javascripts/views/sidebar/sidebar_hover.coffee b/assets/javascripts/views/sidebar/sidebar_hover.coffee index a2a8e5ef..c905c07a 100644 --- a/assets/javascripts/views/sidebar/sidebar_hover.coffee +++ b/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() diff --git a/assets/stylesheets/components/_app.scss b/assets/stylesheets/components/_app.scss index ccc7011b..eea85cce 100644 --- a/assets/stylesheets/components/_app.scss +++ b/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; diff --git a/assets/stylesheets/components/_content.scss b/assets/stylesheets/components/_content.scss index 080bd933..48c5040c 100644 --- a/assets/stylesheets/components/_content.scss +++ b/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; diff --git a/assets/stylesheets/components/_header.scss b/assets/stylesheets/components/_header.scss index 29ab5e0f..534aa485 100644 --- a/assets/stylesheets/components/_header.scss +++ b/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; } diff --git a/assets/stylesheets/components/_mobile.scss b/assets/stylesheets/components/_mobile.scss index 13c64315..875da987 100644 --- a/assets/stylesheets/components/_mobile.scss +++ b/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; } } diff --git a/assets/stylesheets/components/_notice.scss b/assets/stylesheets/components/_notice.scss index 57998921..e54a11fd 100644 --- a/assets/stylesheets/components/_notice.scss +++ b/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 { diff --git a/assets/stylesheets/components/_notif.scss b/assets/stylesheets/components/_notif.scss index 842f2a46..2e4c3e6a 100644 --- a/assets/stylesheets/components/_notif.scss +++ b/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; } } diff --git a/assets/stylesheets/components/_page.scss b/assets/stylesheets/components/_page.scss index 564defe4..420d856a 100644 --- a/assets/stylesheets/components/_page.scss +++ b/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; } diff --git a/assets/stylesheets/components/_path.scss b/assets/stylesheets/components/_path.scss index 008bd313..f79eeb5d 100644 --- a/assets/stylesheets/components/_path.scss +++ b/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; } diff --git a/assets/stylesheets/components/_sidebar.scss b/assets/stylesheets/components/_sidebar.scss index efcfca6b..646a8ee4 100644 --- a/assets/stylesheets/components/_sidebar.scss +++ b/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; } } diff --git a/assets/stylesheets/global/_base.scss b/assets/stylesheets/global/_base.scss index e0d31628..dc2e9538 100644 --- a/assets/stylesheets/global/_base.scss +++ b/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; } diff --git a/assets/stylesheets/global/_classes.scss b/assets/stylesheets/global/_classes.scss index e96c386f..7e6bff78 100644 --- a/assets/stylesheets/global/_classes.scss +++ b/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; } // diff --git a/assets/stylesheets/global/_variables.scss b/assets/stylesheets/global/_variables.scss index 6bc88956..aa66ac78 100644 --- a/assets/stylesheets/global/_variables.scss +++ b/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; diff --git a/assets/stylesheets/pages/_angular.scss b/assets/stylesheets/pages/_angular.scss index f6a4be26..c290d67c 100644 --- a/assets/stylesheets/pages/_angular.scss +++ b/assets/stylesheets/pages/_angular.scss @@ -30,7 +30,7 @@ line-height: 1.7rem; padding-left: 1em; font-size: .875rem; - background: white; + background: $contentBackground; } .defs { diff --git a/assets/stylesheets/pages/_c.scss b/assets/stylesheets/pages/_c.scss index acb505fd..20fa61f5 100644 --- a/assets/stylesheets/pages/_c.scss +++ b/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; } } diff --git a/assets/stylesheets/pages/_maxcdn.scss b/assets/stylesheets/pages/_maxcdn.scss index 2cbdc4bc..91f9a199 100644 --- a/assets/stylesheets/pages/_maxcdn.scss +++ b/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; } } diff --git a/assets/stylesheets/pages/_mdn.scss b/assets/stylesheets/pages/_mdn.scss index b92b45c1..cc103cae 100644 --- a/assets/stylesheets/pages/_mdn.scss +++ b/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 { diff --git a/assets/stylesheets/pages/_node.scss b/assets/stylesheets/pages/_node.scss index c01c2c8f..89770537 100644 --- a/assets/stylesheets/pages/_node.scss +++ b/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; } diff --git a/assets/stylesheets/pages/_rdoc.scss b/assets/stylesheets/pages/_rdoc.scss index feac3447..7fdf6b91 100644 --- a/assets/stylesheets/pages/_rdoc.scss +++ b/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; } } diff --git a/assets/stylesheets/pages/_yii.scss b/assets/stylesheets/pages/_yii.scss index b6625ba2..2141b208 100644 --- a/assets/stylesheets/pages/_yii.scss +++ b/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; } } diff --git a/public/icons/ui/home/16.png b/public/icons/ui/home/16.png index 196e238b..2dc8382a 100644 Binary files a/public/icons/ui/home/16.png and b/public/icons/ui/home/16.png differ diff --git a/public/icons/ui/home/16@2x.png b/public/icons/ui/home/16@2x.png index 5faf7b3c..e8b7fcec 100644 Binary files a/public/icons/ui/home/16@2x.png and b/public/icons/ui/home/16@2x.png differ diff --git a/public/icons/ui/menu/16.png b/public/icons/ui/menu/16.png index 49f30c31..d2d341d5 100644 Binary files a/public/icons/ui/menu/16.png and b/public/icons/ui/menu/16.png differ diff --git a/public/icons/ui/menu/16@2x.png b/public/icons/ui/menu/16@2x.png index 957920c9..4aef06fd 100644 Binary files a/public/icons/ui/menu/16@2x.png and b/public/icons/ui/menu/16@2x.png differ