/* ========================================================================= */ /* BASE BOOTSTRAP CUSTOMIZATION AND COLOR PALETTE (From previous responses) */ /* ========================================================================= */ :root { /* Custom Colors */ --bs-primary: #137fec; /* Your primary color */ --background-light: #f6f7f8; --background-dark: #101922; /* Light Mode Defaults */ --bs-body-bg: var(--background-light); --bs-body-color: #212529; /* Standard dark text */ --bs-light: #f8f9fa; --bs-secondary-bg-subtle: rgba(206, 212, 218, 0.4); /* Custom light gray for nav bg */ --bs-link-color-rgb: 73, 80, 87; /* Text for footer links */ /* Typography */ --bs-font-sans-serif: 'Inter', sans-serif; } /* Dark Mode Overrides (when the 'data-bs-theme' attribute is set to 'dark' on ) */ [data-bs-theme="dark"] { /* Background and Text */ --bs-body-bg: var(--background-dark); --bs-body-color: #f6f7f8; /* Navbar/Card Backgrounds (darker than body, mimicking original) */ --bs-bg-opacity: 0.8; --bs-body-bg-rgb: 16, 25, 34; /* For opacity calculations */ --bs-light: #212529; /* Darker background for light elements */ /* Subtler Elements */ --bs-border-color: rgba(255, 255, 255, 0.1); --bs-secondary-color-rgb: 255, 255, 255; /* White text for contrast */ --bs-secondary-bg-subtle: rgba(255, 255, 255, 0.05); /* White/5% for nav bg */ --bs-border-color-translucent: rgba(255, 255, 255, 0.15); /* Text/Links */ --bs-link-color-rgb: 255, 255, 255; /* White text for links */ --bs-link-opacity: 0.7; /* Text for footer links opacity */ --bs-link-hover-opacity: 1; } /* ========================================================================= */ /* UTILITY AND TYPOGRAPHY (Replaces specific Tailwind utilities) */ /* ========================================================================= */ .font-inter { font-family: 'Inter', sans-serif !important; } .tracking-neg-5 { letter-spacing: -0.05em; } .tracking-neg-3 { letter-spacing: -0.03em; } /* Rounded XL (Replaces rounded-xl) */ .rounded-xl { border-radius: 0.75rem !important; } /* Icon Styles (Your original material-symbols-outlined settings) */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } /* Custom Backdrop Filter (for the sticky header) */ .backdrop-filter-blur { backdrop-filter: blur(5px); } /* ========================================================================= */ /* HOVER AND TRANSITION UTILITIES */ /* ========================================================================= */ .transition-colors { transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; } /* Link Hover Primary (mimics hover:text-primary) */ .link-hover-primary { transition: color 0.15s ease-in-out; } .link-hover-primary:hover { color: var(--bs-primary) !important; } /* Hover Primary for Buttons (mimics hover:bg-primary/90) */ .hover-bg-primary-90:hover { background-color: rgba(19, 127, 236, 0.9) !important; } /* Text Secondary Emphasis (For footer link color, mimics original) */ .text-secondary-emphasis { color: var(--bs-body-color) !important; } [data-bs-theme="dark"] .text-secondary-emphasis { color: rgba(255, 255, 255, 0.7) !important; /* White/70% in dark mode */ } /* ========================================================================= */ /* COMPONENTS AND SECTIONS */ /* ========================================================================= */ /* CUSTOM HEIGHTS (Replaces h-10, h-11, h-12, h-14, etc.) */ .h-lg-2 { height: 44px; } .h-lg-3 { height: 48px; } .min-h-300 { min-height: 300px; } /* Custom Outline Button for Dark Mode (Log In button) */ [data-bs-theme="dark"] .dark-btn-outline-light { --bs-btn-color: #f8f9fa; --bs-btn-border-color: rgba(255, 255, 255, 0.1); --bs-btn-hover-color: #f8f9fa; --bs-btn-hover-bg: rgba(255, 255, 255, 0.2); --bs-btn-active-bg: rgba(255, 255, 255, 0.25); --bs-btn-active-border-color: rgba(255, 255, 255, 0.25); } /* Custom Dark Mode Card/Box Backgrounds (Replaces dark:bg-white/5) */ [data-bs-theme="dark"] .dark-card-custom { background-color: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.1) !important; } /* HERO BUTTON SHADOW (Replaces shadow-lg shadow-primary/40) */ .shadow-primary-lg { box-shadow: 0 10px 15px -3px rgba(19, 127, 236, 0.4), 0 4px 6px -2px rgba(19, 127, 236, 0.4) !important; } /* Feature Card Hover Effect (Replaces hover:scale-[1.02]) */ .transition-scale { transition: transform 0.2s ease-in-out; } .hover-scale-102:hover { transform: scale(1.02); } /* Logo Grid Opacity (mimics dark mode logo styling) */ [data-bs-theme="dark"] .pro-logo-item { filter: invert(1); } [data-bs-theme="dark"] .navbar-brand { color: white; } [data-bs-theme="dark"] .navbar-brand:hover { color: #ccc; /* or any color you prefer for hover */ } [data-bs-theme="dark"] .text-body { color: white !important;} /* Target the icon inside the specific button and set its color to white */ [data-bs-theme="dark"] button.navbar-toggler span.material-symbols-outlined { color: white; } [data-bs-theme="light"] .client-logo { color: black; filter: brightness(0.6); } /* ========================================================================= */ /* GENERATE PAGE SPECIFIC STYLES */ /* ========================================================================= */ /* Input/Select/Textarea Background Color for Dark Mode (Original: dark:bg-[#1c2127]) */ [data-bs-theme="dark"] .dark-input-custom { background-color: #1c2127 !important; color: var(--bs-body-color) !important; } /* Output Area Background Color for Dark Mode (Original: dark:bg-black/20) */ [data-bs-theme="dark"] .dark-output-bg-custom { background-color: rgba(0, 0, 0, 0.2) !important; } /* Regenerate Button Customization */ [data-bs-theme="dark"] .dark-secondary-btn-custom { background-color: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.1) !important; color: var(--bs-body-color) !important; } [data-bs-theme="dark"] .dark-secondary-btn-custom:hover { background-color: rgba(255, 255, 255, 0.1) !important; } /* Output Image Canvas Style (Your original canvas styles) */ #code-output canvas { max-width: 100%; height: auto; border-radius: 0.5rem; background-color: white; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } /* ========================================================================= */ /* SCAN PAGE SPECIFIC STYLES (Toggle and Input) */ /* ========================================================================= */ /* --- Custom Toggle Pill Styles (Updated for Dark & Light Mode Contrast) --- */ /* Custom Toggle Pill Container */ .custom-toggle-pill { padding: 6px !important; background-color: var(--bs-secondary-bg-subtle) !important; } /* Custom Toggle Link Styling (Default/Inactive State) */ .custom-toggle-pill .nav-link { background-color: transparent !important; border: none !important; color: var(--bs-secondary) !important; transition: all 0.2s ease-in-out; } /* ------------------------------------------------ */ /* LIGHT MODE ACTIVE STATE (Target: Black/Dark Select Tab) */ /* ------------------------------------------------ */ .custom-toggle-pill .nav-item input:checked + .custom-toggle-link { /* Set background to a very dark color (like secondary/dark mode background) */ background-color: var(--bs-dark) !important; /* Set text to white for maximum contrast */ color: var(--bs-white) !important; box-shadow: var(--bs-box-shadow-sm); } /* ------------------------------------------------ */ /* DARK MODE ACTIVE STATE (Target: Subtle Dark Select Tab) */ /* ------------------------------------------------ */ [data-bs-theme="dark"] .custom-toggle-pill .nav-item input:checked + .custom-toggle-link { /* Use a dark gray that blends well with the dark background (e.g., secondary dark gray) */ background-color: var(--bs-gray-700) !important; /* Assuming --bs-gray-700 is defined as a dark gray */ /* Set text to the body color (white) */ color: var(--bs-body-color) !important; } /* Fallback if you don't have --bs-gray-700 defined: [data-bs-theme="dark"] .custom-toggle-pill .nav-item input:checked + .custom-toggle-link { background-color: rgba(255, 255, 255, 0.1) !important; color: var(--bs-body-color) !important; } */ /* ========================================================================= */ /* HISTORY PAGE SPECIFIC STYLES */ /* ========================================================================= */ /* Custom Divider (Replaces Tailwind divide-y) */ .divide-y-custom > * + * { border-top: 1px solid var(--bs-border-color-translucent) !important; } /* History Item Hover State */ .hover-bg-light-transition { transition: background-color 0.15s ease-in-out; } .hover-bg-light-transition:hover { background-color: var(--bs-tertiary-bg) !important; } [data-bs-theme="dark"] .hover-bg-light-transition:hover { background-color: rgba(255, 255, 255, 0.05) !important; } /* Reuse Button (Primary/10) */ .btn-primary-light { --bs-btn-color: var(--bs-primary); --bs-btn-bg: var(--bs-primary-bg-subtle); --bs-btn-border-color: var(--bs-primary-bg-subtle); --bs-btn-hover-color: var(--bs-primary); --bs-btn-hover-bg: rgba(19, 127, 236, 0.2); --bs-btn-hover-border-color: rgba(19, 127, 236, 0.2); } /* Copy Button (Link style) */ .btn-link-secondary { --bs-btn-color: var(--bs-secondary); --bs-btn-hover-color: var(--bs-secondary-emphasis); --bs-btn-bg: transparent; --bs-btn-hover-bg: var(--bs-tertiary-bg); --bs-btn-border-color: transparent; } /* Dark Mode Copy Button Override */ [data-bs-theme="dark"] .dark-link-secondary-custom { --bs-btn-color: var(--bs-gray-300); --bs-btn-hover-bg: rgba(255, 255, 255, 0.1); } /* ========================================================================= */ /* LOGO WALL STYLES (Replaces .pro-logo-item) */ /* ========================================================================= */ .pro-logo-item { /* Default (Light Mode) */ opacity: 0.7; filter: grayscale(100%); transition: all 0.3s ease-in-out; } .pro-logo-item:hover { opacity: 1; filter: grayscale(0%); } /* Dark Mode Styling */ [data-bs-theme="dark"] .pro-logo-item { opacity: 0.55; filter: grayscale(100%) brightness(1.5); /* Muted light color */ } [data-bs-theme="dark"] .pro-logo-item:hover { opacity: 1; filter: grayscale(0%) brightness(1); /* Full white/bright */ } /* ========================================================================= */ /* LOGIN AND SIGNUP PAGE */ /* ========================================================================= */ /* --- Additions to static/style-bootstrap.css for Auth Pages --- */ /* Custom Dark Auth Card (Replaces dark:bg-gray-900/60) */ [data-bs-theme="dark"] .dark-auth-card { background-color: rgba(16, 25, 34, 0.6) !important; /* Base dark background + 60% opacity */ } /* Custom Input Focus and Dark Background (Replaces dark:bg-gray-800 and focus:ring-primary) */ [data-bs-theme="dark"] .dark-input-custom { background-color: #2c343d !important; /* A slightly lighter dark gray than body/card */ border-color: rgba(255, 255, 255, 0.1) !important; color: var(--bs-body-color) !important; } .dark-input-custom:focus { border-color: var(--bs-primary) !important; box-shadow: 0 0 0 0.25rem rgba(19, 127, 236, 0.25) !important; /* Mimics focus:ring-primary */ } /* Custom Link Underline (Mimics hover:underline) */ .hover-link-underline:hover { text-decoration: underline !important; } /* Custom Height for small buttons (h-10) */ .h-lg-2 { height: 40px !important; } /* Remove border from dropdown */ .custom-dropdown { border: none !important; } /* Remove the default triangle icon (caret) inside the dropdown toggle */ .custom-dropdown .dropdown-toggle::after { display: none; } .nav-pills .nav-link:not(.active).hover-text-primary:hover { /* Use the standard body text color (dark/black) for high contrast */ color: var(--bs-body-color) !important; }