/* Modo oscuro. Se activa con la clase 'dark-mode' en (ver toggle en
views/layouts/header_con_nuevo_estilo.php y el script anti-flash en
views/layouts/main.php). Cubre el chrome de AdminLTE 2, tablas/grids
(kartik-grid renderiza tablas Bootstrap 3 estándar), formularios, modales,
dropdowns y Select2 -- que es lo que se repite en casi todas las vistas de
la app. Puede haber widgets puntuales sin cubrir todavía; se van agregando
a medida que aparezcan. */
html.dark-mode {
color-scheme: dark;
}
html.dark-mode body,
html.dark-mode .wrapper,
html.dark-mode .content-wrapper,
html.dark-mode .content {
background-color: #181a1b;
color: #d6d6d6;
}
/* Header */
html.dark-mode .main-header .navbar {
background-color: #1f2124;
}
html.dark-mode .main-header .logo {
background-color: #16181a !important;
}
html.dark-mode .main-header .navbar .nav > li > a {
color: #d6d6d6;
}
html.dark-mode .main-header .navbar .nav > li > a:hover,
html.dark-mode .main-header .navbar .nav > li > a:focus {
background-color: #2a2d31;
color: #fff;
}
html.dark-mode .main-header .sidebar-toggle {
color: #d6d6d6;
}
/* Sidebar */
html.dark-mode .main-sidebar,
html.dark-mode .sidebar {
background-color: #1a1c1e;
}
html.dark-mode .sidebar-menu > li > a {
color: #c2c7d0;
border-left: 3px solid transparent;
}
html.dark-mode .sidebar-menu > li:hover > a,
html.dark-mode .sidebar-menu > li.active > a {
background-color: #262a2e;
color: #fff;
border-left-color: #3c8dbc;
}
html.dark-mode .sidebar-menu > li.treeview.active > a,
html.dark-mode .sidebar-menu .treeview-menu > li > a {
background-color: #16181a;
color: #b7bdc6;
}
html.dark-mode .sidebar-menu .treeview-menu > li > a:hover,
html.dark-mode .sidebar-menu .treeview-menu > li.active > a {
color: #fff;
background-color: #262a2e;
}
html.dark-mode .sidebar-form input[type="text"] {
background-color: #262a2e;
border-color: #2a2c2f;
color: #d6d6d6;
}
html.dark-mode .user-panel .info,
html.dark-mode .user-panel .info a {
color: #d6d6d6;
}
/* Boxes / paneles (usados en casi todas las grillas) */
html.dark-mode .box {
background-color: #212325;
border-top-color: #2a2c2f;
color: #d6d6d6;
}
html.dark-mode .box-header {
color: #e6e6e6;
}
html.dark-mode .box-header.with-border {
border-bottom-color: #2a2c2f;
}
html.dark-mode .box-footer {
background-color: #1c1e20;
border-top-color: #2a2c2f;
}
/* kartik\grid\GridView envuelve la grilla en un .panel.panel-default propio
(distinto de .box de AdminLTE) -- el .panel-heading quedaba en blanco
porque nunca se habia cubierto este widget. !important + selector de
.panel-heading sin depender de que sea hijo directo de .panel-default
(por si la libreria cambia el anidamiento entre versiones): confirmado
con captura real que esto seguia sin aplicar con el selector anidado. */
html.dark-mode .panel,
html.dark-mode .panel-default {
background-color: #212325 !important;
border-color: #2a2c2f !important;
}
html.dark-mode .panel-heading {
background-color: #1c1e20 !important;
border-color: #2a2c2f !important;
color: #e6e6e6 !important;
}
html.dark-mode .panel-heading * {
color: #e6e6e6 !important;
}
html.dark-mode .panel-body {
color: #d6d6d6 !important;
}
html.dark-mode .panel-footer {
background-color: #1c1e20 !important;
border-color: #2a2c2f !important;
color: #d6d6d6 !important;
}
html.dark-mode .callout,
html.dark-mode .well {
background-color: #1c1e20;
border-color: #2a2c2f;
color: #d6d6d6;
}
/* Tablas / grids (kartik-grid renderiza tablas Bootstrap 3 estandar).
!important en fondo/color/borde de thead-tfoot: kartik-grid y su propio
CSS (kv-grid.css) pueden ganarle a un selector "normal" segun el orden de
carga de los asset bundles, que no depende del orden en que escribimos
este archivo -- se fuerza el resultado en vez de perseguir la cascada. */
html.dark-mode .table {
color: #d6d6d6;
}
html.dark-mode .table > thead > tr > th,
html.dark-mode .table thead th {
background-color: #1c1e20 !important;
color: #e6e6e6 !important;
border-color: #2a2c2f !important;
}
html.dark-mode .table > tfoot > tr > td,
html.dark-mode .table > tfoot > tr > th,
html.dark-mode .table tfoot td,
html.dark-mode .table tfoot th,
html.dark-mode .kv-table-footer,
html.dark-mode .kv-table-footer td,
html.dark-mode .kv-table-footer th {
background-color: #1c1e20 !important;
color: #e6e6e6 !important;
border-color: #2a2c2f !important;
}
html.dark-mode .table > tbody > tr > td,
html.dark-mode .table > tbody > tr > th {
border-color: #2a2c2f !important;
}
html.dark-mode .table-bordered {
border: 1px solid #2a2c2f !important;
}
/* Mismo selector (las 6 combinaciones thead/tbody/tfoot x th/td) y misma
propiedad (border shorthand, no border-color) que usa AdminLTE.css en su
regla base para .table-bordered -- verificado contra el fuente real
(border: 1px solid #f4f4f4, sin !important, pero el usuario confirmo con
el inspector que era la regla ganando igual). Se usa combinador
descendiente (space) en vez de hijo directo (>) para no depender de que
el anidamiento thead/tr/th sea exactamente el asumido. */
html.dark-mode .table-bordered thead th,
html.dark-mode .table-bordered tbody th,
html.dark-mode .table-bordered tfoot th,
html.dark-mode .table-bordered thead td,
html.dark-mode .table-bordered tbody td,
html.dark-mode .table-bordered tfoot td {
border: 1px solid #2a2c2f !important;
}
html.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
background-color: #26282a;
}
html.dark-mode .table-hover > tbody > tr:hover {
background-color: #2e3134;
}
/* .rowData: clase propia del proyecto (no de Bootstrap/kartik), puesta via
'rowOptions' en varias grillas -- site.css la define con
background-color:lightgray !important en :hover. Sobre texto ya claro
(#d6d6d6 en dark mode) un fondo gris claro deja la fila ilegible. */
html.dark-mode .rowData:hover {
background-color: #2e3134 !important;
color: #f2f2f2 !important;
}
html.dark-mode .rowData:hover td {
color: #f2f2f2 !important;
}
html.dark-mode .kv-grid-container,
html.dark-mode .kv-panel-heading,
html.dark-mode .kv-panel-footer {
background-color: #212325;
border-color: #2a2c2f;
color: #d6d6d6;
}
/* kv-grid.css (CSS propio de kartik-grid) define .kv-panel-before/-after con
border-bottom/border-top: 1px solid #ddd fijo -- son los separadores que
aparecen arriba y abajo de la tabla dentro del panel, por fuera de las
reglas de .table-bordered/.panel-heading que ya estaban cubiertas. */
html.dark-mode .kv-panel-before {
border-bottom-color: #2a2c2f !important;
}
html.dark-mode .kv-panel-after {
border-top-color: #2a2c2f !important;
}
html.dark-mode .kv-table-header,
html.dark-mode .thead-top {
background-color: #26282a !important;
}
/* Fila de filtros (inputs/Select2 debajo del header de cada columna). La
clase real es 'filters' (default de yii\grid\GridView::$filterRowOptions
en el core de Yii2, kartik-grid solo le agrega 'skip-export') -- verificado
contra el codigo fuente real. 'kv-filter-row'/'filter-row' que se usaba
antes no existen en el DOM, por eso el fondo de esas celdas seguia blanco
pese al !important: apuntaba a clases que nunca estuvieron ahi. */
html.dark-mode tr.filters > td,
html.dark-mode tr.filters > th {
background-color: #1c1e20 !important;
}
html.dark-mode tr.filters .form-control,
html.dark-mode tr.filters select,
html.dark-mode tr.filters input {
background-color: #26282a !important;
color: #e6e6e6 !important;
border-color: #565a61 !important;
}
/* Formularios. !important por el mismo motivo que en las tablas: kartik y
select2 registran su propio CSS con un orden de carga que no controlamos
desde este archivo.
Pedido explicito: nada de look "hundido" -- Bootstrap 3 le pone a todo
.form-control un box-shadow inset (sombra interior oscura) que sobre un
fondo YA oscuro se nota como un hueco/relieve marcado. Se lo saca del
todo y se deja un borde parejo, suave y mas claro que el fondo (no un
gris casi invisible), tipo outline minimalista. Mismo tratamiento para
los inputs readonly (fecha, date-range) que antes se quedaban sin este
ajuste y mantenian el box-shadow default. */
html.dark-mode .form-control,
html.dark-mode textarea,
html.dark-mode select,
html.dark-mode input[type="text"],
html.dark-mode input[type="number"],
html.dark-mode input[type="password"] {
background-color: #26282a !important;
border: 1px solid #565a61 !important;
box-shadow: none !important;
color: #e6e6e6 !important;
}
html.dark-mode .form-control:focus {
border-color: #3c8dbc !important;
background-color: #2c2f33 !important;
box-shadow: none !important;
}
html.dark-mode .form-control[disabled],
html.dark-mode .form-control[readonly] {
background-color: #1c1e20 !important;
border-color: #4a4d52 !important;
box-shadow: none !important;
color: #b9bdc4 !important;
}
html.dark-mode label,
html.dark-mode .control-label {
color: #d6d6d6;
}
html.dark-mode .input-group-addon {
background-color: #2c2f33;
border-color: #565a61;
color: #d6d6d6;
}
/* Select2 (usado en casi todos los filtros de las grillas, GridView::FILTER_SELECT2).
Se dejo de perseguir el nombre exacto del tema activo (default/krajee):
el select2.css base (theme-agnostic) ya trae background-color:#fff propio
en .select2-selection--single/--multiple sin sufijo de tema, y krajee
ademas define el suyo en .select2-selection (sin split single/multiple) --
entre ambos quedaban huecos. Se apunta directo a las clases internas
(select2-selection, select2-selection--single, select2-selection--multiple,
select2-selection__rendered, etc.) SIN requerir un ancestro
.select2-container--XXX especifico: existen sea cual sea el tema activo. */
html.dark-mode .select2-selection,
html.dark-mode .select2-selection--single,
html.dark-mode .select2-selection--multiple {
background-color: #26282a !important;
border-color: #565a61 !important;
color: #e6e6e6 !important;
}
html.dark-mode .select2-selection__rendered,
html.dark-mode .select2-selection__placeholder {
color: #e6e6e6 !important;
}
html.dark-mode .select2-selection__arrow b {
border-color: #e6e6e6 transparent transparent transparent !important;
}
html.dark-mode .select2-dropdown {
background-color: #26282a !important;
border-color: #565a61 !important;
color: #e6e6e6 !important;
}
html.dark-mode .select2-results__option,
html.dark-mode li.select2-results__option {
background-color: #26282a !important;
color: #d6d6d6 !important;
}
html.dark-mode .select2-results__option--highlighted[aria-selected],
html.dark-mode .select2-results__option[aria-selected="true"] {
background-color: #3c8dbc !important;
color: #fff !important;
}
html.dark-mode .select2-search--dropdown .select2-search__field,
html.dark-mode .select2-search__field {
background-color: #1c1e20 !important;
border-color: #565a61 !important;
color: #e6e6e6 !important;
}
html.dark-mode .select2-selection__choice {
background-color: #2e3134 !important;
border-color: #565a61 !important;
color: #d6d6d6 !important;
}
/* Modales, popovers, dropdowns */
html.dark-mode .modal-content {
background-color: #212325;
color: #d6d6d6;
border-color: #2a2c2f;
}
html.dark-mode .modal-header,
html.dark-mode .modal-footer {
border-color: #2a2c2f;
}
html.dark-mode .close {
color: #e6e6e6;
opacity: 0.7;
}
html.dark-mode .popover {
background-color: #26282a;
border-color: #565a61;
color: #d6d6d6;
}
html.dark-mode .popover-title {
background-color: #1c1e20;
border-color: #565a61;
}
html.dark-mode .dropdown-menu {
background-color: #26282a;
border-color: #565a61;
}
html.dark-mode .dropdown-menu > li > a {
color: #d6d6d6;
}
html.dark-mode .dropdown-menu > li > a:hover,
html.dark-mode .dropdown-menu > li > a:focus {
background-color: #2e3134;
color: #fff;
}
html.dark-mode .dropdown-menu .divider {
background-color: #3a3d41;
}
/* AdminLTE.css define .navbar-nav > .user-menu > .dropdown-menu > .user-footer
con background-color:#f9f9f9 propio (specificidad 0,0,4,0), le gana a la
regla general de arriba (.dropdown-menu, 0,0,2,1) -- confirmado leyendo el
selector real. Es el contenedor de "Perfil"/"Cerrar sesion" del menu de
usuario, quedaba blanco en dark mode. */
html.dark-mode .user-footer {
background-color: #1c1e20 !important;
}
html.dark-mode .user-footer .btn-default {
background-color: #2c2f33 !important;
border-color: #565a61 !important;
color: #d6d6d6 !important;
}
/* Botones, tabs, paginacion, alertas */
html.dark-mode .btn-default {
background-color: #2c2f33;
border-color: #565a61;
color: #d6d6d6;
}
html.dark-mode .btn-default:hover {
background-color: #34383c;
color: #fff;
}
html.dark-mode .nav-tabs {
border-bottom-color: #2a2c2f;
}
html.dark-mode .nav-tabs > li > a {
color: #b7bdc6;
}
html.dark-mode .nav-tabs > li.active > a,
html.dark-mode .nav-tabs > li.active > a:hover,
html.dark-mode .nav-tabs > li.active > a:focus {
background-color: #212325;
color: #fff;
border-color: #2a2c2f #2a2c2f transparent;
}
html.dark-mode .pagination > li > a,
html.dark-mode .pagination > li > span {
background-color: #26282a;
border-color: #2a2c2f;
color: #d6d6d6;
}
html.dark-mode .pagination > li.active > a,
html.dark-mode .pagination > li.active > span {
background-color: #3c8dbc;
border-color: #3c8dbc;
color: #fff;
}
/* .formato_montos: clase propia del proyecto (no de Bootstrap/kartik), usada
en varias grillas para resaltar totales ($ ARS / $ USD). style.css la
define con fondo celeste claro fijo -- nunca se habia cubierto acá. */
html.dark-mode .formato_montos {
background: #2c5f66 !important;
color: #eafaf7 !important;
border-color: #565a61 !important;
}
/* Filas/celdas contextuales de Bootstrap (active/success/warning/info/danger),
usadas tipicamente en la fila de resumen (showPageSummary) y en filas
destacadas de algunas grillas -- tenian su color claro propio de Bootstrap
sin ningun override. */
html.dark-mode .table > tbody > tr.active > td,
html.dark-mode .table > tbody > tr > td.active,
html.dark-mode .table > tfoot > tr.active > td,
html.dark-mode .table > tfoot > tr > td.active {
background-color: #2c2f33 !important;
color: #e6e6e6 !important;
}
html.dark-mode .table > tbody > tr.success > td,
html.dark-mode .table > tbody > tr > td.success {
background-color: #1f3a2a !important;
color: #d6f5e0 !important;
}
html.dark-mode .table > tbody > tr.warning > td,
html.dark-mode .table > tbody > tr > td.warning {
background-color: #4a3a1a !important;
color: #f7e6c4 !important;
}
html.dark-mode .table > tbody > tr.danger > td,
html.dark-mode .table > tbody > tr > td.danger {
background-color: #4a1f22 !important;
color: #f7d6d6 !important;
}
html.dark-mode .table > tbody > tr.info > td,
html.dark-mode .table > tbody > tr > td.info {
background-color: #1c3a42 !important;
color: #cfeff5 !important;
}
/* :not(.btn) es clave: sin esto, esta regla le ganaba en especificidad al
color de texto blanco de Bootstrap en los
(y los otros btn-* de color), dejando texto celeste ilegible sobre fondos
de color. Los botones .btn-default no son con color de texto propio
fuerte, asi que no necesitan la exclusion. */
html.dark-mode a:not(.btn) {
color: #6fb3e0;
}
html.dark-mode a:not(.btn):hover,
html.dark-mode a:not(.btn):focus {
color: #8fc6ea;
}
html.dark-mode .btn-success,
html.dark-mode .btn-primary,
html.dark-mode .btn-info,
html.dark-mode .btn-warning,
html.dark-mode .btn-danger {
color: #fff;
}
html.dark-mode hr {
border-top-color: #2a2c2f;
}
/* Toggle de modo oscuro en el navbar -- pedido explicito (3ra vuelta): en vez
de mantener un estilo propio (primero circulo blanco semitransparente,
despues circulo solido ambar), ahora reutiliza las mismas clases que el
boton de refresh de al lado (button-update icon-wrapper icon-wrapper-alt,
definidas en style.css/main.css): circulo de 35px con borde fino #677e9b
sin relleno, minimalista. Con esas clases puestas en el del layout no
hace falta CSS propio -- el que ya usa el boton de refresh (no cubierto en
este archivo) ya se ve bien en dark-mode, asi que se deja igual. */
#dark-mode-toggle {
cursor: pointer;
}
/* Footer con el logo de Sofisticapp -- clase real de AdminLTE (.main-footer),
nunca cubierta. La skin solo tocaba el border, el fondo vino siempre del
CSS base de AdminLTE. */
html.dark-mode .main-footer {
background-color: #181a1b !important;
color: #d6d6d6 !important;
border-top-color: #2a2c2f !important;
}
/* .custom-card/.custom-card-2: clases propias del proyecto (main.css), no de
Bootstrap/AdminLTE, usadas para envolver secciones del dashboard de Inicio
(ej. el calendario de SMs). Tenian background-color:white fijo. */
html.dark-mode .custom-card,
html.dark-mode .custom-card-2 {
background-color: #212325 !important;
border-color: #2a2c2f !important;
color: #d6d6d6;
}
html.dark-mode .tabla-dia-calendario {
border-left-color: #2a2c2f;
}
/* .small-box (widget de estadisticas de AdminLTE, ej. "Cantidad de Obras" en
Inicio): varias instancias tienen background-color:white por style inline
directo en la vista -- !important es necesario para ganarle a un inline. */
html.dark-mode .small-box {
background-color: #212325 !important;
}
/* kartik\date\DatePicker en modo inline (calendario de SMs/Entregas
Previstas/Fin Alquiler en Inicio) envuelve bootstrap-datepicker, que no
trae dark mode. El contenedor no tiene fondo propio (hereda del padre),
pero las celdas de dia si tienen texto oscuro fijo -- invisible sobre un
fondo oscuro heredado. */
html.dark-mode .datepicker,
html.dark-mode .datepicker-inline {
background-color: #212325 !important;
color: #d6d6d6;
}
html.dark-mode .datepicker table tr td,
html.dark-mode .datepicker table tr th {
color: #d6d6d6 !important;
}
/* .today (el dia actual) SI tiene fondo claro propio (#ffdb99, naranja) del
CSS base de bootstrap-datepicker -- pero la regla generica de arriba
(color:#d6d6d6 !important en TODOS los td) le gana con la misma
especificidad + !important + orden de carga, dejando texto gris claro
sobre fondo claro: practicamente invisible. Antes se asumia que
"today/highlighted/active ya son legibles en cualquier tema" sin haber
verificado -- el usuario confirmo que no. Selector con .today agregado
(mas especifico que el de arriba) para ganarle. */
html.dark-mode .datepicker table tr td.today {
color: #000 !important;
}
html.dark-mode .datepicker table tr td.old,
html.dark-mode .datepicker table tr td.new {
color: #6b6f76 !important;
}
html.dark-mode .datepicker table tr td.day:hover,
html.dark-mode .datepicker table tr td.focused {
background: #2e3134 !important;
color: #fff !important;
}
html.dark-mode .datepicker table tr td.disabled,
html.dark-mode .datepicker table tr td.disabled:hover {
color: #55585c !important;
}
html.dark-mode .datepicker .prev,
html.dark-mode .datepicker .next,
html.dark-mode .datepicker .datepicker-switch,
html.dark-mode .datepicker .dow {
color: #d6d6d6 !important;
}
html.dark-mode .datepicker .prev:hover,
html.dark-mode .datepicker .next:hover,
html.dark-mode .datepicker .datepicker-switch:hover {
background-color: #2e3134 !important;
}