Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/openstatusHQ/openstatus. 🫖 Status page with uptime monitoring & API monitoring as code 🫖 openstatus.dev
bun drizzle-orm monitoring monitoring-as-code nextjs observability on-call open-source shadcn-ui status-page statuspage synthetic-monitoring tinybird turso uptime uptime-checker uptime-monitor
Something went wrong. Try again.
7.0 kB · 351 lines
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351@import 'tailwindcss';@import '@openstatus/ui/globals';
@plugin 'tailwindcss-animate';@plugin '@tailwindcss/container-queries';
@source '../../../../packages/ui/**/*.{ts,tsx}';@source '../../node_modules/@openstatus/react/**/*.{js,ts,jsx,tsx}';
@theme { --color-sh-class: var(--sh-class); --color-sh-identifier: var(--sh-identifier); --color-sh-sign: var(--sh-sign); --color-sh-string: var(--sh-string); --color-sh-keyword: var(--sh-keyword); --color-sh-comment: var(--sh-comment); --color-sh-jsxliterals: var(--sh-jsxliterals); --color-sh-property: var(--sh-property); --color-sh-entity: var(--sh-entity);
--font-sans: var(--font-sans), ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --font-cal: var(--font-calsans);
--animate-accordion-down: accordion-down 0.2s ease-out; --animate-accordion-up: accordion-up 0.2s ease-out;
@keyframes accordion-down { from { height: 0; } to { height: var(--radix-accordion-content-height); } } @keyframes accordion-up { from { height: var(--radix-accordion-content-height); } to { height: 0; } }}
@theme inline { --font-mono: var(--font-commit-mono);}
@utility container { margin-inline: auto; padding-inline: 2rem; @media (width >= --theme(--breakpoint-sm)) { max-width: none; } @media (width >= 1400px) { max-width: 1400px; }}
/* The default border color has changed to `currentcolor` in Tailwind CSS v4, so we've added these compatibility styles to make sure everything still looks the same as it did with Tailwind CSS v3.
If we ever want to remove these styles, we need to add an explicit border color utility to any element that depends on these defaults.*/@layer base { *, ::after, ::before, ::backdrop, ::file-selector-button { border-color: var(--color-gray-200, currentcolor); }}
@layer base { :root { --sh-class: #2d5e9d; --sh-identifier: #354150; --sh-sign: #8996a3; --sh-string: #007f7a; --sh-keyword: #e02518; --sh-comment: #a19595; --sh-jsxliterals: #6266d1; --sh-property: #e25a1c; --sh-entity: #e25a1c; }
.dark { --sh-class: #4c97f8; --sh-identifier: white; --sh-keyword: #f47067; --sh-string: #0fa295; }
.dark [data-theme='dark'] { display: block; }
[data-theme='dark'] { display: none; }
[data-theme='light'] { display: block; }
.dark [data-theme='light'] { display: none; }}
@layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; }}
/* Typography */
::selection { background-color: var(--color-primary); color: var(--color-primary-foreground);}
.prose { @apply text-foreground/80;}
.prose .anchor { @apply absolute invisible no-underline;
margin-left: -1em; padding-right: 0.5em; width: 80%; max-width: 700px; cursor: pointer;}
.anchor:hover { @apply visible;}
.prose a { @apply text-foreground underline decoration-muted-foreground/50 underline-offset-2 decoration-2 hover:decoration-muted-foreground transition-colors duration-150 motion-reduce:transition-none;}
.prose .anchor:after { @apply text-muted-foreground; content: '#';}
.prose *:hover > .anchor { @apply visible;}
.prose pre { @apply relative bg-muted overflow-x-auto border border-border py-2.5 px-3.5 text-sm rounded-none;}
.prose code { @apply px-1 py-0.5 bg-muted text-muted-foreground;}
.prose pre code { @apply p-0; border: initial; line-height: 1.5;}
.prose code span { @apply font-medium;}
.prose img { /* Don't apply styles to next/image */ @apply m-0;}
.prose p { @apply my-4 leading-7;}
.prose > p:first-of-type { @apply text-lg text-foreground/90 leading-8;}
.prose h1 { @apply text-balance text-3xl text-foreground font-semibold tracking-tight mb-6 relative;}
.prose h2 { @apply text-2xl text-foreground font-semibold tracking-tight mt-12 mb-4 pt-8 border-t border-border/60 relative scroll-mt-12;}
.prose h3 { @apply text-xl text-foreground font-medium tracking-tight mt-8 mb-3 relative scroll-mt-8;}
.prose h4 { @apply text-lg text-foreground font-medium tracking-tight mt-6 mb-2 relative scroll-mt-6;}
.prose hr { @apply my-6}
.prose strong { @apply text-foreground font-semibold;}
.prose blockquote { @apply border-l-2 border-foreground/50 pl-4;}
.prose blockquote p::before { content: '"'; @apply text-muted-foreground;}
.prose blockquote p::after { content: '"'; @apply text-muted-foreground;}
.prose figure { @apply my-4;}
.prose figure img { @apply aspect-video object-cover border border-border outline outline-1 -outline-offset-1 outline-black/10 dark:outline-white/10;}
.prose figure img.img-fit { /* opt out of the forced 16:9 crop: show non-16:9 images (wide diagrams, terminal strips, portrait cards) whole */ aspect-ratio: auto; object-fit: contain;}
.prose figure figcaption { @apply text-sm text-muted-foreground not-empty:mt-1;}
.prose em { @apply text-foreground italic;}
.prose ul { list-style-type: "– "; @apply list-outside pl-5 marker:text-muted-foreground;}
.prose ol { @apply list-outside pl-5 list-decimal marker:text-muted-foreground;}
.prose li { @apply leading-7 pl-1;}
.prose details { @apply border border-border p-4 my-4;}
.prose details p:last-child { @apply mb-0;}
.prose details summary { @apply cursor-pointer font-medium text-foreground select-none;}
/* A summary rendered as a heading (see Details `headingLevel`) is outline semantics, not a visual step — inherit the summary's own type entirely so the rendering is identical to a plain-text summary. */.prose details summary :is(h2, h3, h4) { display: inline; margin: 0; font: inherit; letter-spacing: inherit; color: inherit;}
.prose details summary:hover { @apply bg-muted;}
.prose details summary::marker { @apply mr-1;}
.prose details[open] summary { @apply mb-2;}
.prose form { @apply my-4;}
.prose form label { @apply text-foreground font-medium;}
/* Wrapper for scrollable tables */.prose .table-wrapper { @apply w-full overflow-x-auto my-4;}
.prose table { @apply w-full border-collapse border border-border text-foreground;}
.prose table th { @apply font-medium bg-muted/50 p-4 text-left border border-border;}
.prose table td { @apply font-normal p-4 border border-border;}
.prose table caption { @apply text-muted-foreground text-sm caption-bottom mt-4;}
pre::-webkit-scrollbar { display: none;}
pre { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */}
/* Remove Safari input shadow on mobile */input[type='text'],input[type='email'] { -webkit-appearance: none; -moz-appearance: none; appearance: none;}
.title { text-wrap: balance;}