diff --git a/UI/Web/src/app/book-reader/_components/reader-settings/reader-settings.component.ts b/UI/Web/src/app/book-reader/_components/reader-settings/reader-settings.component.ts index 694e41857..efa9a9294 100644 --- a/UI/Web/src/app/book-reader/_components/reader-settings/reader-settings.component.ts +++ b/UI/Web/src/app/book-reader/_components/reader-settings/reader-settings.component.ts @@ -14,6 +14,7 @@ import { FontFamily, BookService } from '../../_services/book.service'; import { BookBlackTheme } from '../../_models/book-black-theme'; import { BookDarkTheme } from '../../_models/book-dark-theme'; import { BookWhiteTheme } from '../../_models/book-white-theme'; +import { BookPaperTheme } from '../../_models/book-paper-theme'; /** * Used for book reader. Do not use for other components @@ -54,6 +55,15 @@ export const bookColorThemes = [ selector: 'brtheme-white', content: BookWhiteTheme }, + { + name: 'Paper', + colorHash: '#F1E4D5', + isDarkTheme: false, + isDefault: false, + provider: ThemeProvider.System, + selector: 'brtheme-paper', + content: BookPaperTheme + }, ]; const mobileBreakpointMarginOverride = 700; diff --git a/UI/Web/src/app/book-reader/_models/book-paper-theme.ts b/UI/Web/src/app/book-reader/_models/book-paper-theme.ts new file mode 100644 index 000000000..129a5df13 --- /dev/null +++ b/UI/Web/src/app/book-reader/_models/book-paper-theme.ts @@ -0,0 +1,143 @@ +// Important note about themes. Must have one section with .reader-container that contains color, background-color and rest of the styles must be scoped to .book-content +export const BookPaperTheme = ` + :root .brtheme-paper { + --drawer-text-color: white; + --br-actionbar-bg-color: white; + --bs-btn-active-color: black; + --progress-bg-color: rgb(222, 226, 230); + + /* General */ + --color-scheme: light; + --bs-body-color: black; + --hr-color: rgba(239, 239, 239, 0.125); + --accent-bg-color: rgba(1, 4, 9, 0.5); + --accent-text-color: lightgrey; + --body-text-color: black; + --btn-icon-filter: invert(1) grayscale(100%) brightness(200%); + + /* Drawer */ + --drawer-bg-color: #F1E4D5; + --drawer-text-color: black; + --drawer-pagination-horizontal-rule: inset 0 -1px 0 rgb(255 255 255 / 20%); + + + /* Accordion */ + --accordion-header-bg-color: rgba(52, 60, 70, 0.5); + --accordion-body-bg-color: #F1E4D5; + --accordion-body-border-color: rgba(239, 239, 239, 0.125); + --accordion-body-text-color: var(--body-text-color); + --accordion-header-collapsed-bg-color: #F1E4D5; + --accordion-button-focus-border-color: unset; + --accordion-button-focus-box-shadow: unset; + --accordion-active-body-bg-color: #F1E4D5; + + /* Buttons */ + --btn-focus-boxshadow-color: rgb(255 255 255 / 50%); + --btn-primary-text-color: white; + --btn-primary-bg-color: var(--primary-color); + --btn-primary-border-color: var(--primary-color); + --btn-primary-hover-text-color: white; + --btn-primary-hover-bg-color: var(--primary-color-darker-shade); + --btn-primary-hover-border-color: var(--primary-color-darker-shade); + --btn-alt-bg-color: #424c72; + --btn-alt-border-color: #444f75; + --btn-alt-hover-bg-color: #3b4466; + --btn-alt-focus-bg-color: #343c59; + --btn-alt-focus-boxshadow-color: rgb(255 255 255 / 50%); + --btn-fa-icon-color: black; + --btn-disabled-bg-color: #343a40; + --btn-disabled-text-color: #efefef; + --btn-disabled-border-color: #6c757d; + + /* Inputs */ + --input-bg-color: white; + --input-bg-readonly-color: #F1E4D5; + --input-focused-border-color: #ccc; + --input-placeholder-color: black; + --input-border-color: #ccc; + --input-text-color: black; + --input-focus-boxshadow-color: rgb(255 255 255 / 50%); + + /* Nav (Tabs) */ + --nav-tab-border-color: rgba(44, 118, 88, 0.7); + --nav-tab-text-color: var(--body-text-color); + --nav-tab-bg-color: var(--primary-color); + --nav-tab-hover-border-color: var(--primary-color); + --nav-tab-active-text-color: white; + --nav-tab-border-hover-color: transparent; + --nav-tab-hover-text-color: var(--body-text-color); + --nav-tab-hover-bg-color: transparent; + --nav-tab-border-top: rgba(44, 118, 88, 0.7); + --nav-tab-border-left: rgba(44, 118, 88, 0.7); + --nav-tab-border-bottom: rgba(44, 118, 88, 0.7); + --nav-tab-border-right: rgba(44, 118, 88, 0.7); + --nav-tab-hover-border-top: rgba(44, 118, 88, 0.7); + --nav-tab-hover-border-left: rgba(44, 118, 88, 0.7); + --nav-tab-hover-border-bottom: var(--bs-body-bg); + --nav-tab-hover-border-right: rgba(44, 118, 88, 0.7); + --nav-tab-active-hover-bg-color: var(--primary-color); + --nav-link-bg-color: var(--primary-color); + --nav-link-active-text-color: white; + --nav-link-text-color: white; + + + + /* Reading Bar */ + --br-actionbar-button-hover-border-color: #6c757d; + --br-actionbar-bg-color: #F1E4D5; + + /* Drawer */ + --drawer-pagination-horizontal-rule: inset 0 -1px 0 rgb(0 0 0 / 13%); +} + +.reader-container { + color: black !important; + background-color: #fff3c9 !important; + background: url("/assets/images/paper-bg.png"); +} + +.book-content *:not(input), .book-content *:not(select), .book-content *:not(code), .book-content *:not(:link), .book-content *:not(.ngx-toastr) { + color: black !important; +} + +.book-content code { + color: #e83e8c !important; +} + +.book-content :link, .book-content a { + color: #8db2e5 !important; +} + +.book-content img, .book-content img[src] { +z-index: 1; +filter: brightness(0.85) !important; +background-color: initial !important; +} + + +.book-content *:not(code), .book-content *:not(a) { + //background-color: #F1E4D5; + box-shadow: none; + text-shadow: none; + border-radius: unset; + color: #dcdcdc !important; +} + +.book-content :visited, .book-content :visited *, .book-content :visited *[class] {color: rgb(240, 50, 50) !important} +.book-content :link:not(cite), :link .book-content *:not(cite) {color: #00f !important} + +.btn-check:checked + .btn { + color: white; + background-color: var(--primary-color); +} + +.reader-container.column-layout-2::before { + content: ""; + position: absolute; + top: 0; + left: 50%; + height: 100%; + box-shadow: 0px 0px 34.38px 5px rgba(0, 0, 0, 0.43), 0px 0px 6.28px 2px rgba(0, 0, 0, 0.43), 0px 0px 15.7px 4px rgba(0, 0, 0, 0.43), 0px 0px 1.57px 0.3px rgba(0, 0, 0, 0.43); +} + +`; diff --git a/UI/Web/src/assets/images/paper-bg.png b/UI/Web/src/assets/images/paper-bg.png new file mode 100644 index 000000000..f203d662a Binary files /dev/null and b/UI/Web/src/assets/images/paper-bg.png differ