pull/2969/merge
Purbayan Chowdhury 5 months ago committed by GitHub
commit 7b86d2d929
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -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
}
background: #000;
color: #fff;
}

Binary file not shown.

@ -1,33 +1,62 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Copyright (C) 2013 by original authors @ fontello.com</metadata>
<metadata>Copyright (C) 2024 by original authors @ fontello.com</metadata>
<defs>
<font id="fontello" horiz-adv-x="1000" >
<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
<missing-glyph horiz-adv-x="1000" />
<glyph glyph-name="search" unicode="&#xe807;" d="m643 386q0 103-74 176t-176 74t-177-74t-73-176t73-177t177-73t176 73t74 177z m286-465q0-29-22-50t-50-21q-30 0-50 21l-191 191q-100-69-223-69q-80 0-153 31t-125 84t-84 125t-31 153t31 152t84 126t125 84t153 31t152-31t126-84t84-126t31-152q0-123-69-223l191-191q21-21 21-51z" horiz-adv-x="928.6" />
<glyph glyph-name="resize-full-1" unicode="&#xe804;" d="m784 111l127 128l0-336l-335 0l128 130l-128 127l79 79z m-431 686l-129-127l128-127l-80-80l-126 128l-128-129l0 335l335 0z m0-637l-129-127l129-130l-335 0l0 336l128-128l128 128z m558 637l0-335l-127 129l-128-128l-79 80l127 127l-128 127l335 0z" horiz-adv-x="928" />
<glyph glyph-name="cancel-circled2" unicode="&#xe80f;" d="m612 248l-81-82q-6-5-13-5t-13 5l-76 77l-77-77q-5-5-13-5t-13 5l-81 82q-6 5-6 13t6 13l76 76l-76 76q-6 6-6 13t6 13l81 82q6 5 13 5t13-5l77-77l76 77q6 5 13 5t13-5l81-82q6-5 6-13t-6-13l-76-76l76-76q6-6 6-13t-6-13z m120 102q0 83-41 152t-110 111t-152 41t-153-41t-110-111t-41-152t41-152t110-111t153-41t152 41t110 111t41 152z m125 0q0-117-57-215t-156-156t-215-58t-216 58t-155 156t-58 215t58 215t155 156t216 58t215-58t156-156t57-215z" horiz-adv-x="857.1" />
<glyph glyph-name="link" unicode="&#xe80d;" d="m812 171q0 23-15 38l-116 116q-16 16-38 16q-24 0-40-18q1-1 10-10t12-12t9-11t7-14t2-15q0-23-16-38t-38-16q-8 0-15 2t-14 7t-11 9t-12 12t-10 10q-19-17-19-40q0-23 16-38l115-116q15-15 38-15q22 0 38 15l82 81q15 16 15 37z m-392 394q0 22-15 38l-115 115q-16 16-38 16q-22 0-38-15l-82-82q-16-15-16-37q0-22 16-38l116-116q15-15 38-15q23 0 40 17q-2 2-11 11t-12 12t-8 10t-7 14t-2 16q0 22 15 38t38 15q9 0 16-2t14-7t10-8t12-12t11-11q18 17 18 41z m500-394q0-67-48-113l-82-81q-46-47-113-47q-68 0-114 48l-115 115q-46 47-46 114q0 68 49 116l-49 49q-48-49-116-49q-67 0-114 47l-116 116q-47 47-47 114t47 113l82 82q47 46 114 46q67 0 114-47l114-116q47-46 47-113q0-69-49-117l49-49q48 49 116 49q67 0 114-47l116-116q47-47 47-114z" horiz-adv-x="928.6" />
<glyph glyph-name="bookmark" unicode="&#xe805;" d="m650 779q12 0 24-5q19-8 29-23t11-35v-719q0-19-11-35t-29-23q-10-4-24-4q-27 0-47 18l-246 236l-246-236q-20-19-46-19q-13 0-25 5q-18 7-29 23t-11 35v719q0 19 11 35t29 23q12 5 25 5h585z" horiz-adv-x="714.3" />
<glyph glyph-name="bookmark-empty" unicode="&#xe806;" d="m643 707h-572v-693l237 227l49 47l50-47l236-227v693z m7 72q12 0 24-5q19-8 29-23t11-35v-719q0-19-11-35t-29-23q-10-4-24-4q-27 0-47 18l-246 236l-246-236q-20-19-46-19q-13 0-25 5q-18 7-29 23t-11 35v719q0 19 11 35t29 23q12 5 25 5h585z" horiz-adv-x="714.3" />
<glyph glyph-name="download-cloud" unicode="&#xe811;" d="m714 332q0 8-5 13t-13 5h-125v196q0 8-5 13t-12 5h-108q-7 0-12-5t-5-13v-196h-125q-8 0-13-5t-5-13q0-8 5-13l196-196q5-5 13-5t13 5l196 196q5 6 5 13z m357-125q0-89-62-151t-152-63h-607q-103 0-177 73t-73 177q0 72 39 134t105 92q-1 17-1 24q0 118 84 202t202 84q87 0 159-49t105-129q40 35 93 35q59 0 101-42t42-101q0-43-23-77q72-17 119-76t46-133z" horiz-adv-x="1071.4" />
<glyph glyph-name="edit" unicode="&#xe814;" d="m496 189l64 65l-85 85l-64-65v-31h53v-54h32z m245 402q-9 9-18 0l-196-196q-9-9 0-18t18 0l196 196q9 9 0 18z m45-331v-106q0-67-47-114t-114-47h-464q-67 0-114 47t-47 114v464q0 66 47 113t114 48h464q35 0 65-14q9-4 10-13q2-10-5-16l-27-28q-8-8-18-4q-13 3-25 3h-464q-37 0-63-26t-27-63v-464q0-37 27-63t63-27h464q37 0 63 27t26 63v70q0 7 5 12l36 36q8 8 20 4t11-16z m-54 411l161-160l-375-375h-161v160z m248-73l-51-52l-161 161l51 51q16 16 38 16t38-16l85-84q16-16 16-38t-16-38z" horiz-adv-x="1000" />
<glyph glyph-name="menu" unicode="&#xe802;" d="m857 100v-71q0-15-10-25t-26-11h-785q-15 0-25 11t-11 25v71q0 15 11 25t25 11h785q15 0 26-11t10-25z m0 286v-72q0-14-10-25t-26-10h-785q-15 0-25 10t-11 25v72q0 14 11 25t25 10h785q15 0 26-10t10-25z m0 285v-71q0-15-10-25t-26-11h-785q-15 0-25 11t-11 25v71q0 15 11 26t25 10h785q15 0 26-10t10-26z" horiz-adv-x="857.1" />
<glyph glyph-name="cog" unicode="&#xe813;" d="m571 350q0 59-41 101t-101 42t-101-42t-42-101t42-101t101-42t101 42t41 101z m286 61v-124q0-7-4-13t-11-7l-104-16q-10-30-21-51q19-27 59-77q6-6 6-13t-5-13q-15-21-55-61t-53-39q-7 0-14 5l-77 60q-25-13-51-21q-9-76-16-104q-4-16-20-16h-124q-8 0-14 5t-6 12l-16 103q-27 9-50 21l-79-60q-6-5-14-5q-8 0-14 6q-70 64-92 94q-4 5-4 13q0 6 5 12q8 12 28 37t30 40q-15 28-23 55l-102 15q-7 1-11 7t-5 13v124q0 7 5 13t10 7l104 16q8 25 22 51q-23 32-60 77q-6 7-6 14q0 5 5 12q15 20 55 60t53 40q7 0 15-5l77-60q24 13 50 21q9 76 17 104q3 15 20 15h124q7 0 13-4t7-12l15-103q28-9 50-21l80 60q5 5 13 5q7 0 14-5q72-67 92-95q4-5 4-13q0-6-4-12q-9-12-29-38t-30-39q14-28 23-55l102-15q7-1 12-7t4-13z" horiz-adv-x="857.1" />
<glyph glyph-name="resize-full" unicode="&#xe812;" d="m421 261q0-8-5-13l-185-185l80-81q10-10 10-25t-10-25t-25-11h-250q-15 0-25 11t-11 25v250q0 15 11 25t25 11t25-11l80-80l185 185q6 6 13 6t13-6l64-63q5-6 5-13z m436 482v-250q0-15-10-25t-26-11t-25 11l-80 80l-185-185q-6-6-13-6t-13 6l-64 63q-5 6-5 13t5 13l186 185l-81 81q-10 10-10 25t10 25t25 11h250q15 0 26-11t10-25z" horiz-adv-x="857.1" />
<glyph glyph-name="cancel-circled" unicode="&#xe80e;" d="m641 224q0 14-10 25l-101 101l101 101q10 11 10 25q0 15-10 26l-51 50q-10 11-25 11q-15 0-25-11l-101-101l-101 101q-11 11-26 11q-15 0-25-11l-50-50q-11-11-11-26q0-14 11-25l101-101l-101-101q-11-11-11-25q0-15 11-26l50-50q10-11 25-11q15 0 26 11l101 101l101-101q10-11 25-11q15 0 25 11l51 50q10 11 10 26z m216 126q0-117-57-215t-156-156t-215-58t-216 58t-155 156t-58 215t58 215t155 156t216 58t215-58t156-156t57-215z" horiz-adv-x="857.1" />
<glyph glyph-name="up-dir" unicode="&#xe80c;" d="m571 171q0-14-10-25t-25-10h-500q-15 0-25 10t-11 25t11 26l250 250q10 10 25 10t25-10l250-250q10-11 10-26z" horiz-adv-x="571.4" />
<glyph glyph-name="right-dir" unicode="&#xe80b;" d="m321 350q0-14-10-25l-250-250q-11-11-25-11t-25 11t-11 25v500q0 15 11 25t25 11t25-11l250-250q10-10 10-25z" horiz-adv-x="357.1" />
<glyph glyph-name="angle-right" unicode="&#xe809;" d="m332 314q0-7-6-13l-260-260q-5-5-12-5t-13 5l-28 28q-6 6-6 13t6 13l219 219l-219 220q-6 5-6 12t6 13l28 28q5 6 13 6t12-6l260-260q6-5 6-13z" horiz-adv-x="357.1" />
<glyph glyph-name="angle-down" unicode="&#xe80a;" d="m600 439q0-7-6-13l-260-260q-5-5-13-5t-12 5l-260 260q-6 6-6 13t6 13l27 28q6 6 13 6t13-6l219-219l220 219q5 6 13 6t12-6l28-28q6-5 6-13z" horiz-adv-x="642.9" />
<glyph glyph-name="right" unicode="&#xe815;" d="m1000 404v-108q0-7-5-12t-13-5h-696v-125q0-12-11-17t-19 3l-215 196q-5 5-5 12q0 8 5 14l215 197q9 8 19 4q11-5 11-17v-125h696q8 0 13-5t5-12z" horiz-adv-x="1000" />
<glyph glyph-name="list-1" unicode="&#xe803;" d="m143 118v-107q0-7-5-13t-13-5h-107q-7 0-13 5t-5 13v107q0 7 5 12t13 6h107q7 0 13-6t5-12z m0 214v-107q0-7-5-13t-13-5h-107q-7 0-13 5t-5 13v107q0 7 5 13t13 5h107q7 0 13-5t5-13z m0 214v-107q0-7-5-12t-13-6h-107q-7 0-13 6t-5 12v107q0 8 5 13t13 5h107q7 0 13-5t5-13z m857-428v-107q0-7-5-13t-13-5h-750q-7 0-12 5t-6 13v107q0 7 6 12t12 6h750q7 0 13-6t5-12z m-857 643v-107q0-8-5-13t-13-5h-107q-7 0-13 5t-5 13v107q0 7 5 12t13 6h107q7 0 13-6t5-12z m857-429v-107q0-7-5-13t-13-5h-750q-7 0-12 5t-6 13v107q0 7 6 13t12 5h750q7 0 13-5t5-13z m0 214v-107q0-7-5-12t-13-6h-750q-7 0-12 6t-6 12v107q0 8 6 13t12 5h750q7 0 13-5t5-13z m0 215v-107q0-8-5-13t-13-5h-750q-7 0-12 5t-6 13v107q0 7 6 12t12 6h750q7 0 13-6t5-12z" horiz-adv-x="1000" />
<glyph glyph-name="list-numbered" unicode="&#xe801;" d="m213-54q0-45-31-70t-75-26q-60 0-96 37l31 49q28-25 60-25q16 0 28 8t12 24q0 35-59 31l-14 31q4 6 18 24t24 31t20 21v1q-9 0-27-1t-27 0v-30h-59v85h186v-49l-53-65q28-6 45-27t17-49z m1 350v-89h-202q-4 20-4 30q0 29 14 52t31 38t37 27t31 24t14 25q0 14-9 22t-22 7q-25 0-45-32l-47 33q13 28 40 44t59 16q40 0 68-23t28-63q0-28-19-51t-42-36t-42-28t-20-30h71v34h59z m786-178v-107q0-8-5-13t-13-5h-678q-8 0-13 5t-5 13v107q0 8 5 13t13 5h678q7 0 13-6t5-12z m-786 502v-56h-187v56h60q0 22 0 68t1 67v7h-1q-5-10-28-30l-40 42l76 71h59v-225h60z m786-216v-108q0-7-5-12t-13-5h-678q-8 0-13 5t-5 12v108q0 7 5 12t13 5h678q7 0 13-5t5-12z m0 285v-107q0-7-5-12t-13-6h-678q-8 0-13 6t-5 12v107q0 8 5 13t13 5h678q7 0 13-5t5-13z" horiz-adv-x="1000" />
<glyph glyph-name="columns" unicode="&#xe810;" d="m89-7h340v643h-358v-625q0-8 6-13t12-5z m768 18v625h-357v-643h339q8 0 13 5t5 13z m72 678v-678q0-37-27-63t-63-27h-750q-36 0-63 27t-26 63v678q0 37 26 63t63 27h750q37 0 63-27t27-63z" horiz-adv-x="928.6" />
<glyph glyph-name="list" unicode="&#xe800;" d="m100 200q20 0 35-15t15-35t-15-35t-35-15l-50 0q-20 0-35 15t-15 35t14 35t36 15l50 0z m0 200q20 0 35-15t15-35t-15-35t-35-15l-50 0q-20 0-35 15t-15 35t14 35t36 15l50 0z m0 200q20 0 35-15t15-35t-15-35t-35-15l-50 0q-20 0-35 15t-15 35t14 35t36 15l50 0z m200-100q-20 0-35 15t-15 35t15 35t35 15l350 0q22 0 36-15t14-35t-15-35t-35-15l-350 0z m350-100q22 0 36-15t14-35t-15-35t-35-15l-350 0q-20 0-35 15t-15 35t15 35t35 15l350 0z m0-200q22 0 36-15t14-35t-15-35t-35-15l-350 0q-20 0-35 15t-15 35t15 35t35 15l350 0z" horiz-adv-x="700" />
<glyph glyph-name="resize-small" unicode="&#xe808;" d="m429 314v-250q0-14-11-25t-25-10t-25 10l-81 81l-185-186q-5-5-13-5t-13 5l-63 64q-6 5-6 13t6 13l185 185l-80 80q-11 11-11 25t11 25t25 11h250q14 0 25-11t11-25z m421 375q0-7-6-13l-185-185l80-80q11-11 11-25t-11-25t-25-11h-250q-14 0-25 11t-10 25v250q0 14 10 25t25 10t25-10l81-81l185 186q6 5 13 5t13-5l63-64q6-5 6-13z" horiz-adv-x="857.1" />
<glyph glyph-name="list" unicode="&#xe800;" d="M100 200q20 0 35-15t15-35-15-35-35-15l-50 0q-20 0-35 15t-15 35 14 35 36 15l50 0z m0 200q20 0 35-15t15-35-15-35-35-15l-50 0q-20 0-35 15t-15 35 14 35 36 15l50 0z m0 200q20 0 35-15t15-35-15-35-35-15l-50 0q-20 0-35 15t-15 35 14 35 36 15l50 0z m200-100q-20 0-35 15t-15 35 15 35 35 15l350 0q22 0 36-15t14-35-15-35-35-15l-350 0z m350-100q22 0 36-15t14-35-15-35-35-15l-350 0q-20 0-35 15t-15 35 15 35 35 15l350 0z m0-200q22 0 36-15t14-35-15-35-35-15l-350 0q-20 0-35 15t-15 35 15 35 35 15l350 0z" horiz-adv-x="700" />
<glyph glyph-name="list-numbered" unicode="&#xe801;" d="M213-54q0-45-31-70t-75-26q-60 0-96 37l31 49q28-25 60-25 16 0 28 8t12 24q0 35-59 31l-14 31q4 6 18 24t24 31 20 21v1q-9 0-27-1t-27 0v-30h-59v85h186v-49l-53-65q28-6 45-27t17-49z m1 350v-89h-202q-4 20-4 30 0 29 14 52t31 38 37 27 31 24 14 25q0 14-9 22t-22 7q-25 0-45-32l-47 33q13 28 40 44t59 16q40 0 68-23t28-63q0-28-19-51t-42-36-42-28-20-30h71v34h59z m786-178v-107q0-8-5-13t-13-5h-678q-8 0-13 5t-5 13v107q0 8 5 13t13 5h678q7 0 13-6t5-12z m-786 502v-56h-187v56h60q0 22 0 68t1 67v7h-1q-5-10-28-30l-40 42 76 71h59v-225h60z m786-216v-108q0-7-5-12t-13-5h-678q-8 0-13 5t-5 12v108q0 7 5 12t13 5h678q7 0 13-5t5-12z m0 285v-107q0-7-5-12t-13-6h-678q-8 0-13 6t-5 12v107q0 8 5 13t13 5h678q7 0 13-5t5-13z" horiz-adv-x="1000" />
<glyph glyph-name="menu" unicode="&#xe802;" d="M857 100v-71q0-15-10-25t-26-11h-785q-15 0-25 11t-11 25v71q0 15 11 25t25 11h785q15 0 26-11t10-25z m0 286v-72q0-14-10-25t-26-10h-785q-15 0-25 10t-11 25v72q0 14 11 25t25 10h785q15 0 26-10t10-25z m0 285v-71q0-15-10-25t-26-11h-785q-15 0-25 11t-11 25v71q0 15 11 26t25 10h785q15 0 26-10t10-26z" horiz-adv-x="857.1" />
<glyph glyph-name="list-1" unicode="&#xe803;" d="M143 118v-107q0-7-5-13t-13-5h-107q-7 0-13 5t-5 13v107q0 7 5 12t13 6h107q7 0 13-6t5-12z m0 214v-107q0-7-5-13t-13-5h-107q-7 0-13 5t-5 13v107q0 7 5 13t13 5h107q7 0 13-5t5-13z m0 214v-107q0-7-5-12t-13-6h-107q-7 0-13 6t-5 12v107q0 8 5 13t13 5h107q7 0 13-5t5-13z m857-428v-107q0-7-5-13t-13-5h-750q-7 0-12 5t-6 13v107q0 7 6 12t12 6h750q7 0 13-6t5-12z m-857 643v-107q0-8-5-13t-13-5h-107q-7 0-13 5t-5 13v107q0 7 5 12t13 6h107q7 0 13-6t5-12z m857-429v-107q0-7-5-13t-13-5h-750q-7 0-12 5t-6 13v107q0 7 6 13t12 5h750q7 0 13-5t5-13z m0 214v-107q0-7-5-12t-13-6h-750q-7 0-12 6t-6 12v107q0 8 6 13t12 5h750q7 0 13-5t5-13z m0 215v-107q0-8-5-13t-13-5h-750q-7 0-12 5t-6 13v107q0 7 6 12t12 6h750q7 0 13-6t5-12z" horiz-adv-x="1000" />
<glyph glyph-name="resize-full-1" unicode="&#xe804;" d="M784 111l127 128 0-336-335 0 128 130-128 127 79 79z m-431 686l-129-127 128-127-80-80-126 128-128-129 0 335 335 0z m0-637l-129-127 129-130-335 0 0 336 128-128 128 128z m558 637l0-335-127 129-128-128-79 80 127 127-128 127 335 0z" horiz-adv-x="928" />
<glyph glyph-name="bookmark" unicode="&#xe805;" d="M650 779q12 0 24-5 19-8 29-23t11-35v-719q0-19-11-35t-29-23q-10-4-24-4-27 0-47 18l-246 236-246-236q-20-19-46-19-13 0-25 5-18 7-29 23t-11 35v719q0 19 11 35t29 23q12 5 25 5h585z" horiz-adv-x="714.3" />
<glyph glyph-name="bookmark-empty" unicode="&#xe806;" d="M643 707h-572v-693l237 227 49 47 50-47 236-227v693z m7 72q12 0 24-5 19-8 29-23t11-35v-719q0-19-11-35t-29-23q-10-4-24-4-27 0-47 18l-246 236-246-236q-20-19-46-19-13 0-25 5-18 7-29 23t-11 35v719q0 19 11 35t29 23q12 5 25 5h585z" horiz-adv-x="714.3" />
<glyph glyph-name="search" unicode="&#xe807;" d="M643 386q0 103-74 176t-176 74-177-74-73-176 73-177 177-73 176 73 74 177z m286-465q0-29-22-50t-50-21q-30 0-50 21l-191 191q-100-69-223-69-80 0-153 31t-125 84-84 125-31 153 31 152 84 126 125 84 153 31 152-31 126-84 84-126 31-152q0-123-69-223l191-191q21-21 21-51z" horiz-adv-x="928.6" />
<glyph glyph-name="resize-small" unicode="&#xe808;" d="M429 314v-250q0-14-11-25t-25-10-25 10l-81 81-185-186q-5-5-13-5t-13 5l-63 64q-6 5-6 13t6 13l185 185-80 80q-11 11-11 25t11 25 25 11h250q14 0 25-11t11-25z m421 375q0-7-6-13l-185-185 80-80q11-11 11-25t-11-25-25-11h-250q-14 0-25 11t-10 25v250q0 14 10 25t25 10 25-10l81-81 185 186q6 5 13 5t13-5l63-64q6-5 6-13z" horiz-adv-x="857.1" />
<glyph glyph-name="angle-right" unicode="&#xe809;" d="M332 314q0-7-6-13l-260-260q-5-5-12-5t-13 5l-28 28q-6 6-6 13t6 13l219 219-219 220q-6 5-6 12t6 13l28 28q5 6 13 6t12-6l260-260q6-5 6-13z" horiz-adv-x="357.1" />
<glyph glyph-name="angle-down" unicode="&#xe80a;" d="M600 439q0-7-6-13l-260-260q-5-5-13-5t-12 5l-260 260q-6 6-6 13t6 13l27 28q6 6 13 6t13-6l219-219 220 219q5 6 13 6t12-6l28-28q6-5 6-13z" horiz-adv-x="642.9" />
<glyph glyph-name="right-dir" unicode="&#xe80b;" d="M321 350q0-14-10-25l-250-250q-11-11-25-11t-25 11-11 25v500q0 15 11 25t25 11 25-11l250-250q10-10 10-25z" horiz-adv-x="357.1" />
<glyph glyph-name="up-dir" unicode="&#xe80c;" d="M571 171q0-14-10-25t-25-10h-500q-15 0-25 10t-11 25 11 26l250 250q10 10 25 10t25-10l250-250q10-11 10-26z" horiz-adv-x="571.4" />
<glyph glyph-name="link" unicode="&#xe80d;" d="M812 171q0 23-15 38l-116 116q-16 16-38 16-24 0-40-18 1-1 10-10t12-12 9-11 7-14 2-15q0-23-16-38t-38-16q-8 0-15 2t-14 7-11 9-12 12-10 10q-19-17-19-40 0-23 16-38l115-116q15-15 38-15 22 0 38 15l82 81q15 16 15 37z m-392 394q0 22-15 38l-115 115q-16 16-38 16-22 0-38-15l-82-82q-16-15-16-37 0-22 16-38l116-116q15-15 38-15 23 0 40 17-2 2-11 11t-12 12-8 10-7 14-2 16q0 22 15 38t38 15q9 0 16-2t14-7 10-8 12-12 11-11q18 17 18 41z m500-394q0-67-48-113l-82-81q-46-47-113-47-68 0-114 48l-115 115q-46 47-46 114 0 68 49 116l-49 49q-48-49-116-49-67 0-114 47l-116 116q-47 47-47 114t47 113l82 82q47 46 114 46 67 0 114-47l114-116q47-46 47-113 0-69-49-117l49-49q48 49 116 49 67 0 114-47l116-116q47-47 47-114z" horiz-adv-x="928.6" />
<glyph glyph-name="cancel-circled" unicode="&#xe80e;" d="M641 224q0 14-10 25l-101 101 101 101q10 11 10 25 0 15-10 26l-51 50q-10 11-25 11-15 0-25-11l-101-101-101 101q-11 11-26 11-15 0-25-11l-50-50q-11-11-11-26 0-14 11-25l101-101-101-101q-11-11-11-25 0-15 11-26l50-50q10-11 25-11 15 0 26 11l101 101 101-101q10-11 25-11 15 0 25 11l51 50q10 11 10 26z m216 126q0-117-57-215t-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" />
<glyph glyph-name="cancel-circled2" unicode="&#xe80f;" d="M612 248l-81-82q-6-5-13-5t-13 5l-76 77-77-77q-5-5-13-5t-13 5l-81 82q-6 5-6 13t6 13l76 76-76 76q-6 6-6 13t6 13l81 82q6 5 13 5t13-5l77-77 76 77q6 5 13 5t13-5l81-82q6-5 6-13t-6-13l-76-76 76-76q6-6 6-13t-6-13z m120 102q0 83-41 152t-110 111-152 41-153-41-110-111-41-152 41-152 110-111 153-41 152 41 110 111 41 152z m125 0q0-117-57-215t-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" />
<glyph glyph-name="columns" unicode="&#xe810;" d="M89-7h340v643h-358v-625q0-8 6-13t12-5z m768 18v625h-357v-643h339q8 0 13 5t5 13z m72 678v-678q0-37-27-63t-63-27h-750q-36 0-63 27t-26 63v678q0 37 26 63t63 27h750q37 0 63-27t27-63z" horiz-adv-x="928.6" />
<glyph glyph-name="download-cloud" unicode="&#xe811;" d="M714 332q0 8-5 13t-13 5h-125v196q0 8-5 13t-12 5h-108q-7 0-12-5t-5-13v-196h-125q-8 0-13-5t-5-13q0-8 5-13l196-196q5-5 13-5t13 5l196 196q5 6 5 13z m357-125q0-89-62-151t-152-63h-607q-103 0-177 73t-73 177q0 72 39 134t105 92q-1 17-1 24 0 118 84 202t202 84q87 0 159-49t105-129q40 35 93 35 59 0 101-42t42-101q0-43-23-77 72-17 119-76t46-133z" horiz-adv-x="1071.4" />
<glyph glyph-name="resize-full" unicode="&#xe812;" d="M421 261q0-8-5-13l-185-185 80-81q10-10 10-25t-10-25-25-11h-250q-15 0-25 11t-11 25v250q0 15 11 25t25 11 25-11l80-80 185 185q6 6 13 6t13-6l64-63q5-6 5-13z m436 482v-250q0-15-10-25t-26-11-25 11l-80 80-185-185q-6-6-13-6t-13 6l-64 63q-5 6-5 13t5 13l186 185-81 81q-10 10-10 25t10 25 25 11h250q15 0 26-11t10-25z" horiz-adv-x="857.1" />
<glyph glyph-name="cog" unicode="&#xe813;" d="M571 350q0 59-41 101t-101 42-101-42-42-101 42-101 101-42 101 42 41 101z m286 61v-124q0-7-4-13t-11-7l-104-16q-10-30-21-51 19-27 59-77 6-6 6-13t-5-13q-15-21-55-61t-53-39q-7 0-14 5l-77 60q-25-13-51-21-9-76-16-104-4-16-20-16h-124q-8 0-14 5t-6 12l-16 103q-27 9-50 21l-79-60q-6-5-14-5-8 0-14 6-70 64-92 94-4 5-4 13 0 6 5 12 8 12 28 37t30 40q-15 28-23 55l-102 15q-7 1-11 7t-5 13v124q0 7 5 13t10 7l104 16q8 25 22 51-23 32-60 77-6 7-6 14 0 5 5 12 15 20 55 60t53 40q7 0 15-5l77-60q24 13 50 21 9 76 17 104 3 15 20 15h124q7 0 13-4t7-12l15-103q28-9 50-21l80 60q5 5 13 5 7 0 14-5 72-67 92-95 4-5 4-13 0-6-4-12-9-12-29-38t-30-39q14-28 23-55l102-15q7-1 12-7t4-13z" horiz-adv-x="857.1" />
<glyph glyph-name="edit" unicode="&#xe814;" d="M496 189l64 65-85 85-64-65v-31h53v-54h32z m245 402q-9 9-18 0l-196-196q-9-9 0-18t18 0l196 196q9 9 0 18z m45-331v-106q0-67-47-114t-114-47h-464q-67 0-114 47t-47 114v464q0 66 47 113t114 48h464q35 0 65-14 9-4 10-13 2-10-5-16l-27-28q-8-8-18-4-13 3-25 3h-464q-37 0-63-26t-27-63v-464q0-37 27-63t63-27h464q37 0 63 27t26 63v70q0 7 5 12l36 36q8 8 20 4t11-16z m-54 411l161-160-375-375h-161v160z m248-73l-51-52-161 161 51 51q16 16 38 16t38-16l85-84q16-16 16-38t-16-38z" horiz-adv-x="1000" />
<glyph glyph-name="right" unicode="&#xe815;" d="M1000 404v-108q0-7-5-12t-13-5h-696v-125q0-12-11-17t-19 3l-215 196q-5 5-5 12 0 8 5 14l215 197q9 8 19 4 11-5 11-17v-125h696q8 0 13-5t5-12z" horiz-adv-x="1000" />
<glyph glyph-name="volume" unicode="&#xe816;" d="M0 142l0 416 236 0 354 289 0-994-354 289-236 0z m652 35q73 74 73 176t-73 178l71 74q105-106 107-254 0-145-107-246z m118-119q123 119 123 295t-123 299l76 74q154-154 154-372t-154-372z" horiz-adv-x="1000" />
<glyph glyph-name="volume-down" unicode="&#xe817;" d="M0 141l0 418 236 0 358 291 0-1000-358 291-236 0z m656 37q74 74 74 174 0 104-74 180l73 74q103-106 107-256 0-144-107-246z" horiz-adv-x="836" />
<glyph glyph-name="volume-off" unicode="&#xe818;" d="M0 551l305 0 345 282 0-965-345 279-229 0z m713-283q0 4 2 6l76 76-76 76q-2 2-2 6t2 6l53 53q2 2 5 2t6-2l76-76 77 76q4 2 6 2t5-2l55-53q2-2 2-6t-2-6l-76-76 76-76q2-4 2-7t-2-5l-55-54q-2-2-5-2t-6 2l-77 78-76-78q-2-2-5-2t-6 2l-53 54q-2 2-2 6z" horiz-adv-x="1000" />
<glyph glyph-name="volume-up" unicode="&#xe819;" d="M0 169l0 360 203 0 307 250 0-858-307 248-203 0z m563 33q62 63 62 151t-62 152l60 65q90-90 92-219 0-125-92-213z m101-105q106 105 106 256t-106 258l66 62q131-133 131-319t-131-321z m100-98q146 147 146 354t-146 353l62 65q82-82 128-190t46-227-46-229-128-190z" horiz-adv-x="1000" />
</font>
</defs>
</svg>
</svg>

Before

Width:  |  Height:  |  Size: 9.4 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

@ -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";
}

@ -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;
}
.slider label {
font-size: 20px;
font-weight: 400;
font-family: Open Sans;
padding-right: 10px;
color: white;
/* 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;
} */
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;
}

@ -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 () {

@ -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;
})();

@ -1,33 +1,34 @@
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{{_('epub Reader')}} | {{title}}</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
{% if g.google_site_verification|length > 0 %}
<meta name="google-site-verification" content="{{g.google_site_verification}}">
{% endif %}
<link rel="apple-touch-icon" sizes="140x140" href="{{ url_for('static', filename='favicon.ico') }}">
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/libs/normalize.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/popup.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/reader.css') }}">
</head>
<body>
<div id="sidebar">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{{_('epub Reader')}} | {{title}}</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
{% if g.google_site_verification|length > 0 %}
<meta name="google-site-verification" content="{{g.google_site_verification}}">
{% endif %}
<link rel="apple-touch-icon" sizes="140x140" href="{{ url_for('static', filename='favicon.ico') }}">
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/libs/normalize.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/popup.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/reader.css') }}">
</head>
<body>
<div id="sidebar">
<div id="panels">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<!--input id="searchBox" placeholder="search" type="search"-->
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<!--input id="searchBox" placeholder="search" type="search"-->
<!--a id="show-Search" class="show_view icon-search" data-view="Search">Search</a-->
<a id="show-Toc" class="show_view icon-list-1 active" data-view="Toc">TOC</a>
<a id="show-Bookmarks" class="show_view icon-bookmark" data-view="Bookmarks">Bookmarks</a>
<!--a id="show-Notes" class="show_view icon-edit" data-view="Notes">Notes</a-->
<!--a id="show-Search" class="show_view icon-search" data-view="Search">Search</a-->
<a id="show-Toc" class="show_view icon-list-1 active" data-view="Toc">TOC</a>
<a id="show-Bookmarks" class="show_view icon-bookmark" data-view="Bookmarks">Bookmarks</a>
<!--a id="show-Notes" class="show_view icon-edit" data-view="Notes">Notes</a-->
</div>
<div id="tocView" class="view">
@ -36,7 +37,7 @@
<ul id="searchResults"></ul>
</div-->
<div id="bookmarksView" class="view">
<ul id="bookmarks"></ul>
<ul id="bookmarks"></ul>
</div>
<!--div id="notesView" class="view">
<div id="new-note">
@ -45,23 +46,24 @@
</div>
<ol id="notes"></ol>
</div-->
</div>
<div id="main">
</div>
<div id="main">
<div id="titlebar">
<div id="opener">
<a id="slider" class="icon-menu">Menu</a>
</div>
<div id="metainfo">
<span id="book-title"></span>
<span id="title-seperator">&nbsp;&nbsp;&nbsp;&nbsp;</span>
<span id="chapter-title"></span>
</div>
<div id="title-controls">
<a id="bookmark" class="icon-bookmark-empty">Bookmark</a>
<a id="setting" class="icon-cog">Settings</a>
<a id="fullscreen" class="icon-resize-full">Fullscreen</a>
</div>
<div id="opener">
<a id="slider" class="icon-menu">Menu</a>
</div>
<div id="metainfo">
<span id="book-title"></span>
<span id="title-seperator">&nbsp;&nbsp;&nbsp;&nbsp;</span>
<span id="chapter-title"></span>
</div>
<div id="title-controls">
<a id="bookmark" class="icon-bookmark-empty" title="{{ _('Bookmark') }}">Bookmark</a>
<a id="read" class="icon-volume" title="{{ _('Read Aloud') }}">Read Aloud</a>
<a id="setting" class="icon-cog" title="{{ _('Settings') }}">Settings</a>
<a id="fullscreen" class="icon-resize-full" title="{{ _('Fullscreen') }}">Fullscreen</a>
</div>
</div>
<div id="divider"></div>
@ -70,85 +72,144 @@
<div id="next" class="arrow"></div>
<div id="loader"><img src="{{ url_for('static', filename='img/loader.gif') }}"></div>
</div>
<div class="modal md-effect-1" id="settings-modal">
<div class="md-content">
<h3>{{_('Settings')}}</h3>
<div class="themes" id="themes">
Choose a theme below: <br />
<!-- Hardcoded a tick in the light theme button because it is the "default" theme. Need to find a way to do this dynamically on startup-->
<button type="button" id="lightTheme" class="lightTheme" onclick="selectTheme(this.id)"><span id="lightSelected"></span>{{_('Light')}}</button>
<button type="button" id="darkTheme" class="darkTheme" onclick="selectTheme(this.id)"><span id="darkSelected"> </span>{{_('Dark')}}</button>
<button type="button" id="sepiaTheme" class="sepiaTheme" onclick="selectTheme(this.id)"><span id="sepiaSelected"> </span>{{_('Sepia')}}</button>
<button type="button" id="blackTheme" class="blackTheme" onclick="selectTheme(this.id)"><span id="blackSelected"> </span>{{_('Black')}}</button>
</div>
<div>
<p>
<input type="checkbox" id="sidebarReflow" name="sidebarReflow">{{_('Reflow text when sidebars are open.')}}
</p>
</div>
<div class="fontSizeWrapper">
</div>
<div class="modal md-effect-1" id="read-modal">
<div class="md-content">
<h3>{{_('Read Aloud')}}</h3>
<div class="form-group">
<label for="ttsVoice">{{ _('Font Family') }}</label>
<select name="ttsVoice" id="ttsVoiceValue">
</select>
</div>
<div class="closer icon-cancel-circled"></div>
</div>
</div>
<div class="modal md-effect-1" id="settings-modal">
<div class="md-content">
<h3>{{_('Settings')}}</h3>
<div class="themes form-group" id="themes">
<label>{{ _('Themes') }}</label>
<!-- <small>Choose a theme below:</small> -->
<div class="button-group">
<!-- Hardcoded a tick in the light theme button because it is the "default" theme. Need to find a way to do this dynamically on startup-->
<button type="button" id="lightTheme" class="lightTheme" onclick="selectTheme(this.id)"><span
id="lightSelected">✓</span>{{_('Light')}}</button>
<button type="button" id="darkTheme" class="darkTheme" onclick="selectTheme(this.id)"><span
id="darkSelected"> </span>{{_('Dark')}}</button>
<button type="button" id="sepiaTheme" class="sepiaTheme" onclick="selectTheme(this.id)"><span
id="sepiaSelected"> </span>{{_('Sepia')}}</button>
<button type="button" id="blackTheme" class="blackTheme" onclick="selectTheme(this.id)"><span
id="blackSelected"> </span>{{_('Black')}}</button>
</div>
</div>
<div class="form-group">
<input type="checkbox" id="sidebarReflow" name="sidebarReflow">
<span>{{_('Reflow text when sidebars are open.')}}</span>
</div>
<div class="form-group fontSizeWrapper">
<label for="fader">{{ _('Font Sizes') }}</label>
<div class="slider">
<label for="fader">{{ _('Font Sizes') }}</label>
<input type="range" min="75" max="200" value="100" id="fontSizeFader" step="25">
<input type="range" min="50" max="200" value="100" id="fontSizeFader" step="25">
<span id="fontSizeValue">1</span>
</div>
</div>
<div class="closer icon-cancel-circled"></div>
</div>
</div>
<div class="overlay"></div>
<script src="{{ url_for('static', filename='js/libs/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/compress/jszip_epub.min.js') }}">
</script> <script src="{{ url_for('static', filename='js/libs/epub.min.js') }}"></script>
<script type="text/javascript">
window.calibre = {
filePath: "{{ url_for('static', filename='js/libs/') }}",
cssPath: "{{ url_for('static', filename='css/') }}",
bookmarkUrl: "{{ url_for('web.set_bookmark', book_id=bookid, book_format='EPUB') }}",
bookUrl: "{{ url_for('web.serve_book', book_id=bookid, book_format='epub', anyname='file.epub') }}",
bookmark: "{{ bookmark.bookmark_key if bookmark != None }}",
useBookmarks: "{{ current_user.is_authenticated | tojson }}"
};
function selectTheme(id) {
tickSpans = document.getElementById("themes").querySelectorAll("span");
</div>
{% set fonts = ["Roboto","OpenSans","Montserrat","Poppins","Oswald","NotoSans","Lato","RobotoSlab"] %}
<div class="form-group">
<label for="fontFamily">{{ _('Font Family') }}</label>
<select name="fontFamily" id="fontFamilyValue">
{% for font in fonts %}
<option value="{{ font }}">{{ _(font) }}</option>
{% endfor %}
</select>
</div>
<div class="closer icon-cancel-circled"></div>
</div>
</div>
<div class="overlay"></div>
<script src="{{ url_for('static', filename='js/libs/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/compress/jszip_epub.min.js') }}">
</script>
<script src="{{ url_for('static', filename='js/libs/epub.min.js') }}"></script>
<script type="text/javascript">
window.calibre = {
filePath: "{{ url_for('static', filename='js/libs/') }}",
cssPath: "{{ url_for('static', filename='css/') }}",
bookmarkUrl: "{{ url_for('web.set_bookmark', book_id=bookid, book_format='EPUB') }}",
bookUrl: "{{ url_for('web.serve_book', book_id=bookid, book_format='epub', anyname='file.epub') }}",
bookmark: "{{ bookmark.bookmark_key if bookmark != None }}",
useBookmarks: "{{ current_user.is_authenticated | tojson }}",
};
window.themes = {
"darkTheme": {
"bgColor": "#202124",
"css_path": "/static/css/epub_themes.css"
},
"lightTheme": {
"bgColor": "white",
"css_path": "/static/css/epub_themes.css"
},
"sepiaTheme": {
"bgColor": "#ece1ca",
"css_path": "/static/css/epub_themes.css"
},
"blackTheme": {
"bgColor": "black",
"css_path": "/static/css/epub_themes.css"
},
};
function selectTheme (id) {
const tickSpans = document.getElementById("themes").querySelectorAll("span");
// Remove tick mark from all theme buttons
for(var i = 0; i < tickSpans.length; i++) {
document.getElementById(tickSpans[i].id).textContent = "";
}
tickSpans.forEach(function (tickSpan) {
document.getElementById(tickSpan.id).textContent = "";
});
// Add tick mark to the button corresponding to the currently selected theme
document.getElementById(id).querySelector("span").textContent = "✓";
// Saving theme to local storage
localStorage.setItem("calibre.reader.theme", id);
// Apply theme to epubjs iframe
reader.rendition.themes.select(id);
// Apply theme to rest of the page. TODO - Do this smarter
if (id == "darkTheme") {
document.getElementById("main").style.backgroundColor = "#202124";
}
else if (id == "lightTheme") {
document.getElementById("main").style.backgroundColor = "white";
}
else if (id == "sepiaTheme") {
document.getElementById("main").style.backgroundColor = "#ece1ca";
}
else if (id == "blackTheme") {
document.getElementById("main").style.backgroundColor = "black";
}
// Apply theme to rest of the page.
document.getElementById("main").style.backgroundColor = themes[id]["bgColor"];
}
function selectFont (id) {
// Select the option
document.getElementById('fontFamilyValue').value = id;
// Saving font to local storage
localStorage.setItem("calibre.reader.font", id);
// Apply font to epubjs iframe
reader.rendition.themes.font(id);
}
// font size settings logic
let fontSizeFader = document.getElementById('fontSizeFader');
fontSizeFader.addEventListener ("change", function () {
reader.rendition.themes.fontSize(`${this.value}%`)
const fontSizeFader = document.getElementById('fontSizeFader'),
fontSizeValue = document.getElementById('fontSizeValue');
fontSizeFader.addEventListener("change", function () {
reader.rendition.themes.fontSize(`${this.value}%`);
fontSizeValue.innerText = `${this.value / 100}`;
});
</script>
<script src="{{ url_for('static', filename='js/libs/screenfull.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/libs/reader.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/reading/epub.js') }}"></script>
</body>
</html>
// font family settings logic
const fontFamilyValue = document.getElementById('fontFamilyValue');
fontFamilyValue.addEventListener("change", function () {
selectFont(this.value);
});
</script>
<script src="{{ url_for('static', filename='js/libs/screenfull.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/libs/reader.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/reading/epub.js') }}"></script>
</body>
</html>
Loading…
Cancel
Save