1d6f95bdb7
Odoo 18 draws the unchecked checkboxes, radios and switches of the backend with the separator gray (`--border-color`, gray-300): 1.3:1 on white, and 1.1:1 on readonly fields and list cells, which are dimmed to 50% on top. CSS-only addon that redefines `--border-color` on `.form-check-input`: gray-600 (4.7:1) when editable, gray-900 (3.1:1 after the dimming) when disabled. Bootstrap reads the property only in the base border of the control, so the checked, indeterminate, focus and hover states keep their stock colours whatever the load order. Closes #20 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
76 lines
2.3 KiB
ReStructuredText
76 lines
2.3 KiB
ReStructuredText
=====================
|
|
Web Checkbox Contrast
|
|
=====================
|
|
|
|
Visión general
|
|
==============
|
|
|
|
Oscurece el borde de las casillas de verificación, los botones de opción y los
|
|
interruptores **sin marcar** en todo el backend de Odoo.
|
|
|
|
En Odoo 18 ese borde se pinta con el gris claro de los separadores
|
|
(``--border-color``, ``#dee2e6``), que sobre fondo blanco da un contraste de
|
|
1,3:1: una casilla sin marcar casi no se ve, y menos aún en un campo de sólo
|
|
lectura o en una celda de lista, que Odoo atenúa además al 50 %. WCAG 1.4.11
|
|
pide 3:1 para el contorno de un control.
|
|
|
|
Con el módulo instalado:
|
|
|
|
* casilla editable sin marcar: gris ``--gray-600``, contraste 4,7:1;
|
|
* casilla de sólo lectura sin marcar: ``--gray-900`` atenuado al 50 %, 3,1:1.
|
|
|
|
Los estados marcado, indeterminado, foco y hover conservan los colores de Odoo.
|
|
|
|
El alcance global es intencionado: es justamente lo que hace este módulo. Es un
|
|
módulo de sólo CSS: no define modelos, campos ni vistas. Para volver al aspecto
|
|
estándar de Odoo basta con desinstalarlo.
|
|
|
|
Sólo afecta al backend (``web.assets_backend``): ni el sitio web, ni el portal,
|
|
ni el TPV cambian.
|
|
|
|
Nota técnica: no se sobrescribe ``border-color`` sino la propiedad
|
|
personalizada ``--border-color`` sobre el propio ``.form-check-input``.
|
|
Bootstrap sólo la lee en el ``border`` base del control; el resto de estados
|
|
fijan ``border-color`` de forma explícita, así que ganan siempre, sin depender
|
|
de la especificidad ni del orden de carga de los assets.
|
|
|
|
Instalación
|
|
===========
|
|
|
|
Instalar el módulo:
|
|
|
|
::
|
|
|
|
docker-compose run --rm odoo odoo -d odoo --stop-after-init -i web_checkbox_contrast
|
|
|
|
No tiene más dependencias que ``web``, así que se puede instalar y desinstalar
|
|
en cualquier momento sin afectar a datos.
|
|
|
|
Configuración
|
|
=============
|
|
|
|
No requiere configuración. El efecto se aplica al instalar el módulo y
|
|
desaparece al desinstalarlo.
|
|
|
|
Para cambiar la intensidad del borde, edita los dos valores de
|
|
``--border-color`` en ``static/src/css/web_checkbox_contrast.css``.
|
|
|
|
Uso
|
|
===
|
|
|
|
No hay nada que usar: una vez instalado, cualquier casilla, botón de opción o
|
|
interruptor sin marcar del backend (formularios, columnas booleanas de las
|
|
listas, ajustes, filtros...) muestra un borde bien visible.
|
|
|
|
Contribuidores
|
|
==============
|
|
|
|
* Criptomart
|
|
|
|
Créditos
|
|
========
|
|
|
|
Autor
|
|
-----
|
|
|
|
* Criptomart
|