Personalização CSS

Em "Painel> Geral", o campo "CSS personalizado" pode ser usado para inserir qualquer substituição, que será aplicada à folha de estilos CSS do Jellyfin.

CSS personalizado fornece personalização de interface, como alterar cores, layout, tamanho do elemento e comportamento. Abaixo está uma lista de várias modificações que podem ser aplicadas. As modificações CSS funcionam no cliente Web e no aplicativo Android. O código será aplicado na ordem em que foi gravado, para que o código possa substituir o CSS personalizado definido anteriormente !, Importante substituirá tudo. Para saber mais, consulte Especificidade CSS. Para implementar essas alterações, vá para Painel> Geral> CSS personalizado. Uma fonte adicional de especificidade é a especificidade.

Se você tem pouca ou nenhuma experiência em CSS, pode encontrar vários recursos e tutoriais online, além de usar as seguintes modificações como exemplos, é muito fácil começar a fazer suas próprias alterações em sua instância do Jellyfin.

Visão geral do CSS

Você pode aprender mais sobre CSS usando sites como o w3school. Abaixo estão alguns detalhes muito básicos que permitirão que você faça edições rudimentares das modificações já feitas.

Cores

O CSS suporta vários formatos de cores, a maioria dos quais geralmente é hexadecimal. Mas o texto simplesmente funciona também. Para obter "amarelo", basta escrever "amarelo", isso usará uma cor amarela predefinida. Para obter uma cor específica, devem ser usados dados exatos, como códigos hexadecimais abaixo.

Alguns exemplos de códigos de cores hexadecimais:

#5dd000 Verde
#0000d0 azul
#d00000 vermelho
#00000058 Preto transparente

Vá aqui para uma tabela de cores hexadecimais para obter um código para qualquer cor.

Uma seção de código ou texto entre / * e * / indica um comentário e será ignorada. Isso permite que você adicione descrições do que qualquer seção específica do código faz para que seja facilmente identificável. Também pode ser usado para desativar o código sem excluí-lo. Por exemplo

/ * Isso pode ser adicionado acima do código para informar o que faz * /

Encadeamento CSS

CSS pode ser encadeado para modificar seções diferentes juntas. Um exemplo disso é o mod "Border color". Ele lista os elementos a serem modificados e faz uma alteração que se aplica a todos eles.

Lista de modificações

Para aplicar qualquer um desses, copie e cole o código CSS no campo "CSS personalizado". Para usar várias modificações, basta adicioná-las uma após a outra no campo. Qualquer código aplicado permanecerá no campo. Para excluir uma modificação, exclua ou comente o código correspondente no campo. As alterações entram em vigor imediatamente quando a página de configuração é salva e não precisa ser reiniciada.

Indicador reproduzido

Isso afetará o indicador de reprodução / observação. Substitua o hexágono colorido pelo valor desejado.

Sem mod

Verde

.playedIndicator {i}: #5dd000; }

Transparente escuro usando RGBA hexadecimal

/ * Torne o ícone observado escuro e transparente * /. PlayIndicator {background: #00000058;}

Menu superior transparente

Auto-explicativo

/ * Transparência do menu superior * / SkinHeader.focuscontainer-x.skinHeader-confondo.skinHeader-turva {background: none; cor de fundo: rgba (0, 0, 0, 0);}. skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-turva.noHomeButtonHeader {background: none; cor de fundo: rgba (0, 0, 0, 0);}

Expanda os botões da guia

Expanda botões da guia, dicas, gêneros, etc. Por padrão, eles são muito pequenos, especialmente em celulares.

/ * Ajuste "tamanho-ajuste" e "tamanho" para modificar o tamanho * /. HeaderTabs.sectionTabs {texto-tamanho-ajuste: 110%; tamanho da fonte: 110%;}. pageTitle {margin-top: auto; margin-bottom: auto;}. botão emby-tab {padding: 1.75em 1.7em;}

Os botões na guia expandida e no menu transparente são assim:

Página de login minimalista

Isso parece ainda melhor junto com o menu superior transparente.

/ * Reduza o formulário de login * / #loginPage .readOnlyContent, formulário #loginPage {max-width: 22em;} / * Oculte o texto "faça o login", a margem é para impedir que o formulário de login se mova muito * * / #loginPage h1 {display: none} #loginPage .padded-left. padded-right page.padded-bottom {sample: 50px} / * Ocultar os botões "manual" e "esquecido" * / #loginPage .raised.cancel.block.btnManual.emby botão {sample: none} #loginPage .raised.cancel.block .btnButtonPassword.emby forget.btn {sample: none}

Visualizações de episódios estilizados

As visualizações dos episódios no Season View são dimensionadas com base na resolução horizontal, o que faz com que muito espaço seja desperdiçado no resumo do episódio e a página vertical alta exige muita rolagem para navegar. Esse código reduz a altura das entradas do episódio para reduzir a necessidade de rolagem vertical em telas grandes.

/ * Tamanho do episódio Visualizar imagens de forma mais compacta * /. ListItemImage.listItemImage-large.itemAction.lazy {height: 110px;}. ListItem-content {height: 115px;}. Secondary.listItem-overview.listItemBodyText {altura: 61 px; margem: 0;}

Informações sobre o elenco menor e mais estiloso

Isso mudará drasticamente o estilo das informações de transmissão para algo muito semelhante ao modo como o plex faz. O tema Purple Haze já possui informações de elenco arredondadas, mas no mesmo tamanho de todo o resto, essa substituição resultará em miniaturas um pouco menores e funcionará com todos os outros temas.

/ * Reduza e projete as miniaturas quadradas (ou redondas) * / #castContent .card.overflowPortraitCard.personCard.card-hoverable.cardwithuserdata {width: 4.2cm! Important; tamanho da fonte: 90%! important;} #castContent .card.overflowPortraitCard. personaTarjeta.comocon uso de dados {width: 4.2cm! important; tamanho da fonte: 90%! Importante;} / * Corrija o comportamento da proporção da imagem, defina o raio da borda como zero para blocos quadrados * / #castContent .cardContent-button.cardImageContainer.coveredImage. cardContento.cardContent-shadow.itemAction.lazy {tamanho do plano de fundo: capa; importante; raio da borda: 2,5 cm;} #castContent .cardContent-button.cardContainer.Cover Image Padrão.CardBackground.DefaultCardBackground1.cardContent. cardSombra.itemAcción {tamanho do plano de fundo: capa; importante; raio da borda: 2,5cm;} #castContento .cardBonton.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground2.cardContent.cardSombra.content. itemAction {tamanho do fundo: capa; importante; raio da borda: 2,5 cm;} #castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground3.cardContent.cardContent-shadow.itection {tamanho do plano de fundo: capa; ! importante raio da borda: 2,5 cm;} #castContent.contentButton.of.content Container.Image Covered Default imageCardBackground.DefaultCardBackground4.CardContent.Card Shade.contentAction {tamanho do plano de fundo: capa; importante; raio da borda: 2,5 cm;} #cast Content.card Content.button.Container.Cover Image.defaultCardBackground.DefaultCardBackground5.cardContent.card Shade.content.Action {tamanho do plano de fundo: capa; importante; raio da aresta: 2,5cm;} #castContento. cardScalable {largura: 3.8cm! importante; altura: 3,8 cm! importante; borda do raio: 2,5cm;} #castContent .cardOverlayContainer.itemAction {borda do raio: 2,5cm;} / * Botões centrais do mouse * / #castContent .cardOverlayButton-br {bottom: 4%; direita: 15%; width: 70%;} #castContento.cardOverlayButton.cardOverlayButton-hover.itemAction.paper-ícone-botão-luz {margin: auto;}

Cor de fundo

.backgroundContenedor, .dialog, html {cor de fundo: #0fd0d0; }

Escurecer o fundo

Isso escurece o fundo do brilho azul e da névoa púrpura, edite a porcentagem dependendo da escuridão desejada. Mais baixo é mais escuro.

/ * Fundo escuro, só funciona com brilho azul * /. BackgroundContainer {cor de fundo: #000000; filter: brilho (50%);}

Cabeçalho direito

Isso modifica as cores dos botões de elenco, pesquisa e usuário no canto superior direito.

.headerRight {cor: amarelo; }

Painel do console

Modifique a cor do painel do menu à esquerda.

.mainDrawer-scrollContainer {color: amarelo; }

Página geral

painel de controle Forma geral {cor: amarelo; }

Cor da borda

Isso mudará a cor da borda dos campos de texto e os menus suspensos.

entrada de montagem, área de texto de montagem, seleção de montagem {cor da borda: #d00000; }

Isso afetará a cor da borda dos campos de texto e menus suspensos selecionados.

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

Mod de cabeçalho completo

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

Cachorros-quentes e ketchup

Um exemplo de um tema de cores.

.skinHeader, .mainDrawer, .emby-input, .emby-textarea, .emby-select, .navMenuOption selecionado, .cardBox, .paperList {background: #ff9475;}. emby-input, .emby-textarea, .emby- selecione {border-color: #fdbe7d;}. backgroundContainer.withBackdrop, .backdropContainer, .backgroundContainer {background: #fdbe7d;} #myPreferencesMenuPage .listItemBodyText, .emby-tab-button [data-index = "0"], 1TP3 div: div> div> a: enésimo filho (ímpar),. mainAnimatedPage *: enésimo filho (ímpar), dashboardGeneralForm *: enésimo filho (ímpar),. mainDrawer-scrollContainer *: enésimo filho (ímpar),. headerRight *: enésimo filho (ímpar) {color: red;} #miPreferencesMenuPage. listItemIcon, .emby-tab-button [data-index = "1"], #myPageMenuPreferences; div: div; div; div; div; a: enésimo filho (par),. mainAnimatedPage *: enésimo filho (par),. dashboardGeneralForm *: enésimo filho (par),. mainDrawer-scrollContainer *: enésimo filho (par),. headerRight *: enésimo filho (par). cancela {color: yellow;}

Controles flutuantes agora em execução

/ * altura fixa para a linha inferior * /: root {--fixed-element-up: 95px;} / * Agora tocando a barra no rodapé * /. nowPlayingBar {width: 650px; índice z: 10; posição: fixa; para cima: 300 px; altura: 120px; Estilo da borda: sólido; cor da borda: branco; cor de fundo: preto; margem esquerda: 50%;} / * filho único de nowPlayingBar * /. nowPlayingBarTop {height: 5px! important; largura máxima: 500 px superior: 10 px;} / * barra de pesquisa de progresso da música * /. nowBar em usoPositionContainer {position: relative; Acima: 1.0em! Important;} / * Contêiner que contém a miniatura, o artista e o nome do álbum * /. NowPlayingBarInfoContainer {position: fixed! Important; esquerda: 12 px; superior: 34px; altura: 60px; width: 1100px;} / * Mantém a próxima faixa anterior, a reprodução / pausa, a próxima e os elementos de tempo * /. nowPlayingBarCenter {position: relative! important; esquerda: 32px; acima: var (- elemento fixo acima); largura mínima: 500px;} / * Mantenha um recipiente silencioso com controle deslizante de volume, botões de repetição, favoritos e controle remoto * /. nowPlayingBarRight {width: 402px! important; esquerda: -60px;} / * botão mudo * /. muteButton {posição: relativa; up: var (- item-up);} / * Controle deslizante de volume * /. nowPlayingBarVolumeSliderContainer {position: relative; esquerda: -4px; top: var (- elemento superior);} / * Alterna o botão de repetição * /. toggleRepeatButton {position: relative! important; esquerda: -20px; top: var (- elemento superior);} / * Favorito * /. nowPlayingBarUserDataButtons {position: relative; esquerda: -4px; top: var (- elemento superior);} / * Controle Remoto * /. remoteControlButton {left: -110px; top: var (- elemento superior);}

Links da comunidade

Alguns links para lugares onde o CSS personalizado foi discutido e compartilhado.

CSS personalizado - atualizado para 10.5.0 de jellyfin

CSS personalizado Jellyfin fácil de jellyfin

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