diff options
Diffstat (limited to 'theme/stylesheets/website/summary.less')
| -rwxr-xr-x | theme/stylesheets/website/summary.less | 242 |
1 files changed, 242 insertions, 0 deletions
diff --git a/theme/stylesheets/website/summary.less b/theme/stylesheets/website/summary.less new file mode 100755 index 0000000..50aeebd --- /dev/null +++ b/theme/stylesheets/website/summary.less @@ -0,0 +1,242 @@ +.book { + .book-summary { + font-family: @font-family-sans; + + position: absolute; + top: 0px; + left: -@sidebar-width; + bottom: 0px; + z-index: 1; + + width: @sidebar-width; + color: @sidebar-color; + background: @sidebar-background; + border-right: @sidebar-border-right; + + .transition(left @sidebar-transition-duration ease); + + .book-search { + padding: @sidebar-search-padding; + + background: @sidebar-search-background; + + position: absolute; + top: -@header-height; + left: 0px; + right: 0px; + + .transition(top 0.5s ease); + + input, input:focus, input:hover { + width: 100%; + background: @sidebar-search-input-background; + border: 1px solid @sidebar-search-input-border-color; + .box-shadow(none); + outline: none; + line-height: 22px; + padding: 7px 4px; + color: inherit; + } + } + + ul.summary { + position: absolute; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; + + overflow-y: auto; + + list-style: none; + margin: 0px; + padding: 0px; + + .transition(top 0.5s ease); + + li { + list-style: none; + + &.divider { + height: 1px; + margin: 7px 0; + overflow: hidden; + background: @sidebar-divider-color; + } + + i.fa-check { + display: none; + position: absolute; + right: 9px; + top: 16px; + font-size: 9px; + color: @sidebar-icon-color; + } + + &.done { + > a { + color: @sidebar-link-completed; + font-weight: @sidebar-link-completed-weight; + + i { + display: inline; + } + } + } + + a, span { + display: block; + padding: 10px 15px; + border-bottom: none; + color: @sidebar-link-color; + background: @sidebar-link-background; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + position: relative; + } + + span { + cursor: not-allowed; + .opacity(0.3); + } + + &.active > a, a:hover { + color: @sidebar-link-hover-color; + background: @sidebar-link-hover-background; + text-decoration: none; + } + + ul { + padding-left: @sidebar-nested-padding; + } + } + } + + @media (max-width: @sidebar-breakpoint) { + width: calc(~"100% - 60px"); + bottom: 0px; + left: -100%; + } + } + + &.with-summary { + .book-summary { + left: 0px; + } + } + + &.without-animation { + .book-summary { + .transition(none) !important; + } + } + + &.with-search { + .book-summary { + .book-search { + top: 0px; + } + + ul.summary { + top: @header-height; + } + } + } +} + +/* + * Theme 1 + */ +.book.color-theme-1 { + .book-summary { + color: @sidebar-color-1; + background: @sidebar-background-1; + border-right: @sidebar-border-right-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; + box-shadow: none; + } + + 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; + 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; + } + } + } + } +} + +/* + * Theme 2 + */ +.book.color-theme-2{ + .book-summary { + color: @sidebar-color-2; + background: @sidebar-background-2; + border-right: @sidebar-border-right-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; + box-shadow: none; + } + + 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; + 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; + } + } + } + } +} |