feat: enhance UI components with consistent background styling for improved visibility

This commit is contained in:
2025-09-04 13:25:51 +02:00
parent 81814b507e
commit b40546ed9f
8 changed files with 36 additions and 8 deletions

View File

@@ -93,7 +93,7 @@ const getActivity = computed(() => {
</div>
</div>
<ClientOnly>
<UCard v-if="getActivity" variant="outline" class="md:max-w-1/2 m-1 shadow-sm" :ui="{ body: 'flex gap-8 items-center' }">
<UCard v-if="getActivity" variant="outline" class="md:max-w-1/2 m-1 shadow-sm bg-white dark:bg-neutral-900" :ui="{ body: 'flex gap-8 items-center' }">
<UIcon
:name="IDEs.find(ide => ide.name === getActivity!.name)!.icon"
size="64"

View File

@@ -19,7 +19,7 @@ const { t } = useI18n()
variant="subtle"
color="neutral"
target="_blank"
class="m-1 shadow-sm"
class="m-1 shadow-sm bg-white dark:bg-neutral-900"
:href="social.to"
:aria-label="social.label"
/>

View File

@@ -19,7 +19,7 @@ const { changeLocale } = useLanguage()
</ul>
</div>
<ClientOnly>
<UCard variant="outline" class="md:max-w-1/2 m-1 shadow-sm" :ui="{ body: 'flex justify-between items-center gap-2' }">
<UCard variant="outline" class="md:max-w-1/2 m-1 shadow-sm bg-white dark:bg-neutral-900" :ui="{ body: 'flex justify-between items-center gap-2' }">
<p class="block">
{{ t('tool.language.change') }}
</p>

View File

@@ -15,7 +15,7 @@ const date = (date: string) => useDateFormat(new Date(date), 'DD MMMM YYYY', { l
<div v-if="projects" class="m-1 my-4 flex flex-col gap-4">
<div v-for="project in projects" :key="project.id">
<NuxtLink :to="`/projects/${project.slug}`">
<UCard variant="subtle" class="shadow-md">
<UCard variant="subtle" class="shadow-sm bg-white dark:bg-neutral-900">
<h1 class="text-xl font-medium">
{{ project.title }}
</h1>

View File

@@ -23,7 +23,7 @@ const { t, locale } = useI18n()
:label="skill.name"
variant="subtle"
color="neutral"
class="shadow-md"
class="shadow-sm bg-white dark:bg-neutral-900"
:icon="skill.icon"
/>
</div>

View File

@@ -17,7 +17,7 @@ const { dark, toggleDark } = useTheme()
</ul>
</div>
<ClientOnly>
<UCard variant="outline" class="md:max-w-1/2 m-1 shadow-sm" :ui="{ body: 'flex justify-between items-center' }">
<UCard variant="outline" class="md:max-w-1/2 m-1 shadow-sm bg-white dark:bg-neutral-900" :ui="{ body: 'flex justify-between items-center' }">
<div class="flex items-center gap-2">
<UIcon v-if="dark" name="i-ph-moon-duotone" size="24" />
<UIcon v-else name="i-ph-sun-duotone" size="24" />

View File

@@ -7,7 +7,7 @@ const { data: weather } = await useAsyncData<Weather>('weather', () =>
</script>
<template>
<UCard v-if="weather" variant="outline" class="md:max-w-2/3 m-1 shadow-sm">
<UCard v-if="weather" variant="outline" class="md:max-w-2/3 m-1 shadow-sm bg-white dark:bg-neutral-900">
<template #header>
<div class="flex gap-4 items-center">
<UIcon name="i-ph-cloud-duotone" size="24" />