mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-06 06:15:13 +00:00
75 lines
2.3 KiB
CSS
75 lines
2.3 KiB
CSS
/* Match Tailwind lg (default 1024px): https://tailwindcss.com/docs/screens */
|
|
@media (max-width: 1024px) {
|
|
.hb-sidebar-container {
|
|
@apply fixed top-0 w-full bottom-0 z-[15] pt-[calc(var(--navbar-height))] overscroll-contain;
|
|
|
|
contain: layout style;
|
|
transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1);
|
|
will-change: transform, opacity;
|
|
backface-visibility: hidden;
|
|
}
|
|
}
|
|
|
|
.hb-sidebar-container {
|
|
@apply flex flex-col print:hidden lg:top-16 lg:shrink-0 lg:w-64 lg:self-start;
|
|
|
|
li > div {
|
|
@apply h-0;
|
|
}
|
|
|
|
li.open > div {
|
|
@apply h-auto pt-1;
|
|
}
|
|
|
|
li.open > a > span > svg > path {
|
|
@apply rotate-90;
|
|
}
|
|
}
|
|
|
|
.hb-sidebar-list {
|
|
@apply relative flex flex-col gap-1 before:absolute before:inset-y-1 before:w-px before:bg-gray-200 before:content-[""] ltr:ml-3 ltr:pl-3 ltr:before:left-0 rtl:mr-3 rtl:pr-3 rtl:before:right-0 dark:before:bg-neutral-700;
|
|
}
|
|
|
|
.hb-scrollbar {
|
|
@apply overflow-y-auto overflow-x-hidden p-4 grow;
|
|
|
|
scrollbar-width: thin;
|
|
scrollbar-color: oklch(55.55% 0 0 / 40%) transparent;
|
|
scrollbar-gutter: stable;
|
|
|
|
&::-webkit-scrollbar {
|
|
@apply w-3 h-3;
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
|
@apply bg-transparent;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
@apply rounded-[10px];
|
|
}
|
|
|
|
&:hover::-webkit-scrollbar-thumb {
|
|
border: 3px solid transparent;
|
|
background-color: var(--tw-shadow-color);
|
|
background-clip: content-box;
|
|
@apply shadow-neutral-500/20 hover:shadow-neutral-500/40;
|
|
}
|
|
}
|
|
|
|
.hb-docs-link {
|
|
@apply flex rounded px-2 py-1.5 text-sm transition-colors [word-break:break-word] cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] gap-2 before:opacity-25 before:content-['#'] text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-primary-100/5 dark:hover:text-gray-50;
|
|
}
|
|
|
|
.hb-sidebar-mobile-menu {
|
|
@apply [transition:background-color_0.5s_ease];
|
|
}
|
|
|
|
.hb-sidebar-mobile-toc {
|
|
@apply flex flex-col gap-1 relative before:absolute before:inset-y-1 before:w-px before:bg-gray-200 before:content-[""] dark:before:bg-neutral-800 ltr:pl-3 ltr:before:left-0 rtl:pr-3 rtl:before:right-0 ltr:ml-3 rtl:mr-3;
|
|
}
|
|
|
|
.hb-sidebar-custom-link {
|
|
@apply flex items-center justify-between gap-2 cursor-pointer rounded px-2 py-1.5 text-sm transition-colors [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word];
|
|
}
|