Jellyfin主题样式 CSS样式 界面美化

如果您几乎没有CSS经验，则可以找到各种在线资源和教程，并以以下修改为例，开始对Jellyfin实例进行自己的更改非常容易。

CSS概述

您可以使用w3school之类的网站来了解有关CSS的更多信息。以下是一些非常基本的细节，使您可以对已经进行的修改进行基本的编辑。

色彩

CSS支持多种颜色格式，其中大多数通常为十六进制。但是文字也可以。要获得“黄色”，您可以只写“黄色”，这将使用预设的黄色。为了获得特定的颜色，必须使用精确的颜色数据，例如下面的十六进制代码。

十六进制颜色代码的一些示例：

#5dd000绿色
#0000d0蓝色
#d00000红色
#00000058透明黑色

转到此处获取十六进制颜色图表，以获取任何颜色的代码。

/ *和* /之间的一段代码或文本表示注释，将被忽略。这使您可以添加对代码的任何特定部分所做的描述，以便易于识别。它也可以用来禁用代码而不删除它。举个例子

/ *这可以添加到代码上方以告诉您它的功能* /

CSS链接

CSS可以链接在一起以一起修改不同的部分。一个例子就是“边框颜色” mod。它列出了要修改的元素，并进行了适用于所有元素的更改。

修改清单

要应用其中任何一种，请将CSS代码复制并粘贴到“自定义CSS”字段中。要使用多个修改，只需在字段中一个接一个地添加它们即可。任何应用的代码将保留在该字段中。要删除修改，请在字段中删除或注释相应的代码。保存配置页面且不需要重新启动时，更改将立即生效。

指标转载

这将影响播放/观察指示。用所需的值替换彩色的六边形。

使用十六进制RGBA的深色透明

/ *使观察到的图标变黑透明* /。PlayIndicator {background：#00000058;}

透明顶部菜单

不言自明

/ *顶部菜单透明度* /。SkinHeader.focuscontainer-x.skinHeader-confondo.skinHeader-blurred {background：none;背景颜色：rgba（0，0，0，0）;}。 skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.noHomeButtonHeader {background：none;背景颜色：rgba（0，0，0，0）;}

展开标签按钮

展开标签按钮，提示，流派等。默认情况下，它们很小，尤其是在手机上。

/ *调整“大小调整”和“大小”以修改大小* /。HeaderTabs.sectionTabs {text-size-adjust：110%; fontTitle：110%;}。pageTitle {margin-top：auto; margin-bottom：auto;}。emby-tab-button {padding：1.75em 1.7em;}

展开的标签和透明菜单上的按钮如下所示：

极简登录页面

透明的顶部菜单看起来更好。

/ *减少登录表单* / #loginPage .readOnlyContent，#loginPage form {max-width：22em;} / *隐藏文本“ please login”，其边距是防止登录表单移得太远* / #loginPage h1 {显示：无} #loginPage .padded-left。右侧填充页面。底部填充{sample：50px} / *隐藏“手动”和“忘记”按钮* / #loginPage .raised.cancel.block.btnManual.emby按钮{sample：无} #loginPage .raised.cancel.block .btnButtonPassword.emby forgotten.btn {样本：无}

风格化的剧集预览

Season View中情节的预览是根据水平分辨率确定大小的，这会导致在情节摘要中浪费大量空间

较高的垂直页面需要大量滚动才能导航。此代码减少了剧集条目的高度，从而减少了在大屏幕上垂直滚动的需要。

/ *情节大小更紧凑地预览图像* /。ListItemImage.listItemImage-large.itemAction.lazy {height：110px;}。ListItem-content {height：115px;}。Secondary.listItem-overview.listItemBodyText {高度：61像素；边距：0；}

有关最小和最时尚的演员表的信息

这将大大改变广播信息的样式，使其与plex的工作方式非常相似。 Purple Haze主题已经具有四舍五入的演员表信息，但是与其他所有内容一样，此替代将导致缩略图略微缩小，并且也适用于所有其他主题。

/ *缩小并投影方形（或圆形）缩略图* / #castContent .card.overflowPortraitCard.personCard.card-hoverable.cardwithuserdata {宽度：4.2厘米！字体大小：90%！重要；} #castContent .card.overflowPortraitCard。 personaTarjeta.comocon数据使用情况{宽度：4.2厘米！重要；字体大小：90%！重要；} / *纠正图像长宽比行为，将正方形瓷砖的边缘半径设置为零* / #castContent .cardContent-button.cardImageContainer.coveredImage。 cardContento.cardContent-shadow.itemAction.lazy {背景尺寸：封面；重要！边缘半径：2.5厘米；} #castContent .cardContent-button.cardContainer.Cover Image Default.CardBackground.defaultCardBackground1.cardContent。 cardSombra.itemAcción{背景尺寸：封面；重要！边缘半径：2.5厘米；} #castContento .cardBoton.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground2.cardContent.cardSombra.content。 itemAction {资金规模：封面；重要！边缘半径：2.5厘米；} #castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground3.cardContent.cardContent-shadow.itection {背景尺寸：封面； ！重要的edge-radius：2.5cm;} #castContent.contentButton.of.content覆盖的容器默认图像imageCardBackground.DefaultCardBackground4.CardContent.Card Shade.contentAction {背景尺寸：封面；重要！ edge-radius：2.5cm;} #cast Content.card Content.button.Container.Cover Image.defaultCardBackground.DefaultCardBackground5.cardContent.card Shade.content.Action {背景尺寸：封面；重要！边缘半径：2.5厘米；} #castContento。 cardScalable {宽度：3.8cm！重要；高：3.8厘米！ radius-edge：2.5cm;} #castContent .cardOverlayContainer.itemAction {radius-edge：2.5cm;} / *鼠标悬停中键* / #castContent .cardOverlayButton-br {底部：4%;右：15%；宽度：70%；} #castContento.cardOverlayButton.cardOverlayButton-hover.itemAction.paper-icon-button-light {margin：auto;}

背景色

.backgroundContenedor，.dialog，html {背景颜色：#0fd0d0; }

调暗背景

这会使蓝色闪光和紫色雾气的背景变暗，根据您想要的黑暗程度来编辑百分比。越低越暗。

/ *深色背景，仅适用于蓝色发光* /。BackgroundContainer {背景色：#000000;过滤器：亮度（50%）

右页眉

这将修改右上方的投射，搜索和用户按钮的颜色。

.headerRight {颜色：黄色； }

控制台面板

修改左侧菜单面板的颜色。

.mainDrawer-scrollContainer {颜色：黄色； }

一般页面

。控制面板常规格式{颜色：黄色； }

边框颜色

这将更改文本字段的边框颜色和下拉菜单。

.emby-input，.emby-textarea，.emby-select {border-color：#d00000; }

这将影响所选文本字段和下拉菜单的边框颜色。

.emby-input：焦点，.emby-textarea：焦点，.emby-select-withcolor {border-color：#ffffff！

成品替换教程

替换流程也是非常简单打开设置-控制台-常规 在自定义css中输入

@import url("https://cdn.jsdelivr.net/gh/prayag17/JellySkin/default.css");

以上代码为自动更新版本，如果大佬发布新版后界面可能会发生变化 。

@import url("https://cdn.jsdelivr.net/gh/prayag17/JellySkin@latest/default.css");

此代码为稳定版，不会受后期更新影响，大家可以自行选择

@import url("https://cdn.jsdelivr.net/gh/prayag17/JellySkin@latest/addons/Logo.css");

此版本为带徽标版，可获得类似emby的体验，非自动更新版

@import url("https://cdn.jsdelivr.net/gh/prayag17/JellySkin@latest/addons/Logo.css");

此版本为带徽标自动更新版

@import url("https://prayag17.github.io/JellyFlix/default.css");

此版本为仿Netflix界面版本，可获得Netflix网页版界面效果，此版本如图所示 大家需要的话可以试下