teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

refactor: theming

Browse source
This commit is contained in:
Anthony Fu 2022-11-23 10:16:31 +08:00
parent 9a77c7da2a
commit a4d235b6fe
22 changed files with 351 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
app.vue
View file

@ -7,6 +7,9 @@ useHead({
},
],
})
// eslint-disable-next-line no-unused-expressions
isDark.value
</script>
<template>
@ -24,7 +27,10 @@ html, body , #__nuxt{
}
html.dark {
background: #222;
color: white;
color-scheme: dark;
}
html {
--at-apply: bg-base text-base;
}
</style>

2
components/account/AccountHeader.vue
View file

@ -13,7 +13,7 @@ const createdAt = $computed(() => {
<template>
<div flex flex-col>
<div border="b border">
<div border="b base">
<img h-50 w-full object-cover :src="account.header">
</div>
<div p3 style="margin-top:-3.5rem;" flex flex-col gap-6>

4
components/account/AccountPaginator.client.vue
View file

@ -9,12 +9,12 @@ const { paginator } = defineProps<{
<template>
<CommonPaginator
:paginator="paginator"
border="t border"
border="t base"
>
<template #default="{ item }">
<AccountCard
:account="item"
border="b border" py-1
border="b base" py-1
/>
</template>
</CommonPaginator>

17
components/common/Dropdown.vue Normal file
View file

@ -0,0 +1,17 @@
<script setup lang="ts">
const { modelValue } = defineModel<{
modelValue: boolean
}>()
const el = ref<HTMLDivElement>()
onClickOutside(el, () => {
modelValue.value = false
})
</script>
<template>
<div ref="el" absolute bg-base>
<slot />
</div>
</template>

4
components/conversation/ConversationPaginator.client.vue
View file

@ -9,12 +9,12 @@ const { paginator } = defineProps<{
<template>
<CommonPaginator
:paginator="paginator"
border="t border"
border="t base"
>
<template #default="{ item }">
<ConversationCard
:conversation="item"
border="b border" py-1
border="b base" py-1
/>
</template>
</CommonPaginator>

7
components/nav/NavFooter.vue
View file

@ -6,8 +6,9 @@ const buildTimeAgo = useTimeAgo(buildTime)
</script>
<template>
<div p4 text-sm op25>
A Mastodon client by Nuxt<br>
Built <span :title="buildTime">{{ buildTimeAgo }}</span> · <a href="https://github.com/antfu/nuxtodon" target="_blank">GitHub</a>
<div p4 text-sm op25 flex="~ col">
<button i-ri-sun-line dark:i-ri-moon-line text-lg mb4 @click="toggleDark()" />
<div>A Mastodon client by Nuxt</div>
<div>Built <span :title="buildTime">{{ buildTimeAgo }}</span> · <a href="https://github.com/antfu/nuxtodon" target="_blank">GitHub</a></div>
</div>
</template>

4
components/notification/NotificationPaginator.client.vue
View file

@ -9,12 +9,12 @@ const { paginator } = defineProps<{
<template>
<CommonPaginator
:paginator="paginator"
border="t border"
border="t base"
>
<template #default="{ item }">
<NotificationCard
:notification="item"
border="t border" pt-4
border="t base" pt-4
/>
</template>
</CommonPaginator>

2
components/publish/PublishWidget.client.vue
View file

@ -51,7 +51,7 @@ onUnmounted(() => {
v-model="draft.status"
:placeholder="placeholder"
p2 border-rounded w-full h-40
bg-gray:10 outline-none border="~ border"
bg-gray:10 outline-none border="~ base"
/>
<div flex justify-end>
<button

4
components/status/StatusAttachment.vue
View file

@ -31,7 +31,7 @@ const aspectRatio = computed(() => {
:style="{
aspectRatio,
}"
border="~ border"
border="~ base"
object-cover rounded-lg
/>
</template>
@ -39,7 +39,7 @@ const aspectRatio = computed(() => {
<video
:poster="attachment.previewUrl"
controls
border="~ border"
border="~ base"
object-cover
:style="{
aspectRatio,

2
components/status/StatusDetails.vue
View file

@ -29,6 +29,6 @@ const date = computed(() => formatter.format(new Date(status.createdAt)))
{{ date }} · {{ status.application?.name || 'Unknown client' }}
</span>
</div>
<StatusActions :status="status" border="t border" pt-2 />
<StatusActions :status="status" border="t base" pt-2 />
</div>
</template>

2
components/timeline/TimelineList.vue
View file

@ -8,6 +8,6 @@ defineProps<{
<template>
<template v-for="status of timelines" :key="status.id">
<StatusCard :status="status" border="t border" pt-4 />
<StatusCard :status="status" border="t base" pt-4 />
</template>
</template>

4
components/timeline/TimelinePaginator.client.vue
View file

@ -9,12 +9,12 @@ const { paginator } = defineProps<{
<template>
<CommonPaginator
:paginator="paginator"
border="t border"
border="t base"
>
<template #default="{ item }">
<StatusCard
:status="item"
border="b border" py-3
border="b base" py-3
/>
</template>
</CommonPaginator>

2
composables/dark.ts Normal file
View file

@ -0,0 +1,2 @@
export const isDark = useDark()
export const toggleDark = useToggle(isDark)

4
layouts/default.vue
View file

@ -9,14 +9,14 @@
</div>
</div>
<div class="lg:w-3/4" flex>
<div class="w-full md:w-2/3" border="l r border" min-h-screen>
<div class="w-full md:w-2/3" border="l r base" min-h-screen>
<slot />
</div>
<div hidden md:flex="~ col" class="w-1/3">
<div fixed>
<slot name="right">
<NavTitle p5 />
<NavSide border="y border" py8 />
<NavSide border="y base" py8 />
<div flex-auto />
<NavFooter />
</slot>

11
nuxt.config.ts
View file

@ -1,10 +1,11 @@
import VueMacros from 'unplugin-vue-macros/vite'
export default defineNuxtConfig({
ssr: false,
modules: [
'@vueuse/nuxt',
'@unocss/nuxt',
'@pinia/nuxt',
'@nuxtjs/color-mode',
],
experimental: {
reactivityTransform: true,
@ -15,9 +16,6 @@ export default defineNuxtConfig({
'~/styles/vars.css',
'~/styles/global.css',
],
colorMode: {
classSuffix: '',
},
alias: {
querystring: 'rollup-plugin-node-polyfills/polyfills/qs',
},
@ -28,6 +26,11 @@ export default defineNuxtConfig({
build: {
target: 'esnext',
},
plugins: [
VueMacros({
defineModel: true,
}),
],
},
postcss: {
plugins: {

4
package.json
View file

@ -22,6 +22,7 @@
"@types/fs-extra": "^9.0.13",
"@types/sanitize-html": "^2.6.2",
"@unocss/nuxt": "^0.46.5",
"@vue-macros/volar": "^0.5.3",
"@vueuse/nuxt": "^9.5.0",
"blurhash": "^2.0.4",
"eslint": "^8.27.0",
@ -35,6 +36,7 @@
"rollup-plugin-node-polyfills": "^0.2.1",
"sanitize-html": "^2.7.3",
"typescript": "^4.9.3",
"ufo": "^1.0.0"
"ufo": "^1.0.0",
"unplugin-vue-macros": "^0.16.4"
}
}

8
pages/@[user]/[post].vue
View file

@ -11,10 +11,10 @@ const { data: context } = await useAsyncData(`${id}-context`, () => masto.status
<template>
<template v-if="status">
<template v-for="comment of context?.ancestors" :key="comment.id">
<StatusCard :status="comment" border="t border" pt-4 />
<StatusCard :status="comment" border="t base" pt-4 />
</template>
<StatusDetails :status="status" border="t border" pt-4 />
<div v-if="currentUser" border="t border" p6 flex gap-4>
<StatusDetails :status="status" border="t base" pt-4 />
<div v-if="currentUser" border="t base" p6 flex gap-4>
<AccountAvatar :account="currentUser.account" w-10 h-10 />
<PublishWidget
w-full
@ -25,7 +25,7 @@ const { data: context } = await useAsyncData(`${id}-context`, () => masto.status
</div>
<template v-for="comment of context?.descendants" :key="comment.id">
<StatusCard :status="comment" border="t border" pt-4 />
<StatusCard :status="comment" border="t base" pt-4 />
</template>
</template>

262
pnpm-lock.yaml
View file

@ -11,6 +11,7 @@ specifiers:
'@types/fs-extra': ^9.0.13
'@types/sanitize-html': ^2.6.2
'@unocss/nuxt': ^0.46.5
'@vue-macros/volar': ^0.5.3
'@vueuse/nuxt': ^9.5.0
blurhash: ^2.0.4
eslint: ^8.27.0
@ -25,6 +26,7 @@ specifiers:
sanitize-html: ^2.7.3
typescript: ^4.9.3
ufo: ^1.0.0
unplugin-vue-macros: ^0.16.4
devDependencies:
'@antfu/eslint-config': 0.30.1_e3uo4sehh4zr4i6m57mkkxxv7y
@ -37,6 +39,7 @@ devDependencies:
'@types/fs-extra': 9.0.13
'@types/sanitize-html': 2.6.2
'@unocss/nuxt': 0.46.5
'@vue-macros/volar': 0.5.3
'@vueuse/nuxt': 9.5.0_nuxt@3.0.0
blurhash: 2.0.4
eslint: 8.27.0
@ -51,6 +54,7 @@ devDependencies:
sanitize-html: 2.7.3
typescript: 4.9.3
ufo: 1.0.0
unplugin-vue-macros: 0.16.4
packages:
@ -162,6 +166,10 @@ packages:
resolution: {integrity: sha512-CQkeV+oJxUazwjlHD0/3ZD08QWKuGQkhnrKo3e6ly5pd48VUpXbb77q0xMU4+vc2CkJnDS02Eq/M9ugyX20XZA==}
dev: true
/@antfu/utils/0.6.3:
resolution: {integrity: sha512-sEYpyyKUPOew9QsXZ8feRVMzW6DWLviwOl+/ap06UQW02A8Srbc95CPHVm4eUbiBzBgD46eyIT+przv//KSSlQ==}
dev: true
/@babel/code-frame/7.18.6:
resolution: {integrity: sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==}
engines: {node: '>=6.9.0'}
@ -1671,6 +1679,14 @@ packages:
- supports-color
dev: true
/@vitejs/plugin-vue/3.2.0:
resolution: {integrity: sha512-E0tnaL4fr+qkdCNxJ+Xd0yM31UwMkQje76fsDVBBUCoGOUPexu2VDUYHL8P4CwV+zMvWw6nlRw19OnRKmYAJpw==}
engines: {node: ^14.18.0 || >=16.0.0}
peerDependencies:
vite: ^3.0.0
vue: ^3.2.25
dev: true
/@vitejs/plugin-vue/3.2.0_vite@3.2.4+vue@3.2.45:
resolution: {integrity: sha512-E0tnaL4fr+qkdCNxJ+Xd0yM31UwMkQje76fsDVBBUCoGOUPexu2VDUYHL8P4CwV+zMvWw6nlRw19OnRKmYAJpw==}
engines: {node: ^14.18.0 || >=16.0.0}
@ -1682,6 +1698,180 @@ packages:
vue: 3.2.45
dev: true
/@volar/language-core/1.0.9:
resolution: {integrity: sha512-5Fty3slLet6svXiJw2YxhYeo6c7wFdtILrql5bZymYLM+HbiZtJbryW1YnUEKAP7MO9Mbeh+TNH4Z0HFxHgIqw==}
dependencies:
'@volar/source-map': 1.0.9
'@vue/reactivity': 3.2.45
muggle-string: 0.1.0
dev: true
/@volar/source-map/1.0.9:
resolution: {integrity: sha512-fazB/vy5ZEJ3yKx4fabJyGNI3CBkdLkfEIRVu6+1P3VixK0Mn+eqyUIkLBrzGYaeFM3GybhCLCvsVdNz0Fu/CQ==}
dependencies:
muggle-string: 0.1.0
dev: true
/@vue-macros/api/0.2.0:
resolution: {integrity: sha512-E0rhhszd3MSE8l+A78gj9ONs4lsqOLHpONNzrc7H2nlPhEDsp4ZyQt+A9rRfxX+BTeLYfq64mli2qRV0tixiaw==}
engines: {node: '>=14.19.0'}
dependencies:
'@babel/types': 7.20.2
'@vue-macros/common': 0.13.4
dev: true
/@vue-macros/better-define/0.2.0:
resolution: {integrity: sha512-hcYGpfGLGBw+32jQyAwJU4bd1eE95cD7/aqv9Ov86LJFR5nZ/d7P/Fh1HJBE4KUxC9vJa2ZtdkdiV83n6NADYA==}
engines: {node: '>=14.19.0'}
dependencies:
'@rollup/pluginutils': 4.2.1
'@vue-macros/api': 0.2.0
'@vue-macros/common': 0.13.4
unplugin: 1.0.0
dev: true
/@vue-macros/common/0.13.4:
resolution: {integrity: sha512-mQooO33XcY4kQyKBrbGfdIPPsYhpcfmH75SQnXx2vNsNLSNvhLuDaIIV0fhMJ0HV5Z02V9Ka1gx7v1g5bk9Q0A==}
engines: {node: '>=14.19.0'}
dependencies:
'@babel/types': 7.20.2
'@vue/compiler-sfc': 3.2.45
magic-string: 0.26.7
dev: true
/@vue-macros/define-model/0.14.1:
resolution: {integrity: sha512-Mwg/+OGDTEzaGyGXcAUJ0ZfEmgXKEVeWk3zVR6wC7l0f8OOBZ4lb1gWq9NJT+D1Xxy34mdNmkmRVoevW5kN0iQ==}
engines: {node: '>=14.19.0'}
peerDependencies:
'@vueuse/core': ^9.0.0
peerDependenciesMeta:
'@vueuse/core':
optional: true
dependencies:
'@rollup/pluginutils': 4.2.1
'@vue-macros/common': 0.13.4
ast-walker-scope: 0.3.0
unplugin: 1.0.0
dev: true
/@vue-macros/define-props/0.0.3:
resolution: {integrity: sha512-GAiALWSrIogwdjbIe60Hi4CSvWFmZG7KySK8JBf7lszWNgoSirj/NKzmJOaHY0/I217tfq4Ew/brbdvcEhCikg==}
engines: {node: '>=14.19.0'}
peerDependencies:
vue: ^3.2.25
dependencies:
'@rollup/pluginutils': 4.2.1
'@vue-macros/common': 0.13.4
unplugin: 1.0.0
dev: true
/@vue-macros/define-render/0.13.9:
resolution: {integrity: sha512-TD4/vpVagRiOELKMzbT8VpLd0vTgYcjLzO/GVmtXLQ7LxnAgOQCTdmoQNfCp4B2Jx0KgKINgZJIoHV2c9n84pA==}
engines: {node: '>=14.19.0'}
peerDependencies:
vue: ^2.7.0 || ^3.0.0
dependencies:
'@rollup/pluginutils': 4.2.1
'@vue-macros/common': 0.13.4
unplugin: 1.0.0
dev: true
/@vue-macros/define-slots/0.0.6:
resolution: {integrity: sha512-pK4P/oUjcrP/Rr5clsV2eZ53OJ3QlU2fZlnn91w++L0+lio+0M06ptr/IkHNVLNQ9U9Z43MkjHkMLX8Df8BknA==}
engines: {node: '>=14.19.0'}
peerDependencies:
vue: ^2.7.0 || ^3.0.0
dependencies:
'@rollup/pluginutils': 4.2.1
'@vue-macros/common': 0.13.4
unplugin: 1.0.0
dev: true
/@vue-macros/hoist-static/0.12.8:
resolution: {integrity: sha512-aSjTBntS/DhQvhyvbSluXwVtrw1WRAxcGjIJTUrgXLyagurIt0KQR8B2ut4ulnMzRaxD8TYmhoWmnzkSNUpXdw==}
engines: {node: '>=14.19.0'}
dependencies:
'@rollup/pluginutils': 4.2.1
'@vue-macros/common': 0.13.4
unplugin: 1.0.0
dev: true
/@vue-macros/named-template/0.0.6:
resolution: {integrity: sha512-nEoutSYbwu7QC+uWcs90rD28erP6xZ0aU4uYnrxTUnVcbga9xMchxcs3MgI/2ax6dz/EXf1f1utYXXpGgLi+Tw==}
engines: {node: '>=14.19.0'}
dependencies:
'@rollup/pluginutils': 4.2.1
'@vitejs/plugin-vue': 3.2.0
'@vue-macros/common': 0.13.4
'@vue/compiler-dom': 3.2.45
unplugin: 1.0.0
unplugin-combine: 0.2.8
transitivePeerDependencies:
- esbuild
- rollup
- vite
- vue
- webpack
dev: true
/@vue-macros/setup-component/0.12.8:
resolution: {integrity: sha512-2tRMl8l8OYMpIRYsZyAZfH0dNT7CONMTcmdGEffJb5GvK8XOmdgGk7NFUhaQg3EEnk1SUq1Kdcx+gyH/a0qE4A==}
engines: {node: '>=14.19.0'}
dependencies:
'@rollup/pluginutils': 4.2.1
'@vue-macros/common': 0.13.4
unplugin: 1.0.0
unplugin-combine: 0.2.8
transitivePeerDependencies:
- esbuild
- rollup
- vite
- webpack
dev: true
/@vue-macros/setup-sfc/0.12.8:
resolution: {integrity: sha512-eOQxlY53GD/WkJrDHpDvHecWQ70Cw9aSYwS9eT1dQ9vWJVeJ/2R96z09GfYKz6cr9T00OPeZjftU5sC1FO+3xA==}
engines: {node: '>=14.19.0'}
dependencies:
'@rollup/pluginutils': 4.2.1
'@vue-macros/common': 0.13.4
unplugin: 1.0.0
dev: true
/@vue-macros/short-emits/0.12.9:
resolution: {integrity: sha512-DrvdyMuiqSVLY26VJCLm5neVmqiAlEVbLAmdH9gORGDn2u+OsmyY9bb2T+04PGzBsu2F64XbJwi0GmXypdcLgQ==}
engines: {node: '>=14.19.0'}
dependencies:
'@rollup/pluginutils': 4.2.1
'@vue-macros/common': 0.13.4
unplugin: 1.0.0
dev: true
/@vue-macros/short-vmodel/0.3.8:
resolution: {integrity: sha512-S2MP0/ZusUWpnfCJ5J9lSaEhIbaGB9uxmsUI9liA+bFH5yqPG+DDw63tod2HLfthxk9hPQcz1YZR/ZEd3wUaRA==}
engines: {node: '>=14.19.0'}
dependencies:
'@vue-macros/common': 0.13.4
'@vue/compiler-core': 3.2.45
dev: true
/@vue-macros/volar/0.5.3:
resolution: {integrity: sha512-M0dBOZrOT2kGcay3+oDYdif4EepfmBU5bNVlnojTufTGAsmEtiS/CfqexCDH+zBxfjEpc9bqHVSYFxswPkxjpA==}
peerDependencies:
vue-tsc: ^1.0.9
peerDependenciesMeta:
vue-tsc:
optional: true
dependencies:
'@volar/language-core': 1.0.9
'@vue-macros/common': 0.13.4
'@vue-macros/define-props': 0.0.3
'@vue-macros/short-vmodel': 0.3.8
muggle-string: 0.1.0
transitivePeerDependencies:
- vue
dev: true
/@vue/babel-helper-vue-transform-on/1.0.2:
resolution: {integrity: sha512-hz4R8tS5jMn8lDq6iD+yWL6XNB699pGIVLk7WSJnn1dbpjaazsjZQkieJoRX6gW5zpYSCFqQ7jUquPNY65tQYA==}
dev: true
@ -2017,6 +2207,14 @@ packages:
es-shim-unscopables: 1.0.0
dev: true
/ast-walker-scope/0.3.0:
resolution: {integrity: sha512-bsOBv3jB+1kGaxwPHhkLiagS+75KfzEqtkNWvATgMGtXM6kJZG3PlG4fYQFMiHeLpoAkwc6G61w07+hEXx39aA==}
engines: {node: '>=14.19.0'}
dependencies:
'@babel/parser': 7.20.3
'@babel/types': 7.20.2
dev: true
/async-sema/3.1.1:
resolution: {integrity: sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==}
dev: true
@ -4917,6 +5115,10 @@ packages:
resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
dev: true
/muggle-string/0.1.0:
resolution: {integrity: sha512-Tr1knR3d2mKvvWthlk7202rywKbiOm4rVFLsfAaSIhJ6dt9o47W4S+JMtWhd/PW9Wrdew2/S2fSvhz3E2gkfEg==}
dev: true
/mute-stream/0.0.8:
resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==}
dev: true
@ -6933,6 +7135,66 @@ packages:
- vite
dev: true
/unplugin-combine/0.2.8:
resolution: {integrity: sha512-Z38AC/TEjXbVyZ5HjVqo+lADj0/dcfwWC0Z4y0LNhybJzJQwmcMxm+ZsqHY3faauj4YigmlRMdptR5JEW9RuLg==}
engines: {node: '>=14.19.0'}
peerDependencies:
esbuild: '>=0.13'
rollup: ^2.50.0
vite: ^2.3.0 || ^3.0.0
webpack: 4 || 5
peerDependenciesMeta:
esbuild:
optional: true
rollup:
optional: true
vite:
optional: true
webpack:
optional: true
dependencies:
'@antfu/utils': 0.6.3
unplugin: 0.10.2
dev: true
/unplugin-vue-define-options/0.12.8:
resolution: {integrity: sha512-/5NjICUI9Ick6LI31pc0jTh7DUdEBerLS3UKor3AanldLtqKWYd0lzjHjgg4JXUvuOEkpDf7e0f3jpqE362mKA==}
engines: {node: '>=14.19.0'}
dependencies:
'@rollup/pluginutils': 4.2.1
'@vue-macros/common': 0.13.4
ast-walker-scope: 0.3.0
unplugin: 1.0.0
dev: true
/unplugin-vue-macros/0.16.4:
resolution: {integrity: sha512-1dxQ/U4rZhf+LXP/7HSP2ycjCYQFCSB3QYu3zGPSiuN9M3yWjDkSTcXQcsFcdEvJGMbFWzKB/NJd4PnEqhQWOQ==}
engines: {node: '>=14.19.0'}
peerDependencies:
vue: ^2.7.0 || ^3.2.25
dependencies:
'@rollup/pluginutils': 4.2.1
'@vue-macros/better-define': 0.2.0
'@vue-macros/define-model': 0.14.1
'@vue-macros/define-props': 0.0.3
'@vue-macros/define-render': 0.13.9
'@vue-macros/define-slots': 0.0.6
'@vue-macros/hoist-static': 0.12.8
'@vue-macros/named-template': 0.0.6
'@vue-macros/setup-component': 0.12.8
'@vue-macros/setup-sfc': 0.12.8
'@vue-macros/short-emits': 0.12.9
local-pkg: 0.4.2
unplugin-combine: 0.2.8
unplugin-vue-define-options: 0.12.8
transitivePeerDependencies:
- '@vueuse/core'
- esbuild
- rollup
- vite
- webpack
dev: true
/unplugin/0.10.2:
resolution: {integrity: sha512-6rk7GUa4ICYjae5PrAllvcDeuT8pA9+j5J5EkxbMFaV+SalHhxZ7X2dohMzu6C3XzsMT+6jwR/+pwPNR3uK9MA==}
dependencies:

8
styles/global.css
View file

@ -1,5 +1,5 @@
* {
scrollbar-color: #5555 var(--color-border);
scrollbar-color: #5555 var(--c-border);
}
::-webkit-scrollbar {
@ -11,7 +11,7 @@
}
::-webkit-scrollbar-track {
background: var(--color-border);
background: var(--c-border);
border-radius: 1px;
}
@ -31,8 +31,8 @@ html {
.custom-emoji {
display: inline-block;
height: 1.2em;
width: 1.2em;
max-height: 1.2em;
max-width: 1.2em;
vertical-align: middle;
}

11
styles/vars.css
View file

@ -1,4 +1,11 @@
:root {
--color-primary: #53b3cb;
--color-border: #88888820;
--c-primary: #53b3cb;
--c-border: #88888820;
--c-bg-base: #fff;
--c-text-base: #222;
}
.dark {
--c-bg-base: #111;
--c-text-base: #fff;
}

10
tsconfig.json
View file

@ -1,6 +1,14 @@
{
"extends": "./.nuxt/tsconfig.json",
"compilerOptions": {
"strict": true
"types": [
"unplugin-vue-macros/macros-global"
]
},
"vueCompilerOptions": {
"plugins": [
"@vue-macros/volar/define-model",
"@vue-macros/volar/short-vmodel"
]
}
}

8
unocss.config.ts
View file

@ -11,6 +11,11 @@ import {
export default defineConfig({
shortcuts: [
{
'border-base': 'border-$c-border',
'bg-base': 'bg-$c-bg-base',
'text-base': 'text-$c-text-base',
},
],
presets: [
presetUno({
@ -35,8 +40,7 @@ export default defineConfig({
],
theme: {
colors: {
primary: 'var(--color-primary)',
border: 'var(--color-border)',
primary: 'var(--c-primary)',
},
},
})