Attemp to get jidoujisho support working
This commit is contained in:
@@ -11,6 +11,9 @@
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<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>
|
||||
</html>
|
||||
|
||||
@@ -9,9 +9,18 @@
|
||||
|
||||
$: url = src ? `url(${URL.createObjectURL(src)})` : '';
|
||||
|
||||
let legacy: HTMLElement | null;
|
||||
|
||||
onMount(() => {
|
||||
legacy = document.getElementById('popupAbout');
|
||||
zoomDefault();
|
||||
});
|
||||
|
||||
$: {
|
||||
if (legacy) {
|
||||
legacy.style.backgroundImage = url;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
|
||||
@@ -67,9 +67,9 @@
|
||||
}
|
||||
</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
|
||||
class="text-box"
|
||||
class="textBox"
|
||||
style:width
|
||||
style:height
|
||||
style:left
|
||||
@@ -91,7 +91,7 @@
|
||||
{/each}
|
||||
|
||||
<style>
|
||||
.text-box {
|
||||
.textBox {
|
||||
color: black;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
@@ -102,13 +102,13 @@
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.text-box:focus,
|
||||
.text-box:hover {
|
||||
.textBox:focus,
|
||||
.textBox:hover {
|
||||
background: rgb(255, 255, 255);
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.text-box p {
|
||||
.textBox p {
|
||||
display: none;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 0.1em;
|
||||
@@ -119,8 +119,8 @@
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.text-box:focus p,
|
||||
.text-box:hover p {
|
||||
.textBox:focus p,
|
||||
.textBox:hover p {
|
||||
display: table;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user