Something went wrong. Try again.
fork of ozone with nix stuff
Something went wrong. Try again.
CSS
at customized
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178@import './theme.css';
@tailwind base;@tailwind components;@tailwind utilities;
@layer base { /* Faces mirror the subset app.css loads: InterVariable for body copy (with a static InterDisplay for bold, which the variable face does not cover past weight 600) and IBMPlexMono for code. */ @font-face { font-family: 'InterVariable'; src: url('/fonts/InterVariable.woff2') format('woff2-variations'); font-weight: 100 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'InterVariable'; src: url('/fonts/InterVariable-Italic.woff2') format('woff2-variations'); font-weight: 100 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'InterVariable'; src: url('/fonts/InterDisplay-Bold.woff2') format('woff2'); font-weight: bold; font-style: normal; font-display: swap; }
@font-face { font-family: 'InterVariable'; src: url('/fonts/InterDisplay-BoldItalic.woff2') format('woff2'); font-weight: bold; font-style: italic; font-display: swap; }
@font-face { font-family: 'IBMPlexMono'; src: url('/fonts/IBMPlexMono-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBMPlexMono'; src: url('/fonts/IBMPlexMono-Italic.woff2') format('woff2'); font-weight: normal; font-style: italic; font-display: swap; }
@font-face { font-family: 'IBMPlexMono'; src: url('/fonts/IBMPlexMono-Bold.woff2') format('woff2'); font-weight: bold; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBMPlexMono'; src: url('/fonts/IBMPlexMono-BoldItalic.woff2') format('woff2'); font-weight: bold; font-style: italic; font-display: swap; }
html { font-size: 16px; /* Reserve the scrollbar track so navigating between a scrolling and a non-scrolling view does not shift the layout sideways. */ scrollbar-gutter: stable; color-scheme: light; }
html.dark { color-scheme: dark; }
body { @apply bg-background-canvas text-foreground-default transition-colors duration-200; font-size: 14px; /* app.css sets these through the `--font-sans--font-feature-settings` theme key; Tailwind v3 has no such hook, so they are applied directly. */ font-feature-settings: "kern" 1, "liga" 1, "cv05" 1, "tnum" 1; }
/* app.css strips link decoration and colours links with the neutral ramp rather than a blue; Ozone leans on `text-*` utilities per link, so only the defaults are set here. */ a { @apply no-underline; }}
/* --- Markdown editor (@uiw/react-md-editor) ------------------------------- *//* The editor ships its own CSS-variable theme; map it onto the design tokens so it stops rendering as a GitHub-coloured island in both modes. `--color-border-default` is deliberately absent: the editor and the token set spell it identically, so it already inherits the right value from `:root`. Restating it here as `var(--color-border-default)` would be a self-reference and resolve to nothing. */.wmde-markdown-var,.w-md-editor { --color-canvas-default: var(--color-background-default); --color-canvas-subtle: var(--color-background-subtle); --color-border-muted: var(--color-border-subtle); --color-fg-default: var(--color-foreground-default); --color-fg-muted: var(--color-foreground-muted); --color-fg-subtle: var(--color-foreground-subtle); --color-accent-fg: var(--color-foreground-link-info); --color-neutral-muted: var(--color-background-inset);}
/* --- Tetris easter egg (app/surprise-me) ---------------------------------- */.game-block { @apply m-0 h-6 w-6 border border-border-strong p-0;}.piece-i { @apply bg-pink-400;}.piece-j { @apply bg-orange-300;}.piece-l { @apply bg-yellow-200;}.piece-o { @apply bg-yellow-500;}.piece-s { @apply bg-gray-700;}.piece-t { @apply bg-purple-400;}.piece-z { @apply bg-red-400;}.piece-preview { @apply bg-background-muted;}
.dark .game-block { @apply border-border-default;}.dark .piece-i { @apply bg-pink-700;}.dark .piece-j { @apply bg-orange-500;}.dark .piece-l { @apply bg-yellow-400;}.dark .piece-o { @apply bg-yellow-700;}.dark .piece-s { @apply bg-gray-800;}.dark .piece-t { @apply bg-purple-600;}.dark .piece-z { @apply bg-red-600;}.dark .piece-preview { @apply bg-background-muted;}