/** * JTZL_WebIRC_Chat - Global Styles with Tailwind v4 and OKLCH Colors * * @package JTZL_WebIRC_Chat * @copyright Copyright (c) 2025, JT. G. * @license GPL-3.0+ * @since 3.0.0 */ @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated color tokens for modern IRC chat design */ --chat-webirc-background: oklch(1 0 0); /* Pure white */ --chat-webirc-foreground: oklch(0.35 0 0); /* Slate text */ --chat-webirc-card: oklch(0.98 0.005 200); /* Soft off-white for messages */ --chat-webirc-card-foreground: oklch(0.35 0 0); --chat-webirc-popover: oklch(1 0 0); --chat-webirc-popover-foreground: oklch(0.35 0 0); --chat-webirc-primary: oklch(0.35 0.08 200); /* Deep cyan */ --chat-webirc-primary-foreground: oklch(1 0 0); --chat-webirc-secondary: oklch(0.75 0.15 120); /* Bright green accent */ --chat-webirc-secondary-foreground: oklch(1 0 0); --chat-webirc-muted: oklch(0.96 0.005 120); /* Light green muted */ --chat-webirc-muted-foreground: oklch(0.45 0 0); --chat-webirc-accent: oklch(0.75 0.15 120); /* Bright green */ --chat-webirc-accent-foreground: oklch(1 0 0); --chat-webirc-destructive: oklch(0.55 0.25 15); --chat-webirc-destructive-foreground: oklch(1 0 0); --chat-webirc-border: oklch(0.85 0 0); --chat-webirc-input: oklch(0.95 0 0); --chat-webirc-ring: oklch(0.35 0.08 200 / 0.5); --chat-webirc-chart-1: oklch(0.9 0.02 200); --chat-webirc-chart-2: oklch(0.85 0.04 200); --chat-webirc-chart-3: oklch(0.8 0.06 200); --chat-webirc-chart-4: oklch(0.75 0.08 200); --chat-webirc-chart-5: oklch(0.7 0.1 200); --chat-webirc-radius: 0.3rem; --chat-webirc-sidebar: oklch(0.96 0.005 120); --chat-webirc-sidebar-foreground: oklch(0.45 0 0); --chat-webirc-sidebar-primary: oklch(0.35 0.08 200); --chat-webirc-sidebar-primary-foreground: oklch(1 0 0); --chat-webirc-sidebar-accent: oklch(0.75 0.15 120); --chat-webirc-sidebar-accent-foreground: oklch(1 0 0); --chat-webirc-sidebar-border: oklch(0.85 0 0); --chat-webirc-sidebar-ring: oklch(0.35 0.08 200 / 0.5); /* IRC-specific colors */ --chat-webirc-irc-nick-bg: oklch(0.75 0.15 120); --chat-webirc-irc-nick-fg: oklch(1 0 0); --chat-webirc-irc-system: oklch(0.45 0 0); --chat-webirc-irc-notice: oklch(0.6 0.15 200); --chat-webirc-irc-self: oklch(0.35 0.08 200); --chat-webirc-irc-error: oklch(0.55 0.25 15); --chat-webirc-irc-action: oklch(0.65 0.1 160); --chat-webirc-irc-timestamp: oklch(0.45 0 0); } :root.dark { /* Updated dark mode tokens */ --chat-webirc-background: oklch(0.1 0 0); --chat-webirc-foreground: oklch(0.9 0 0); --chat-webirc-card: oklch(0.15 0 0); --chat-webirc-card-foreground: oklch(0.9 0 0); --chat-webirc-popover: oklch(0.1 0 0); --chat-webirc-popover-foreground: oklch(0.9 0 0); --chat-webirc-primary: oklch(0.6 0.15 200); --chat-webirc-primary-foreground: oklch(0.1 0 0); --chat-webirc-secondary: oklch(0.25 0 0); --chat-webirc-secondary-foreground: oklch(0.9 0 0); --chat-webirc-muted: oklch(0.25 0 0); --chat-webirc-muted-foreground: oklch(0.65 0 0); --chat-webirc-accent: oklch(0.75 0.15 120); --chat-webirc-accent-foreground: oklch(0.1 0 0); --chat-webirc-destructive: oklch(0.5 0.2 15); --chat-webirc-destructive-foreground: oklch(0.9 0 0); --chat-webirc-border: oklch(0.25 0 0); --chat-webirc-input: oklch(0.25 0 0); --chat-webirc-ring: oklch(0.6 0.15 200 / 0.5); --chat-webirc-chart-1: oklch(0.6 0.15 200); --chat-webirc-chart-2: oklch(0.65 0.12 180); --chat-webirc-chart-3: oklch(0.7 0.1 160); --chat-webirc-chart-4: oklch(0.75 0.08 140); --chat-webirc-chart-5: oklch(0.8 0.06 120); --chat-webirc-sidebar: oklch(0.15 0 0); --chat-webirc-sidebar-foreground: oklch(0.9 0 0); --chat-webirc-sidebar-primary: oklch(0.6 0.15 200); --chat-webirc-sidebar-primary-foreground: oklch(0.1 0 0); --chat-webirc-sidebar-accent: oklch(0.25 0 0); --chat-webirc-sidebar-accent-foreground: oklch(0.9 0 0); --chat-webirc-sidebar-border: oklch(0.25 0 0); --chat-webirc-sidebar-ring: oklch(0.6 0.15 200 / 0.5); /* IRC-specific colors - dark mode */ --chat-webirc-irc-nick-bg: oklch(0.75 0.15 120); --chat-webirc-irc-nick-fg: oklch(0.1 0 0); --chat-webirc-irc-system: oklch(0.65 0 0); --chat-webirc-irc-notice: oklch(0.6 0.15 200); --chat-webirc-irc-self: oklch(0.6 0.15 200); --chat-webirc-irc-error: oklch(0.5 0.2 15); --chat-webirc-irc-action: oklch(0.7 0.1 160); --chat-webirc-irc-timestamp: oklch(0.65 0 0); } @theme inline { --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-background: var(--chat-webirc-background); --color-foreground: var(--chat-webirc-foreground); --color-card: var(--chat-webirc-card); --color-card-foreground: var(--chat-webirc-card-foreground); --color-popover: var(--chat-webirc-popover); --color-popover-foreground: var(--chat-webirc-popover-foreground); --color-primary: var(--chat-webirc-primary); --color-primary-foreground: var(--chat-webirc-primary-foreground); --color-secondary: var(--chat-webirc-secondary); --color-secondary-foreground: var(--chat-webirc-secondary-foreground); --color-muted: var(--chat-webirc-muted); --color-muted-foreground: var(--chat-webirc-muted-foreground); --color-accent: var(--chat-webirc-accent); --color-accent-foreground: var(--chat-webirc-accent-foreground); --color-destructive: var(--chat-webirc-destructive); --color-destructive-foreground: var(--chat-webirc-destructive-foreground); --color-border: var(--chat-webirc-border); --color-input: var(--chat-webirc-input); --color-ring: var(--chat-webirc-ring); --color-chart-1: var(--chat-webirc-chart-1); --color-chart-2: var(--chat-webirc-chart-2); --color-chart-3: var(--chat-webirc-chart-3); --color-chart-4: var(--chat-webirc-chart-4); --color-chart-5: var(--chat-webirc-chart-5); --radius-sm: calc(var(--chat-webirc-radius) - 4px); --radius-md: calc(var(--chat-webirc-radius) - 2px); --radius-lg: var(--chat-webirc-radius); --radius-xl: calc(var(--chat-webirc-radius) + 4px); --color-sidebar: var(--chat-webirc-sidebar); --color-sidebar-foreground: var(--chat-webirc-sidebar-foreground); --color-sidebar-primary: var(--chat-webirc-sidebar-primary); --color-sidebar-primary-foreground: var(--chat-webirc-sidebar-primary-foreground); --color-sidebar-accent: var(--chat-webirc-sidebar-accent); --color-sidebar-accent-foreground: var(--chat-webirc-sidebar-accent-foreground); --color-sidebar-border: var(--chat-webirc-sidebar-border); --color-sidebar-ring: var(--chat-webirc-sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } /* Smooth theme transitions */ :root { transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1); } body { @apply bg-background text-foreground; transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Apply smooth transitions to all elements that use theme colors */ * { transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Respect user's motion preferences */ @media (prefers-reduced-motion: reduce) { :root, body, * { transition: none !important; animation: none !important; } .theme-toggle svg { transition: none !important; } .theme-toggle:hover svg { transform: none !important; } .system-indicator { animation: none !important; } } } /* Screen reader only text */ @layer base { .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } } /* Theme toggle improvements with smooth transitions */ @layer components { .theme-toggle { position: relative; transition: all 0.2s ease; overflow: hidden; } .theme-toggle:focus-visible { outline: 2px solid hsl(var(--chat-webirc-ring)); outline-offset: 2px; } /* Icon transition animations */ .theme-toggle svg { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: center; } .theme-toggle:hover svg { transform: scale(1.1) rotate(15deg); } /* System theme indicator animation */ .theme-toggle .system-indicator { transition: all 0.2s ease; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } } /* IRC Chat specific styles with theme variables - High Priority Layer */ @layer components, plugin-isolation; @layer plugin-isolation { /* Force smaller font sizes and padding to override theme's large fonts */ .chat-webirc-wrapper button { background: revert-layer !important; color: revert-layer !important; border: revert-layer !important; box-shadow: revert-layer !important; font-size: 14px !important; line-height: 1.4 !important; /* Force smaller padding for compact buttons */ padding: 8px 12px !important; } /* Specific smaller padding for sidebar buttons */ .chat-webirc-wrapper [data-sidebar] button, .chat-webirc-wrapper .sidebar-menu-item { padding: 6px 8px !important; } /* Even smaller padding for icon buttons */ .chat-webirc-wrapper button[aria-label], .chat-webirc-wrapper .icon-button { padding: 6px !important; } .chat-webirc-wrapper input { background: revert-layer !important; color: revert-layer !important; border: revert-layer !important; box-shadow: revert-layer !important; font-size: 14px !important; line-height: 1.4 !important; } /* Force smaller fonts for sidebar items */ .chat-webirc-wrapper [data-sidebar] button, .chat-webirc-wrapper .sidebar-menu-item { font-size: 14px !important; line-height: 1.4 !important; } /* Force smaller fonts for channel list and user list */ .chat-webirc-wrapper [role="menuitem"], .chat-webirc-wrapper .channel-item, .chat-webirc-wrapper .user-item { font-size: 14px !important; line-height: 1.4 !important; } /* Force smaller fonts for timestamps - balanced size */ /* Force smaller fonts for timestamps - be more specific to avoid flex layout conflicts */ .chat-webirc-wrapper .irc-timestamp, .chat-webirc-wrapper [class*="timestamp"]:not(.flex):not([class*="flex"]) { font-size: 12px !important; line-height: 1.1 !important; white-space: nowrap !important; display: inline-block !important; min-width: 36px !important; flex-shrink: 0 !important; } /* Force smaller font for server address display in sidebar */ .chat-webirc-wrapper .border-sidebar-border .text-xs.text-muted-foreground { font-size: 12px !important; } /* Timestamp styling for system messages only */ .chat-webirc-wrapper [role="log"] > div:not([class*="group"]) > div:first-child { font-size: 12px !important; line-height: 1.1 !important; white-space: nowrap !important; display: inline-block !important; min-width: 36px !important; flex-shrink: 0 !important; } /* Force smaller fonts for chat messages */ .chat-webirc-wrapper [role="log"] { font-size: 13px !important; line-height: 1.45 !important; } /* Force smaller fonts for general text */ .chat-webirc-wrapper span, .chat-webirc-wrapper div:not([class*="bg-"]):not([class*="border-"]) { font-size: 14px !important; line-height: 1.4 !important; } } @layer components { .chat-webirc { /* No border needed - the React component's .chat-webirc-container has the border */ @apply bg-background text-foreground; } /* Force text wrapping for user messages */ .chat-webirc-wrapper .break-words { word-break: break-word !important; overflow-wrap: break-word !important; white-space: pre-wrap !important; max-width: 100% !important; } /* Message content with horizontal scroll capability */ .chat-webirc-wrapper .webirc-message-content { display: block !important; min-width: 0 !important; } /* User messages should wrap */ .chat-webirc-wrapper .webirc-message-content.break-words { word-break: break-word !important; overflow-wrap: break-word !important; white-space: pre-wrap !important; } /* System messages can scroll horizontally */ .chat-webirc-wrapper .webirc-message-content.overflow-x-auto { overflow-x: auto !important; white-space: pre !important; word-break: normal !important; overflow-wrap: normal !important; } /* Force wrapping for message content only (not the header line) */ .chat-webirc-wrapper [role="log"] > div .webirc-message-content { word-break: break-word !important; overflow-wrap: break-word !important; white-space: pre-wrap !important; max-width: 100% !important; display: block !important; } /* Ensure message containers allow proper flex layout */ .chat-webirc-wrapper [role="log"] > div { min-width: 0 !important; max-width: 100% !important; width: 100% !important; } /* Only apply width constraints to message content, not header elements */ .chat-webirc-wrapper [role="log"] .webirc-message-content { max-width: 100% !important; } .irc-wrap { @apply border border-border rounded-lg overflow-hidden; } .irc-header { @apply flex gap-2 items-center p-3 bg-muted/50 text-sm; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; } .irc-nick { @apply px-2 py-1 rounded text-xs font-medium; background-color: hsl(var(--chat-webirc-irc-nick-bg)); color: hsl(var(--chat-webirc-irc-nick-fg)); } .irc-nick:before { content: "@"; } .irc-log { @apply h-96 overflow-auto p-3 bg-background text-sm leading-relaxed; font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } /* Message window scrollbar styles */ .chat-webirc-wrapper [data-slot="scroll-area-viewport"] { scrollbar-width: thin; scrollbar-color: hsl(var(--chat-webirc-border)) transparent; } /* Custom scrollbar styling for webkit browsers */ .chat-webirc-wrapper [data-slot="scroll-area-viewport"]::-webkit-scrollbar { width: 8px; height: 8px; } .chat-webirc-wrapper [data-slot="scroll-area-viewport"]::-webkit-scrollbar-track { background: transparent; } .chat-webirc-wrapper [data-slot="scroll-area-viewport"]::-webkit-scrollbar-thumb { background-color: hsl(var(--chat-webirc-border)); border-radius: 4px; } .chat-webirc-wrapper [data-slot="scroll-area-viewport"]::-webkit-scrollbar-thumb:hover { background-color: hsl(var(--chat-webirc-border) / 0.8); } .chat-webirc-wrapper [data-slot="scroll-area-viewport"]::-webkit-scrollbar-corner { background: transparent; } .irc-form { @apply border-t border-border p-3; } .irc-input-container { @apply flex gap-2 items-center; } .irc-input { @apply flex-1 border border-input rounded-md px-3 py-2 text-sm transition-colors; @apply focus:border-ring focus:ring-2 focus:ring-ring/20 focus:outline-none; } .irc-submit { @apply flex items-center justify-center w-9 h-9 border-0 rounded-md bg-primary text-primary-foreground cursor-pointer transition-colors; @apply hover:bg-primary/90 disabled:bg-muted disabled:cursor-not-allowed; } .irc-submit svg { @apply transition-transform; } /* IRC message types */ .sys { color: hsl(var(--chat-webirc-irc-system)); @apply italic; } .notice { color: hsl(var(--chat-webirc-irc-notice)); } .self { color: hsl(var(--chat-webirc-irc-self)); } .err { color: hsl(var(--chat-webirc-irc-error)); } .action { color: hsl(var(--chat-webirc-irc-action)); @apply italic; } .irc-timestamp { color: hsl(var(--chat-webirc-irc-timestamp)); @apply text-xs font-normal mr-1; } } /* WordPress Theme Isolation Container - CSS Containment Approach */ @layer base { /* Outer PHP wrapper - no height constraints, just isolation */ .chat-webirc-wrapper { /* Strong isolation using CSS containment */ contain: layout style paint !important; position: relative !important; z-index: 999999 !important; isolation: isolate !important; /* Base typography matching v0 app - FORCE SMALLER SIZES */ font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif !important; font-size: 14px !important; line-height: 1.4 !important; color: var(--chat-webirc-foreground) !important; background: var(--chat-webirc-background) !important; /* Ensure proper box model */ box-sizing: border-box !important; /* Smooth theme transitions */ transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Override common theme properties that cause conflicts */ --primary: var(--chat-webirc-primary) !important; --secondary: var(--chat-webirc-secondary) !important; --background: var(--chat-webirc-background) !important; --foreground: var(--chat-webirc-foreground) !important; --border: var(--chat-webirc-border) !important; --input: var(--chat-webirc-input) !important; --ring: var(--chat-webirc-ring) !important; --muted: var(--chat-webirc-muted) !important; --accent: var(--chat-webirc-accent) !important; --destructive: var(--chat-webirc-destructive) !important; --card: var(--chat-webirc-card) !important; --popover: var(--chat-webirc-popover) !important; } /* Inner React component container - with height constraints */ .chat-webirc-container { /* Responsive dimensions for WordPress content */ /* Use min() to ensure chat fits within viewport on mobile */ /* Subtract space for WordPress header, page title, and margins */ height: min(700px, calc(100vh - 200px)) !important; max-height: 700px !important; /* Bottom margin ensures border visibility */ margin: 0 auto 24px auto !important; } /* Targeted reset for WordPress interference while preserving Tailwind */ .chat-webirc-wrapper * { box-sizing: border-box !important; } /* MINIMAL interference - only prevent the most problematic theme overrides */ .chat-webirc-wrapper.chat-webirc-wrapper * { /* Only override the CSS custom properties that cause color conflicts */ --primary: var(--chat-webirc-primary) !important; --secondary: var(--chat-webirc-secondary) !important; --background: var(--chat-webirc-background) !important; --foreground: var(--chat-webirc-foreground) !important; --border: var(--chat-webirc-border) !important; --input: var(--chat-webirc-input) !important; --ring: var(--chat-webirc-ring) !important; --muted: var(--chat-webirc-muted) !important; --accent: var(--chat-webirc-accent) !important; } .chat-webirc-wrapper h1, .chat-webirc-wrapper h2, .chat-webirc-wrapper h3, .chat-webirc-wrapper h4, .chat-webirc-wrapper h5, .chat-webirc-wrapper h6 { font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; margin: 0 !important; padding: 0 !important; color: inherit !important; font-family: inherit !important; } .chat-webirc-wrapper p { margin: 0 !important; padding: 0 !important; } .chat-webirc-wrapper a { color: inherit !important; text-decoration: none !important; } /* The .chat-webirc div is just a mount point - no height constraints needed */ .chat-webirc-wrapper .chat-webirc { /* React will render the actual chat container inside this div */ } /* Override the sidebar wrapper's min-h-svh to prevent extra space */ .chat-webirc-wrapper .group\/sidebar-wrapper { min-height: 0 !important; } /* Ensure proper z-index stacking for dropdowns and modals */ .chat-webirc-wrapper [data-radix-popper-content-wrapper], .chat-webirc-wrapper [data-radix-portal] { z-index: 999999; } /* Mobile-specific height adjustments */ @media (max-width: 768px) { .chat-webirc-container { /* On mobile, account for browser chrome and page header */ /* Leave enough space at bottom for border visibility */ height: min(600px, calc(100vh - 220px)) !important; max-height: 600px !important; margin-bottom: 24px !important; } } /* Very small mobile screens or landscape orientation */ @media (max-height: 700px) { .chat-webirc-container { /* For short screens, use most of available space */ height: calc(100vh - 170px) !important; max-height: 500px !important; min-height: 400px !important; margin-bottom: 24px !important; } } } /* Ensure compatibility with WordPress styles */ @layer base { .chat-webirc, .chat-webirc * { box-sizing: border-box; } /* Reset WordPress admin styles that might interfere */ .chat-webirc input, .chat-webirc button, .chat-webirc textarea { font-family: inherit; font-size: inherit; line-height: inherit; } /* Ensure proper z-index for dropdowns and modals */ .chat-webirc [data-radix-popper-content-wrapper] { z-index: 999999; } }