# Tema CSS Personalizata pentru Jellyfin Server

## Descriere

Aceasta tema CSS ofera o interfata moderna si eleganta pentru serverul tau Jellyfin, cu imbunatatiri vizuale si functionale pentru o experienta mai buna de utilizare.

## Caracteristici

### 🎨 Design Modern
- **Paleta de culori**: Albastru Jellyfin (#00a4dc) cu accente portocalii (#ff6b35)
- **Fundal intunecat**: Gradient elegant cu multiple tonuri de gri
- **Colturi rotunjite**: Design modern cu border-radius consistent
- **Umbre si efecte**: Box-shadow si backdrop-filter pentru profunzime

### ✨ Animatii si Tranzitii
- **Hover effects**: Transformari fluide pentru carduri si butoane
- **Animatii fade-in**: Aparitie eleganta pentru elemente
- **Tranzitii smooth**: Toate elementele au tranzitii de 0.2-0.5s
- **Efecte pulse**: Animatii pentru butoane in focus

### 📱 Responsive Design
- **Mobile-friendly**: Optimizat pentru toate dimensiunile de ecran
- **Taburi mari**: Butoane mai mari pentru dispozitivele mobile
- **Layout flexibil**: Adaptare automata la diferite rezolutii

### 🎬 imbunatatiri Media
- **Carduri hover**: Efecte 3D pentru postere filme/seriale
- **Cast circular**: Imagini rotunde pentru actorii din cast
- **Preview episoade**: Layout compact pentru episoade
- **Player imbunatatit**: Controale video stilizate

## Instalare

### Pas 1: Acceseaza Dashboard-ul
1. Deschide interfata web Jellyfin
2. Mergi la **Dashboard** (Settings)
3. Selecteaza **General** din meniul lateral

### Pas 2: Aplica CSS-ul
1. Gaseste sectiunea **"Custom CSS"**
2. Copiaza tot continutul din fisierul `edd.css`
3. Lipeste codul in câmpul "Custom CSS"
4. Apasa **"Save"** pentru a salva setarile

### Pas 3: Verifica Rezultatul
- Modificarile se aplica imediat
- Nu este nevoie sa restartezi serverul
- Reimprospateaza pagina pentru a vedea toate schimbarile

## Personalizare

### Modificarea Culorilor
Pentru a schimba culorile temei, editeaza variabilele din sectiunea `:root`:

```css
:root {
    --primary-color: #00a4dc;      /* Culoarea principala */
    --accent-color: #ff6b35;       /* Culoarea accent */
    --background-dark: #0f0f0f;    /* Fundal inchis */
    --text-primary: #ffffff;       /* Text principal */
}
```

### Exemple de Paleta Alternative

#### Tema Verde
```css
--primary-color: #28a745;
--accent-color: #20c997;
```

#### Tema Violet
```css
--primary-color: #6f42c1;
--accent-color: #e83e8c;
```

#### Tema Rosie
```css
--primary-color: #dc3545;
--accent-color: #fd7e14;
```

## Functionalitati Incluse

### 🔧 imbunatatiri Interface
- ✅ Header transparent cu blur effect
- ✅ Meniu lateral stilizat
- ✅ Butoane cu gradient si hover effects
- ✅ Formulare imbunatatite cu focus states
- ✅ Scrollbar personalizat

### 🎭 Elemente Media
- ✅ Carduri cu animatii hover
- ✅ Indicatori vizionare stilizati
- ✅ Cast & crew cu imagini circulare
- ✅ Preview episoade compacte
- ✅ Player video imbunatatit

### 📱 Mobile & Responsive
- ✅ Layout responsive pentru mobile
- ✅ Taburi mari pentru touch
- ✅ Formular login adaptat
- ✅ Linkuri externe vizibile pe mobile

### 🎨 Efecte Vizuale
- ✅ Animatii fade-in pentru carduri
- ✅ Efecte pulse pentru butoane
- ✅ Tranzitii fluide pentru toate elementele
- ✅ Box-shadow pentru profunzime

## Compatibilitate

- ✅ **Jellyfin WebUI**: Toate versiunile moderne
- ✅ **Browsere**: Chrome, Firefox, Safari, Edge
- ✅ **Dispozitive**: Desktop, Tablet, Mobile
- ✅ **Aplicatii**: Jellyfin pentru Android (WebUI)

## Suport si Depanare

### Probleme Comune

**CSS-ul nu se aplica:**
- Verifica daca ai copiat tot codul
- Asigura-te ca ai salvat setarile
- Reimprospateaza pagina (Ctrl+F5)

**Culorile nu arata bine:**
- Modifica variabilele din `:root`
- Testeaza pe diferite browsere
- Verifica contrastul pentru accesibilitate

**Layout stricat pe mobile:**
- Verifica media queries
- Testeaza pe diferite dimensiuni
- Ajusteaza padding-ul si margin-ul

### Backup si Restaurare

**inainte de aplicare:**
1. Fa o captura de ecran a interfetei curente
2. Salveaza CSS-ul existent (daca exista)
3. Noteaza setarile importante

**Pentru restaurare:**
1. sterge continutul din "Custom CSS"
2. Salveaza setarile
3. Reimprospateaza pagina

## Contributii

Daca ai imbunatatiri sau sugestii:
1. Testeaza modificarile pe diferite browsere
2. Documenteaza schimbarile facute
3. Verifica compatibilitatea cu versiunile noi Jellyfin

## Licenta

Acest cod CSS este oferit gratuit pentru uz personal si comercial.
Modifica si distribuie liber, mentionând sursa originala.

---

**Autor**: EDD  
**Versiune**: 1.0  
**Data**: 2025  
**Compatibilitate**: Jellyfin WebUI (toate versiunile moderne)

Bucura-te de experienta imbunatatita Jellyfin! 🎬✨