mirror/BookLore
1
0
Fork 0
mirror of https://github.com/adityachandelgit/BookLore.git synced 2026-01-05 22:29:50 -06:00
Code Issues Packages Projects Releases Wiki Activity

Fix settings page EPUB's reader font color

Browse Source
This commit is contained in:
aditya.chandel
2025-09-01 12:33:55 -06:00
committed by Aditya Chandel
parent 0159fcf2a8
commit cdd9b06b1d
1 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
booklore-ui/src/app/book/components/epub-viewer/component/epub-viewer.component.html
View File

@@ -29,14 +29,14 @@
}
<div>
<p-button size="small" class="settings-toggle-button" (click)="toggleSettingsDrawer()" icon="pi pi-cog" severity="secondary"></p-button>
<p-drawer [(visible)]="isSettingsDrawerVisible" [modal]="true" [position]="'right'" header="Settings">
<p-drawer [(visible)]="isSettingsDrawerVisible" [modal]="true" [position]="'right'" header="Settings">
<div class="flex flex-col gap-4 max-w-md mx-auto">
<div class="flex items-center gap-4">
<span class="font-semibold text-gray-700 dark:text-gray-200">Font Size:</span>
<span class="font-semibold text-gray-200">Font Size:</span>
<div class="flex items-center gap-2">
<p-button size="small" icon="pi pi-minus" (click)="decreaseFontSize()" severity="info"></p-button>
<span class="text-gray-800 dark:text-gray-100">{{ fontSize }}%</span>
<span class="text-gray-100">{{ fontSize }}%</span>
<p-button size="small" icon="pi pi-plus" (click)="increaseFontSize()" severity="info"></p-button>
</div>
</div>
@@ -44,7 +44,7 @@
<p-divider></p-divider>
<div class="flex items-center gap-2">
<label for="font-type" class="block font-semibold text-gray-700 dark:text-gray-200">Font:</label>
<label for="font-type" class="block font-semibold text-gray-200">Font:</label>
<p-select
id="font-type"
[options]="fontTypes"
@@ -58,7 +58,7 @@
<p-divider></p-divider>
<div class="flex gap-2 items-center">
<label class="block font-semibold text-gray-700 dark:text-gray-200">Theme:</label>
<label class="block font-semibold text-gray-200">Theme:</label>
<div class="flex gap-3 mt-1" role="radiogroup" aria-label="Theme selection">
@for (theme of themes; track theme) {
<button
@@ -77,7 +77,7 @@
<p-divider></p-divider>
<div class="flex items-center gap-2">
<label id="flow-label" class="block font-semibold text-gray-700 dark:text-gray-200">Flow:</label>
<label id="flow-label" class="block font-semibold text-gray-200">Flow:</label>
<div class="flex gap-4" role="radiogroup" aria-labelledby="flow-label">
<div class="flex items-center gap-1.5">
<p-radioButton
@@ -87,7 +87,7 @@
(onClick)="changeScrollMode()"
inputId="flow-paginated">
</p-radioButton>
<label for="flow-paginated" class="cursor-pointer select-none text-gray-700 dark:text-gray-200">Paginated</label>
<label for="flow-paginated" class="cursor-pointer select-none text-gray-200">Paginated</label>
</div>
<div class="flex items-center gap-1.5">
<p-radioButton
@@ -97,7 +97,7 @@
(onClick)="changeScrollMode()"
inputId="flow-scrolled">
</p-radioButton>
<label for="flow-scrolled" class="cursor-pointer select-none text-gray-700 dark:text-gray-200">Scrolled</label>
<label for="flow-scrolled" class="cursor-pointer select-none text-gray-200">Scrolled</label>
</div>
</div>
</div>
@@ -105,7 +105,7 @@
<p-divider></p-divider>
<div>
<label class="block mb-1 font-semibold text-gray-700 dark:text-gray-200 pb-2">Line Height: {{ lineHeight }}</label>
<label class="block mb-1 font-semibold text-gray-200 pb-2">Line Height: {{ lineHeight }}</label>
<p-slider
[(ngModel)]="lineHeight"
[min]="1"
@@ -118,7 +118,7 @@
</div>
<div>
<label class="block mb-1 font-semibold text-gray-700 dark:text-gray-200 pb-2 pt-2">Letter Spacing: {{ letterSpacing }}em</label>
<label class="block mb-1 font-semibold text-gray-200 pb-2 pt-2">Letter Spacing: {{ letterSpacing }}em</label>
<p-slider
[(ngModel)]="letterSpacing"
[min]="0"