diff --git a/layers/components/layouts/Header.vue b/layers/components/layouts/Header.vue index 0ac4e23..31ad6d6 100644 --- a/layers/components/layouts/Header.vue +++ b/layers/components/layouts/Header.vue @@ -268,6 +268,7 @@ onMounted(() => { class="nav-item group" :class="{ 'is-hidden': + breakpoints.isDesktop && overflowNam > 0 && Number(key) >= Object.keys(gnbData?.menus).length - overflowNam, @@ -493,24 +494,6 @@ onMounted(() => { @apply top-[11px] left-[12px]; } -a { - @apply transition-[background] hover:bg-theme-foreground-reversal-4 active:bg-theme-foreground-reversal-10; -} -a.nav-1depth:not(.item-link) { - @apply md:hover:bg-transparent md:active:bg-transparent; -} - -.nav-1depth.router-link-active { - @apply bg-theme-foreground-reversal-8 md:bg-transparent; -} -.more-list .nav-1depth.router-link-active { - @apply bg-theme-foreground-reversal-8; -} -.nav-item:hover .nav-1depth::after, -.nav-1depth.router-link-active::after { - @apply opacity-100 md:transition-opacity; -} - .nav-wrap { @apply fixed top-0 left-0 bottom-0 w-0 mt-[var(--scroll-position,48px)] md:relative md:w-full md:h-full md:mt-0; } @@ -541,6 +524,24 @@ a.nav-1depth:not(.item-link) { @apply md:overflow-visible; } +.nav-list a { + @apply transition-[background] hover:bg-theme-foreground-reversal-4 active:bg-theme-foreground-reversal-10; +} +.nav-list a.nav-1depth:not(.item-link) { + @apply md:hover:bg-transparent md:active:bg-transparent; +} + +.nav-1depth.router-link-active { + @apply bg-theme-foreground-reversal-8 md:bg-transparent; +} +.more-list .nav-1depth.router-link-active { + @apply bg-theme-foreground-reversal-8; +} +.nav-item:hover .nav-1depth::after, +.nav-1depth.router-link-active::after { + @apply opacity-100 md:transition-opacity; +} + .nav-item { @apply relative flex flex-col text-[16px] md:items-center md:h-full; } @@ -621,7 +622,7 @@ a.nav-1depth:not(.item-link) { @apply md:block; } .btn-start:deep(> .btn-base) { - @apply w-full h-[48px] px-10 font-[700]; + @apply w-full h-[48px] px-10 font-[700] text-[16px]; } .btn-start:deep(> .btn-base) .icon-platform { @apply hidden;