/* Unified friendly dark-blue theme - overwrite previous styles */ :root{ --bg-1: #062233; --bg-2: #0c2f49; --panel: #0f3a57; --card: #0b2b42; --muted: #9fb9cc; --accent: #54c0ff; --accent-2: #2fd1b3; --text: #eaf6fb; --glass: rgba(255,255,255,0.02); --shadow: rgba(2,8,20,0.6); --success: #34d399; --danger: #ff6b6b; } /* Light theme overrides - applied when */ html[data-theme="light"], body[data-theme="light"] { --bg-1: #f5f7fa; --bg-2: #f0f3f7; --panel: #ffffff; --card: #ffffff; --muted: #6b7280; --accent: #0ea5ff; --accent-2: #06b6d4; --text: #0b1220; --glass: rgba(0,0,0,0.02); --shadow: rgba(2,6,23,0.06); --success: #10b981; --danger: #ef4444; } /* A couple of lightweight adjustments for light theme */ html[data-theme="light"] .card, html[data-theme="light"] .modal-content { background: linear-gradient(180deg, #ffffff, #fbfdff); border: 1px solid rgba(9,11,13,0.06); color: var(--text); } html[data-theme="light"] .form-control, html[data-theme="light"] .form-select { background: #fff; color: var(--text); border: 1px solid rgba(9,11,13,0.06); } html[data-theme="light"] .btn-primary { color: #02121a; } html[data-theme="light"] .navbar { background: linear-gradient(90deg,#e6f3ff,#e6fbff); } /* Base */ html,body{ height:100%; margin:0; font-family: Inter, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; color:var(--text); /* Simplified background: single tone (dark or light comes from CSS variables) */ background-color: var(--bg-1); /* fallback subtle gradient removed to avoid mid-band brightening */ background-image: none; } /* Layout container */ .container{ max-width: 980px; margin: 26px auto; padding: 14px; } /* Card */ .card{ background: linear-gradient(180deg, rgba(255,255,255,0.014), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.03); border-radius: 12px; box-shadow: 0 8px 30px var(--shadow); color:var(--text); } .card-header{ background: transparent; border-bottom: 1px solid rgba(255,255,255,0.02); padding: .8rem 1rem; font-weight: 600; color: var(--muted); } .card-body{ padding:1rem; } .card-footer{ background: transparent; padding:.8rem 1rem; } /* Navbar - override bootstrap light classes */ .navbar{ background: linear-gradient(90deg,#042635 0%, #06283c 100%); border-radius: 10px; padding: .5rem .75rem; box-shadow: 0 6px 20px rgba(2,8,20,0.5); } .navbar-brand{ color:var(--accent); font-weight:700; } .navbar .btn-outline-primary{ color:var(--text); border-color: rgba(255,255,255,0.06); background: transparent; } .navbar .btn-outline-primary:hover{ background: rgba(84,192,255,0.06); color: var(--accent); } /* Inputs & selects */ .form-control, .form-select, textarea { background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.007)); border:1px solid rgba(255,255,255,0.03); color: var(--text); border-radius: 8px; padding: .45rem .6rem; } .form-control::placeholder { color: var(--muted); opacity: .9; } .form-control:focus, .form-select:focus { border-color: rgba(84,192,255,0.9); box-shadow: 0 6px 20px rgba(84,192,255,0.06); outline: none; } /* Buttons */ .btn{ border-radius:10px; font-weight:600; } .btn-primary { background: linear-gradient(90deg,var(--accent),var(--accent-2)); color:#02121a; border:none; box-shadow: 0 6px 20px rgba(45,209,179,0.08); } .btn-outline-secondary, .btn-outline-info, .btn-outline-danger, .btn-outline-success { color: var(--text); border:1px solid rgba(255,255,255,0.04); background: transparent; } .btn-outline-info { border-color: rgba(84,192,255,0.12); color: var(--accent); } .btn-outline-danger { border-color: rgba(255,107,107,0.12); color: var(--danger); } /* Button small tweaks */ .btn-sm { padding: .32rem .55rem; font-size: .85rem; } /* Icon buttons */ .btn-icon { width:36px; height:36px; padding:0; display:inline-grid; place-items:center; border-radius:8px; background: linear-gradient(180deg, rgba(255,255,255,0.008), rgba(255,255,255,0.006)); border:1px solid rgba(255,255,255,0.03); color: var(--text); } /* Task row */ .task-row { display:flex; gap:10px; align-items:center; padding:10px 8px; border-radius:10px; background: linear-gradient(180deg, rgba(255,255,255,0.008), rgba(255,255,255,0.004)); border:1px solid rgba(255,255,255,0.02); } /* Hide Alt-Text label in task rows (icon/tooltip only) */ .task-row .form-check-label { display:none; } .task-row .form-check { margin-left: auto; margin-right: 6px; } .task-row .form-check .form-check-input { margin-right:0; } /* Results list - dark */ #results-list .list-group-item { background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.006)); border:1px solid rgba(255,255,255,0.03); border-radius:10px; margin-bottom: 10px; color: var(--text); } /* Product title & links */ #results-list .fw-bold { color: var(--accent); } #results-list .text-primary { color: var(--accent); font-weight:600; } #results-list .text-muted { color: var(--muted); } /* Dropdown menus (dark) */ .dropdown-menu { background: linear-gradient(180deg, rgba(2,10,18,0.95), rgba(6,18,28,0.98)); border:1px solid rgba(255,255,255,0.03); color: var(--text); } .dropdown-item { color: var(--text); } .dropdown-item:hover { background: rgba(84,192,255,0.04); color: var(--accent); } /* Progress bar */ .progress { background: rgba(255,255,255,0.02); border-radius: 12px; height:18px; } .progress-bar { background: linear-gradient(90deg,var(--accent-2),var(--accent)); color:#02121a; font-weight:700; } /* Activity log (monospace) */ #activity-log { list-style:none; padding:0; margin:0; max-height:400px; overflow:auto; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace; } #activity-log .list-group-item { background: transparent; border: none; color: var(--muted); padding: 6px 8px; } /* Accordion button (dark) */ .accordion-button { background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.008)); color: var(--text); border: 1px solid rgba(255,255,255,0.02); } .accordion-button:not(.collapsed) { background: linear-gradient(90deg,var(--accent),var(--accent-2)); color:#02121a; } /* Tables */ .table, .table-striped tbody tr { background: transparent; color: var(--text); } .table thead th { color: var(--muted); border-bottom: 1px dashed rgba(255,255,255,0.03); } .table td, .table th { border-top: none; } /* Modal */ .modal-content { background: linear-gradient(180deg, rgba(2,14,24,0.98), rgba(6,24,36,0.98)); border-radius: 12px; border: 1px solid rgba(255,255,255,0.03); } #settingsModal .nav-tabs .nav-link { color: var(--muted); border: none; } #settingsModal .nav-tabs .nav-link.active { color:#02121a; background: linear-gradient(90deg,var(--accent),var(--accent-2)); border-radius:8px; } /* Modal close button darker */ .btn-close { filter: invert(1) brightness(.9); opacity:.85; } /* Inputs in modal labels */ #settingsModal .form-label { color: var(--muted); font-weight:600; } /* Tiny helpers */ .small, .form-text, .text-muted { color: var(--muted) !important; } /* Accessibility focus */ :focus { outline: 3px solid rgba(84,192,255,0.12); outline-offset: 2px; } /* Responsive */ @media (max-width:700px) { .task-row { flex-direction: column; align-items: stretch; gap:8px; } .navbar { border-radius: 8px; padding: .4rem; } } /* Fixes for modal tables, native selects/options and task-row labels */ /* Ensure option elements render dark (most browsers) */ .form-select option { background: var(--card); color: var(--text); } /* Modal tables (settings/proxies/users) */ .modal-content .table, .modal-content .table tbody tr, .modal-content .table-striped tbody tr { background: transparent; border-color: rgba(255,255,255,0.02); color: var(--text); } .modal-content .table thead th { background: transparent; color: var(--muted); border-bottom: 1px dashed rgba(255,255,255,0.03); } .modal-content .table td, .modal-content .table th { border-top: none; color: var(--text); } /* Make dropdown/select lists darker and hover-friendly */ .form-select, .select, /* in case some places use custom classes */ .dropdown-menu, .custom-select { background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.006)); color: var(--text); border: 1px solid rgba(255,255,255,0.03); } .dropdown-item { color: var(--text); } .dropdown-item:hover, .dropdown-item:focus { background: rgba(84,192,255,0.04); color: var(--accent); } /* Make the Alt-Text / scan switch label visible and unobtrusive */ .task-row .form-check-label { display: inline-block; color: var(--muted); font-size: .9rem; margin-left: .35rem; white-space: nowrap; } .task-row .form-check { margin-left: 8px; margin-right: 6px; display: inline-flex; align-items: center; } /* Ensure modal select and option focus states are visible */ .modal-content .form-select:focus, .modal-content select:focus { border-color: rgba(84,192,255,0.9); box-shadow: 0 6px 20px rgba(84,192,255,0.06); } /* Small tweak: make table striped rows subtly darker (in modals & results) */ .table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,0.008); } /* -- Darken tables and list rows (override Bootstrap whites) ----------------- */ /* General table override */ .table, .table tbody, .table thead, .table td, .table th { background: transparent !important; color: var(--text) !important; border: none !important; } /* Table header */ .table thead th { background: transparent !important; color: var(--muted) !important; border-bottom: 1px dashed rgba(255,255,255,0.03) !important; } /* Table body rows (subtle banding) */ .table tbody tr { background: linear-gradient(180deg, rgba(255,255,255,0.006), rgba(255,255,255,0.003)) !important; border: 1px solid rgba(255,255,255,0.02) !important; border-radius: 6px; margin-bottom: 6px; } /* Ensure each cell looks dark (removes bright cell background) */ .table tbody tr td { background: transparent !important; color: var(--text) !important; vertical-align: middle; } /* Specific panels: run history and users table get a card-like row appearance */ #run-history-table tbody tr, #users-table tbody tr { background: rgba(255,255,255,0.01) !important; box-shadow: none !important; } /* Replace default white selection highlight in table rows */ .table tbody tr:hover { background: rgba(84,192,255,0.035) !important; } /* List-group items (results & logs) */ .list-group-item { background: linear-gradient(180deg, rgba(255,255,255,0.006), rgba(255,255,255,0.003)) !important; border: 1px solid rgba(255,255,255,0.02) !important; color: var(--text) !important; } /* Modal-specific lists/tables */ .modal-content .list-group-item, .modal-content .table, .modal-content .table tbody tr, .modal-content .table td { background: transparent !important; color: var(--text) !important; } /* Native select/options darker fallback */ select, .form-select { background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.007)) !important; color: var(--text) !important; border: 1px solid rgba(255,255,255,0.03) !important; } select option, .form-select option { background: var(--card) !important; color: var(--text) !important; } /* Ensure the table in the modal "Profile -> Users" header contrast is readable */ #users-table thead th { color: var(--muted) !important; background: transparent !important; } /* Small fix: ensure toolbar buttons inside table rows blend in */ #users-table .btn, #run-history-table .btn { background: transparent; border: 1px solid rgba(255,255,255,0.03); color: var(--text); } /* Fix: darken the accordion / technical log area and badges */ .accordion-item { background: transparent; border: 1px solid rgba(255,255,255,0.02); border-radius: 8px; overflow: hidden; } /* Header button (keeps the accent, readable) */ .accordion-button { color: var(--text); background: linear-gradient(90deg, rgba(84,192,255,0.12), rgba(47,209,179,0.06)); border: none; font-weight: 600; } .accordion-button:not(.collapsed) { color: #02121a; background: linear-gradient(90deg,var(--accent),var(--accent-2)); } /* The collapsed content (log) */ #collapseOne .accordion-body { background: linear-gradient(180deg, rgba(255,255,255,0.008), rgba(255,255,255,0.004)); color: var(--text); padding: 0.5rem; } /* List container inside the accordion */ #collapseOne .accordion-body .list-group { background: transparent; margin: 0; padding: 0.5rem; border-radius: 6px; } /* Log lines: dark, subtle banding, readable text */ #collapseOne .accordion-body .list-group-item, #activity-log .list-group-item { background: rgba(255,255,255,0.01) !important; color: var(--muted); border: none; padding: .45rem .6rem; margin-bottom: 6px; border-radius: 6px; display: flex; align-items: center; } /* Make the important text darker/clearer */ #collapseOne .accordion-body .list-group-item strong, #activity-log .list-group-item strong { color: var(--accent); font-weight:700; } /* Ensure inline code/text is visible */ #collapseOne .accordion-body code, #collapseOne .accordion-body pre { background: transparent; color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace; } /* Badges used in the log - themed variants with readable text */ .badge.bg-secondary { background: rgba(255,255,255,0.06); color: var(--text); } .badge.bg-success { background: linear-gradient(90deg, rgba(52,211,153,0.9), rgba(34,197,94,0.9)); color: #02121a; font-weight:700; } .badge.bg-danger { background: linear-gradient(90deg, rgba(255,107,107,0.95), rgba(255,75,75,0.95)); color: #02121a; font-weight:700; } .badge.bg-warning { background: linear-gradient(90deg, #ffd166, #ffb703); color: #02121a; font-weight:700; } .badge.bg-primary { background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: #02121a; font-weight:700; } .badge.bg-info { background: linear-gradient(90deg, rgba(84,192,255,0.95), rgba(47,209,179,0.85)); color: #02121a; font-weight:700; } /* Ensure badges have consistent size in log */ #collapseOne .accordion-body .badge { min-width: 72px; text-align: center; margin-right: .6rem; box-shadow: none; } /* If the log includes long lines, ensure wrapping and contrast */ #collapseOne .accordion-body .list-group-item { white-space: pre-wrap; word-break: break-word; } /* final safety: override any leftover bright backgrounds in accordion area */ #collapseOne, #collapseOne .accordion-body, #collapseOne .list-group-item, #collapseOne .badge, #collapseOne code, #activity-log { background-clip: padding-box; } /* --- AI Prompt Editor Enhancements --- */ .prompt-editor { font-family: 'Courier New', Consolas, Monaco, monospace; font-size: 0.9rem; line-height: 1.6; resize: vertical; min-height: 200px; color: var(--text); /* ADD THIS - makes text white in dark mode */ background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.007)); } /* Highlight placeholders in textarea (approximation via background pattern) */ .prompt-editor:focus { background-color: rgba(84, 192, 255, 0.02); border-color: var(--accent); color: var(--text); /* ADD THIS - ensures text stays visible on focus */ } /* Style the info alerts above prompts */ .alert-sm { padding: 0.5rem 0.75rem; font-size: 0.85rem; } .alert-info code { background: rgba(84, 192, 255, 0.15); color: var(--accent); padding: 2px 6px; border-radius: 4px; font-weight: 600; } /* Error state for missing placeholders */ .prompt-editor.is-invalid { border-color: var(--danger); background-color: rgba(255, 107, 107, 0.03); } .invalid-feedback { display: none; color: var(--danger); font-size: 0.875rem; margin-top: 0.25rem; } .prompt-editor.is-invalid ~ .invalid-feedback { display: block; } /* Visual separator for prompt sections */ .mb-4 { position: relative; } .mb-4::after { content: ''; display: block; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent); margin-top: 1.5rem; } .mb-4:last-child::after { display: none; } /* Locked placeholder styling - BRIGHT RED, NO EMOJI */ .locked-placeholder { display: inline-block; background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%); color: #ffffff; font-weight: 700; padding: 2px 8px; border-radius: 6px; margin: 0 2px; cursor: not-allowed; user-select: none; border: 2px solid #ff4444; box-shadow: 0 0 8px rgba(255, 0, 0, 0.4), inset 0 0 4px rgba(255, 255, 255, 0.3); font-family: 'Courier New', monospace; font-size: 0.95em; white-space: nowrap; } .locked-placeholder:hover { background: linear-gradient(135deg, #ff3333 0%, #dd0000 100%); transform: scale(1.05); box-shadow: 0 0 12px rgba(255, 0, 0, 0.6); } /* Editor styling for locked mode - KEEP TEXT WHITE ALWAYS */ .prompt-editor-locked { font-family: 'Courier New', Consolas, Monaco, monospace; font-size: 0.9rem; line-height: 1.8; padding: 12px; color: var(--text) !important; /* Force white text */ background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.007)); border: 1px solid rgba(255,255,255,0.03); border-radius: 8px; overflow-wrap: break-word; } .prompt-editor-locked:focus { outline: 2px solid var(--accent); background-color: rgba(84, 192, 255, 0.02); color: var(--text) !important; /* Keep white when editing */ } /* Ensure all text nodes inside stay white */ .prompt-editor-locked * { color: var(--text) !important; } /* Locked placeholders stay red even when editing */ .prompt-editor-locked .locked-placeholder { color: #ffffff !important; } /* Import settings panel - dark theme override */ .import-settings-panel { background: linear-gradient(180deg, rgba(255,255,255,0.008), rgba(255,255,255,0.004)); border: 1px solid rgba(255,255,255,0.03); color: var(--text); border-radius: 10px; } /* Ensure inputs/selects inside import panel match theme */ .import-settings-panel .form-control, .import-settings-panel .form-select, #import-settings textarea, #import-settings #import-delivery-custom { background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.007)); border: 1px solid rgba(255,255,255,0.03); color: var(--text); } /* Make the import action button blend in */ .import-settings-panel .btn-outline-success { color: var(--text); border-color: rgba(255,255,255,0.04); background: transparent; } /* Muted helper text inside the panel */ .import-settings-panel .form-text, .import-settings-panel .small, .import-settings-panel .text-muted { color: var(--muted) !important; }