Personalizzazione CSS

In "Dashboard> Generale", il campo "CSS personalizzato" può essere utilizzato per inserire qualsiasi override, che verrà quindi applicato al foglio di stile CSS Jellyfin.

Il CSS personalizzato offre la personalizzazione dell'interfaccia come la modifica di colori, layout, dimensioni degli elementi e comportamento. Di seguito è riportato un elenco di varie modifiche che possono essere applicate. Le modifiche CSS funzionano sia nel client Web che nell'applicazione Android. Il codice verrà applicato nell'ordine in cui è stato scritto in modo che il codice possa sovrascrivere il CSS personalizzato precedentemente impostato! Importante sovrascriverà tutto. Per saperne di più, vedi Specificità CSS. Per implementare queste modifiche, vai su Dashboard> Generale> CSS personalizzato. Un'ulteriore fonte di specificità è la specificità.

Se hai poca o nessuna esperienza CSS, puoi trovare varie risorse online ed esercitazioni, oltre ad usare le seguenti modifiche come esempi, è abbastanza facile iniziare a fare le tue modifiche all'istanza di Jellyfin.

Panoramica CSS

Puoi saperne di più sui CSS usando siti come w3school. Di seguito sono riportati alcuni dettagli di base che ti consentiranno di apportare modifiche rudimentali alle modifiche già apportate.

colori

CSS supporta più formati di colore, molti dei quali sono generalmente esadecimali. Ma anche il testo funziona semplicemente. Per ottenere "giallo" puoi semplicemente scrivere "giallo", questo utilizzerà un colore giallo preimpostato. Per ottenere un colore specifico, è necessario utilizzare dati esatti sul colore come codici esadecimali di seguito.

Alcuni esempi di codici colore esadecimali:

#5dd000 Verde
#0000d0 Blu
#d00000 Rosso
#00000058 Nero trasparente

Vai qui per una tabella di colori esadecimali per ottenere un codice per qualsiasi colore.

Una sezione di codice o testo tra / * e * / indica un commento e verrà ignorata. Ciò consente di aggiungere descrizioni di ciò che fa una particolare sezione di codice in modo che sia facilmente identificabile. Può anche essere usato per disabilitare il codice senza eliminarlo. Per esempio

/ * Questo potrebbe essere aggiunto sopra il codice per dirti cosa fa * /

Concatenamento CSS

I CSS possono essere concatenati per modificare diverse sezioni insieme. Un esempio di questo è il mod "Colore bordo". Elenca gli elementi da modificare e apporta una modifica che si applica a tutti loro.

Elenco di modifiche

Per applicare uno di questi, copia e incolla il codice CSS nel campo "CSS personalizzato". Per utilizzare più modifiche, è sufficiente aggiungerle una dopo l'altra nel campo. Qualsiasi codice applicato rimarrà nel campo. Per eliminare una modifica, eliminare o commentare il codice corrispondente nel campo. Le modifiche hanno effetto immediato quando la pagina di configurazione viene salvata e non è necessario riavviarla.

Indicatore riprodotto

Ciò influirà sull'indicatore di riproduzione / osservazione. Sostituisci l'esagono colorato con il valore desiderato.

Senza mod

verde

.playedIndicator {i}: #5dd000; }

Trasparente scuro con RGBA esadecimale

/ * Rendi l'icona osservata scura e trasparente * /. PlayIndicator {background: #00000058;}

Menu principale trasparente

selfexplanatory

/ * Trasparenza del menu principale * /. SkinHeader.focuscontainer-x.skinHeader-confondo.skinHeader-sfocato {sfondo: nessuno; colore di sfondo: rgba (0, 0, 0, 0);}. skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.noHomeButtonHeader {background: none; colore di sfondo: rgba (0, 0, 0, 0);}

Espandi i pulsanti della scheda

Espandi pulsanti, suggerimenti, generi di schede, ecc. Di default sono molto piccoli, specialmente sui cellulari.

/ * Regola sia "regolazione della dimensione" che "dimensione" per modificare la dimensione * /. HeaderTabs.sectionTabs {text-size-Adjust: 110%; font-size: 110%;}. pageTitle {margin-top: auto; margin-bottom: auto;}. emby-tab-button {riempimento: 1.75em 1.7em;}

I pulsanti nella scheda espansa e nel menu trasparente si presentano così:

Pagina di accesso minimalista

Questo sembra ancora migliore insieme al menu in alto trasparente.

/ * Riduci il modulo di accesso * / #loginPage .readOnlyContent, #loginPage form {max-width: 22em;} / * Nascondi il testo "per favore accedi", il margine è per impedire che il modulo di login si sposti troppo in alto * / #loginPage h1 {display: none} #loginPage .padded-left. padded-right page.padded-bottom {sample: 50px} / * Nascondi i pulsanti "manual" e "forgotten" * / #loginPage .raised.cancel.block.btnManual.emby button {sample: none} #loginPage .raised.cancel.block .btnButtonPassword.emby forgotten.btn {esempio: nessuno}

Anteprime di episodi stilizzati

Le anteprime degli episodi in Season View sono ridimensionate in base alla risoluzione orizzontale, il che fa sprecare molto spazio nel riepilogo degli episodi e la pagina verticale alta richiede molto scorrimento per navigare. Questo codice riduce l'altezza delle voci degli episodi per ridurre la necessità di scorrimento verticale su schermi di grandi dimensioni.

/ * Dimensione episodio Visualizza in anteprima le immagini in modo più compatto * /. ListItemImage.listItemImage-large.itemAction.lazy {height: 110px;}. ListItem-content {height: 115px;}. Secondary.listItem-overview.listItemBodyText {altezza: 61px; margine: 0;}

Informazioni sul cast più piccolo ed elegante

Ciò cambierà radicalmente lo stile delle informazioni di trasmissione in qualcosa di molto simile a come fa il plex. Il tema Purple Haze ha già arrotondato le informazioni sul cast, ma alla stessa dimensione di tutto il resto, questa sostituzione si tradurrà in miniature leggermente più piccole e funziona anche con tutti gli altri temi.

/ * Riduci e proietta le miniature quadrate (o rotonde) * / #castContent .card.overflowPortraitCard.personCard.card-hoverable.cardwithuserdata {larghezza: 4,2 cm! Importante; dimensione carattere: 90%! important;} #castContent .card.overflowPortraitCard. personaTarjeta.comocon utilizzo dei dati {larghezza: 4,2 cm! importante; dimensione carattere: 90%! Importante;} / * Corretto comportamento del rapporto aspetto immagine, imposta il raggio del bordo su zero per le tessere quadrate * / #castContent .cardContent-button.cardImageContainer.coveredImage. cardContento.cardContent-shadow.itemAction.lazy {dimensione sfondo: copertina; ! importante; raggio del bordo: 2,5 cm;} #castContent .cardContent-button.cardContainer.Cover Image Default.CardBackground. defaultCardBackground1.cardContent. cardSombra.itemAcción {dimensione sfondo: copertina; ! importante; raggio del bordo: 2,5 cm;} #castContento .cardBotón.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground2.cardContent.cardSombra.content. itemAction {dimensione del fondo: copertina; ! importante; raggio del bordo: 2,5 cm;} #castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground3.cardContent.cardContent-shadow.itection {dimensione sfondo: copertina; ! importante; edge-radius: 2.5cm;} #castContent.contentButton.of.content Container.Image Covered Default imageCardBackground.DefaultCardBackground4.CardContent.Card Shade.contentAction {dimensione sfondo: copertina; ! importante; edge-radius: 2.5cm;} #cast Content.card Content.button.Container.Cover Image.defaultCardBackground.DefaultCardBackground5.cardContent.card Shade.content.Action {dimensione sfondo: copertina; ! importante; raggio del bordo: 2,5 cm;} #castContento. cardScalable {larghezza: 3,8 cm! importante; alto: 3,8 cm! importante; raggio-raggio: 2,5 cm;} #castContent .cardOverlayContainer.itemAction {raggio-raggio: 2,5 cm;} / * Pulsanti mouseover centrale * / #castContent .cardOverlayButton-br {bottom: 4%; a destra: 15%; larghezza: 70%;} #castContento.cardOverlayButton.cardOverlayButton-hover.itemAction.paper-icon-button-light {margin: auto;}

Colore di sfondo

.backgroundContenedor, .dialog, html {colore di sfondo: #0fd0d0; }

Scurisci lo sfondo

Questo scurisce lo sfondo di glitter blu e foschia viola, modifica la percentuale in base a quanto scuro lo vuoi. Più in basso è più scuro.

/ * Sfondo scuro, funziona solo con il bagliore blu * /. BackgroundContainer {colore di sfondo: #000000; filtro: luminosità (50%);}

Intestazione destra

Questo modifica i colori dei pulsanti cast, ricerca e utente in alto a destra.

.headerRight {color: giallo; }

Pannello console

Modifica il colore del pannello dei menu a sinistra.

.mainDrawer-scrollContainer {color: giallo; }

Pagina generale

Pannello .control Forma generale {colore: giallo; }

Colore del bordo

Ciò cambierà il colore del bordo dei campi di testo e dei menu a discesa.

.emby-input, .emby-textarea, .emby-select {border-color: #d00000; }

Ciò influirà sul colore del bordo dei campi di testo e dei menu a discesa selezionati.

.emby-input: focus, .emby-textarea: focus, .emby-select-withcolor {border-color: #ffffff! important; }

Mod. Intestazione completa

.skinHeader, .mainDrawer, .emby-input, .emby-textarea, .emby-select, .navMenuOption-selected, .cardBox, .paperList {background: #ff9475; }

Hot Dog e Catsup

Un esempio di un tema di colore.

.skinHeader, .mainDrawer, .emby-input, .emby-textarea, .emby-select, .navMenuOption-selected, .cardBox, .paperList {background: #ff9475;}. emby-input, .emby-textarea, .emby- selezionare {border-color: #fdbe7d;}. backgroundContainer.withBackdrop, .backdropContainer, .backgroundContainer {background: #fdbe7d;} #myPreferencesMenuPage .listItemBodyText, .emby-tab-button [data-index3, 0 "] 0 div> div> div> a: nth-child (dispari),. button-submit,. mainAnimatedPage *: nth-child (dispari),. dashboardGeneralForm *: nth-child (dispari),. mainDrawer-scrollContainer *: nth-child (dispari),. headerRight *: nth-child (dispari) {color: rosso;} #miPreferencesMenuPage. listItemIcon, .emby-tab-button [data-index = "1"], #myPageMenuPreferences; div; div; div; div; div; a: nth-child (even),. mainAnimatedPage *: nth-child (even),. dashboardGeneralForm *: nth-child (even),. mainDrawer-scrollContainer *: nth-child (even),. headerRight *: nth-child (even) .cancel {color: yellow;}

Floating Now Playing Controls

/ * altezza fissa per la riga inferiore * /: root {--fixed-element-up: 95px;} / * Ora toccando la barra nel piè di pagina * /. nowPlayingBar {larghezza: 650px; indice z: 10; posizione: fissa; su: 300px; altezza: 120 px; Stile del bordo: solido; colore bordo: bianco; colore di sfondo: nero; margine sinistro: 50%;} / * unico figlio di nowPlayingBar * /. nowPlayingBarTop {height: 5px! important; larghezza massima: 500px superiore: 10px;} / * Barra di ricerca dell'avanzamento della canzone * /. nowBar in usePositionContainer {position: relative; Sopra: 1.0em! Important;} / * Contenitore contenente la miniatura dell'album, l'artista e il nome dell'album * /. NowPlayingBarInfoContainer {position: fixed! Important; sinistra: 12px; sopra: 34px; altezza: 60px; larghezza: 1100px;} / * Mantiene elementi successivi, traccia precedente, riproduzione / pausa, elementi successivi e temporali * /. nowPlayingBarCenter {position: relative! important; sinistra: 32px; sopra: var (- fixed-element-above); larghezza min: 500px;} / * Mantieni silenzio, contenitore con cursore del volume, pulsanti di ripetizione, preferiti e telecomando * /. nowPlayingBarRight {larghezza: 402px! important; sinistra: -60px;} / * pulsante mute * /. muteButton {position: relative; su: var (- item-up);} / * Cursore del volume * /. nowPlayingBarVolumeSliderContainer {position: relative; a sinistra: -4px; top: var (- top-element);} / * Attiva / disattiva il pulsante di ripetizione * /. toggleRepeatButton {position: relative! important; a sinistra: -20px; top: var (- top-element);} / * Preferito * /. nowPlayingBarUserDataButtons {position: relative; a sinistra: -4px; top: var (- top-element);} / * Remote Control * /. remoteControlButton {left: -110px; top: var (- top-element);}

Link alla community

Alcuni collegamenti a luoghi in cui i CSS personalizzati sono stati discussi e condivisi.

CSS personalizzato - aggiornato per 10.5.0 da jellyfin

CSS personalizzato Easy Jellyfin da jellyfin

https://emby.media/community/index.php?/topic/18046-custom-css-with-emby-web-app/