263 lines
7.8 KiB
CSS
263 lines
7.8 KiB
CSS
/*
|
|
* ========================================
|
|
* TEME ALTERNATIVE PENTRU JELLYFIN
|
|
* ========================================
|
|
*
|
|
* Acest fișier conține variante de culori pentru tema principală.
|
|
* Pentru a folosi o temă alternativă, copiază variabilele dorite
|
|
* și înlocuiește secțiunea :root din fișierul principal edd.css
|
|
*/
|
|
|
|
/* ========================================
|
|
* TEMĂ VERDE NATURA
|
|
* ======================================== */
|
|
/*
|
|
:root {
|
|
--primary-color: #28a745;
|
|
--secondary-color: #1e1e1e;
|
|
--accent-color: #20c997;
|
|
--background-dark: #0a1a0a;
|
|
--background-medium: #1a2a1a;
|
|
--background-light: #2a3a2a;
|
|
--text-primary: #ffffff;
|
|
--text-secondary: #b3d4b3;
|
|
--border-color: #334433;
|
|
--success-color: #28a745;
|
|
--warning-color: #ffc107;
|
|
--error-color: #dc3545;
|
|
|
|
--border-radius: 8px;
|
|
--border-radius-small: 4px;
|
|
--border-radius-large: 12px;
|
|
--shadow-light: 0 2px 4px rgba(0,0,0,0.1);
|
|
--shadow-medium: 0 4px 8px rgba(0,0,0,0.2);
|
|
--shadow-heavy: 0 8px 16px rgba(0,0,0,0.3);
|
|
|
|
--transition-fast: 0.2s ease;
|
|
--transition-medium: 0.3s ease;
|
|
--transition-slow: 0.5s ease;
|
|
}
|
|
*/
|
|
|
|
/* ========================================
|
|
* TEMĂ VIOLET COSMIC
|
|
* ======================================== */
|
|
/*
|
|
:root {
|
|
--primary-color: #6f42c1;
|
|
--secondary-color: #1e1e1e;
|
|
--accent-color: #e83e8c;
|
|
--background-dark: #1a0a1a;
|
|
--background-medium: #2a1a2a;
|
|
--background-light: #3a2a3a;
|
|
--text-primary: #ffffff;
|
|
--text-secondary: #d4b3d4;
|
|
--border-color: #443344;
|
|
--success-color: #28a745;
|
|
--warning-color: #ffc107;
|
|
--error-color: #dc3545;
|
|
|
|
--border-radius: 8px;
|
|
--border-radius-small: 4px;
|
|
--border-radius-large: 12px;
|
|
--shadow-light: 0 2px 4px rgba(0,0,0,0.1);
|
|
--shadow-medium: 0 4px 8px rgba(0,0,0,0.2);
|
|
--shadow-heavy: 0 8px 16px rgba(0,0,0,0.3);
|
|
|
|
--transition-fast: 0.2s ease;
|
|
--transition-medium: 0.3s ease;
|
|
--transition-slow: 0.5s ease;
|
|
}
|
|
*/
|
|
|
|
/* ========================================
|
|
* TEMĂ ROȘIE CINEMA
|
|
* ======================================== */
|
|
/*
|
|
:root {
|
|
--primary-color: #dc3545;
|
|
--secondary-color: #1e1e1e;
|
|
--accent-color: #fd7e14;
|
|
--background-dark: #1a0a0a;
|
|
--background-medium: #2a1a1a;
|
|
--background-light: #3a2a2a;
|
|
--text-primary: #ffffff;
|
|
--text-secondary: #d4b3b3;
|
|
--border-color: #443333;
|
|
--success-color: #28a745;
|
|
--warning-color: #ffc107;
|
|
--error-color: #dc3545;
|
|
|
|
--border-radius: 8px;
|
|
--border-radius-small: 4px;
|
|
--border-radius-large: 12px;
|
|
--shadow-light: 0 2px 4px rgba(0,0,0,0.1);
|
|
--shadow-medium: 0 4px 8px rgba(0,0,0,0.2);
|
|
--shadow-heavy: 0 8px 16px rgba(0,0,0,0.3);
|
|
|
|
--transition-fast: 0.2s ease;
|
|
--transition-medium: 0.3s ease;
|
|
--transition-slow: 0.5s ease;
|
|
}
|
|
*/
|
|
|
|
/* ========================================
|
|
* TEMĂ ALBASTRU OCEAN
|
|
* ======================================== */
|
|
/*
|
|
:root {
|
|
--primary-color: #007bff;
|
|
--secondary-color: #1e1e1e;
|
|
--accent-color: #17a2b8;
|
|
--background-dark: #0a0a1a;
|
|
--background-medium: #1a1a2a;
|
|
--background-light: #2a2a3a;
|
|
--text-primary: #ffffff;
|
|
--text-secondary: #b3b3d4;
|
|
--border-color: #333344;
|
|
--success-color: #28a745;
|
|
--warning-color: #ffc107;
|
|
--error-color: #dc3545;
|
|
|
|
--border-radius: 8px;
|
|
--border-radius-small: 4px;
|
|
--border-radius-large: 12px;
|
|
--shadow-light: 0 2px 4px rgba(0,0,0,0.1);
|
|
--shadow-medium: 0 4px 8px rgba(0,0,0,0.2);
|
|
--shadow-heavy: 0 8px 16px rgba(0,0,0,0.3);
|
|
|
|
--transition-fast: 0.2s ease;
|
|
--transition-medium: 0.3s ease;
|
|
--transition-slow: 0.5s ease;
|
|
}
|
|
*/
|
|
|
|
/* ========================================
|
|
* TEMĂ PORTOCALIU SUNSET
|
|
* ======================================== */
|
|
/*
|
|
:root {
|
|
--primary-color: #fd7e14;
|
|
--secondary-color: #1e1e1e;
|
|
--accent-color: #ffc107;
|
|
--background-dark: #1a1a0a;
|
|
--background-medium: #2a2a1a;
|
|
--background-light: #3a3a2a;
|
|
--text-primary: #ffffff;
|
|
--text-secondary: #d4d4b3;
|
|
--border-color: #444433;
|
|
--success-color: #28a745;
|
|
--warning-color: #ffc107;
|
|
--error-color: #dc3545;
|
|
|
|
--border-radius: 8px;
|
|
--border-radius-small: 4px;
|
|
--border-radius-large: 12px;
|
|
--shadow-light: 0 2px 4px rgba(0,0,0,0.1);
|
|
--shadow-medium: 0 4px 8px rgba(0,0,0,0.2);
|
|
--shadow-heavy: 0 8px 16px rgba(0,0,0,0.3);
|
|
|
|
--transition-fast: 0.2s ease;
|
|
--transition-medium: 0.3s ease;
|
|
--transition-slow: 0.5s ease;
|
|
}
|
|
*/
|
|
|
|
/* ========================================
|
|
* TEMĂ CYAN TECH
|
|
* ======================================== */
|
|
/*
|
|
:root {
|
|
--primary-color: #17a2b8;
|
|
--secondary-color: #1e1e1e;
|
|
--accent-color: #20c997;
|
|
--background-dark: #0a1a1a;
|
|
--background-medium: #1a2a2a;
|
|
--background-light: #2a3a3a;
|
|
--text-primary: #ffffff;
|
|
--text-secondary: #b3d4d4;
|
|
--border-color: #334444;
|
|
--success-color: #28a745;
|
|
--warning-color: #ffc107;
|
|
--error-color: #dc3545;
|
|
|
|
--border-radius: 8px;
|
|
--border-radius-small: 4px;
|
|
--border-radius-large: 12px;
|
|
--shadow-light: 0 2px 4px rgba(0,0,0,0.1);
|
|
--shadow-medium: 0 4px 8px rgba(0,0,0,0.2);
|
|
--shadow-heavy: 0 8px 16px rgba(0,0,0,0.3);
|
|
|
|
--transition-fast: 0.2s ease;
|
|
--transition-medium: 0.3s ease;
|
|
--transition-slow: 0.5s ease;
|
|
}
|
|
*/
|
|
|
|
/* ========================================
|
|
* TEMĂ MONOCROM ELEGANT
|
|
* ======================================== */
|
|
/*
|
|
:root {
|
|
--primary-color: #6c757d;
|
|
--secondary-color: #1e1e1e;
|
|
--accent-color: #adb5bd;
|
|
--background-dark: #0f0f0f;
|
|
--background-medium: #1a1a1a;
|
|
--background-light: #2a2a2a;
|
|
--text-primary: #ffffff;
|
|
--text-secondary: #b3b3b3;
|
|
--border-color: #333333;
|
|
--success-color: #28a745;
|
|
--warning-color: #ffc107;
|
|
--error-color: #dc3545;
|
|
|
|
--border-radius: 8px;
|
|
--border-radius-small: 4px;
|
|
--border-radius-large: 12px;
|
|
--shadow-light: 0 2px 4px rgba(0,0,0,0.1);
|
|
--shadow-medium: 0 4px 8px rgba(0,0,0,0.2);
|
|
--shadow-heavy: 0 8px 16px rgba(0,0,0,0.3);
|
|
|
|
--transition-fast: 0.2s ease;
|
|
--transition-medium: 0.3s ease;
|
|
--transition-slow: 0.5s ease;
|
|
}
|
|
*/
|
|
|
|
/* ========================================
|
|
* INSTRUCȚIUNI DE UTILIZARE
|
|
* ======================================== */
|
|
|
|
/*
|
|
PENTRU A FOLOSI O TEMĂ ALTERNATIVĂ:
|
|
|
|
1. Alege una dintre temele de mai sus
|
|
2. Copiază variabilele :root (fără comentariile /* */)
|
|
3. Deschide fișierul edd.css
|
|
4. Înlocuiește secțiunea :root existentă cu noile variabile
|
|
5. Salvează și aplică în Jellyfin Dashboard > General > Custom CSS
|
|
|
|
EXEMPLU:
|
|
Dacă vrei tema verde, copiază doar partea:
|
|
|
|
:root {
|
|
--primary-color: #28a745;
|
|
--secondary-color: #1e1e1e;
|
|
... (restul variabilelor)
|
|
}
|
|
|
|
Și înlocuiește secțiunea :root din edd.css cu aceasta.
|
|
|
|
PERSONALIZARE AVANSATĂ:
|
|
Poți crea propria paletă de culori modificând valorile hex:
|
|
- #28a745 = Verde
|
|
- #6f42c1 = Violet
|
|
- #dc3545 = Roșu
|
|
- #007bff = Albastru
|
|
- #fd7e14 = Portocaliu
|
|
- #17a2b8 = Cyan
|
|
|
|
Folosește un color picker online pentru a găsi codurile hex perfecte!
|
|
*/
|