diff options
Diffstat (limited to 'theme/stylesheets')
| -rwxr-xr-x | theme/stylesheets/book/body.less | 52 | ||||
| -rw-r--r-- | theme/stylesheets/book/font-settings.less | 168 | ||||
| -rwxr-xr-x | theme/stylesheets/book/header.less | 29 | ||||
| -rwxr-xr-x | theme/stylesheets/book/markdown.less | 14 | ||||
| -rwxr-xr-x | theme/stylesheets/book/navigation.less | 10 | ||||
| -rwxr-xr-x | theme/stylesheets/book/progress.less | 33 | ||||
| -rwxr-xr-x | theme/stylesheets/book/summary.less | 88 | ||||
| -rwxr-xr-x | theme/stylesheets/main.less | 1 | ||||
| -rwxr-xr-x | theme/stylesheets/variables.less | 90 |
9 files changed, 475 insertions, 10 deletions
diff --git a/theme/stylesheets/book/body.less b/theme/stylesheets/book/body.less index 58e62d5..352f9cf 100755 --- a/theme/stylesheets/book/body.less +++ b/theme/stylesheets/book/body.less @@ -6,6 +6,7 @@ left: 0px; bottom: 0px; + color: @page-color; background: @body-background; .transition(left 0.5s ease); @@ -23,7 +24,6 @@ outline: none; .page-inner { - font-family: @font-family-serif; max-width: 800px; margin: 0px auto; @@ -33,8 +33,6 @@ background: @page-background; border-radius: 2px; - - font-size: 16px; line-height: 1.5em; } @@ -57,6 +55,28 @@ min-height: calc(~"100% - 57px") } } + &.font-size-0{ + font-size:@s-font-size; + } + &.font-size-1{ + font-size:@m-font-size; + } + &.font-size-2{ + font-size:@l-font-size; + } + &.font-size-3{ + font-size:@xl-font-size; + } + &.font-size-4{ + font-size:@xxl-font-size; + } + + &.font-family-0{ + font-family: @font-family-serif; + } + &.font-family-1{ + font-family: @font-family-sans; + } } &.with-summary { @@ -72,4 +92,30 @@ .transition(none) !important; } } + &.color-theme-1{ + .book-body { + color: @page-color-1; + background: @body-background-1; + .page-wrapper { + .page-inner { + section{ + background: @page-background-1; + } + } + } + } + } + &.color-theme-2{ + .book-body { + color: @page-color-2; + background: @body-background-2; + .page-wrapper { + .page-inner { + section{ + background: @page-background-2; + } + } + } + } + } }
\ No newline at end of file diff --git a/theme/stylesheets/book/font-settings.less b/theme/stylesheets/book/font-settings.less new file mode 100644 index 0000000..df91274 --- /dev/null +++ b/theme/stylesheets/book/font-settings.less @@ -0,0 +1,168 @@ +.book-header{ + #font-settings-wrapper{ + position:relative; + .dropdown-menu{ + background-color:@header-background; + border-color:@sidebar-divider-color; + .dropdown-caret{ + position: absolute; + top: 14px; + left: -8px; + width: 10px; + height: 18px; + float: left; + overflow: hidden; + .caret-outer{ + position: absolute; + border-bottom: 9px solid transparent; + border-top: 9px solid transparent; + border-right: 9px solid rgba(0,0,0,0.1); + height: auto; + left: 0; + top: 0; + width: auto; + display: inline-block; + margin-left: -1px; + } + .caret-inner{ + position: absolute; + display: inline-block; + margin-left: -1px; + top: 0; + left: 1px; + border-bottom: 9px solid transparent; + border-top: 9px solid transparent; + border-right: 9px solid @header-background; + } + } + button{ + border: 0; + background-color:transparent; + color:@header-button-color; + &:hover{ + color:@header-button-hover-color; + background-color:@header-button-hover-background; + } + } + #enlarge-font-size{ + width: 50%; + font-size:1.4em; + } + #reduce-font-size{ + width: 50.5%; + font-size:1em; + } + .btn-group-xs{ + .btn{ + width: 33.7%; + padding: initial; + &#color-theme-preview-0{ + color:@header-button-color; + background-color:@header-background; + } + &#color-theme-preview-1{ + color:@page-color-1; + background-color:@page-background-1; + } + &#color-theme-preview-2{ + color:@header-button-color-2; + background-color:@sidebar-background-2; + } + + } + } + .list-group{ + margin: 5px 0; + .list-group-item{ + cursor:pointer; + background-color:transparent; + border-color:@sidebar-divider-color; + border-width: 1px 0 !important; + &:hover{ + color:@header-button-hover-color; + background-color:@header-button-hover-background !important; + } + &.active{ + color:@header-button-hover-color; + background-color:@header-button-hover-background !important; + } + } + } + &.open{ + display:block; + } + } + } +} + +/* + * Theme 1 + */ + +.color-theme-1{ + #font-settings-wrapper{ + .dropdown-menu{ + background-color:@sidebar-background-1; + border-color:@sidebar-divider-color-1; + .dropdown-caret .caret-inner{ + border-right: 9px solid @sidebar-background-1; + } + button{ + color:@header-button-color-1; + &:hover{ + color:@header-button-hover-color-1; + background-color:@header-button-hover-background-1; + } + } + .list-group{ + .list-group-item{ + border-color:@sidebar-divider-color-1; + &:hover{ + color:@header-button-hover-color-1; + background-color:@header-button-hover-background-1 !important; + } + &.active{ + color:@header-button-hover-color-1; + background-color:@header-button-hover-background-1 !important; + } + } + } + } + } +} + +/* + * Theme 2 + */ + +.color-theme-2{ + #font-settings-wrapper{ + .dropdown-menu{ + background-color:@sidebar-background-2; + border-color:@sidebar-divider-color-2; + .dropdown-caret .caret-inner{ + border-right: 9px solid @sidebar-background-2; + } + button{ + color:@header-button-color-2; + &:hover{ + color:@header-button-hover-color-2; + background-color:@header-button-hover-background-2; + } + } + .list-group{ + .list-group-item{ + border-color:@sidebar-divider-color-2; + &:hover{ + color:@header-button-hover-color-2; + background-color:@header-button-hover-background-2 !important; + } + &.active{ + color:@header-button-hover-color-2; + background-color:@header-button-hover-background-2 !important; + } + } + } + } + } +} diff --git a/theme/stylesheets/book/header.less b/theme/stylesheets/book/header.less index 6c45816..f89153f 100755 --- a/theme/stylesheets/book/header.less +++ b/theme/stylesheets/book/header.less @@ -3,7 +3,7 @@ font-family: @font-family-sans; position: fixed; - overflow: hidden; + overflow: visible; top: 0px; right: 0px; left: 0px; @@ -24,6 +24,7 @@ text-transform: uppercase; line-height: @header-height; .box-shadow(none) !important; + position:relative; &:hover { position: relative; @@ -64,4 +65,30 @@ .transition(none) !important; } } + &.color-theme-1{ + .book-header{ + color: @header-color-1; + background: @header-background-1; + .btn { + color: @header-button-color-1; + &:hover { + color: @header-button-hover-color-1; + background: @header-button-hover-background-1; + } + } + } + } + &.color-theme-2{ + .book-header{ + color: @header-color-2; + background: @header-background-2; + .btn { + color: @header-button-color-2; + &:hover { + color: @header-button-hover-color-2; + background: @header-button-hover-background-2; + } + } + } + } } diff --git a/theme/stylesheets/book/markdown.less b/theme/stylesheets/book/markdown.less index aa1b466..73caf86 100755 --- a/theme/stylesheets/book/markdown.less +++ b/theme/stylesheets/book/markdown.less @@ -1,8 +1,13 @@ +.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal { + color:@page-color-1; +} +.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal { + color:@page-color-2; +} .book .book-body .page-wrapper .page-inner section.normal { padding: 25px; padding-top: 15px; - background-color: white; - + color:@page-color; & > *:first-child { margin-top: 0 !important; } @@ -52,12 +57,12 @@ h1 { font-size: 28px; - color: black; } + } h2 { font-size: 24px; border-bottom: 1px solid #eee; - color: black; } + } h3 { font-size: 18px; } @@ -69,7 +74,6 @@ font-size: 14px; } h6 { - color: #777777; font-size: 14px; } p, blockquote, ul, ol, dl, table, pre { diff --git a/theme/stylesheets/book/navigation.less b/theme/stylesheets/book/navigation.less index 33cb9be..def970e 100755 --- a/theme/stylesheets/book/navigation.less +++ b/theme/stylesheets/book/navigation.less @@ -42,4 +42,14 @@ float: left; } } +} +.book.color-theme-1 .book-body { + .navigation:hover{ + background-color: @body-pagination-background-1; + } +} +.book.color-theme-2 .book-body { + .navigation:hover{ + background-color: @body-pagination-background-2; + } }
\ No newline at end of file diff --git a/theme/stylesheets/book/progress.less b/theme/stylesheets/book/progress.less index 1cfb3d6..51e13e7 100755 --- a/theme/stylesheets/book/progress.less +++ b/theme/stylesheets/book/progress.less @@ -17,7 +17,6 @@ position: relative; background: #fff; margin-bottom: 20px; - z-index: 10; .bar { height: @bar-height; @@ -81,4 +80,36 @@ } } } +} +.book.color-theme-1 .book-body { + .book-progress { + .bar { + background: @bar-background-1; + .inner { + background: @bar-progress-background-1; + } + } + } + .chapters .chapter{ + background: @bar-background-1; + &.done{ + background: @bar-progress-background-1; + } + } +} +.book.color-theme-2 .book-body { + .book-progress { + .bar { + background: @bar-background-2; + .inner { + background: @bar-progress-background-2; + } + } + } + .chapters .chapter{ + background: @bar-background-2; + &.done{ + background: @bar-progress-background-2; + } + } }
\ No newline at end of file diff --git a/theme/stylesheets/book/summary.less b/theme/stylesheets/book/summary.less index da10aca..492c92a 100755 --- a/theme/stylesheets/book/summary.less +++ b/theme/stylesheets/book/summary.less @@ -141,3 +141,91 @@ } } } + +/* + * Theme 1 + */ +.book.color-theme-1 { + .book-summary { + color: @sidebar-color-1; + background: @sidebar-background-1; + + .book-search { + background: @sidebar-search-background-1; + + input, input:focus { + border: 1px solid @sidebar-search-input-border-color-1; + } + } + + ul.summary { + li { + &.divider { + background: @sidebar-divider-color-1; + } + + i.fa-check { + color: @sidebar-icon-color-1; + } + + &.done > a { + color: @sidebar-link-completed-1; + } + + a, span { + color: @sidebar-link-color-1; + background: @sidebar-link-background-1; + } + + &.active > a, a:hover { + color: @sidebar-link-hover-color-1; + background: @sidebar-link-hover-background-1; + } + } + } + } +} + +/* + * Theme 2 + */ +.book.color-theme-2{ + .book-summary { + color: @sidebar-color-2; + background: @sidebar-background-2; + + .book-search { + background: @sidebar-search-background-2; + + input, input:focus { + border: 1px solid @sidebar-search-input-border-color-2; + } + } + + ul.summary { + li { + &.divider { + background: @sidebar-divider-color-2; + } + + i.fa-check { + color: @sidebar-icon-color-2; + } + + &.done > a { + color: @sidebar-link-completed-2; + } + + a, span { + color: @sidebar-link-color-2; + background: @sidebar-link-background-2; + } + + &.active > a, a:hover { + color: @sidebar-link-hover-color-2; + background: @sidebar-link-hover-background-2; + } + } + } + } +} diff --git a/theme/stylesheets/main.less b/theme/stylesheets/main.less index 83ef829..ff0f52e 100755 --- a/theme/stylesheets/main.less +++ b/theme/stylesheets/main.less @@ -9,6 +9,7 @@ @import "book/languages.less"; @import "book/header.less"; @import "book/summary.less"; +@import "book/font-settings.less"; @import "book/body.less"; @import "book/exercise.less"; @import "book/quiz.less"; diff --git a/theme/stylesheets/variables.less b/theme/stylesheets/variables.less index 5dc9a9e..dbf91b1 100755 --- a/theme/stylesheets/variables.less +++ b/theme/stylesheets/variables.less @@ -38,6 +38,7 @@ @sidebar-link-completed-weight: normal; // Page +@page-color: black; @page-background: white; // Progress Bar @@ -79,5 +80,94 @@ @font-family-sans: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; @font-family-base: @font-family-serif; + @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; + +/* +,--------.,--. +'--. .--'| ,---. ,---. ,--,--,--. ,---. ,---. .--. + | | | .-. || .-. :| || .-. :( .-' '--' + | | | | | |\ --.| | | |\ --..-' `).--. + `--' `--' `--' `----'`--`--`--' `----'`----' '--' +*/ +// Header +@header-color-1: #AFA790; +@header-color-2: #7e888b; +@header-background-1: #ECE3C4; +@header-background-2: #1d1f21; +@header-button-color-1: #AFA790; +@header-button-color-2: #7e888b; +@header-button-hover-color-1: #73553C; +@header-button-hover-color-2: #C9C9C9; +@header-button-hover-background-1: #E2DABE; +@header-button-hover-background-2: #0B0D0E; + +// Body +@body-background-1: #F3EACB; +@body-background-2: #1d1f21; +@body-pagination-background-1: #FFFAEA; +@body-pagination-background-2: #33404D; + +// Sidebar +@sidebar-color-1: #AFA790; +@sidebar-color-2: hsl(207, 15%, 80%); +@sidebar-background-1: hsl(207, 15%, 95%); +@sidebar-background-2: #111111; + +@sidebar-search-background-1: transparent; +@sidebar-search-background-2: transparent; +@sidebar-search-input-border-color-1: #D6CFBA; +@sidebar-search-input-border-color-2: #c4cdd4; + +@sidebar-divider-color-1: hsl(207, 15%, 85%); +@sidebar-divider-color-2: #1d1f21; + +@sidebar-link-color-1: #877F6A; +@sidebar-link-color-2: hsl(207, 15%, 50%); +@sidebar-link-background-1: transparent; +@sidebar-link-background-2: transparent; +@sidebar-link-hover-color-1: #704214; +@sidebar-link-hover-color-2: hsl(207, 100%, 50%); +@sidebar-link-hover-background-1: transparent; +@sidebar-link-hover-background-2: transparent; + +@sidebar-icon-color-1: @bar-progress-background; +@sidebar-icon-color-2: @bar-progress-background; +@sidebar-link-completed-1: hsl(207, 15%, 25%); +@sidebar-link-completed-2: hsl(207, 15%, 25%); +@sidebar-link-completed-weight-1: normal; +@sidebar-link-completed-weight-2: normal; + +// Page +@page-color-1: #704214; +@page-color-2: #a4b1b1; +@page-background-1: #F3EACB; +@page-background-2: #1d1f21; + +@bar-background-1: #F3EACB; +@bar-background-2: #1d1f21; +@bar-progress-background-1: #704214; +@bar-progress-background-2: hsl(120, 60%, 50%); + +// Basics of a navbar +@navbar-default-border-1: #d5d5d5; +@navbar-default-border-2: #d5d5d5; + +// Navbar brand label +@navbar-default-color-1: #333; +@navbar-default-color-2: #333; +@navbar-default-link-color-1: #333; +@navbar-default-link-color-2: #333; +@navbar-default-brand-color-1: @navbar-default-link-color; +@navbar-default-brand-color-2: @navbar-default-link-color; +@navbar-default-brand-hover-color-1: @navbar-default-link-color; +@navbar-default-brand-hover-color-2: @navbar-default-link-color; +@navbar-default-brand-hover-bg-1: transparent; +@navbar-default-brand-hover-bg-2: transparent; |