/* ============================================================================= BOTIZE — CAPA DE TEMA OSCURO PARA MATERIALIZE ----------------------------------------------------------------------------- Materialize 1.0.0 se sirve desde cdnjs. Al ser de otro origen no se puede modificar NI inspeccionar desde la pagina (document.styleSheets lanza al leer sus cssRules), asi que la unica via es taparlo con una capa local cargada despues. Esto es esa capa. TODO va bajo los selectores de oscuro. El tema claro no se toca ni un pixel: en claro este fichero no aplica una sola regla. NO EDITAR A MANO: se genera de materialize_theme.src.css con gen_materialize_theme.sh, que duplica el bloque bajo los dos selectores. ============================================================================= */ /* ---------- eleccion explicita ---------- */ /* Fuente. La regla ROOT se expande a los dos selectores de oscuro al generar. */ /* --- Superficies de componente --------------------------------------------- Materialize las pinta #fff a pelo. Son las islas blancas que quedaban. */ :root[data-theme="dark"] .card, :root[data-theme="dark"] .card .card-reveal, :root[data-theme="dark"] .card-panel, :root[data-theme="dark"] .collection .collection-item, :root[data-theme="dark"] .collection.with-header .collection-header, :root[data-theme="dark"] .sidenav, :root[data-theme="dark"] .sidenav .collapsible-body, :root[data-theme="dark"] .dropdown-content, :root[data-theme="dark"] .collapsible-header, :root[data-theme="dark"] .collapsible-body, :root[data-theme="dark"] .modal, :root[data-theme="dark"] .modal .modal-footer { background-color: var(--btz-surface); color: var(--btz-text); } /* --- Lineas ---------------------------------------------------------------- */ :root[data-theme="dark"] .collection, :root[data-theme="dark"] .collection .collection-item, :root[data-theme="dark"] .collection.with-header .collection-header, :root[data-theme="dark"] .collapsible, :root[data-theme="dark"] .collapsible-header, :root[data-theme="dark"] .card .card-action, :root[data-theme="dark"] .modal .modal-footer { border-color: var(--btz-border); } /* --- Hover y activo -------------------------------------------------------- */ :root[data-theme="dark"] .collection a.collection-item:not(.active):hover, :root[data-theme="dark"] .sidenav li > a:hover, :root[data-theme="dark"] .sidenav li.active, :root[data-theme="dark"] .dropdown-content li:hover, :root[data-theme="dark"] .dropdown-content li.active, :root[data-theme="dark"] .collapsible-header:hover { background-color: var(--btz-surface-2); } /* --- Enlaces dentro de componentes ----------------------------------------- Materialize los pinta de su verde azulado #26a69a, que no es de la casa. */ :root[data-theme="dark"] .collection a.collection-item, :root[data-theme="dark"] .dropdown-content li > a, :root[data-theme="dark"] .dropdown-content li > span, :root[data-theme="dark"] .btn-flat { color: var(--btz-link); } /* --- Campos de formulario -------------------------------------------------- Fondo transparente a proposito: heredan la superficie donde esten metidos. */ :root[data-theme="dark"] input[type=text], :root[data-theme="dark"] input[type=password], :root[data-theme="dark"] input[type=email], :root[data-theme="dark"] input[type=url], :root[data-theme="dark"] input[type=tel], :root[data-theme="dark"] input[type=number], :root[data-theme="dark"] input[type=search], :root[data-theme="dark"] input[type=date], :root[data-theme="dark"] textarea.materialize-textarea, :root[data-theme="dark"] .select-dropdown { color: var(--btz-text); border-bottom-color: var(--btz-border-strong); background-color: transparent; } :root[data-theme="dark"] input[type=text]:focus, :root[data-theme="dark"] input[type=password]:focus, :root[data-theme="dark"] input[type=email]:focus, :root[data-theme="dark"] textarea.materialize-textarea:focus { border-bottom-color: var(--btz-focus); box-shadow: 0 1px 0 0 var(--btz-focus); } :root[data-theme="dark"] .input-field > label, :root[data-theme="dark"] .input-field .prefix { color: var(--btz-text-muted); } /* --- . */ :root[data-theme="dark"] select, :root[data-theme="dark"] select.browser-default { background-color: var(--btz-surface); color: var(--btz-text); border-color: var(--btz-border-strong); } :root[data-theme="dark"] select option { background-color: var(--btz-surface); color: var(--btz-text); } /* --- Pie y chips ----------------------------------------------------------- */ :root[data-theme="dark"] .page-footer { background-color: var(--btz-surface-2); color: var(--btz-text); } :root[data-theme="dark"] .chip { background-color: var(--btz-surface-2); color: var(--btz-text-muted); } /* --- Clases de color en el MARCADO ----------------------------------------- Materialize expone .white/.black/.grey-text y las declara con !important, asi que no se ganan por especificidad normal. Van 103 .white, 37 .white-text, 22 .black-text, 14 .black y 10 .grey-text repartidos por las plantillas. Aqui se gana por especificidad MAS !important. */ :root[data-theme="dark"] .white { background-color: var(--btz-surface) !important; } :root[data-theme="dark"] .black { background-color: var(--btz-action-bg) !important; } :root[data-theme="dark"] .black-text { color: var(--btz-text) !important; } :root[data-theme="dark"] .grey-text { color: var(--btz-text-muted) !important; } :root[data-theme="dark"] .grey.lighten-3, :root[data-theme="dark"] .grey.lighten-4, :root[data-theme="dark"] .grey.lighten-5 { background-color: var(--btz-surface-2) !important; } :root[data-theme="dark"] .green, :root[data-theme="dark"] .green.darken-1 { background-color: var(--btz-success) !important; } :root[data-theme="dark"] .red, :root[data-theme="dark"] .red.darken-1 { background-color: var(--btz-danger-fill) !important; } /* .white-text NO se toca en general: fuera de un boton suele ir sobre una foto o sobre una banda oscura, donde el blanco es correcto en los dos temas. Solo se invierte cuando acompana a un fondo que SI se ha invertido. */ :root[data-theme="dark"] .black.white-text, :root[data-theme="dark"] .btn.white-text, :root[data-theme="dark"] .green.white-text { color: var(--btz-action-text) !important; } /* .red se rellena con --btz-danger-fill, que en oscuro es un rojo PROFUNDO, no un pastel. Encima va texto blanco, no --btz-action-text: ese en oscuro vale #17191c y dejaria texto oscuro sobre rojo oscuro. */ :root[data-theme="dark"] .red.white-text { color: var(--btz-danger-on-fill) !important; } /* --- Navegacion y logo --------------------------------------------------------- En claro, un gris apagado (#444 en el menu, #535d66 en el lateral) lee como "secundario" y esta bien. En oscuro ese mismo papel, --btz-text-muted (#9aa0a6), lee como "desactivado": el menu parece deshabilitado. Los enlaces de navegacion suben a texto pleno. Solo en oscuro: en claro los menus se quedan exactamente como estaban. El logo es un SVG en linea que tenia fill y stroke a #444 clavados (dos atributos mas un style inline, tres sitios en la misma linea). Ahora usa currentColor, asi que basta con dar color al enlace que lo contiene. Los selectores llevan #cabecera y #columna a proposito: quien pinta hoy esos menus son reglas con ID (`#cabecera a` en site_main.css, `#columna a:link` en botize_sheet.css). Un ID gana a cualquier numero de clases, asi que un selector solo de clases no las alcanza por mucho que se anide. El logo NO esta aqui: su regla vive en site_main.css porque tiene que aplicar en los DOS temas. Materialize pinta `nav .brand-logo` de blanco, y como el SVG pasa a currentColor, sin regla propia saldria blanco sobre blanco en claro. */ /* El boton destructivo (.button_red) NO se toca aqui. Se arreglo donde tocaba, en el propio botize_sheet.css, usando --btz-danger-fill y --btz-danger-on-fill: asi funciona en los dos temas sin necesitar una regla de oscuro que lo tape. Estuvo tres rondas mal porque se parcheaba el boton en vez del token. */ :root[data-theme="dark"] nav ul li a, :root[data-theme="dark"] #cabecera a, :root[data-theme="dark"] #cabecera .menu a, :root[data-theme="dark"] #columna a, :root[data-theme="dark"] .left_menu li a { color: var(--btz-text); } /* ---------- preferencia del sistema ---------- */ @media (prefers-color-scheme: dark) { /* Fuente. La regla ROOT se expande a los dos selectores de oscuro al generar. */ /* --- Superficies de componente --------------------------------------------- Materialize las pinta #fff a pelo. Son las islas blancas que quedaban. */ :root[data-theme="auto"] .card, :root[data-theme="auto"] .card .card-reveal, :root[data-theme="auto"] .card-panel, :root[data-theme="auto"] .collection .collection-item, :root[data-theme="auto"] .collection.with-header .collection-header, :root[data-theme="auto"] .sidenav, :root[data-theme="auto"] .sidenav .collapsible-body, :root[data-theme="auto"] .dropdown-content, :root[data-theme="auto"] .collapsible-header, :root[data-theme="auto"] .collapsible-body, :root[data-theme="auto"] .modal, :root[data-theme="auto"] .modal .modal-footer { background-color: var(--btz-surface); color: var(--btz-text); } /* --- Lineas ---------------------------------------------------------------- */ :root[data-theme="auto"] .collection, :root[data-theme="auto"] .collection .collection-item, :root[data-theme="auto"] .collection.with-header .collection-header, :root[data-theme="auto"] .collapsible, :root[data-theme="auto"] .collapsible-header, :root[data-theme="auto"] .card .card-action, :root[data-theme="auto"] .modal .modal-footer { border-color: var(--btz-border); } /* --- Hover y activo -------------------------------------------------------- */ :root[data-theme="auto"] .collection a.collection-item:not(.active):hover, :root[data-theme="auto"] .sidenav li > a:hover, :root[data-theme="auto"] .sidenav li.active, :root[data-theme="auto"] .dropdown-content li:hover, :root[data-theme="auto"] .dropdown-content li.active, :root[data-theme="auto"] .collapsible-header:hover { background-color: var(--btz-surface-2); } /* --- Enlaces dentro de componentes ----------------------------------------- Materialize los pinta de su verde azulado #26a69a, que no es de la casa. */ :root[data-theme="auto"] .collection a.collection-item, :root[data-theme="auto"] .dropdown-content li > a, :root[data-theme="auto"] .dropdown-content li > span, :root[data-theme="auto"] .btn-flat { color: var(--btz-link); } /* --- Campos de formulario -------------------------------------------------- Fondo transparente a proposito: heredan la superficie donde esten metidos. */ :root[data-theme="auto"] input[type=text], :root[data-theme="auto"] input[type=password], :root[data-theme="auto"] input[type=email], :root[data-theme="auto"] input[type=url], :root[data-theme="auto"] input[type=tel], :root[data-theme="auto"] input[type=number], :root[data-theme="auto"] input[type=search], :root[data-theme="auto"] input[type=date], :root[data-theme="auto"] textarea.materialize-textarea, :root[data-theme="auto"] .select-dropdown { color: var(--btz-text); border-bottom-color: var(--btz-border-strong); background-color: transparent; } :root[data-theme="auto"] input[type=text]:focus, :root[data-theme="auto"] input[type=password]:focus, :root[data-theme="auto"] input[type=email]:focus, :root[data-theme="auto"] textarea.materialize-textarea:focus { border-bottom-color: var(--btz-focus); box-shadow: 0 1px 0 0 var(--btz-focus); } :root[data-theme="auto"] .input-field > label, :root[data-theme="auto"] .input-field .prefix { color: var(--btz-text-muted); } /* --- . */ :root[data-theme="auto"] select, :root[data-theme="auto"] select.browser-default { background-color: var(--btz-surface); color: var(--btz-text); border-color: var(--btz-border-strong); } :root[data-theme="auto"] select option { background-color: var(--btz-surface); color: var(--btz-text); } /* --- Pie y chips ----------------------------------------------------------- */ :root[data-theme="auto"] .page-footer { background-color: var(--btz-surface-2); color: var(--btz-text); } :root[data-theme="auto"] .chip { background-color: var(--btz-surface-2); color: var(--btz-text-muted); } /* --- Clases de color en el MARCADO ----------------------------------------- Materialize expone .white/.black/.grey-text y las declara con !important, asi que no se ganan por especificidad normal. Van 103 .white, 37 .white-text, 22 .black-text, 14 .black y 10 .grey-text repartidos por las plantillas. Aqui se gana por especificidad MAS !important. */ :root[data-theme="auto"] .white { background-color: var(--btz-surface) !important; } :root[data-theme="auto"] .black { background-color: var(--btz-action-bg) !important; } :root[data-theme="auto"] .black-text { color: var(--btz-text) !important; } :root[data-theme="auto"] .grey-text { color: var(--btz-text-muted) !important; } :root[data-theme="auto"] .grey.lighten-3, :root[data-theme="auto"] .grey.lighten-4, :root[data-theme="auto"] .grey.lighten-5 { background-color: var(--btz-surface-2) !important; } :root[data-theme="auto"] .green, :root[data-theme="auto"] .green.darken-1 { background-color: var(--btz-success) !important; } :root[data-theme="auto"] .red, :root[data-theme="auto"] .red.darken-1 { background-color: var(--btz-danger-fill) !important; } /* .white-text NO se toca en general: fuera de un boton suele ir sobre una foto o sobre una banda oscura, donde el blanco es correcto en los dos temas. Solo se invierte cuando acompana a un fondo que SI se ha invertido. */ :root[data-theme="auto"] .black.white-text, :root[data-theme="auto"] .btn.white-text, :root[data-theme="auto"] .green.white-text { color: var(--btz-action-text) !important; } /* .red se rellena con --btz-danger-fill, que en oscuro es un rojo PROFUNDO, no un pastel. Encima va texto blanco, no --btz-action-text: ese en oscuro vale #17191c y dejaria texto oscuro sobre rojo oscuro. */ :root[data-theme="auto"] .red.white-text { color: var(--btz-danger-on-fill) !important; } /* --- Navegacion y logo --------------------------------------------------------- En claro, un gris apagado (#444 en el menu, #535d66 en el lateral) lee como "secundario" y esta bien. En oscuro ese mismo papel, --btz-text-muted (#9aa0a6), lee como "desactivado": el menu parece deshabilitado. Los enlaces de navegacion suben a texto pleno. Solo en oscuro: en claro los menus se quedan exactamente como estaban. El logo es un SVG en linea que tenia fill y stroke a #444 clavados (dos atributos mas un style inline, tres sitios en la misma linea). Ahora usa currentColor, asi que basta con dar color al enlace que lo contiene. Los selectores llevan #cabecera y #columna a proposito: quien pinta hoy esos menus son reglas con ID (`#cabecera a` en site_main.css, `#columna a:link` en botize_sheet.css). Un ID gana a cualquier numero de clases, asi que un selector solo de clases no las alcanza por mucho que se anide. El logo NO esta aqui: su regla vive en site_main.css porque tiene que aplicar en los DOS temas. Materialize pinta `nav .brand-logo` de blanco, y como el SVG pasa a currentColor, sin regla propia saldria blanco sobre blanco en claro. */ /* El boton destructivo (.button_red) NO se toca aqui. Se arreglo donde tocaba, en el propio botize_sheet.css, usando --btz-danger-fill y --btz-danger-on-fill: asi funciona en los dos temas sin necesitar una regla de oscuro que lo tape. Estuvo tres rondas mal porque se parcheaba el boton en vez del token. */ :root[data-theme="auto"] nav ul li a, :root[data-theme="auto"] #cabecera a, :root[data-theme="auto"] #cabecera .menu a, :root[data-theme="auto"] #columna a, :root[data-theme="auto"] .left_menu li a { color: var(--btz-text); } }