obsidian-visualiser/app.vue

<template>
	<div class="text-light-100 dark:text-dark-100 flex bg-light-0 dark:bg-dark-0 h-screen overflow-hidden">
		<NuxtRouteAnnouncer/>
		<TooltipProvider>
			<NuxtLayout>
				<div class="xl:px-12 xl:py-8 lg:px-8 lg:py-6 px-6 py-3 flex flex-1 justify-center overflow-auto max-h-full max-w-full relative" id="mainContainer">
					<NuxtPage />
				</div>
			</NuxtLayout>
		</TooltipProvider>
	</div>
</template>

<script setup lang="ts">
import { Content } from '#shared/content.util';
import * as Floating from '#shared/floating.util';
import { Toaster } from '#shared/components.util';

onBeforeMount(() => {
	Content.init();
	Floating.init();
	Toaster.init();

	const unmount = useRouter().afterEach((to, from, failure) => {
		if(failure) return;

		document.querySelectorAll(`a[href="${from.path}"][data-active]`).forEach(e => e.classList.remove(e.getAttribute('data-active') ?? ''));
		document.querySelectorAll(`a[href="${to.path}"][data-active]`).forEach(e => e.classList.add(e.getAttribute('data-active') ?? ''));
	});

	onUnmounted(() => {
		unmount();
	})
});
</script>

<style>
.ToastRoot[data-type='error'] {
	@apply border-light-red;
	@apply dark:border-dark-red;
	@apply bg-light-red;
	@apply dark:bg-dark-red;
	@apply !bg-opacity-50;
}
.ToastRoot[data-type='success'] {
	@apply border-light-green;
	@apply dark:border-dark-green;
	@apply bg-light-green;
	@apply dark:bg-dark-green;
	@apply !bg-opacity-50;
}
::-webkit-scrollbar {
	width: 12px; 
	height: 12px;
}
 
::-webkit-scrollbar-thumb {
	@apply bg-light-40;
	@apply dark:bg-dark-40;
	@apply rounded-md;
	@apply border-2;
	@apply border-solid;
	@apply border-transparent;
	@apply bg-clip-padding;
}
 
::-webkit-scrollbar-thumb:hover {
	@apply bg-light-50;
	@apply dark:bg-dark-50;
}
.callout[data-type="abstract"],
.callout[data-type="summary"],
.callout[data-type="tldr"]
{
	@apply bg-light-cyan;
	@apply dark:bg-dark-cyan;
	@apply text-light-cyan;
	@apply dark:text-dark-cyan;
}
.callout[data-type="info"]
{
	@apply bg-light-blue;
	@apply dark:bg-dark-blue;
	@apply text-light-blue;
	@apply dark:text-dark-blue;
}
.callout[data-type="todo"]
{
	@apply bg-light-blue;
	@apply dark:bg-dark-blue;
	@apply text-light-blue;
	@apply dark:text-dark-blue;
}
.callout[data-type="important"]
{
	@apply bg-light-cyan;
	@apply dark:bg-dark-cyan;
	@apply text-light-cyan;
	@apply dark:text-dark-cyan;
}
.callout[data-type="tip"],
.callout[data-type="hint"]
{
	@apply bg-light-cyan;
	@apply dark:bg-dark-cyan;
	@apply text-light-cyan;
	@apply dark:text-dark-cyan;
}
.callout[data-type="success"],
.callout[data-type="check"],
.callout[data-type="done"]
{
	@apply bg-light-green;
	@apply dark:bg-dark-green;
	@apply text-light-green;
	@apply dark:text-dark-green;
}
.callout[data-type="question"],
.callout[data-type="help"],
.callout[data-type="faq"]
{
	@apply bg-light-orange;
	@apply dark:bg-dark-orange;
	@apply text-light-orange;
	@apply dark:text-dark-orange;
}
.callout[data-type="warning"],
.callout[data-type="caution"],
.callout[data-type="attention"]
{
	@apply bg-light-orange;
	@apply dark:bg-dark-orange;
	@apply text-light-orange;
	@apply dark:text-dark-orange;
}
.callout[data-type="failure"],
.callout[data-type="fail"],
.callout[data-type="missing"]
{
	@apply bg-light-red;
	@apply dark:bg-dark-red;
	@apply text-light-red;
	@apply dark:text-dark-red;
}
.callout[data-type="danger"],
.callout[data-type="error"]
{
	@apply bg-light-red;
	@apply dark:bg-dark-red;
	@apply text-light-red;
	@apply dark:text-dark-red;
}
.callout[data-type="bug"]
{
	@apply bg-light-red;
	@apply dark:bg-dark-red;
	@apply text-light-red;
	@apply dark:text-dark-red;
}
.callout[data-type="example"]
{
	@apply bg-light-purple;
	@apply dark:bg-dark-purple;
	@apply text-light-purple;
	@apply dark:text-dark-purple;
}
.variant-cap
{
    font-variant: small-caps;
}
.cm-editor
{
    @apply bg-transparent;
    @apply flex-1 h-full;
    @apply font-sans;

    @apply text-light-100 dark:text-dark-100;
}
.cm-editor .cm-content
{
    @apply caret-light-100 dark:caret-dark-100;
}
.cm-line
{
    @apply text-base;
    @apply font-sans;
}

::-webkit-scrollbar-corner {
	@apply bg-transparent;
}
</style>