跳到内容

CSS定制

在“控制台>常规”中,“自定义CSS”字段可用于输入任何替代,然后将其应用于Jellyfin CSS样式表。

自定义CSS提供了界面自定义功能,例如更改颜色,布局,元素大小和行为。下面列出了可以应用的各种修改。 CSS修改可在Web客户端和android应用程序中使用。将按照编写的顺序应用代码,以便代码可以覆盖先前设置的自定义CSS,重要的将覆盖所有内容。要了解更多信息,请参阅CSS特异性。要实现这些更改,请转至仪表板>常规>自定义CSS。特异性的另一个来源是特殊性。

 CSS定制CSS定制

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

CSS概述

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

色彩

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

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

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

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

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

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

CSS链接

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

修改清单

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

指标转载

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

没有国防部

绿色的

.playedIndicator {i}:#5dd000; }

使用十六进制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!重要; }

全头模组

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

热狗和猫

颜色主题的示例。

.skinHeader,.mainDrawer,.emby-input,.emby-textarea,.emby-select,.navMenuOption-selected,.cardBox,.paperList {background:#ff9475;}。emby-input,.emby-textarea,.emby-选择{border-color:#fdbe7d;}。backgroundContainer.withBackdrop,.backdropContainer,.backgroundContainer {background:#fdbe7d;} #myPreferencesMenuPage .listItemBodyText,.emby-tab-button [数据索引=“ 0”],1TP3 div> div> div> a:第n个子元素(奇数),.按钮提交,。 mainAnimatedPage *:第n个子项(奇数),. dashboardGeneralForm *:第n个子项(奇数),. mainDrawer-scrollContainer *:nth个子项(奇数),. headerRight *:第n个子项(奇数){颜色:红色;} #miPreferencesMenuPage。 listItemIcon,.emby-tab-button [数据索引=“ 1”],#myPageMenuPreferences; div; div; div; div; a:nth-child(even),。mainAnimatedPage *:nth-child(even),。 dashboardGeneralForm *:nth-child(偶数),. mainDrawer-scrollContainer *:nth-child(偶数),. headerRight *:nth-child(偶数)。cancel{颜色:黄色;}

浮动正在播放的控件

/ *底行的固定高度* /:根{--fixed-up-up:95px;} / *现在点击页脚中的bar * /。nowPlayingBar {width:650px; z索引:10;位置:固定上:300px;高度:120像素;边缘样式:实心;边框颜色:白色;背景颜色:黑色;左边距:50%;} / * nowPlayingBar的唯一子对象* /。nowPlayingBarTop {高度:5像素!重要;最大宽度:500像素顶部:10像素;} / *歌曲进度搜索栏* /。nowBar in usePositionContainer {position:relative;上图:1.0em!Important;} / *包含专辑缩略图,艺术家和专辑名称的容器* /。nowPlayingBarInfoContainer {位置:固定!重要;左:12px;顶部:34px;高度:60px; width:1100px;} / *保留下一个,上一个曲目,播放/暂停,下一个和时间元素* /。nowPlayingBarCenter {位置:相对!重要!左:32px;上面:var(-固定元素以上); min-width:500px;} / *保持静音,带有音量滑块,重复按钮,收藏夹和遥控器的容器* /。 nowPlayingBarRight {width:402px!Important;左:-60px;} / *静音按钮* /。MutantButton {位置:相对;上:var(-item-up);} / *音量滑块* /。 nowPlayingBarVolumeSliderContainer {position:relative;左:-4px; top:var(-top-element);} / *切换重复按钮* /。toggleRepeatButton {位置:相对!重要;左:-20px; top:var(-top-element);} / *最喜欢的* /。 nowPlayingBarUserDataButtons {position:relative;左:-4px; top:var(-top-element);} / *远程控制* /。remoteControlButton {左:-110px; top:var(-top-element);}

社区链接

一些讨论和共享自定义CSS的地方的链接。

自定义CSS-已针对10.5.0更新 来自 果冻

简易Jellyfin自定义CSS 来自 果冻

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

zh_CN简体中文
es_ESEspañol hi_INहिन्दी arالعربية pt_BRPortuguês do Brasil bn_BDবাংলা ru_RUРусский ja日本語 de_DEDeutsch fr_FRFrançais it_ITItaliano zh_CN简体中文