Saltar al contenido

Personalización de CSS

En “Dashboard>General”, el campo “Custom CSS” puede ser usado para introducir cualquier anulación, que luego se aplicará a la hoja de estilos CSS de Jellyfin.

El CSS personalizado proporciona la personalización de la interfaz, como el cambio de colores, el diseño, el tamaño del elemento y el comportamiento. A continuación se muestra una lista de varias modificaciones que se pueden aplicar. Las modificaciones de CSS funcionan tanto en el cliente web como en la aplicación android. El código se aplicará en el orden en que se escribe para que el código pueda anular el CSS personalizado previamente establecido, !important anulará todo. Para aprender más, ver Especificidad de CSS. Para implementar estos cambios, ve a Dashboard> General> Custom CSS. Una fuente adicional para la especificidad es specifishity.

Personalización de CSS
Personalización de CSS

Si tienes poca o ninguna experiencia con CSS, se pueden encontrar varios recursos y tutoriales en línea, junto con el uso de las siguientes modificaciones como ejemplos es bastante fácil empezar a hacer sus propios cambios en su instancia de Jellyfin.

Información general sobre el CSS

Puedes aprender más sobre CSS usando sitios como w3school. A continuación hay algunos detalles muy básicos que te permitirán hacer ediciones rudimentarias de las modificaciones ya hechas.

Colores

El CSS soporta múltiples formatos de color, la mayoría de los cuales son típicamente hexadecimales. Pero simplemente el texto también funciona. Para obtener “amarillo” puedes simplemente escribir “amarillo”, esto usará un color amarillo preestablecido. Para obtener un color específico, se deben usar datos de color exactos como los códigos hexadecimales de abajo.

Algunos ejemplos de códigos de color hexagonales:

#5dd000 Verde
#0000d0 Azul
#d00000 Rojo
#00000058 Negro transparente

Ve aquí para una tabla de colores hexagonales para obtener un código para cualquier color.

Una sección de código o texto entre /* y */ indica un comentario, y será ignorado. Esto le permite añadir descripciones de lo que hace cualquier sección de código en particular para que sea fácilmente identificable. También se puede usar para desactivar el código sin borrarlo. Por ejemplo

/* Esto podría ser añadido encima del código para decirte lo que hace */

Encadenamiento CSS

El CSS puede ser encadenado para modificar diferentes secciones juntas. Un ejemplo de esto es el mod “Border color”. Enumera los elementos a modificar y realiza un cambio que se aplica a todos ellos.

Lista de modificaciones

Para aplicar cualquiera de estos, copie y pegue el código CSS en el campo “Custom CSS”. Para usar múltiples modificaciones, simplemente añádelas una tras otra en el campo. Cualquier código aplicado permanecerá en el campo. Para eliminar una modificación, borre o comente el código correspondiente del campo. Los cambios se aplican inmediatamente cuando se guarda la página de configuración y no es necesario reiniciarla.

Indicador reproducido

Esto afectará al indicador de reproducción/observación. Reemplaza el hexágono de color por el valor que quieras.

Sin mod

Verde

.playedIndicator {i}: #5dd000; }

Transparente oscuro usando el valor hexadecimal RGBA

/* Hacer que el icono observado sea oscuro y transparente */.playIndicador {fondo: #00000058;}

Menú superior transparente

Autoexplicativo

/* Transparencia del menú superior */.skinHeader.focuscontainer-x.skinHeader-confondo.skinHeader-blurred {fondo:none; color de fondo:rgba(0, 0, 0, 0);}. skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.noHomeButtonHeader {background:none; background-color:rgba(0, 0, 0, 0);}

Ampliar los botones de la pestaña

Amplía los botones de pestañas, sugeridos, géneros, etc. Por defecto son muy pequeños, especialmente en los móviles.

/* Ajustar tanto "size-adjustar" como "tamaño" para modificar el tamaño */.headerTabs.sectionTabs {text-size-adjust: 110%; font-size: 110%;}.pageTitle {margin-top: auto; margin-bottom: auto;}.emby-tab-button {padding: 1.75em 1.7em;}

Los botones de la pestaña ampliada y el menú transparente se ven así:

Página de inicio de sesión minimalista

Esto se ve aún mejor junto con el menú superior transparente.

/* Reducir el formulario de acceso */#loginPage .readOnlyContent, #loginPage form {max-width: 22em;}/* Ocultar el texto "please login", el margen es para evitar que el formulario de acceso se mueva demasiado hacia arriba */#loginPage h1 {display: none}#loginPage .padded-left. página acolchada-derecha.acolchada-inferior {muestra: 50px}/* Ocultar los botones "manual" y "olvidado" */#loginPage .raised.cancel.block.btnBotónManual.emby {muestra: ninguna}#loginPage .raised.cancel.block.btnBotónContraseña.emby olvidada.btn {muestra: ninguna}

Previsualizaciones de episodios estilizados

Los avances de los episodios en la vista de temporada tienen un tamaño basado en la resolución horizontal, lo que hace que se desperdicie mucho espacio en el resumen del episodio y que la página vertical alta requiera mucho desplazamiento para navegar. Este código reduce la altura de las entradas del episodio para reducir la necesidad de desplazamiento vertical en pantallas grandes.

/* Tamaño del episodio Vista previa de las imágenes de forma más compacta */.listItemImage.listItemImage-large.itemAction.lazy {altura: 110px;}.listItem-content {altura: 115px;}.secondary.listItem-overview.listItemBodyText {altura: 61px; margen: 0;}

Información sobre el reparto estilizado y más pequeño

Esto cambiará drásticamente el estilo de la información de la emisión en algo muy similar a como lo hace el plex. El tema de Purple Haze ya tiene información redondeada del reparto, pero en el mismo tamaño que todo lo demás, esta anulación dará lugar a miniaturas algo más pequeñas, y también funciona con todos los demás temas.

/* Encoger y proyectar las miniaturas cuadradas (o redondas) */#castContent .card.overflowPortraitCard.personCard.card-hoverable.cardwithuserdata {ancho: 4.2cm !importante; tamaño de letra: 90% !importante;}#castContent .card.overflowPortraitCard. personaTarjeta.comocon datos de uso {ancho: 4.2cm !importante; tamaño de fuente: 90% !importante;}/* Comportamiento correcto de la relación de aspecto de la imagen, poner el radio del borde a cero para las baldosas cuadradas */#castContent .cardContent-button.cardImageContainer.coveredImage. cardContento.cardContenido-sombra.itemAcción.perezoso {tamaño del fondo: cubierta; !importante; radio del borde: 2,5cm;}#castContento .cardContenido-botón.cardImagenContenedor.cubiertoImagen.predeterminadaCardFondo.predeterminadoCardFondo1.cardContenido. cardSombra.itemAcción {tamaño del fondo: cubierta; !importante; radio del borde: 2.5cm;}#castContento .cardBotón.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground2.cardContent.cardSombra.content. itemAcción {tamaño del fondo: portada; !importante; radio del borde: 2.5cm;}#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground3.cardContent.cardContent-shadow.itemAcción {tamaño del fondo: portada; ! importante; borde-radio: 2.5cm;}#castContento.tarjetaBotón.de.contenidoImagenContenedor.cubiertoImagen.por defectoCardFondo.por defectoCardFondo4.tarjetaContenido.tarjetaSombra.de.contenidoAcción {tamaño del fondo: portada; !importante; borde-radio: 2. 5cm;}#castContento.tarjetaBotón.de.contenidoImagenContenedor.cubiertaImagen.por defectoCardFondo.por defectoCardFondo5.tarjetaContenido.tarjetaSombra.de.contenidoAcción {tamaño del fondo: portada; !importante; radio del borde: 2.5cm;}#castContento . cardScalable {ancho: 3.8cm !importante; alto: 3.8cm !importante; borde-radio: 2.5cm;}#castContent .cardOverlayContainer.itemAction {borde-radio: 2.5cm;}/* Centrar los botones del mouseover */#castContent .cardOverlayButton-br {abajo: 4%; derecha: 15%; ancho: 70%;}#castContento.cardOverlayButton.cardOverlayButton-hover.itemAction.paper-icon-button-light {margin:auto;}

Color de fondo

.backgroundContenedor, .dialog, html {color de fondo: #0fd0d0; }

Oscurecer el fondo

Esto oscurece el fondo de brillo azul y neblina púrpura, edita el porcentaje dependiendo de cuán oscuro lo quieras. Más bajo es más oscuro.

/* Fondo oscuro, sólo funciona con el resplandor azul */.backgroundContainer {color de fondo: #000000; filtro: brillo(50%);}

Cabecera derecha

Esto modifica los colores de los botones de reparto, búsqueda y usuario en la parte superior derecha.

.headerRight { color: amarillo; }

Panel de la consola

Modifica el color del panel del menú de la izquierda.

.mainDrawer-scrollContainer { color: amarillo; }

Página general

.tablero de mandosForma general { color: amarillo; }

Color del borde

Esto cambiará el color del borde de los campos de texto y los menús desplegables.

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

Esto afectará al color del borde de los campos de texto y menús desplegables seleccionados.

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

Full Header Mod

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

Hotdogs y Catsup

Un ejemplo de un tema de color.

.skinHeader, .mainDrawer, .emby-input, .emby-textarea, .emby-select, .navMenuOption-selected, .cardBox, .paperList { background: #ff9475;}.emby-input, .emby-textarea, .emby-select { border-color: #fdbe7d;}.backgroundContainer.withBackdrop, .backdropContainer, .backgroundContainer { background: #fdbe7d;}#myPreferencesMenuPage .listItemBodyText,.emby-tab-button[data-index="0"],#myPreferencesMenuPage; div > div > div > a:nth-child(odd),.button-submit,. mainAnimatedPage *:nth-child(odd),.dashboardGeneralForm *:nth-child(odd),.mainDrawer-scrollContainer *:nth-child(odd),.headerRight *:nth-child(odd) { color: red;}#miPreferencesMenuPage . listItemIcon,.emby-tab-button[data-index="1"],#miPáginaMenúPreferencias; div;div;div;div;a:nth-niño(par),.mainPáginaAnimada *:nth-niño(par),. dashboardGeneralForm *:nth-child(even),.mainDrawer-scrollContainer *:nth-child(even),.headerRight *:nth-child(even).cancel { color: amarillo;}

Flotando Ahora Jugando Controles

/* altura fija para la fila inferior */:root { --elemento-fijo-arriba: 95px;}/* Ahora tocando barra en el pie de página */.nowPlayingBar { ancho: 650px; z-índice: 10; posición: fijo; arriba: 300px; altura: 120px; estilo de borde: sólido; color de borde: blanco; color de fondo: negro; margen izquierdo: 50%;}/* Hijo único de nowPlayingBar */.nowPlayingBarTop { altura: 5px !importante; anchura máxima: 500px superior: 10px;}/* Barra de búsqueda de progreso de la canción */.ahoraBarra en usoPosiciónContenedor { posición: relativa; arriba: 1.0em !importante;}/* Contenedor que contiene la miniatura del álbum, el artista y el nombre del álbum */.nowPlayingBarInfoContainer { position: fixed !important; left: 12px; top: 34px; altura: 60px; anchura: 1100px;}/* Mantiene los elementos siguiente, pista anterior, reproducir/pausar, siguiente y tiempo */.nowPlayingBarCenter { posición: relativa !importante; izquierda: 32px; arriba: var(--elemento-fijo-arriba); min-ancho: 500px;}/* Mantiene el silencio, contenedor con deslizador de volumen, botones de repetición, favoritos y del mando a distancia */. ahoraPlayingBarRight { ancho: 402px !importante; izquierda: -60px;}/* Botón de silencio */.muteButton { posición: relativa; arriba: var(--elemento-arriba);}/* Deslizador de volumen */. ahoraPlayingBarVolumeSliderContainer { posición: relative; izquierda: -4px; arriba: var(--elemento-arriba);}/* Botón Toggle repeat */.toggleRepeatButton { posición: relative !important; izquierda: -20px; arriba: var(--elemento-arriba);}/* Favorite */. ahoraPlayingBarUserDataButtons { posición: relativa; izquierda: -4px; arriba: var(--elemento-arriba);}/* Control remoto */.remoteControlButton { izquierda: -110px; arriba: var(--elemento-arriba);}

Enlaces de la comunidad

Algunos enlaces a lugares donde se ha discutido y compartido el CSS personalizado.

Custom CSS – updated for 10.5.0 from jellyfin

Easy Jellyfin custom CSS from jellyfin

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

es_ESEspañol