diff --git a/styles/dropdown-arrow.scss b/styles/dropdown-arrow.scss index ef3d308..22a10a4 100644 --- a/styles/dropdown-arrow.scss +++ b/styles/dropdown-arrow.scss @@ -1,4 +1,5 @@ -.sidebar-item.collapsible:not(.sidebar-heading), .navbar-dropdown-title { +.sidebar-item.collapsible:not(.sidebar-heading), +.vp-navbar-dropdown-title { .arrow { @apply ml-2 !important; } diff --git a/styles/navbar.scss b/styles/navbar.scss index 287a732..d90e9e6 100644 --- a/styles/navbar.scss +++ b/styles/navbar.scss @@ -1,51 +1,57 @@ -.navbar span a { +.vp-navbar span a { @apply flex items-center; margin-left: 0.1rem; } -.navbar span a span { +.vp-navbar span a span { @apply mt-3; } -.navbar-items-wrapper { +.vp-navbar-items-wrapper { @apply mt-1; max-width: none !important; } -.navbar-items { +.vp-navbar-items { @apply space-x-12; } -.navbar-item { - a, .navbar-dropdown-title { - @apply text-gray-900 text-xl font-bold transition-transform transform; +.vp-navbar-item { + + a, + .vp-navbar-dropdown-title { + @apply text-gray-900 dark:text-gray-400 text-xl font-bold transition-transform transform; } - .navbar-dropdown { + .vp-navbar-dropdown { @apply shadow-md p-0 !important; - .navbar-dropdown-item { + .vp-navbar-dropdown-item { @apply p-1.5; } + } +} - .navbar-dropdown-item:hover { - @apply bg-gray-200; +.vp-navbar-dropdown-wrapper:not(.mobile) { + .vp-navbar-dropdown { + .vp-navbar-dropdown-item:hover { + @apply bg-gray-200 dark:bg-gray-800; } } } -.navbar-item>a:hover, -.navbar-item>a.router-link-active { +.vp-navbar-item>a:hover, +.vp-navbar-item>a.route-link-active { @apply border-b-4 border-gray-900 pb-2 -translate-y-0.5 !important; } html.dark { - .navbar-item>a { + .vp-navbar-item>a { color: #adbac7 !important; } - .navbar-item>a:hover, - .navbar-item>a.router-link-active { + .vp-navbar-item>a:hover, + .vp-navbar-item>a.route-link-active { color: #adbac7 !important; border-color: #adbac7 !important; } diff --git a/styles/site-name.scss b/styles/site-name.scss index 4b17a13..fc6cbb8 100644 --- a/styles/site-name.scss +++ b/styles/site-name.scss @@ -1,24 +1,24 @@ -span.site-name:after { +span.vp-site-name:after { content: '.io'; @apply text-4xl text-gray-500 font-light !important; } -span.site-name:before { +span.vp-site-name:before { content: 'docs.'; @apply text-4xl text-gray-500 font-light !important; } html.dark { - span.site-name { + span.vp-site-name { color: #adbac7 !important; } - span.site-name:before { + span.vp-site-name:before { color: #adbac7 !important; } } -span.site-name { +span.vp-site-name { @apply text-4xl text-gray-900 font-bold -top-1 !important; margin-left: 0.55rem !important; } \ No newline at end of file