valaxy-theme-yun 0.28.1 → 0.28.2

package/App.vue

@@ -7,6 +7,8 @@ import { useRoute } from 'vue-router'
 import { useThemeConfig } from './composables'
 import { useYunAppStore } from './stores'
 
+const isDev = import.meta.env.DEV
+
 const appStore = useAppStore()
 
 // Use a safe default for SSR; real themeColor is applied after mount
@@ -60,7 +62,7 @@ onMounted(() => {
 <template>
   <TooltipProvider>
     <YunStratoApp v-if="yun.isStrato" />
-    <ValaxyDebug />
+    <ValaxyDebug v-if="isDev" />
 
     <YunPageHeaderGradient />
     <YunNavMenu />

package/README.md

@@ -8,7 +8,9 @@ Theme-Yun<sup><em>(vue)</em></sup>
 
 ## Usage
 
-See [Docs](./docs/README.md).
+📖 Full documentation: [valaxy.site/themes/yun](https://valaxy.site/themes/yun)
+
+See also [local docs](./docs/README.md).
 
 ### Development
 

package/components/YunAside.vue

@@ -57,7 +57,6 @@ const asideEnabled = computed(() => fm.value.aside !== false)
   bottom: 0;
   z-index: var(--yun-z-aside);
   width: 0;
-  max-height: 100vh;
   transform: translateX(100%);
   transition: all var(--va-transition-duration-fast) map.get($cubic-bezier, 'ease-in-out');
   max-height: calc(100vh - var(--yun-margin-top));

package/components/YunDropdownMenu.vue

@@ -77,6 +77,7 @@ defineSlots<{
     opacity: 0;
     transform: translateY(-4px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);

package/components/YunGoDown.vue

@@ -24,7 +24,7 @@ import { goDown } from '../utils'
   transition: color var(--va-transition-duration);
 
   &:hover {
-    color: rgba(var(--va-c-primary-rgb), 0.6);
+    color: rgb(var(--va-c-primary-rgb), 0.6);
   }
 }
 

package/components/YunLocalSearch.vue

@@ -0,0 +1,113 @@
+<script lang="ts" setup>
+import { isClient, useScrollLock } from '@vueuse/core'
+import { nextTick, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps<{
+  open: boolean
+}>()
+const emit = defineEmits(['close'])
+
+const isLocked = useScrollLock(isClient ? document.documentElement : null)
+const { t } = useI18n()
+
+const searchInputRef = ref<HTMLInputElement>()
+
+watch(() => props.open, (val) => {
+  if (val) {
+    nextTick(() => {
+      searchInputRef.value?.focus()
+    })
+  }
+})
+</script>
+
+<template>
+  <Transition
+    name="fade"
+    @enter="isLocked = true"
+    @after-leave="isLocked = false"
+  >
+    <div
+      v-if="open"
+      class="yun-popup yun-search-popup yun-local-search flex-center pointer-events-auto" flex="col"
+      justify="start"
+      pt-12
+    >
+      <ValaxyLocalSearch :open="open" @close="emit('close')">
+        <template #default="{ query, results, loading, selectedIndex, updateQuery, navigate, onKeydown, getPageTitle, getSectionTitle }">
+          <div class="yun-search-input-container flex-center" w="full">
+            <input
+              ref="searchInputRef"
+              :value="query"
+              class="yun-search-input"
+              :placeholder="t('search.placeholder')"
+              @input="updateQuery(($event.target as HTMLInputElement).value)"
+              @keydown="onKeydown"
+            >
+          </div>
+          <div v-if="loading" class="flex-center" w="full" py="4">
+            {{ t('search.loading') }}
+          </div>
+          <div v-if="query" class="flex-center" w="full" py="4">
+            {{ t('search.hits', results.length || 0) }}
+          </div>
+          <div v-if="results.length > 0" overflow="auto" flex="~" w="full" class="justify-center">
+            <div class="yun-local-result-container max-w-3xl" flex="~ col" w="full">
+              <a
+                v-for="(result, index) in results" :key="result.id"
+                class="yun-local-result-item text-left p-2 cursor-pointer"
+                :class="{ 'yun-local-result-active': index === selectedIndex }"
+                href="javascript:void(0)"
+                @click="navigate(result)"
+              >
+                <div class="yun-local-result-titles" text="xs" font="light" opacity="60">
+                  {{ getPageTitle(result.id) }}
+                  <template v-if="result.titles.length > 0">
+                    <span v-for="(title, i) in result.titles" :key="i">
+                      &rsaquo; {{ title }}
+                    </span>
+                  </template>
+                </div>
+                <h3 font="medium">
+                  {{ result.title }}
+                </h3>
+                <div class="flex justify-between op-50" text-xs mt="1" font="light">
+                  <span>{{ getSectionTitle(result) }}</span>
+                  <span flex="~ gap-1">
+                    <span>Score:</span>
+                    <div class="text-right w-8">{{ result.score.toFixed(1) }}</div>
+                  </span>
+                </div>
+              </a>
+
+              <div class="flex op-30 justify-end text-xs p-4">
+                Search by MiniSearch
+              </div>
+            </div>
+          </div>
+        </template>
+      </ValaxyLocalSearch>
+    </div>
+  </Transition>
+</template>
+
+<style lang="scss">
+.yun-local-search {
+  .yun-local-result-item {
+    cursor: pointer;
+    border-top: 1px dashed #ccc;
+    color: var(--va-c-text);
+
+    &:hover,
+    &.yun-local-result-active {
+      color: var(--va-c-bg);
+      background-color: var(--va-c-text-dark);
+    }
+  }
+
+  .yun-local-result-titles {
+    margin-bottom: 0.25rem;
+  }
+}
+</style>

package/components/YunPostCard.vue

@@ -18,7 +18,7 @@ const postCollections = usePostCollections(computed(() => props.post.path || '')
 
 const gradientClasses = ref('bg-gradient-to-r gradient-text from-$va-c-primary to-$va-c-primary-lighter')
 const postTitleClass = computed(() => {
-  if (color) {
+  if (color.value) {
     return ''
   }
   return props.post.postTitleClass || gradientClasses.value
@@ -127,6 +127,7 @@ function guardedNavigate(e: Event, navigate: () => void) {
 .post-card-link {
   text-decoration: none;
   color: inherit;
+
   // max-w-$yun-post-card-max-width
   max-width: calc(var(--yun-post-card-max-width) + 2rem);
 

package/components/YunPostCollapse.vue

@@ -80,7 +80,7 @@ const sortedYears = computed(() => {
 <style lang="scss">
 .post-collapse {
   .collection-title {
-    border-bottom: 2px solid rgba(var(--va-c-primary-rgb), 0.6);
+    border-bottom: 2px solid rgb(var(--va-c-primary-rgb), 0.6);
 
     &::before {
       content: '';
@@ -88,7 +88,7 @@ const sortedYears = computed(() => {
       top: 50%;
       width: 2px;
       height: 50%;
-      background: rgba(var(--va-c-primary-rgb), 0.3);
+      background: rgb(var(--va-c-primary-rgb), 0.3);
     }
 
     .archive-year {

package/components/YunPostCollapseItem.vue

@@ -84,7 +84,7 @@ const { $tO } = useValaxyI18n()
       left: 0;
       width: 0;
       height: 1px;
-      background-color: rgba(var(--va-c-primary-rgb), 0.3);
+      background-color: rgb(var(--va-c-primary-rgb), 0.3);
       transition: width 800ms map.get($cubic-bezier, 'ease-in');
     }
 
@@ -127,7 +127,7 @@ const { $tO } = useValaxyI18n()
       position: absolute;
       width: 2px;
       height: 0;
-      background: rgba(var(--va-c-primary-rgb), 0.3);
+      background: rgb(var(--va-c-primary-rgb), 0.3);
       transition: height 600ms map.get($cubic-bezier, 'ease-in');
     }
 

package/components/YunPostMeta.vue

@@ -60,7 +60,7 @@ const siteConfig = useSiteConfig()
 
 <style>
 /* Use CSS media query for mobile layout instead of JS isMobile to avoid hydration mismatch */
-@media (max-width: 768px) {
+@media (width <= 768px) {
   .post-meta {
     flex-direction: column;
     gap: 0.5rem !important;

package/components/YunPostNav.vue

@@ -45,8 +45,8 @@ const nextTitle = useLocaleTitle(next)
     transition: var(--va-transition-duration-moderate);
 
     &:hover {
-      background-color: rgba(var(--va-c-primary-rgb), 0.1);
-      box-shadow: 0 0 15px rgba(black, 0.1);
+      background-color: rgb(var(--va-c-primary-rgb), 0.1);
+      box-shadow: 0 0 15px rgb(black, 0.1);
     }
   }
 

package/components/YunSay.vue

@@ -70,6 +70,7 @@ onMounted(() => {
   font-family: var(--va-font-serif);
   font-weight: bold;
   padding: 0.5rem;
+
   // border-top: var(--va-border-width) solid var(--va-c-text-light);
   border-bottom: var(--va-border-width) solid var(--va-c-text-light);
 

package/components/YunSearchTrigger.vue

@@ -7,6 +7,7 @@ const siteConfig = useSiteConfig()
 
 const isAlgolia = computed(() => siteConfig.value.search.provider === 'algolia')
 const isFuse = computed(() => siteConfig.value.search.provider === 'fuse')
+const isLocal = computed(() => siteConfig.value.search.provider === 'local')
 
 const open = ref(false)
 
@@ -17,7 +18,7 @@ function togglePopup() {
 const algoliaRef = ref()
 onMounted(() => {
   // algolia has its own hotkey handling in YunAlgoliaSearch component
-  if (isFuse.value)
+  if (isFuse.value || isLocal.value)
     useHotKey('k', togglePopup)
 })
 
@@ -44,4 +45,5 @@ const YunAlgoliaSearch = isAlgolia.value
 
   <YunAlgoliaSearch v-if="isAlgolia" ref="algoliaRef" :open="open" @close="closeSearch" />
   <YunFuseSearch v-else-if="isFuse" :open="open" @close="closeSearch" />
+  <YunLocalSearch v-else-if="isLocal" :open="open" @close="closeSearch" />
 </template>

package/components/YunTooltip.vue

@@ -45,7 +45,7 @@ withDefaults(defineProps<{
   background: var(--va-c-bg);
   color: var(--va-c-text);
   padding: 0.25rem 0.75rem;
-  box-shadow: 0px 4px 6px -1px rgb(0 0 0 / 0.1), 0px 2px 4px -2px rgb(0 0 0 / 0.1);
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   border-radius: 4px;
   z-index: 100;
   user-select: none;
@@ -61,6 +61,7 @@ withDefaults(defineProps<{
     opacity: 0;
     transform: translateY(2px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);

package/components/author/YunAuthorAvatar.vue

@@ -28,11 +28,11 @@ const siteConfig = useSiteConfig()
 
 .site-author-avatar {
   img {
-    box-shadow: 0 0 10px rgba(black, 0.2);
+    box-shadow: 0 0 10px rgb(black, 0.2);
     transition: var(--va-transition-duration-moderate);
 
     &:hover {
-      box-shadow: 0 0 30px rgba(var(--va-c-primary-rgb), 0.2);
+      box-shadow: 0 0 30px rgb(var(--va-c-primary-rgb), 0.2);
     }
   }
 }

package/components/collection/YunCollectionCard.vue

@@ -138,7 +138,6 @@ const hasMoreItems = computed(() => itemCount.value > 3)
     font-family: var(--va-font-serif);
     background: linear-gradient(135deg, var(--collection-accent), var(--collection-accent-light));
     background-clip: text;
-    -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     line-height: 1.4;
   }

package/components/collection/YunCollectionSidebar.vue

@@ -59,10 +59,8 @@ const resolvedItems = computed(() => {
 
     .items {
       border-left: 1px solid var(--va-c-divider);
-
       color: #666;
       font-size: 0.9em;
-
       padding-left: 16px;
 
       .item {

package/components/layout/YunLayoutLeft.vue

@@ -35,7 +35,7 @@ const sidebarExplicit = computed(() => {
   display: none;
 }
 
-@media (min-width: 1024px) {
+@media (width >= 1024px) {
   .yun-layout-left {
     display: flex;
     flex-direction: column;

package/components/layout/YunLayoutWrapper.vue

@@ -45,7 +45,7 @@ const classes = computed(() => {
 }
 
 /* Switch to horizontal three-column layout on large screens */
-@media (min-width: 1024px) {
+@media (width >= 1024px) {
   .yun-layout-wrapper__content {
     flex-direction: row;
     align-items: start;

package/components/menu/YunPostClassifyNavItem.vue

@@ -42,11 +42,12 @@ defineProps<{
   }
 
   &.router-link-active {
-    background-color: rgba(var(--va-c-primary-rgb), 0.08);
+    background-color: rgb(var(--va-c-primary-rgb), 0.08);
 
     .icon-default {
       display: none;
     }
+
     .icon-active {
       display: block;
     }

package/components/prologue/YunPrologueSquare.vue

@@ -113,6 +113,7 @@ const showContent = ref(false)
 
   &.enter-from {
     border-radius: 0%;
+
     // width: var(--total-char-height);
     // height: var(--total-char-height);
     transform: rotate(135deg) translateY(0%);
@@ -139,6 +140,7 @@ const showContent = ref(false)
 
     &.show {
       opacity: 1;
+
       // transform: translateY(calc(50% + var(--avatar-size) / 2));
     }
   }

package/components/site/YunFullscreenMenuList.vue

@@ -20,7 +20,7 @@ const themeConfig = useThemeConfig()
 
 <style>
 /* Use CSS media query for mobile flex-wrap instead of JS isMobile to avoid hydration mismatch */
-@media (max-width: 768px) {
+@media (width <= 768px) {
   .yun-fullscreen-menu-list {
     flex-wrap: wrap;
   }

package/components/theme/nimbo/YunNimboNavMenu.vue

@@ -115,6 +115,7 @@ const app = useAppStore()
   // animation-range: 0 calc(30vh), exit;
   box-shadow: none;
   display: flex;
+
   // top: var(--rect-margin);
   // left: var(--rect-margin);
   // right: var(--rect-margin);
@@ -122,7 +123,6 @@ const app = useAppStore()
   top: 0;
   left: 0;
   right: 0;
-
   align-items: center;
   justify-content: space-between;
   height: var(--yun-nav-height, 50px);

package/components/ui/YunGradientDivider.vue

@@ -4,14 +4,14 @@
 
 <style lang="scss">
 .yun-gradient-line {
-  --c-end: rgba(0 0 0 / 0);
-  --c-mid: rgba(0 0 0 / 1);
+  --c-end: rgb(0 0 0 / 0);
+  --c-mid: rgb(0 0 0 / 1);
 }
 
 .dark {
   .yun-gradient-line {
-    --c-end: rgba(255 255 255 / 0);
-    --c-mid: rgba(255 255 255 / 1);
+    --c-end: rgb(255 255 255 / 0);
+    --c-mid: rgb(255 255 255 / 1);
   }
 }
 

package/composables/post.ts

@@ -1,38 +1,37 @@
-import type { ComputedRef, StyleValue } from 'vue'
-import { computed } from 'vue'
+import type { ComputedRef, MaybeRefOrGetter, StyleValue } from 'vue'
+import { computed, toValue } from 'vue'
 import { useThemeConfig } from './config'
 
 /**
- * get type card property
- * todo: test reactive
+ * get type card property (reactive)
  */
-export function usePostProperty(type?: string): {
-  color: string
-  icon: string
-  styles: StyleValue | undefined | ComputedRef<StyleValue | undefined>
+export function usePostProperty(type?: MaybeRefOrGetter<string | undefined>): {
+  color: ComputedRef<string>
+  icon: ComputedRef<string>
+  styles: ComputedRef<StyleValue | undefined>
 } {
-  if (!type) {
-    return {
-      color: '',
-      icon: '',
-      styles: undefined,
-    }
-  }
-
   const themeConfig = useThemeConfig()
 
-  if (!(type in themeConfig.value.types))
-    type = 'link'
+  const resolvedType = computed(() => {
+    const t = toValue(type)
+    if (!t)
+      return undefined
+    return t in themeConfig.value.types ? t : 'link'
+  })
+
+  const color = computed(() => {
+    const t = resolvedType.value
+    return t ? themeConfig.value.types[t].color : ''
+  })
 
-  const color = themeConfig.value.types[type].color
-  const icon = themeConfig.value.types[type].icon
+  const icon = computed(() => {
+    const t = resolvedType.value
+    return t ? themeConfig.value.types[t].icon : ''
+  })
 
   const styles = computed<StyleValue | undefined>(() => {
-    return type
-      ? ({
-          '--card-c-primary': color,
-        })
-      : undefined
+    const c = color.value
+    return c ? { '--card-c-primary': c } : undefined
   })
 
   return {

package/docs/README.md

@@ -1,3 +1,5 @@
 # Docs for valaxy-theme-yun
 
+📖 Full documentation: [valaxy.site/themes/yun](https://valaxy.site/themes/yun)
+
 [English](./en-US/) | [中文](./zh-CN/)

package/docs/en-US/README.md

@@ -0,0 +1,3 @@
+# valaxy-theme-yun Docs
+
+📖 Full documentation: [valaxy.site/themes/yun](https://valaxy.site/themes/yun)

package/docs/zh-CN/README.md

@@ -1,5 +1,7 @@
 # valaxy-theme-yun 文档
 
+📖 完整文档请参见：[valaxy.site/themes/yun](https://valaxy.site/themes/yun)
+
 ## 配置
 
 ### 主题配置

package/docs/zh-CN/config.md

@@ -2,6 +2,8 @@
 title: 主题配置
 ---
 
+> 📖 完整文档请参见：[valaxy.site/themes/yun](https://valaxy.site/themes/yun)
+
 配置 `valaxy.config.ts` 中的 `themeConfig` 字段，类型可直接参考 [valaxy-theme-yun/types/index.d.ts](https://github.com/YunYouJun/valaxy/blob/main/packages/valaxy-theme-yun/types/index.d.ts)。
 
 如您需要更详细的描述/示例，再阅读下方内容。

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "valaxy-theme-yun",
   "type": "module",
-  "version": "0.28.1",
+  "version": "0.28.2",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -33,7 +33,7 @@
   },
   "devDependencies": {
     "@types/animejs": "^3.1.13",
-    "valaxy": "0.28.1",
+    "valaxy": "0.28.2",
     "valaxy-addon-waline": "0.2.1"
   },
   "scripts": {

package/styles/common/button.scss

@@ -15,10 +15,10 @@
   }
 
   &:hover {
-    background-color: rgba(var(--va-c-primary-rgb), 0.08);
+    background-color: rgb(var(--va-c-primary-rgb), 0.08);
   }
 
   &:active {
-    background-color: rgba(var(--va-c-primary-rgb), 0.16);
+    background-color: rgb(var(--va-c-primary-rgb), 0.16);
   }
 }

package/styles/common/markdown.scss

@@ -4,7 +4,6 @@
   --smc-font-sans: var(--va-font-sans);
   --smc-font-serif: var(--va-font-serif);
   --smc-font-mono: var(--va-font-mono);
-
   --c-toc-link: var(--va-c-text-light);
 }
 
@@ -16,7 +15,7 @@
 
 /* stylelint-disable-next-line no-duplicate-selectors */
 .markdown-body {
-  word-wrap: break-word;
+  overflow-wrap: break-word;
 
   a {
     color: var(--va-c-link);
@@ -108,18 +107,18 @@
       thead {
         th {
           text-align: left;
-          border: 1px solid rgba(var(--va-c-primary-rgb), 0.3);
-          background-color: rgba(var(--va-c-primary-rgb), 0.1);
+          border: 1px solid rgb(var(--va-c-primary-rgb), 0.3);
+          background-color: rgb(var(--va-c-primary-rgb), 0.1);
         }
       }
 
       td {
-        border: 1px solid rgba(var(--va-c-primary-rgb), 0.3);
+        border: 1px solid rgb(var(--va-c-primary-rgb), 0.3);
       }
 
       tr {
         &:hover {
-          background-color: rgba(var(--va-c-primary-rgb), 0.05);
+          background-color: rgb(var(--va-c-primary-rgb), 0.05);
         }
       }
     }
@@ -136,22 +135,19 @@
   .markdown-body {
     div[class*="language-"] {
       position: relative;
+
       // left: 50%;
       // right: 50%;
       // margin-left: -50vw !important;
       // margin-right: -50vw !important;
       // width: 100vw !important;
-      margin-top: 16px;
-      margin-bottom: 0;
-      margin-left: -24px;
-      margin-right: -24px;
+      margin: 16px -24px 0;
       height: auto;
     }
   }
 }
 
 @media (width <=639.9px) {
-
   .markdown-body .vp-code-group .tabs,
   .markdown-body .vp-code-group div[class*="language-"] {
     position: relative;

package/styles/common/scrollbar.scss

@@ -7,24 +7,24 @@
 
 ::-webkit-scrollbar-track {
   border-radius: 2px;
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: rgb(255 255 255 / 0.1);
 }
 
 ::-webkit-scrollbar-thumb {
   border-radius: 2px;
-  background-color: rgba(122, 122, 122, 0.3);
+  background-color: rgb(122 122 122 / 0.3);
 
   // transition not work
 
   &:window-inactive {
-    background-color: rgba(122, 122, 122, 0.3);
+    background-color: rgb(122 122 122 / 0.3);
   }
 
   &:hover {
-    background-color: rgba(122, 122, 122, 0.7);
+    background-color: rgb(122 122 122 / 0.7);
   }
 
   &:active {
-    background-color: rgba(122, 122, 122, 0.9);
+    background-color: rgb(122 122 122 / 0.9);
   }
 }

package/styles/css-vars.scss

@@ -5,11 +5,9 @@
 :root {
   // yun
   --yun-margin-top: 68px;
-
   --yun-home-hero-image-filter: blur(48px);
-  --yun-home-hero-name-background: -webkit-linear-gradient(120deg, var(--va-c-text) 30%, black);
+  --yun-home-hero-name-background: linear-gradient(120deg, var(--va-c-text) 30%, black);
   --yun-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);
-
   --yun-nav-height: 50px;
 }
 
@@ -32,8 +30,7 @@ html.dark {
   // gradient
   --va-c-bg: #1a1a1d;
   --va-c-bg-soft: #121215;
-
-  --yun-home-hero-name-background: -webkit-linear-gradient(120deg, var(--va-c-primary) 30%, #41d1ff);
+  --yun-home-hero-name-background: linear-gradient(120deg, var(--va-c-primary) 30%, #41d1ff);
 }
 
 // animation

package/styles/global.scss

@@ -15,7 +15,7 @@ html {
 }
 
 .gradient-text {
-  background-clip: text;
   -webkit-background-clip: text;
+  background-clip: text;
   -webkit-text-fill-color: transparent;
 }

package/styles/layout/post.scss

@@ -21,7 +21,7 @@
 
   // Use md breakpoint (768px) instead of mobile (640px)
   // because 640~768px screens are still too narrow for side-by-side layout
-  @media screen and (max-width: 768px) {
+  @media screen and (width <= 768px) {
     .post-card-info {
       flex-direction: column;
     }

package/styles/main.scss

@@ -11,6 +11,7 @@ $c-primary: #0078e7 !default;
 @use "./animations/index.scss" as *;
 @use "./common/button.scss" as *;
 @use "./common/markdown.scss" as *;
+
 // valaxy client styles
 @use 'valaxy/client/styles/components/code.scss' as *;
 @use 'valaxy/client/styles/components/code-group.scss' as *;

package/styles/widgets/banner.scss

@@ -110,7 +110,7 @@ $char-animation-duration: 0.4s;
   &-left {
     border-left: 1px solid var(--banner-line-color);
     /* stylelint-disable-next-line color-function-notation */
-    border-right: 0 solid rgba(var(--va-c-primary-rgb), 0.1);
+    border-right: 0 solid rgb(var(--va-c-primary-rgb), 0.1);
     border-right-width: 0;
     animation-name: char-move-left;
     animation-duration: $char-animation-duration;
@@ -121,7 +121,7 @@ $char-animation-duration: 0.4s;
 
   &-right {
     /* stylelint-disable-next-line color-function-notation */
-    border-left: 0 solid rgba(var(--va-c-primary-rgb), 0.1);
+    border-left: 0 solid rgb(var(--va-c-primary-rgb), 0.1);
     border-right: 1px solid var(--banner-line-color);
     border-left-width: 0;
     animation-name: char-move-right;