mirror of
https://github.com/siteboon/claudecodeui.git
synced 2025-12-11 17:19:38 +00:00
Update package dependencies, add Git API routes, and implement audio transcription functionality. Introduce new components for Git management, enhance chat interface with microphone support, and improve UI elements for better user experience.
This commit is contained in:
Simos
485
src/index.css
485
src/index.css
@@ -2,6 +2,25 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* Global spinner animation - defined early to ensure it loads */
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
@@ -53,6 +72,7 @@
|
||||
* {
|
||||
@apply border-border;
|
||||
box-sizing: border-box;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -67,9 +87,106 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Global transition defaults */
|
||||
button,
|
||||
a,
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
[role="button"],
|
||||
.transition-all {
|
||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Color transitions for theme switching */
|
||||
* {
|
||||
transition: background-color 200ms ease-in-out,
|
||||
border-color 200ms ease-in-out,
|
||||
color 200ms ease-in-out;
|
||||
}
|
||||
|
||||
/* Transform transitions */
|
||||
.transition-transform {
|
||||
transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Opacity transitions */
|
||||
.transition-opacity {
|
||||
transition: opacity 200ms ease-in-out;
|
||||
}
|
||||
|
||||
/* Scale transitions for interactions */
|
||||
.transition-scale {
|
||||
transition: transform 100ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Shadow transitions */
|
||||
.transition-shadow {
|
||||
transition: box-shadow 200ms ease-in-out;
|
||||
}
|
||||
|
||||
/* Respect reduced motion preference */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
/* Smooth hover transitions for interactive elements */
|
||||
button:hover,
|
||||
a:hover,
|
||||
[role="button"]:hover {
|
||||
transition-duration: 100ms;
|
||||
}
|
||||
|
||||
/* Active state transitions */
|
||||
button:active,
|
||||
a:active,
|
||||
[role="button"]:active {
|
||||
transition-duration: 50ms;
|
||||
}
|
||||
|
||||
/* Focus transitions */
|
||||
button:focus-visible,
|
||||
a:focus-visible,
|
||||
input:focus-visible,
|
||||
textarea:focus-visible,
|
||||
select:focus-visible {
|
||||
transition: outline-offset 150ms ease-out, box-shadow 150ms ease-out;
|
||||
}
|
||||
|
||||
/* Sidebar transitions */
|
||||
.sidebar-transition {
|
||||
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
opacity 300ms ease-in-out;
|
||||
}
|
||||
|
||||
/* Modal and dropdown transitions */
|
||||
.modal-transition {
|
||||
transition: opacity 200ms ease-in-out,
|
||||
transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Chat message transitions */
|
||||
.message-transition {
|
||||
transition: opacity 300ms ease-in-out,
|
||||
transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Height transitions for expanding elements */
|
||||
.height-transition {
|
||||
transition: height 200ms ease-in-out,
|
||||
max-height 200ms ease-in-out;
|
||||
}
|
||||
|
||||
.scrollbar-thin {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: hsl(var(--muted-foreground)) transparent;
|
||||
@@ -77,6 +194,7 @@
|
||||
|
||||
.scrollbar-thin::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.scrollbar-thin::-webkit-scrollbar-track {
|
||||
@@ -91,6 +209,222 @@
|
||||
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
|
||||
background-color: hsl(var(--muted-foreground) / 0.8);
|
||||
}
|
||||
|
||||
/* Dark mode scrollbar styles */
|
||||
.dark .scrollbar-thin {
|
||||
scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
|
||||
}
|
||||
|
||||
.dark .scrollbar-thin::-webkit-scrollbar-track {
|
||||
background: rgba(31, 41, 55, 0.3);
|
||||
}
|
||||
|
||||
.dark .scrollbar-thin::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(156, 163, 175, 0.5);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.dark .scrollbar-thin::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(156, 163, 175, 0.7);
|
||||
}
|
||||
|
||||
/* Global scrollbar styles for main content areas */
|
||||
.dark::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.dark::-webkit-scrollbar-track {
|
||||
background: rgba(31, 41, 55, 0.5);
|
||||
}
|
||||
|
||||
.dark::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(107, 114, 128, 0.5);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.dark::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(107, 114, 128, 0.7);
|
||||
}
|
||||
|
||||
/* Firefox scrollbar styles */
|
||||
.dark {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(107, 114, 128, 0.5) rgba(31, 41, 55, 0.5);
|
||||
}
|
||||
|
||||
/* Ensure checkbox styling is preserved */
|
||||
input[type="checkbox"] {
|
||||
@apply accent-blue-600;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:focus {
|
||||
opacity: 1;
|
||||
outline: 2px solid hsl(var(--ring));
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Fix checkbox appearance in dark mode */
|
||||
.dark input[type="checkbox"] {
|
||||
background-color: rgb(31 41 55); /* gray-800 */
|
||||
border-color: rgb(75 85 99); /* gray-600 */
|
||||
color: rgb(37 99 235); /* blue-600 */
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
.dark input[type="checkbox"]:checked {
|
||||
background-color: rgb(37 99 235); /* blue-600 */
|
||||
border-color: rgb(37 99 235); /* blue-600 */
|
||||
}
|
||||
|
||||
.dark input[type="checkbox"]:focus {
|
||||
--tw-ring-color: rgb(59 130 246); /* blue-500 */
|
||||
--tw-ring-offset-color: rgb(31 41 55); /* gray-800 */
|
||||
}
|
||||
|
||||
/* Fix radio button appearance in dark mode */
|
||||
.dark input[type="radio"] {
|
||||
background-color: rgb(31 41 55); /* gray-800 */
|
||||
border-color: rgb(75 85 99); /* gray-600 */
|
||||
color: rgb(37 99 235); /* blue-600 */
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
.dark input[type="radio"]:checked {
|
||||
background-color: rgb(37 99 235); /* blue-600 */
|
||||
border-color: rgb(37 99 235); /* blue-600 */
|
||||
}
|
||||
|
||||
.dark input[type="radio"]:focus {
|
||||
--tw-ring-color: rgb(59 130 246); /* blue-500 */
|
||||
--tw-ring-offset-color: rgb(31 41 55); /* gray-800 */
|
||||
}
|
||||
|
||||
/* Ensure textarea text is always visible in dark mode */
|
||||
textarea {
|
||||
color-scheme: light dark;
|
||||
}
|
||||
|
||||
.dark textarea {
|
||||
color: rgb(243 244 246) !important; /* gray-100 */
|
||||
-webkit-text-fill-color: rgb(243 244 246) !important;
|
||||
caret-color: rgb(243 244 246) !important;
|
||||
}
|
||||
|
||||
/* Fix for focus state in dark mode */
|
||||
.dark textarea:focus {
|
||||
color: rgb(243 244 246) !important;
|
||||
-webkit-text-fill-color: rgb(243 244 246) !important;
|
||||
}
|
||||
|
||||
/* Fix for iOS/Safari dark mode textarea issues */
|
||||
@supports (-webkit-touch-callout: none) {
|
||||
.dark textarea {
|
||||
background-color: transparent !important;
|
||||
color: rgb(243 244 246) !important;
|
||||
-webkit-text-fill-color: rgb(243 244 246) !important;
|
||||
}
|
||||
|
||||
.dark textarea:focus {
|
||||
background-color: transparent !important;
|
||||
color: rgb(243 244 246) !important;
|
||||
-webkit-text-fill-color: rgb(243 244 246) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ensure parent container doesn't override textarea styles */
|
||||
.dark .bg-gray-800 textarea {
|
||||
color: rgb(243 244 246) !important;
|
||||
-webkit-text-fill-color: rgb(243 244 246) !important;
|
||||
}
|
||||
|
||||
/* Fix focus-within container issues in dark mode */
|
||||
.dark .focus-within\:ring-2:focus-within {
|
||||
background-color: rgb(31 41 55) !important; /* gray-800 */
|
||||
}
|
||||
|
||||
/* Ensure textarea remains transparent with visible text */
|
||||
.dark textarea.bg-transparent {
|
||||
background-color: transparent !important;
|
||||
color: rgb(243 244 246) !important;
|
||||
-webkit-text-fill-color: rgb(243 244 246) !important;
|
||||
}
|
||||
|
||||
/* Fix placeholder text color to be properly gray */
|
||||
textarea::placeholder {
|
||||
color: rgb(156 163 175) !important; /* gray-400 */
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.dark textarea::placeholder {
|
||||
color: rgb(75 85 99) !important; /* gray-600 - darker gray */
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* More specific selector for chat input textarea */
|
||||
.dark .bg-gray-800 textarea::placeholder,
|
||||
.dark textarea.bg-transparent::placeholder {
|
||||
color: rgb(75 85 99) !important; /* gray-600 - darker gray */
|
||||
opacity: 1 !important;
|
||||
-webkit-text-fill-color: rgb(75 85 99) !important;
|
||||
}
|
||||
|
||||
/* Custom class for chat input placeholder */
|
||||
.chat-input-placeholder::placeholder {
|
||||
color: rgb(156 163 175) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.dark .chat-input-placeholder::placeholder {
|
||||
color: rgb(75 85 99) !important;
|
||||
opacity: 1 !important;
|
||||
-webkit-text-fill-color: rgb(75 85 99) !important;
|
||||
}
|
||||
|
||||
.chat-input-placeholder::-webkit-input-placeholder {
|
||||
color: rgb(156 163 175) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.dark .chat-input-placeholder::-webkit-input-placeholder {
|
||||
color: rgb(75 85 99) !important;
|
||||
opacity: 1 !important;
|
||||
-webkit-text-fill-color: rgb(75 85 99) !important;
|
||||
}
|
||||
|
||||
/* WebKit specific placeholder styles */
|
||||
textarea::-webkit-input-placeholder {
|
||||
color: rgb(156 163 175) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.dark textarea::-webkit-input-placeholder {
|
||||
color: rgb(75 85 99) !important; /* gray-600 - darker gray */
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Mozilla specific placeholder styles */
|
||||
textarea::-moz-placeholder {
|
||||
color: rgb(156 163 175) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.dark textarea::-moz-placeholder {
|
||||
color: rgb(75 85 99) !important; /* gray-600 - darker gray */
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* IE/Edge specific placeholder styles */
|
||||
textarea:-ms-input-placeholder {
|
||||
color: rgb(156 163 175) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.dark textarea:-ms-input-placeholder {
|
||||
color: rgb(75 85 99) !important; /* gray-600 - darker gray */
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile optimizations and components */
|
||||
@@ -102,6 +436,12 @@
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
/* Preserve checkbox visibility */
|
||||
input[type="checkbox"] {
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
button,
|
||||
[role="button"],
|
||||
.clickable,
|
||||
@@ -132,6 +472,12 @@
|
||||
@apply w-full sm:max-w-[95%];
|
||||
}
|
||||
|
||||
/* Session name truncation on mobile */
|
||||
.session-name-mobile {
|
||||
@apply truncate;
|
||||
max-width: calc(100vw - 120px); /* Account for sidebar padding and buttons */
|
||||
}
|
||||
|
||||
/* Enable text selection on mobile for terminal */
|
||||
.xterm,
|
||||
.xterm .xterm-viewport {
|
||||
@@ -182,6 +528,12 @@
|
||||
-webkit-tap-highlight-color: transparent !important;
|
||||
}
|
||||
|
||||
/* Preserve checkbox visibility on touch devices */
|
||||
input[type="checkbox"] {
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Only disable hover states for interactive elements, not containers */
|
||||
button:hover,
|
||||
[role="button"]:hover,
|
||||
@@ -251,4 +603,137 @@
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide markdown backticks in prose content */
|
||||
.prose code::before,
|
||||
.prose code::after {
|
||||
content: "" !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Custom spinner animation for mobile compatibility */
|
||||
@layer utilities {
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-spin {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
/* Force hardware acceleration for smoother animation on mobile */
|
||||
.loading-spinner {
|
||||
animation: spin 1s linear infinite;
|
||||
will-change: transform;
|
||||
transform: translateZ(0);
|
||||
-webkit-transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
/* Improved textarea styling */
|
||||
.chat-input-placeholder {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
|
||||
}
|
||||
|
||||
.chat-input-placeholder::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.chat-input-placeholder::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.chat-input-placeholder::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(156, 163, 175, 0.3);
|
||||
border-radius: 3px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.chat-input-placeholder::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(156, 163, 175, 0.5);
|
||||
}
|
||||
|
||||
.dark .chat-input-placeholder {
|
||||
scrollbar-color: rgba(107, 114, 128, 0.3) transparent;
|
||||
}
|
||||
|
||||
.dark .chat-input-placeholder::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(107, 114, 128, 0.3);
|
||||
}
|
||||
|
||||
.dark .chat-input-placeholder::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(107, 114, 128, 0.5);
|
||||
}
|
||||
|
||||
/* Enhanced box shadow when textarea expands */
|
||||
.chat-input-expanded {
|
||||
box-shadow: 0 -5px 15px -3px rgba(0, 0, 0, 0.1), 0 -4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.dark .chat-input-expanded {
|
||||
box-shadow: 0 -5px 15px -3px rgba(0, 0, 0, 0.3), 0 -4px 6px -2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Fix focus ring offset color in dark mode */
|
||||
.dark [class*="ring-offset"] {
|
||||
--tw-ring-offset-color: rgb(31 41 55); /* gray-800 */
|
||||
}
|
||||
|
||||
/* Ensure buttons don't show white backgrounds in dark mode */
|
||||
.dark button:focus {
|
||||
--tw-ring-offset-color: rgb(31 41 55); /* gray-800 */
|
||||
}
|
||||
|
||||
/* Fix mobile select dropdown styling */
|
||||
@supports (-webkit-touch-callout: none) {
|
||||
select {
|
||||
font-size: 16px !important;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Improve select appearance in dark mode */
|
||||
.dark select {
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 0.5rem center;
|
||||
background-size: 1.5em 1.5em;
|
||||
padding-right: 2.5rem;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
select {
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 0.5rem center;
|
||||
background-size: 1.5em 1.5em;
|
||||
padding-right: 2.5rem;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
/* Fix select option text in mobile */
|
||||
select option {
|
||||
font-size: 16px !important;
|
||||
padding: 8px !important;
|
||||
background-color: var(--background) !important;
|
||||
color: var(--foreground) !important;
|
||||
}
|
||||
|
||||
.dark select option {
|
||||
background-color: rgb(31 41 55) !important;
|
||||
color: rgb(243 244 246) !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user