UNPKG

@theguild/components

Version:
211 lines (178 loc) • 4.93 kB
@layer l-base, l-nextra; @import 'tailwindcss/base' layer(l-base); @import 'nextra-theme-docs/dist/style-prefixed.css' layer(l-nextra); @import 'tailwindcss/utilities'; @import 'tailwindcss/components'; /* #region hamburger mobile menu */ .light .nextra-mobile-nav { @apply !bg-white; /* We recompute colors so they're up to date even if the --nextra-primary-hue was overwritten on the body. */ --x-color-primary-700: hsl( var(--nextra-primary-hue) var(--nextra-primary-saturation) calc(var(--nextra-primary-lightness) - 6%) ); --x-color-primary-800: hsl( var(--nextra-primary-hue) var(--nextra-primary-saturation) calc(var(--nextra-primary-lightness) - 13%) ); } .light .nextra-mobile-nav input { color: rgb(0, 52, 44); background-color: rgb(248, 247, 246) !important; border: 1px solid rgb(241, 238, 228); } .light .nextra-mobile-nav input::placeholder { color: rgba(36, 88, 80, 0.9) !important; } .light .nextra-mobile-nav .nextra-sidebar-footer:is(html[class] *) { border-color: #e5e7eb; } .light .nextra-mobile-nav kbd { @apply !border-gray-200 !bg-white; } .light .nextra-mobile-nav li > :is(a, button) { @apply text-gray-500 hover:bg-gray-100 hover:text-gray-900; } .light .nextra-mobile-nav ul::before { @apply !bg-gray-200; } /* #endregion hamburger mobile menu */ /* #region search results */ .light .nextra-search-results { @apply !border-green-200; background-color: white; padding: 1rem 0; & > div { @apply border-beige-400 text-green-1000; } & > a > div { @apply text-green-800; } &::before { background-color: rgb(229, 231, 235); } & mark { background-color: oklch(0.611752 0.07807 214.47 / 0.8); } } /* #endregion search results */ @layer components { .hive-focus { &:focus { outline: none; } &:focus-visible { @apply ring ring-[hsl(var(--nextra-primary-hue)_var(--nextra-primary-saturation)_86%)] ring-offset-1 ring-offset-[hsl(var(--nextra-primary-hue)_var(--nextra-primary-saturation)_77%)] dark:ring-[hsl(var(--nextra-primary-hue)_var(--nextra-primary-saturation)_32%)] dark:ring-offset-[hsl(var(--nextra-primary-hue)_var(--nextra-primary-saturation)_39%)]; } } .hive-focus-within { &:focus { outline: none; } &:focus-within { @apply ring ring-[hsl(var(--nextra-primary-hue)_var(--nextra-primary-saturation)_86%)] ring-offset-1 ring-offset-[hsl(var(--nextra-primary-hue)_var(--nextra-primary-saturation)_77%)] dark:ring-[hsl(var(--nextra-primary-hue)_var(--nextra-primary-saturation)_32%)] dark:ring-offset-[hsl(var(--nextra-primary-hue)_var(--nextra-primary-saturation)_39%)]; } } .MarketplaceSearch { --fg: theme(colors.white); --fg-80: rgb(from var(--fg) r g b / 0.8); --fg-70: rgb(from var(--fg) r g b / 0.7); --fg-60: rgb(from var(--fg) r g b / 0.6); &.green { --bg: theme(colors.green.1000); } &.neutral { --bg: theme(colors.neutral.900); .light & { --bg: theme(colors.white); --fg: theme(colors.neutral.900); } } } } /* wrong with neue montreal */ .x\:subpixel-antialiased { -webkit-font-smoothing: unset; -moz-osx-font-smoothing: unset; } /* fix for nextra navbar for HiveNavigation */ :root { --nextra-navbar-height: 82px; } @media (min-width: 768px) { .nextra-search { @apply ml-3 basis-64; input, kbd { @apply text-green-700 dark:text-neutral-300; } input { @apply h-12 w-full rounded-lg border border-green-200 bg-white pl-4 pr-8; @apply ring-[hsl(var(--nextra-primary-hue)_var(--nextra-primary-saturation)_32%/var(--tw-ring-opacity))]; @apply ring-offset-[rgb(var(--nextra-bg))] dark:border-neutral-800 dark:bg-inherit; } kbd { @apply absolute right-4 top-1/2 my-0 -translate-y-1/2 border-none bg-green-200 dark:bg-neutral-700; } } } @media (max-width: 767px) { :root { --nextra-navbar-height: 64px; } } :root { --hive-ease-overshoot-far: linear( 0 0%, 0.5007 7.21%, 0.7803 12.29%, 0.8883 14.93%, 0.9724 17.63%, 1.0343 20.44%, 1.0754 23.44%, 1.0898 25.22%, 1.0984 27.11%, 1.1014 29.15%, 1.0989 31.4%, 1.0854 35.23%, 1.0196 48.86%, 1.0043 54.06%, 0.9956 59.6%, 0.9925 68.11%, 1 100% ); --hive-ease-overshoot-a-bit: linear( 0 0%, 0.5007 7.21%, 0.7803 12.29%, 0.8883 14.93%, 0.9724 17.63%, 1.011319 20.44%, 1.024882 23.44%, 1.029634 25.22%, 1.032472 27.11%, 1.033462 29.15%, 1.032637 31.4%, 1.028182 35.23%, 1.006468 48.86%, 1.001419 54.06%, 0.9956 59.6%, 0.9925 68.11%, 1 100% ); } @keyframes hive-shake { 0%, 100% { transform: translateX(0); } 25% { transform: rotate(-0.4deg); } 75% { transform: rotate(0.3deg); } } .animate-shake:not(:focus-within) { animation: hive-shake 0.3s ease; }