From a74533976d9a19c00fe6bb2fa7e11a3211c6b24f Mon Sep 17 00:00:00 2001 From: Josh south Date: Mon, 9 Oct 2017 16:42:07 -0700 Subject: [PATCH] Activate Night Mode (#4853) * Activate Night Mode - Add toggle for night mode - Update base styles * Update _night-mode.scss * Fix first-line indenting and color differences --- _layouts/docs.html | 4 +- _scss/_base.scss | 6 +-- _scss/_content.scss | 3 +- _scss/_layout.scss | 8 +--- _scss/_night-mode.scss | 99 +++++++++++++++++++++++++++++++++++------- _scss/_typography.scss | 4 +- _scss/_variables.scss | 10 +++-- 7 files changed, 100 insertions(+), 34 deletions(-) diff --git a/_layouts/docs.html b/_layouts/docs.html index 3f30ec6302..8ac2dd33c5 100644 --- a/_layouts/docs.html +++ b/_layouts/docs.html @@ -161,7 +161,7 @@ else %}{% assign edit_url = "" %}{% endif %} {% break %} {% endif %} {% endfor % class="nomunge"> Request docs changes
  • Get support
    • - + {% unless page.notoc %} {% assign my_min = page.toc_min | default: site.toc_min | default: 2 %} {% assign my_max = page.toc_max | default: site.toc_max | default: 3 %} {% assign my_name = page.url | default: "unnamed" %} diff --git a/_scss/_base.scss b/_scss/_base.scss index eee2cd6c38..9f606425b3 100755 --- a/_scss/_base.scss +++ b/_scss/_base.scss @@ -107,7 +107,7 @@ footer { } .footer-copyright p { - font-family: "Open Sans", sans-serif; + font-family: $font; font-size: 12px; line-height: 17px; color: #637986; @@ -132,7 +132,7 @@ footer { } .footer_social_nav ul li:before { - color: #fff; + color: $white; position: absolute; top: 10px; left: 10px; @@ -147,7 +147,7 @@ footer { height: 32px; background-color: #82949E; border-radius: 50px; - color: #fff; + color: $white; display: block; text-indent: 9999px; overflow: hidden; diff --git a/_scss/_content.scss b/_scss/_content.scss index 0008a53685..a5f0631029 100755 --- a/_scss/_content.scss +++ b/_scss/_content.scss @@ -67,8 +67,7 @@ pre code { .component, .component-full { - background: #FBFBFC; - // border: 1px solid rgba(204, 204, 204, 0.21); + background: $bg-component; } .component-full-icon { diff --git a/_scss/_layout.scss b/_scss/_layout.scss index 6dfe386ee3..a97cccdbce 100755 --- a/_scss/_layout.scss +++ b/_scss/_layout.scss @@ -86,8 +86,6 @@ z-index: -1; } - - .columns, .col-body { display: flex; @@ -98,17 +96,17 @@ order: -1; } -// .col-content {} - .col-body { flex-direction: row; flex: 1; min-height: 555px; } + .col-content { flex: 1; transition: all 0.5s ease; } + .col-nav, .col-toc { flex: 0 0 0; @@ -118,7 +116,6 @@ display: none; } - @media only screen and (min-width: 1000px) { .col-nav, .col-toc { @@ -155,7 +152,6 @@ section.section { width: 270px; } - .wrapper.right-open .page-content { padding-right: 190px; background-color: purple; diff --git a/_scss/_night-mode.scss b/_scss/_night-mode.scss index bbb1c681ee..a8166779e0 100755 --- a/_scss/_night-mode.scss +++ b/_scss/_night-mode.scss @@ -6,6 +6,7 @@ body.night { background-color: $bg-body-night; + color: $body-text-color-night; h1, h2, h3, @@ -31,6 +32,9 @@ body.night { background-color: #101c29!important; animation: none!important; } + hr { + border-top: 1px solid #4f6071; + } .hero-text h1, div#side-toc-title { color: $white; @@ -41,7 +45,7 @@ body.night { .nav-secondary input[type=search] { background: rgba(76, 76, 76, 0.47) url(/images/search.png) no-repeat; background-position: 10px 9px; - color: #fff; + color: $white; } .nav-secondary-tabs .search-form input[type=search] { background: rgba(16, 28, 41, 0.6) url(/images/search.png) no-repeat; @@ -61,17 +65,19 @@ body.night { #sidebar-wrapper-home, .sidebar-home .affix, #sidebar-right, - #sidebar-right.affix { + #sidebar-right.affix, + .col-toc, + .col-nav { background-color: $bg-sidebar-night; border: none; } .nav-secondary-tabs { - background-color: rgba(255, 255, 255, 0.04); + background-color: rgba(15, 28, 42, 0.35); border-top: 1px solid rgba(68, 77, 87, 0.38); border-bottom: 1px solid #29343f; } .nav-secondary-tabs.affix { - background: $black; + background: $bg-secondary-night; } .nav-sidebar ul li a.active, .nav-sidebar.nav>li>a:focus, @@ -93,7 +99,6 @@ body.night { color: $body-text-night; } blockquote { - border-left: 6px solid #439FD1; background: #1f3341; } table { @@ -115,19 +120,21 @@ body.night { color: #f3f3f3; word-break: break-all; word-wrap: break-word; - background-color: rgba(0, 0, 0, 0.71) !important; + background-color: #0a121b !important; border: 1px solid $black; border-radius: 4px; } code { padding: 3px 7px; - font-size: 90%; - color: #ffffff!important; + color: #c1f1f0 !important; border-radius: 2px; - background: transparent !important; + background: #0a121b !important; + } + pre>code { + padding: 0px; } .nav-secondary .dropdown-btn { - color: #6e6f6f; + color: #d0e8ff; } .outline-btn { background: #101c29; @@ -164,7 +171,7 @@ body.night { div#autocompleteResults { background: $bg-search-results-night; border: 1px solid $black; - color: #fff; + color: $white; padding: 20px 55px 15px 15px; margin: 10px 0 0 0; position: absolute; @@ -236,13 +243,54 @@ body.night { } .footer { background-color: $bg-footer-night; - border-top: 1px solid rgba(33, 203, 201, 0.45); + border-top: 1px solid rgb(31, 52, 66); + } + .footer_links li a { + color: #b2b2b2; } .bottom_footer { - border-top: 1px solid rgba(33, 203, 201, 0.45); + border-top: 1px solid rgb(78, 93, 106); + } + .footer_social_nav ul li a { + background-color: #2f2f2f; + } + /** force blockquote styles **/ + blockquote.warning { + color: #ff7e7a!important; + } + blockquote.warning p:first-child { + color: #ff7e7a!important; + } + blockquote.important { + border-left-color: #f5ac45!important; + } + blockquote.important p:first-child { + color: #f5ac45!important; + } + /** syntax highlighting **/ + .highlight .nt { + color: #e8a0e8; + } + .highlight .k { + color: #da5ada; + } + /* + * + * Primary Global Menu Overrides + * + */ + .dropdown-menu{ + background: $black; + } + .dropdown-menu>li>a { + color: #d0e8ff!important; + } + h6.dropdown-header { + color: $white; } } + /* * * night mode component overrides @@ -251,12 +299,17 @@ body.night { body.night { /* accordion */ +.panel { + color: #d3d4d4; + margin-bottom: 20px; + background-color: #24394c; + } .panel-default { border-color: #374656; >.panel-heading { - color: #333; + color: #c0c3c4; background-color: #101c29; - border-color: #ddd; + border-color: #2f4050; } } .panel-body { @@ -265,11 +318,25 @@ body.night { color: #bcbfc3; } /** tabs **/ + .nav-tabs { + border-bottom: 1px solid #4f6071; + } .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover { - color: #fff; + color: $white; cursor: default; background-color: #4e6071; border: 1px solid transparent; border-bottom-color: transparent; } + .popover { + color: $black; + } + .pagination>li>a, .pagination>li>span { + background-color: #0f1c2a!important; + border: 1px solid #0f1c2a!important; + } + .pagination>.active>a { + background: #000!important; + color: $white!important; + } } diff --git a/_scss/_typography.scss b/_scss/_typography.scss index 8b5ab80119..c0bee71e33 100755 --- a/_scss/_typography.scss +++ b/_scss/_typography.scss @@ -54,8 +54,8 @@ h6 { p { color: $body-text-color; - font-family: "Open Sans", sans-serif; - font-size: 15px; + font-family: $font; + font-size: $body-text-size; line-height: 24px; margin: 10px 0 10px 0; } diff --git a/_scss/_variables.scss b/_scss/_variables.scss index 74e2c59b93..279e77102d 100755 --- a/_scss/_variables.scss +++ b/_scss/_variables.scss @@ -9,7 +9,7 @@ $headings: "Geomanist Book", sans-serif; $font: "Open Sans", sans-serif; -$body-text-size: 15px; +$body-text-size: 14px; $global-header-height: 440px; @@ -40,6 +40,8 @@ $bg-secondary: #0C5176; $bg-sidebar: #FBFBFC; +$bg-component: #FBFBFC; + $bdr-sidebar: rgba(204, 204, 204, 0.29); $primary-links: #2089C4; @@ -61,17 +63,19 @@ $bg-body-night: #192837; $body-text-color-night: #d3d4d4; -$bg-secondary-night: #000; +$bg-secondary-night: #0a121b; $bg-sidebar-night: #101c29; $active-sidebar-night: #21cbc9; +$bg-component-night: #101c29; + $heading-color-night: #b9c2cc; $body-text-night: #cbdbe6; -$primary-links-night: rgba(255, 255, 255, 0.75); +$primary-links-night: #d0e8ff; $bg-footer-night: #000;