737 lines
20 KiB
CSS
737 lines
20 KiB
CSS
@import "tailwindcss";
|
||
/* Subframe design-system theme tokens (generated; see .subframe/sync.json). */
|
||
@import "./ui/theme.css";
|
||
|
||
@custom-variant dark (&:is(.dark *));
|
||
|
||
@config '../../../tailwind.config.ts';
|
||
|
||
/*
|
||
Subframe's theme.css sets every typography token to "Instrument Sans" but the
|
||
Subframe sync never brought the actual font over, so all Subframe-styled text
|
||
fell back to the browser serif. Self-host the font (no runtime third-party
|
||
request — keeps the EU/privacy posture) and make it the default family with a
|
||
clean sans fallback so text renders correctly even before the font loads.
|
||
Variable font (weight 400–700); files in apps/web/public/fonts/.
|
||
*/
|
||
@font-face {
|
||
font-family: "Instrument Sans";
|
||
font-style: normal;
|
||
font-weight: 400 700;
|
||
font-stretch: 100%;
|
||
font-display: swap;
|
||
src: url("/fonts/instrument-sans-latin.woff2") format("woff2");
|
||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||
}
|
||
@font-face {
|
||
font-family: "Instrument Sans";
|
||
font-style: normal;
|
||
font-weight: 400 700;
|
||
font-stretch: 100%;
|
||
font-display: swap;
|
||
src: url("/fonts/instrument-sans-latin-ext.woff2") format("woff2");
|
||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||
}
|
||
|
||
@theme {
|
||
--default-font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||
}
|
||
|
||
/*
|
||
Local fix (D-D0a): Subframe's "default" heading style is the token `--text-heading-`
|
||
(trailing dash). Tailwind v4 does NOT emit a `text-heading-`/`font-heading-` utility
|
||
for a token whose name ends in `-`, so every Subframe page that uses `text-heading-`
|
||
rendered unstyled (16px/400 fallback) instead of 24px/500. The token IS registered in
|
||
the twMerge list (app/ui/utils.ts), only the CSS was missing. Re-create both utilities
|
||
from the existing token values. theme.css is overwritten on every Subframe sync, so the
|
||
fix lives here in globals.css.
|
||
*/
|
||
@layer utilities {
|
||
.text-heading- {
|
||
font-size: var(--text-heading-);
|
||
font-weight: var(--text-heading---font-weight);
|
||
line-height: var(--text-heading---line-height);
|
||
letter-spacing: var(--text-heading---letter-spacing);
|
||
}
|
||
.font-heading- {
|
||
font-family: var(--font-heading-);
|
||
}
|
||
}
|
||
|
||
/*
|
||
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);
|
||
}
|
||
.typography {
|
||
max-width: 65ch;
|
||
color: var(--color-foreground);
|
||
}
|
||
.typography h1:not(.not-typography h1) {
|
||
scroll-margin: calc(var(--spacing) * 20);
|
||
font-size: var(--text-4xl);
|
||
line-height: var(--text-4xl--line-height);
|
||
font-weight: 800;
|
||
letter-spacing: var(--tracking-tight);
|
||
}
|
||
.typography h2:not(.not-typography h2) {
|
||
scroll-margin: calc(var(--spacing) * 20);
|
||
border-bottom: 1px solid var(--color-border);
|
||
padding-bottom: calc(var(--spacing) * 2);
|
||
font-size: var(--text-3xl);
|
||
line-height: var(--text-3xl--line-height);
|
||
font-weight: 600;
|
||
letter-spacing: var(--tracking-tight);
|
||
margin-top: calc(var(--spacing) * 12);
|
||
}
|
||
.typography h2:not(.not-typography h2):first-child {
|
||
margin-top: 0;
|
||
}
|
||
.typography h3:not(.not-typography h3) {
|
||
scroll-margin: calc(var(--spacing) * 20);
|
||
font-size: var(--text-2xl);
|
||
line-height: var(--text-2xl--line-height);
|
||
font-weight: 600;
|
||
letter-spacing: var(--tracking-tight);
|
||
margin-top: calc(var(--spacing) * 12);
|
||
}
|
||
.typography h3:not(.not-typography h3):first-child {
|
||
margin-top: 0;
|
||
}
|
||
.typography h4:not(.not-typography h4) {
|
||
scroll-margin: calc(var(--spacing) * 20);
|
||
font-size: var(--text-xl);
|
||
line-height: var(--text-xl--line-height);
|
||
font-weight: 600;
|
||
letter-spacing: var(--tracking-tight);
|
||
margin-top: calc(var(--spacing) * 12);
|
||
}
|
||
.typography h4:not(.not-typography h4):first-child {
|
||
margin-top: 0;
|
||
}
|
||
.typography h5:not(.not-typography h5) {
|
||
scroll-margin: calc(var(--spacing) * 20);
|
||
font-size: var(--text-lg);
|
||
line-height: var(--text-lg--line-height);
|
||
font-weight: 600;
|
||
letter-spacing: var(--tracking-tight);
|
||
margin-top: calc(var(--spacing) * 12);
|
||
}
|
||
.typography h5:not(.not-typography h5):first-child {
|
||
margin-top: 0;
|
||
}
|
||
.typography h6:not(.not-typography h6) {
|
||
scroll-margin: calc(var(--spacing) * 20);
|
||
font-size: var(--text-base);
|
||
line-height: var(--text-base--line-height);
|
||
font-weight: 600;
|
||
letter-spacing: var(--tracking-tight);
|
||
margin-top: calc(var(--spacing) * 12);
|
||
}
|
||
.typography h6:not(.not-typography h6):first-child {
|
||
margin-top: 0;
|
||
}
|
||
.typography h1:not(.not-typography h1) + p,
|
||
.typography h2:not(.not-typography h2) + p,
|
||
.typography h3:not(.not-typography h3) + p,
|
||
.typography h4:not(.not-typography h4) + p,
|
||
.typography h5:not(.not-typography h5) + p,
|
||
.typography h6:not(.not-typography h6) + p {
|
||
margin-top: 0;
|
||
}
|
||
.typography p:not(.not-typography p) {
|
||
line-height: 1.75;
|
||
}
|
||
.typography p:not(.not-typography p):not(:first-child) {
|
||
margin-top: calc(var(--spacing) * 6);
|
||
}
|
||
.typography li:not(.not-typography li) {
|
||
line-height: 1.75;
|
||
}
|
||
.typography a:not(.not-typography a) {
|
||
font-weight: 500;
|
||
color: var(--color-primary);
|
||
text-decoration: underline;
|
||
text-underline-offset: var(--spacing);
|
||
overflow-wrap: anywhere;
|
||
}
|
||
.typography blockquote:not(.not-typography blockquote) {
|
||
margin-top: calc(var(--spacing) * 6);
|
||
border-left: 2px solid var(--color-border);
|
||
padding-left: calc(var(--spacing) * 6);
|
||
font-style: italic;
|
||
}
|
||
.typography table:not(.not-typography table) {
|
||
margin-top: calc(var(--spacing) * 6);
|
||
margin-bottom: calc(var(--spacing) * 6);
|
||
width: 100%;
|
||
overflow-y: auto;
|
||
}
|
||
.typography table:not(.not-typography table) thead tr {
|
||
margin: 0;
|
||
border-top: 1px solid var(--color-border);
|
||
padding: 0;
|
||
}
|
||
.typography table:not(.not-typography table) thead tr:nth-child(even) {
|
||
background-color: var(--color-muted);
|
||
}
|
||
.typography table:not(.not-typography table) th {
|
||
border: 1px solid var(--color-border);
|
||
padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
|
||
text-align: left;
|
||
font-weight: 700;
|
||
}
|
||
.typography table:not(.not-typography table) th[align="center"] {
|
||
text-align: center;
|
||
}
|
||
.typography table:not(.not-typography table) th[align="right"] {
|
||
text-align: right;
|
||
}
|
||
.typography table:not(.not-typography table) tbody tr {
|
||
margin: 0;
|
||
border-top: 1px solid var(--color-border);
|
||
padding: 0;
|
||
}
|
||
.typography table:not(.not-typography table) tbody tr:nth-child(even) {
|
||
background-color: var(--color-muted);
|
||
}
|
||
.typography table:not(.not-typography table) td {
|
||
border: 1px solid var(--color-border);
|
||
padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
|
||
text-align: left;
|
||
}
|
||
.typography table:not(.not-typography table) td[align="center"] {
|
||
text-align: center;
|
||
}
|
||
.typography table:not(.not-typography table) td[align="right"] {
|
||
text-align: right;
|
||
}
|
||
.typography ul:not(.not-typography ul) {
|
||
margin-top: calc(var(--spacing) * 6);
|
||
margin-left: calc(var(--spacing) * 6);
|
||
list-style: disc;
|
||
}
|
||
.typography ul:not(.not-typography ul) > li {
|
||
margin-top: calc(var(--spacing) * 2);
|
||
}
|
||
.typography ul:not(.not-typography ul) p {
|
||
margin-top: 0;
|
||
margin-bottom: 0;
|
||
display: inline;
|
||
}
|
||
.typography ol:not(.not-typography ol) {
|
||
margin-top: calc(var(--spacing) * 6);
|
||
margin-left: calc(var(--spacing) * 6);
|
||
list-style: decimal;
|
||
}
|
||
.typography ol:not(.not-typography ol) > li {
|
||
margin-top: calc(var(--spacing) * 2);
|
||
}
|
||
.typography ol:not(.not-typography ol) p {
|
||
margin-top: 0;
|
||
margin-bottom: 0;
|
||
display: inline;
|
||
}
|
||
.typography pre:not(.not-typography pre) {
|
||
background-color: var(--color-muted);
|
||
border-radius: calc(var(--radius) - 2px);
|
||
padding: calc(var(--spacing) * 4);
|
||
margin-top: calc(var(--spacing) * 6);
|
||
margin-bottom: calc(var(--spacing) * 6);
|
||
font-size: var(--text-sm);
|
||
line-height: var(--text-sm--line-height);
|
||
overflow-y: auto;
|
||
}
|
||
.typography code:not(pre code):not(.not-typography code) {
|
||
position: relative;
|
||
border-radius: var(--radius);
|
||
background-color: var(--color-muted);
|
||
padding: calc(var(--spacing) * 0.2) calc(var(--spacing) * 0.3);
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-sm);
|
||
line-height: var(--text-sm--line-height);
|
||
font-weight: 600;
|
||
}
|
||
.typography .lead:not(.not-typography .lead) {
|
||
font-size: var(--text-xl);
|
||
line-height: var(--text-xl--line-height);
|
||
color: var(--color-muted-foreground);
|
||
}
|
||
.typography .large:not(.not-typography .large) {
|
||
font-size: var(--text-lg);
|
||
line-height: var(--text-lg--line-height);
|
||
font-weight: 600;
|
||
}
|
||
.typography .small:not(.not-typography .small) {
|
||
font-size: var(--text-sm);
|
||
line-height: 1;
|
||
font-weight: 500;
|
||
}
|
||
.typography .muted:not(.not-typography .muted) {
|
||
font-size: var(--text-sm);
|
||
line-height: var(--text-sm--line-height);
|
||
color: var(--color-muted-foreground);
|
||
}
|
||
.typography img:not(.not-typography img),
|
||
.typography picture:not(.not-typography picture),
|
||
.typography video:not(.not-typography video) {
|
||
margin-top: calc(var(--spacing) * 6);
|
||
margin-bottom: calc(var(--spacing) * 6);
|
||
}
|
||
.typography picture > img:not(.not-typography picture > img) {
|
||
margin-top: 0;
|
||
margin-bottom: 0;
|
||
}
|
||
.typography kbd:not(.not-typography kbd) {
|
||
border-radius: calc(var(--radius) - 2px);
|
||
background-color: var(--color-muted);
|
||
padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 1.5);
|
||
font-size: var(--text-xs);
|
||
line-height: var(--text-xs--line-height);
|
||
font-weight: 600;
|
||
}
|
||
.typography hr {
|
||
margin-top: calc(var(--spacing) * 10);
|
||
margin-bottom: calc(var(--spacing) * 10);
|
||
}
|
||
.typography dl:not(.not-typography dl) {
|
||
margin-top: calc(var(--spacing) * 6);
|
||
margin-bottom: calc(var(--spacing) * 6);
|
||
}
|
||
.typography dl:not(.not-typography dl) dt {
|
||
font-weight: 600;
|
||
margin-top: calc(var(--spacing) * 6);
|
||
letter-spacing: var(--tracking-tight);
|
||
}
|
||
.typography dl:not(.not-typography dl) dt:first-child {
|
||
margin-top: 0;
|
||
}
|
||
.typography details:not(.not-typography details) {
|
||
margin-top: calc(var(--spacing) * 6);
|
||
}
|
||
.typography details:not(.not-typography details) summary {
|
||
cursor: pointer;
|
||
font-weight: 600;
|
||
margin-top: calc(var(--spacing) * 6);
|
||
letter-spacing: var(--tracking-tight);
|
||
}
|
||
.typography details:not(.not-typography details) p:first-of-type {
|
||
margin-top: calc(var(--spacing) * 2);
|
||
}
|
||
.typography mark:not(.not-typography mark) {
|
||
background-color: var(--color-yellow-300);
|
||
}
|
||
.typography small:not(.not-typography small) {
|
||
font-size: var(--text-xs);
|
||
line-height: 1;
|
||
}
|
||
/*
|
||
---break---
|
||
*/
|
||
@media (min-width: 1024px) {
|
||
.typography h1:not(.not-typography h1) {
|
||
font-size: var(--text-5xl);
|
||
line-height: var(--text-5xl--line-height);
|
||
}
|
||
}
|
||
}
|
||
|
||
@utility tooltip {
|
||
@apply invisible absolute;
|
||
|
||
.has-tooltip:hover & {
|
||
@apply visible z-50;
|
||
}
|
||
}
|
||
|
||
@utility has-tooltip {
|
||
&:hover .tooltip {
|
||
@apply visible z-50;
|
||
}
|
||
}
|
||
|
||
@utility base-spinner {
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
&:before {
|
||
content: "";
|
||
box-sizing: border-box;
|
||
position: absolute;
|
||
background-color: inherit;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
z-index: 1;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
|
||
&:after {
|
||
content: "";
|
||
box-sizing: border-box;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-top: -10px;
|
||
margin-left: -10px;
|
||
border-radius: 50%;
|
||
border: 2px solid rgba(255, 255, 255, 0.45);
|
||
border-top-color: inherit;
|
||
animation: spinner 0.6s linear infinite;
|
||
z-index: 2;
|
||
}
|
||
}
|
||
|
||
@utility loader {
|
||
border-top-color: #5a67d8;
|
||
-webkit-animation: spinner 1.5s linear infinite;
|
||
animation: spinner 1.5s linear infinite;
|
||
}
|
||
|
||
@utility drop {
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 1rem;
|
||
transition: background-color 0.2s ease-in-out;
|
||
}
|
||
|
||
@utility uploadmyfile {
|
||
display: none;
|
||
}
|
||
|
||
@utility tiptap {
|
||
:first-child {
|
||
margin-top: 0;
|
||
}
|
||
|
||
ul {
|
||
@apply list-disc;
|
||
padding: 0 1rem;
|
||
margin: 1.25rem 1rem 1.25rem 0.4rem;
|
||
|
||
li p {
|
||
margin-top: 0.25em;
|
||
margin-bottom: 0.25em;
|
||
}
|
||
}
|
||
|
||
ol {
|
||
@apply list-decimal;
|
||
padding: 0 1rem;
|
||
margin: 1.25rem 1rem 1.25rem 0.4rem;
|
||
|
||
li p {
|
||
margin-top: 0.25em;
|
||
margin-bottom: 0.25em;
|
||
}
|
||
}
|
||
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
h5,
|
||
h6 {
|
||
line-height: 1.1;
|
||
margin-top: 2.5rem;
|
||
text-wrap: pretty;
|
||
}
|
||
|
||
h1,
|
||
h2 {
|
||
margin-top: 3.5rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 1.4rem;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
h3 {
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
h4,
|
||
h5,
|
||
h6 {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
code {
|
||
background-color: hsl(var(--muted));
|
||
border-radius: 0.4rem;
|
||
color: hsl(var(--foreground));
|
||
font-size: 0.85rem;
|
||
padding: 0.25em 0.3em;
|
||
}
|
||
|
||
pre {
|
||
background: hsl(var(--foreground));
|
||
border-radius: 0.5rem;
|
||
color: hsl(var(--background));
|
||
font-family: "JetBrainsMono", monospace;
|
||
margin: 1.5rem 0;
|
||
padding: 0.75rem 1rem;
|
||
|
||
code {
|
||
background: none;
|
||
color: inherit;
|
||
font-size: 0.8rem;
|
||
padding: 0;
|
||
}
|
||
}
|
||
|
||
blockquote {
|
||
border-left: 3px solid hsl(var(--border));
|
||
margin: 1.5rem 0;
|
||
padding-left: 1rem;
|
||
}
|
||
|
||
hr {
|
||
border: none;
|
||
border-top: 1px solid hsl(var(--border));
|
||
margin: 2rem 0;
|
||
}
|
||
}
|
||
|
||
@utility scrollbar-hidden {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
|
||
&::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@layer utilities {
|
||
@keyframes spinner {
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes spinner {
|
||
0% {
|
||
-webkit-transform: rotate(0deg);
|
||
}
|
||
100% {
|
||
-webkit-transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
@keyframes spinner {
|
||
0% {
|
||
transform: rotate(0deg);
|
||
}
|
||
100% {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
}
|
||
|
||
:root {
|
||
--background: hsl(0 0% 100%);
|
||
--foreground: hsl(240 10% 3.9%);
|
||
|
||
--muted: hsl(240 4.8% 95.9%);
|
||
--muted-foreground: hsl(240 3.8% 46.1%);
|
||
|
||
--popover: hsl(0 0% 100%);
|
||
--popover-foreground: hsl(240 10% 3.9%);
|
||
|
||
--card: hsl(0 0% 100%);
|
||
--card-foreground: hsl(240 10% 3.9%);
|
||
|
||
--border: hsl(240 5.9% 90%);
|
||
--input: hsl(240 5.9% 90%);
|
||
|
||
--primary: hsl(240 5.9% 10%);
|
||
--primary-foreground: hsl(0 0% 98%);
|
||
|
||
--secondary: hsl(240 4.8% 95.9%);
|
||
--secondary-foreground: hsl(240 5.9% 10%);
|
||
|
||
--accent: hsl(240 4.8% 95.9%);
|
||
--accent-foreground: hsl(240 5.9% 10%);
|
||
|
||
--destructive: hsl(0 84.2% 60.2%);
|
||
--destructive-foreground: hsl(0 0% 98%);
|
||
|
||
--ring: hsl(240 5.9% 10%);
|
||
|
||
--radius: 0.5rem;
|
||
|
||
/* Subframe SidebarWithSections palette (light): map the shadcn sidebar tokens
|
||
onto the Subframe surface/text/border tokens so the (light) tenant sidebar
|
||
matches the design-system component. Dark `--sidebar-*` (admin + dark mode)
|
||
stays as-is — Subframe's surface tokens are light-only. */
|
||
--sidebar-background: var(--color-surface-neutral-secondary);
|
||
--sidebar-foreground: var(--color-text-neutral-secondary);
|
||
--sidebar-primary: hsl(240 5.9% 10%);
|
||
--sidebar-primary-foreground: hsl(0 0% 98%);
|
||
--sidebar-accent: var(--color-surface-neutral-tertiary);
|
||
--sidebar-accent-foreground: var(--color-text-neutral-primary);
|
||
--sidebar-border: var(--color-border-default);
|
||
--sidebar-ring: hsl(217.2 91.2% 59.8%);
|
||
--sidebar: var(--color-surface-neutral-secondary);
|
||
|
||
--chart-1: 221.2 83.2% 53.3%;
|
||
--chart-2: 212 95% 68%;
|
||
--chart-3: 216 92% 60%;
|
||
--chart-4: 210 98% 78%;
|
||
--chart-5: 212 97% 87%;
|
||
}
|
||
|
||
.dark {
|
||
--background: hsl(240 10% 3.9%);
|
||
--foreground: hsl(0 0% 98%);
|
||
|
||
--muted: hsl(240 3.7% 15.9%);
|
||
--muted-foreground: hsl(240 5% 64.9%);
|
||
|
||
--popover: hsl(240 10% 3.9%);
|
||
--popover-foreground: hsl(0 0% 98%);
|
||
|
||
--card: hsl(240 10% 3.9%);
|
||
--card-foreground: hsl(0 0% 98%);
|
||
|
||
--border: hsl(240 3.7% 15.9%);
|
||
--input: hsl(240 3.7% 15.9%);
|
||
|
||
--primary: hsl(0 0% 98%);
|
||
--primary-foreground: hsl(240 5.9% 10%);
|
||
|
||
--secondary: hsl(240 3.7% 15.9%);
|
||
--secondary-foreground: hsl(0 0% 98%);
|
||
|
||
--accent: hsl(240 3.7% 15.9%);
|
||
--accent-foreground: hsl(0 0% 98%);
|
||
|
||
--destructive: hsl(0 62.8% 30.6%);
|
||
--destructive-foreground: hsl(0 0% 98%);
|
||
|
||
--ring: hsl(240 4.9% 83.9%);
|
||
|
||
--sidebar-background: hsl(240 10% 3.9%);
|
||
--sidebar-foreground: hsl(240 4.8% 95.9%);
|
||
--sidebar-primary: hsl(224.3 76.3% 48%);
|
||
--sidebar-primary-foreground: hsl(0 0% 100%);
|
||
--sidebar-accent: hsl(240 3.7% 15.9%);
|
||
--sidebar-accent-foreground: hsl(240 4.8% 95.9%);
|
||
--sidebar-border: hsl(240 3.7% 15.9%);
|
||
--sidebar-ring: hsl(217.2 91.2% 59.8%);
|
||
--sidebar: hsl(240 5.9% 10%);
|
||
|
||
--chart-1: 221.2 83.2% 53.3%;
|
||
--chart-2: 212 95% 68%;
|
||
--chart-3: 216 92% 60%;
|
||
--chart-4: 210 98% 78%;
|
||
--chart-5: 212 97% 87%;
|
||
}
|
||
|
||
@theme inline {
|
||
--radius-sm: calc(var(--radius) - 4px);
|
||
--radius-md: calc(var(--radius) - 2px);
|
||
--radius-lg: var(--radius);
|
||
--radius-xl: calc(var(--radius) + 4px);
|
||
--color-background: var(--background);
|
||
--color-foreground: var(--foreground);
|
||
--color-card: var(--card);
|
||
--color-card-foreground: var(--card-foreground);
|
||
--color-popover: var(--popover);
|
||
--color-popover-foreground: var(--popover-foreground);
|
||
--color-primary: var(--primary);
|
||
--color-primary-foreground: var(--primary-foreground);
|
||
--color-secondary: var(--secondary);
|
||
--color-secondary-foreground: var(--secondary-foreground);
|
||
--color-muted: var(--muted);
|
||
--color-muted-foreground: var(--muted-foreground);
|
||
--color-accent: var(--accent);
|
||
--color-accent-foreground: var(--accent-foreground);
|
||
--color-destructive: var(--destructive);
|
||
--color-border: var(--border);
|
||
--color-input: var(--input);
|
||
--color-ring: var(--ring);
|
||
--color-chart-1: var(--chart-1);
|
||
--color-chart-2: var(--chart-2);
|
||
--color-chart-3: var(--chart-3);
|
||
--color-chart-4: var(--chart-4);
|
||
--color-chart-5: var(--chart-5);
|
||
--color-sidebar: var(--sidebar);
|
||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||
--color-sidebar-primary: var(--sidebar-primary);
|
||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||
--color-sidebar-accent: var(--sidebar-accent);
|
||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||
--color-sidebar-border: var(--sidebar-border);
|
||
--color-sidebar-ring: var(--sidebar-ring);
|
||
--animate-accordion-down: accordion-down 0.2s ease-out;
|
||
--animate-accordion-up: accordion-up 0.2s ease-out;
|
||
|
||
--breakpoint-3xl: 120rem;
|
||
--breakpoint-4xl: 140rem;
|
||
|
||
/*
|
||
---break---
|
||
*/
|
||
@keyframes accordion-down {
|
||
from {
|
||
height: 0;
|
||
}
|
||
to {
|
||
height: var(--radix-accordion-content-height);
|
||
}
|
||
}
|
||
/*
|
||
---break---
|
||
*/
|
||
@keyframes accordion-up {
|
||
from {
|
||
height: var(--radix-accordion-content-height);
|
||
}
|
||
to {
|
||
height: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
@layer base {
|
||
* {
|
||
@apply border-border outline-ring/50;
|
||
}
|
||
body {
|
||
@apply text-foreground overscroll-y-none bg-transparent;
|
||
}
|
||
}
|
||
|
||
/* Keep dialog positioning stable when third-party widgets inject global styles. */
|
||
[data-slot="dialog-content"] {
|
||
position: fixed !important;
|
||
top: 50% !important;
|
||
left: 50% !important;
|
||
transform: translate(-50%, -50%) !important;
|
||
}
|
||
|
||
[data-slot="dialog-overlay"] {
|
||
position: fixed !important;
|
||
inset: 0 !important;
|
||
}
|