تخصيص CSS

في "Dashboard> General" ، يمكن استخدام حقل "Custom CSS" لإدخال أي تجاوز ، والذي سيتم تطبيقه بعد ذلك على ورقة أنماط Jellyfin CSS.

يوفر CSS المخصص تخصيصًا للواجهة مثل تغيير الألوان والتخطيط وحجم العنصر والسلوك. فيما يلي قائمة بالتعديلات المختلفة التي يمكن تطبيقها. تعمل تعديلات CSS في كل من عميل الويب وتطبيق android. سيتم تطبيق الكود بالترتيب الذي تمت كتابته فيه حتى يتمكن الكود من تجاوز CSS المخصص الذي تم تعيينه سابقًا !! هام سيتجاوز كل شيء. لمعرفة المزيد ، راجع خصوصية CSS. لتنفيذ هذه التغييرات ، انتقل إلى Dashboard> General> Custom CSS. مصدر إضافي للتحديد هو خصوصية.

إذا كان لديك القليل من الخبرة في CSS أو لا تملكها ، يمكنك العثور على العديد من الموارد والبرامج التعليمية عبر الإنترنت ، إلى جانب استخدام التعديلات التالية كأمثلة ، فمن السهل جدًا بدء إجراء التغييرات الخاصة بك على مثيل Jellyfin الخاص بك.

نظرة عامة CSS

يمكنك معرفة المزيد عن CSS باستخدام مواقع مثل w3school. فيما يلي بعض التفاصيل الأساسية للغاية التي ستسمح لك بإجراء تعديلات بدائية على التعديلات التي تم إجراؤها بالفعل.

الألوان

يدعم CSS تنسيقات ألوان متعددة ، معظمها عادة سداسي عشري. لكن النص يعمل ببساطة أيضًا. للحصول على "أصفر" ، يمكنك فقط كتابة "أصفر" ، وسيستخدم هذا اللون الأصفر المحدد مسبقًا. للحصول على لون معين ، يجب استخدام بيانات الألوان الدقيقة مثل الرموز السداسية العشرية أدناه.

بعض الأمثلة على رموز الألوان السداسية:

#5dd000 أخضر
#0000d0 أزرق
#d00000 أحمر
#00000058 أسود شفاف

اذهب هنا للحصول على مخطط ألوان ست عشري للحصول على رمز لأي لون.

يشير قسم من التعليمات البرمجية أو النص بين / * و * / إلى تعليق ، وسيتم تجاهله. يسمح لك هذا بإضافة أوصاف لما يقوم به أي قسم معين من التعليمات البرمجية بحيث يمكن التعرف عليه بسهولة. يمكن استخدامه أيضًا لتعطيل الرمز دون حذفه. على سبيل المثال

/ * يمكن إضافة هذا فوق الكود ليخبرك بما يفعله * /

تسلسل CSS

يمكن ربط CSS لتعديل الأقسام المختلفة معًا. مثال على ذلك هو تعديل "لون الحدود". يسرد عناصر التعديل ويقوم بإجراء تغيير ينطبق عليها جميعًا.

قائمة التعديلات

لتطبيق أي من هذه ، انسخ رمز CSS والصقه في حقل "CSS مخصص". لاستخدام تعديلات متعددة ، ما عليك سوى إضافتها واحدة تلو الأخرى في الحقل. سيبقى أي رمز مطبّق في الحقل. لحذف تعديل ، قم بحذف أو التعليق على الرمز المقابل في الحقل. تسري التغييرات فورًا عند حفظ صفحة التكوين ولا تحتاج إلى إعادة التشغيل.

تم استنساخ المؤشر

سيؤثر ذلك على مؤشر التشغيل / المراقبة. استبدل السداسي الملون بالقيمة التي تريدها.

بدون تعديل

أخضر

.playedIndicator {i}: #5dd000 ؛ }}

شفاف غامق باستخدام RGBA سداسي عشري

/ * جعل الرمز الذي تمت ملاحظته غامقًا وشفافًا * /. PlayIndicator {background: #00000058؛}

القائمة العلوية الشفافة

شرح ذاتي

/ * شفافية القائمة العلوية * /. SkinHeader.focuscontainer-x.skinHeader-confondo.skinHeader-blured {background: none؛ لون الخلفية: rgba (0 ، 0 ، 0 ، 0) ؛}. skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurr.noHomeButtonHeader {الخلفية: لا شيء؛ لون الخلفية: rgba (0 ، 0 ، 0 ، 0) ؛}

قم بتوسيع أزرار علامة التبويب

توسيع أزرار علامة التبويب والتلميحات والأنواع وما إلى ذلك. بشكل افتراضي فهي صغيرة جدًا ، خاصة على الهواتف المحمولة.

/ * اضبط كلاً من "تعديل الحجم" و "الحجم" لتعديل الحجم * /. HeaderTabs.sectionTabs {text-size-Adjust: 110%؛ حجم الخط: 110%؛}. pageTitle {margin-top: auto؛ الهامش السفلي: auto؛}. emby-tab-button {padding: 1.75em 1.7em؛}

تبدو الأزرار الموجودة على علامة التبويب الموسعة والقائمة الشفافة كما يلي:

صفحة تسجيل دخول بسيطة

يبدو هذا أفضل مع القائمة العلوية الشفافة.

/ * تقليل نموذج تسجيل الدخول * / #loginPage .readOnlyContent ، #loginPage النموذج {max-width: 22em؛} / * إخفاء النص "يرجى تسجيل الدخول" ، الهامش هو منع نموذج تسجيل الدخول من الانتقال بعيدًا * / #loginPage h1 {display: none} #loginPage .padded-left. padded-right page.padded-bottom {sample: 50px} / * إخفاء الزر "اليدوي" و "المنسي" * / #loginPage .raised.cancel.block.btnManual.emby الزر {sample: none} #loginPage .raised.cancel.block .btnButtonPassword.emby forgetotten.btn {sample: none}

معاينات الحلقة المنمقة

يتم تحديد حجم معاينات الحلقات في 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 {حجم الخلفية: cover؛ مهم! نصف قطر الحافة: 2.5 سم ؛} #castContent .cardContent-button.cardContainer.Cover Image Default.CardBackground.DefaultCardBackground1.cardContent. cardSombra.itemAcción {حجم الخلفية: الغلاف؛ مهم! نصف قطر الحافة: 2.5 سم ؛} #castContento .cardBonton.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground2.cardContent.cardSombra.content. itemAction {حجم الصندوق: غطاء؛ مهم! نصف قطر الحافة: 2.5 سم ؛} #castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground3.cardContent.cardContent-shadow.itection {حجم الخلفية: cover؛ ! مهم حافة نصف القطر: 2.5 سم ؛} #castContent.contentButton.of.content Container.Image الصورة الافتراضية المغطاة imageCardBackground.DefaultCardBackground4.CardContent.Card Shade.contentAction {حجم الخلفية: cover؛ مهم! edge-radius: 2.5cm؛} #cast Content.card Content.button.Container.Cover Image.defaultCardBackground.DefaultCardBackground5.cardContent.card Shade.content.Action {حجم الخلفية: cover؛ مهم! نصف قطر الحافة: 2.5 سم ؛} #castContento. cardScalable {عرض: 3.8 سم! مهم ؛ عالية: 3.8 سم! نصف قطر الحافة: 2.5 سم ؛} #castContent .cardOverlayContainer.itemAction {نصف قطر الحافة: 2.5 سم ؛} / * أزرار تمرير الماوس المركزي * / #castContent .cardOverlayButton-br {أسفل: 4% ؛ اليمين: 15% ؛ العرض: 70% ؛} #castContento.cardOverlayButton.cardOverlayButton-hover.itemAction.paper-icon-button-light {margin: auto؛}

لون الخلفية

.backgroundContenedor، .dialog، html {color color: #0fd0d0؛ }}

تعتيم الخلفية

يؤدي هذا إلى تعتيم خلفية بريق أزرق وضباب أرجواني ، وتعديل النسبة المئوية اعتمادًا على مدى الظلام الذي تريده. الجزء السفلي أغمق.

/ * خلفية داكنة ، يعمل فقط مع توهج أزرق * /. BackgroundContainer {لون الخلفية: #000000 ؛ عامل التصفية: السطوع (50%) ؛}

العنوان الأيمن

يؤدي هذا إلى تعديل ألوان أزرار الإرسال والبحث والمستخدم في الجزء العلوي الأيمن.

.headerRight {اللون: أصفر؛ }}

لوحة وحدة التحكم

قم بتعديل لون لوحة القائمة الموجودة على اليسار.

.mainDrawer-انتقل إلى المحتوى {color: yellow؛ }}

الصفحة العامة

لوحة التحكم العامة {اللون: أصفر؛ }}

لون الحدود

سيؤدي ذلك إلى تغيير لون حدود حقول النص والقوائم المنسدلة.

.emby-input ، .emby-textarea ، .emby-select {border-color: #d00000 ؛ }}

سيؤثر هذا على لون الحدود لحقول النص المحددة والقوائم المنسدلة.

.emby-input: focus، .emby-textarea: focus، .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 [data-index = "0"] ، 1 div> div> div> a: nth-child (odd)،. button-Submit،. mainAnimatedPage *: nth-child (odd)،. dashboardGeneralForm *: nth-child (odd)،. mainDrawer-rollContainer *: 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-rollContainer *: nth-child (even)،. headerRight *: nth-child (even) .cancel {color: yellow؛}

العائمة الآن تشغيل عناصر التحكم

/ * ارتفاع ثابت للصف السفلي * /: root {--fixed-element-up: 95px؛} / * الآن النقر على الشريط في التذييل * /. nowPlayingBar {width: 650px؛ مؤشر z: 10 ؛ الموقف: ثابت ؛ يصل: 300 بكسل ؛ الارتفاع: 120 بكسل ؛ نمط الحافة: صلب ؛ لون الحدود: أبيض ؛ لون الخلفية: أسود ؛ الهامش الأيسر: 50% ؛} / * الطفل الوحيد لـ nowPlayingBar * /. nowPlayingBarTop {الارتفاع: 5 بكسل! مهم ؛ الحد الأقصى للعرض: 500 بكسل أعلى: 10 بكسل ؛} / * شريط البحث عن تقدم الأغنية * /. nowBar قيد الاستخدام PositionContainer {position: نسبي؛ أعلاه: 1.0em! important؛} / * الحاوية التي تحتوي على الصورة المصغرة للألبوم والفنان واسم الألبوم * /. nowPlayingBarInfoContainer {الوظيفة: ثابتة! مهمة ؛ اليسار: 12 بكسل ؛ أعلى: 34 بكسل ؛ الارتفاع: 60 بكسل ؛ العرض: 1100 بكسل ؛} / * يحتفظ بالعناصر التالية ، والمسار السابق ، والتشغيل / الإيقاف المؤقت ، والعناصر التالية والوقت * /. nowPlayingBarCenter {الموضع: نسبي! مهم ؛ اليسار: 32 بكسل ؛ أعلاه: var (- العنصر الثابت أعلاه) ؛ الحد الأدنى للعرض: 500 بكسل ؛} / * التزم الصمت والحاوية مع شريط تمرير مستوى الصوت وأزرار التكرار والمفضلة ووحدة التحكم عن بُعد * /. nowPlayingBarRight {عرض: 402 بكسل! مهم ؛ يسار: -60px؛} / * زر كتم الصوت * /. زر كتم الصوت {position: نسبي؛ up: var (- item-up)؛} / * منزلق الصوت * /. nowPlayingBarVolumeSliderContainer {الوظيفة: نسبي؛ اليسار: -4px ؛ top: var (- top-element)؛} / * تبديل زر التكرار * /. toggleRepeatButton {الموضع: نسبي! مهم ؛ يسار: -20 بكسل ؛ top: var (- top-element) ؛} / * المفضلة * /. nowPlayingBarUserDataButtons {الوظيفة: نسبي؛ اليسار: -4px ؛ top: var (- top-element)؛} / * Remote Control * /. remoteControlButton {left: -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/