/* Enhanced CSS Transitions for Claude Conversation Logger Dashboard */
/* Accordion transition for advanced filters */
.accordion-enter-active,
.accordion-leave-active {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
max-height: 500px;
opacity: 1;
overflow: hidden;
}
.accordion-enter-from,
.accordion-leave-to {
max-height: 0;
opacity: 0;
transform: scaleY(0.95);
}
/* Smooth transitions for conversation items */
.conversation-item {
transition: all 0.2s ease-in-out;
}
.conversation-item:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.dark .conversation-item:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* Project filter transitions */
.project-card {
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.project-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}
.dark .project-card:hover {
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}
/* Search filters smooth animations */
.filter-badge {
transition: all 0.15s ease-in-out;
}
.filter-badge:hover {
transform: scale(1.05);
}
/* Loading states with smooth transitions */
.loading-overlay {
transition: opacity 0.2s ease-in-out;
}
.loading-spinner {
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Fade transitions for view changes */
.view-transition-enter-active,
.view-transition-leave-active {
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.view-transition-enter-from {
opacity: 0;
transform: translateX(10px);
}
.view-transition-leave-to {
opacity: 0;
transform: translateX(-10px);
}
/* Stats cards smooth updates */
.stats-card {
transition: all 0.3s ease-in-out;
}
.stats-number {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Message bubbles transitions */
.message-bubble {
transition: all 0.2s ease-in-out;
will-change: transform, opacity;
}
.message-enter-active {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.message-enter-from {
opacity: 0;
transform: translateY(20px) scale(0.95);
}
/* Real-time activity indicators */
.activity-indicator {
transition: all 0.15s ease-in-out;
}
.activity-indicator.active {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.7; }
100% { opacity: 1; }
}
/* Connection status indicators */
.connection-status {
transition: all 0.3s ease-in-out;
}
.connection-status.connected {
animation: connectionPulse 3s infinite;
}
@keyframes connectionPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
/* Virtual scroll smooth scrolling */
.virtual-scroll-container {
scroll-behavior: smooth;
transition: height 0.2s ease-in-out;
}
/* Button hover transitions */
.btn-primary {
transition: all 0.15s ease-in-out;
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.btn-secondary {
transition: all 0.15s ease-in-out;
}
.btn-secondary:hover {
transform: translateY(-1px);
}
/* Form input focus transitions */
.form-input {
transition: all 0.2s ease-in-out;
}
.form-input:focus {
transform: scale(1.02);
}
/* Breadcrumb navigation transitions */
.breadcrumb-item {
transition: all 0.15s ease-in-out;
}
.breadcrumb-item:hover {
transform: translateX(2px);
}
/* Dark mode transitions */
* {
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
/* Performance optimizations */
.gpu-accelerated {
will-change: transform;
transform: translateZ(0);
}
/* Reduce motion for accessibility */
@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;
}
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.conversation-item:hover {
border: 2px solid currentColor;
}
.project-card:hover {
border: 2px solid currentColor;
}
}
/* Focus indicators for keyboard navigation */
.focus-visible {
outline: 2px solid #3B82F6;
outline-offset: 2px;
}
/* Smooth scrollbar transitions */
::-webkit-scrollbar {
transition: all 0.2s ease-in-out;
}
::-webkit-scrollbar:hover {
width: 8px;
}
/* Export dialog transitions */
.modal-overlay {
transition: opacity 0.25s ease-in-out;
}
.modal-content {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal-enter-from {
opacity: 0;
transform: scale(0.95) translateY(10px);
}
.modal-leave-to {
opacity: 0;
transform: scale(0.95) translateY(10px);
}
/* Search highlight animations */
.search-highlight {
background: linear-gradient(120deg, #fbbf24 0%, #f59e0b 100%);
animation: highlightFade 0.3s ease-in-out;
}
@keyframes highlightFade {
from { background-color: #fef3c7; }
to { background-color: transparent; }
}
/* Real-time update animations */
.new-message {
animation: slideInFromRight 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes slideInFromRight {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Status badges transitions */
.status-badge {
transition: all 0.2s ease-in-out;
}
.status-badge.active {
animation: statusPulse 2s infinite;
}
@keyframes statusPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.8; }
}
/* Data loading skeleton animations */
.skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeletonLoading 1.5s infinite;
}
@keyframes skeletonLoading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.dark .skeleton {
background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
background-size: 200% 100%;
}
