mirror of
https://github.com/vercel/eve.git
synced 2026-09-20 05:35:39 +08:00
Rich Haines
92 lines
2.1 KiB
CSS
92 lines
2.1 KiB
CSS
@source "../**/*.{ts,tsx,mdx}";
|
|
@source "../../components/**/*.{ts,tsx}";
|
|
@source "../../../docs/**/*.{md,mdx}";
|
|
|
|
html {
|
|
scroll-padding-top: 5rem;
|
|
}
|
|
|
|
/* Tint the root + body so overscroll and any gaps match the page background
|
|
instead of showing white. */
|
|
html,
|
|
body {
|
|
background-color: var(--ds-background-200);
|
|
}
|
|
|
|
:root {
|
|
--shiki-token-parameter: var(--shiki-color-text);
|
|
}
|
|
|
|
/* Tint the global footer to match the landing background, but only on the
|
|
home route (`/`), which renders the [data-home-route] marker. */
|
|
body:has([data-home-route]) footer {
|
|
@apply bg-background-200;
|
|
}
|
|
|
|
/* Nights is an intentionally immersive standalone route. */
|
|
body:has([data-nights-route]) {
|
|
background: #000;
|
|
color-scheme: dark;
|
|
}
|
|
|
|
@keyframes eve-nights-rise {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(12px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
[data-nights-route][data-shader-state="loading"] [data-nights-animated] {
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
body:has([data-nights-route]) [data-nights-animated] {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
/* On home routes the navbar starts borderless and fades its bottom border in
|
|
only once the page is scrolled (ScrollState toggles [data-scrolled]). */
|
|
body:has([data-home-route]) header {
|
|
border-bottom-color: transparent !important;
|
|
transition: border-color 200ms ease;
|
|
}
|
|
html[data-scrolled] body:has([data-home-route]) header {
|
|
border-bottom-color: var(--ds-gray-alpha-400) !important;
|
|
}
|
|
|
|
/*
|
|
* On mobile the sticky MobileDocsBar abuts the navbar via a negative top
|
|
* margin, which would otherwise overlap and clip the page breadcrumb rendered
|
|
* above it. Hide the breadcrumb on mobile so the bar sits flush under the
|
|
* navbar; it stays visible on desktop, where the bar is hidden.
|
|
*/
|
|
@container (max-width: 960px) {
|
|
#nd-page {
|
|
@apply px-6;
|
|
}
|
|
|
|
#nd-page > .text-gray-900:first-child {
|
|
@apply hidden;
|
|
}
|
|
}
|
|
|
|
/* TOC and footer links use gray-1000. */
|
|
#nd-toc {
|
|
@apply text-gray-1000 md:pl-6;
|
|
}
|
|
|
|
#nd-toc a {
|
|
@apply text-gray-900 hover:text-gray-1000;
|
|
}
|
|
|
|
#nd-toc a[data-active="true"] {
|
|
@apply text-gray-1000;
|
|
}
|