mirror of
https://github.com/siteboon/claudecodeui.git
synced 2025-12-15 05:29:36 +00:00
first commit
This commit is contained in:
caraction
254
src/index.css
Normal file
254
src/index.css
Normal file
@@ -0,0 +1,254 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--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: 240 5.9% 10%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
--secondary: 240 4.8% 95.9%;
|
||||
--secondary-foreground: 240 5.9% 10%;
|
||||
--muted: 240 4.8% 95.9%;
|
||||
--muted-foreground: 240 3.8% 46.1%;
|
||||
--accent: 240 4.8% 95.9%;
|
||||
--accent-foreground: 240 5.9% 10%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 240 5.9% 90%;
|
||||
--input: 240 5.9% 90%;
|
||||
--ring: 240 5.9% 10%;
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 240 10% 3.9%;
|
||||
--foreground: 0 0% 98%;
|
||||
--card: 240 10% 3.9%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
--popover: 240 10% 3.9%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
--primary: 0 0% 98%;
|
||||
--primary-foreground: 240 5.9% 10%;
|
||||
--secondary: 240 3.7% 15.9%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
--muted: 240 3.7% 15.9%;
|
||||
--muted-foreground: 240 5% 64.9%;
|
||||
--accent: 240 3.7% 15.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 240 3.7% 15.9%;
|
||||
--input: 240 3.7% 15.9%;
|
||||
--ring: 240 4.9% 83.9%;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html, body, #root {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.scrollbar-thin {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: hsl(var(--muted-foreground)) transparent;
|
||||
}
|
||||
|
||||
.scrollbar-thin::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.scrollbar-thin::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.scrollbar-thin::-webkit-scrollbar-thumb {
|
||||
background-color: hsl(var(--muted-foreground));
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
|
||||
background-color: hsl(var(--muted-foreground) / 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile optimizations and components */
|
||||
@layer components {
|
||||
/* Mobile touch optimization and safe areas */
|
||||
@media (max-width: 768px) {
|
||||
* {
|
||||
touch-action: manipulation;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
button,
|
||||
[role="button"],
|
||||
.clickable,
|
||||
a,
|
||||
.cursor-pointer {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
/* Better mobile touch targets */
|
||||
.mobile-touch-target {
|
||||
@apply min-h-[44px] min-w-[44px];
|
||||
}
|
||||
|
||||
/* Chat message improvements */
|
||||
.chat-message.user {
|
||||
@apply justify-end;
|
||||
}
|
||||
|
||||
.chat-message.user > div {
|
||||
@apply max-w-[85%];
|
||||
}
|
||||
|
||||
.chat-message.assistant > div,
|
||||
.chat-message.error > div {
|
||||
@apply w-full sm:max-w-[95%];
|
||||
}
|
||||
|
||||
/* Enable text selection on mobile for terminal */
|
||||
.xterm,
|
||||
.xterm .xterm-viewport {
|
||||
-webkit-user-select: text !important;
|
||||
user-select: text !important;
|
||||
-webkit-touch-callout: default !important;
|
||||
}
|
||||
|
||||
/* Fix mobile scrolling */
|
||||
.overflow-y-auto {
|
||||
touch-action: pan-y;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.chat-message {
|
||||
touch-action: pan-y;
|
||||
}
|
||||
|
||||
/* Fix hover states on mobile */
|
||||
.group:active .group-hover\:opacity-100,
|
||||
.group .group-hover\:opacity-100 {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
.group-hover\:opacity-100 {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.hover\:bg-gray-50:hover,
|
||||
.hover\:bg-gray-100:hover,
|
||||
.hover\:bg-red-200:hover,
|
||||
.dark\:hover\:bg-gray-700:hover,
|
||||
.dark\:hover\:bg-red-900\/50:hover {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Touch device optimizations for all screen sizes */
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
.touch\:opacity-100 {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Completely disable hover states on touch devices */
|
||||
* {
|
||||
-webkit-tap-highlight-color: transparent !important;
|
||||
}
|
||||
|
||||
/* Only disable hover states for interactive elements, not containers */
|
||||
button:hover,
|
||||
[role="button"]:hover,
|
||||
.cursor-pointer:hover,
|
||||
a:hover,
|
||||
.hover\:bg-gray-50:hover,
|
||||
.hover\:bg-gray-100:hover,
|
||||
.hover\:text-gray-900:hover,
|
||||
.hover\:opacity-100:hover {
|
||||
background-color: inherit !important;
|
||||
color: inherit !important;
|
||||
opacity: inherit !important;
|
||||
transform: inherit !important;
|
||||
}
|
||||
|
||||
/* Preserve backgrounds for containers and modals */
|
||||
.fixed:hover,
|
||||
.modal:hover,
|
||||
.bg-white:hover,
|
||||
.bg-gray-800:hover,
|
||||
.bg-gray-900:hover,
|
||||
[class*="bg-"]:hover {
|
||||
background-color: revert !important;
|
||||
}
|
||||
|
||||
/* Force buttons to be immediately clickable */
|
||||
button, [role="button"], .cursor-pointer {
|
||||
cursor: pointer !important;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
|
||||
/* Keep active states for immediate feedback */
|
||||
.active\:scale-\[0\.98\]:active,
|
||||
.active\:scale-95:active {
|
||||
transform: scale(0.98) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Safe area support for iOS devices */
|
||||
.ios-bottom-safe {
|
||||
padding-bottom: max(env(safe-area-inset-bottom), 12px);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.chat-input-mobile {
|
||||
padding-bottom: calc(60px + max(env(safe-area-inset-bottom), 12px));
|
||||
}
|
||||
}
|
||||
|
||||
/* Text wrapping improvements */
|
||||
.chat-message {
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
/* Force wrap long URLs and code */
|
||||
.chat-message pre,
|
||||
.chat-message code {
|
||||
white-space: pre-wrap !important;
|
||||
word-break: break-all;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
/* Prevent horizontal scroll in chat area */
|
||||
.chat-message * {
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user