464 lines
10 KiB
Markdown
464 lines
10 KiB
Markdown
# 🎨 Actualización UI Basada en Lobe UI
|
|
|
|
## Referencia
|
|
**GitHub Repository**: [lobehub/lobe-ui](https://github.com/lobehub/lobe-ui)
|
|
|
|
**Sistema de Diseño**: Lobe UI - Modern Glassmorphism Design System
|
|
|
|
---
|
|
|
|
## ✨ Características Implementadas
|
|
|
|
### 1. **Glassmorphism Effect**
|
|
El efecto glassmorphism es la característica distintiva de Lobe UI:
|
|
|
|
```css
|
|
/* Glass background con blur */
|
|
background: rgba(17, 17, 17, 0.7);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
```
|
|
|
|
**Aplicado en**:
|
|
- ✅ Sidebar
|
|
- ✅ Input area
|
|
- ✅ Suggestion cards
|
|
- ✅ Message containers
|
|
|
|
### 2. **Gradientes Vibrantes**
|
|
Lobe UI usa gradientes coloridos y modernos:
|
|
|
|
```css
|
|
/* Purple Primary Gradient */
|
|
--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
|
/* Cyan Accent Gradient */
|
|
--gradient-accent: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
|
|
|
/* Success Gradient */
|
|
--gradient-success: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
|
|
```
|
|
|
|
**Aplicado en**:
|
|
- ✅ Botón "Nuevo chat"
|
|
- ✅ Avatar del usuario (purple)
|
|
- ✅ Avatar de AI (cyan)
|
|
- ✅ Botón de envío activo
|
|
- ✅ Título de bienvenida (text gradient)
|
|
- ✅ Logo con efecto pulse
|
|
|
|
### 3. **Background Gradient Ambiental**
|
|
Fondo oscuro con gradientes radiales sutiles:
|
|
|
|
```css
|
|
background: #0a0a0a;
|
|
background-image:
|
|
radial-gradient(circle at 20% 50%, rgba(102, 126, 234, 0.08) 0%, transparent 50%),
|
|
radial-gradient(circle at 80% 80%, rgba(118, 75, 162, 0.08) 0%, transparent 50%),
|
|
radial-gradient(circle at 40% 20%, rgba(79, 172, 254, 0.06) 0%, transparent 50%);
|
|
```
|
|
|
|
### 4. **Sistema de Colores Modernos**
|
|
|
|
#### Antes (ChatGPT)
|
|
```css
|
|
--bg-primary: #202123
|
|
--bg-secondary: #343541
|
|
--accent-primary: #10a37f (verde)
|
|
```
|
|
|
|
#### Ahora (Lobe UI)
|
|
```css
|
|
--bg-primary: #0a0a0a (más oscuro)
|
|
--bg-secondary: #111111 (negro profundo)
|
|
--bg-elevated: rgba(255,255,255,0.05) (glassmorphism)
|
|
--accent-primary: #667eea (purple vibrante)
|
|
```
|
|
|
|
### 5. **Bordes con Transparencia**
|
|
Bordes sutiles que crean profundidad:
|
|
|
|
```css
|
|
--border-primary: rgba(255, 255, 255, 0.08);
|
|
--border-secondary: rgba(255, 255, 255, 0.05);
|
|
--border-focus: rgba(102, 126, 234, 0.4);
|
|
```
|
|
|
|
### 6. **Sombras Pronunciadas**
|
|
Sombras más dramáticas con efecto glow:
|
|
|
|
```css
|
|
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
|
|
--shadow-glow: 0 0 20px rgba(102, 126, 234, 0.3);
|
|
```
|
|
|
|
### 7. **Animaciones Fluidas**
|
|
Transiciones más largas y suaves:
|
|
|
|
```css
|
|
--transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-bounce: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
```
|
|
|
|
### 8. **Bordes Más Redondeados**
|
|
Radios más generosos para un look moderno:
|
|
|
|
```css
|
|
--radius-lg: 16px
|
|
--radius-xl: 20px
|
|
--radius-2xl: 24px
|
|
--radius-3xl: 32px
|
|
```
|
|
|
|
---
|
|
|
|
## 🎨 Componentes Transformados
|
|
|
|
### 1. **Sidebar**
|
|
**Antes**: Fondo sólido gris oscuro
|
|
```css
|
|
background: #202123;
|
|
border-right: 1px solid rgba(255,255,255,0.1);
|
|
```
|
|
|
|
**Ahora**: Glassmorphism con blur
|
|
```css
|
|
background: rgba(17, 17, 17, 0.7);
|
|
backdrop-filter: blur(20px);
|
|
border-right: 1px solid rgba(255,255,255,0.08);
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
|
|
```
|
|
|
|
### 2. **Botón "Nuevo Chat"**
|
|
**Antes**: Botón con borde simple
|
|
```css
|
|
background: transparent;
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
```
|
|
|
|
**Ahora**: Gradiente vibrante con efecto hover
|
|
```css
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 20px rgba(102,126,234,0.3);
|
|
|
|
/* Hover con overlay */
|
|
.new-chat-btn::before {
|
|
background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 100%);
|
|
}
|
|
```
|
|
|
|
### 3. **Chat Items**
|
|
**Antes**: Hover con fondo gris
|
|
```css
|
|
background: rgba(255,255,255,0.05);
|
|
```
|
|
|
|
**Ahora**: Glassmorphism con desplazamiento
|
|
```css
|
|
background: rgba(255,255,255,0.05);
|
|
backdrop-filter: blur(8px);
|
|
transform: translateX(4px); /* Desplazamiento al hover */
|
|
border-color: rgba(102,126,234,0.4);
|
|
```
|
|
|
|
### 4. **Suggestion Cards**
|
|
**Antes**: Fondo sólido simple
|
|
```css
|
|
background: #444654;
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
```
|
|
|
|
**Ahora**: Glass con gradiente overlay
|
|
```css
|
|
background: rgba(17, 17, 17, 0.7);
|
|
backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
|
|
/* Hover con gradiente */
|
|
.suggestion-card::before {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
opacity: 0.08;
|
|
}
|
|
```
|
|
|
|
### 5. **Mensajes**
|
|
**Antes**: Fondos alternados sólidos
|
|
```css
|
|
.message.user { background: #343541; }
|
|
.message.ai { background: #444654; }
|
|
```
|
|
|
|
**Ahora**: Glassmorphism con tinte de color
|
|
```css
|
|
.message.user {
|
|
background: rgba(102, 126, 234, 0.1); /* Tinte purple */
|
|
backdrop-filter: blur(8px);
|
|
border-left: 2px solid #667eea;
|
|
}
|
|
|
|
.message.ai {
|
|
background: rgba(255, 255, 255, 0.03); /* Sutil */
|
|
}
|
|
```
|
|
|
|
### 6. **Avatares**
|
|
**Antes**: Colores sólidos
|
|
```css
|
|
.user .avatar { background: #5436da; }
|
|
.ai .avatar { background: #10a37f; }
|
|
```
|
|
|
|
**Ahora**: Gradientes vibrantes
|
|
```css
|
|
.user .avatar {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
border-radius: 12px; /* Más redondeado */
|
|
box-shadow: 0 4px 16px rgba(0,0,0,0.4);
|
|
}
|
|
|
|
.ai .avatar {
|
|
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
|
}
|
|
```
|
|
|
|
### 7. **Input Area**
|
|
**Antes**: Fondo gris simple
|
|
```css
|
|
background: #444654;
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
```
|
|
|
|
**Ahora**: Glassmorphism elevado
|
|
```css
|
|
background: rgba(17, 17, 17, 0.7);
|
|
backdrop-filter: blur(20px);
|
|
box-shadow: 0 16px 48px rgba(0,0,0,0.6);
|
|
|
|
/* Focus con glow */
|
|
.input-wrapper:focus-within {
|
|
border-color: rgba(102,126,234,0.4);
|
|
box-shadow: 0 0 0 4px rgba(102,126,234,0.2), 0 0 20px rgba(102,126,234,0.3);
|
|
}
|
|
```
|
|
|
|
### 8. **Botón de Envío**
|
|
**Antes**: Verde sólido
|
|
```css
|
|
background: #10a37f;
|
|
```
|
|
|
|
**Ahora**: Gradiente purple con animación
|
|
```css
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 20px rgba(102,126,234,0.3);
|
|
|
|
/* Hover con scale */
|
|
transform: scale(1.08);
|
|
```
|
|
|
|
### 9. **Logo de Bienvenida**
|
|
**Antes**: Icono simple
|
|
```css
|
|
background: #10a37f;
|
|
width: 48px;
|
|
```
|
|
|
|
**Ahora**: Logo con gradiente y pulse animation
|
|
```css
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
width: 64px;
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 20px rgba(102,126,234,0.3);
|
|
animation: pulse 3s ease-in-out infinite;
|
|
```
|
|
|
|
### 10. **Título de Bienvenida**
|
|
**Antes**: Texto blanco simple
|
|
```css
|
|
color: #ececf1;
|
|
font-size: 32px;
|
|
```
|
|
|
|
**Ahora**: Texto con gradiente
|
|
```css
|
|
font-size: 36px;
|
|
font-weight: 700;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
```
|
|
|
|
---
|
|
|
|
## 📊 Comparación Visual
|
|
|
|
### Paleta de Colores
|
|
|
|
| Elemento | ChatGPT (Antes) | Lobe UI (Ahora) |
|
|
|----------|----------------|-----------------|
|
|
| **Sidebar** | `#202123` | `rgba(17,17,17,0.7)` + blur |
|
|
| **Chat BG** | `#343541` | `#111111` + gradientes radiales |
|
|
| **Accent** | `#10a37f` (verde) | `#667eea` (purple) |
|
|
| **User Avatar** | `#5436da` | `linear-gradient(purple)` |
|
|
| **AI Avatar** | `#10a37f` | `linear-gradient(cyan)` |
|
|
| **Borders** | `rgba(255,255,255,0.1)` | `rgba(255,255,255,0.08)` |
|
|
|
|
### Efectos
|
|
|
|
| Efecto | Antes | Ahora |
|
|
|--------|-------|-------|
|
|
| **Blur** | ❌ No | ✅ 20px backdrop-filter |
|
|
| **Gradientes** | ❌ No | ✅ 5+ gradientes |
|
|
| **Glow** | ❌ No | ✅ Box-shadow glow |
|
|
| **Animaciones** | ✅ Básicas | ✅ Avanzadas (pulse, bounce) |
|
|
| **Glass** | ❌ No | ✅ En todos los elementos |
|
|
|
|
---
|
|
|
|
## 🎯 Características Clave de Lobe UI
|
|
|
|
### 1. Glassmorphism en Capas
|
|
```
|
|
Capa 1: Background oscuro con gradientes radiales
|
|
Capa 2: Glass containers con blur
|
|
Capa 3: Elementos con gradientes vibrantes
|
|
Capa 4: Glows y sombras dramáticas
|
|
```
|
|
|
|
### 2. Purple como Color Principal
|
|
- Avatar usuario: Purple gradient
|
|
- Botón principal: Purple gradient
|
|
- Focus states: Purple con glow
|
|
- Texto destacado: Purple gradient
|
|
|
|
### 3. Cyan para IA
|
|
- Avatar IA: Cyan gradient (#4facfe → #00f2fe)
|
|
- Representa tecnología y futurismo
|
|
|
|
### 4. Interacciones Fluidas
|
|
- Transforms en hover (scale, translateY, translateX)
|
|
- Transiciones de 250ms+
|
|
- Bounce easing para efectos divertidos
|
|
- Glow effects que aparecen gradualmente
|
|
|
|
### 5. Profundidad Visual
|
|
- Múltiples capas de sombras
|
|
- Blur en diferentes intensidades
|
|
- Bordes con transparencia variable
|
|
- Overlays con gradientes
|
|
|
|
---
|
|
|
|
## 🚀 Mejoras de Performance
|
|
|
|
### CSS Optimizado
|
|
```css
|
|
/* GPU Acceleration */
|
|
transform: translateZ(0);
|
|
will-change: transform;
|
|
|
|
/* Backdrop filter optimizado */
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
```
|
|
|
|
### Animaciones Eficientes
|
|
```css
|
|
/* Solo animar propiedades GPU-friendly */
|
|
transform: scale(1.05); ✅
|
|
opacity: 0.8; ✅
|
|
background-color: red; ❌ (evitado)
|
|
```
|
|
|
|
---
|
|
|
|
## 📱 Responsive
|
|
|
|
Los efectos glassmorphism se mantienen en todos los tamaños:
|
|
|
|
### Desktop
|
|
- Blur completo (20px)
|
|
- Gradientes visibles
|
|
- Animaciones completas
|
|
|
|
### Tablet/Móvil
|
|
- Blur reducido en móviles lentos
|
|
- Gradientes mantenidos
|
|
- Animaciones simplificadas
|
|
|
|
---
|
|
|
|
## ✨ Resultado Final
|
|
|
|
### Antes (ChatGPT Style)
|
|
```
|
|
🎨 Diseño limpio y profesional
|
|
📦 Fondos sólidos grises
|
|
🟢 Verde como acento
|
|
📏 Minimalista
|
|
```
|
|
|
|
### Ahora (Lobe UI Style)
|
|
```
|
|
✨ Glassmorphism moderno
|
|
🌈 Gradientes vibrantes purple/cyan
|
|
💎 Efectos de profundidad
|
|
🎭 Visual impactante y futurista
|
|
```
|
|
|
|
---
|
|
|
|
## 🎨 Guía de Uso
|
|
|
|
### Para Mantener el Estilo
|
|
1. Usar siempre gradientes en lugar de colores sólidos
|
|
2. Aplicar glassmorphism (glass-bg + blur) en containers
|
|
3. Agregar glow effects en elementos interactivos
|
|
4. Usar purple para usuario, cyan para IA
|
|
5. Transiciones de 250ms mínimo
|
|
|
|
### Colores a Usar
|
|
```css
|
|
/* Usuario/Primary */
|
|
#667eea, #764ba2
|
|
|
|
/* IA/Tech */
|
|
#4facfe, #00f2fe
|
|
|
|
/* Success */
|
|
#43e97b, #38f9d7
|
|
|
|
/* Warning */
|
|
#ffd93d
|
|
|
|
/* Error */
|
|
#ff6b9d
|
|
```
|
|
|
|
---
|
|
|
|
## 🎯 Compatibilidad
|
|
|
|
### Navegadores Soportados
|
|
- ✅ Chrome/Edge 90+
|
|
- ✅ Firefox 88+ (con vendor prefix)
|
|
- ✅ Safari 14+ (webkit-backdrop-filter)
|
|
- ⚠️ Fallback para navegadores antiguos (sin blur)
|
|
|
|
### Fallback
|
|
```css
|
|
/* Si backdrop-filter no es soportado */
|
|
@supports not (backdrop-filter: blur(20px)) {
|
|
background: rgba(17, 17, 17, 0.95);
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
**Fecha de actualización**: 13 de Febrero, 2026
|
|
**Diseño base**: Lobe UI Design System
|
|
**Estado**: ✅ 100% Implementado
|
|
**Estilo**: 🌟🌟🌟🌟🌟 Glassmorphism Premium
|
|
|