marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-16 22:09:57 +02:00
Code Issues Packages Projects Releases Wiki Activity

update styling

Browse Source
This commit is contained in:
Steph
2025-02-12 16:00:28 -08:00
parent 72cf84cb40
commit ec0e3e4cd6
1 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/mermaid/src/docs/.vitepress/components/TopBar.vue
View File

@@ -117,20 +117,24 @@ let index = ref(Math.floor(Math.random() * taglines.length));
onMounted(() => { onMounted(() => {
setInterval(() => { setInterval(() => {
index.value = (index.value + 1) % taglines.length; index.value = (index.value + 1) % taglines.length;
}, 2_000); }, 5_000);
}); });
const currentDesign = computed(() => { const currentDesign = computed(() => {
const designMap: { [key: string]: string } = { const designMap: { [key: string]: string } = {
'1': '#f56565', '1': 'bg-gradient-to-r from-[#bd34fe] to-[#ff3670] ',
'2': '#4299e1', '2': 'bg-[#2E2183]',
}; };
return designMap[taglines[index.value].design]; return designMap[taglines[index.value].design];
}); });
const buttonClass = computed(() => {
return taglines[index.value].design === '1' ? 'bg-[#2E2183]' : 'bg-[#E0095F]';
});
</script> </script>
<template> <template>
<div :style="{ background: currentDesign }" class="mb-4 w-full top-bar flex p-1"> <div :class="[currentDesign]" class="mb-4 w-full top-bar flex p-2">
<p class="w-full tracking-wide fade-text"> <p class="w-full tracking-wide fade-text">
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
<a <a
@@ -140,7 +144,7 @@ const currentDesign = computed(() => {
class="unstyled flex justify-center items-center gap-4 text-white tracking-wide plausible-event-name=bannerClick" class="unstyled flex justify-center items-center gap-4 text-white tracking-wide plausible-event-name=bannerClick"
> >
<span class="font-semibold">{{ taglines[index].label }}</span> <span class="font-semibold">{{ taglines[index].label }}</span>
<button class="rounded bg-[#111113] p-1 px-2 text-sm font-semibold tracking-wide"> <button :class="['rounded-lg p-2 px-4 font-semibold tracking-wide', buttonClass]">
Try now Try now
</button> </button>
</a> </a>