/* ============================================================ Tema do DS5Hub — paleta clara/escura e ajustes de terceiros. O tema efetivo fica em , definido antes da primeira pintura pelo script em Views/Shared/_TemaScript.cshtml. A preferência do usuário (sistema/claro/escuro) fica em e no localStorage 'ds5hub:tema'. Este arquivo é carregado por último para vencer o CSS do bootstrap-table, que entra pela seção "Styles" das views. ============================================================ */ :root { color-scheme: light; /* Fundos */ --body-backdrop: radial-gradient(circle at 78% 12%, rgba(111,143,124,.30), transparent 30%), radial-gradient(circle at 12% 88%, rgba(20,35,27,.35), transparent 38%), linear-gradient(135deg, #111a16 0%, #263b31 48%, #111813 100%); --backdrop-solid: #17251e; /* Superfícies */ --surface-shell: #fbfaf6; --surface-topbar: rgba(251,250,246,.97); --surface-app: #f7f8f5; --surface-card: #fff; --surface-raised: #f7f9f7; --surface-input: #fbfcfb; --surface-header: #eef2ee; --surface-hover: #eef5f0; --surface-stripe: #fbfcfa; /* Texto */ --ink: #17211c; --ink-soft: #35453d; --text-body: #435149; --muted: #718078; --faint: #929c96; /* Linhas */ --line: #e5e9e6; --line-soft: #edf0ed; --line-strong: #dce4df; /* Marca */ --sage: #6f8f7c; --sage-pale: #e8f0eb; --accent: #385847; --accent-soft: #5f8c74; --accent-line: rgba(47,105,80,.42); --accent-wash: rgba(92,139,115,.08); --accent-gradient: linear-gradient(135deg,#6f9b84,#38634e); --brand-tint: #edf3ef; --brand-tint-strong: #e5eee8; --focus-ring: rgba(76,125,101,.10); /* Ações */ --btn-primary-bg: #0d6efd; --btn-primary-hover: #0b5ed7; --switch-on: #3f7a61; /* Estados */ --ok-fg: #397259; --ok-bg: #e7f2eb; --warn-fg: #946f2b; --warn-bg: #fbf1dc; --danger-fg: #a44747; --danger-bg: #fae8e8; /* Dashboard */ --today-fg: #dcebe3; --today-bg: linear-gradient(145deg,#426e59,#284d3d); --chart-1: #315d49; --chart-2: #6e9d84; --chart-3: #a5c3b3; --chart-4: #d7e4dc; --chart-5: #c9b27c; --chart-6: #8aa4b5; --spinner-1: #39745d; --spinner-2: #79a18e; --spinner-3: #a6c6b5; /* Trilho lateral */ --rail-bg: linear-gradient(180deg,#285244 0%,#173a30 52%,#0d251e 100%); --rail-fg: rgba(255,255,255,.72); --rail-fg-active: #fff; --rail-hover: rgba(255,255,255,.10); --rail-line: rgba(255,255,255,.12); --rail-tooltip: #17251e; /* Sombras */ --shadow-card: 0 8px 26px rgba(26,43,34,.055); --shadow-soft: 0 6px 18px rgba(28,55,41,.045); --shadow-pop: 0 14px 30px rgba(28,55,41,.17); --shadow-rail: -6px 8px 18px rgba(0,0,0,.10); } :root[data-theme="dark"] { color-scheme: dark; --body-backdrop: radial-gradient(circle at 78% 12%, rgba(111,143,124,.16), transparent 30%), radial-gradient(circle at 12% 88%, rgba(0,0,0,.45), transparent 38%), linear-gradient(135deg, #0a100d 0%, #111a16 48%, #080d0b 100%); --backdrop-solid: #0b120f; --surface-shell: #121a17; --surface-topbar: #141d19; --surface-app: #0e1512; --surface-card: #18211d; --surface-raised: #1d2723; --surface-input: #141e19; --surface-header: #1f2a26; --surface-hover: #24312b; --surface-stripe: #151f1b; --ink: #e7eee9; --ink-soft: #d2ded7; --text-body: #b6c5bd; --muted: #8fa199; --faint: #7b8d85; --line: #28352f; --line-soft: #222e28; --line-strong: #33413a; --sage: #8fb5a0; --sage-pale: #22322b; --accent: #9dc4ad; --accent-soft: #79a790; --accent-line: rgba(125,175,150,.42); --accent-wash: rgba(125,175,150,.10); --accent-gradient: linear-gradient(135deg,#4b8770,#2c5745); --brand-tint: #1f2f28; --brand-tint-strong: #26382f; --focus-ring: rgba(143,181,160,.22); --btn-primary-bg: #3b7ddd; --btn-primary-hover: #4d8ce6; --switch-on: #4e9b78; --ok-fg: #7fc79f; --ok-bg: #1c3529; --warn-fg: #dfb268; --warn-bg: #372c18; --danger-fg: #e79191; --danger-bg: #3a2121; --today-fg: #dcebe3; --today-bg: linear-gradient(145deg,#2f5a49,#1d3b30); --chart-1: #7fc09c; --chart-2: #5b9c7d; --chart-3: #3f7460; --chart-4: #2a4a3d; --chart-5: #d4b878; --chart-6: #7fa3bd; --spinner-1: #6fb694; --spinner-2: #4b8a6f; --spinner-3: #2f5a48; /* Um pouco mais claro que --surface-shell para o recorte do item ativo aparecer. */ --rail-bg: linear-gradient(180deg,#22362d 0%,#1b2b23 52%,#142019 100%); --rail-fg: rgba(224,238,231,.62); --rail-fg-active: #f2fbf6; --rail-hover: rgba(255,255,255,.07); --rail-line: rgba(255,255,255,.08); --rail-tooltip: #0a120f; --shadow-card: 0 10px 28px rgba(0,0,0,.40); --shadow-soft: 0 6px 18px rgba(0,0,0,.32); --shadow-pop: 0 16px 34px rgba(0,0,0,.52); --shadow-rail: -6px 8px 18px rgba(0,0,0,.45); } /* ============================================================ Botão de alternância de tema ============================================================ */ .tema-alternador-flutuante { position: fixed; top: 22px; right: 22px; z-index: 30; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; color: var(--ink); background: var(--surface-card); border: 1px solid var(--line-strong); border-radius: 50%; font-size: 1.05rem; box-shadow: var(--shadow-soft); transition: color .18s, background .18s, transform .18s; } .tema-alternador-flutuante:hover { color: var(--accent); background: var(--surface-hover); transform: translateY(-1px); } @media (max-width: 520px) { .tema-alternador-flutuante { top: 14px; right: 14px; } } /* ============================================================ Ajustes do Bootstrap 5.1 no tema escuro. Esta versão não tem suporte nativo a tema escuro (data-bs-theme só existe a partir da 5.3), então os componentes usados no projeto são repintados aqui manualmente. ============================================================ */ [data-theme="dark"] hr { border-color: var(--line); opacity: 1; } /* Azul de link do Bootstrap clareado. As exclusões preservam os links que já têm cor própria — sem elas esta regra venceria por especificidade. */ [data-theme="dark"] a:not(.rail-link):not(.sidebar-brand):not(.top-bar-user):not(.btn):not(.page-link):not(.dropdown-item):not(.nav-link) { color: #86b3f3; } [data-theme="dark"] .rail-link.active::before { box-shadow: 5px 5px 0 4px #0e1512; } [data-theme="dark"] .rail-link.active::after { box-shadow: 5px -5px 0 4px #0e1512; } [data-theme="dark"] .rail-link.active { background: #0e1512; } /* Formulários */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { color: var(--ink); background-color: var(--surface-input); border-color: var(--line-strong); } [data-theme="dark"] .form-control::placeholder { color: var(--faint); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { color: var(--ink); background-color: var(--surface-card); border-color: var(--sage); box-shadow: 0 0 0 .25rem var(--focus-ring); } [data-theme="dark"] .form-control:disabled, [data-theme="dark"] .form-control[readonly], [data-theme="dark"] .form-select:disabled { color: var(--muted); background-color: var(--surface-raised); } [data-theme="dark"] .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238fa199' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } [data-theme="dark"] .form-check-input { background-color: var(--surface-input); border-color: var(--line-strong); } [data-theme="dark"] .form-check-input:focus { border-color: var(--sage); box-shadow: 0 0 0 .25rem var(--focus-ring); } [data-theme="dark"] .form-check-input:checked { background-color: var(--switch-on); border-color: var(--switch-on); } [data-theme="dark"] .form-switch .form-check-input { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255,255,255,0.45%29'/%3e%3c/svg%3e"); } [data-theme="dark"] .form-switch .form-check-input:focus, [data-theme="dark"] .form-switch .form-check-input:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); } [data-theme="dark"] .input-group-text { color: var(--ink); background-color: var(--surface-raised); border-color: var(--line-strong); } [data-theme="dark"] .form-label, [data-theme="dark"] .form-check-label { color: var(--text-body); } [data-theme="dark"] .invalid-feedback, [data-theme="dark"] .field-validation-error { color: var(--danger-fg); } /* Anel de foco global definido em site.css: o branco não funciona no escuro */ [data-theme="dark"] .btn:focus, [data-theme="dark"] .btn:active:focus, [data-theme="dark"] .btn-link.nav-link:focus, [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-check-input:focus { box-shadow: 0 0 0 .1rem var(--surface-app), 0 0 0 .25rem var(--sage); } /* Botões */ [data-theme="dark"] .btn-primary { color: #fff; background-color: var(--btn-primary-bg); border-color: var(--btn-primary-bg); } [data-theme="dark"] .btn-primary:hover, [data-theme="dark"] .btn-primary:focus, [data-theme="dark"] .btn-primary:active { color: #fff; background-color: var(--btn-primary-hover); border-color: var(--btn-primary-hover); } [data-theme="dark"] .btn-secondary { color: var(--ink); background-color: var(--surface-raised); border-color: var(--line-strong); } [data-theme="dark"] .btn-secondary:hover, [data-theme="dark"] .btn-secondary:focus { color: var(--ink); background-color: var(--surface-hover); border-color: var(--line-strong); } [data-theme="dark"] .btn-outline-secondary { color: var(--muted); border-color: var(--line-strong); } [data-theme="dark"] .btn-outline-secondary:hover, [data-theme="dark"] .btn-outline-secondary:focus { color: var(--ink); background-color: var(--surface-hover); border-color: var(--line-strong); } [data-theme="dark"] .btn-outline-dark { color: var(--ink-soft); border-color: var(--line-strong); } [data-theme="dark"] .btn-outline-dark:hover, [data-theme="dark"] .btn-outline-dark:focus { color: var(--surface-app); background-color: var(--ink-soft); border-color: var(--ink-soft); } [data-theme="dark"] .btn-outline-primary { color: #86b3f3; border-color: #3c6291; } [data-theme="dark"] .btn-outline-primary:hover, [data-theme="dark"] .btn-outline-primary:focus { color: #fff; background-color: var(--btn-primary-bg); border-color: var(--btn-primary-bg); } [data-theme="dark"] .btn-outline-danger { color: var(--danger-fg); border-color: #6d3838; } [data-theme="dark"] .btn-outline-danger:hover, [data-theme="dark"] .btn-outline-danger:focus { color: #1d0f0f; background-color: var(--danger-fg); border-color: var(--danger-fg); } [data-theme="dark"] .btn-outline-warning { color: var(--warn-fg); border-color: #6a5426; } [data-theme="dark"] .btn-outline-warning:hover, [data-theme="dark"] .btn-outline-warning:focus { color: #1b1509; background-color: var(--warn-fg); border-color: var(--warn-fg); } [data-theme="dark"] .btn-outline-success { color: var(--ok-fg); border-color: #2f5c45; } [data-theme="dark"] .btn-outline-success:hover, [data-theme="dark"] .btn-outline-success:focus { color: #0b1712; background-color: var(--ok-fg); border-color: var(--ok-fg); } [data-theme="dark"] .btn-link { color: var(--accent); } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* Tabelas */ [data-theme="dark"] .table { color: var(--ink); border-color: var(--line); --bs-table-striped-color: var(--ink); --bs-table-striped-bg: rgba(255,255,255,.035); --bs-table-hover-color: var(--ink); --bs-table-hover-bg: rgba(255,255,255,.055); --bs-table-active-color: var(--ink); --bs-table-active-bg: rgba(255,255,255,.07); } /* Paginação */ [data-theme="dark"] .page-link { color: var(--accent); background-color: var(--surface-card); border-color: var(--line); } [data-theme="dark"] .page-link:hover { color: var(--ink); background-color: var(--surface-hover); border-color: var(--line-strong); } [data-theme="dark"] .page-item.disabled .page-link { color: var(--faint); background-color: var(--surface-raised); border-color: var(--line); } [data-theme="dark"] .page-item.active .page-link, [data-theme="dark"] .active > .page-link, [data-theme="dark"] .page-link.active { color: #fff; background-color: var(--btn-primary-bg); border-color: var(--btn-primary-bg); } /* Menus suspensos (seletor de colunas das tabelas) */ [data-theme="dark"] .dropdown-menu { color: var(--ink); background-color: var(--surface-card); border-color: var(--line-strong); box-shadow: var(--shadow-pop); } [data-theme="dark"] .dropdown-item { color: var(--ink); } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { color: var(--ink); background-color: var(--surface-hover); } [data-theme="dark"] .dropdown-divider { border-top-color: var(--line); } /* Modais */ [data-theme="dark"] .modal-content { color: var(--ink); background-color: var(--surface-card); border-color: var(--line-strong); } [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: var(--line); } /* Cartões e listas */ [data-theme="dark"] .card { color: var(--ink); background-color: var(--surface-card); border-color: var(--line); } [data-theme="dark"] .card-header, [data-theme="dark"] .card-footer { background-color: var(--surface-raised); border-color: var(--line); } [data-theme="dark"] .list-group-item { color: var(--ink); background-color: var(--surface-card); border-color: var(--line); } /* Alertas */ [data-theme="dark"] .alert-success { color: var(--ok-fg); background-color: var(--ok-bg); border-color: rgba(127,199,159,.28); } [data-theme="dark"] .alert-danger { color: var(--danger-fg); background-color: var(--danger-bg); border-color: rgba(231,145,145,.28); } [data-theme="dark"] .alert-warning { color: var(--warn-fg); background-color: var(--warn-bg); border-color: rgba(223,178,104,.28); } [data-theme="dark"] .alert-info { color: #8fc4d8; background-color: #16292f; border-color: rgba(143,196,216,.28); } [data-theme="dark"] .alert-light, [data-theme="dark"] .alert-secondary { color: var(--ink); background-color: var(--surface-raised); border-color: var(--line-strong); } /* Utilitários */ [data-theme="dark"] .text-muted, [data-theme="dark"] .text-secondary { color: var(--muted) !important; } [data-theme="dark"] .text-dark, [data-theme="dark"] .text-body { color: var(--ink) !important; } [data-theme="dark"] .text-danger { color: var(--danger-fg) !important; } [data-theme="dark"] .text-primary { color: #86b3f3 !important; } [data-theme="dark"] .bg-white, [data-theme="dark"] .bg-light { background-color: var(--surface-card) !important; } [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(--line) !important; } /* ============================================================ Ajustes do bootstrap-table no tema escuro ============================================================ */ [data-theme="dark"] .bootstrap-table .fixed-table-container, [data-theme="dark"] .bootstrap-table .fixed-table-body, [data-theme="dark"] .bootstrap-table .fixed-table-container .table { background-color: transparent; } [data-theme="dark"] .bootstrap-table .fixed-table-container tbody td .th-inner { background-color: var(--surface-card); } [data-theme="dark"] .fixed-table-loading { color: var(--muted); background: var(--surface-card); } [data-theme="dark"] .bootstrap-table .no-records-found td { color: var(--muted); background: var(--surface-card); } [data-theme="dark"] .bootstrap-table .fixed-table-pagination, [data-theme="dark"] .bootstrap-table .pagination-detail { color: var(--muted); } [data-theme="dark"] .bootstrap-table .fixed-table-toolbar .columns .dropdown-item, [data-theme="dark"] .bootstrap-table .fixed-table-toolbar .columns label { color: var(--ink); } [data-theme="dark"] .bootstrap-table .fixed-table-toolbar .search input { color: var(--ink); background-color: var(--surface-input); } [data-theme="dark"] .bootstrap-table .table > thead > tr > th .th-inner { color: var(--muted); } [data-theme="dark"] .bootstrap-table .filter-control .form-control, [data-theme="dark"] .bootstrap-table .filter-control .form-select { color: var(--ink); background-color: var(--surface-input); border-color: var(--line-strong); } /* As setas de ordenação vêm em SVG escuro; aqui são repintadas em tom claro. */ [data-theme="dark"] .bootstrap-table .table thead th .both { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238fa199'%3e%3cpath d='M8 2.6 11.2 6.4H4.8z'/%3e%3cpath d='M8 13.4 4.8 9.6h6.4z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right .25rem center; background-size: 14px 14px; } [data-theme="dark"] .bootstrap-table .table thead th .asc { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239dc4ad'%3e%3cpath d='M8 4.6 12 10H4z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right .25rem center; background-size: 14px 14px; } [data-theme="dark"] .bootstrap-table .table thead th .desc { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239dc4ad'%3e%3cpath d='M8 11.4 4 6h8z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right .25rem center; background-size: 14px 14px; } /* Superficies especificas no tema escuro. */ [data-theme="dark"] .calendar-day:not(.selected), [data-theme="dark"] .agenda-empty, [data-theme="dark"] .next-appointment, [data-theme="dark"] .attachment-upload, [data-theme="dark"] .attachment-item, [data-theme="dark"] .attachment-empty { color: var(--text-body); background-color: #233029; border-color: #35473e; } [data-theme="dark"] .calendar-day:not(.selected):hover, [data-theme="dark"] .next-appointment:hover { color: var(--ink); background-color: #2a3a32; border-color: #466052; } [data-theme="dark"] .calendar-day:not(.selected) strong, [data-theme="dark"] .attachment-info strong { color: var(--ink); } [data-theme="dark"] .calendar-day:not(.selected) > span, [data-theme="dark"] .calendar-day:not(.selected) small, [data-theme="dark"] .agenda-empty, [data-theme="dark"] .attachment-upload small, [data-theme="dark"] .attachment-info small, [data-theme="dark"] .attachment-empty { color: #aebfb6; } [data-theme="dark"] .agenda-empty i { color: #87b69c; } [data-theme="dark"] .appointment-time, [data-theme="dark"] .attachment-icon { color: #a6d2b9; background-color: #2d4036; } [data-theme="dark"] .attachment-upload .form-control, [data-theme="dark"] .attachment-upload input[type="file"] { color: var(--ink); background-color: var(--surface-input); border-color: var(--line-strong); } [data-theme="dark"] .attendance-locked-alert { color: #ffe7a6; background-color: #3b321d; border-color: #6f5b27; } [data-theme="dark"] .attendance-locked-alert i { color: #ffd66d; } [data-theme="dark"] .kanban-column.kanban-open { background-color: #1f2a26; }