Current section
Files
Jump to
Current section
Files
assets/css/typography.css
/* https://github.com/supabase/ui/blob/develop/src/components/Typography/Typography.module.css */
/* marker fix */
.sbui-typography li::marker {
display: none;
content: "";
}
.sbui-typography-container {
@apply prose prose-sm lg:prose-lg;
}
.sbui-typography {
@apply text-base;
@apply text-gray-400;
}
/* .sbui-typography--prose-sm {
@apply prose prose-sm;
}
.sbui-typography--prose-lg {
@apply prose prose-lg;
}
.sbui-typography--prose-xl {
@apply prose prose-xl;
}
.sbui-typography--prose-2xl {
@apply prose prose-2xl;
} */
.sbui-typography code {
padding: 0.2em 0.4em 0.1em;
background: hsla(0, 0%, 58.8%, 0.1);
border: 1px solid hsla(0, 0%, 39.2%, 0.2);
border-radius: 3px;
}
/*
dark mode styles
default styles are handled by tailwind config
*/
.dark .sbui-typography {
@apply text-gray-200;
}
.dark .sbui-typography h1 {
@apply text-white;
}
.dark .sbui-typography h2 {
@apply text-white;
}
.dark .sbui-typography h3 {
@apply text-white;
}
.dark .sbui-typography h4 {
@apply text-white;
}
.dark .sbui-typography h5 {
@apply text-white;
}
.dark .sbui-typography strong {
@apply text-white;
}
.dark .sbui-typography li::before {
@apply text-gray-300;
}
.dark .sbui-typography a {
@apply text-white;
}
.dark .sbui-typography blockquote {
@apply text-white;
}
.dark .sbui-typography code {
color: white;
}
.dark .sbui-typography figcaption {
@apply text-gray-600;
}
.dark .sbui-typography::selection {
/* @apply bg-brand-500; */
backgroundcolor: "#6f7bb635";
}