CSSのカスタマイズ

「ダッシュボード>全般」では、「カスタムCSS」フィールドを使用してオーバーライドを入力できます。オーバーライドは、Jellyfin CSSスタイルシートに適用されます。

カスタムCSSは、色の変更、レイアウト、要素のサイズ、動作などのインターフェースのカスタマイズを提供します。以下は、適用できるさまざまな変更のリストです。 CSSの変更は、WebクライアントとAndroidアプリケーションの両方で機能します。コードは記述された順序で適用され、コードは以前に設定されたカスタムCSSをオーバーライドできます！重要はすべてをオーバーライドします。詳細については、CSS固有性を参照してください。これらの変更を実装するには、[ダッシュボード]> [一般]> [カスタムCSS]に移動します。特異性の追加の情報源は、特異性です。

CSSの経験がほとんどないかまったくない場合は、さまざまなオンラインリソースとチュートリアルを見つけることができます。また、次の変更を例として使用すると、Jellyfinインスタンスに独自の変更を加えるのは非常に簡単です。

CSSの概要

w3schoolなどのサイトを使用して、CSSについて詳しく学ぶことができます。以下は、すでに行った変更の基本的な編集を可能にするいくつかの非常に基本的な詳細です。

色

CSSは複数のカラー形式をサポートします。そのほとんどは通常16進数です。しかし、テキストも単純に機能します。 「黄色」を取得するには、「黄色」と書くだけです。これは、事前設定された黄色を使用します。特定の色を取得するには、以下の16進コードなどの正確な色データを使用する必要があります。

16進数のカラーコードの例：

#5dd000緑
#0000d0ブルー
#d00000赤
#00000058透明な黒

16進数のカラーチャートを表示して、任意の色のコードを取得します。

/ *と* /の間のコードまたはテキストのセクションはコメントを示し、無視されます。これにより、コードの特定のセクションの機能の説明を追加して、簡単に識別できるようにすることができます。また、コードを削除せずに無効にすることもできます。たとえば

/ *これをコードの上に追加して、それが何をするかを伝える* /

CSSチェーン

CSSをチェーンして、異なるセクションを一緒に変更できます。この例は、「ボーダー色」のmodです。変更する要素をリストし、それらすべてに適用される変更を行います。

変更のリスト

これらのいずれかを適用するには、CSSコードをコピーして[カスタムCSS]フィールドに貼り付けます。複数の変更を使用するには、フィールドに次々にそれらを追加します。適用されたコードはフィールドに残ります。変更を削除するには、フィールド内の対応するコードを削除またはコメント化します。変更は構成ページが保存されるとすぐに有効になるため、再起動する必要はありません。

インジケーターを再現

これは、再生/観察インジケータに影響します。色付きの六角形を必要な値に置き換えます。

modなし

緑

.playedIndicator {i}：#5dd000; }

16進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%; font-size：110%;}。pageTitle {margin-top：auto; margin-bottom：auto;}。emby-tab-button {padding：1.75em 1.7em;}

展開されたタブと透明なメニューのボタンは次のようになります。

シンプルなログインページ

透明なトップメニューと合わせてさらによく見えます。

/ *ログインフォームを減らします* / #loginPage .readOnlyContent、#loginPage form {max-width：22em;} / *「ログインしてください」というテキストを非表示にします。マージンは、ログインフォームが上に移動しすぎないようにするためです* / #loginPage h1 {display：none} #loginPage .padded-left。 padded-right page.padded-bottom {sample：50px} / *「manual」ボタンと「forgotten」ボタンを非表示にする* / #loginPage .raised.cancel.block.btnManual.emby button {sample：none} #loginPage .raised.cancel.block .btnButtonPassword.emby forgotten.btn {サンプル：なし}

様式化されたエピソードのプレビュー

シーズンビューでのエピソードのプレビューは、水平解像度に基づいてサイズが設定されているため、エピソードの概要で多くのスペースが無駄になり、垂直方向のページが高いため、スクロールするのに多くのスクロールが必要になります。このコードは、エピソードエントリの高さを減らして、大画面での垂直スクロールの必要性を減らします。

/ *エピソードサイズよりコンパクトに画像をプレビュー* /。ListItemImage.listItemImage-large.itemAction.lazy {height：110px;}。ListItem-content {height：115px;}。Secondary.listItem-overview.listItemBodyText {高さ：61px;マージン：0;}

最小かつ最もスタイリッシュなキャストに関する情報

これにより、放送情報のスタイルが、プレックスの動作と非常によく似たものに劇的に変わります。パープルヘイズテーマには既に丸められたキャスト情報がありますが、他のすべてと同じサイズで、このオーバーライドによりサムネイルが多少小さくなり、他のすべてのテーマでも機能します。

/ *正方形（または円形）のサムネイルを縮小して投影します* / #castContent .card.overflowPortraitCard.personCard.card-hoverable.cardwithuserdata {width：4.2cm！Important;フォントサイズ：90%！重要;} #castContent .card.overflowPortraitCard。 personaTarjeta.comoconデータ使用{幅：4.2cm！重要;フォントサイズ：90%！重要;} / *画像のアスペクト比の動作を修正し、正方形のタイルのエッジ半径をゼロに設定* / #castContent .cardContent-button.cardImageContainer.coveredImage。 cardContento.cardContent-shadow.itemAction.lazy {background size：cover; ！重要です。エッジ半径：2.5cm;} #castContent .cardContent-button.cardContainer.Cover Image Default.CardBackground.DefaultCardBackground1.cardContent。 cardSombra.itemAcción{背景サイズ：カバー; ！重要です。エッジ半径：2.5cm;} #castContento .cardBonton.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground2.cardContent.cardSombra.content。 itemAction {fund size：cover; ！重要です。エッジ半径：2.5cm;} #castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground3.cardContent.cardContent-shadow.itection {background size：cover; ！重要なedge-radius：2.5cm;} #castContent.contentButton.of.content Container.Image Covered Default imageCardBackground.DefaultCardBackground4.CardContent.Card Shade.contentAction {background size：cover; ！重要です。 edge-radius：2.5cm;} #cast Content.card Content.button.Container.Cover Image.defaultCardBackground.DefaultCardBackground5.cardContent.card Shade.content.Action {background size：cover; ！重要です。エッジ半径：2.5cm;} #castContento。 cardScalable {幅：3.8cm！重要です。高：3.8cm！重要です。 radius-edge：2.5cm;} #castContent .cardOverlayContainer.itemAction {radius-edge：2.5cm;} / *マウスオーバーボタンを中央に配置* / #castContent .cardOverlayButton-br {bottom：4%;右：15%;幅：70%;} #castContento.cardOverlayButton.cardOverlayButton-hover.itemAction.paper-icon-button-light {margin：auto;}

背景色

.backgroundContenedor、.dialog、html {background color：#0fd0d0; }

背景を暗くする

これにより、青いキラキラと紫色のもやの背景が暗くなり、希望する暗さに応じてパーセンテージを編集します。低いほど暗くなります。

/ *暗い背景、青い輝きでのみ動作します* /。BackgroundContainer {背景色：#000000;フィルター：明るさ（50%）;}

右ヘッダー

右上のキャスト、検索、ユーザーボタンの色を変更します。

.headerRight {色：黄色; }

コンソールパネル

左側のメニューパネルの色を変更します。

.mainDrawer-scrollContainer {色：黄色; }

一般ページ

.control panel General form {color：yellow; }

ボーダーカラー

これにより、テキストフィールドとドロップダウンメニューの境界線の色が変更されます。

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

これは、選択したテキストフィールドとドロップダウンメニューの境界線の色に影響します。

.emby-input：focus、.emby-textarea：focus、.emby-select-withcolor {border-color：#ffffff！Important; }

完全なヘッダーMod

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

ホットドッグとCatsup

カラーテーマの例。

.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 [data-index = "0"]、1TP3 div> div> div> a：nth-child（奇数）、。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"]、#myPageMenuPreferences; 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;}

フローティング再生中のコントロール

/ *下の行の高さを固定* /：ルート{--fixed-element-up：95px;} / *フッターのバーをタップする* /。nowPlayingBar {width：650px; z-index：10;位置：固定。 up：300px;高さ：120px;エッジスタイル：ソリッド。ボーダー色：白;背景色：黒;左マージン：50%;} / * nowPlayingBarの子のみ* /。nowPlayingBarTop {高さ：5px！重要;最大幅：500px上：10px;} / *曲の進行状況検索バー* /。nowBar in usePositionContainer {position：relative;上：1.0em！重要;} / *アルバムのサムネイル、アーティスト、アルバム名を含むコンテナ* /。nowPlayingBarInfoContainer {position：fixed！重要;左：12px; top：34px;高さ：60px; width：1100px;} / *次、前のトラック、再生/一時停止、次の時間要素を保持* /。nowPlayingBarCenter {position：relative！重要;左：32px;上記：var（-fixed-element-above）; min-width：500px;} / *サイレントに保つ、ボリュームスライダー付きコンテナ、リピートボタン、お気に入り、リモートコントロール* /。 nowPlayingBarRight {width：402px！重要;左：-60px;} / *ミュートボタン* /。muteButton {position：relative; up：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用に更新 から ゼリーフィン

Easy JellyfinカスタムCSS から ゼリーフィン

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