/* ============================================================ dark.css - Modo oscuro para Reloj Laboral Cargar en ULTIMO lugar, despues de bootstrap y style_B20_.css: Se activa anyadiendo la clase "dark" al . ============================================================ */ /* ---------- Paleta (referencia) Fondo pagina: #1e2228 Superficies: #2a2f36 (well, panel, modal, dropdown) Superficie 2: #262b31 (filas alternas, grupo_normal) Campos: #1a1e23 Bordes: #3d444d Texto: #d5d8dc Texto apagado: #9aa0a6 ---------------------------------------------- */ /* ===== Base ===== */ body.dark { background-color: #1e2228; color: #d5d8dc; } body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark h5, body.dark h6 { color: #e8eaed; } body.dark a { color: #6cb2eb; } body.dark a:hover, body.dark a:focus { color: #8fc5f0; } body.dark hr { border-top-color: #3d444d; } body.dark .text-muted { color: #9aa0a6; } body.dark ::selection { background: #3b5b7a; color: #fff; } /* ===== Contenedores: well / panel ===== */ body.dark .well { background-color: #2a2f36; border-color: #3d444d; box-shadow: none; } body.dark .panel { background-color: #2a2f36; border-color: #3d444d; } body.dark .panel-default > .panel-heading { background-color: #343a42; border-color: #3d444d; color: #d5d8dc; } body.dark .panel-footer { background-color: #262b31; border-color: #3d444d; } /* ===== Modales ===== */ body.dark .modal-content { background-color: #2a2f36; border-color: #3d444d; } body.dark .modal-header, body.dark .modal-footer { border-color: #3d444d; } body.dark .modal-backdrop { background-color: #000; } body.dark .close { color: #fff; opacity: .5; text-shadow: none; } body.dark .close:hover { opacity: .8; } /* ===== Tablas ===== */ body.dark .table > thead > tr > th, body.dark .table > tbody > tr > th, body.dark .table > tfoot > tr > th, body.dark .table > thead > tr > td, body.dark .table > tbody > tr > td, body.dark .table > tfoot > tr > td { border-color: #3d444d; } body.dark .table > thead > tr > th { border-bottom-color: #4a525c; } body.dark .table-striped > tbody > tr:nth-of-type(odd) { background-color: #262b31; } body.dark .table-striped > tbody > tr:nth-of-type(odd) > td { background-color: #262b31; } body.dark .table-hover > tbody > tr:hover { background-color: #30363e; } body.dark .table-bordered, body.dark .table-bordered > thead > tr > th, body.dark .table-bordered > tbody > tr > td { border-color: #3d444d; } /* tablesorter: invertir los GIF de flechas (asc/desc/bg) */ body.dark table.tablesorter thead tr .header, body.dark table.tablesorter thead tr .headerSortUp, body.dark table.tablesorter thead tr .headerSortDown { filter: invert(85%); } /* El invert anterior invierte tambien el texto de la cabecera; si molesta, la alternativa limpia es servir versiones claras de asc.gif/desc.gif/bg.gif y sobreescribir background-image aqui. */ /* ===== Formularios ===== */ body.dark .form-control { background-color: #1a1e23; border-color: #3d444d; color: #d5d8dc; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .4); } body.dark .form-control:focus { border-color: #6cb2eb; box-shadow: inset 0 1px 1px rgba(0,0,0,.4), 0 0 6px rgba(108,178,235,.4); } body.dark .form-control::placeholder { color: #7a8087; } body.dark .form-control[disabled], body.dark .form-control[readonly] { background-color: #262b31; color: #9aa0a6; } body.dark .input-group-addon { background-color: #343a42; border-color: #3d444d; color: #d5d8dc; } body.dark label { color: #d5d8dc; } body.dark .help-block { color: #9aa0a6; } body.dark select.form-control option { background-color: #1a1e23; color: #d5d8dc; } /* Campo de busqueda con fondo transparente (clase propia) */ body.dark .form-buscar .form-control { background: transparent !important; } /* ===== Botones ===== */ body.dark .btn-default { background-color: #343a42; border-color: #4a525c; color: #d5d8dc; } body.dark .btn-default:hover, body.dark .btn-default:focus, body.dark .btn-default.active { background-color: #3f4650; border-color: #5a6470; color: #fff; } body.dark .btn-default[disabled] { background-color: #2a2f36; color: #7a8087; } body.dark .btn-link { color: #6cb2eb; } /* btn-primary / btn-success / btn-danger funcionan bien tal cual sobre fondo oscuro; no se tocan. */ /* ===== Dropdowns ===== */ body.dark .dropdown-menu { background-color: #2a2f36; border-color: #3d444d; box-shadow: 0 6px 12px rgba(0, 0, 0, .5); } body.dark .dropdown-menu > li > a { color: #d5d8dc; } body.dark .dropdown-menu > li > a:hover, body.dark .dropdown-menu > li > a:focus { background-color: #343a42; color: #fff; } body.dark .dropdown-menu .divider { background-color: #3d444d; } body.dark .dropdown-header { color: #9aa0a6; } /* ===== Navegacion ===== */ /* El navbar ya usa #353d46 (theme-color): se deja como esta. */ body.dark .nav-tabs { border-bottom-color: #3d444d; } body.dark .nav-tabs > li > a { color: #b8bdc3; } body.dark .nav-tabs > li > a:hover { background-color: #2a2f36; border-color: #3d444d #3d444d transparent; } body.dark .nav-tabs > li.active > a, body.dark .nav-tabs > li.active > a:hover, body.dark .nav-tabs > li.active > a:focus { background-color: #1e2228; border-color: #3d444d #3d444d transparent; color: #e8eaed; } body.dark .nav-pills > li.active > a { background-color: #3b5b7a; } body.dark .pagination > li > a, body.dark .pagination > li > span { background-color: #2a2f36; border-color: #3d444d; color: #6cb2eb; } body.dark .pagination > li > a:hover { background-color: #343a42; } body.dark .pagination > .active > a, body.dark .pagination > .active > span { background-color: #3b5b7a; border-color: #3b5b7a; color: #fff; } body.dark .pagination > .disabled > a, body.dark .pagination > .disabled > span { background-color: #262b31; color: #7a8087; } /* ===== Listas ===== */ body.dark .list-group-item { background-color: #2a2f36; border-color: #3d444d; color: #d5d8dc; } body.dark .list-group-item:hover { background-color: #30363e; } body.dark .list-group-item.active { background-color: #3b5b7a; border-color: #3b5b7a; } /* ===== Popovers y tooltips (bootstrap-tourist los usa) ===== */ body.dark .popover { background-color: #2a2f36; border-color: #3d444d; } body.dark .popover-title { background-color: #343a42; border-bottom-color: #3d444d; color: #e8eaed; } body.dark .popover-content { color: #d5d8dc; } body.dark .popover.top > .arrow:after { border-top-color: #2a2f36; } body.dark .popover.bottom > .arrow:after { border-bottom-color: #2a2f36; } body.dark .popover.left > .arrow:after { border-left-color: #2a2f36; } body.dark .popover.right > .arrow:after { border-right-color: #2a2f36; } body.dark .tooltip-inner { background-color: #000; } /* ===== Alertas: se conservan (contraste aceptable), solo se ajusta la variante info clara si se usa ===== */ body.dark .alert-info { background-color: #1d3a4a; border-color: #2a5570; color: #b8dcf0; } /* ===== Clases propias de Reloj Laboral ===== */ /* Grupos */ body.dark .grupo_normal { background: #262b31; border-color: #3d444d; } body.dark .grupo_cambiado { background: #1f3a26; /* antes #cfc */ border-color: #2e5837; } /* Calendario: bordes negros -> claros para que se vean */ body.dark .cal_horario, body.dark .cal_sin_horario_limites, body.dark .resumen_horario, body.dark .dyn_horario_li { border-color: #d5d8dc; } body.dark .cal_horario_historico, body.dark .resumen_horario_historico { border-color: #8a9096; color: #a5abb1; } body.dark .cal_horario_deshabilitado { border-color: #ef5350; } body.dark .dia_rotacion_sel { background-color: #1d3a4a; } /* antes #aef */ /* Estados de fichaje: mismos semanticos, un punto mas claros */ body.dark .buscar_alerta, body.dark .buscar_alerta:focus { border-color: #ef5350 !important; } /* Foto de usuario y spinner */ body.dark .icono_usuario_redondo { border-color: #4a525c; } body.dark .icono-espera { border-color: #343a42; border-top-color: #3498db; } /* Etiqueta MIME y globos: ya son oscuros/de acento, se conservan. Los colores de turno generados por JS (background-color dinamico) NO se tocan: son datos del usuario, no tema. */ /* ===== Scrollbars (WebKit, opcional) ===== */ body.dark ::-webkit-scrollbar { width: 10px; height: 10px; } body.dark ::-webkit-scrollbar-track { background: #1e2228; } body.dark ::-webkit-scrollbar-thumb { background: #4a525c; border-radius: 5px; } body.dark ::-webkit-scrollbar-thumb:hover { background: #5a6470; } body.dark { scrollbar-color: #4a525c #1e2228; } /* Firefox */ /* ===== Imagenes: suavizar brillo de fotos, no de iconos ===== */ body.dark img.icono_usuario_redondo { filter: brightness(.9); } /* === Cosas mias === */ body.dark .datos_cliente_redux { background: #1e2228; color: #d5d8dc; } body.dark .breadcrumb { background-color: #1e2228; }