sudacode/mokuro-reader
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Attemp to get jidoujisho support working

Browse Source
This commit is contained in:
ZXY101
2024-02-07 11:19:18 +02:00
parent 28155496fc
commit 50ef5c9f40
3 changed files with 21 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/app.html
View File

@@ -11,6 +11,9 @@
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover" class="bg-white dark:bg-gray-950 dark:text-white"> <body data-sveltekit-preload-data="hover" class="bg-white dark:bg-gray-950 dark:text-white">
<div style="display: contents">%sveltekit.body%</div> <div
id="popupAbout"
class="pageContainer"
style="display: contents; background-image: url('https://fastly.picsum.photos/id/824/200/300.jpg?hmac=CPaWVapi5aRxRDN0wSZfBeD_w8iiddSi1zhfyLj7AnA');">%sveltekit.body%</div>
</body> </body>
</html> </html>

9
src/lib/components/Reader/MangaPage.svelte
View File

@@ -9,9 +9,18 @@
$: url = src ? `url(${URL.createObjectURL(src)})` : ''; $: url = src ? `url(${URL.createObjectURL(src)})` : '';
let legacy: HTMLElement | null;
onMount(() => { onMount(() => {
legacy = document.getElementById('popupAbout');
zoomDefault(); zoomDefault();
}); });
$: {
if (legacy) {
legacy.style.backgroundImage = url;
}
}
</script> </script>
<div <div

16
src/lib/components/Reader/TextBoxes.svelte
View File

@@ -67,9 +67,9 @@
} }
</script> </script>
{#each textBoxes as { fontSize, height, left, lines, top, width, writingMode }, index (`text-box-${index}`)} {#each textBoxes as { fontSize, height, left, lines, top, width, writingMode }, index (`textBox-${index}`)}
<div <div
class="text-box" class="textBox"
style:width style:width
style:height style:height
style:left style:left
@@ -91,7 +91,7 @@
{/each} {/each}
<style> <style>
.text-box { .textBox {
color: black; color: black;
padding: 0; padding: 0;
position: absolute; position: absolute;
@@ -102,13 +102,13 @@
z-index: 11; z-index: 11;
} }
.text-box:focus, .textBox:focus,
.text-box:hover { .textBox:hover {
background: rgb(255, 255, 255); background: rgb(255, 255, 255);
border: 1px solid rgba(0, 0, 0, 0); border: 1px solid rgba(0, 0, 0, 0);
} }
.text-box p { .textBox p {
display: none; display: none;
white-space: nowrap; white-space: nowrap;
letter-spacing: 0.1em; letter-spacing: 0.1em;
@@ -119,8 +119,8 @@
z-index: 11; z-index: 11;
} }
.text-box:focus p, .textBox:focus p,
.text-box:hover p { .textBox:hover p {
display: table; display: table;
} }
</style> </style>