NunoSempere/calibre-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'font_size/issue/487'

Browse Source
This commit is contained in:
Ozzie Isaacs 2022-12-25 10:29:29 +01:00
commit 7d3af5bbd0
2 changed files with 44 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
cps/static/css/reader.css Normal file
View File

@ -0,0 +1,29 @@
.fontSizeWrapper {
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;
}
.slider input[type="range"] {
width: 80%;
height: 5px;
background: black;
border: none;
outline: none;
}

16
cps/templates/read.html
View File

@ -16,6 +16,7 @@
<link rel="stylesheet" href="{{ url_for('static', filename='css/libs/normalize.css') }}"> <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/main.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/popup.css') }}"> <link rel="stylesheet" href="{{ url_for('static', filename='css/popup.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/reader.css') }}">
</head> </head>
<body> <body>
<div id="sidebar"> <div id="sidebar">
@ -87,6 +88,12 @@
<input type="checkbox" id="sidebarReflow" name="sidebarReflow">{{_('Reflow text when sidebars are open.')}} <input type="checkbox" id="sidebarReflow" name="sidebarReflow">{{_('Reflow text when sidebars are open.')}}
</p> </p>
</div> </div>
<div class="fontSizeWrapper">
<div class="slider">
<label for="fader">{{ _('Font Sizes') }}</label>
<input type="range" min="75" max="200" value="100" id="fontSizeFader" step="25">
</div>
</div>
<div class="closer icon-cancel-circled"></div> <div class="closer icon-cancel-circled"></div>
</div> </div>
</div> </div>
@ -131,7 +138,14 @@
else if (id == "blackTheme") { else if (id == "blackTheme") {
document.getElementById("main").style.backgroundColor = "black"; document.getElementById("main").style.backgroundColor = "black";
} }
}
}
// font size settings logic
let fontSizeFader = document.getElementById('fontSizeFader');
fontSizeFader.addEventListener ("change", function () {
reader.rendition.themes.fontSize(`${this.value}%`)
});
</script> </script>
<script src="{{ url_for('static', filename='js/libs/screenfull.min.js') }}"></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/libs/reader.min.js') }}"></script>