mirror of
https://github.com/GitbookIO/gitbook.git
synced 2026-09-21 01:53:26 +00:00
Merge pull request #506 from Nijikokun/feature/clarity-midnight
Clarity: Midnight Theme (Night)
This commit is contained in:
File diff suppressed because one or more lines are too long
@@ -16,57 +16,123 @@
|
||||
}
|
||||
|
||||
.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal {
|
||||
color:@page-color-1;
|
||||
color: @page-color-1;
|
||||
|
||||
a {
|
||||
color: @page-link-color-1;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: @page-heading-color-1;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
border-color: @page-heading-border-color-1;
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: @page-h6-color-1;
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: @page-hr-color-1;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-color: @page-blockquote-border-color-1;
|
||||
}
|
||||
|
||||
pre, code {
|
||||
background: #fdf6e3;
|
||||
color: #657b83;
|
||||
border-color: darken(#fdf6e3, 15%);
|
||||
background: @page-pre-background-1;
|
||||
color: @page-pre-color-1;
|
||||
border-color: @page-pre-border-color-1;
|
||||
|
||||
@import "./highlight/sepia.less";
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background-color: @page-highlight-background-1;
|
||||
}
|
||||
|
||||
table {
|
||||
th, td {
|
||||
border-color: darken(#fdf6e3, 25%);
|
||||
border-color: @page-table-header-border-color-1;
|
||||
}
|
||||
|
||||
tr {
|
||||
background: #fdf6e3;
|
||||
color: inherit;
|
||||
border-color: #444;
|
||||
color: @page-table-row-color-1;
|
||||
background-color: @page-table-row-background-1;
|
||||
border-color: @page-table-row-border-color-1;
|
||||
}
|
||||
|
||||
tr:nth-child(2n) {
|
||||
background-color: darken(#fdf6e3, 5%);
|
||||
background-color: @page-table-row-odd-background-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal {
|
||||
color:@page-color-2;
|
||||
color: @page-color-2;
|
||||
|
||||
a {
|
||||
color: @page-link-color-2;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: @page-heading-color-2;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
border-color: @page-heading-border-color-2;
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: @page-h6-color-2;
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: @page-hr-color-2;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-color: @page-blockquote-border-color-2;
|
||||
}
|
||||
|
||||
pre, code {
|
||||
background: black;
|
||||
color: #eaeaea;
|
||||
border-color: #000;
|
||||
color: @page-pre-color-2;
|
||||
background: @page-pre-background-2;
|
||||
border-color: @page-pre-border-color-2;
|
||||
|
||||
@import "./highlight/night.less";
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background-color: @page-highlight-background-2;
|
||||
}
|
||||
|
||||
table {
|
||||
th, td {
|
||||
border-color: #444;
|
||||
border-color: @page-table-header-border-color-2;
|
||||
}
|
||||
|
||||
tr {
|
||||
background-color: black;
|
||||
color: #eaeaea;
|
||||
border-color: #444;
|
||||
color: @page-table-row-color-2;
|
||||
background-color: @page-table-row-background-2;
|
||||
border-color: @page-table-row-border-color-2;
|
||||
}
|
||||
|
||||
tr:nth-child(2n) {
|
||||
background-color: #222;
|
||||
background-color: @page-table-row-odd-background-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
width: @sidebar-width;
|
||||
color: @sidebar-color;
|
||||
background: @sidebar-background;
|
||||
border-right: 1px solid @sidebar-border;
|
||||
border-right: @sidebar-border-right;
|
||||
|
||||
.transition(left @sidebar-transition-duration ease);
|
||||
|
||||
@@ -152,6 +152,7 @@
|
||||
.book-summary {
|
||||
color: @sidebar-color-1;
|
||||
background: @sidebar-background-1;
|
||||
border-right: @sidebar-border-right-1;
|
||||
|
||||
.book-search {
|
||||
background: @sidebar-search-background-1;
|
||||
@@ -179,11 +180,13 @@
|
||||
a, span {
|
||||
color: @sidebar-link-color-1;
|
||||
background: @sidebar-link-background-1;
|
||||
font-weight: @sidebar-link-weight-1;
|
||||
}
|
||||
|
||||
&.active > a, a:hover {
|
||||
color: @sidebar-link-hover-color-1;
|
||||
background: @sidebar-link-hover-background-1;
|
||||
font-weight: @sidebar-link-hover-weight-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -197,6 +200,7 @@
|
||||
.book-summary {
|
||||
color: @sidebar-color-2;
|
||||
background: @sidebar-background-2;
|
||||
border-right: @sidebar-border-right-2;
|
||||
|
||||
.book-search {
|
||||
background: @sidebar-search-background-2;
|
||||
@@ -224,11 +228,13 @@
|
||||
a, span {
|
||||
color: @sidebar-link-color-2;
|
||||
background: @sidebar-link-background-2;
|
||||
font-weight: @sidebar-link-weight-2;
|
||||
}
|
||||
|
||||
&.active > a, a:hover {
|
||||
color: @sidebar-link-hover-color-2;
|
||||
background: @sidebar-link-hover-background-2;
|
||||
font-weight: @sidebar-link-hover-weight-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
@sidebar-breakpoint: 600px;
|
||||
@sidebar-color: hsl(207, 15%, 25%);
|
||||
@sidebar-background: #fafafa;
|
||||
@sidebar-border: @header-border;
|
||||
@sidebar-border-right: 1px solid @header-border;
|
||||
|
||||
@sidebar-nested-padding: 20px;
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
@sidebar-search-input-background: transparent;
|
||||
@sidebar-search-input-border-color: transparent;
|
||||
|
||||
@sidebar-divider-color: @sidebar-border;
|
||||
@sidebar-divider-color: @header-border;
|
||||
|
||||
@sidebar-link-color: @sidebar-color;
|
||||
@sidebar-link-background: transparent;
|
||||
@@ -103,12 +103,12 @@
|
||||
@FontPath: '@{staticPath}/fonts';
|
||||
@fa-font-path: "@{FontPath}/fontawesome";
|
||||
|
||||
@s-font-size: 1.2rem;
|
||||
@m-font-size: 1.4rem;
|
||||
@l-font-size: 1.6rem;
|
||||
@xl-font-size: 2.2rem;
|
||||
@xxl-font-size: 4.0rem;
|
||||
@default-font-size: @l-font-size;
|
||||
@s-font-size: 1.2rem;
|
||||
@m-font-size: 1.4rem;
|
||||
@l-font-size: 1.6rem;
|
||||
@xl-font-size: 2.2rem;
|
||||
@xxl-font-size: 4.0rem;
|
||||
@default-font-size: @l-font-size;
|
||||
|
||||
/*
|
||||
,--------.,--.
|
||||
@@ -123,9 +123,9 @@
|
||||
@header-background-1: transparent;
|
||||
@header-background-2: transparent;
|
||||
@header-button-color-1: #AFA790;
|
||||
@header-button-color-2: #7e888b;
|
||||
@header-button-color-2: hsl(230, 17%, 28%);
|
||||
@header-button-hover-color-1: #73553C;
|
||||
@header-button-hover-color-2: #C9C9C9;
|
||||
@header-button-hover-color-2: hsl(60, 100%, 98%);
|
||||
@header-button-hover-background-1: none;
|
||||
@header-button-hover-background-2: none;
|
||||
@header-dropdown-background-1: @sidebar-background-1;
|
||||
@@ -133,14 +133,16 @@
|
||||
|
||||
// Body
|
||||
@body-background-1: #F3EACB;
|
||||
@body-background-2: #1d1f21;
|
||||
@body-background-2: hsl(228, 21%, 14%);
|
||||
|
||||
// Sidebar
|
||||
@sidebar-transition-duration: 250ms;
|
||||
@sidebar-color-1: #AFA790;
|
||||
@sidebar-color-2: hsl(207, 15%, 80%);
|
||||
@sidebar-color-2: hsl(226, 20%, 78%);
|
||||
@sidebar-background-1: #111;
|
||||
@sidebar-background-2: #111;
|
||||
@sidebar-background-2: hsl(229, 20%, 22%);
|
||||
@sidebar-border-right-1: @sidebar-border-right;
|
||||
@sidebar-border-right-2: none;
|
||||
|
||||
@sidebar-search-background-1: transparent;
|
||||
@sidebar-search-background-2: transparent;
|
||||
@@ -148,51 +150,92 @@
|
||||
@sidebar-search-input-border-color-2: transparent;
|
||||
|
||||
@sidebar-divider-color-1: @sidebar-divider-color;
|
||||
@sidebar-divider-color-2: #1d1f21;
|
||||
@sidebar-divider-color-2: hsl(230, 19%, 19%);
|
||||
|
||||
@sidebar-link-color-1: #877F6A;
|
||||
@sidebar-link-color-2: hsl(207, 15%, 50%);
|
||||
@sidebar-link-color-2: hsl(226, 22%, 80%);
|
||||
@sidebar-link-background-1: transparent;
|
||||
@sidebar-link-background-2: transparent;
|
||||
@sidebar-link-weight-1: normal;
|
||||
@sidebar-link-weight-2: 600;
|
||||
@sidebar-link-hover-color-1: #704214;
|
||||
@sidebar-link-hover-color-2: hsl(207, 100%, 50%);
|
||||
@sidebar-link-hover-color-2: hsl(240, 5%, 96%);
|
||||
@sidebar-link-hover-background-1: transparent;
|
||||
@sidebar-link-hover-background-2: transparent;
|
||||
@sidebar-link-hover-background-2: hsl(233, 19%, 18%);
|
||||
@sidebar-link-hover-weight-1: normal;
|
||||
@sidebar-link-hover-weight-2: 600;
|
||||
|
||||
@sidebar-icon-color-1: hsl(120, 60%, 50%);
|
||||
@sidebar-icon-color-2: @sidebar-icon-color-1;
|
||||
@sidebar-link-completed-1: @sidebar-link-color-1;
|
||||
@sidebar-link-completed-2: @sidebar-link-color-2;
|
||||
@sidebar-link-completed-2: hsl(227, 13%, 44%);
|
||||
@sidebar-link-completed-weight-1: normal;
|
||||
@sidebar-link-completed-weight-2: normal;
|
||||
@sidebar-link-completed-weight-2: 600;
|
||||
|
||||
// Dropdown
|
||||
@dropdown-divider-color-1: @sidebar-divider-color-1;
|
||||
@dropdown-background-1: @sidebar-background-1;
|
||||
@dropdown-button-color-1: @header-button-color-1;
|
||||
@dropdown-border-color-1: @sidebar-divider-color-1;
|
||||
@dropdown-button-hover-color-1: @header-button-hover-color-1;
|
||||
|
||||
@dropdown-divider-color-2: @sidebar-divider-color-2;
|
||||
@dropdown-background-2: @sidebar-background-2;
|
||||
@dropdown-button-color-2: @header-button-color-2;
|
||||
@dropdown-border-color-1: @sidebar-divider-color-1;
|
||||
@dropdown-border-color-2: @sidebar-divider-color-2;
|
||||
@dropdown-button-hover-color-2: @header-button-hover-color-2;
|
||||
@dropdown-background-1: @sidebar-background-1;
|
||||
@dropdown-background-2: @sidebar-background-2;
|
||||
|
||||
@dropdown-button-color-1: @header-button-color-1;
|
||||
@dropdown-button-color-2: hsl(228, 13%, 44%);
|
||||
@dropdown-button-hover-color-1: @header-button-hover-color-1;
|
||||
@dropdown-button-hover-color-2: hsl(240, 5%, 96%);
|
||||
|
||||
// Page
|
||||
@page-color-1: #704214;
|
||||
@page-color-2: #a4b1b1;
|
||||
@page-background-1: #F3EACB;
|
||||
@page-background-2: #1d1f21;
|
||||
@page-color-1: #704214;
|
||||
@page-color-2: hsl(214, 29%, 80%);
|
||||
@page-background-1: @body-background-1;
|
||||
@page-background-2: @body-background-2;
|
||||
|
||||
@bar-background-1: #F3EACB;
|
||||
@bar-background-2: #1d1f21;
|
||||
@page-link-color-1: inherit;
|
||||
@page-link-color-2: hsl(193, 61%, 53%);
|
||||
|
||||
@page-heading-color-1: inherit;
|
||||
@page-heading-color-2: hsl(60, 100%, 99%);
|
||||
@page-heading-border-color-1: inherit;
|
||||
@page-heading-border-color-2: hsl(230, 17%, 26%);
|
||||
@page-h6-color-1: inherit;
|
||||
@page-h6-color-2: hsl(230, 17%, 26%);
|
||||
|
||||
@page-hr-color-1: inherit;
|
||||
@page-hr-color-2: hsl(230, 17%, 26%);
|
||||
|
||||
@page-blockquote-border-color-1: inherit;
|
||||
@page-blockquote-border-color-2: hsl(230, 17%, 26%);
|
||||
|
||||
@page-pre-color-1: #657b83;
|
||||
@page-pre-color-2: hsl(206, 43%, 73%);
|
||||
@page-pre-background-1: #fdf6e3;
|
||||
@page-pre-background-2: hsl(229, 20%, 22%);
|
||||
@page-pre-border-color-1: darken(#fdf6e3, 15%);
|
||||
@page-pre-border-color-2: hsl(229, 20%, 22%);
|
||||
@page-highlight-background-1: inherit;
|
||||
@page-highlight-background-2: hsl(233, 18%, 19%);
|
||||
|
||||
@page-table-header-border-color-1: darken(#fdf6e3, 25%);
|
||||
@page-table-header-border-color-2: hsl(230, 17%, 28%);
|
||||
@page-table-row-border-color-1: #444;
|
||||
@page-table-row-border-color-2: hsl(230, 17%, 28%);
|
||||
@page-table-row-color-1: inherit;
|
||||
@page-table-row-color-2: hsl(216, 24%, 77%);
|
||||
@page-table-row-background-1: #fdf6e3;
|
||||
@page-table-row-background-2: hsl(229, 19%, 22%);
|
||||
@page-table-row-odd-background-1: darken(#fdf6e3, 5%);
|
||||
@page-table-row-odd-background-2: hsl(229, 17%, 25%);
|
||||
|
||||
// Page Bar
|
||||
@bar-background-1: @page-background-1;
|
||||
@bar-background-2: @page-background-2;
|
||||
|
||||
// Navigation
|
||||
@navigation-color-1: @header-button-color-1;
|
||||
@navigation-color-2: @header-button-color-2;
|
||||
@navigation-color-2: hsl(224, 19%, 27%);
|
||||
@navigation-hover-color-1: @header-button-hover-color-1;
|
||||
@navigation-hover-color-2: @header-button-hover-color-2;
|
||||
@navigation-hover-color-2: hsl(60, 100%, 98%);
|
||||
|
||||
// Basics of a navbar
|
||||
@navbar-default-border-1: #d5d5d5;
|
||||
|
||||
Reference in New Issue
Block a user