/*! RockRecorder. Copyright (c) 2026 Rock Communications LLC. All rights reserved. Copying or redistributing this file is prohibited. */
[data-theme="dark"] {
--bs-body-bg: var(--color-bg);
--bs-body-color: var(--color-text);
--bs-border-color: var(--color-border);
--bs-secondary-bg: var(--color-surface-2);
--bs-tertiary-bg: var(--color-surface);
background-color: var(--color-bg);
color: var(--color-text);
}
[data-theme="dark"] body {
background-color: var(--color-bg);
color: var(--color-text);
}
[data-theme="dark"] .container,
[data-theme="dark"] .container-fluid {
background-color: var(--color-bg);
color: var(--color-text);
}
[data-theme="dark"] .bg-white {
background-color: var(--color-surface) !important;
}
[data-theme="dark"] .table-responsive {
background-color: var(--color-surface);
}
.navbar-logo-dark { display: none; }
.login-logo-dark { display: none; }
[data-theme="dark"] .navbar-logo-light { display: none; }
[data-theme="dark"] .navbar-logo-dark { display: inline; }
[data-theme="dark"] .login-logo-light { display: none; }
[data-theme="dark"] .login-logo-dark { display: block; }
[data-theme="dark"] .navbar-custom {
background-color: var(--color-surface);
box-shadow: 0 2px 5px var(--color-shadow);
}
[data-theme="dark"] .navbar-custom .container-fluid {
background-color: var(--color-surface) !important;
}
[data-theme="dark"] .navbar-custom .navbar-brand,
[data-theme="dark"] .navbar-custom .nav-link,
[data-theme="dark"] .navbar-custom .btn {
color: var(--color-text) !important;
}
[data-theme="dark"] .nav-link.active {
color: var(--color-primary-text) !important;
}
[data-theme="dark"] .nav-link.dropdown-toggle.active {
color: var(--color-primary-text) !important;
}
[data-theme="dark"] .nav-separator {
background: var(--color-surface-3);
}
[data-theme="dark"] .card {
background-color: var(--color-surface);
border-color: var(--color-border);
color: var(--color-text);
}
[data-theme="dark"] .card-header {
background-color: var(--color-surface-2);
border-bottom-color: var(--color-border);
color: var(--color-text);
}
[data-theme="dark"] .card-body {
background-color: var(--color-surface);
color: var(--color-text);
}
[data-theme="dark"] .card-body.p-0 {
background-color: var(--color-surface);
}
[data-theme="dark"] .table {
color: var(--color-text);
border-color: var(--color-border);
background-color: var(--color-surface);
--bs-table-color: var(--color-text);
--bs-table-bg: var(--color-surface);
--bs-table-striped-color: var(--color-text);
--bs-table-striped-bg: var(--color-surface-2);
--bs-table-active-color: var(--color-text);
--bs-table-active-bg: var(--color-surface-2);
--bs-table-hover-color: var(--color-text);
--bs-table-hover-bg: var(--color-surface-2);
}
[data-theme="dark"] .table thead {
background-color: var(--color-surface-2);
color: var(--color-text);
}
[data-theme="dark"] .table tbody {
background-color: var(--color-surface);
color: var(--color-text);
}
[data-theme="dark"] .table tbody tr {
background-color: var(--color-surface);
border-color: var(--color-border);
}
[data-theme="dark"] .table-hover tbody tr:hover {
background-color: var(--color-surface-2) !important;
color: var(--color-text);
}
[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
border-color: var(--color-border);
background-color: transparent;
}
[data-theme="dark"] .bg-light {
background-color: var(--color-surface-2) !important;
color: var(--color-text);
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
background-color: var(--color-surface-2);
border-color: var(--color-border);
color: var(--color-text);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
background-color: var(--color-surface-2);
border-color: var(--color-primary-text);
color: var(--color-text);
}
[data-theme="dark"] .form-control-plaintext {
color: var(--color-text);
}
[data-theme="dark"] .form-control-plaintext.border {
background-color: var(--color-surface-2) !important;
border-color: var(--color-border) !important;
color: var(--color-text) !important;
}
[data-theme="dark"] .form-control::placeholder {
color: var(--color-text-muted);
}
[data-theme="dark"] .form-label {
color: var(--color-text);
}
[data-theme="dark"] .form-check-label {
color: var(--color-text);
}
[data-theme="dark"] .form-check-input[type="checkbox"]:not(:checked) {
background-color: var(--color-surface-2);
border-color: var(--color-check-border);
}
[data-theme="dark"] .input-group-text {
background-color: var(--color-surface-2);
border-color: var(--color-border);
color: var(--color-text);
}
[data-theme="dark"] .modal-content {
background-color: var(--color-surface);
border-color: var(--color-border);
}
[data-theme="dark"] .modal-header {
background-color: var(--color-surface-2);
border-bottom-color: var(--color-border);
color: var(--color-text);
}
[data-theme="dark"] .modal-body {
color: var(--color-text);
}
[data-theme="dark"] .modal-footer {
border-top-color: var(--color-border);
}
[data-theme="dark"] .btn-close {
filter: invert(1) grayscale(100%) brightness(200%);
}
[data-theme="dark"] .btn {
box-shadow: none !important;
background-image: none !important;
}
[data-theme="dark"] .btn-secondary {
background-color: var(--color-surface-3) !important;
border-color: var(--color-border) !important;
color: var(--color-text) !important;
}
[data-theme="dark"] .btn-secondary:hover {
background-color: var(--color-surface-4) !important;
border-color: var(--color-border-strong) !important;
}
[data-theme="dark"] .btn-danger {
background-color: var(--color-danger) !important;
border-color: var(--color-danger) !important;
color: var(--color-on-accent) !important;
}
[data-theme="dark"] .btn-danger:hover {
background-color: var(--color-danger-hover) !important;
border-color: var(--color-danger-hover) !important;
}
[data-theme="dark"] .btn-outline-danger {
color: var(--color-danger-text) !important;
border-color: var(--color-danger-text) !important;
}
[data-theme="dark"] .btn-outline-danger:hover {
background-color: var(--color-danger-subtle) !important;
color: var(--color-danger-text) !important;
border-color: var(--color-danger-text) !important;
}
[data-theme="dark"] .btn-outline-secondary {
color: var(--color-primary-text) !important;
border-color: var(--color-primary-text) !important;
background-color: transparent !important;
}
[data-theme="dark"] .btn-outline-secondary:hover,
[data-theme="dark"] .btn-outline-secondary:focus {
background-color: var(--color-brand-muted) !important;
color: var(--color-on-accent) !important;
border-color: var(--color-primary-emphasis) !important;
}
[data-theme="dark"] .btn-outline-secondary.active,
[data-theme="dark"] .btn-outline-secondary:active,
[data-theme="dark"] .btn-check:checked + .btn-outline-secondary {
background-color: var(--color-primary) !important;
color: var(--color-on-accent) !important;
border-color: var(--color-primary) !important;
}
[data-theme="dark"] .alert-info {
background-color: var(--color-primary-subtle);
border-color: var(--color-primary-border);
color: var(--color-primary-text);
}
[data-theme="dark"] .alert-success {
background-color: var(--color-success-subtle);
border-color: var(--color-success-border);
color: var(--color-success-text);
}
[data-theme="dark"] .alert-warning {
background-color: var(--color-warning-subtle);
border-color: var(--color-warning-border);
color: var(--color-warning-text);
}
[data-theme="dark"] .alert-danger {
background-color: var(--color-danger-subtle);
border-color: var(--color-danger-border);
color: var(--color-danger-text);
}
[data-theme="dark"] .badge.bg-secondary {
background-color: var(--color-surface-3) !important;
color: var(--color-text);
}
[data-theme="dark"] .badge.bg-light {
background-color: var(--color-surface-3) !important;
color: var(--color-text);
}
[data-theme="dark"] .pagination .page-link {
background-color: var(--color-surface);
border-color: var(--color-border);
color: var(--color-primary-text);
}
[data-theme="dark"] .pagination .page-link:hover {
background-color: var(--color-surface-2);
border-color: var(--color-border);
color: var(--color-primary-text);
}
[data-theme="dark"] .pagination .page-item.active .page-link {
background-color: var(--color-primary);
border-color: var(--color-primary);
}
[data-theme="dark"] .pagination .page-item.disabled .page-link {
background-color: var(--color-surface);
border-color: var(--color-border);
color: var(--color-text-muted);
}
[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-start,
[data-theme="dark"] .border-end {
border-color: var(--color-border) !important;
}
[data-theme="dark"] .text-muted {
color: var(--color-text-muted) !important;
}
[data-theme="dark"] .text-dark {
color: var(--color-text) !important;
}
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
color: var(--color-text);
}
[data-theme="dark"] .password-toggle {
color: var(--color-text-secondary);
}
[data-theme="dark"] .password-toggle:hover {
color: var(--color-text);
}
[data-theme="dark"] .shadow,
[data-theme="dark"] .shadow-sm {
box-shadow: 0 0.125rem 0.25rem var(--color-shadow) !important;
}
[data-theme="dark"] hr {
border-color: var(--color-border);
opacity: 1;
}
[data-theme="dark"] code {
background-color: var(--color-surface-2);
color: var(--color-text);
}
[data-theme="dark"] pre {
background-color: var(--color-surface-2);
border-color: var(--color-border);
color: var(--color-text);
}
[data-theme="dark"] .progress {
background-color: var(--color-surface-2);
}
[data-theme="dark"] .tooltip-inner {
background-color: var(--color-surface-2);
color: var(--color-text);
}
[data-theme="dark"] .popover {
background-color: var(--color-surface);
border-color: var(--color-border);
}
[data-theme="dark"] .popover-header {
background-color: var(--color-surface-2);
border-bottom-color: var(--color-border);
color: var(--color-text);
}
[data-theme="dark"] .popover-body {
color: var(--color-text);
}
[data-theme="dark"] .settings-card {
background: var(--color-surface) !important;
background-color: var(--color-surface) !important;
border: 1px solid var(--color-border) !important;
border-color: var(--color-border) !important;
color: var(--color-text) !important;
box-shadow: 0 2px 5px var(--color-shadow) !important;
}
[data-theme="dark"] .col-md-3 .settings-card {
background: var(--color-surface) !important;
background-color: var(--color-surface) !important;
border: 1px solid var(--color-border) !important;
}
[data-theme="dark"] .tab-content {
background-color: transparent !important;
color: var(--color-text) !important;
}
[data-theme="dark"] .tab-pane {
background-color: transparent !important;
color: var(--color-text) !important;
}
[data-theme="dark"] .tab-pane .settings-card {
background: var(--color-surface) !important;
background-color: var(--color-surface) !important;
}
[data-theme="dark"] .container .row,
[data-theme="dark"] .container-fluid .row {
color: var(--color-text) !important;
}
[data-theme="dark"] .container .col-md-3,
[data-theme="dark"] .container-fluid .col-lg-2,
[data-theme="dark"] .container-fluid .col-lg-10,
[data-theme="dark"] .container-fluid .col-md-3 {
color: var(--color-text) !important;
}
[data-theme="dark"] .row {
color: var(--color-text);
}
[data-theme="dark"] .col,
[data-theme="dark"] [class*="col-"] {
color: var(--color-text);
}
[data-theme="dark"] .panel,
[data-theme="dark"] .section {
background-color: var(--color-surface);
color: var(--color-text);
}
[data-theme="dark"] .content,
[data-theme="dark"] .main-content {
background-color: var(--color-bg);
color: var(--color-text);
}
[data-theme="dark"] strong,
[data-theme="dark"] b {
color: var(--color-text);
}
:where([data-theme="dark"]) a:where(:not(.btn)) {
color: var(--color-primary-text);
}
:where([data-theme="dark"]) a:where(:not(.btn)):hover {
color: var(--color-primary-emphasis);
}
[data-theme="dark"] .password-wrapper .password-toggle {
color: var(--color-text-secondary) !important;
background: none !important;
}
[data-theme="dark"] .password-wrapper .password-toggle:hover {
color: var(--color-text) !important;
}
[data-theme="dark"] div[class*="col-"],
[data-theme="dark"] .container div,
[data-theme="dark"] .container-fluid div {
}
[data-theme="dark"] .daterangepicker {
background-color: var(--color-surface);
border-color: var(--color-border);
color: var(--color-text);
}
[data-theme="dark"] .daterangepicker:after {
border-bottom-color: var(--color-surface);
}
[data-theme="dark"] .daterangepicker:before {
border-bottom-color: var(--color-border);
}
[data-theme="dark"] .daterangepicker .calendar-table {
background-color: var(--color-surface);
border-color: var(--color-surface);
}
[data-theme="dark"] .daterangepicker .calendar-table th,
[data-theme="dark"] .daterangepicker .calendar-table td {
color: var(--color-text);
}
[data-theme="dark"] .daterangepicker td.available:hover,
[data-theme="dark"] .daterangepicker th.available:hover {
background-color: var(--color-surface-3);
}
[data-theme="dark"] .daterangepicker td.off,
[data-theme="dark"] .daterangepicker td.off.in-range,
[data-theme="dark"] .daterangepicker td.off.start-date,
[data-theme="dark"] .daterangepicker td.off.end-date {
background-color: var(--color-surface);
color: var(--color-text-muted);
}
[data-theme="dark"] .daterangepicker td.in-range {
background-color: var(--color-brand-muted);
color: var(--color-text);
}
[data-theme="dark"] .daterangepicker td.active,
[data-theme="dark"] .daterangepicker td.active:hover {
background-color: var(--color-primary);
color: var(--color-on-accent);
}
[data-theme="dark"] .daterangepicker td.disabled {
color: var(--color-text-muted);
}
[data-theme="dark"] .daterangepicker th.month {
color: var(--color-text);
}
[data-theme="dark"] .daterangepicker .calendar-table .next span,
[data-theme="dark"] .daterangepicker .calendar-table .prev span {
border-color: var(--color-border-strong);
}
[data-theme="dark"] .daterangepicker select.monthselect,
[data-theme="dark"] .daterangepicker select.yearselect {
background-color: var(--color-surface-2);
border-color: var(--color-border);
color: var(--color-text);
}
[data-theme="dark"] .daterangepicker .drp-buttons {
border-top-color: var(--color-border);
}
[data-theme="dark"] .daterangepicker .drp-selected {
color: var(--color-text-secondary);
}
[data-theme="dark"] .daterangepicker .ranges li {
color: var(--color-text);
}
[data-theme="dark"] .daterangepicker .ranges li:hover {
background-color: var(--color-surface-3);
}
[data-theme="dark"] .daterangepicker .ranges li.active {
background-color: var(--color-primary);
color: var(--color-on-accent);
}
[data-theme="dark"] .channels-container:not(.ri-page) {
background: var(--color-surface) !important;
background-color: var(--color-surface) !important;
border: 1px solid var(--color-border) !important;
color: var(--color-text) !important;
}
[data-theme="dark"] .channels-container h2 {
color: var(--color-text) !important;
}
[data-theme="dark"] .channels-container .table {
background-color: var(--color-surface) !important;
color: var(--color-text) !important;
border-color: var(--color-border) !important;
}
[data-theme="dark"] .channels-container .table thead {
background-color: var(--color-surface-2) !important;
color: var(--color-text) !important;
}
[data-theme="dark"] .channels-container .table thead th {
background-color: var(--color-surface-2) !important;
color: var(--color-text) !important;
border-color: var(--color-border) !important;
}
[data-theme="dark"] .channels-container .table tbody tr {
background-color: var(--color-surface) !important;
color: var(--color-text) !important;
border-color: var(--color-border) !important;
}
[data-theme="dark"] .channels-container .table tbody td {
color: var(--color-text) !important;
border-color: var(--color-border) !important;
}
[data-theme="dark"] .channels-container .table-light {
background-color: var(--color-surface-2) !important;
color: var(--color-text) !important;
}
[data-theme="dark"] .sidebar {
background: var(--color-surface) !important;
background-color: var(--color-surface) !important;
border: none !important;
border-right: 1px solid var(--color-border) !important;
color: var(--color-text) !important;
}
[data-theme="dark"] .sidebar h5 {
color: var(--color-text) !important;
border-bottom-color: var(--color-border) !important;
}
[data-theme="dark"] .sidebar .nav-link {
color: var(--color-text-secondary) !important;
}
[data-theme="dark"] .sidebar .nav-link:hover {
background-color: var(--color-surface-2) !important;
color: var(--color-text) !important;
}
[data-theme="dark"] .sidebar .nav-link.selected {
background-color: var(--color-brand-muted) !important;
color: var(--color-primary-emphasis) !important;
font-weight: 500 !important;
border-left: 3px solid var(--color-primary-text) !important;
padding-left: calc(0.75rem - 3px) !important;
}
[data-theme="dark"] .nav-link.selected .recording-count {
background-color: var(--color-brand-muted) !important;
color: var(--color-primary-emphasis) !important;
}
[data-theme="dark"] .sidebar .bi-chevron-down,
[data-theme="dark"] .sidebar .bi-chevron-right {
color: var(--color-text-muted) !important;
}
[data-theme="dark"] .year-item {
color: var(--color-text) !important;
}
[data-theme="dark"] .day-item {
color: var(--color-text-secondary) !important;
}
[data-theme="dark"] .channel-item {
color: var(--color-text-muted) !important;
}
[data-theme="dark"] .recording-count {
color: var(--color-text-muted) !important;
background: var(--color-surface-2) !important;
}
[data-theme="dark"] .btn-player-toggle {
border-color: var(--color-primary-text) !important;
color: var(--color-primary-text) !important;
}
[data-theme="dark"] .btn-player-toggle:hover {
background-color: var(--color-brand-muted) !important;
border-color: var(--color-primary-emphasis) !important;
color: var(--color-primary-emphasis) !important;
}
[data-theme="dark"] .btn-player-toggle.active {
background-color: var(--color-primary) !important;
border-color: var(--color-primary) !important;
color: var(--color-on-accent) !important;
}
[data-theme="dark"] .row-menu-btn {
color: var(--color-text-secondary);
}
[data-theme="dark"] .row-menu-btn:hover {
color: var(--color-text);
}
[data-theme="dark"] .table-light {
--bs-table-color: var(--color-text) !important;
--bs-table-bg: var(--color-surface-2) !important;
--bs-table-border-color: var(--color-border) !important;
--bs-table-striped-bg: var(--color-surface-2) !important;
--bs-table-striped-color: var(--color-text) !important;
--bs-table-hover-bg: var(--color-surface-3) !important;
--bs-table-hover-color: var(--color-text) !important;
}
[data-theme="dark"] .recordings-panel {
background-color: var(--color-bg) !important;
border-color: var(--color-border) !important;
}
[data-theme="dark"] .main-content {
background-color: var(--color-bg) !important;
}
[data-theme="dark"] .main-content .container-fluid {
background-color: var(--color-bg) !important;
}
[data-theme="dark"] .main-content .container-fluid > .d-flex {
border-color: var(--color-border) !important;
}
[data-theme="dark"] .recordings-panel h4 {
color: var(--color-text) !important;
}
[data-theme="dark"] .recordings-table {
background-color: var(--color-surface) !important;
border-color: var(--color-border) !important;
outline: none !important;
}
[data-theme="dark"] .recordings-table .table {
border-color: var(--color-border) !important;
--bs-table-border-color: var(--color-border);
outline: none !important;
}
[data-theme="dark"] .recordings-table .table > * {
border-color: var(--color-border) !important;
}
[data-theme="dark"] .recordings-table .table {
background-color: var(--color-surface) !important;
color: var(--color-text) !important;
border-color: var(--color-border) !important;
--bs-table-border-color: var(--color-border);
--bs-table-color: var(--color-text);
--bs-table-bg: var(--color-surface);
}
[data-theme="dark"] .recordings-table thead th {
background-color: var(--color-surface-2) !important;
color: var(--color-text) !important;
border-bottom-color: var(--color-border) !important;
box-shadow: 0 2px 4px var(--color-shadow) !important;
}
[data-theme="dark"] .recordings-table tbody {
background-color: var(--color-surface) !important;
color: var(--color-text) !important;
}
[data-theme="dark"] .recordings-table tbody tr {
background-color: var(--color-surface) !important;
color: var(--color-text) !important;
border-color: var(--color-border) !important;
}
[data-theme="dark"] .recordings-table tbody td {
color: var(--color-text) !important;
border-color: var(--color-border) !important;
}
[data-theme="dark"] .recording-row {
color: var(--color-text) !important;
}
[data-theme="dark"] .recording-row td {
color: var(--color-text) !important;
}
[data-theme="dark"] .sortable-column:hover {
background-image: linear-gradient(var(--color-brand-muted), var(--color-brand-muted)) !important;
}
[data-theme="dark"] .recording-row:hover {
background-color: var(--color-brand-subtle) !important;
}
[data-theme="dark"] .recording-row:hover td {
color: var(--color-text) !important;
}
[data-theme="dark"] .recording-row.selected td {
background-color: var(--color-row-selected) !important;
color: var(--color-row-selected-text) !important;
}
[data-theme="dark"] .recording-row.selected:hover td {
background-color: var(--color-row-selected) !important;
color: var(--color-row-selected-text) !important;
}
[data-theme="dark"] .master-playback h6 {
color: var(--color-text) !important;
}
[data-theme="dark"] .badge.bg-warning {
background-color: var(--color-warning) !important;
color: var(--color-bg) !important;
}
[data-theme="dark"] .tooltip {
--bs-tooltip-bg: var(--color-surface-3);
--bs-tooltip-color: var(--color-text);
}
[data-theme="dark"] .tooltip-inner {
background-color: var(--color-surface-3);
color: var(--color-text);
}
[data-theme="dark"] .twofa-qr-wrapper {
background-color: var(--color-white) !important;
border-color: var(--color-border) !important;
}
[data-theme="dark"] .twofa-manual-key {
background-color: var(--color-surface-2) !important;
border-color: var(--color-border) !important;
color: var(--color-text) !important;
}
[data-theme="dark"] .twofa-backup-grid {
background-color: var(--color-surface-2) !important;
border-color: var(--color-border) !important;
}
[data-theme="dark"] .twofa-backup-code {
color: var(--color-text) !important;
}
[data-theme="dark"] .twofa-code-input {
background-color: var(--color-surface-2) !important;
border-color: var(--color-border) !important;
color: var(--color-text) !important;
}
[data-theme="dark"] .backup-grid {
background-color: var(--color-surface-2) !important;
border-color: var(--color-border) !important;
}
[data-theme="dark"] .backup-code-item {
color: var(--color-text) !important;
}