@endlessblink/like-i-said-v2/src/styles/themes/theme-improvements.css

Task Management & Memory for Claude - Track tasks, remember context, and maintain continuity across sessions with 27 powerful tools. Works with Claude Desktop and Claude Code.

/* Theme Improvements CSS */
/* Fixes for visual issues and better light theme support */

/* Enhanced theme variables for better contrast */
:root {
  /* Improved contrast ratios for light themes */
  --shadow-light: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  
  /* Light theme specific shadows */
  --shadow-light-theme: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.08);
  --shadow-medium-theme: 0 4px 6px -1px rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.08);
  --shadow-large-theme: 0 10px 15px -3px rgba(0, 0, 0, 0.12), 0 4px 6px -2px rgba(0, 0, 0, 0.06);
}

/* Theme-specific styles */
.theme-light,
.theme-neutral-bright {
  /* Enhanced shadows for light themes */
  --shadow-sm: var(--shadow-light-theme);
  --shadow: var(--shadow-medium-theme);
  --shadow-lg: var(--shadow-large-theme);
  
  /* Better text contrast */
  --text-opacity: 1;
  --text-secondary-opacity: 0.8;
  --text-muted-opacity: 0.6;
}

.theme-dark,
.theme-blue,
.theme-green {
  /* Standard shadows for dark themes */
  --shadow-sm: var(--shadow-light);
  --shadow: var(--shadow-medium);
  --shadow-lg: var(--shadow-large);
  
  --text-opacity: 1;
  --text-secondary-opacity: 0.9;
  --text-muted-opacity: 0.7;
}

/* Enhanced card styling for better visual hierarchy */
.card-enhanced {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease-in-out;
}

.card-enhanced:hover {
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

/* Light theme specific fixes */
.theme-light .bg-gray-800,
.theme-neutral-bright .bg-gray-800 {
  background-color: hsl(var(--card)) !important;
}

.theme-light .bg-gray-700,
.theme-neutral-bright .bg-gray-700 {
  background-color: hsl(var(--muted)) !important;
}

.theme-light .text-gray-300,
.theme-neutral-bright .text-gray-300 {
  color: hsl(var(--foreground) / var(--text-opacity)) !important;
}

.theme-light .text-gray-400,
.theme-neutral-bright .text-gray-400 {
  color: hsl(var(--muted-foreground) / var(--text-secondary-opacity)) !important;
}

.theme-light .text-gray-500,
.theme-neutral-bright .text-gray-500 {
  color: hsl(var(--muted-foreground) / var(--text-muted-opacity)) !important;
}

.theme-light .border-gray-700,
.theme-neutral-bright .border-gray-700 {
  border-color: hsl(var(--border)) !important;
}

.theme-light .border-gray-600,
.theme-neutral-bright .border-gray-600 {
  border-color: hsl(var(--border)) !important;
}

/* Enhanced input styling for light themes */
.theme-light input,
.theme-light textarea,
.theme-light select,
.theme-neutral-bright input,
.theme-neutral-bright textarea,
.theme-neutral-bright select {
  background-color: hsl(var(--input));
  border-color: hsl(var(--border));
  color: hsl(var(--foreground));
}

.theme-light input:focus,
.theme-light textarea:focus,
.theme-light select:focus,
.theme-neutral-bright input:focus,
.theme-neutral-bright textarea:focus,
.theme-neutral-bright select:focus {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
  border-color: hsl(var(--ring));
}

/* Enhanced button styling */
.btn-primary {
  background: hsl(var(--primary-500));
  color: white;
  border: 1px solid hsl(var(--primary-600));
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease-in-out;
}

.btn-primary:hover {
  background: hsl(var(--primary-600));
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.btn-secondary {
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease-in-out;
}

.btn-secondary:hover {
  background: hsl(var(--muted));
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

/* Enhanced dropdown and popover styling */
.theme-light .dropdown-content,
.theme-light .popover-content,
.theme-neutral-bright .dropdown-content,
.theme-neutral-bright .popover-content {
  background: hsl(var(--popover));
  border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(8px);
}

/* Enhanced glass effect for light themes */
.theme-light .glass-effect,
.theme-neutral-bright .glass-effect {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-medium-theme);
}

/* Memory card enhancements */
.memory-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  padding: 1rem;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease-in-out;
}

.memory-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  border-color: hsl(var(--ring) / 0.3);
}

/* Enhanced text readability */
.text-enhanced {
  color: hsl(var(--foreground) / var(--text-opacity));
}

.text-secondary-enhanced {
  color: hsl(var(--muted-foreground) / var(--text-secondary-opacity));
}

.text-muted-enhanced {
  color: hsl(var(--muted-foreground) / var(--text-muted-opacity));
}

/* Quality badge improvements for light themes */
.theme-light .quality-badge,
.theme-neutral-bright .quality-badge {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-sm);
}

/* Navigation improvements for light themes */
.theme-light .nav-item,
.theme-neutral-bright .nav-item {
  border-radius: 6px;
  transition: all 0.2s ease-in-out;
}

.theme-light .nav-item:hover,
.theme-neutral-bright .nav-item:hover {
  background: hsl(var(--muted));
  box-shadow: var(--shadow-sm);
}

/* Search and filter improvements */
.theme-light .search-container,
.theme-neutral-bright .search-container {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

/* Badge and tag improvements */
.theme-light .badge,
.theme-light .tag,
.theme-neutral-bright .badge,
.theme-neutral-bright .tag {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-sm);
}

/* Enhanced focus states for accessibility */
.theme-light *:focus-visible,
.theme-neutral-bright *:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.1);
}

/* Smooth theme transitions */
* {
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Ensure proper text contrast for all themes */
.contrast-text {
  color: hsl(var(--foreground));
}

.contrast-text-muted {
  color: hsl(var(--muted-foreground));
}

/* Loading and skeleton improvements */
.theme-light .skeleton,
.theme-neutral-bright .skeleton {
  background: linear-gradient(
    90deg,
    hsl(var(--muted)) 25%,
    hsl(var(--border)) 50%,
    hsl(var(--muted)) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}