/* Theme management styles */ /* Light theme (default) */ .theme-light { --bg-color: #ffffff; --bg-secondary: #f8f9fa; --text-color: #212529; --text-muted: #6c757d; --border-color: #dee2e6; --card-bg: #ffffff; --navbar-bg: #0d6efd; --navbar-text: #ffffff; } /* Dark theme */ .theme-dark { --bg-color: #1a1a1a; --bg-secondary: #2d2d2d; --text-color: #e9ecef; --text-muted: #adb5bd; --border-color: #495057; --card-bg: #2d2d2d; --navbar-bg: #0a58ca; --navbar-text: #ffffff; } /* Apply theme variables */ body { background-color: var(--bg-color); color: var(--text-color); transition: background-color 0.3s, color 0.3s; } .theme-dark { background-color: #1a1a1a; color: #e9ecef; } .theme-dark .card { background-color: #2d2d2d; border-color: #495057; color: #e9ecef; } .theme-dark .card-header { background-color: rgba(255, 255, 255, 0.05); border-bottom-color: #495057; } .theme-dark .navbar-dark { background-color: #0a58ca !important; } .theme-dark .bg-light { background-color: #2d2d2d !important; color: #e9ecef; } .theme-dark .text-muted { color: #adb5bd !important; } .theme-dark .border { border-color: #495057 !important; } .theme-dark .form-control { background-color: #2d2d2d; border-color: #495057; color: #e9ecef; } .theme-dark .form-control:focus { background-color: #2d2d2d; border-color: #0d6efd; color: #e9ecef; } .theme-dark .input-group-text { background-color: #495057; border-color: #495057; color: #e9ecef; } .theme-dark .dropdown-menu { background-color: #2d2d2d; border-color: #495057; } .theme-dark .dropdown-item { color: #e9ecef; } .theme-dark .dropdown-item:hover, .theme-dark .dropdown-item:focus { background-color: #495057; color: #ffffff; } .theme-dark .table { color: #e9ecef; } .theme-dark .table-striped > tbody > tr:nth-of-type(odd) > td { background-color: rgba(255, 255, 255, 0.05); } .theme-dark .log-container { background-color: #000000; border-color: #495057; } .theme-dark .code-block { background-color: #2d2d2d; border-color: #495057; color: #e9ecef; } .theme-dark .script-parameter { background-color: #2d2d2d; border-color: #495057; color: #e9ecef; } .theme-dark .project-selector { background-color: rgba(13, 110, 253, 0.2); border-color: #0d6efd; color: #e9ecef; } /* Theme toggle button */ .theme-light .theme-icon-dark { display: inline; } .theme-light .theme-icon-light { display: none; } .theme-dark .theme-icon-dark { display: none; } .theme-dark .theme-icon-light { display: inline; } #theme-toggle { border: none; background: none; color: inherit; padding: 0.5rem; } #theme-toggle:hover { background-color: rgba(255, 255, 255, 0.1); border-radius: 0.375rem; } /* Dark theme specific overrides */ .theme-dark .navbar-nav .nav-link { color: #ffffff !important; } .theme-dark .navbar-nav .nav-link.active { color: #ffd43b !important; } .theme-dark .navbar-nav .nav-link:hover { color: #e9ecef !important; } .theme-dark .navbar-brand { color: #ffffff !important; } .theme-dark .navbar-brand:hover { color: #e9ecef !important; } .theme-dark .dropdown-toggle { color: #ffffff !important; } .theme-dark .dropdown-toggle:hover { color: #e9ecef !important; } .theme-dark .alert-info { background-color: #1a365d; border-color: #2c5aa0; color: #90cdf4; } .theme-dark .alert-success { background-color: #1a2e05; border-color: #38a169; color: #9ae6b4; } .theme-dark .alert-warning { background-color: #2d2019; border-color: #d69e2e; color: #faf089; } .theme-dark .alert-danger { background-color: #2d1b1b; border-color: #e53e3e; color: #fed7d7; } .theme-dark .btn-outline-primary { color: #6ea8fe; border-color: #6ea8fe; } .theme-dark .btn-outline-primary:hover { background-color: #6ea8fe; border-color: #6ea8fe; color: #000; } .theme-dark .btn-outline-secondary { color: #adb5bd; border-color: #adb5bd; } .theme-dark .btn-outline-secondary:hover { background-color: #adb5bd; border-color: #adb5bd; color: #000; } /* Navigation specific dark mode styles */ .theme-dark .navbar-nav .nav-link { color: #e9ecef !important; } .theme-dark .navbar-nav .nav-link:hover { color: #ffffff !important; } .theme-dark .navbar-brand { color: #ffffff !important; } .theme-dark .navbar-toggler { border-color: rgba(255, 255, 255, 0.1); } .theme-dark .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } /* User menu and language selector in dark mode */ .theme-dark .dropdown-toggle { color: #e9ecef !important; border: none !important; } .theme-dark .dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } /* Language and user display text */ .theme-dark #current-language-display, .theme-dark .navbar-nav .nav-link span { color: #e9ecef !important; } /* Progress bars in dark theme */ .theme-dark .progress { background-color: #495057; } /* Modal adjustments for dark theme */ .theme-dark .modal-content { background-color: #2d2d2d; border-color: #495057; } .theme-dark .modal-header { border-bottom-color: #495057; } .theme-dark .modal-footer { border-top-color: #495057; } /* Tooltip adjustments for dark theme */ .theme-dark .tooltip-inner { background-color: #495057; color: #ffffff; } .theme-dark .tooltip.bs-tooltip-top .tooltip-arrow::before { border-top-color: #495057; } .theme-dark .tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: #495057; } .theme-dark .tooltip.bs-tooltip-start .tooltip-arrow::before { border-left-color: #495057; } .theme-dark .tooltip.bs-tooltip-end .tooltip-arrow::before { border-right-color: #495057; }