/* ========================================================================== AI Table Cleaner - Global Stylesheet ========================================================================== */ /* -------------------------------------------------------------------------- 1. Centralized CSS Variables (Personalization Hub) Change these values to update the site's visual identity instantly. -------------------------------------------------------------------------- */ :root { /* Brand Colors */ --color-primary: #2563eb; /* Main Brand Color (Blue) */ --color-primary-hover: #1d4ed8; /* Darker Blue for hovers */ --color-success: #16a34a; /* Green for success states */ --color-error: #dc2626; /* Red for error states */ /* Typography */ --font-family-base: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-size-base: 16px; /* Table Styling - Light Mode */ --table-bg: #ffffff; --table-header-bg: #f3f4f6; --table-border: #e5e7eb; --table-text: #111827; --table-row-hover: #f9fafb; --table-cell-padding: 0.75rem 1rem; /* Layout & Spacing */ --border-radius-sm: 0.375rem; --border-radius-md: 0.5rem; --transition-speed: 0.3s; } /* Dark Mode Variables (Triggered by Tailwind's .dark class on ) */ .dark { /* Table Styling - Dark Mode */ --table-bg: #1f2937; --table-header-bg: #374151; --table-border: #4b5563; --table-text: #f9fafb; --table-row-hover: #111827; } /* -------------------------------------------------------------------------- 2. Base Styles & Overrides -------------------------------------------------------------------------- */ body { font-family: var(--font-family-base); font-size: var(--font-size-base); scroll-behavior: smooth; } /* Hide elements dynamically for the modular single-page architecture */ .hidden { display: none !important; } /* -------------------------------------------------------------------------- 3. Smart Ad Containers (AdSense / Monetization) Strictly adheres to: Invisible if empty, shows only when code is injected. -------------------------------------------------------------------------- */ .ad-container { display: flex; justify-content: center; align-items: center; width: 100%; margin: 1rem auto; overflow: hidden; } /* THE MAGIC RULE: If the ad container has no child elements (e.g., no ad script loaded), it completely disappears, taking up 0 space and removing all margins/borders. */ .ad-container:empty { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; border: none !important; } /* -------------------------------------------------------------------------- 4. Dynamic Table Styling (Generated by JS) Styles applied to the raw elements created by the logic engine. -------------------------------------------------------------------------- */ #table-container table { width: 100%; border-collapse: collapse; background-color: var(--table-bg); color: var(--table-text); font-size: 0.875rem; text-align: left; border: 1px solid var(--table-border); border-radius: var(--border-radius-sm); overflow: hidden; } #table-container th { background-color: var(--table-header-bg); font-weight: 600; padding: var(--table-cell-padding); border-bottom: 2px solid var(--table-border); border-right: 1px solid var(--table-border); white-space: nowrap; /* Prevents header text from wrapping */ } #table-container td { padding: var(--table-cell-padding); border-bottom: 1px solid var(--table-border); border-right: 1px solid var(--table-border); transition: background-color var(--transition-speed) ease; } #table-container tr:last-child td { border-bottom: none; } #table-container th:last-child, #table-container td:last-child { border-right: none; } /* Hover effect on table rows to improve readability */ #table-container tbody tr:hover td { background-color: var(--table-row-hover); } /* Inline Editing Visual Cues: When a user clicks a cell to edit (contenteditable="true") */ #table-container td[contenteditable="true"] { cursor: text; outline: none; } #table-container td[contenteditable="true"]:focus { background-color: rgba(37, 99, 235, 0.1); /* Light blue tint on focus */ box-shadow: inset 0 0 0 2px var(--color-primary); } .dark #table-container td[contenteditable="true"]:focus { background-color: rgba(59, 130, 246, 0.2); } /* -------------------------------------------------------------------------- 5. Custom Export Buttons -------------------------------------------------------------------------- */ .export-btn { display: flex; align-items: center; justify-content: center; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; color: #374151; background-color: #ffffff; border: 1px solid #d1d5db; border-radius: var(--border-radius-md); cursor: pointer; transition: all var(--transition-speed) ease; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .export-btn:hover { background-color: #f3f4f6; border-color: #9ca3af; transform: translateY(-1px); } /* Dark mode styles for export buttons */ .dark .export-btn { color: #e5e7eb; background-color: #374151; border-color: #4b5563; } .dark .export-btn:hover { background-color: #4b5563; border-color: #6b7280; } /* -------------------------------------------------------------------------- 6. Toast Notifications (Interactive Feedback) -------------------------------------------------------------------------- */ .toast { display: flex; align-items: center; padding: 1rem 1.5rem; border-radius: var(--border-radius-md); color: #ffffff; font-weight: 500; font-size: 0.875rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); animation: slideInRight 0.3s ease-out forwards; opacity: 0; transform: translateX(100%); max-width: 350px; z-index: 9999; } .toast.success { background-color: var(--color-success); } .toast.error { background-color: var(--color-error); } .toast.info { background-color: var(--color-primary); } /* Animation to remove the toast */ .toast.fade-out { animation: fadeOutRight 0.3s ease-in forwards; } /* -------------------------------------------------------------------------- 7. Animations & Keyframes -------------------------------------------------------------------------- */ /* Smooth fade-in for rendering the output section */ .animate-fade-in { animation: fadeIn 0.5s ease-out forwards; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Toast animations */ @keyframes slideInRight { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeOutRight { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } } /* -------------------------------------------------------------------------- 8. Responsive Adjustments (Mobile Optimization) Using Flexbox/Grid via Tailwind primarily, but custom tweaks go here. -------------------------------------------------------------------------- */ @media (max-width: 640px) { /* Ensure table container allows horizontal scrolling on small screens */ #table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */ } .toast { max-width: 90vw; /* Keep toast notifications within screen bounds on mobile */ } }