.book { .book-header { font-family: @font-family-sans; overflow: visible; height: @header-height; padding: 0px 8px; z-index: 2; font-size: 0.85em; color: @header-color; background: @header-background; .btn { display: block; height: @header-height; padding: 0px 15px; border-bottom: none; color: @header-button-color; text-transform: uppercase; line-height: @header-height; .box-shadow(none) !important; position:relative; font-size: @font-size-base; &:hover { position: relative; text-decoration: none; color: @header-button-hover-color; background: @header-button-hover-background; } } h1 { margin: 0px; font-size: 20px; font-weight: 200; text-align: center; line-height: @header-height; opacity: 0; .transition(opacity ease 0.4s); padding-left: 200px; padding-right: 200px; .transition(opacity 0.2s ease); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; a, a:hover { color: inherit; text-decoration: none; } @media (max-width: 1000px) { display: none; } i { display: none; } } &:hover { h1 { opacity: 1; } } } &.is-loading { .book-header h1 { i { display: inline-block; } a { display: none; } } } &.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; } } h1 { color: @page-color-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; } } h1 { color: @page-color-2; } } } }