NERDDISCO's picture
feat: make the cyberpunk example work with @lerobot/web
7a0c9ff
raw
history blame
3.35 kB
/* Geist Font Definitions */
@font-face {
font-family: "Geist";
src: url("/fonts/Geist-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: block;
}
@font-face {
font-family: "Geist";
src: url("/fonts/Geist-SemiBold.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: block;
}
@font-face {
font-family: "Geist";
src: url("/fonts/Geist-Bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: block;
}
@font-face {
font-family: "Geist Mono";
src: url("/fonts/GeistMono-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: block;
}
@font-face {
font-family: "Geist Mono";
src: url("/fonts/GeistMono-SemiBold.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: block;
}
@font-face {
font-family: "Geist Mono";
src: url("/fonts/GeistMono-Bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: block;
}
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 240 5% 7%;
--foreground: 0 0% 98%;
--card: 240 5% 9%;
--card-foreground: 0 0% 98%;
--popover: 240 5% 7%;
--popover-foreground: 0 0% 98%;
--primary: 38 100% 50%;
--primary-foreground: 240 5% 7%;
--secondary: 240 4% 16%;
--secondary-foreground: 0 0% 98%;
--muted: 240 4% 16%;
--muted-foreground: 240 5% 65%;
--accent: 48 99% 56%;
--accent-foreground: 240 5% 7%;
--destructive: 0 72% 51%;
--destructive-foreground: 0 0% 98%;
--border: 240 4% 16%;
--input: 240 4% 16%;
--ring: 38 100% 50%;
--accent-cyan: 180 100% 50%;
--radius: 0.5rem;
}
.light {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--primary: 38 100% 50%;
--primary-foreground: 240 5% 7%;
--secondary: 0 0% 96.1%;
--secondary-foreground: 240 5.9% 10%;
--muted: 0 0% 96.1%;
--muted-foreground: 240 3.8% 46.1%;
--accent: 48 99% 56%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 89.8%;
--input: 0 0% 89.8%;
--ring: 38 100% 50%;
--accent-cyan: 180 100% 40%;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
font-feature-settings: "rlig" 1, "calt" 1;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
body.page-ready {
opacity: 1;
}
body.dark {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(255 255 255 / 0.05)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
}
}
@layer utilities {
.text-glitch {
animation: text-glitch 0.3s linear infinite alternate-reverse;
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: hsl(var(--background));
}
::-webkit-scrollbar-thumb {
background: hsl(var(--primary) / 0.5);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: hsl(var(--primary));
}
}