@tailwind base;
@tailwind components;
@tailwind utilities;
@view-transition {
navigation: auto;
}
html,
body {
margin: 0;
padding: 0;
min-height: 100vh;
width: 100%;
scrollbar-width: auto;
scrollbar-color: theme("colors.gray.200") transparent;
}
html {
@apply bg-white;
&.dark {
@apply bg-zinc-900;
}
}
body {
@apply flex flex-col w-full overflow-x-hidden from-white to-gray-200 bg-gradient-to-b dark:from-zinc-800 dark:to-zinc-900 dark:bg-gradient-to-b dark:text-gray-300;
}
aside,
pre {
scrollbar-width: thin;
}
aside {
scrollbar-color: theme("colors.gray.200") transparent;
}
pre {
scrollbar-color: theme("colors.gray.600") transparent;
}
@media (prefers-color-scheme: dark) {
html:not(.light) aside {
scrollbar-color: theme("colors.gray.600") transparent;
}
}
html.dark aside {
scrollbar-color: theme("colors.gray.600") transparent;
}
@media (prefers-color-scheme: dark) {
html:not(.light) {
scrollbar-color: theme("colors.gray.600") transparent;
}
}
html.dark {
scrollbar-color: theme("colors.gray.600") transparent;
}
main {
@apply container max-w-screen-xl mx-auto flex flex-col flex-1 bg-transparent;
@media screen(md) {
@apply flex-row;
}
}
body > header {
@apply w-full border-b self-center sticky top-0 h-12 flex items-center bg-white dark:bg-zinc-900 dark:text-gray-300 dark:border-gray-800 z-10 drop-shadow-xl;
& nav {
@apply w-full px-4 grid grid-cols-[1fr_3fr_1fr] items-center relative;
@media screen(sm) {
@apply gap-8;
}
& a svg {
path {
@apply fill-black dark:fill-gray-300;
}
}
& > a:first-child {
@apply py-1 mr-auto;
& h4 {
@apply text-[0.5rem] font-normal m-0 -mt-0.5 leading-none;
}
& h3 {
@apply text-lg font-semibold m-0 -mt-0.5 leading-none;
}
}
}
&::before {
position: absolute;
width: 100%;
height: 100vh;
left: 0;
bottom: 100%;
content: "";
z-index: 0;
@apply bg-white dark:bg-zinc-900;
}
@media screen(md) {
@apply mb-4;
}
}
nav {
& a {
position: relative;
white-space: nowrap;
&.active {
@apply cursor-default;
}
&:hover:not(.active):not([target="_blank"]) {
&::after {
position: absolute;
width: 100%;
display: block;
content: "";
height: 2px;
width: 100%;
left: 50%;
bottom: 0px;
transform: translateX(-50%);
animation: 200ms both indicator;
@apply from-rose-400 via-fuchsia-500 to-indigo-500 bg-gradient-to-r;
@keyframes indicator {
from {
width: 0;
}
}
@media (prefers-reduced-motion) {
animation: none;
}
}
}
}
}
body[data-path="/en"] {
article {
view-transition-name: index;
overflow: visible;
@media (prefers-reduced-motion) {
view-transition-name: none;
}
}
}
article {
width: 100%;
justify-items: left;
overflow: auto;
view-transition-name: content;
position: relative;
display: flex;
flex-direction: column;
@media (prefers-reduced-motion) {
view-transition-name: none;
}
@apply container max-w-screen-xl px-4 mb-8;
& h1,
& h2,
& h3,
& h4,
& h5 {
@apply font-semibold mb-3.5;
}
& h1 {
@apply text-3xl;
}
& h2 {
@apply text-2xl;
}
& > h2 {
@apply border-t pt-4 mt-4 dark:border-gray-800;
}
& h3 {
@apply text-lg;
}
& h4 {
@apply text-base;
}
& h5 {
@apply text-sm;
}
& > p {
@apply text-base mb-4 leading-7;
}
& > pre {
@apply w-full;
}
& pre code {
@apply rounded-lg my-8 text-sm leading-5 border border-gray-500 shadow-xl shadow-gray-500 dark:shadow-[rgba(255,255,255,0.1)] dark:shadow-lg;
}
& p ~ pre code {
@apply mt-0;
}
& > code {
@apply whitespace-nowrap;
}
& p code,
& li code,
& dt code,
& dd code {
@apply bg-gray-100 dark:bg-gray-500 dark:text-white rounded-md text-sm p-1 font-semibold;
}
& ul {
@apply list-none list-inside mb-4;
& li {
@apply pl-0 mb-2;
&:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 0.25rem;
height: 2px;
margin-top: -1px;
margin-right: 0.5rem;
background-color: currentColor;
}
& ul {
@apply list-none pl-4 mb-0 mt-2;
& li {
@apply pl-0 mb-2;
&:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 0.25rem;
height: 2px;
margin-top: -1px;
margin-right: 0.5rem;
background-color: currentColor;
}
& ul {
@apply list-none pl-4 mb-0 mt-2;
& li:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 0.25rem;
height: 2px;
margin-top: -1px;
margin-right: 0.5rem;
background-color: currentColor;
}
}
}
}
}
}
& ol {
@apply list-decimal list-inside mb-4;
& li {
@apply pl-0 mb-2;
&::marker {
@apply font-semibold text-indigo-500 dark:text-yellow-600;
}
}
}
& a {
@apply text-indigo-500 dark:text-yellow-600 hover:underline;
}
.contains-task-list {
@apply list-none;
& code {
@apply bg-gray-100 dark:bg-gray-500 text-sm p-1 mx-1.5;
}
}
& blockquote {
@apply border-l-8 border-blue-300 p-4 mb-4 bg-blue-100 dark:bg-yellow-500 dark:border-yellow-600 dark:text-gray-800 shadow-xl dark:shadow-[rgba(255,255,255,0.1)];
& code {
@apply bg-gray-100 dark:bg-gray-100 dark:text-gray-800 text-sm whitespace-nowrap p-1;
}
}
& table {
@apply border-l-8 border-blue-300 p-4 mb-4 bg-blue-100 dark:bg-yellow-500 dark:border-yellow-600 dark:text-gray-800;
& th,
td {
@apply text-left border-r border-blue-300 dark:border-yellow-600 p-2;
& code {
@apply bg-gray-100 dark:bg-gray-100 dark:text-gray-800 text-sm font-semibold p-1;
}
& em {
@apply text-xs leading-none block;
& code {
@apply text-xs;
}
}
}
& tr {
@apply border-b border-blue-300 dark:border-yellow-600;
}
& tbody {
& tr:last-child {
@apply border-b-0;
}
}
}
&[data-path*="/api/"] {
& ul {
@apply list-none;
}
}
& input[type="checkbox"] {
width: 0;
margin: 0;
}
}
footer {
@apply w-full py-8 mt-auto items-center justify-center text-center text-xs border-t bg-white dark:bg-zinc-900 dark:text-gray-300 dark:border-gray-800;
}
.getstarted-code {
& pre {
@apply w-full;
}
}
::view-transition-old(sidebar):only-child {
animation:
0.5s both fade-out,
0.5s both sidebar-out;
}
::view-transition-new(sidebar):only-child {
animation:
0.5s both fade-in,
0.5s both sidebar-in;
}
::view-transition-old(content):only-child {
animation: 0.5s both fade-out;
}
::view-transition-new(content):only-child {
animation: 0.5s both fade-in;
}
::view-transition-old(index) {
transform-origin: top center;
animation: 0.5s both fade-out,
0.5s both index-out;
}
::view-transition-new(index) {
transform-origin: top center;
animation:
0.5s both fade-in,
0.5s both index-in;
}
@keyframes fade-in {
from {
opacity: 0;
}
}
@keyframes fade-out {
to {
opacity: 0;
}
}
@keyframes index-in {
from {
transform: scale(0.9);
}
}
@keyframes index-out {
to {
transform: scale(0.9);
}
}
@keyframes scanline {
0% {
background-position: 0% 100%;
}
100% {
background-position: 0% 0%;
}
}
.background-effect {
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
z-index: -1;
background-image: linear-gradient(
180deg,
rgba(0, 0, 0, 0.02) 49.4%,
rgba(255, 0, 0, 0.5) 49.6%,
rgba(255, 165, 0, 0.5) 49.8%,
rgba(255, 255, 0, 0.5) 50%,
rgba(0, 255, 0, 0.5) 50.2%,
rgba(0, 0, 255, 0.5) 50.4%,
rgba(0, 0, 0, 0) 50.6%
);
background-size: 100% 205%;
mask-image: url(/motherboard.svg);
mask-repeat: no-repeat;
mask-size: cover;
mask-position: center;
animation: scanline 5s ease-out;
@media (prefers-reduced-motion) {
animation: none;
background-image: none;
background-color: rgba(0, 0, 0, 0.02);
z-index: 0;
}
}
/* ── Feature sections on landing page ── */
.full-bleed {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
padding-left: max(1rem, calc((100vw - 80rem) / 2 + 1rem));
padding-right: max(1rem, calc((100vw - 80rem) / 2 + 1rem));
}
.feature-section {
h3 {
@apply text-2xl sm:text-3xl font-bold m-0 mb-1;
}
p {
@apply text-base leading-7 text-gray-600 dark:text-gray-400 m-0 mb-3;
}
pre code {
@apply my-0 shadow-md dark:shadow-sm;
}
.code-label {
@apply text-sm font-normal leading-relaxed text-gray-600 dark:text-gray-400 m-0 mt-4 mb-2;
}
}
.dark .background-effect {
background-image: linear-gradient(
180deg,
rgba(255, 255, 255, 0.02) 49.4%,
rgba(255, 0, 0, 0.5) 49.6%,
rgba(255, 165, 0, 0.5) 49.8%,
rgba(255, 255, 0, 0.5) 50%,
rgba(0, 255, 0, 0.5) 50.2%,
rgba(0, 0, 255, 0.5) 50.4%,
rgba(127, 127, 127, 0.01) 50.6%
);
@media (prefers-reduced-motion) {
background-image: none;
background-color: rgba(255, 255, 255, 0.02);
}
}
.adapter-card:hover .adapter-card-title::after {
position: absolute;
display: block;
content: "";
height: 2px;
width: 100%;
left: 50%;
bottom: -2px;
transform: translateX(-50%);
animation: 200ms both indicator;
@apply from-rose-400 via-fuchsia-500 to-indigo-500 bg-gradient-to-r;
@media (prefers-reduced-motion) {
animation: none;
}
}
/* API reference index — classical TOC style: each <dt>/<dd> pair
separated by vertical spacing, <dd> muted and indented. */
article dl {
@apply my-6;
}
article dl dt {
@apply mt-4 first:mt-0;
}
article dl dd {
@apply ml-6 text-gray-600 dark:text-gray-400;
}
/* Cross-reference links inside code blocks on API pages: keep the
highlight.js coloring, add a dotted underline to signal they're
clickable without repainting the token. */
code a.api-xref,
pre code a.api-xref {
color: inherit;
text-decoration: none;
border-bottom: 1px dotted currentColor;
}
code a.api-xref:hover,
pre code a.api-xref:hover {
border-bottom-style: solid;
}