diff options
Diffstat (limited to 'frontend/src/lib/reader/components')
3 files changed, 28 insertions, 9 deletions
diff --git a/frontend/src/lib/reader/components/PageIndicator.svelte b/frontend/src/lib/reader/components/PageIndicator.svelte deleted file mode 100644 index d0a3d0c..0000000 --- a/frontend/src/lib/reader/components/PageIndicator.svelte +++ /dev/null @@ -1,9 +0,0 @@ -<script lang="ts"> - import { getReaderContext } from '$lib/Reader.svelte'; - - const reader = getReaderContext(); -</script> - -<div class="floating p-2!"> - {reader.page + 1}/{reader.pages.length} -</div> diff --git a/frontend/src/lib/reader/components/SliderMargin.svelte b/frontend/src/lib/reader/components/SliderMargin.svelte new file mode 100644 index 0000000..c2f9a55 --- /dev/null +++ b/frontend/src/lib/reader/components/SliderMargin.svelte @@ -0,0 +1,11 @@ +<script lang="ts"> + import type { Snippet } from 'svelte'; + + let { children }: { children: Snippet } = $props(); +</script> + +<div + class="flex h-full w-22 items-center justify-center px-1 font-semibold text-white/0 transition-colors group-hover/slider:bg-black group-hover/slider:text-white" +> + {@render children()} +</div> diff --git a/frontend/src/lib/reader/components/SliderTooltip.svelte b/frontend/src/lib/reader/components/SliderTooltip.svelte new file mode 100644 index 0000000..9e0322d --- /dev/null +++ b/frontend/src/lib/reader/components/SliderTooltip.svelte @@ -0,0 +1,17 @@ +<script lang="ts"> + import type { Snippet } from 'svelte'; + + let { children }: { children: Snippet } = $props(); +</script> + +<div + class="invisible absolute bottom-10 w-20 rounded-xl bg-blue-500 p-1 font-semibold text-white drop-shadow-md group-hover/page:visible" +> + {@render children()} +</div> + +<style lang="postcss"> + div { + left: calc(50% - 2.5rem); + } +</style> |