188 lines
5.3 KiB
Markdown
188 lines
5.3 KiB
Markdown
# 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
|
|
|
|
### Metoda 1: Încărcare Directă din Repository (Recomandată)
|
|
1. Deschide interfața web Jellyfin
|
|
2. Mergi la **Dashboard** (Settings)
|
|
3. Selectează **General** din meniul lateral
|
|
4. Găsește secțiunea **"Custom CSS"**
|
|
5. Adaugă următoarea comandă pentru încărcare automată:
|
|
|
|
```css
|
|
@import url('https://git.eddmanoo.cloud/eddmanoo/jellyfincss/raw/branch/main/edd.css');
|
|
```
|
|
|
|
6. Apasă **"Save"** pentru a salva setările
|
|
|
|
**Avantaje:**
|
|
- ✅ Actualizări automate când tema este îmbunătățită
|
|
- ✅ Nu trebuie să copiezi manual codul
|
|
- ✅ Întotdeauna ai ultima versiune
|
|
- ✅ Încărcare rapidă și optimizată
|
|
|
|
### Metoda 2: Instalare Manuală (Backup)
|
|
1. Deschide interfața web Jellyfin
|
|
2. Mergi la **Dashboard** (Settings)
|
|
3. Selectează **General** din meniul lateral
|
|
4. Găsește secțiunea **"Custom CSS"**
|
|
5. Copiază tot conținutul din fișierul `edd.css`
|
|
6. Lipește codul în câmpul "Custom CSS"
|
|
7. Apasă **"Save"** pentru a salva setările
|
|
|
|
### Verifică Rezultatul
|
|
- Modificările se aplică imediat
|
|
- Nu este nevoie să restartezi serverul
|
|
- Reîmprospătează pagina (Ctrl+F5) pentru a vedea toate schimbările
|
|
- Dacă folosești metoda 1, tema se va actualiza automat la versiuni noi
|
|
|
|
## 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! 🎬✨
|