mirror of
https://github.com/janeczku/calibre-web
synced 2024-10-31 15:20:28 +00:00
Merge remote-tracking branch 'font_size/issue/487'
This commit is contained in:
commit
7d3af5bbd0
29
cps/static/css/reader.css
Normal file
29
cps/static/css/reader.css
Normal 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,6 +16,7 @@
|
||||
<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">
|
||||
@ -87,6 +88,12 @@
|
||||
<input type="checkbox" id="sidebarReflow" name="sidebarReflow">{{_('Reflow text when sidebars are open.')}}
|
||||
</p>
|
||||
</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>
|
||||
</div>
|
||||
@ -131,7 +138,14 @@
|
||||
else if (id == "blackTheme") {
|
||||
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 src="{{ url_for('static', filename='js/libs/screenfull.min.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/libs/reader.min.js') }}"></script>
|
||||
|
Loading…
Reference in New Issue
Block a user