co-mono/packages/web-ui/src/app.css
2025-11-10 21:47:21 +01:00

68 lines
1.5 KiB
CSS

/* Import Claude theme from mini-lit */
@import "@mariozechner/mini-lit/styles/themes/default.css";
/* Tell Tailwind to scan mini-lit components */
/* biome-ignore lint/suspicious/noUnknownAtRules: Tailwind 4 source directive */
@source "../../../node_modules/@mariozechner/mini-lit/dist";
/* Import Tailwind */
/* biome-ignore lint/correctness/noInvalidPositionAtImportRule: fuck you */
@import "tailwindcss";
body {
font-size: 16px;
-webkit-font-smoothing: antialiased;
}
* {
scrollbar-width: thin;
scrollbar-color: var(--color-border) rgba(0, 0, 0, 0);
}
*::-webkit-scrollbar {
width: 8px;
height: 8px;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background-color: var(--color-border);
border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0);
}
/* Fix cursor for dialog close buttons */
.fixed.inset-0 button[aria-label*="Close"],
.fixed.inset-0 button[type="button"] {
cursor: pointer;
}
/* Shimmer animation for thinking text */
@keyframes shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
.animate-shimmer {
animation: shimmer 2s ease-in-out infinite;
}
/* User message with fancy pill styling */
.user-message-container {
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
background: linear-gradient(135deg, rgba(217, 79, 0, 0.12), rgba(255, 107, 0, 0.12), rgba(212, 165, 0, 0.12));
border: 1px solid rgba(255, 107, 0, 0.25);
backdrop-filter: blur(10px);
max-width: 100%;
}