chore/visual-fidelity-fixes #2
1 changed files with 25 additions and 14 deletions
|
|
@ -1,18 +1,14 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div class="series-badge p-4">
|
||||||
class="series-badge p-4 bg-guild-800/50 dark:bg-guild-700/30 rounded-xl border border-guild-600 dark:border-guild-600"
|
|
||||||
>
|
|
||||||
<div class="flex items-start justify-between gap-6">
|
<div class="flex items-start justify-between gap-6">
|
||||||
<div class="flex-1 min-w-0">
|
<div class="flex-1 min-w-0">
|
||||||
<div class="flex flex-wrap items-center gap-2 mb-2">
|
<div class="flex flex-wrap items-center gap-2 mb-2">
|
||||||
<span
|
<span class="series-badge__label text-sm font-semibold">
|
||||||
class="series-badge__label text-sm font-semibold text-guild-300 dark:text-guild-300"
|
|
||||||
>
|
|
||||||
Part of a Series
|
Part of a Series
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
v-if="totalEvents"
|
v-if="totalEvents"
|
||||||
class="series-badge__count inline-flex items-center px-2 py-0.5 rounded-md bg-guild-700/50 dark:bg-guild-600/50 text-sm font-medium text-guild-200 dark:text-guild-200"
|
class="series-badge__count inline-flex items-center px-2 py-0.5 text-sm font-medium"
|
||||||
>
|
>
|
||||||
<template v-if="position">
|
<template v-if="position">
|
||||||
Event {{ position }} of {{ totalEvents }}
|
Event {{ position }} of {{ totalEvents }}
|
||||||
|
|
@ -20,15 +16,10 @@
|
||||||
<template v-else> {{ totalEvents }} events in series </template>
|
<template v-else> {{ totalEvents }} events in series </template>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<h3
|
<h3 class="series-badge__title text-lg font-semibold mb-2">
|
||||||
class="series-badge__title text-lg font-semibold text-guild-100 dark:text-guild-100 mb-2"
|
|
||||||
>
|
|
||||||
{{ title }}
|
{{ title }}
|
||||||
</h3>
|
</h3>
|
||||||
<p
|
<p v-if="description" class="series-badge__description text-sm">
|
||||||
v-if="description"
|
|
||||||
class="series-badge__description text-sm text-guild-300 dark:text-guild-300"
|
|
||||||
>
|
|
||||||
{{ description }}
|
{{ description }}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -68,3 +59,23 @@ const props = defineProps({
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.series-badge {
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px dashed var(--border);
|
||||||
|
}
|
||||||
|
.series-badge__label {
|
||||||
|
color: var(--text-dim);
|
||||||
|
}
|
||||||
|
.series-badge__count {
|
||||||
|
background: color-mix(in srgb, var(--candle) 12%, transparent);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
.series-badge__title {
|
||||||
|
color: var(--text-bright);
|
||||||
|
}
|
||||||
|
.series-badge__description {
|
||||||
|
color: var(--text-dim);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue