AyronSantos/chatc2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
12d419de7ccf3c6b34f46aa1e1432bae7bb99b1b
chatc2/src/public/css/dark-mode.css
T
AyronSantos 12d419de7c feat: comprehensive design system overhaul 
Applied impeccable design critique, audit, harden, layout, distill, and polish across all pages.

DESIGN SYSTEM:
- Created PRODUCT.md (5 design principles, WCAG 2.1 AA target)
- Created DESIGN.md (34 color tokens, 6 radius scale, full component spec)
- Created .impeccable/design.json (sidecar with tonal ramps, shadows, motion)

ACCESSIBILITY:
- 33 aria-labels across 7 pages (was ~13)
- 63 <label> elements (was ~30)
- 6 <main> landmarks + role=navigation on all sidebars
- Esc to close modals on 4 pages
- Keyboard shortcuts (Ctrl+J/K, Ctrl+F) on chat

THEMING:
- 216 hardcoded colors replaced with var() references
- 449 !important removed from dark-mode.css
- Dark mode script unified (was duplicated 9x inline)
- All modals converted to .modal-overlay + .modal design system classes

CHAT:
- Error states for messages (.msg.erro, .msg.enviando)
- Connection status indicator
- Confirmation modal before finalizar
- Input bar reorganized (3 visible actions, + menu)
- Right panel accordions
- Send button disabled when empty
- Touch targets 44px on mobile

CLIENT DETAIL:
- Tabs/badges/sub-tabs use CSS classes instead of inline styles
- 'Iniciar Conversa' button now primary action
- alert() replaced with inline feedback
- Modal converted to design system classes

CLIENT LIST:
- Modal moved inside <body> (was HTML-invalid)
- alert() replaced with inline feedback
- Modal uses .show pattern

SETTINGS:
- 4 modals converted to design system classes
- 14 alert() calls replaced with inline feedback
- fecharModal() uses classList instead of style.display

ROUTES:
- border-radius normalized, hardcoded colors fixed

Score progression:
  Chat:        23 → 32/40
  Client List: 32 → 35/40
  Client Detail: 26 → 30/40
  Settings:     29 → 35/40
  Routes:       37 → 38/40
  Audit (project): 14/20 → 17/20
2026-06-23 16:58:12 +00:00

1067 lines
24 KiB
CSS
Raw Blame History

/* ===== DARK MODE - Estilos completos ===== */
html.dark-mode-pending body { visibility: hidden; }
body.dark-mode {
background: #1a1a2e;
color: #e0e0e0;
}
/* ===== LAYOUT GERAL ===== */
body.dark-mode .container,
body.dark-mode .main-content,
body.dark-mode .page-wrapper,
body.dark-mode .login-container,
body.dark-mode .dashboard-container,
body.dark-mode .client-list-container,
body.dark-mode .client-detail-container,
body.dark-mode .chat-container,
body.dark-mode .settings-container,
body.dark-mode .admin-conv-container,
body.dark-mode .routes-container,
body.dark-mode .main {
background: #1a1a2e;
color: #e0e0e0;
}
/* ===== SIDEBAR ===== */
body.dark-mode .sidebar {
background: #16213e;
border-right: 1px solid #0f3460;
}
body.dark-mode .sidebar .nav-link,
body.dark-mode .sidebar-nav a {
color: #b0b0b0;
}
body.dark-mode .sidebar .nav-link:hover,
body.dark-mode .sidebar-nav a:hover,
body.dark-mode .sidebar .nav-link.active,
body.dark-mode .sidebar-nav a.active {
background: #0f3460;
color: #fff;
}
body.dark-mode .sidebar .empresa-nome,
body.dark-mode .sidebar-brand h2,
body.dark-mode .sidebar-brand span {
color: #e0e0e0;
}
body.dark-mode .sidebar-brand {
border-bottom: 1px solid rgba(255,255,255,0.1);
}
body.dark-mode .sidebar-footer {
border-top: 1px solid #0f3460;
}
body.dark-mode .sidebar-footer a {
color: rgba(255,255,255,0.6);
}
body.dark-mode .sidebar-footer a:hover {
background: rgba(255,255,255,0.1);
color: #fca5a5;
}
body.dark-mode .nav-label {
color: #888;
}
/* ===== TOPBAR ===== */
body.dark-mode .topbar,
body.dark-mode .header {
background: #16213e;
border-bottom: 1px solid #0f3460;
}
body.dark-mode .topbar .topbar-title,
body.dark-mode .topbar-title {
color: #e0e0e0;
}
body.dark-mode .topbar .user-info {
color: #c0c0c0;
}
/* ===== CARDS ===== */
body.dark-mode .card {
background: #16213e;
border: 1px solid #0f3460;
color: #e0e0e0;
box-shadow: none;
}
body.dark-mode .card h3,
body.dark-mode .card h2,
body.dark-mode .card h1 {
color: #e0e0e0;
}
body.dark-mode .card p {
color: #c0c0c0;
}
/* ===== TABLES ===== */
body.dark-mode table {
color: #e0e0e0;
}
body.dark-mode table thead th,
body.dark-mode table th {
background: #0f3460;
color: #fff;
border-color: #1a1a2e;
}
body.dark-mode table tbody td,
body.dark-mode table td {
background: #16213e;
border-color: #0f3460;
color: #e0e0e0;
}
body.dark-mode table tbody tr:hover td {
background: #1a2744;
}
body.dark-mode table tr:nth-child(even) td {
background: #1a1a2e;
}
/* ===== FORMS ===== */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .form-control,
body.dark-mode input[type="text"],
body.dark-mode input[type="password"],
body.dark-mode input[type="email"],
body.dark-mode input[type="number"],
body.dark-mode input[type="search"],
body.dark-mode textarea.form-control {
background: #1a1a2e;
border: 1px solid #0f3460;
color: #e0e0e0;
}
body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus,
body.dark-mode .form-control:focus {
background: #1a2744;
border-color: #533483;
color: #fff;
box-shadow: 0 0 0 0.2rem rgba(83, 52, 131, 0.25);
}
body.dark-mode label {
color: #c0c0c0;
}
body.dark-mode ::placeholder {
color: #666;
}
/* ===== BUTTONS ===== */
body.dark-mode .btn-primary {
background: #533483;
border-color: #533483;
color: #fff;
}
body.dark-mode .btn-primary:hover {
background: #6a4c9c;
border-color: #6a4c9c;
}
body.dark-mode .btn-secondary {
background: #0f3460;
border-color: #0f3460;
color: #e0e0e0;
}
body.dark-mode .btn-secondary:hover {
background: #1a4a7a;
}
body.dark-mode .btn-copy,
body.dark-mode .btn {
background: #0f3460;
border-color: #0f3460;
color: #e0e0e0;
}
body.dark-mode .btn-copy:hover,
body.dark-mode .btn:hover {
background: #1a4a7a;
}
body.dark-mode .btn-danger {
background: #8b0000;
border-color: #8b0000;
}
body.dark-mode .btn-success {
background: #006400;
border-color: #006400;
}
body.dark-mode .btn-warning {
background: #8b6914;
border-color: #8b6914;
color: #fff;
}
body.dark-mode .btn-info {
background: #0f3460;
border-color: #0f3460;
color: #fff;
}
body.dark-mode .btn-outline-secondary {
border-color: #0f3460;
color: #e0e0e0;
}
body.dark-mode .btn-outline-secondary:hover {
background: #0f3460;
color: #fff;
}
/* ===== LINKS ===== */
body.dark-mode a {
color: #7b68ee;
}
body.dark-mode a:hover {
color: #9b8fff;
}
/* ===== BADGES ===== */
body.dark-mode .badge {
color: #e0e0e0;
}
body.dark-mode .badge-secondary,
body.dark-mode .badge-light {
background: #0f3460;
color: #e0e0e0;
}
body.dark-mode .badge-success {
background: #006400;
}
body.dark-mode .badge-warning {
background: #8b6914;
}
body.dark-mode .badge-danger {
background: #8b0000;
}
body.dark-mode .badge-info {
background: #0f3460;
}
body.dark-mode .badge-primary {
background: #533483;
}
/* ===== MODAL ===== */
body.dark-mode .modal,
body.dark-mode .modal-content,
body.dark-mode .modal-overlay > div {
background: #16213e;
border: 1px solid #0f3460;
color: #e0e0e0;
}
body.dark-mode .modal-header {
background: #0f3460;
border-bottom: 1px solid #1a1a2e;
color: #e0e0e0;
}
body.dark-mode .modal-footer {
background: #16213e;
border-top: 1px solid #0f3460;
}
body.dark-mode .close,
body.dark-mode .modal-header .close {
color: #e0e0e0;
text-shadow: none;
opacity: 0.8;
}
body.dark-mode .modal-overlay {
background: rgba(0,0,0,0.7);
}
body.dark-mode .modal-body {
color: #e0e0e0;
}
/* ===== DROPDOWN ===== */
body.dark-mode .dropdown-menu {
background: #16213e;
border: 1px solid #0f3460;
}
body.dark-mode .dropdown-item {
color: #e0e0e0;
}
body.dark-mode .dropdown-item:hover {
background: #0f3460;
color: #fff;
}
/* ===== LIST GROUP ===== */
body.dark-mode .list-group-item {
background: #16213e;
border: 1px solid #0f3460;
color: #e0e0e0;
}
body.dark-mode .list-group-item:hover {
background: #1a2744;
}
body.dark-mode .list-group-item.active {
background: #533483;
border-color: #533483;
}
/* ===== SCROLLBAR ===== */
body.dark-mode ::-webkit-scrollbar {
width: 8px;
height: 8px;
}
body.dark-mode ::-webkit-scrollbar-track {
background: #1a1a2e;
}
body.dark-mode ::-webkit-scrollbar-thumb {
background: #0f3460;
border-radius: 4px;
}
body.dark-mode ::-webkit-scrollbar-thumb:hover {
background: #533483;
}
/* ===== CHAT ESPECÍFICO ===== */
body.dark-mode .sidebar-left {
background: #16213e;
border-right: 1px solid #0f3460;
}
body.dark-mode .sidebar-left .nav-tabs a {
color: #888;
}
body.dark-mode .sidebar-left .nav-tabs a:hover {
color: #e0e0e0;
}
body.dark-mode .sidebar-left .nav-tabs a.active {
color: #7b68ee;
border-bottom-color: #7b68ee;
}
body.dark-mode .sidebar-left .search-box input {
background: #1a1a2e;
border-color: #0f3460;
color: #e0e0e0;
}
body.dark-mode .conv-item {
border-bottom: 1px solid #0f3460;
}
body.dark-mode .conv-item:hover {
background: #1a2744;
}
body.dark-mode .conv-item .conv-nome {
color: #e0e0e0;
}
body.dark-mode .conv-item .conv-ultima {
color: #888;
}
body.dark-mode .conv-item .conv-status {
color: #666;
}
/* Chat center */
body.dark-mode .chat-center {
background: #1a1a2e;
}
body.dark-mode .chat-header {
background: #16213e;
border-bottom: 1px solid #0f3460;
}
body.dark-mode .chat-header .info h3 {
color: #e0e0e0;
}
body.dark-mode .chat-header .info span {
color: #888;
}
body.dark-mode .chat-header .actions button {
background: #0f3460;
border-color: #0f3460;
color: #e0e0e0;
}
body.dark-mode .chat-header .actions button:hover {
background: #1a4a7a;
}
body.dark-mode .chat-header .actions .btn-finalizar {
background: #8b0000;
border-color: #8b0000;
color: #fff;
}
/* Messages area */
body.dark-mode .messages-area {
background: #1a1a2e;
}
body.dark-mode .msg.cliente {
background: #16213e;
border: 1px solid #0f3460;
color: #e0e0e0;
}
body.dark-mode .msg.usuario {
background: #533483;
color: #fff;
}
body.dark-mode .msg.sistema {
background: #0f3460;
color: #b0c4de;
}
body.dark-mode .msg.privada {
background: #3a2e0a;
color: #ffd700;
}
body.dark-mode .msg .msg-time {
color: #888;
}
body.dark-mode .msg .msg-user {
color: #7b68ee;
}
/* Chat input */
body.dark-mode .chat-input {
background: #16213e;
border-top: 1px solid #0f3460;
}
body.dark-mode .chat-input textarea {
background: #1a1a2e;
border: 1px solid #0f3460;
color: #e0e0e0;
}
body.dark-mode .chat-input .btn-enviar {
background: #533483;
color: #fff;
}
body.dark-mode .chat-input .btn-midia {
background: #0f3460;
border-color: #0f3460;
color: #e0e0e0;
}
body.dark-mode .chat-input .btn-midia:hover {
background: #1a4a7a;
}
body.dark-mode .chat-input .privada-toggle {
background: #0f3460;
border-color: #0f3460;
color: #e0e0e0;
}
body.dark-mode .chat-input .privada-toggle.ativa {
background: #3a2e0a;
border-color: #f59e0b;
color: #ffd700;
}
body.dark-mode .chat-input .btn-audio {
background: #0f3460;
border-color: #0f3460;
color: #e0e0e0;
}
body.dark-mode .chat-input .btn-audio:hover {
background: #1a4a7a;
}
body.dark-mode .chat-input .btn-audio.recording {
background: #4a0a0a;
border-color: #ef4444;
color: #ef4444;
}
/* Chat right panel */
body.dark-mode .sidebar-right .acoes button {
background: #0f3460;
border-color: #0f3460;
color: #e0e0e0;
}
body.dark-mode .sidebar-right .acoes button:hover {
background: #1a4a7a;
}
body.dark-mode .sidebar-right .labels-section .label-tag {
color: #fff;
}
body.dark-mode .sidebar-right select {
background: #1a1a2e;
border-color: #0f3460;
color: #e0e0e0;
}
body.dark-mode .sidebar-right {
background: #16213e;
border-left: 1px solid #0f3460;
color: #e0e0e0;
}
body.dark-mode .sidebar-right .header {
border-bottom: 1px solid #0f3460;
}
body.dark-mode .sidebar-right .header h3 {
color: #e0e0e0;
}
body.dark-mode .sidebar-right .cliente-foto {
background: #0f3460;
color: #888;
}
body.dark-mode .sidebar-right .info-section {
border-bottom: 1px solid #0f3460;
}
body.dark-mode .sidebar-right .info-section .label {
color: #888;
}
body.dark-mode .sidebar-right .info-section .value {
color: #e0e0e0;
}
body.dark-mode .sidebar-right .info-section .inadimplente {
color: #ff6b6b;
}
body.dark-mode .sidebar-right .info-section .adimplente {
color: #4ade80;
}
body.dark-mode .right-panel {
background: #16213e;
border-left: 1px solid #0f3460;
color: #e0e0e0;
}
body.dark-mode .right-panel-section {
border-bottom: 1px solid #0f3460;
}
/* ===== CLIENT DETAIL ===== */
body.dark-mode .client-header {
background: #16213e;
border-bottom: 1px solid #0f3460;
}
body.dark-mode .client-header .client-header-info h1 {
color: #e0e0e0;
}
body.dark-mode .client-header .client-header-info span {
color: #888;
}
body.dark-mode .tab-btn {
background: #1a1a2e;
border: 1px solid #0f3460;
border-bottom: none;
color: #888;
}
body.dark-mode .tab-btn:hover {
background: #16213e;
color: #e0e0e0;
}
body.dark-mode .tab-btn.active {
background: #16213e;
color: #7b68ee;
border-bottom: 2px solid #7b68ee;
}
body.dark-mode .tab-content {
background: #16213e;
border: 1px solid #0f3460;
color: #e0e0e0;
}
body.dark-mode .info-grid .info-item {
color: #e0e0e0;
}
body.dark-mode .info-grid .info-item .label {
color: #888;
}
body.dark-mode .info-grid .info-item .value {
color: #e0e0e0;
}
body.dark-mode .carnes-filters {
background: #16213e;
}
body.dark-mode .carnes-filters button {
background: #0f3460;
color: #e0e0e0;
border-color: #0f3460;
}
body.dark-mode .carnes-filters button.active {
background: #533483;
border-color: #533483;
}
/* ===== SETTINGS ===== */
body.dark-mode .tabs-container {
background: #16213e;
}
body.dark-mode .tabs-container .tab {
background: #1a1a2e;
border: 1px solid #0f3460;
color: #888;
}
body.dark-mode .tabs-container .tab:hover {
background: #16213e;
color: #e0e0e0;
}
body.dark-mode .tabs-container .tab.active {
background: #16213e;
color: #7b68ee;
border-bottom: 2px solid #7b68ee;
}
body.dark-mode .tab-panel {
background: #16213e;
border: 1px solid #0f3460;
color: #e0e0e0;
}
/* ===== NAV TABS (Bootstrap) ===== */
body.dark-mode .nav-tabs {
border-bottom-color: #0f3460;
}
body.dark-mode .nav-tabs .nav-link {
color: #888;
border-color: transparent;
}
body.dark-mode .nav-tabs .nav-link:hover {
background: #16213e;
border-color: #0f3460;
color: #e0e0e0;
}
body.dark-mode .nav-tabs .nav-link.active {
background: #16213e;
color: #7b68ee;
border-color: #0f3460;
border-bottom-color: #16213e;
}
body.dark-mode .tab-content {
background: #16213e;
border: 1px solid #0f3460;
border-top: none;
color: #e0e0e0;
}
/* ===== LOGIN ===== */
body.dark-mode .login-container {
background: #1a1a2e;
}
body.dark-mode .login-header {
background: transparent;
}
body.dark-mode .login-header h1 {
color: #e0e0e0;
}
body.dark-mode .login-header p {
color: #888;
}
body.dark-mode .login-box,
body.dark-mode .login-card {
background: #16213e;
border: 1px solid #0f3460;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
body.dark-mode .login-box h2,
body.dark-mode .login-card h2 {
color: #e0e0e0;
}
/* ===== PAGINATION ===== */
body.dark-mode .page-link {
background: #16213e;
border-color: #0f3460;
color: #e0e0e0;
}
body.dark-mode .page-item.active .page-link {
background: #533483;
border-color: #533483;
}
body.dark-mode .page-item.disabled .page-link {
background: #1a1a2e;
color: #666;
}
/* ===== ALERTS ===== */
body.dark-mode .alert {
background: #16213e;
border-color: #0f3460;
color: #e0e0e0;
}
body.dark-mode .alert-success {
background: #0a2e0a;
border-color: #006400;
color: #90ee90;
}
body.dark-mode .alert-danger {
background: #2e0a0a;
border-color: #8b0000;
color: #ff9090;
}
body.dark-mode .alert-warning {
background: #2e2a0a;
border-color: #8b6914;
color: #ffd700;
}
body.dark-mode .alert-info {
background: #0a1a2e;
border-color: #0f3460;
color: #87ceeb;
}
/* ===== MISC ===== */
body.dark-mode .text-muted {
color: #888;
}
body.dark-mode hr {
border-color: #0f3460;
}
body.dark-mode pre,
body.dark-mode code {
background: #1a1a2e;
color: #e0e0e0;
}
body.dark-mode .page-title,
body.dark-mode .section-title {
color: #e0e0e0;
}
body.dark-mode .back-btn {
color: #7b68ee;
}
body.dark-mode .back-btn:hover {
color: #9b8fff;
}
body.dark-mode .client-link {
color: #7b68ee;
}
body.dark-mode .loading {
color: #888;
}
body.dark-mode .spinner {
border-top-color: #7b68ee;
}
body.dark-mode .empty-state {
color: #888;
}
body.dark-mode .empty-state h3 {
color: #c0c0c0;
}
body.dark-mode .empresa-tag {
background: #0f3460;
color: #e0e0e0;
}
/* Token box */
body.dark-mode .token-box {
background: #1a1a2e;
border: 1px solid #0f3460;
color: #e0e0e0;
font-family: monospace;
}
/* Status badges */
body.dark-mode .status-badge {
color: #e0e0e0;
}
/* ===== TOGGLE SWITCH DARK MODE ===== */
.dark-mode-toggle {
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border-radius: 8px;
background: transparent;
border: 1px solid #ccc;
font-size: 13px;
color: #555;
transition: all 0.3s;
}
.dark-mode-toggle:hover {
background: #f0f0f0;
}
body.dark-mode .dark-mode-toggle {
border-color: #0f3460;
color: #e0e0e0;
background: transparent;
}
body.dark-mode .dark-mode-toggle:hover {
background: #0f3460;
}
/* ===== NOVOS ELEMENTOS - main.css ===== */
/* Topbar */
body.dark-mode .topbar {
background: #16213e;
border-bottom: 1px solid #0f3460;
box-shadow: none;
}
body.dark-mode .topbar-title { color: #e0e0e0; }
body.dark-mode .user-name { color: #c0c0c0; }
body.dark-mode .status-badge.online { background: #0a2e0a; color: #4ade80; }
/* Cards - main.css */
body.dark-mode .card {
background: #16213e;
border: 1px solid #0f3460;
box-shadow: none;
}
body.dark-mode .card h3 { color: #c0c0c0; }
/* Info items */
body.dark-mode .info-item {
background: #1a1a2e;
border: 1px solid #0f3460;
}
body.dark-mode .info-item .label { color: #666; }
body.dark-mode .info-item .value { color: #e0e0e0; }
/* Empresa tag */
body.dark-mode .empresa-tag {
background: #1a1a3e;
color: #a78bfa;
}
/* Table wrapper */
body.dark-mode .table-wrapper {
background: #16213e;
border: 1px solid #0f3460;
}
/* Badges */
body.dark-mode .situacao-badge.ativo { background: #0a2e0a; color: #4ade80; }
body.dark-mode .situacao-badge.inativo { background: #2e0a0a; color: #ff6b6b; }
/* Buttons */
body.dark-mode .btn-secondary {
background: #1a1a2e;
border-color: #0f3460;
color: #e0e0e0;
}
body.dark-mode .btn-copy {
background: #0f3460;
color: #e0e0e0;
}
body.dark-mode .btn-copy:hover { background: #1a4a7a; }
/* Search bar */
body.dark-mode .search-bar input,
body.dark-mode .search-bar select {
background: #16213e;
border-color: #0f3460;
color: #e0e0e0;
}
body.dark-mode .search-bar button {
background: #533483;
}
body.dark-mode .search-bar button:hover { background: #6a4c9c; }
body.dark-mode .search-bar .total-info { color: #888; }
/* Pagination */
body.dark-mode .pagination button {
background: #16213e;
border-color: #0f3460;
color: #e0e0e0;
}
body.dark-mode .pagination button.active {
background: #533483;
border-color: #533483;
}
/* Scrollbar */
body.dark-mode ::-webkit-scrollbar-thumb { background: #0f3460; }
body.dark-mode ::-webkit-scrollbar-thumb:hover { background: #533483; }
/* Client detail */
body.dark-mode .client-header {
background: #16213e;
border: 1px solid #0f3460;
}
body.dark-mode .client-header-info h1 { color: #e0e0e0; }
body.dark-mode .client-header-info .matricula { color: #888; }
body.dark-mode .field .label { color: #666; }
body.dark-mode .field .value { color: #e0e0e0; }
body.dark-mode .back-btn {
background: #1a1a2e;
border-color: #0f3460;
color: #e0e0e0;
}
body.dark-mode .carnes-filters label {
background: #1a1a2e;
border-color: #0f3460;
color: #c0c0c0;
}
body.dark-mode .carnes-filters label.filtro-ativo {
border-color: #533483;
background: #1a1a3e;
color: #a78bfa;
}
/* Settings tabs */
body.dark-mode .tabs {
background: #16213e;
border-color: #0f3460;
}
body.dark-mode .tabs button {
background: #16213e;
color: #888;
border-bottom-color: transparent;
}
body.dark-mode .tabs button:hover { background: #1a2744; color: #e0e0e0; }
body.dark-mode .tabs button.active {
background: #1a2744;
color: #a78bfa;
border-bottom-color: #a78bfa;
}
/* Admin conversations */
body.dark-mode .filters select,
body.dark-mode .filters input {
background: #16213e;
border-color: #0f3460;
color: #e0e0e0;
}
body.dark-mode .filters button { background: #533483; }
body.dark-mode .status-E { background: #3a2e0a; color: #ffd700; }
body.dark-mode .status-A { background: #0a2e0a; color: #4ade80; }
body.dark-mode .status-F { background: #1a1a2e; color: #888; }
body.dark-mode .atender-btn { background: #533483; }
/* Routes */
body.dark-mode .search-box input,
body.dark-mode .search-box select {
background: #16213e;
border-color: #0f3460;
color: #e0e0e0;
}
body.dark-mode .copy-btn {
background: #0f3460;
color: #c0c0c0;
}
body.dark-mode .copy-btn:hover { background: #1a4a7a; }
body.dark-mode .route-path { color: #c0c0c0; }
body.dark-mode .card h3 .count {
background: #0f3460;
color: #888;
}
/* ===== CHAT - NOVOS ELEMENTOS ===== */
/* A sidebar-left no chat já é escura - no dark mode fica mais escura */
body.dark-mode .sidebar-left {
background: linear-gradient(180deg, #12102e 0%, #1e1b4b 100%);
}
body.dark-mode .sidebar-left .search-box input[type="text"] {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.12);
color: #e0e0e0;
}
body.dark-mode .conv-item:hover { background: rgba(255,255,255,0.06); }
body.dark-mode .conv-item.active { background: rgba(255,255,255,0.12); }
/* Área de mensagens no dark mode */
body.dark-mode .messages-area {
background-color: #1a1f2e;
background-image: none;
}
body.dark-mode .msg.cliente {
background: #16213e;
border: 1px solid #0f3460;
color: #e0e0e0;
}
body.dark-mode .msg.usuario {
background: #1a3a2e;
color: #e0e0e0;
}
body.dark-mode .msg.sistema {
background: rgba(15,52,96,0.6);
color: #b0c4de;
}
body.dark-mode .msg.privada {
background: #3a2e0a;
color: #ffd700;
border-color: #5a4a0a;
}
/* Chat input no dark mode */
body.dark-mode .chat-input {
background: #12102e;
border-top-color: #0f3460;
}
body.dark-mode .chat-input textarea {
background: #16213e;
border-color: #0f3460;
color: #e0e0e0;
}
body.dark-mode .chat-input textarea::placeholder { color: #555; }
body.dark-mode .chat-input .btn-midia,
body.dark-mode .chat-input .btn-audio,
body.dark-mode .chat-input .privada-toggle {
color: #888;
}
body.dark-mode .chat-input .btn-midia:hover,
body.dark-mode .chat-input .btn-audio:hover {
background: #0f3460;
color: #e0e0e0;
}
/* Login no dark mode */
body.dark-mode .login-container {
background: #16213e;
border: 1px solid #0f3460;
}
body.dark-mode .login-header h1 { color: #e0e0e0; }
body.dark-mode .login-header p { color: #888; }
body.dark-mode .form-group input {
background: #1a1a2e;
border-color: #0f3460;
color: #e0e0e0;
}
body.dark-mode .form-group input:focus {
background: #1a2744;
border-color: #533483;
}
body.dark-mode .login-dark-toggle button {
background: rgba(15,52,96,0.6);
border-color: rgba(255,255,255,0.2);
color: #e0e0e0;
}
/* Modal no dark mode */
body.dark-mode .modal {
background: #16213e;
border: 1px solid #0f3460;
color: #e0e0e0;
}
body.dark-mode .modal h3 { color: #e0e0e0; }
body.dark-mode .modal input,
body.dark-mode .modal select {
background: #1a1a2e;
border-color: #0f3460;
color: #e0e0e0;
}
body.dark-mode .modal .btn-group button {
background: #1a1a2e;
border-color: #0f3460;
color: #e0e0e0;
}
body.dark-mode .modal .btn-group .btn-primary {
background: #533483;
border-color: #533483;
color: #fff;
}
/* Right sidebar no dark mode */
body.dark-mode .sidebar-right {
background: #16213e;
border-left-color: #0f3460;
}
body.dark-mode .sidebar-right .header {
background: #12102e;
border-bottom-color: #0f3460;
}
body.dark-mode .sidebar-right .header h3 { color: #888; }
body.dark-mode .sidebar-right .info-section {
border-bottom-color: #0f3460;
}
body.dark-mode .sidebar-right .info-section .label { color: #666; }
body.dark-mode .sidebar-right .info-section .value { color: #e0e0e0; }
body.dark-mode .sidebar-right .info-section select {
background: #1a1a2e;
border-color: #0f3460;
color: #e0e0e0;
}
body.dark-mode .sidebar-right .acoes button {
background: #1a1a2e;
border-color: #0f3460;
color: #e0e0e0;
}
body.dark-mode .sidebar-right .acoes button:hover { background: #1a2744; }
/* Form settings no dark mode */
body.dark-mode .form-group input,
body.dark-mode .form-group select,
body.dark-mode .form-group textarea {
background: #1a1a2e;
border-color: #0f3460;
color: #e0e0e0;
}
body.dark-mode .form-group label { color: #c0c0c0; }
body.dark-mode .btn-sm { background: #0f3460; color: #e0e0e0; }
/* Badge no dark mode (settings) */
body.dark-mode .badge-success { background: #0a2e0a; color: #4ade80; }
body.dark-mode .badge-danger { background: #2e0a0a; color: #ff6b6b; }
/* Client detail - novas classes */
body.dark-mode .aba-btn.inativo { background: #1a1a2e; color: #888; }
body.dark-mode .aba-btn.inativo:hover { background: #0f3460; }
body.dark-mode .subaba-btn.inativo { background: #1a1a2e; color: #888; }
body.dark-mode .conv-card { border-color: #0f3460; background: #16213e; }
body.dark-mode .conv-badge.ativo { background: #0a1a2e; color: #87ceeb; }
body.dark-mode .btn-acao-topbar { background: #533483; }
body.dark-mode .btn-acao-topbar:hover { background: #6a4c9c; }
body.dark-mode .feedback-msg.sucesso { background: #0a2e0a; color: #4ade80; }
body.dark-mode .feedback-msg.erro { background: #2e0a0a; color: #ff6b6b; }
Reference in New Issue View Git Blame Copy Permalink