first commit
This commit is contained in:
169
README.md
Normal file
169
README.md
Normal file
@@ -0,0 +1,169 @@
|
||||
# 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! 🎬✨
|
||||
Reference in New Issue
Block a user