diff --git a/cps/static/css/epub_themes.css b/cps/static/css/epub_themes.css index 16c27805..392a2817 100644 --- a/cps/static/css/epub_themes.css +++ b/cps/static/css/epub_themes.css @@ -1,19 +1,83 @@ +@font-face { + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + src: local("Roboto"), local("Roboto-Regular"), + url("fonts/Roboto-Regular.ttf") format("truetype"); +} + +@font-face { + font-family: "OpenSans"; + font-style: normal; + font-weight: 400; + src: local("OpenSans"), local("Open Sans"), local("OpenSans-Regular"), + url("fonts/OpenSans-Regular.ttf") format("truetype"); +} + +@font-face { + font-family: "Montserrat"; + font-style: normal; + font-weight: 400; + src: local("Montserrat"), local("Montserrat-Regular"), + url("fonts/Montserrat-Regular.ttf") format("truetype"); +} + +@font-face { + font-family: "Poppins"; + font-style: normal; + font-weight: 400; + src: local("Poppins"), local("Poppins-Regular"), + url("fonts/Poppins-Regular.ttf") format("truetype"); +} + +@font-face { + font-family: "Oswald"; + font-style: normal; + font-weight: 400; + src: local("Oswald"), local("Oswald-Regular"), + url("fonts/Oswald-Regular.ttf") format("truetype"); +} + +@font-face { + font-family: "NotoSans"; + font-style: normal; + font-weight: 400; + src: local("NotoSans"), local("Noto Sans"), local("NotoSans-Regular"), + url("fonts/NotoSans-Regular.ttf") format("truetype"); +} + +@font-face { + font-family: "Lato"; + font-style: normal; + font-weight: 400; + src: local("Lato"), local("Lato-Regular"), + url("fonts/Lato-Regular.ttf") format("truetype"); +} + +@font-face { + font-family: "RobotoSlab"; + font-style: normal; + font-weight: 400; + src: local("RobotoSlab"), local("Roboto Slab"), local("RobotoSlab-Regular"), + url("fonts/RobotoSlab-Regular.ttf") format("truetype"); +} + .lightTheme { - background: #fff; - color: #000; + background: #fff; + color: #000; } .darkTheme { - background: #202124; - color: #fff + background: #202124; + color: #fff; } .sepiaTheme { - background: #ece1ca; - color: #000; + background: #ece1ca; + color: #000; } .blackTheme { - background: #000; - color: #fff -} \ No newline at end of file + background: #000; + color: #fff; +} diff --git a/cps/static/css/fonts/Lato-Regular.ttf b/cps/static/css/fonts/Lato-Regular.ttf new file mode 100644 index 00000000..bb2e8875 Binary files /dev/null and b/cps/static/css/fonts/Lato-Regular.ttf differ diff --git a/cps/static/css/fonts/Montserrat-Regular.ttf b/cps/static/css/fonts/Montserrat-Regular.ttf new file mode 100644 index 00000000..f4a266dd Binary files /dev/null and b/cps/static/css/fonts/Montserrat-Regular.ttf differ diff --git a/cps/static/css/fonts/NotoSans-Regular.ttf b/cps/static/css/fonts/NotoSans-Regular.ttf new file mode 100644 index 00000000..fa4cff50 Binary files /dev/null and b/cps/static/css/fonts/NotoSans-Regular.ttf differ diff --git a/cps/static/css/fonts/OpenSans-Regular.ttf b/cps/static/css/fonts/OpenSans-Regular.ttf new file mode 100644 index 00000000..67803bb6 Binary files /dev/null and b/cps/static/css/fonts/OpenSans-Regular.ttf differ diff --git a/cps/static/css/fonts/Oswald-Regular.ttf b/cps/static/css/fonts/Oswald-Regular.ttf new file mode 100644 index 00000000..5903df43 Binary files /dev/null and b/cps/static/css/fonts/Oswald-Regular.ttf differ diff --git a/cps/static/css/fonts/Poppins-Regular.ttf b/cps/static/css/fonts/Poppins-Regular.ttf new file mode 100644 index 00000000..9f0c71b7 Binary files /dev/null and b/cps/static/css/fonts/Poppins-Regular.ttf differ diff --git a/cps/static/css/fonts/Roboto-Regular.ttf b/cps/static/css/fonts/Roboto-Regular.ttf new file mode 100644 index 00000000..ddf4bfac Binary files /dev/null and b/cps/static/css/fonts/Roboto-Regular.ttf differ diff --git a/cps/static/css/fonts/RobotoSlab-Regular.ttf b/cps/static/css/fonts/RobotoSlab-Regular.ttf new file mode 100644 index 00000000..faaa4463 Binary files /dev/null and b/cps/static/css/fonts/RobotoSlab-Regular.ttf differ diff --git a/cps/static/css/fonts/fontello.eot b/cps/static/css/fonts/fontello.eot index f63ffa04..62e14205 100644 Binary files a/cps/static/css/fonts/fontello.eot and b/cps/static/css/fonts/fontello.eot differ diff --git a/cps/static/css/fonts/fontello.svg b/cps/static/css/fonts/fontello.svg index 2db13984..64bff96d 100644 --- a/cps/static/css/fonts/fontello.svg +++ b/cps/static/css/fonts/fontello.svg @@ -1,33 +1,62 @@ -Copyright (C) 2013 by original authors @ fontello.com +Copyright (C) 2024 by original authors @ fontello.com - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - \ No newline at end of file + diff --git a/cps/static/css/fonts/fontello.ttf b/cps/static/css/fonts/fontello.ttf index 95715f86..9957758c 100644 Binary files a/cps/static/css/fonts/fontello.ttf and b/cps/static/css/fonts/fontello.ttf differ diff --git a/cps/static/css/fonts/fontello.woff b/cps/static/css/fonts/fontello.woff index 084f0c55..f651825a 100644 Binary files a/cps/static/css/fonts/fontello.woff and b/cps/static/css/fonts/fontello.woff differ diff --git a/cps/static/css/main.css b/cps/static/css/main.css index 03cb0a01..aa5aeda1 100644 --- a/cps/static/css/main.css +++ b/cps/static/css/main.css @@ -1,11 +1,10 @@ @font-face { - font-family: 'fontello'; - src: url('fonts/fontello.eot?60518104'); - src: - url('fonts/fontello.eot?60518104#iefix') format('embedded-opentype'), - url('fonts/fontello.woff?60518104') format('woff'), - url('fonts/fontello.ttf?60518104') format('truetype'), - url('fonts/fontello.svg?60518104#fontello') format('svg'); + font-family: "fontello"; + src: url("fonts/fontello.eot?60518104"); + src: url("fonts/fontello.eot?60518104#iefix") format("embedded-opentype"), + url("fonts/fontello.woff?60518104") format("woff"), + url("fonts/fontello.ttf?60518104") format("truetype"), + url("fonts/fontello.svg?60518104#fontello") format("svg"); font-weight: normal; font-style: normal; } @@ -16,7 +15,7 @@ body { } .myselect { - overflow: visible !important; + overflow: visible !important; } #main { @@ -94,8 +93,12 @@ body { box-shadow: inset 0 0 6px rgba(155, 155, 155, 0.8); } -#book-title { font-weight: 600; } -#title-seperator { display: none; } +#book-title { + font-weight: 600; +} +#title-seperator { + display: none; +} #viewer { width: 80%; @@ -201,10 +204,16 @@ body { max-width: 80%; } -#title-controls { float: right; } +#title-controls { + float: right; +} -#panels a::before { visibility: visible; } -#panels a:hover { color: #aaa; } +#panels a::before { + visibility: visible; +} +#panels a:hover { + color: #aaa; +} .list_item.currentChapter > a, .list_item a:hover { @@ -238,8 +247,12 @@ body { margin-top: -1px; } -input::-webkit-input-placeholder { color: #454545; } -input:-moz-placeholder { color: #454545; } +input::-webkit-input-placeholder { + color: #454545; +} +input:-moz-placeholder { + color: #454545; +} #divider { position: absolute; @@ -379,14 +392,14 @@ input:-moz-placeholder { color: #454545; } } .toc_toggle::before { - content: '▸'; + content: "▸"; color: #fff; margin-right: -4px; } .currentChapter > .toc_toggle::before, .openChapter > .toc_toggle::before { - content: '▾'; + content: "▾"; } .view { @@ -500,13 +513,25 @@ input:-moz-placeholder { color: #454545; } list-style-type: none; } -#settingsPanel .xsmall { font-size: x-small; } -#settingsPanel .small { font-size: small; } -#settingsPanel .medium { font-size: medium; } -#settingsPanel .large { font-size: large; } -#settingsPanel .xlarge { font-size: x-large; } +#settingsPanel .xsmall { + font-size: x-small; +} +#settingsPanel .small { + font-size: small; +} +#settingsPanel .medium { + font-size: medium; +} +#settingsPanel .large { + font-size: large; +} +#settingsPanel .xlarge { + font-size: x-large; +} -.highlight { background-color: yellow; } +.highlight { + background-color: yellow; +} .modal { position: fixed; @@ -554,8 +579,14 @@ input:-moz-placeholder { color: #454545; } height: 320px; } +.md-content label { + font-weight: 700; + font-size: 16px; + display: block; +} + .md-content > div { - padding: 15px 40px 30px; + padding: 8px 16px; margin: 0; font-weight: 300; font-size: 14px; @@ -567,36 +598,6 @@ input:-moz-placeholder { color: #454545; } font-size: 0.8em; } -.md-content .themes button { - display: inline-block; - border: none; - text-align: center; - text-decoration: none; - margin-top: 5%; - margin-right: 1%; - font-size: 16px; -} - -.md-content .themes button.darkTheme { - background-color: #202124; - color: white; -} - -.md-content .themes button.whiteTheme { - background-color: white; - color: black; -} - -.md-content .themes button.sepiaTheme { - background-color: #ece1ca; - color: black; -} - -.md-content .themes button.blackTheme { - background-color: black; - color: white; -} - /* Effect 1: Fade in and scale up */ .md-effect-1 .md-content { -webkit-transform: scale(0.7); @@ -713,11 +714,7 @@ input:-moz-placeholder { color: #454545; } } } -@media only screen - and (min-device-width: 768px) - and (max-device-width: 1024px) - and (orientation: landscape) - /* and (-webkit-min-device-pixel-ratio: 2)*/ { +@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) /* and (-webkit-min-device-pixel-ratio: 2) */ { #viewer { width: 80%; margin-left: 10%; @@ -745,8 +742,8 @@ input:-moz-placeholder { color: #454545; } } #viewer iframe { - width: 300px; - height: 480px; + width: 300px; + height: 480px; } } @@ -804,25 +801,81 @@ input:-moz-placeholder { color: #454545; } font-size: 112%; } -.icon-search::before { content: '\e807'; } /* '' */ -.icon-resize-full-1::before { content: '\e804'; } /* '' */ -.icon-cancel-circled2::before { content: '\e80f'; } /* '' */ -.icon-link::before { content: '\e80d'; } /* '' */ -.icon-bookmark::before { content: '\e805'; } /* '' */ -.icon-bookmark-empty::before { content: '\e806'; } /* '' */ -.icon-download-cloud::before { content: '\e811'; } /* '' */ -.icon-edit::before { content: '\e814'; } /* '' */ -.icon-menu::before { content: '\e802'; } /* '' */ -.icon-cog::before { content: '\e813'; } /* '' */ -.icon-resize-full::before { content: '\e812'; } /* '' */ -.icon-cancel-circled::before { content: '\e80e'; } /* '' */ -.icon-up-dir::before { content: '\e80c'; } /* '' */ -.icon-right-dir::before { content: '\e80b'; } /* '' */ -.icon-angle-right::before { content: '\e809'; } /* '' */ -.icon-angle-down::before { content: '\e80a'; } /* '' */ -.icon-right::before { content: '\e815'; } /* '' */ -.icon-list-1::before { content: '\e803'; } /* '' */ -.icon-list-numbered::before { content: '\e801'; } /* '' */ -.icon-columns::before { content: '\e810'; } /* '' */ -.icon-list::before { content: '\e800'; } /* '' */ -.icon-resize-small::before { content: '\e808'; } /* '' */ +.icon-search::before { + content: "\e807"; +} /* '' */ +.icon-resize-full-1::before { + content: "\e804"; +} /* '' */ +.icon-cancel-circled2::before { + content: "\e80f"; +} /* '' */ +.icon-link::before { + content: "\e80d"; +} /* '' */ +.icon-bookmark::before { + content: "\e805"; +} /* '' */ +.icon-bookmark-empty::before { + content: "\e806"; +} /* '' */ +.icon-download-cloud::before { + content: "\e811"; +} /* '' */ +.icon-edit::before { + content: "\e814"; +} /* '' */ +.icon-menu::before { + content: "\e802"; +} /* '' */ +.icon-cog::before { + content: "\e813"; +} /* '' */ +.icon-resize-full::before { + content: "\e812"; +} /* '' */ +.icon-cancel-circled::before { + content: "\e80e"; +} /* '' */ +.icon-up-dir::before { + content: "\e80c"; +} /* '' */ +.icon-right-dir::before { + content: "\e80b"; +} /* '' */ +.icon-angle-right::before { + content: "\e809"; +} /* '' */ +.icon-angle-down::before { + content: "\e80a"; +} /* '' */ +.icon-right::before { + content: "\e815"; +} /* '' */ +.icon-list-1::before { + content: "\e803"; +} /* '' */ +.icon-list-numbered::before { + content: "\e801"; +} /* '' */ +.icon-columns::before { + content: "\e810"; +} /* '' */ +.icon-list::before { + content: "\e800"; +} /* '' */ +.icon-resize-small::before { + content: "\e808"; +} /* '' */ +.icon-volume::before { + content: "\e816"; +} +.icon-volume-down::before { + content: "\e817"; +} +.icon-volume-off::before { + content: "\e818"; +} +.icon-volume-up::before { + content: "\e819"; +} diff --git a/cps/static/css/reader.css b/cps/static/css/reader.css index ec8054ca..cddb5126 100644 --- a/cps/static/css/reader.css +++ b/cps/static/css/reader.css @@ -1,29 +1,78 @@ .fontSizeWrapper { - position: relative; + position: relative; } + .slider { - position: absolute; - top: 50%; - transform: translate(0,-50%); - width: 90%; - height: 60px; - background: transparent; - border-radius: 20px; - display: flex; - align-items: center; - box-shadow: 0px 15px 40px #7E6D5766; + /* position: absolute; */ + /* top: 50%; */ + /* transform: translate(0, -50%); */ + /* width: 90%; */ + margin-top: 10px; + background: transparent; + border-radius: 20px; + display: flex; + align-items: center; + box-shadow: 0px 15px 40px #7e6d5766; } -.slider label { - font-size: 20px; - font-weight: 400; - font-family: Open Sans; - padding-right: 10px; - color: white; + +/* .slider label { + font-size: 20px; + font-weight: 400; + font-family: Open Sans; + padding-right: 10px; + color: white; +} */ + +input[type="checkbox"] { + margin-right: 10px; } + +select { + margin-top: 10px; + min-width: 50%; +} + .slider input[type="range"] { - width: 80%; - height: 5px; - background: black; - border: none; - outline: none; + display: block; + width: 80%; + height: 5px; + background: black; + border: none; + outline: none; + margin-right: 10px; +} + +.button-group { + display: flex; + justify-content: space-around; + margin-top: 10px; +} + +.themes button { + display: inline-block; + border: none; + text-align: center; + text-decoration: none; + padding: 0.5rem; + font-size: 16px; +} + +.md-content .themes button.darkTheme { + background-color: #202124; + color: white; +} + +.md-content .themes button.whiteTheme { + background-color: white; + color: black; +} + +.md-content .themes button.sepiaTheme { + background-color: #ece1ca; + color: black; +} + +.md-content .themes button.blackTheme { + background-color: black; + color: white; } diff --git a/cps/static/js/kthoom.js b/cps/static/js/kthoom.js index 67b18fc1..07f2ae1c 100644 --- a/cps/static/js/kthoom.js +++ b/cps/static/js/kthoom.js @@ -700,6 +700,11 @@ function init(filename) { $("#setting").click(function () { $("#settings-modal").toggleClass("md-show"); }); + + // Open read modal + $("#read").click(function () { + $("#read-modal").toggleClass("md-show"); + }); // On Settings input change $("#settings input").on("change", function () { diff --git a/cps/static/js/reading/epub.js b/cps/static/js/reading/epub.js index cfc12bad..babaf66a 100644 --- a/cps/static/js/reading/epub.js +++ b/cps/static/js/reading/epub.js @@ -1,8 +1,8 @@ /* global $, calibre, EPUBJS, ePubReader */ -var reader; +let reader; -(function() { +(function () { "use strict"; EPUBJS.filePath = calibre.filePath; @@ -10,13 +10,12 @@ var reader; reader = ePubReader(calibre.bookUrl, { restore: true, - bookmarks: calibre.bookmark ? [calibre.bookmark] : [] + bookmarks: calibre.bookmark ? [calibre.bookmark] : [], }); - reader.rendition.themes.register("lightTheme", "/static/css/epub_themes.css"); - reader.rendition.themes.register("darkTheme", "/static/css/epub_themes.css"); - reader.rendition.themes.register("sepiaTheme", "/static/css/epub_themes.css"); - reader.rendition.themes.register("blackTheme", "/static/css/epub_themes.css"); + Object.keys(window.themes).forEach(function (theme) { + reader.rendition.themes.register(theme, window.themes[theme].css_path); + }); if (calibre.useBookmarks) { reader.on("reader:bookmarked", updateBookmark.bind(reader, "add")); @@ -27,28 +26,28 @@ var reader; // Enable swipe support // I have no idea why swiperRight/swiperLeft from plugins is not working, events just don't get fired - var touchStart = 0; - var touchEnd = 0; + let touchStart = 0; + let touchEnd = 0; - reader.rendition.on('touchstart', function(event) { + reader.rendition.on("touchstart", function (event) { touchStart = event.changedTouches[0].screenX; }); - reader.rendition.on('touchend', function(event) { - touchEnd = event.changedTouches[0].screenX; + reader.rendition.on("touchend", function (event) { + touchEnd = event.changedTouches[0].screenX; if (touchStart < touchEnd) { - if(reader.book.package.metadata.direction === "rtl") { - reader.rendition.next(); - } else { - reader.rendition.prev(); - } + if (reader.book.package.metadata.direction === "rtl") { + reader.rendition.next(); + } else { + reader.rendition.prev(); + } // Swiped Right } if (touchStart > touchEnd) { - if(reader.book.package.metadata.direction === "rtl") { - reader.rendition.prev(); - } else { + if (reader.book.package.metadata.direction === "rtl") { + reader.rendition.prev(); + } else { reader.rendition.next(); - } + } // Swiped Left } }); @@ -60,24 +59,35 @@ var reader; function updateBookmark(action, location) { // Remove other bookmarks (there can only be one) if (action === "add") { - this.settings.bookmarks.filter(function (bookmark) { - return bookmark && bookmark !== location; - }).map(function (bookmark) { - this.removeBookmark(bookmark); - }.bind(this)); + this.settings.bookmarks + .filter(function (bookmark) { + return bookmark && bookmark !== location; + }) + .map( + function (bookmark) { + this.removeBookmark(bookmark); + }.bind(this) + ); } - - var csrftoken = $("input[name='csrf_token']").val(); + + const csrftoken = $("input[name='csrf_token']").val(); // Save to database $.ajax(calibre.bookmarkUrl, { method: "post", data: { bookmark: location || "" }, - headers: { "X-CSRFToken": csrftoken } + headers: { "X-CSRFToken": csrftoken }, }).fail(function (xhr, status, error) { alert(error); }); } + + // default settings load + const theme = localStorage.getItem("calibre.reader.theme") ?? "lightTheme"; + selectTheme(theme); + const font = localStorage.getItem("calibre.reader.font") ?? "Roboto"; + selectFont(font); + + // enabling script content + // reader.rendition.settings.allowScriptedContent = true; })(); - - diff --git a/cps/templates/read.html b/cps/templates/read.html index b75c31fe..ab9f3279 100644 --- a/cps/templates/read.html +++ b/cps/templates/read.html @@ -1,33 +1,34 @@ - - - - {{_('epub Reader')}} | {{title}} - - - - {% if g.google_site_verification|length > 0 %} - - {% endif %} - - - - - - - - -