docker
/
docs
mirror of https://github.com/docker/docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
This commit is contained in:
Josh south 2017-10-09 16:42:07 -07:00 committed by John Mulhausen
parent 012969eb9f
commit a74533976d
7 changed files with 100 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
_layouts/docs.html
View File

@ -161,7 +161,7 @@ else %}{% assign edit_url = "" %}{% endif %} {% break %} {% endif %} {% endfor %
class="nomunge"><i class="fa fa-check" aria-hidden="true"></i> Request docs changes</a></li> class="nomunge"><i class="fa fa-check" aria-hidden="true"></i> Request docs changes</a></li>
<li><a href="https://www.docker.com/docker-support-services"><i class="fa fa-question" aria-hidden="true"></i> Get support</a></li> <li><a href="https://www.docker.com/docker-support-services"><i class="fa fa-question" aria-hidden="true"></i> Get support</a></li>
<!-- toggle mode --> <!-- toggle mode -->
<!-- <li> <li>
<div class="toggle-mode"> <div class="toggle-mode">
<div class="icon"> <div class="icon">
<i class="fa fa-sun-o" aria-hidden="true"></i> <i class="fa fa-sun-o" aria-hidden="true"></i>
@ -176,7 +176,7 @@ else %}{% assign edit_url = "" %}{% endif %} {% break %} {% endif %} {% endfor %
<i class="fa fa-moon-o" aria-hidden="true"></i> <i class="fa fa-moon-o" aria-hidden="true"></i>
</div> </div>
</div> </div>
</li> --> </li>
</ul> </ul>
</div> </div>
{% 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" %} {% 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" %}

6
_scss/_base.scss
View File

@ -107,7 +107,7 @@ footer {
} }
.footer-copyright p { .footer-copyright p {
font-family: "Open Sans", sans-serif; font-family: $font;
font-size: 12px; font-size: 12px;
line-height: 17px; line-height: 17px;
color: #637986; color: #637986;
@ -132,7 +132,7 @@ footer {
} }
.footer_social_nav ul li:before { .footer_social_nav ul li:before {
color: #fff; color: $white;
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 10px; left: 10px;
@ -147,7 +147,7 @@ footer {
height: 32px; height: 32px;
background-color: #82949E; background-color: #82949E;
border-radius: 50px; border-radius: 50px;
color: #fff; color: $white;
display: block; display: block;
text-indent: 9999px; text-indent: 9999px;
overflow: hidden; overflow: hidden;

3
_scss/_content.scss
View File

@ -67,8 +67,7 @@ pre code {
.component, .component,
.component-full { .component-full {
background: #FBFBFC; background: $bg-component;
// border: 1px solid rgba(204, 204, 204, 0.21);
} }
.component-full-icon { .component-full-icon {

8
_scss/_layout.scss
View File

@ -86,8 +86,6 @@
z-index: -1; z-index: -1;
} }
.columns, .columns,
.col-body { .col-body {
display: flex; display: flex;
@ -98,17 +96,17 @@
order: -1; order: -1;
} }
// .col-content {}
.col-body { .col-body {
flex-direction: row; flex-direction: row;
flex: 1; flex: 1;
min-height: 555px; min-height: 555px;
} }
.col-content { .col-content {
flex: 1; flex: 1;
transition: all 0.5s ease; transition: all 0.5s ease;
} }
.col-nav, .col-nav,
.col-toc { .col-toc {
flex: 0 0 0; flex: 0 0 0;
@ -118,7 +116,6 @@
display: none; display: none;
} }
@media only screen and (min-width: 1000px) { @media only screen and (min-width: 1000px) {
.col-nav, .col-nav,
.col-toc { .col-toc {
@ -155,7 +152,6 @@ section.section {
width: 270px; width: 270px;
} }
.wrapper.right-open .page-content { .wrapper.right-open .page-content {
padding-right: 190px; padding-right: 190px;
background-color: purple; background-color: purple;

99
_scss/_night-mode.scss
View File

@ -6,6 +6,7 @@
body.night { body.night {
background-color: $bg-body-night; background-color: $bg-body-night;
color: $body-text-color-night;
h1, h1,
h2, h2,
h3, h3,
@ -31,6 +32,9 @@ body.night {
background-color: #101c29!important; background-color: #101c29!important;
animation: none!important; animation: none!important;
} }
hr {
border-top: 1px solid #4f6071;
}
.hero-text h1, .hero-text h1,
div#side-toc-title { div#side-toc-title {
color: $white; color: $white;
@ -41,7 +45,7 @@ body.night {
.nav-secondary input[type=search] { .nav-secondary input[type=search] {
background: rgba(76, 76, 76, 0.47) url(/images/search.png) no-repeat; background: rgba(76, 76, 76, 0.47) url(/images/search.png) no-repeat;
background-position: 10px 9px; background-position: 10px 9px;
color: #fff; color: $white;
} }
.nav-secondary-tabs .search-form input[type=search] { .nav-secondary-tabs .search-form input[type=search] {
background: rgba(16, 28, 41, 0.6) url(/images/search.png) no-repeat; background: rgba(16, 28, 41, 0.6) url(/images/search.png) no-repeat;
@ -61,17 +65,19 @@ body.night {
#sidebar-wrapper-home, #sidebar-wrapper-home,
.sidebar-home .affix, .sidebar-home .affix,
#sidebar-right, #sidebar-right,
#sidebar-right.affix { #sidebar-right.affix,
.col-toc,
.col-nav {
background-color: $bg-sidebar-night; background-color: $bg-sidebar-night;
border: none; border: none;
} }
.nav-secondary-tabs { .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-top: 1px solid rgba(68, 77, 87, 0.38);
border-bottom: 1px solid #29343f; border-bottom: 1px solid #29343f;
} }
.nav-secondary-tabs.affix { .nav-secondary-tabs.affix {
background: $black; background: $bg-secondary-night;
} }
.nav-sidebar ul li a.active, .nav-sidebar ul li a.active,
.nav-sidebar.nav>li>a:focus, .nav-sidebar.nav>li>a:focus,
@ -93,7 +99,6 @@ body.night {
color: $body-text-night; color: $body-text-night;
} }
blockquote { blockquote {
border-left: 6px solid #439FD1;
background: #1f3341; background: #1f3341;
} }
table { table {
@ -115,19 +120,21 @@ body.night {
color: #f3f3f3; color: #f3f3f3;
word-break: break-all; word-break: break-all;
word-wrap: break-word; word-wrap: break-word;
background-color: rgba(0, 0, 0, 0.71) !important; background-color: #0a121b !important;
border: 1px solid $black; border: 1px solid $black;
border-radius: 4px; border-radius: 4px;
} }
code { code {
padding: 3px 7px; padding: 3px 7px;
font-size: 90%; color: #c1f1f0 !important;
color: #ffffff!important;
border-radius: 2px; border-radius: 2px;
background: transparent !important; background: #0a121b !important;
}
pre>code {
padding: 0px;
} }
.nav-secondary .dropdown-btn { .nav-secondary .dropdown-btn {
color: #6e6f6f; color: #d0e8ff;
} }
.outline-btn { .outline-btn {
background: #101c29; background: #101c29;
@ -164,7 +171,7 @@ body.night {
div#autocompleteResults { div#autocompleteResults {
background: $bg-search-results-night; background: $bg-search-results-night;
border: 1px solid $black; border: 1px solid $black;
color: #fff; color: $white;
padding: 20px 55px 15px 15px; padding: 20px 55px 15px 15px;
margin: 10px 0 0 0; margin: 10px 0 0 0;
position: absolute; position: absolute;
@ -236,13 +243,54 @@ body.night {
} }
.footer { .footer {
background-color: $bg-footer-night; 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 { .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 * night mode component overrides
@ -251,12 +299,17 @@ body.night {
body.night { body.night {
/* accordion */ /* accordion */
.panel {
color: #d3d4d4;
margin-bottom: 20px;
background-color: #24394c;
}
.panel-default { .panel-default {
border-color: #374656; border-color: #374656;
>.panel-heading { >.panel-heading {
color: #333; color: #c0c3c4;
background-color: #101c29; background-color: #101c29;
border-color: #ddd; border-color: #2f4050;
} }
} }
.panel-body { .panel-body {
@ -265,11 +318,25 @@ body.night {
color: #bcbfc3; color: #bcbfc3;
} }
/** tabs **/ /** 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 { .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
color: #fff; color: $white;
cursor: default; cursor: default;
background-color: #4e6071; background-color: #4e6071;
border: 1px solid transparent; border: 1px solid transparent;
border-bottom-color: 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;
}
} }

4
_scss/_typography.scss
View File

@ -54,8 +54,8 @@ h6 {
p { p {
color: $body-text-color; color: $body-text-color;
font-family: "Open Sans", sans-serif; font-family: $font;
font-size: 15px; font-size: $body-text-size;
line-height: 24px; line-height: 24px;
margin: 10px 0 10px 0; margin: 10px 0 10px 0;
} }

10
_scss/_variables.scss
View File

@ -9,7 +9,7 @@ $headings: "Geomanist Book", sans-serif;
$font: "Open Sans", sans-serif; $font: "Open Sans", sans-serif;
$body-text-size: 15px; $body-text-size: 14px;
$global-header-height: 440px; $global-header-height: 440px;
@ -40,6 +40,8 @@ $bg-secondary: #0C5176;
$bg-sidebar: #FBFBFC; $bg-sidebar: #FBFBFC;
$bg-component: #FBFBFC;
$bdr-sidebar: rgba(204, 204, 204, 0.29); $bdr-sidebar: rgba(204, 204, 204, 0.29);
$primary-links: #2089C4; $primary-links: #2089C4;
@ -61,17 +63,19 @@ $bg-body-night: #192837;
$body-text-color-night: #d3d4d4; $body-text-color-night: #d3d4d4;
$bg-secondary-night: #000; $bg-secondary-night: #0a121b;
$bg-sidebar-night: #101c29; $bg-sidebar-night: #101c29;
$active-sidebar-night: #21cbc9; $active-sidebar-night: #21cbc9;
$bg-component-night: #101c29;
$heading-color-night: #b9c2cc; $heading-color-night: #b9c2cc;
$body-text-night: #cbdbe6; $body-text-night: #cbdbe6;
$primary-links-night: rgba(255, 255, 255, 0.75); $primary-links-night: #d0e8ff;
$bg-footer-night: #000; $bg-footer-night: #000;