You've already forked obsidian-visualiser
Progressing on the CSS rework
This commit is contained in:
@@ -42,40 +42,41 @@ async function debounced()
|
||||
<input class="caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50 bg-light-20 dark:bg-dark-20 appearance-none w-full outline-none px-3 py-1 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40" type="text" placeholder="Recherche" v-model="input" @input="search">
|
||||
</div>
|
||||
<Teleport to="#teleports" v-if="input !== '' && !!pos">
|
||||
<div class=""
|
||||
<div class="absolute z-50 border border-light-35 dark:border-dark-35 bg-light-0 dark:bg-dark-0 text-light-100 dark:text-dark-100 divide-y divide-light-35 dark:divide-dark-35 max-h-96 overflow-auto
|
||||
scroll"
|
||||
:style="{top: (pos.bottom + 4) + 'px', left: pos.left + 'px', width: pos.width + 'px'}">
|
||||
<div class="loading" v-if="loading"></div>
|
||||
<template v-else>
|
||||
<div class="" v-for="result of results.projects" :key="result.id"
|
||||
<div class="cursor-pointer hover:bg-light-25 dark:hover:bg-dark-25 px-4 py-1 " v-for="result of results.projects" :key="result.id"
|
||||
@mouseenter="(e) => (e.target as HTMLElement).classList.add('is-selected')"
|
||||
@mouseleave="(e) => (e.target as HTMLElement).classList.remove('is-selected')"
|
||||
@mousedown.prevent="navigateTo(`/explorer/${result.id}${result.home}`); input = ''">
|
||||
@mousedown.prevent="navigateTo(`/explorer/${result.id}/${result.home}`); input = ''">
|
||||
<div class="">
|
||||
<BoldContent class="" :text="result.name" :matched="input" />
|
||||
<div class="">
|
||||
<BoldContent class="text-lg" :text="result.name" :matched="input" />
|
||||
<div class="flex justify-between text-sm">
|
||||
<div class="">{{ result.username }}</div>
|
||||
<div class="">{{ result.pages }} pages</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="" v-for="result of results.files" :key="result.id"
|
||||
<div class="cursor-pointer hover:bg-light-25 dark:hover:bg-dark-25 px-4 py-1 " v-for="result of results.files" :key="result.id"
|
||||
@mouseenter="(e) => (e.target as HTMLElement).classList.add('is-selected')"
|
||||
@mouseleave="(e) => (e.target as HTMLElement).classList.remove('is-selected')"
|
||||
@mousedown.prevent="navigateTo(`/explorer/${result.project}${result.path}`); input = ''">
|
||||
@mousedown.prevent="navigateTo(`/explorer/${result.project}/${result.path}`); input = ''">
|
||||
<div class="">
|
||||
<BoldContent class="" :text="result.title" :matched="input" />
|
||||
<div class="">
|
||||
<BoldContent class="text-lg" :text="result.title" :matched="input" />
|
||||
<div class="flex justify-between text-sm">
|
||||
<div class="">{{ result.username }}</div>
|
||||
<div class="">{{ result.comments }} commentaires</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="" v-for="result of results.users" :key="result.id"
|
||||
<div class="cursor-pointer hover:bg-light-25 dark:hover:bg-dark-25 px-4 py-1 " v-for="result of results.users" :key="result.id"
|
||||
@mouseenter="(e) => (e.target as HTMLElement).classList.add('is-selected')"
|
||||
@mouseleave="(e) => (e.target as HTMLElement).classList.remove('is-selected')"
|
||||
@mousedown.prevent="navigateTo(`/user/${result.id}`); input = ''">
|
||||
<div class="">
|
||||
<BoldContent class="" :text="result.username" :matched="input" />
|
||||
<BoldContent class="text-lg" :text="result.username" :matched="input" />
|
||||
</div>
|
||||
</div>
|
||||
<div class=""
|
||||
|
||||
@@ -216,47 +216,45 @@ function getCenter(n: { x: number, y: number }, i: { x: number, y: number }, r:
|
||||
<Suspense>
|
||||
<template #default>
|
||||
<div id="canvas" ref="canvas" @pointerdown="onPointerDown" @wheel.passive="onWheel" @touchstart.passive="onTouchStart"
|
||||
@dragstart.prevent="" class="canvas-wrapper node-insert-event mod-zoomed-out"
|
||||
@dragstart.prevent="" class="relative overflow-hidden"
|
||||
:style="{ '--zoom-multiplier': (1 / Math.pow(zoom, 0.7)) }">
|
||||
<div class="canvas-controls" style="z-index: 999;">
|
||||
<div class="canvas-control-group">
|
||||
<div @click="zoom = clamp(zoom * 1.1, minZoom, 3)" class="canvas-control-item"
|
||||
aria-label="Zoom in" data-tooltip-position="left">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
|
||||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round" class="svg-icon lucide-plus">
|
||||
<path d="M5 12h14"></path>
|
||||
<path d="M12 5v14"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div @click="zoom = 1" class="canvas-control-item" aria-label="Reset zoom"
|
||||
data-tooltip-position="left">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
|
||||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round" class="svg-icon lucide-rotate-cw">
|
||||
<path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path>
|
||||
<path d="M21 3v5h-5"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div @click="reset" class="canvas-control-item" aria-label="Zoom to fit"
|
||||
data-tooltip-position="left">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
|
||||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round" class="svg-icon lucide-maximize">
|
||||
<path d="M8 3H5a2 2 0 0 0-2 2v3"></path>
|
||||
<path d="M21 8V5a2 2 0 0 0-2-2h-3"></path>
|
||||
<path d="M3 16v3a2 2 0 0 0 2 2h3"></path>
|
||||
<path d="M16 21h3a2 2 0 0 0 2-2v-3"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div @click="zoom = clamp(zoom * 0.9, minZoom, 3)" class="canvas-control-item"
|
||||
aria-label="Zoom out" data-tooltip-position="left">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
|
||||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round" class="svg-icon lucide-minus">
|
||||
<path d="M5 12h14"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10 absolute top-2 left-2 z-[100] overflow-hidden">
|
||||
<div @click="zoom = clamp(zoom * 1.1, minZoom, 3)" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer"
|
||||
aria-label="Zoom in" data-tooltip-position="left">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
|
||||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="M5 12h14"></path>
|
||||
<path d="M12 5v14"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div @click="zoom = 1" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer" aria-label="Reset zoom"
|
||||
data-tooltip-position="left">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
|
||||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path>
|
||||
<path d="M21 3v5h-5"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div @click="reset" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer" aria-label="Zoom to fit"
|
||||
data-tooltip-position="left">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
|
||||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="M8 3H5a2 2 0 0 0-2 2v3"></path>
|
||||
<path d="M21 8V5a2 2 0 0 0-2-2h-3"></path>
|
||||
<path d="M3 16v3a2 2 0 0 0 2 2h3"></path>
|
||||
<path d="M16 21h3a2 2 0 0 0 2-2v-3"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div @click="zoom = clamp(zoom * 0.9, minZoom, 3)" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer"
|
||||
aria-label="Zoom out" data-tooltip-position="left">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
|
||||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="M5 12h14"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="canvas"
|
||||
@@ -274,7 +272,6 @@ function getCenter(n: { x: number, y: number }, i: { x: number, y: number }, r:
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<span v-if="TMP_dragPoint" :style="{ display: 'block', backgroundColor: 'red', borderRadius: '8px', width: '8px', height: '8px', transform: `translate(-4px, -4px) translate(${TMP_dragPoint.x}px, ${TMP_dragPoint.y}px)` }"></span>
|
||||
</div>
|
||||
</template>
|
||||
<template #fallback>
|
||||
|
||||
@@ -12,9 +12,9 @@ if(!isNaN(project.value))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="tree-item">
|
||||
<div class="tree-item-children">
|
||||
<NavigationLink v-if="!!navigation" v-for="link of navigation" :project="project" :link="link" />
|
||||
<div class="relative flex-auto">
|
||||
<div class="absolute top-0 bottom-0 left-0 right-0 overflow-auto px-4">
|
||||
<NavigationLink class="ps-2" v-if="!!navigation" v-for="link of navigation" :project="project" :link="link" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -15,28 +15,24 @@ const collapsed = ref(!unifySlug(useRoute().params.slug).startsWith(props.link.p
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="tree-item" v-if="project && !isNaN(project)">
|
||||
<div class="py-1" v-if="project && !isNaN(project)">
|
||||
<template v-if="hasChildren">
|
||||
<div class="tree-item-self"
|
||||
:class="{ 'is-collapsed': collapsed, 'mod-collapsible is-clickable': hasChildren }"
|
||||
data-path="{{ props.link.title }}" @click="collapsed = hasChildren && !collapsed"
|
||||
:data-type="link.private ? 'privé' : undefined">
|
||||
<div v-if="hasChildren" class="tree-item-icon collapse-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
class="svg-icon right-triangle">
|
||||
<div class="flex gap-2 items-center cursor-pointer hover:text-opacity-75 text-light-100 dark:text-dark-100" @click="collapsed = hasChildren && !collapsed" :data-type="link.private ? 'privé' : undefined">
|
||||
<div v-if="hasChildren" class="w-4 h-4 transition-transform" :class="{'-rotate-90': collapsed}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M3 8L12 17L21 8"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="tree-item-inner">{{ link.title }}</div>
|
||||
<div class="font-semibold">{{ link.title }}</div>
|
||||
</div>
|
||||
<div v-if="!collapsed" class="tree-item-children">
|
||||
<NavigationLink v-if="hasChildren" v-for="l of link.children" :link="l" :project="project" />
|
||||
<div v-if="!collapsed">
|
||||
<NavigationLink class="border-light-40 dark:border-dark-40 ms-2 ps-4 border-l" v-if="hasChildren" v-for="l of link.children" :link="l" :project="project" />
|
||||
</div>
|
||||
</template>
|
||||
<NuxtLink v-else class="tree-item-self" :to="{ path: `/explorer/${project}/${link.path}`, force: true }"
|
||||
:active-class="'mod-active'" :data-type="(link.type === 'Canvas' ? 'graph' : (link.private ? 'privé' : undefined))">
|
||||
<div class="tree-item-inner">{{ link.title }}</div>
|
||||
<NuxtLink v-else class="text-light-100 dark:text-dark-100 cursor-pointer hover:text-opacity-75" :to="{ path: `/explorer/${project}/${link.path}`, force: true }"
|
||||
active-class="!text-accent-blue relative before:border-l-2 before:border-accent-blue before:absolute before:-top-1 before:-bottom-1 before:-left-4 before:-mx-px" :data-type="(link.type === 'Canvas' ? 'graph' : (link.private ? 'privé' : undefined))">
|
||||
<div class="">{{ link.title }}</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,32 +1,24 @@
|
||||
<template>
|
||||
<Teleport to="#teleports" v-if="display && (!fetched || loaded)">
|
||||
<div class="popover hover-popover" :class="{'is-loaded': fetched}" :style="pos"
|
||||
<div class="absolute border-2 border-light-35 dark:border-dark-35 max-w-[550px] max-h-[450px] overflow-auto bg-light-0 dark:bg-dark-0 text-light-100 dark:text-dark-100" :class="{'is-loaded': fetched}" :style="pos"
|
||||
@mouseenter="debounce(show, 250)" @mouseleave="debounce(() => display = false, 250)">
|
||||
<div v-if="pending" class="loading"></div>
|
||||
<template v-else-if="content !==''">
|
||||
<div v-if="type === 'Markdown'" class=" markdown-embed">
|
||||
<div class="markdown-embed-content">
|
||||
<div class="markdown-preview-view markdown-rendered node-insert-event hide-title">
|
||||
<div class="markdown-preview-sizer markdown-preview-section">
|
||||
<h1>{{ title }}</h1>
|
||||
<Markdown v-model="content"></Markdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="type === 'Markdown'" class="p-6">
|
||||
<ProseH1>{{ title }}</ProseH1>
|
||||
<Markdown v-model="content"></Markdown>
|
||||
</div>
|
||||
<div v-else-if="type === 'Canvas'" class="canvas-embed is-loaded">
|
||||
<div v-else-if="type === 'Canvas'" class="">
|
||||
<CanvasRenderer :canvas="JSON.parse(content) " />
|
||||
</div>
|
||||
<div class="not-found-container" v-else>
|
||||
<div class="not-found-image"></div>
|
||||
<div class="not-found-title">Fichier vide</div>
|
||||
<div class="not-found-description">Cette page est vide</div>
|
||||
<div class="h-100 w-100 flex flex-1 flex-col justify-center items-center" v-else>
|
||||
<div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Fichier vide</div>
|
||||
<div class="text-lg text-light-60 dark:text-dark-60">Cette page est vide</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="not-found-container" v-else>
|
||||
<div class="not-found-image"></div>
|
||||
<div class="not-found-title">Impossible d'afficher</div>
|
||||
<div class="not-found-description">Cette page est impossible à traiter</div>
|
||||
<div class="h-100 w-100 flex flex-1 flex-col justify-center items-center" v-else>
|
||||
<div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Impossible d'afficher</div>
|
||||
<div class="text-lg text-light-60 dark:text-dark-60">Cette page est impossible à traiter</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
|
||||
@@ -1,15 +1,17 @@
|
||||
<template>
|
||||
<NuxtLink class="preview-link" v-if="data && data[0] && status !== 'pending'"
|
||||
<NuxtLink class="text-accent-blue" v-if="data && data[0] && status !== 'pending'"
|
||||
:to="{ path: `/explorer/${project}/${data[0].path}`, hash: hash }" :class="class">
|
||||
<PreviewContent :project="project" :path="data[0].path" :anchor="hash">
|
||||
<slot v-bind="$attrs"></slot>
|
||||
<ThemeIcon class="link-icon" v-if="data && data[0] && data[0].type !== 'Markdown'" :height="20" :width="20"
|
||||
:icon="`link-${data[0].type.toLowerCase()}`" />
|
||||
<div class="inline-flex items-center">
|
||||
<slot v-bind="$attrs"></slot>
|
||||
<ThemeIcon class="w-4 h-4 inline-block" v-if="data && data[0] && data[0].type !== 'Markdown'" :height="20" :width="20"
|
||||
:icon="`link-${data[0].type.toLowerCase()}`" />
|
||||
</div>
|
||||
</PreviewContent>
|
||||
</NuxtLink>
|
||||
<NuxtLink v-else-if="href" :to="href" :class="class">
|
||||
<NuxtLink v-else-if="href" :to="href" :class="class" class="text-accent-blue inline-flex items-center">
|
||||
<slot v-bind="$attrs"></slot>
|
||||
<ThemeIcon class="link-icon" v-if="data && data[0] && data[0].type !== 'Markdown'" :height="20" :width="20"
|
||||
<ThemeIcon class="w-4 h-4 inline-block" v-if="data && data[0] && data[0].type !== 'Markdown'" :height="20" :width="20"
|
||||
:icon="`link-${data[0].type.toLowerCase()}`" />
|
||||
</NuxtLink>
|
||||
<slot :class="class" v-else v-bind="$attrs"></slot>
|
||||
|
||||
@@ -20,4 +20,163 @@ onUnmounted(() => {
|
||||
function toggle() {
|
||||
el.value?.classList?.toggle('is-collapsed');
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
blockquote:not(.callout)
|
||||
{
|
||||
@apply ps-4;
|
||||
@apply my-2;
|
||||
@apply relative;
|
||||
@apply before:absolute;
|
||||
@apply before:-top-1;
|
||||
@apply before:-bottom-1;
|
||||
@apply before:left-0;
|
||||
@apply before:w-1;
|
||||
@apply before:bg-light-30;
|
||||
@apply dark:before:bg-dark-30;
|
||||
}
|
||||
blockquote:empty
|
||||
{
|
||||
@apply before:hidden;
|
||||
}
|
||||
.callout {
|
||||
@apply bg-light-blue;
|
||||
@apply dark:bg-dark-blue;
|
||||
}
|
||||
.callout.is-collapsible .callout-title
|
||||
{
|
||||
@apply cursor-pointer;
|
||||
}
|
||||
.callout .fold
|
||||
{
|
||||
@apply transition-transform;
|
||||
}
|
||||
.callout.is-collapsed .fold
|
||||
{
|
||||
@apply -rotate-90;
|
||||
}
|
||||
.callout.is-collapsed > p
|
||||
{
|
||||
@apply hidden;
|
||||
}
|
||||
.callout[datacallout="abstract"],
|
||||
.callout[datacallout="summary"],
|
||||
.callout[datacallout="tldr"] {
|
||||
@apply bg-light-cyan;
|
||||
@apply dark:bg-dark-cyan;
|
||||
@apply text-light-cyan;
|
||||
@apply dark:text-dark-cyan;
|
||||
}
|
||||
.callout[datacallout="info"] {
|
||||
@apply bg-light-blue;
|
||||
@apply dark:bg-dark-blue;
|
||||
@apply text-light-blue;
|
||||
@apply dark:text-dark-blue;
|
||||
}
|
||||
.callout[datacallout="todo"] {
|
||||
@apply bg-light-blue;
|
||||
@apply dark:bg-dark-blue;
|
||||
@apply text-light-blue;
|
||||
@apply dark:text-dark-blue;
|
||||
}
|
||||
.callout[datacallout="important"] {
|
||||
@apply bg-light-cyan;
|
||||
@apply dark:bg-dark-cyan;
|
||||
@apply text-light-cyan;
|
||||
@apply dark:text-dark-cyan;
|
||||
}
|
||||
.callout[datacallout="tip"],
|
||||
.callout[datacallout="hint"] {
|
||||
@apply bg-light-cyan;
|
||||
@apply dark:bg-dark-cyan;
|
||||
@apply text-light-cyan;
|
||||
@apply dark:text-dark-cyan;
|
||||
}
|
||||
.callout[datacallout="success"],
|
||||
.callout[datacallout="check"],
|
||||
.callout[datacallout="done"] {
|
||||
@apply bg-light-green;
|
||||
@apply dark:bg-dark-green;
|
||||
@apply text-light-green;
|
||||
@apply dark:text-dark-green;
|
||||
}
|
||||
.callout[datacallout="question"],
|
||||
.callout[datacallout="help"],
|
||||
.callout[datacallout="faq"] {
|
||||
@apply bg-light-orange;
|
||||
@apply dark:bg-dark-orange;
|
||||
@apply text-light-orange;
|
||||
@apply dark:text-dark-orange;
|
||||
}
|
||||
.callout[datacallout="warning"],
|
||||
.callout[datacallout="caution"],
|
||||
.callout[datacallout="attention"] {
|
||||
@apply bg-light-orange;
|
||||
@apply dark:bg-dark-orange;
|
||||
@apply text-light-orange;
|
||||
@apply dark:text-dark-orange;
|
||||
}
|
||||
.callout[datacallout="failure"],
|
||||
.callout[datacallout="fail"],
|
||||
.callout[datacallout="missing"] {
|
||||
@apply bg-light-red;
|
||||
@apply dark:bg-dark-red;
|
||||
@apply text-light-red;
|
||||
@apply dark:text-dark-red;
|
||||
}
|
||||
.callout[datacallout="danger"],
|
||||
.callout[datacallout="error"] {
|
||||
@apply bg-light-red;
|
||||
@apply dark:bg-dark-red;
|
||||
@apply text-light-red;
|
||||
@apply dark:text-dark-red;
|
||||
}
|
||||
.callout[datacallout="bug"] {
|
||||
@apply bg-light-red;
|
||||
@apply dark:bg-dark-red;
|
||||
@apply text-light-red;
|
||||
@apply dark:text-dark-red;
|
||||
}
|
||||
.callout[datacallout="example"] {
|
||||
@apply bg-light-purple;
|
||||
@apply dark:bg-dark-purple;
|
||||
@apply text-light-purple;
|
||||
@apply dark:text-dark-purple;
|
||||
}
|
||||
|
||||
.callout
|
||||
{
|
||||
@apply overflow-hidden;
|
||||
@apply my-4;
|
||||
@apply p-3;
|
||||
@apply ps-6;
|
||||
@apply bg-blend-lighten;
|
||||
@apply !bg-opacity-25;
|
||||
@apply border-l-4;
|
||||
@apply inline-block;
|
||||
@apply pe-8;
|
||||
}
|
||||
.callout-icon
|
||||
{
|
||||
@apply w-6;
|
||||
@apply h-6;
|
||||
@apply stroke-2;
|
||||
}
|
||||
.callout-title
|
||||
{
|
||||
@apply flex;
|
||||
@apply items-center;
|
||||
@apply gap-2;
|
||||
}
|
||||
.callout-title-inner
|
||||
{
|
||||
@apply inline-block;
|
||||
@apply font-bold;
|
||||
}
|
||||
.callout > p
|
||||
{
|
||||
@apply mt-2;
|
||||
@apply font-semibold;
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<h1 :id="id">
|
||||
<h1 :id="id" class="text-3xl font-semibold my-3 first:pt-0 pt-2">
|
||||
<slot />
|
||||
</h1>
|
||||
</template>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<h2 :id="id">
|
||||
<h2 :id="id" class="text-2xl font-semibold my-3 ms-1 first:pt-0 pt-2">
|
||||
<slot />
|
||||
</h2>
|
||||
</template>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<h3 :id="id">
|
||||
<h3 :id="id" class="text-xl font-semibold my-2 ms-4">
|
||||
<slot />
|
||||
</h3>
|
||||
</template>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<h4 :id="id">
|
||||
<h4 :id="id" class="text-lg font-semibold my-2 ms-4">
|
||||
<slot />
|
||||
</h4>
|
||||
</template>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<h5 :id="id">
|
||||
<h5 :id="id" class="text-base font-semibold my-1 ms-4">
|
||||
<slot />
|
||||
</h5>
|
||||
</template>
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
<template>
|
||||
<hr>
|
||||
<hr class="border-light-35 dark:border-dark-35 m-4">
|
||||
</template>
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
<template>
|
||||
<li><slot /></li>
|
||||
<li class="before:absolute before:top-2 before:left-0 before:inline-block before:w-2 before:h-2 before:rounded before:bg-light-40 dark:before:bg-dark-40 relative ps-4"><slot /></li>
|
||||
</template>
|
||||
|
||||
@@ -1,3 +1,12 @@
|
||||
<template>
|
||||
<p><slot /></p>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.text-comment
|
||||
{
|
||||
@apply text-light-50;
|
||||
@apply dark:text-dark-50;
|
||||
@apply text-sm;
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<table>
|
||||
<table class="mx-4 my-8 border-collapse border border-light-35 dark:border-dark-35">
|
||||
<slot />
|
||||
</table>
|
||||
</template>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<td>
|
||||
<td class="border border-light-35 dark:border-dark-35 py-1 px-2">
|
||||
<slot />
|
||||
</td>
|
||||
</template>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<th>
|
||||
<th class="border border-light-35 dark:border-dark-35 px-4 first:pt-0">
|
||||
<slot />
|
||||
</th>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user