@endlessblink/like-i-said-v2/src/styles/themes/dropdown-fix.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.

/* Dropdown and Theme Popup Fixes */

/* Ensure proper color definitions for popover elements */
.theme-dark {
  --popover: 222 23% 7%;
  --popover-foreground: 210 40% 98%;
  --accent: 262 45% 18%;
  --accent-foreground: 220 15% 98%;
}

.theme-light {
  --popover: 0 0% 100%;
  --popover-foreground: 222 84% 4.9%;
  --accent: 210 40% 94%;
  --accent-foreground: 222 84% 10%;
}

.theme-neutral-bright {
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 15%;
  --accent: 0 0% 92%;
  --accent-foreground: 0 0% 20%;
}

.theme-blue {
  --popover: 221 39% 8%;
  --popover-foreground: 210 40% 98%;
  --accent: 217 33% 12%;
  --accent-foreground: 210 40% 98%;
}

.theme-green {
  --popover: 151 25% 7%;
  --popover-foreground: 150 30% 98%;
  --accent: 148 25% 12%;
  --accent-foreground: 150 30% 98%;
}

/* Fix dropdown menu animations */
[data-radix-popper-content-wrapper] {
  will-change: transform, opacity;
}

/* Ensure dropdown items have proper contrast */
[role="menu"] [role="menuitem"] {
  color: hsl(var(--popover-foreground));
  background-color: transparent;
  transition: background-color 150ms ease;
}

[role="menu"] [role="menuitem"]:hover,
[role="menu"] [role="menuitem"]:focus {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  outline: none;
}

/* Fix submenu positioning and animation */
[data-radix-menu-content][data-side="right"] {
  animation: slideInFromLeft 150ms ease-out;
}

[data-radix-menu-content][data-side="left"] {
  animation: slideInFromRight 150ms ease-out;
}

@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-2px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(2px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Ensure checkmark is visible */
[role="menu"] [role="menuitem"] .text-primary {
  color: hsl(var(--primary));
}

/* Fix Settings button rotation animation */
.group:hover .group-hover\:rotate-45 {
  transform: rotate(45deg);
  transition: transform 200ms ease;
}

/* Ensure dropdown background is visible */
[data-radix-popper-content-wrapper] > div {
  background-color: hsl(var(--popover));
  border-color: hsl(var(--border));
}