# Trucos CSS para Joinchat

## Variables CSS de Joinchat

Joinchat utiliza algunas variables para modificar sus estilos de forma global por lo que, generalmente, es mejor cambiar estas variables en lugar de la propiedad CSS concreta.

| Variable | Valor por defecto | Qué hace |
|---|---|---|
| `--sep` | 20px (6px mobile) | Separación a los lados del widget |
| `--bottom` | var(--sep) | Separación inferior del widget |
| `--s` | 60px | Tamaño del botón flotante |
| `--header` | *Calculado* (--s \* 1.6) | Alto de la cabecera de ventana de chat |

Variables CSS de tamañoLos colores se calculan automáticamente desde el selector de colores en los ajustes de Joinchat. La forma más sencilla de cambiarlos es desde ahí. Pero para cambios más especifícos (por ejemplo, definir otro color de *hover*) éstas son las variables:

| Variable | Valor por defecto | Qué hace |
|---|---|---|
| `--ch` | *Color definido en los ajustes* | Hue (matiz) |
| `--cs` | *Color definido en los ajustes* | Saturación del color |
| `--cl` | *Color definido en los ajustes* | Luminosidad del color |
| `--hsl` | *Calculado* | Paquete HSL para reutilizar |
| `--color` | *Calculado* | Color principal |
| `--hover` | *Calculado* (--color 20% más claro) | Variante más claro para *hover* |
| `--dark` | *Calculado* (--color 10% más oscuro) | Variante más oscura para modo oscuro |
| `--bg` | *Calculado* (--color con 4% de opacidad) | Fondo de la ventana de chat |
| `--msg` | *Calculado* (igual que --color) | Color de links, botones, etc. |
| `--bw` | *Color definido en los ajustes* | Texto blanco (1) o negro (0) |
| `--text` | *Calculado* (--bw) | Color del texto en botones y cabecera |

Variables CSS de colores/texto## Personaliza el plugin con estilos CSS

La mejor forma de de cambiar la apariencia de Joinchat es añadiendo algunos estilos desde los ajustes de **Joinchat / Avanzado** en el campo **CSS adicional**. Así estos estilos sólo se cargarán si el botón flotante de Joinchat se muestra en la página.

Puedes combinar varios estilos:

```
.joinchat {
  --bottom: 80px;
  --s: 52px;
}Lenguaje del código: CSS (css)
```

Para aplicar los cambios solo en dispositivos móviles utiliza *"media queries"*:

```
@media (max-width: 480px), (orientation: landscape) and (max-width: 767px) {
  .joinchat {
    --bottom: 80px;
    --s: 52px;
  }
}Lenguaje del código: CSS (css)
```

### 👆 Subir el botón flotante

```
/* defaults: desk 20px, mobile 6px */
.joinchat {
  --bottom: 80px;
}Lenguaje del código: CSS (css)
```

### 🤏 Cambiar el tamaño el botón flotante

```
/* default: 60px */
.joinchat {
  --s: 50px;
}Lenguaje del código: CSS (css)
```

### ☝️ Poner por encima de otros objetos Joinchat

```
/* default: 9000 */
.joinchat {
  z-index: 2147483647; 
}Lenguaje del código: CSS (css)
```

### 📏 Cambiar la altura de la cabecera de chat

```
/* defaults: desk 70px, mobile 55px */
.joinchat {
  --header: 60px;
}Lenguaje del código: CSS (css)
```

### 🎨 Cambiar el color del botón flotante

```
/* default: #25d366; */
.joinchat__button {
  background-color: #999;
}Lenguaje del código: CSS (css)
```

### 🌅 Dejar la imagen alternativa fija 

> A partir de **Joinchat 6** se puede hacer desde los ajustes de Joinchat.

```
.joinchat--show .joinchat__button__image {
  animation: none !important;
  opacity: 1 !important;
}Lenguaje del código: CSS (css)
```