CSS¶
Resumen¶
Esta página lista las variables CSS de color primario, fondo, color general, estados y estructura de los elementos, las clases CSS predefinidas de uso público y las pautas para escribir CSS compatible con idiomas RTL. Está dirigida a quienes desarrollan apps.
Fuente: documentación de Nextcloud, «developer_manual/html_css_design/css», versión 3ad9158, licencia CC BY 3.0; traducida y adaptada para APS Conecta Gestión.
Aunque la forma recomendada de desarrollar la interfaz de usuario es usar Vue con los componentes que proporciona APS Conecta Gestión, APS Conecta Gestión también proporciona variables y clases CSS para dar estilo a los componentes y lograr un aspecto coherente.
Variables CSS¶
Se recomienda encarecidamente usar las variables CSS que proporciona APS Conecta Gestión para dar estilo a los componentes. Así se tiene la seguridad de que la app de tematización y accesibilidad puede ajustar los valores de forma dinámica. Hacerlo también permite a los usuarios forzar el tema oscuro o claro, el alto contraste u otras opciones relacionadas con la tematización.
Variables del color primario¶
El color primario es el color de acento principal, que puede configurar el administrador o el usuario (si la tematización por usuario está habilitada).
Variable |
Ejemplo |
Uso |
|---|---|---|
|
|
Color primario configurado por el usuario |
|
|
Color de texto para usar sobre |
|
|
Variante de |
|
|
Variante clara de |
|
|
Color de texto para usar sobre |
|
|
Variante de |
|
|
Variante de |
|
|
Color de texto para usar sobre |
|
|
Versión de menor contraste de |
|
|
Variante de |
|
|
Variante clara de |
|
|
Color de texto para usar sobre |
|
|
Variante de |
|
|
Filtro para invertir los iconos colocados sobre fondos del color primario si el color primario es claro |
|
|
Filtro para invertir los iconos colocados sobre fondos del color primario si el color primario es oscuro |
Variables del fondo¶
Variable |
Ejemplo |
Uso |
|---|---|---|
|
|
El color de fondo del elemento |
|
|
Color de texto para usar directamente sobre el fondo (p. ej., el menú de la cabecera) |
|
|
Imagen de fondo que se usa en el elemento |
|
|
Filtro para invertir los iconos (claros) colocados directamente sobre el fondo del body (menú de apps) |
Variables de color generales¶
Variable |
Ejemplo |
Uso |
|---|---|---|
|
|
Color principal del texto |
|
|
Color de texto más claro que sigue cumpliendo los requisitos de accesibilidad |
|
|
|
|
|
Color principal del fondo |
|
|
Variante RGB de |
|
|
Color de fondo que se usa para fondos difuminados, ver |
|
|
Color de fondo para efectos al pasar el cursor |
|
|
Puede usarse, p. ej., para colorear las filas seleccionadas de una tabla |
|
|
¡Solo debe usarse para elementos, no como fondo de texto! De lo contrario, no funcionará para la accesibilidad. |
|
|
Color predeterminado del borde de los elementos |
|
|
Versión más oscura del color del borde |
|
|
El color de borde más claro posible para la accesibilidad |
|
|
Color para los marcadores de posición de los campos de entrada |
|
|
Versión más oscura de |
|
|
Color para las barras de desplazamiento |
|
|
Color para el indicador de carga (su parte clara) |
|
|
Color para el indicador de carga (su parte oscura) |
|
|
Color para los efectos de sombra de caja, en notación RGB |
|
|
Color para los efectos de sombra de caja |
|
|
Filtro para invertir los iconos (oscuros) (p. ej., establecido si el tema de color es oscuro) |
|
|
Filtro para invertir los iconos (claros) (p. ej., establecido si el tema de color es claro) |
Variables de los colores de estado¶
Variable |
Ejemplo |
Uso |
|---|---|---|
|
|
Para texto sobre un fondo normal que deba tener un estado de error |
|
|
Para texto sobre un fondo normal que deba tener un estado de éxito |
|
|
Color con el contraste adecuado para elementos que tienen un estado de error, por ejemplo, iconos |
|
|
Color con el contraste adecuado para elementos que tienen un estado de información, por ejemplo, iconos |
|
|
Color con el contraste adecuado para elementos que tienen un estado de éxito, por ejemplo, iconos |
|
|
Color con el contraste adecuado para elementos que tienen un estado de advertencia, por ejemplo, iconos |
|
|
Color del borde para elementos que tienen un estado de error, como los campos de entrada cuya validación falla |
|
|
Color del borde para elementos que tienen un estado de éxito, como los campos de entrada que se han guardado |
|
|
Color para marcar favoritos; puede usarse, p. ej., para colorear un icono de estrella de los favoritos |
|
|
Color para mostrar el estado de error; no debe usarse para texto, sino para fondos de elementos |
|
|
Color de fondo para los efectos al pasar el cursor de |
|
|
Color del texto sobre elementos que usan |
|
|
Color para mostrar el estado de advertencia; no debe usarse para texto, sino para fondos de elementos |
|
|
Color de fondo para los efectos al pasar el cursor de |
|
|
Color del texto sobre elementos que usan |
|
|
Color para mostrar el estado de éxito; no debe usarse para texto, sino para fondos de elementos |
|
|
Color de fondo para los efectos al pasar el cursor de |
|
|
Color del texto sobre elementos que usan |
|
|
Color para mostrar el estado de información; no debe usarse para texto, sino para fondos de elementos |
|
|
Color de fondo para los efectos al pasar el cursor de |
|
|
Color del texto sobre elementos que usan |
|
|
(⚠️ obsoleta desde 32.0.0) Variante RGB de |
|
|
(⚠️ obsoleta desde 32.0.0) Variante RGB de |
|
|
(⚠️ obsoleta desde 32.0.0) Variante RGB de |
|
|
(⚠️ obsoleta desde 32.0.0) Variante RGB de |
Variables de la estructura de los elementos¶
Variable |
Ejemplo |
Uso |
|---|---|---|
|
|
Duración de la animación para transiciones CSS ágiles |
|
|
Duración de la animación para transiciones más complejas |
|
|
Punto de ruptura para la disposición adaptable al móvil (p. ej., si la navegación de la app debe estar siempre visible) |
|
|
Filtro para usar en elementos con fondo difuminado (p. ej., la navegación de la app) |
|
|
Fuente que se usa en la interfaz de usuario de APS Conecta Gestión |
|
|
Tamaño de fuente para el texto normal |
|
|
Altura de línea para el texto normal |
|
|
Base de todos los tamaños de espaciado que se usan en APS Conecta Gestión, que son múltiplos del tamaño de la línea base |
|
|
Ancho del borde de los elementos interactivos, como los campos de texto y los selectores |
|
|
Ancho del borde de los elementos interactivos cuando tienen el foco (ajustado para la accesibilidad) |
|
|
Radio del borde que se usa para los elementos más pequeños |
|
|
Radio del borde de los elementos interactivos, como botones, campos de entrada, elementos de navegación y elementos de lista. |
|
|
Para contenedores más pequeños, como los menús de acciones. |
|
|
Para contenedores más grandes, como el body o los modales. |
|
|
Tamaño predeterminado (ancho y alto) de los elementos interactivos, como los botones |
|
|
Tamaño mayor para los elementos principales de la interfaz |
|
|
El tamaño más pequeño posible de los elementos interactivos, que usan las acciones terciarias, como los chips de filtro |
|
|
Radio del borde del contenedor del body |
|
|
Margen del contenedor del body |
|
|
Altura de la barra principal de navegación de apps |
|
|
Ancho de la barra lateral de navegación dentro de la app |
|
|
Ancho mínimo de la barra lateral de la app en pantallas pequeñas |
|
|
Ancho máximo de la barra lateral de la app en pantallas anchas |
Clases CSS¶
Hay algunas clases predefinidas de uso público para facilitar el desarrollo de una aplicación para APS Conecta Gestión.
Clase CSS |
Uso |
|---|---|
|
Oculta visualmente un elemento de la página, pero lo mantiene en el árbol de accesibilidad |
|
Oculta un elemento por completo de la página (también se elimina del árbol de accesibilidad) |
|
Pone en negrita el contenido del elemento para enfatizarlo |
|
Centra el texto del elemento |
|
Anula el float a la izquierda |
|
Anula el float a la derecha |
|
Anula el float en ambos lados |
|
Float a la izquierda |
|
Float a la derecha |
|
Convierte un elemento en un bloque en línea |
Pautas de RTL¶
Qué hacer y qué no¶
Incorrecto |
Correcto |
Descripción |
|---|---|---|
Usar propiedades físicas |
Usar propiedades lógicas |
Usar propiedades lógicas se adapta automáticamente a LTR/RTL |
Usar |
Usar inset-inline-start/end |
Mantener el posicionamiento consciente de la dirección |
Usar text-align: left/right |
Usar text-align: start/end |
El texto se alinea correctamente en ambos modos |
Usar border-left/right |
Usar border-inline-start/end |
Los bordes se invierten correctamente |
Usar float: left/right |
Usar float: inline-start/end |
El float respeta la dirección |
Suponer que RTL «simplemente funciona» |
Probar la app con idiomas RTL |
Usar el valor de CSS correcto no siempre basta para evitar errores |