Peaceultime/obsidian-visualiser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Progressing on the CSS rework

Browse Source
This commit is contained in:
Peaceultime
2024-08-28 18:14:19 +02:00
parent d1450a1c99
commit c694d28982
26 changed files with 386 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
components/prose/ProseA.vue
View File

@@ -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>

161
components/prose/ProseBlockquote.vue
View File

@@ -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>

2
components/prose/ProseH1.vue
View File

@@ -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>

2
components/prose/ProseH2.vue
View File

@@ -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>

2
components/prose/ProseH3.vue
View File

@@ -1,5 +1,5 @@
<template>
<h3 :id="id">
<h3 :id="id" class="text-xl font-semibold my-2 ms-4">
<slot />
</h3>
</template>

2
components/prose/ProseH4.vue
View File

@@ -1,5 +1,5 @@
<template>
<h4 :id="id">
<h4 :id="id" class="text-lg font-semibold my-2 ms-4">
<slot />
</h4>
</template>

2
components/prose/ProseH5.vue
View File

@@ -1,5 +1,5 @@
<template>
<h5 :id="id">
<h5 :id="id" class="text-base font-semibold my-1 ms-4">
<slot />
</h5>
</template>

2
components/prose/ProseHr.vue
View File

@@ -1,3 +1,3 @@
<template>
<hr>
<hr class="border-light-35 dark:border-dark-35 m-4">
</template>

2
components/prose/ProseLi.vue
View File

@@ -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>

9
components/prose/ProseP.vue
View File

@@ -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>

2
components/prose/ProseTable.vue
View File

@@ -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>

2
components/prose/ProseTd.vue
View File

@@ -1,5 +1,5 @@
<template>
<td>
<td class="border border-light-35 dark:border-dark-35 py-1 px-2">
<slot />
</td>
</template>

2
components/prose/ProseTh.vue
View File

@@ -1,5 +1,5 @@
<template>
<th>
<th class="border border-light-35 dark:border-dark-35 px-4 first:pt-0">
<slot />
</th>
</template>